/**
 * player-styles-410.css - the beta Player's one stylesheet (PLAN_PLAYER_410.md, part A).
 *
 * Until b28 the beta's CSS lived in four places that leaned on their load order:
 * player-styles-400.css, player-beta-menu.css, an inline <style> block in beta.php and
 * player-beta-screens.css. b29 put them in this file one after the other (phase 1); phase 2 folded
 * them into one rule per thing (b30-b34).
 *
 * A section per part of the page, in the order the page is met: tokens and base, the top bar and
 * the menu, the map and what sits on it, the four screens, the search panel, notices and dialogs,
 * and the layout of the open sidebar from 768px, which has to stay last.
 *
 * It is CSS only. Much of the markup it styles is written by scripts (smplayer-410.js, and
 * js2/smp-ui.js, ra-social-2.js and slidebars.js, which index.php shares), and where one of them
 * puts a colour or a size in a style attribute, the rule that answers it needs !important. Every
 * !important in this file says what it is fighting; the few that may no longer be fighting
 * anything (the map markers') say so too.
 *
 * The palette is the Editor's (editor/sonicmaps-401.css, --ed-*). The map's own blues - the
 * position dot, the zones, the POI numbers - are not part of the theme and do not change.
 */

/* ---------- Fonts ---------- */

/* Manrope, the UI face (--smp-sans), self-hosted for the reason Marcellus and Roboto are (see
   /assets/fonts/fonts.css): the service worker can precache our own woff2 files, but never the
   fonts.gstatic.com ones a Google stylesheet points at, so offline the Player fell back to the
   system font. Here and not in fonts.css because index.php shares that file (?v=1, and it is in
   sw-400.js's precache list).
   One variable file per subset, covering every weight from 400 to 800, which is what the page
   uses. Only latin and latin-ext, as in fonts.css: enough for the four UI languages. A title in
   Cyrillic or Greek falls back to the system font, as it does with Marcellus.
   Source, pinned by the version in each filename: Manrope v20, from
   https://fonts.googleapis.com/css2?family=Manrope:wght@400..800 (15/10/2026); unicode-range
   copied verbatim from that stylesheet. The latin file is preloaded by beta.php. */
@font-face{
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url(/assets/fonts/manrope-v20-latin-var.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url(/assets/fonts/manrope-v20-latin-ext-var.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */

:root{
    --smp-bg-950: #141619;  /* bars */
    --smp-bg-900: #1A1D21;  /* screens, and a field inside a card */
    --smp-bg-800: #24282E;  /* cards and fields */
    --smp-bg-700: #2F343B;  /* secondary button */
    --smp-hair:   #262B31;  /* separator inside a surface */
    --smp-line:   #363C44;  /* border of a card or a field, always 1px */
    --smp-line-2: #434A54;  /* border of a notice or a secondary button */
    --smp-ink:    #F4F6F8;
    --smp-ink-2:  #DDE1E6;
    --smp-body:   #C9CFD6;  /* descriptions */
    --smp-muted:  #A4ABB4;  /* author, distance, country */
    --smp-accent:      #4f8ed9;  /* switch on */
    --smp-accent-fill: #3d79d0;  /* filled button: white on it gives 4.8:1 */
    --smp-accent-ink:  #8fbdf5;  /* blue text and outlines on dark */
    --smp-gold-ink:    #F0BC6B;  /* warnings only */
    --smp-danger:      #DC9191;
    --smp-green:       #9CC04A;  /* "Player" in the wordmark and the logo, the active menu row */
    --smp-focus:  rgba(143, 180, 245, 0.55);
    --smp-scrim:  rgba(8, 9, 10, 0.66);
    --smp-sans:   'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* The menu's width. The 768px at which it becomes a sidebar is not a token - a custom property
       cannot be used in a media query - and is repeated in beta.php's menu script (matchMedia):
       keep the two in step. The script measures the panel rather than reading this. */
    --sm-menu-w: 260px;

    /* How long the menu takes to open and close, and everything that moves with it. The panel
       carries it, and two scripts read it back off the panel: slidebars.js, which copies it onto
       the page ([canvas]) as an inline transition-duration below 768px, and beta.php's menu
       script, which eases the map's camera with it. From 768px what moves aside uses it too. */
    --sm-slide: 350ms;
}

/* ---------- Base ---------- */

*{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
body,html{
    height: 100%;
    padding: 0;
    margin: 0;
    background-color: var(--smp-bg-900);
    touch-action: manipulation;
}
a{ color: inherit; text-decoration: none; }
input{ -webkit-user-select: text; user-select: text; }   /* the * rule above would make typed text unselectable */
[class*=js-]{ cursor: pointer; }

/* Lists only come from authors now (project descriptions keep UL/OL/LI, see sanitizeHTML in
   js2/smp-utils.js): the menu's own lists restate all of this. */
ul{ padding-left: 1em; }
ul li{
    list-style: none;
    font-size: 1.05em;
    border-bottom: 1px solid #2f3c471a;
}

.icon{ width: 21px; height: 21px; }
.icon:hover{ cursor: pointer; }

/* .far/.fas are matched alongside .fa because Font Awesome 5 splits the icons into per-face
   prefixes and an element can carry only one of them: in all.min.css `.far{font-weight:400}` is
   declared BEFORE `.fa,.fas{font-weight:900}`, so keeping `fa` on a regular-face icon as a styling
   hook would silently render it solid. */
.fa,.far,.fas{font-size:18px;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.fa-pulse{ font-size: clamp(80px, 15vw, 150px); }   /* the loading spinners */

/* ---------- Top bar (#menubar, one per screen) ---------- */

#menubar{
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    height: 50px;
    padding: 0 23px;
    background-color: var(--smp-bg-950);
    border-bottom: 1px solid var(--smp-hair);
}
#menubar .icon{ opacity: .9; fill: var(--smp-ink-2); }

/* The right padding is the gap to the wordmark, which follows the button. */
.menu-btn{ padding: 10px 14px 10px 10px; margin-left: -10px; }

/* margin-right:auto keeps the wordmark next to the button under #menubar's space-between, with or
   without #topright-btns after it.
   The font scales down with the viewport because js2/locate.js parks the locate button at 115px
   from the right edge (183px with a project open), absolutely positioned and therefore outside
   the bar's flex flow - so the wordmark has to fit in what is left rather than be pushed. */
.sm-wordmark{
    display: flex;
    align-items: baseline;
    gap: .33em;
    margin-right: auto;
    font-family: Marcellus, serif;
    font-size: min(21px, 5.1vw);
    line-height: 1;
    color: #fff;
    white-space: nowrap;
    pointer-events: none;
}
.sm-wordmark-player{ font-size: .62em; color: var(--smp-green); }

/* With a project open the bar also holds the lock button and the locate button moves left, to
   183px from the right edge - 215px counting its own width. The menu button ends 58px in, so
   "SonicMaps" alone has 100vw - 273px to fit in, and it is about 4.85 times its font size wide.
   html.sm-project-open is set by beta.php's menu script. */
@media (max-width: 479px){
    html.sm-project-open #map .sm-wordmark{ font-size: min(21px, calc((100vw - 281px) / 4.85)); }
    html.sm-project-open #map .sm-wordmark-player{ display: none; }
}
@media (max-width: 339px){
    html.sm-project-open #map .sm-wordmark{ display: none; }
}

/* The map's bar only: lock, basemap style, search. The lock buttons are shown by smp-ui.js with an
   inline display; the closed one is orange, which needs !important to beat `#menubar .icon`. */
#topright-btns{ display: flex; min-width: 70px; justify-content: space-between; }
#lockUI-closed, #lockUI-open{ display: none; }
#lockUI-closed{ fill: orange !important; }

/* Locate control (js2/locate.js). Replaces L.Control.Locate2's DOM. v3.4 positioned it by styling
   Leaflet's generic .leaflet-top corner container (z-index 3000, right 115px, top 5px) - those
   values are folded in here, on the control itself, so nothing depends on a library's layout
   scaffolding. locate.js moves `right` inline when a project opens. */
.sm-locate-control{
    position: absolute;
    top: 10px;
    right: 115px;
    z-index: 3000;
    margin: 0;
    box-shadow: none;
}
.sm-locate-control button{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    padding: 5px;
    background: transparent;
    border: none;
    color: var(--smp-ink-2);
    opacity: 0.9;
    cursor: pointer;
}
/* Follow mode: blue while the map is tracking, back to grey once the listener has taken manual
   control by dragging. */
.sm-locate-control.following button{ color: #2A93EE; }

/* ---------- Main menu ---------- */

/* A list with line icons on a graphite-to-sky gradient, with the site's skyline at the foot. A
   panel min(260px, screen - 64px) wide at every width: below 768px the page slides aside and a
   tap on it closes the menu; from 768px it stays open beside the page (see the end of the file).

   display:flex !important beats the inline display slidebars.js sets on the panel. Flat graphite
   behind the logo only; the gradient starts at Map (.sm-menu-sky). */
[off-canvas].sm-menu{
    display: flex !important;
    flex-direction: column;
    justify-content: flex-start;
    width: min(var(--sm-menu-w), calc(100vw - 64px));
    transition-duration: var(--sm-slide);
    background: var(--smp-bg-950);
    color: #fff;
    font-family: var(--smp-sans);
}

/* The logo is the round icon alone (images/SonicMaps-Icon.webp, 300px square, opaque: its own
   background is the panel's graphite to within a level, so the square does not show). Both words
   are text in Marcellus over its lower right corner: "SonicMaps" starts on the sphere and "Player"
   sits right-aligned under it. Positions are in px because the icon is: 112px in every layout,
   which puts its artwork (241 of the 300px) at about 90px. The shadow is for the letters that
   cross the sphere's bright rim. */
.sm-menu #brand-image{
    position: relative;
    box-sizing: border-box;
    width: 232px;
    padding: 21px 0 calc(4px + 2vh) 24px;
}
.sm-menu #brand-image img{ display: block; width: 112px; height: 112px; }
.sm-brand-name,
.sm-brand-player{
    position: absolute;
    right: 14px;
    font-family: Marcellus, serif;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
}
.sm-brand-name{
    top: 79px;
    font-size: 26px;
    color: #fff;
    text-shadow: 0 0 3px #000, 0 1px 2px rgb(0 0 0 / 70%);
}
.sm-brand-player{
    top: 106px;
    font-size: 18px;
    color: var(--smp-green);
}

/* 1 0 auto: fills the panel, and on a screen too short for the content it grows instead and the
   panel scrolls (slidebars.css gives [off-canvas] overflow-y:auto). */
.sm-menu-body{
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

/* From Map to the legal bar: it wraps the list and Create and takes the height the logo leaves, so
   the gradient always ends where the bar begins (the skyline stands there, on its lightest end),
   whatever the screen. Starts on the panel's graphite so the seam above it is invisible. */
.sm-menu-sky{
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, var(--smp-bg-950) 0%, #17233C 18%, #294d89 46%, #538ed9 76%, #a6cde7 100%);
}

/* Above the skyline: z-index only works on a positioned element. */
.sm-menu-nav{ position: relative; z-index: 1; padding: 12px 12px 10px; }

[off-canvas].sm-menu ul.menu{ margin: 0; padding: 0; list-style: none; }

/* Undoes the base `ul li` rule, which is there for the authors' lists. */
[off-canvas].sm-menu ul.menu li,
.sm-menu #editorLink{
    min-width: 0;
    height: auto;
    margin: 0.6vh 0 0;
    padding: 0;
    border: 0;
    list-style: none;
    font-family: inherit;
    font-size: inherit;
    line-height: normal;
}
[off-canvas].sm-menu ul.menu li:first-child{ margin-top: 0; }

/* Two groups (beta.php splits the list): space alone parts them, and it gives way on short
   screens - 20px from 900px of height, down to 5px (about one row gap) at 525px. */
[off-canvas].sm-menu ul.menu + ul.menu{ margin-top: clamp(5px, 4vh - 16px, 20px); }

[off-canvas].sm-menu ul.menu li a,
.sm-menu #editorLink a{
    display: flex;
    align-items: center;
    gap: 14px;
    box-sizing: border-box;
    height: 48px;
    padding: 0 14px;
    border-radius: 12px;
    background-color: transparent;
    color: #d1d9e2;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .15s ease-in-out;
}

/* The active row. The fill is translucent, not a fixed graphite: the row can be anywhere on the
   gradient. The green marks it on the icon and on a bar against the panel's left edge, square
   there and rounded towards the row; -12px is .sm-menu-nav's side padding, so the bar moves if
   that does. */
[off-canvas].sm-menu ul.menu li.selected a{
    position: relative;
    background-color: rgb(255 255 255 / 14%);
    color: #fff;
    font-weight: 600;
}
[off-canvas].sm-menu ul.menu li.selected a::before{
    content: "";
    position: absolute;
    left: -12px;
    top: calc(50% - 14px);
    width: 5px;
    height: 28px;
    border-radius: 0 5px 5px 0;
    background: var(--smp-green);
}

@media (hover: hover){
    [off-canvas].sm-menu ul.menu li:not(.selected) a:hover,
    .sm-menu #editorLink a:hover{
        background-color: rgba(255, 255, 255, 0.1);
    }
}

/* Create leaves the Player for the Editor: set off by space, as the two groups are (with the
   nav's 10px bottom padding it comes to the same 20px, giving way to 10px on short screens), and
   an arrow right after the label says it opens elsewhere. */
.sm-menu #editorLink{
    position: relative;
    z-index: 1;
    margin: 0 12px;
    padding: clamp(0px, 4vh - 26px, 10px) 0 0;
}
.sm-menu .sm-ico-ext{
    width: 16px;
    height: 16px;
    margin-left: -6px; /* 8px from the label, not the row's 14px gap: it reads as "Create ↗" */
    opacity: .7;
}

.sm-menu a:focus-visible{
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.sm-ico{
    flex: none;
    width: 25px;
    height: 25px;
    fill: none;
    stroke: #c2cfde;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
[off-canvas].sm-menu ul.menu li.selected .sm-ico{ stroke: var(--smp-green); }

/* Skyline and legal bar. The skyline stands on the legal bar and is out of the flow, so it never
   takes room from the list: on a tall screen there is gradient between the two, and on a short one
   it rises behind the last rows (the list is above it, see .sm-menu-nav) instead of disappearing.
   skyline-narrow.webp is drawn for this panel: 520 x 400, twice its 260px, so it goes in whole
   and unshifted. Only its top 150px show; from 130px down it is the legal bar's flat #080808,
   so the two join without a seam. */
.sm-menu-foot{ position: relative; }
.sm-menu-skyline{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 142px;
    background: url(/images/skyline-narrow.webp) left top / 100% auto no-repeat;
    pointer-events: none;
}
.sm-menu-legal{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 26px calc(16px + env(safe-area-inset-bottom, 0px));
    background: #080808;
    color: #C9D2DE;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.sm-menu-links span{ margin: 0 8px; opacity: .5; }
.sm-menu-ver{ font-weight: 500; opacity: .65; }

/* ---------- Map ---------- */

/* MapLibre documents touch-action:none on the map container as the way to stop the browser
   claiming pan/zoom gestures (v3.4 cancelled every touchmove over #map instead, which would fight
   MapLibre's own gesture handling). The background shows until the first tiles draw. */
#map{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #191a1a;
    touch-action: none;
}

/* The map canvas must never paint over the app chrome. Every overlay inside #map (#menubar
   3000, #projectbar 9100, #playpause 9001) already outranks this, but stating it removes any
   dependence on DOM order between MapLibre's canvas container and those siblings. */
.maplibregl-canvas-container{ z-index: 0; }

/* Hides every scrollbar in the page, not only the map's: the POI strip, the descriptions and the
   screens all scroll without one. */
::-webkit-scrollbar{ -webkit-appearance: none; display: none; }

/* OSM/ODbL requires the attribution to stay visible and legible, so this only tones it down to
   match the dark UI - it is never hidden outright. MapLibre renders it collapsed behind an (i)
   button on narrow screens (compact: true in map-init.js), which keeps it out of the way of
   the map without removing it. The background's !important is older than this file and does not
   seem needed: maplibre-gl.css sets it at the same specificity, and that file loads first. */
.maplibregl-ctrl-attrib{
    position: fixed;
    bottom: 0;
    z-index: 700;
    color: #7b7b7b;
    opacity: 0.8;
}
.maplibregl-map .maplibregl-ctrl-attrib{ background: rgb(43 43 43 / 70%) !important; }
.maplibregl-ctrl-attrib a{ color: #9aa0a6; }
.maplibregl-ctrl-attrib-button{ background-color: rgb(43 43 43 / 70%); }

/* The position marker (js2/locate.js). The heading cone is rotated to coords.heading and hidden
   whenever the device reports no heading (stationary, or desktop), which is most of the time
   outside an actual walk. */
.sm-locate-marker{ width: 24px; height: 24px; }
.sm-locate-dot{ display: block; }
.sm-locate-heading{
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    margin-left: -10px;
    margin-top: -28px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 16px solid rgba(42,147,238,0.7);
    transform-origin: 50% 28px;
}

/* Marker z-indexes. Both !important come from v3.4, where Leaflet wrote a z-index inline on every
   marker. MapLibre does not, and maplibre-gl.css sets none either, so they are probably no longer
   needed; left as they are because a marker hidden under another only shows on a real walk. */

/* The corrected position while snapping to the path (smplayer-410.js, showSnapMarker). */
.mydot{ z-index: 2000 !important; }

/* The remote-listening avatar: an <i class="fa fa-male"> inside the marker (smplayer-410.js,
   getUserMarker). MapLibre puts our class on the marker element itself, so the class alone is the
   selector - v3.4's `.leaflet-marker-icon.myListenIcon` matches nothing here. */
.myListenIcon{
    z-index: 5000 !important;
    text-align: center;
    text-shadow: 2px 2px 3px #363636;
    cursor: grab;
}
.myListenIcon:active{ cursor: grabbing; }
/* Invisible hit-area padding so the icon is easier to grab, especially on touch. A pseudo-
   element with negative inset extends the clickable region without growing .myListenIcon's
   own border box - growing that box directly would throw off MapLibre's percentage-based
   anchor transform (translate(-50%,-100%)) and make the icon float away from its real
   lng/lat. Clicks on generated content target the host element, so the marker's existing
   drag listeners keep working here with no JS changes. */
.myListenIcon::before{
    content: '';
    position: absolute;
    inset: -18px;
}
.fa-male{ font-size: 50px; line-height: 50px; }

/* ---------- Over the map: banners, play button, out-of-area bubble ---------- */

/* #topUItext: one line with an ellipsis (weak GPS, unlock, category messages). #mapnotice: the
   basemap-unavailable notice (js2/map-init.js, showMapNotice), centred on the map, well clear of
   #topUItext; unlike it, it wraps, because the translated sentences are longer than a phone is
   wide. pointer-events:none keeps the map draggable through it; z-index matches #menubar, so the
   project bar, the video window and the modal all stay on top.
   Manrope is wider than Marcellus, so #topUItext runs a little smaller than it did. */
#topUItext, #mapnotice{
    display: none;
    box-sizing: border-box;
    border-radius: 20px;
    background-color: rgba(20, 22, 25, 0.82);
    color: var(--smp-ink);
    font-family: var(--smp-sans);
    font-weight: 600;
    text-align: center;
}
#topUItext{
    position: absolute;
    top: 70px;
    z-index: 10000;
    width: 60%;
    height: 50px;
    margin-left: 20%;
    padding: 0 15px;
    font-size: calc(15px + 0.3vw);
    line-height: 50px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#mapnotice{
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3000;
    width: max-content;
    max-width: calc(100% - 32px);
    padding: 10px 18px;
    font-size: calc(12px + 0.4vw);
    line-height: 1.35;
    pointer-events: none;
}

/* The play button. smplayer-410.js moves `bottom` and swaps the border's opacity inline (36 idle,
   ba playing); the border here is only the starting state. */
#playpause{
    display: none;
    position: absolute;
    bottom: 70px;
    left: 0;
    right: 0;
    z-index: 9001;
    width: 50px;
    height: 50px;
    margin: auto;
    border: 4px solid #ffffff36;
    border-radius: 100%;
    color: white;
    text-align: center;
    line-height: 54px;
    opacity: 0.9;
}
#pause_btn{ padding: 15px; cursor: pointer; }

/* The progress rings, scoped to #playpause: MapLibre's map IS a <canvas>, so a bare `canvas`
   selector (harmless in v3.4, whose map was SVG) would offset the whole map by -35px and make it
   uninteractive. The offsets centre each 120x120 ring on the ~50px button; SMPProgressBar draws
   them at increasing radii so up to four simultaneously-playing zones each get their own ring. */
#playpause canvas{
    display: block;
    position: absolute;
    top: -35px;
    left: -35px;
    z-index: 3000;
    pointer-events: none;
}

#rewind_btn, #forward_btn{
    display: none;
    position: absolute;
    top: calc(50% - 3px);
    transform: translateY(-50%);
    width: 45px;
    height: 45px;
    filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.6));
    cursor: pointer;
}
#rewind_btn{ left: calc(50% - 110px); }
#forward_btn{ right: calc(50% - 110px); }

/* Intro Audio skip pill. startIntro() sets `bottom` to sit just above #playpause. */
#skipintro-btn{
    display: none;
    position: absolute;
    bottom: 167px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9001;
    padding: 7px 16px;
    border: 2px solid var(--smp-accent-ink);
    border-radius: 20px;
    background-color: rgba(20, 22, 25, 0.86);
    color: #fff;
    font-family: var(--smp-sans);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

/* "Not within walking distance": points at #person-btn in the project bar. That bar's five icons
   are centred in it and each is 21px + 2 x 6vw wide, so #person-btn sits 24vw + 42px left of the
   bar's middle. Measured from the bar (50%), not the viewport, because the bar is 260px narrower
   than the viewport while the menu is open. */
#bubble{
    display: none;
    position: absolute;
    bottom: 75px;
    left: calc(50% - 24vw - 75.5px);
    max-width: 220px;
    margin: 0 10px;
    padding: 20px 15px 20px 20px;
    border-radius: 10px;
    background: #23272f;
    filter: drop-shadow(3px 3px 4px #111111);
    color: var(--smp-ink-2);
    font-family: var(--smp-sans);
    font-size: 14px;
    line-height: 1.45;
    border: 1px solid #303133;
}
#bubble .fa-exclamation-circle{ padding-right: 5px; }
#bubble:after{
    content: '';
    position: absolute;
    display: block;
    bottom: -20px;
    left: 10%;
    z-index: 1;
    width: 0;
    margin-left: -10px;
    border-style: solid;
    border-width: 20px 10px 0;
    border-color: #23272f transparent;
}

/* The video window of a video zone (js2/vimeo-player.js), over the project bar. */
#vimeoplayer{
    display: none;
    position: fixed;
    bottom: 50px;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 500;
    box-sizing: border-box;
    width: 100%;
    max-width: 60vh;
    background-color: #2c2c2ccc;
    box-shadow: 0 -1vw 1vw #0000004d;
}

/* ---------- Project bar and POI strip ---------- */

/* Both keep their 50px: smp-ui.js positions the info sheet, the zone card and the POI strip at
   50px / 97px from the bottom, so nothing may add height to #projectbar or #poi-list - their
   hairlines are box-shadows for that reason. */
#projectbar{
    display: none;
    position: absolute;
    bottom: 0;
    z-index: 9100;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    height: 50px;
    background-color: var(--smp-bg-950);
    box-shadow: 0 -1px 0 var(--smp-hair);
}
/* The opacity of these icons is state, set inline by the scripts: 0.1 unavailable, 0.5 available,
   1 on. These are only the starting values. */
#projectbar .icon{
    padding: 7px 6vw;
    fill: var(--smp-ink-2);
    opacity: 0.5;
}
#card-btn.icon{ opacity: 0.1; pointer-events: none; }
#trash-btn{ display: none; }

#poi-list{
    display: none;
    position: fixed;
    bottom: 50px;
    z-index: 9010;
    box-sizing: border-box;
    width: 100%;
    padding: 8px 5px;
    overflow-x: scroll;
    background-color: var(--smp-bg-700);
    box-shadow: 0 -1px 0 var(--smp-hair);
}
.poi-item{
    display: flex;
    align-items: center;
    margin: 0 5px;
    border-radius: 20px;
    background-color: var(--smp-bg-800);
    box-shadow: inset 0 0 0 1px var(--smp-line);
    cursor: pointer;
}
.poi-item:active{ background-color: var(--smp-line); }
/* The number in the strip. On the map the numbers are baked into the marker image (map-init.js,
   bakePoiIcon), so they survive the satellite style; this is only the strip's copy. */
.poi-num{
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 20px;
    background-color: #609cd7;
    color: #fff;
    font-family: var(--smp-sans);
    font-size: 15px;
    font-weight: 600;
    line-height: 30px;
    text-align: center;
}
.poi-label{
    padding: 0 15px 0 10px;
    color: var(--smp-ink);
    font-family: var(--smp-sans);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

/* ---------- Project sheet (#projectinfo, over the map) ---------- */

/* Two-tone, a lighter column for the photo and Open and a darker one for the text, which carries
   on to the screen's edges beyond the 600px of .projectdetails. The lighter half has the search
   panel's topographic texture (b35). Three layers, top first: the gradient, now transparent on
   the left, hides the texture on the right; under it the texture; at the bottom the lighter
   colour. On a phone .metadata covers the right of the sheet with its own colour, so the texture
   only shows behind the photo, whatever the 50% split.
   Its size (b38): as wide as the lighter half - so, anchored to the left, it always covers that
   half without repeating (the drawing does not tile) - but never under 500px. With `cover` it
   took the whole sheet's width, which made its lines 3.5 times their size on a wide desktop and
   0.65 on a phone; now about half that on the desktop and 0.84 on a phone. */
#projectinfo{
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9010;
    box-sizing: border-box;
    overflow: hidden;
    background:
        linear-gradient(90deg, transparent 50%, var(--smp-bg-950) 50%),
        url(images/new/topography.svg) left center / max(500px, 50%) auto no-repeat,
        var(--smp-bg-800);
    border: 4px solid var(--smp-bg-700);
    border-bottom: 0;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -12px 28px rgba(0, 0, 0, 0.35);
    font-family: var(--smp-sans);
}
.projectdetails{
    display: flex;
    max-width: 600px;
    margin: 0 auto;
}
.leftcolumn{
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 17px 14px 14px;
}
.projectphoto{
    box-sizing: border-box;
    width: clamp(100px, 20vw, 123px);
    height: clamp(100px, 20vw, 123px);
    margin-bottom: 5px;
    border-radius: 12px;
    background: #32363b url(images/SonicMaps-Icon.webp) no-repeat center / cover;
    box-shadow: 0 0 3px #2f343b;
}
#loadbutton{
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 3px solid var(--smp-ink-2);
    border-radius: 999px;
    outline: 0;
    background: #24282e6b;
    color: var(--smp-ink);
    font-family: var(--smp-sans);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
#loadbutton::-moz-focus-inner{ border: 0; }
#loadbutton:focus-visible{
    outline: 3px solid var(--smp-focus);
    outline-offset: 2px;
}

/* overflow-wrap: a title or author that is one long word (SOUVENIR_BENIAJÁN) has no break point
   and ran out of the column, where #projectinfo's overflow:hidden cut it off. */
.metadata{
    flex: 1;
    min-width: 0;
    min-height: 230px;
    padding: 19px 16px 22px;
    overflow: auto;
    overflow-wrap: break-word;
    background-color: var(--smp-bg-950);
}
.ptitulo{
    font-family: Marcellus, serif;
    font-size: clamp(20px, 5.5vw, 23px);
    line-height: 1.15;
    color: var(--smp-ink);
}
.pautor{
    display: block;
    margin-top: 4px;
    color: var(--smp-accent-ink);
    font-size: 14px;
    font-weight: 500;
}
.pabout{
    display: block;
    max-height: 20vh;
    margin-top: 0;
    padding: 0 5px 0 0;
    overflow-y: auto;
    overflow-wrap: break-word;
    color: var(--smp-body);
    font: 400 14.5px/1.5 var(--smp-sans);
}
/* Descriptions may hold author <p> blocks (sanitizeHTML): drop the default 1em margins so they
   don't open big gaps in a small scroll box. */
.pabout p{ margin: 0 0 .6em; }
.pabout p:last-child{ margin-bottom: 0; }

/* ---------- Zone card (#cardContainer, over the map) ---------- */

#cardContainer{
    display: none;
    position: absolute;
    top: 50px;
    bottom: 50px;
    left: 0;
    right: 0;
    z-index: 9010;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 33px 7px 5px;
    background: var(--smp-scrim);
}
/* max-width: a card with a photo takes the photo's width up to its 400px, which is more than a
   390px phone has between the container's paddings, so it ran off both sides. The title stays in
   Marcellus; the text is in Manrope. */
#zonecard{
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    min-width: 280px;
    max-width: min(400px, 100%);
    max-height: min(100%, 900px);
    background-color: var(--smp-bg-800);
    border: 1px solid var(--smp-line);
    border-radius: 20px;
    box-shadow: 0 0 20px #000;
    font-family: Marcellus, serif;
}
/* Equal side padding keeps the title centred beside the close button. */
#cardtitle{
    flex-shrink: 0;
    box-sizing: border-box;
    max-width: calc(100vw - 14px);
    padding: 15px 40px;
    color: var(--smp-ink);
    font-size: 19px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: auto;
}
#cardclose{
    position: absolute;
    top: 0;
    right: 0;
    padding: 0 5px;
    border: 2px solid var(--smp-line-2);
    border-radius: 0px 15px 0px 10px;
    box-shadow: -2px 2px 3px #00000075;
    color: #ffffffb5;
    font-size: 19px;
    font-weight: bold;
    cursor: pointer;
}
#cardphoto{ overflow: hidden; }
#cardphoto img{
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    padding-bottom: 7px;
}
#cardtext{
    flex-shrink: 3;
    max-width: calc(100vw - 40px);
    margin: 10px 15px 15px;
    overflow: auto;
    color: var(--smp-ink-2);
    font-family: var(--smp-sans);
    font-size: 14.5px;
    line-height: 1.5;
    pointer-events: auto;
}
/* One dot per zone playing at once, above the card. */
#dots{
    position: absolute;
    top: -23px;
    box-sizing: border-box;
    width: 100%;
    margin: 0 auto;
    line-height: 7px;
    text-align: center;
}
.dot{
    display: inline-block;
    width: 9px;
    height: 9px;
    margin: 3px;
    border-radius: 8px;
    background-color: var(--smp-line-2);
}

/* ---------- Screens: List, Featured, My Account, Settings ---------- */

/* Each is a full page over the map, shown by smp-ui.js with an inline display. */
#lista, #featured, #perfil, #settings{
    display: none;
    position: absolute;
    width: 100%;
    background-color: var(--smp-bg-900);
    color: var(--smp-ink);
    font-family: var(--smp-sans);
}
#lista, #featured{ min-height: 100%; }
#perfil{ height: 100%; }
#settings{ height: auto; min-height: 100%; }

/* Loading spinners of List and My Account; the scripts show them with display:flex. */
#spinner, #spinnerLista{
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    text-align: center;
    color: var(--smp-ink-2);
}
#spinnerLista{ height: 100vh; }

/* ---------- List and Featured: one card per project ---------- */

/* A grid, not the 50% / 33% / 25% widths v3.4 set per screen width: from 768px the open menu
   narrows the page by 260px, and auto-fill follows the page. It gives the same 1 / 2 / 3 / 4
   columns at the same screen widths. The max() stops it at 4: a column is never narrower than a
   quarter of the row (less the three 12px gaps), so a fifth one never fits however wide the
   screen. */
#projectRows, #featured-content{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, max(340px, calc((100% - 36px) / 4))), 1fr));
    gap: 12px;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 12px;
}

/* The card. Its markup is written by smplayer-410.js (List) and is in beta.php (Featured):
   .pListItem is the title row, .pListItem2 the body, with .boxleft (photo, Open, distance) and
   .boxright (author, description, share and like). */
.projectbox{
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    background-color: var(--smp-bg-800);
    border: 1px solid var(--smp-line);
    border-radius: 14px;
}
.pListItem{
    z-index: 1;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    margin: 0;
    padding: 14px 16px 0;
    color: #fff;
}
.plistName{
    flex-grow: 1;
    padding: 5px 0 3px;
    color: var(--smp-ink);
    font-family: Marcellus, serif;
    font-size: 19px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pListItem2{
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 14px;
    box-sizing: border-box;
    margin: 0;
    padding: 12px 16px;
    color: #fff;
}
#featured-content .pListItem2{ padding: 14px 16px 16px; }

.boxleft, .boxleftFeatured{
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 10px;
    box-sizing: border-box;
    width: 100px;
    min-width: 0;
}
.boxleftFeatured{ width: 88px; gap: 12px; }

/* The project's photo, with the logo underneath as the fallback (smplayer-410.js puts both in
   an inline background-image). */
.listphoto{
    display: block;
    box-sizing: border-box;
    width: 100px;
    height: 100px;
    margin-bottom: 5px;
    border-radius: 10px;
    background: url(images/SonicMaps-Icon.webp) no-repeat center / cover;
}

/* Open: an outlined pill. */
.loadbutton2, .loadfeaturedbtn{
    flex-shrink: 0;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 3px solid var(--smp-ink-2);
    border-radius: 999px;
    outline: 0;
    background: none;
    color: var(--smp-ink);
    font-family: var(--smp-sans);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease-in-out;
}
.loadbutton2::-moz-focus-inner{ border: 0; }
@media (hover: hover){
    .loadbutton2:hover, .loadfeaturedbtn:hover{ background-color: rgba(143, 180, 245, 0.12); }
}
.loadbutton2:active, .loadfeaturedbtn:active{ background-color: rgba(143, 180, 245, 0.2); }
.loadbutton2:focus-visible, .loadfeaturedbtn:focus-visible{
    outline: 3px solid var(--smp-focus);
    outline-offset: 2px;
}

/* Distance in the List; in Featured, the country, as an overline under Open. */
.plistDistance{
    display: block;
    flex-shrink: 0;
    overflow: hidden;
    padding: 5px 3px;
    color: var(--smp-muted);
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
}
#featured-content .plistDistance{
    overflow: visible;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: 0.08em;
}

.boxright{
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-sizing: border-box;
    min-width: 0;
}
/* An author's link keeps the text's colour: sanitizeHTML lets safe inline styles through, so the
   !important is against a colour the author put on the link. */
.boxright a{ color: inherit !important; }
.plistAuthor{
    flex-shrink: 0;
    margin: 0;
    overflow: hidden;
    color: var(--smp-accent-ink);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Still a scroll box, so a long description can be read in full: six lines in the List, seven in
   Featured. Featured hides the scrollbar in Firefox too. */
.plistDescript, .featuredDescript{
    display: block;
    flex: 0 1 auto;
    max-height: calc(1.5em * 6);
    padding: 0;
    overflow: auto;
    color: var(--smp-body);
    font-family: var(--smp-sans);
    font-size: 14.5px;
    line-height: 1.5;
}
.featuredDescript{
    flex: 1 1 0;
    max-height: calc(1.5em * 7);
    -ms-overflow-style: none;
    scrollbar-width: none;
}
/* Author <p> blocks (sanitizeHTML): no default 1em margins in a small scroll box. */
.plistDescript p{ margin: 0 0 .6em; }
.plistDescript p:last-child{ margin-bottom: 0; }

/* Featured: the picture is the top of the card. */
#featured-content picture{ display: block; }
#featured-content img{
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    margin: 0;
}

/* ---------- Share and like (ra-social-2.js), in the List and the project sheet ---------- */

/* ../ra-social/ra-social.css is linked after this file, from <body>, which is why these rules
   carry an extra class. The icons are image files in fixed colours, and the count's colour is in
   a style attribute, hence the !important on .social-value. */
.projectbox .ra-social,
#projectinfo .ra-social{
    align-items: center;
    min-height: 44px;
    margin: 0 0 0 -11px;
}
.ra-social .social-icon{
    box-sizing: border-box;
    align-items: center;
    gap: 7px;
    height: 44px;
    margin-right: 2px;
    padding: 0 11px;
    cursor: pointer;
}
.ra-social .social-img{ display: block; width: 19px; }
.ra-social .social-value{ padding-left: 0; font-size: 14px; font-weight: 600; }

.projectbox .social-img[src*="-light"]{ opacity: 0.66; }
.projectbox .ra-social .social-value{ color: var(--smp-muted) !important; }
#projectinfo .ra-social .social-value{ color: #5B6778 !important; }

/* ---------- Search panel (off-canvas, from the right) ---------- */

/* The topographic texture is on purpose (decided 14/10): it is what this panel had in the old
   theme, and it reads well under the graphite. The project sheet uses it too. sw-410.js must
   precache the image. slidebars.js
   reads the panel's .5s and copies it onto the page as it slides. */
[off-canvas*=right]{
    background-color: var(--smp-bg-900);
    background-image: url(images/new/topography.svg);
    background-size: cover;
}
.searchbar{ width: 100%; transition-duration: .5s; }

.topbar{
    z-index: 3000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    height: 50px;
    padding: 3px 23px 0;
    background-color: var(--smp-bg-950);
    border-bottom: 1px solid var(--smp-hair);
    color: var(--smp-ink-2);
}
.projectslabel{
    color: var(--smp-ink-2);
    font-family: var(--smp-sans);
    font-size: 18px;
    font-weight: 600;
}
.projectslabel svg{ vertical-align: -0.25em; margin-right: 9px; }   /* the globe */
/* The back arrow, with a wide hit area. */
.fa-arrow-left{
    margin-left: -20px;
    padding: 10px 40px 10px 20px;
    font-size: 25px;
    text-decoration: none;
}

/* The three cards: a column on a phone, a row from 1024px. */
#searchOptions{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 0;
    overflow: auto;
}
@media screen and (min-width: 1024px){
    #searchOptions{
        flex-direction: row;
        justify-content: center;
        height: 80vh;
    }
}
.searchOption{
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 180px;
    height: 200px;
    margin: 10px;
    padding: 30px 20px 20px;
    background-color: var(--smp-bg-800);
    border: 5px solid var(--smp-line);
    border-radius: 20px;
    color: var(--smp-ink);
    font-family: var(--smp-sans);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
}
.GoButton{
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    margin-top: 8px;
    border: 4px solid var(--smp-accent-ink);
    border-radius: 999px;
    color: var(--smp-accent-ink);
    font-size: 16px;
    font-weight: 700;
    line-height: 38px;
}
@media (hover: hover){
    .GoButton:hover{ filter: brightness(1.1); }
}
.GoButton:active{ filter: brightness(0.92); }

/* Inside a card, so one step darker than it. The select also takes the page-wide select rule
   (Settings), whose arrow stays: only the background colour changes here. */
.searchOption input,
.searchOption select{
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    background-color: var(--smp-bg-900);
    border: 1px solid var(--smp-line);
    border-radius: 12px;
    outline: 0;
    color: var(--smp-ink);
    font-family: var(--smp-sans);
    font-size: 16px;
}
.searchOption input{
    margin: 0 auto;
    padding: 0 8px;
    text-align: center;
}
/* 14px: "Project Unique Identifier" has to fit in the card. The typed text stays at 16px. */
.searchOption input::placeholder{ color: #9BA2AB; opacity: 1; font-size: 14px; }
.searchOption input:focus{
    border-color: var(--smp-accent-ink);
    box-shadow: 0 0 0 3px var(--smp-focus);
}
/* Fills the gap the other two cards fill with a field. 44px, the field's height, so the three
   titles and Go buttons line up. The pins are filled with the card's colour so the map's edges
   and folds run behind them, not through them. */
.search-all-icon{
    display: block;
    flex-shrink: 0;
    width: 78px;
    height: 44px;
    color: var(--smp-muted);
}
.search-all-icon .pin{ fill: var(--smp-bg-800); }

/* ---------- My Account (#perfil) ---------- */

/* Signed out: the form. */
#login{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: calc(100% - 50px);
    text-align: center;
}
.loginlabel, .noaccount, #myemail, #mypassword, #loginsubmit{
    box-sizing: border-box;
    width: calc(100% - 56px);
    max-width: 450px;
    font-family: var(--smp-sans);
}
.loginlabel{
    margin: 0 auto 20px;
    color: var(--smp-ink);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
}
#myemail, #mypassword{
    -webkit-appearance: none;
    appearance: none;
    height: 50px;
    margin: 0 auto 14px;
    padding: 0 14px;
    background-color: var(--smp-bg-800);
    border: 1px solid var(--smp-line);
    border-radius: 12px;
    outline: 0;
    color: var(--smp-ink);
    font-size: 16px;
}
#myemail::placeholder, #mypassword::placeholder{ color: #9BA2AB; opacity: 1; }
#myemail:focus, #mypassword:focus{
    border-color: var(--smp-accent-ink);
    box-shadow: 0 0 0 3px var(--smp-focus);
}
/* A saved login would otherwise be painted on the browser's own white or yellow. */
#myemail:-webkit-autofill, #mypassword:-webkit-autofill{
    -webkit-text-fill-color: var(--smp-ink);
    caret-color: var(--smp-ink);
    box-shadow: 0 0 0 100px var(--smp-bg-800) inset;
}
#myemail:-webkit-autofill:focus, #mypassword:-webkit-autofill:focus{
    box-shadow: 0 0 0 100px var(--smp-bg-800) inset, 0 0 0 3px var(--smp-focus);
}
#loginsubmit{
    -webkit-appearance: none;
    appearance: none;
    height: 50px;
    margin: 0 auto;
    padding: 0;
    background-color: var(--smp-accent-fill);
    border: 0;
    border-radius: 12px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: normal;
    cursor: pointer;
    transition: background-color .15s ease-in-out;
}
@media (hover: hover){
    #loginsubmit:hover{ filter: brightness(1.1); }
}
#loginsubmit:active{ filter: brightness(0.92); }
#loginsubmit:focus-visible{
    outline: 3px solid var(--smp-focus);
    outline-offset: 2px;
}
.noaccount{
    margin: 22px auto 0;
    color: var(--smp-muted);
    font-size: 14.5px;
    text-align: center;
}
.noaccount a{
    color: var(--smp-accent-ink);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Signed in: avatar, name and Log Out. smp-auth.js shows it with display:flex. */
#personal{
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--smp-ink);
    font-family: var(--smp-sans);
    font-size: 22px;
    font-weight: 600;
}
.iconphoto{
    width: 100px;
    height: 100px;
    margin-bottom: 20px;
    padding: 20px;
    border: 1px solid var(--smp-line-2);
    border-radius: 50%;
    background: var(--smp-bg-800) url(images/usericon.png) no-repeat center / 100% 100%;
    cursor: pointer;
}
#personal > div{
    padding: 20px;
    color: var(--smp-muted);
    font-weight: 500;
    cursor: pointer;
}
#personal > div a{ padding-left: 10px; font-size: 15px; }

/* ---------- Settings (#settings) ---------- */

.opciones{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    box-sizing: border-box;
    width: calc(100% - 44px);
    max-width: 430px;
    height: 100%;
    margin: 0 auto;
    padding-top: 16px;
    color: var(--smp-ink);
    font-family: var(--smp-sans);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.35;
}
/* From the width at which the menu stays open (768px, see Main menu), centred in what #menubar
   (50px) leaves of the screen; below it the list starts at the top. As a min-height, because
   #settings has no height of its own for a percentage to resolve against, and so a list taller
   than the window still starts at the top and scrolls. */
@media (min-width: 768px){
    .opciones{
        justify-content: center;
        height: auto;
        min-height: calc(100vh - 50px);
        min-height: calc(100dvh - 50px);
        padding: 16px 0;
    }
}
.setting-item{
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 70px;
    padding: 23px 0;
    border-bottom: 1px solid var(--smp-hair);
}

/* The switches. Off is dark grey, not light grey: a light track read as "on" against this
   background. */
.switch{
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    width: 52px;
    height: 32px;
    margin-right: 16px;
}
.switch input{ opacity: 0; width: 0; height: 0; }
.slider{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #3A414A;
    cursor: pointer;
    transition: background-color .15s ease;
}
.slider:before{
    content: "";
    position: absolute;
    left: 3px;
    bottom: 3px;
    width: 26px;
    height: 26px;
    background-color: var(--smp-ink);
    transition: transform .15s ease;
}
input:checked + .slider{ background-color: var(--smp-accent); }
input:checked + .slider:before{ transform: translateX(20px); }
.slider.round{ border-radius: 34px; }
.slider.round:before{ border-radius: 50%; }
.switch input:focus-visible + .slider{ outline: 3px solid var(--smp-focus); outline-offset: 2px; }

/* Language and distance units. */
#lang_select, #units_select{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 22px 0 0;
}
#units_select{ padding: 14px 0 24px; }
#lang_select > span{
    flex: none;
    display: flex;
    justify-content: center;
    width: 52px;
    color: var(--smp-muted);
}
#lang_select .fa-language{ font-size: 27px; }
#units-label{ flex-shrink: 0; padding-left: 6px; }

/* Every select: the two here and the category filter in the search panel (which darkens it, see
   Search panel). As tall as a field, and with an arrow of its own, since appearance:none takes the
   browser's away. */
select{
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    height: 48px;
    padding: 0 42px 0 14px;
    background: var(--smp-bg-800) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A4ABB4' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 18px 18px;
    border: 1px solid var(--smp-line);
    border-radius: 12px;
    outline: 0;
    color: var(--smp-ink);
    font-family: var(--smp-sans);
    font-size: 16px;
    cursor: pointer;
}
select:focus-visible{ outline: 3px solid var(--smp-focus); outline-offset: 1px; }
#UIlanguage{ flex: 1 1 0; width: auto; min-width: 0; }
#DistUnits{ flex: none; width: 182px; }

/* ---------- Notices (#modalWindow) ---------- */

/* A veil over everything. The scripts write a sentence, a download counter, a question with
   buttons or the pre-flight notice into #modalmessage; the message itself stays in Marcellus. */
#modalWindow{
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    width: 100%;
    height: 100%;
    background-color: rgba(8, 9, 10, 0.66);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
    font-family: Marcellus, serif;
    font-size: 21px;
    text-align: center;
}
/* The message was a card at one point: its background, border and shadow are left commented out,
   and the :has() rule after it is what took the card away from a lone spinner. */
#modalmessage{
    box-sizing: border-box;
    width: calc(100% - 52px);
    max-width: 400px;
    padding: 30px 24px 24px;
    /*background-color: var(--smp-bg-800);*/
    /*border: 1px solid var(--smp-line-2);*/
    border-radius: 20px;
    /*box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);*/
    color: var(--smp-ink);
    line-height: 1.25;
}
#modalmessage:has(> .fa-spinner:only-child){
    background: none;
    border-color: transparent;
    box-shadow: none;
}
/* "Project loaded! Ready to go?" */
#modalmessage > span:first-child:has(~ #miboton){ font-size: 21px; line-height: 1.2; }
/* The scripts put a <br> before a button, which is a block here: it would be an empty line. */
#modalmessage > br:has(+ #miok),
#modalmessage > br:has(+ #miboton),
#modalmessage > br:has(+ .optionbtn){ display: none; }

/* What the scripts write often carries its own sizes and colours in style attributes: every
   !important from here to the end of the section answers one of them. */

/* Download counters: "12 / 340" under the phase name. */
#modalmessage > br + span[style*="0.7em"]{
    display: inline-block;
    margin-top: 8px;
    font-family: var(--smp-sans);
    font-size: 15px !important;
    font-variant-numeric: tabular-nums;
    color: var(--smp-body);
}
#modalmessage [style*="color:red"],
#modalmessage [style*="color: red"]{ color: var(--smp-danger) !important; }

#miboton, #miok, .optionbtn{
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    height: 50px;
    margin: 22px 0 0;
    padding: 0 16px;
    background-color: var(--smp-bg-700);
    border: 1px solid var(--smp-line-2);
    border-radius: 12px;
    color: var(--smp-ink);
    font-family: var(--smp-sans);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
}
.optionbtn + .optionbtn,
.optionbtn + #miok{ margin-top: 10px; }
/* Go, and Exit in "Do you wish to exit this project?": the scripts mark the main action with the
   old blue in a style attribute. */
#miboton,
.optionbtn[style*="4e92c3"]{
    background: var(--smp-accent-fill) !important;
    border-color: transparent;
    color: #fff;
}
#miboton{ height: 52px; font-size: 17px; }
@media (hover: hover){
    #miboton:hover{ filter: brightness(1.1); }
}
#miboton:active{ filter: brightness(0.92); }

.disclaimer{
    max-width: none;
    margin: 18px 0 0;
    color: var(--smp-muted);
    font-family: var(--smp-sans);
    font-size: 13px;
    line-height: 1.5;
}
/* The silent-mode reminder, in the site's gold. */
.disclaimer[style*="ffb835"]{
    margin-top: 12px !important;
    font-size: 15px !important;
    font-weight: 600;
    line-height: 1.45;
    color: var(--smp-gold-ink) !important;
}

/* "An auto-saved session was found": every size and colour is in a style attribute. */
#autosave-prompt{ margin-top: 18px !important; font-family: var(--smp-sans); }
#autosave-prompt > div{ font-size: 16px !important; font-weight: 600; line-height: 1.4; }
#autosave-prompt > div > div{
    font-size: 13px !important;
    font-weight: 500;
    color: var(--smp-muted);
    opacity: 1 !important;
}
#recover-autosave, #discard-autosave{
    display: inline-flex !important;
    align-items: center;
    box-sizing: border-box;
    height: 48px;
    padding: 0 20px !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    font-weight: 700;
}
#recover-autosave{ background: var(--smp-accent-fill) !important; }
#discard-autosave{
    background: var(--smp-bg-700) !important;
    box-shadow: inset 0 0 0 1px var(--smp-line-2);
}

/* ---------- Dialogs: "Please log in" and the share link ---------- */

dialog{
    box-sizing: border-box;
    max-width: 95%;
    padding: 0;
    background: #00000033;
    border: 2px solid var(--smp-line-2);
    border-radius: 10px;
    outline: none;
    color: var(--smp-ink);
    font-family: var(--smp-sans);
    font-size: 16px;
}
dialog::backdrop{ background-color: var(--smp-scrim); }
.boton{
    display: block;
    padding: 24px;
    font-family: var(--smp-sans);
    font-weight: 600;
    text-align: center;
    cursor: pointer;
}
/* "Please log in" is the whole of its dialog and is what gets tapped. */
span.boton{ color: var(--smp-ink); font-weight: 700; }
#url2copy{ color: var(--smp-body); }
.copyLink{
    width: fit-content;
    margin: 18px auto 0;
    padding: 13px 28px;
    background: var(--smp-accent-fill);
    border-radius: 12px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}
@media (hover: hover){
    .copyLink:hover{ filter: brightness(1.1); }
}
.copyLink:active{ filter: brightness(0.92); }


/* ######################################################################################
   From 768px: the menu stays open. KEEP THIS LAST.
   It moves things that the sections above place, and wins over them by coming after them, at the
   same specificity. Until b29 it sat in its own file, loaded before the inline <style> block, and
   needed an `html` prefix on every selector to win; that is gone.
   ###################################################################################### */

/* Up to b23 the open sidebar narrowed the whole page: slidebars.js slid it 260px right while its
   width shrank by as much, so #map - and MapLibre's canvas with it - was resized on every frame
   of the slide. MapLibre follows its container through a ResizeObserver throttled to one resize
   per 50ms, so between resizes the canvas kept its old width and rode the slide rigidly, then
   snapped back as it was resized: the map shook. Resizing a WebGL canvas on every frame instead
   would only be smooth on a fast machine.

   Now nothing resizes the map:
     - the page stays put (the transform below beats the one slidebars.js sets inline) and the
       panel slides in over it;
     - beta.php's menu script gives the map's camera a left padding of the panel's width, eased
       with the panel's own duration (read from it), so the map glides into the middle of what
       the panel leaves uncovered - the framing the narrowed canvas used to reach;
     - everything else in the page that sits at its left edge or its centre moves aside by
       --sm-inset, so the open layout is the one the narrowed page had.
   All of it shares the panel's duration (--sm-slide) and curve, easeOutCubic, which the menu
   script mirrors for the camera. Until b30 what moves aside took .3s while the panel and the
   camera took 350ms; b31 put them all on --sm-slide. */

@media (min-width: 768px){
    :root{
        --sm-inset: 0px;
        --sm-ease: cubic-bezier(.33, 1, .68, 1);
    }
    html.sm-menu-open{ --sm-inset: var(--sm-menu-w); }

    /* translate(0,0), not none: the transform is what makes [canvas] the containing block of
       every position:fixed element in the page, and none would hand them to the viewport.
       !important is the only way past an inline style. Below 768px this does not apply, and the
       page slides aside as before. */
    html.sm-menu-open [canvas=container]{ transform: translate(0, 0) !important; }

    /* Over the page ([canvas] is z-index 1) and starting fully off screen: slidebars.css starts a
       "shift" panel half way in, under the page, for the page to uncover as it slides. With
       translate(0,0) slidebars.js's margin-left of minus the panel's width hides it, and its
       translate on opening brings it in. */
    [off-canvas].sm-menu{
        z-index: 2;
        transform: translate(0, 0);
        transition-timing-function: var(--sm-ease);
    }

    /* What moves aside. Each of these is placed against the page box, which no longer narrows,
       so the inset goes where the narrowed page used to put it. #map is not in the list. */
    #lista, #perfil, #settings, #featured, #modalWindow, #poi-list, #projectbar{
        left: var(--sm-inset);
        width: calc(100% - var(--sm-inset));
    }
    #projectinfo, #cardContainer, #playpause, .maplibregl-ctrl-bottom-left{ left: var(--sm-inset); }
    #skipintro-btn{ left: calc(50% + var(--sm-inset) / 2); }
    #vimeoplayer{
        left: calc(50% + var(--sm-inset) / 2);
        width: calc(100% - var(--sm-inset));
    }
    #mapnotice{
        left: calc(50% + var(--sm-inset) / 2);
        max-width: calc(100% - 32px - var(--sm-inset));
    }
    #topUItext{
        left: var(--sm-inset);
        width: calc((100% - var(--sm-inset)) * .6);
        margin-left: calc((100% - var(--sm-inset)) * .2);
    }
    /* The map's top bar spans the map, under the panel: its menu button moves out from under it.
       Padding rather than a transform, so the wordmark - back as the menu starts closing - is laid
       out after the button all the way and the two never overlap. The other screens' bars move
       with their screen. */
    #map #menubar{ padding-left: calc(23px + var(--sm-inset)); }

    #lista, #perfil, #settings, #featured, #modalWindow, #poi-list,
    #projectbar, #projectinfo, #cardContainer, #playpause,
    .maplibregl-ctrl-bottom-left, #skipintro-btn, #vimeoplayer, #mapnotice,
    #topUItext, #map #menubar{
        transition-property: left, width, max-width, margin-left, padding-left;
        transition-duration: var(--sm-slide);
        transition-timing-function: var(--sm-ease);
    }

    /* The logo in the sidebar already says it. */
    html.sm-menu-open .sm-wordmark{ display: none; }
}