/* wetmaps brand layer. Loaded last, overrides Leaflet / Semantic UI defaults.
   Presentation only -- no selector here is relied on by any script. */

:root {
    /* Light material only, whatever the OS is set to -- pinned so the radios in
       the layer picker don't get drawn dark by a dark-mode browser. */
    color-scheme: light;

    --ink:        #07202b;
    --ink-2:      #0d2f3d;

    /* Liquid glass material. Light-tinted rather than dark: the charts, topo and
       basemap underneath are all pale, and a white lens keeps one set of dark
       glyphs legible across every layer including satellite. */
    /* Tints are deliberately thin -- the lens below does the legibility work,
       so the map stays visible through every surface. */
    --glass:      rgba(255, 255, 255, 0.26);
    --glass-hi:   rgba(255, 255, 255, 0.44);
    /* Mid sits between the toolbar slabs and the sheets: thin enough that the
       map still reads through it, thick enough to carry small text. */
    --glass-mid:  rgba(255, 255, 255, 0.34);
    /* Sheets and popovers: the text-heavy surfaces, so the tint stays a touch
       denser than the chrome. */
    --glass-thick: rgba(255, 255, 255, 0.56);

    /* saturate + brightness stop the lens reading as flat grey gauze -- it picks
       up and pushes the colour of whatever it sits over. The contrast pull is
       what keeps dark glyphs readable at these thin tints: it lifts the darks
       under the glass (satellite imagery, deep water) toward mid grey instead of
       letting them stay near-black. */
    --lens:      blur(28px) saturate(185%) brightness(1.12) contrast(0.92);
    --lens-soft: blur(20px) saturate(175%) brightness(1.1) contrast(0.94);
    --lens-deep: blur(40px) saturate(190%) brightness(1.1) contrast(0.92);

    /* A light sweep across the slab, brightest at the top-left corner the
       specular highlight comes from, with a second catch at the far corner.
       Cheaper than a second backdrop-filter layer and reads the same at these
       sizes. */
    --sheen: linear-gradient(147deg,
                rgba(255, 255, 255, 0.62) 0%,
                rgba(255, 255, 255, 0.2) 26%,
                rgba(255, 255, 255, 0.02) 52%,
                rgba(255, 255, 255, 0.12) 76%,
                rgba(255, 255, 255, 0.32) 100%);

    /* The edge treatment is what separates "glass" from "translucent box".
       Hairline catch on every edge for the surface, then the two -10px spread
       glows: those are the slab's *thickness*, the band where light bends
       through the rounded edge before it reaches the face. Applied as
       box-shadow so it costs no layout and no extra layer. */
    --spec: inset 0 1px 0 rgba(255, 255, 255, 0.98),
            inset 1px 0 0 rgba(255, 255, 255, 0.6),
            inset -1px 0 0 rgba(255, 255, 255, 0.6),
            inset 0 -1px 0 rgba(255, 255, 255, 0.52),
            inset 0 10px 14px -10px rgba(255, 255, 255, 0.85),
            inset 0 -10px 14px -10px rgba(255, 255, 255, 0.55),
            inset 0 0 0 1px rgba(255, 255, 255, 0.3);

    --edge:       rgba(255, 255, 255, 0.5);
    --edge-soft:  rgba(9, 30, 40, 0.12);
    --edge-firm:  rgba(9, 30, 40, 0.45);

    --text:       #08222d;
    --text-dim:   #3c5a66;

    --accent:     #0e7c8c;
    --accent-ink: #ffffff;
    --accent-wash: rgba(14, 124, 140, 0.16);
    /* Accent surfaces are glass too, not solid chips. */
    --accent-fill: rgba(13, 116, 131, 0.78);

    --r-sm: 12px;
    --r-md: 16px;
    --r-lg: 24px;
    --r-pill: 999px;

    --shadow: 0 1px 2px rgba(9, 30, 40, 0.1), 0 6px 18px rgba(9, 30, 40, 0.14),
              0 18px 40px rgba(9, 30, 40, 0.1);
    --shadow-lg: 0 2px 6px rgba(9, 30, 40, 0.12), 0 30px 70px rgba(9, 30, 40, 0.28);

    --ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, "Noto Sans", sans-serif;

    /* Apple's press feel: quick in, softly overshooting out. */
    --ease: cubic-bezier(0.32, 0.72, 0, 1);

    --tap: 34px;
}

body {
    font-family: var(--ui);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--ink);
}

/* Charts are cream paper; a warm neutral behind them beats stark white where
   chart coverage runs out. */
.leaflet-container {
    background: #eef4f6;
    font-family: var(--ui);
}

/* ---------------------------------------------------------------- controls */

/* Leaflet draws every control as a bordered white box. Strip that back to a
   single glass slab per control group.

   background-color + background-image rather than the shorthand: the sheen
   gradient and the tint are set from different rules in places (the layers
   control re-declares its background when expanded), and a shorthand anywhere
   in that chain silently drops the other half. */
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar,
.leaflet-control-layers,
.leaflet-bar {
    border: 0;
    border-radius: var(--r-md);
    background-color: var(--glass);
    background-image: var(--sheen);
    -webkit-backdrop-filter: var(--lens);
    backdrop-filter: var(--lens);
    box-shadow: var(--spec), var(--shadow);
    overflow: hidden;
}

/* Direct children only. The measure control is also a .leaflet-bar, and the
   links inside its expanded panel must not be sized like toolbar buttons.
   Keep :hover out of this rule too: a hover that changes geometry moves the
   element out from under the pointer, which un-hovers it, which moves it back.

   The .leaflet-touch duplicates are load-bearing: Leaflet declares its sizes a
   second time behind that class at higher specificity, and adds the class on
   any browser reporting touch support. Without matching it, --tap silently
   loses on every button except the ones named by a two-class selector here. */
.leaflet-bar > a,
.leaflet-bar > button,
.leaflet-touch .leaflet-bar > a,
.leaflet-touch .leaflet-bar > button,
.leaflet-control-measure a.leaflet-control-measure-toggle,
.leaflet-control-locate > a,
.leaflet-touch .leaflet-control-locate > a {
    width: var(--tap);
    height: var(--tap);
    line-height: var(--tap);
    background: transparent;
    color: var(--text);
    border: 0;
    border-bottom: 1px solid var(--edge-soft);
    font-size: 17px;
    font-weight: 500;
    transition: background-color 160ms ease, color 160ms ease,
                transform 220ms var(--ease);
}

.leaflet-bar > a:last-child,
.leaflet-bar > a:only-of-type,
.leaflet-bar > button:last-of-type,
.leaflet-bar > button:only-of-type {
    border-bottom: 0;
}

/* :focus is included because Leaflet tints focused buttons #f4f4f4, which is a
   flat opaque patch that punches a hole in the lens once the click is released. */
.leaflet-bar > a:hover,
.leaflet-bar > a:focus,
.leaflet-bar > button:hover,
.leaflet-bar > button:focus,
.leaflet-control-locate > a:hover,
.leaflet-control-measure a.leaflet-control-measure-toggle:hover {
    background-color: var(--glass-hi);
    color: #041c25;
}

.leaflet-control-measure a.leaflet-control-measure-toggle,
.leaflet-control-measure a.leaflet-control-measure-toggle:hover {
    position: relative;
    /* !important because leaflet-measure.css's .leaflet-retina variant of this
       rule has three classes to our two -- on any HiDPI display it out-specifies
       this and reasserts rulers.png as a real (unmasked, default-repeat)
       background-image, tiling the tiny icon into a grid of squares. */
    background-image: none !important;
}

/* rulers.png's icon is a solid filled block with small notches, not a
   thin-stroke glyph -- masked with currentColor it read as a chunky pale
   patch next to the Font Awesome icons on every other button. This inline
   ruler outline matches their stroke weight instead. */
.leaflet-control-measure a.leaflet-control-measure-toggle::after {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='6' width='14' height='4' rx='1' fill='none' stroke='black' stroke-width='1.4'/%3E%3Cpath d='M4 6v1.6M7 6v1.6M10 6v1.6M13 6v1.6' stroke='black' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat center / 16px 16px;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='6' width='14' height='4' rx='1' fill='none' stroke='black' stroke-width='1.4'/%3E%3Cpath d='M4 6v1.6M7 6v1.6M10 6v1.6M13 6v1.6' stroke='black' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat center / 16px 16px;
    content: "";
}

/* Glass compresses under a press. Safe on :active specifically -- the pointer is
   already down, so unlike a hover-driven transform it cannot slide the element
   out from under the cursor and start a loop. */
.leaflet-bar a:active,
.leaflet-bar button:active {
    background-color: var(--accent-wash);
    transform: scale(0.9);
}

.leaflet-bar a.leaflet-disabled,
.leaflet-bar button.disabled {
    background: transparent;
    color: rgba(8, 34, 45, 0.26);
}

/* Zoom glyphs sit low in the box at Leaflet's default line-height. */
.leaflet-control-zoom-in,
.leaflet-control-zoom-out,
.leaflet-touch .leaflet-control-zoom-in,
.leaflet-touch .leaflet-control-zoom-out {
    font-size: 18px;
    font-weight: 400;
}

/* Icon fonts inside controls inherit the glass foreground. */
.leaflet-bar a .fa,
.leaflet-bar button .fa,
.leaflet-bar a [class^="fa-"],
.leaflet-bar button [class^="fa-"],
.leaflet-bar a [class*=" fa-"],
.leaflet-bar button [class*=" fa-"] {
    color: inherit;
    line-height: inherit;
}

/* Active states get the accent rather than Leaflet's grey. Translucent, so the
   slab's own lens still shows the map through the tint -- no extra
   backdrop-filter needed on the button itself. */
.leaflet-control-locate.active a,
.leaflet-control-locate.following a {
    background-color: var(--accent-fill);
    background-image: var(--sheen);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
    color: var(--accent-ink);
}

.leaflet-control-locate.active a .fa,
.leaflet-control-locate.following a .fa {
    color: var(--accent-ink);
}

/* ------------------------------------------------------------ layer switch */

/* Size is left to Leaflet (36px, 44px on touch). This is the map picker, a
   primary control, so it reads deliberately larger than the toolbar buttons. */
/* layers.png ships as a dark glyph, which is what a light lens wants -- no
   inversion, just knocked back so it sits at the same weight as the Font
   Awesome icons on the toolbar. */
.leaflet-control-layers-toggle {
    filter: none;
    opacity: 0.72;
}

/* No background here: the slab rule above already tints and lenses this exact
   element, and re-declaring it would drop the sheen. */
.leaflet-control-layers-expanded {
    padding: 8px;
    color: var(--text);
    min-width: 190px;
}

.leaflet-control-layers-list {
    text-align: left;
    font-size: 14px;
}

.leaflet-control-layers-expanded .leaflet-control-layers-list label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 9px 10px;
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: background 120ms ease;
}

.leaflet-control-layers-expanded .leaflet-control-layers-list label:hover {
    background: rgba(9, 30, 40, 0.07);
}

/* Ignored by browsers without :has -- the radio still marks the active layer. */
.leaflet-control-layers-expanded .leaflet-control-layers-list label:has(input:checked) {
    background: var(--accent-wash);
    font-weight: 600;
}

.leaflet-control-layers-list input[type="radio"],
.leaflet-control-layers-list input[type="checkbox"] {
    accent-color: var(--accent);
    width: 15px;
    height: 15px;
    margin: 0;
    flex: none;
}

.leaflet-control-layers-list span {
    display: inline;
}

.leaflet-control-layers-separator {
    border-top: 1px solid var(--edge-soft);
    margin: 6px 2px;
}

/* --------------------------------------------------------- scale + credits */

.leaflet-control-scale {
    padding: 4px 7px 5px;
    border: 0;
    border-radius: var(--r-sm);
    background-color: var(--glass);
    background-image: var(--sheen);
    -webkit-backdrop-filter: var(--lens-soft);
    backdrop-filter: var(--lens-soft);
    box-shadow: var(--spec), var(--shadow);
}

/* Leaflet sets each bar's width inline so it spans a round distance. Stock is
   border-box, so padding here is safe, but the bar must keep square corners --
   a radius would eat the tick ends that mark where the measurement stops. */
.leaflet-control-scale-line {
    border: 1px solid var(--edge-firm);
    border-top: 0;
    border-radius: 0;
    padding: 1px 5px 2px;
    color: var(--text);
    background: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    font-size: 10px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    line-height: 1.4;
    text-align: center;
    text-shadow: none;
}

/* Stock overlaps the two bars into one double bracket and drops the second
   bar's bottom border. Separate them instead -- and restore that border,
   because stock's :not() selector outranks the rule above. */
.leaflet-control-scale-line:not(:first-child) {
    border-top: 0;
    border-bottom: 1px solid var(--edge-firm);
    margin-top: 3px;
}

/* Two-class selectors are load-bearing here. Stock declares the tint and a grey
   `0 0 5px #bbb` glow at `.leaflet-container .leaflet-control-attribution`, and
   zeroes the shadow again at `.leaflet-touch .leaflet-control-attribution` -- a
   single-class rule loses both, which left this welded into the corner as a
   flat white strip while the sheen and blur applied over the top of it.

   Floated off the corner on the same 10px margin the other controls use: glass
   needs an edge on all four sides to read as a slab rather than a panel that is
   part of the window. */
.leaflet-container .leaflet-control-attribution,
.leaflet-touch .leaflet-control-attribution {
    margin: 0 10px 10px 0;
    padding: 5px 11px;
    border-radius: var(--r-sm);
    color: var(--text-dim);
    background-color: var(--glass);
    background-image: var(--sheen);
    -webkit-backdrop-filter: var(--lens);
    backdrop-filter: var(--lens);
    box-shadow: var(--spec), var(--shadow);
    font-size: 10.5px;
    line-height: 1.35;
}

.leaflet-control-attribution a {
    color: var(--text);
    text-decoration: none;
}

/* ------------------------------------------------------------ measure tool */

/* !important because leaflet-measure.css sets an opaque panel background at
   higher specificity than the slab rule above. */
.leaflet-control-measure {
    color: var(--text);
    background-color: var(--glass-thick) !important;
    background-image: var(--sheen) !important;
    -webkit-backdrop-filter: var(--lens-deep);
    backdrop-filter: var(--lens-deep);
    font-family: var(--ui);
}

.leaflet-control-measure h3,
.leaflet-measure-resultpopup h3 {
    margin: 0 0 10px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--edge-soft);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.leaflet-control-measure .leaflet-control-measure-interaction {
    padding: 12px 14px;
    font-size: 13px;
}

.leaflet-control-measure .tasks {
    border-top: 1px solid var(--edge-soft);
}

.leaflet-control-measure .results .group {
    border-top: 1px dotted var(--edge-soft);
}

.leaflet-control-measure .heading,
.leaflet-control-measure .coorddivider {
    color: var(--text-dim);
}

/* Never use the `background` shorthand here. leaflet-measure puts each action
   icon in background-image, and the shorthand also resets background-repeat to
   `repeat` and background-size to `auto`, which tiles the 12px icon across the
   whole link. Lay the icon out as a masked pseudo-element instead: it takes the
   brand colour, and it cannot repeat. */
.leaflet-control-measure a.start,
.leaflet-control-measure a.start:hover,
.leaflet-control-measure a.cancel,
.leaflet-control-measure a.cancel:hover,
.leaflet-control-measure a.finish,
.leaflet-control-measure a.finish:hover {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;
    height: auto;
    padding-left: 0;
    line-height: 1.5;
    border-bottom: 0;
    background-color: transparent;
    background-image: none;
    color: var(--accent);
    font-size: 13px;
    font-weight: 500;
}

.leaflet-control-measure a.start::before,
.leaflet-control-measure a.cancel::before,
.leaflet-control-measure a.finish::before {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    background-color: currentColor;
    content: "";
}

.leaflet-control-measure a.start::before {
    -webkit-mask: url(start.png) no-repeat center / 12px 12px;
    mask: url(start.png) no-repeat center / 12px 12px;
}

.leaflet-control-measure a.cancel::before {
    -webkit-mask: url(cancel.png) no-repeat center / 12px 12px;
    mask: url(cancel.png) no-repeat center / 12px 12px;
}

.leaflet-control-measure a.finish::before {
    -webkit-mask: url(check.png) no-repeat center / 12px 12px;
    mask: url(check.png) no-repeat center / 12px 12px;
}

/* The result popup keeps Leaflet's white bubble, so it needs dark text. */
.leaflet-measure-resultpopup {
    color: var(--ink);
}

.leaflet-measure-resultpopup h3 {
    border-bottom-color: rgba(7, 32, 43, 0.12);
}

.leaflet-measure-resultpopup .heading,
.leaflet-measure-resultpopup .coorddivider {
    color: #5b7480;
}

/* ------------------------------------------------------------------ popups */

/* Stock is an opaque white bubble -- the last surface that wasn't glass. The tip
   is a rotated square, so it needs the same tint and lens or it reads as a grey
   staple hanging off the bubble. */
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
    border-radius: var(--r-md);
    color: var(--text);
    background-color: var(--glass-thick);
    background-image: var(--sheen);
    -webkit-backdrop-filter: var(--lens-deep);
    backdrop-filter: var(--lens-deep);
    box-shadow: var(--spec), var(--shadow);
}

.leaflet-popup-tip {
    border-radius: 2px;
}

.leaflet-popup-close-button {
    color: var(--text-dim) !important;
}

.leaflet-popup-content {
    margin: 14px 16px;
    font-family: var(--ui);
    font-size: 13px;
    line-height: 1.5;
}

/* ------------------------------------------------------------ dropped pin */

/* Leaflet positions this element itself with translate3d and rewrites that
   transform on every pan, so nothing here may set a transform on the root --
   the teardrop rotation has to live on the child.
   pointer-events: none means a click that lands on the pin still reaches the
   map and drops a new one, instead of being swallowed by the marker. */
.wm-pin {
    pointer-events: none;
}

/* Three round corners and one square one, rotated -45deg so the square corner
   points straight down. The rotation puts the tip 21px below the box's centre,
   hence the 6px offset: 6 + 15 + 21 lands it on the 42px anchor.
   The fill is vivid and near-opaque on purpose: the chart's own blues are pale
   and desaturated, so the earlier thin teal glass pin vanished into them.
   Enough tint remains for the sheen and blur to still read as glass. */
.wm-pin-teardrop {
    position: absolute;
    top: 6px;
    left: 0;
    width: 30px;
    height: 30px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    background-color: rgba(10, 99, 240, 0.88);
    background-image: var(--sheen);
    -webkit-backdrop-filter: blur(6px) saturate(190%) brightness(1.08);
    backdrop-filter: blur(6px) saturate(190%) brightness(1.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75),
                inset 0 0 0 1px rgba(255, 255, 255, 0.34),
                inset 0 7px 10px -7px rgba(255, 255, 255, 0.6),
                inset 0 -8px 12px -8px rgba(4, 32, 110, 0.55),
                /* White keyline so the pin still separates from dark satellite
                   tiles, then the drop shadow outside it. */
                0 0 0 1.5px rgba(255, 255, 255, 0.9),
                0 3px 12px rgba(9, 30, 40, 0.45);
}

/* Round, so it needs no counter-rotation. */
.wm-pin-glyph {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(4, 32, 110, 0.28), 0 1px 2px rgba(9, 30, 40, 0.3);
}

/* Contact shadow on the chart, so the pin reads as standing above it. */
.wm-pin-ground {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 18px;
    height: 7px;
    margin-left: -9px;
    border-radius: 50%;
    background: radial-gradient(closest-side,
                    rgba(9, 30, 40, 0.45), rgba(9, 30, 40, 0));
}

/* -------------------------------------------------------------- brand mark */

.brandmark {
    position: fixed;
    top: 14px;
    left: 50%;
    z-index: 800;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    transform: translateX(-50%);
    border: 0;
    border-radius: var(--r-pill);
    color: var(--text);
    background-color: var(--glass);
    background-image: var(--sheen);
    -webkit-backdrop-filter: var(--lens);
    backdrop-filter: var(--lens);
    box-shadow: var(--spec), var(--shadow);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.015em;
    text-decoration: none;
    pointer-events: none;
    user-select: none;
}

.brandmark .brandmark-nz {
    padding-left: 8px;
    margin-left: 2px;
    border-left: 1px solid var(--edge-soft);
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

/* ----------------------------------------------------------- feedback pill */

.suggestion {
    position: fixed;
    left: 50%;
    right: auto;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 900;
    display: inline-block;
    max-width: 78vw;
    padding: 7px 15px;
    transform: translateX(-50%);
    border: 0;
    border-radius: var(--r-pill);
    color: var(--text-dim);
    background-color: var(--glass);
    background-image: var(--sheen);
    -webkit-backdrop-filter: var(--lens);
    backdrop-filter: var(--lens);
    box-shadow: var(--spec), var(--shadow);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    margin-left: 0;
    margin-right: 0;
    transition: transform 260ms var(--ease), background-color 160ms ease,
                color 160ms ease;
}

.suggestion:hover {
    color: var(--text);
    background-color: var(--glass-hi);
    text-decoration: none;
    transform: translateX(-50%) translateY(-2px);
}

.suggestion:active {
    transform: translateX(-50%) scale(0.97);
}

/* ----------------------------------------------------------------- support */

/* The ask used to live only at the bottom of the About panel, behind an
   unlabelled button. This is its permanent home: bottom-right, stacked above
   the attribution and sharing its 10px margin so the two read as one column.
   The other corners are taken -- scale control bottom-left, pin snackbar and
   feedback pill bottom-center, expanded layer picker over the top-right.

   56px is the attribution's own height: 10px margin + 10px padding + two
   lines at 10.5px/1.35 (its text carries a hard <br>, so it is always two),
   which leaves an 8px gap between them. */
.wm-support-pill {
    position: fixed;
    right: calc(10px + env(safe-area-inset-right, 0px));
    bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    z-index: 900;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px 7px 12px;
    border: 0;
    border-radius: var(--r-pill);
    color: var(--text);
    background-color: var(--glass-hi);
    background-image: var(--sheen);
    -webkit-backdrop-filter: var(--lens-soft);
    backdrop-filter: var(--lens-soft);
    box-shadow: var(--spec), var(--shadow);
    font-family: var(--ui);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: transform 200ms var(--ease), background-color 160ms ease;
}

.wm-support-pill .fa {
    color: #e0344a;
    font-size: 12px;
}

.wm-support-pill:hover {
    background-color: var(--glass-thick);
    transform: translateY(-2px);
}

.wm-support-pill:active {
    transform: scale(0.96);
}

/* style.1.css hides the attribution in split view, so the pill would be left
   hovering above nothing -- take the corner instead. */
#map-container.split-view ~ .wm-support-pill {
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}

/* Sits under the brandmark: the pin snackbar owns bottom-center and the
   feedback pill owns the bottom edge, so the top strip is the free lane. */
.wm-nudge {
    position: fixed;
    top: calc(58px + env(safe-area-inset-top, 0px));
    left: 50%;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 12px;
    /* Sized to its own text rather than a fixed width: a set width leaves the
       ask wrapping onto a stub second line while the row it sits in still has
       space to spare. The viewport cap is what makes it wrap on a phone, and
       the media query below moves the buttons under the text at that point. */
    width: max-content;
    max-width: calc(100vw - 24px);
    padding: 11px 12px 11px 15px;
    border-radius: var(--r-md);
    color: var(--text);
    background-color: var(--glass-mid);
    background-image: var(--sheen);
    -webkit-backdrop-filter: var(--lens);
    backdrop-filter: var(--lens);
    box-shadow: var(--spec), var(--shadow);
    font-family: var(--ui);
    opacity: 0;
    transform: translate(-50%, -10px);
    transition: opacity 280ms var(--ease), transform 280ms var(--ease);
}

.wm-nudge[hidden] {
    display: none;
}

.wm-nudge.is-in {
    opacity: 1;
    transform: translate(-50%, 0);
}

.wm-nudge-text {
    flex: 1 1 auto;
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    text-align: left;
}

.wm-nudge-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
}

.wm-nudge-go,
.wm-nudge-no {
    border: 0;
    border-radius: var(--r-pill);
    font-family: var(--ui);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 160ms var(--ease), background-color 160ms ease;
}

.wm-nudge-go {
    padding: 7px 14px;
    color: var(--accent-ink);
    background-color: var(--accent-fill);
    background-image: var(--sheen);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), var(--shadow);
}

/* Plainly labelled and the same size as the accept -- a dismiss that has to be
   hunted for buys one donation and costs the next visit. */
.wm-nudge-no {
    padding: 7px 10px;
    color: var(--text-dim);
    background: transparent;
}

.wm-nudge-no:hover {
    color: var(--text);
}

.wm-nudge-go:active,
.wm-nudge-no:active {
    transform: scale(0.95);
}

/* -- inside the About and support panels */

.wm-callout {
    margin: 4px 0 16px;
    padding: 14px 16px;
    border-radius: var(--r-md);
    background-color: rgba(14, 124, 140, 0.1);
    box-shadow: inset 0 0 0 1px rgba(14, 124, 140, 0.22);
}

.ui.basic.modal > .content .wm-callout-lead {
    margin: 0 0 4px;
    font-weight: 650;
}

.ui.basic.modal > .content .wm-callout-body {
    margin: 0 0 12px;
    color: var(--text-dim);
    font-size: 13.5px;
}

.wm-callout-go {
    padding: 8px 18px;
    border: 0;
    border-radius: var(--r-pill);
    color: var(--accent-ink);
    background-color: var(--accent-fill);
    background-image: var(--sheen);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), var(--shadow);
    font-family: var(--ui);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 160ms var(--ease);
}

.wm-callout-go:active {
    transform: scale(0.96);
}

.ui.basic.modal > .content .wm-support-usage {
    margin: 0 0 10px;
    color: var(--accent);
    font-size: 13px;
    font-weight: 600;
}

.wm-support-usage[hidden] {
    display: none;
}

.wm-pay {
    padding: 4px 0 2px;
    border-top: 1px solid var(--edge-soft);
}

.wm-pay-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 0 0;
}

.wm-pay-label {
    flex: 0 0 92px;
    color: var(--text-dim);
    font-size: 12.5px;
    font-weight: 600;
}

.wm-pay-value {
    flex: 1 1 auto;
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    letter-spacing: 0;
    word-break: break-all;
}

.wm-pay-value-long {
    font-size: 11px;
    line-height: 1.35;
}

/* Copying beats transcribing a 16-digit account number, which is the single
   biggest drop-off in a bank-transfer ask. */
.wm-copy,
.ui.basic.modal > .content a.wm-pay-go {
    flex: 0 0 auto;
    padding: 6px 13px;
    border: 0;
    border-radius: var(--r-pill);
    color: var(--accent);
    background-color: rgba(14, 124, 140, 0.12);
    box-shadow: inset 0 0 0 1px rgba(14, 124, 140, 0.2);
    font-family: var(--ui);
    font-size: 12px;
    font-weight: 650;
    text-decoration: none;
    cursor: pointer;
    transition: transform 160ms var(--ease), background-color 160ms ease;
}

.wm-copy:hover,
.ui.basic.modal > .content a.wm-pay-go:hover {
    background-color: rgba(14, 124, 140, 0.2);
    text-decoration: none;
}

.wm-copy:active,
.ui.basic.modal > .content a.wm-pay-go:active {
    transform: scale(0.95);
}

.wm-copy.is-done {
    color: var(--accent-ink);
    background-color: var(--accent-fill);
    box-shadow: none;
}

.ui.basic.modal > .content .wm-pay-hint {
    margin: 6px 0 0 102px;
    color: var(--text-dim);
    font-size: 12.5px;
}

.ui.basic.modal > .content .wm-support-foot {
    margin: 20px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--edge-soft);
    color: var(--text-dim);
    font-size: 12.5px;
}

/* ------------------------------------------------------------------ modals */

/* Semantic's "basic" modal is unstyled white-on-dimmer. Give it a real card. */
/* Sheets dim the map less and blur it more -- the backdrop stays recognisable
   behind the glass instead of going flat black. */
.ui.dimmer {
    background: rgba(9, 30, 40, 0.22);
    -webkit-backdrop-filter: blur(24px) saturate(130%);
    backdrop-filter: blur(24px) saturate(130%);
}

.ui.basic.modal {
    max-width: 560px;
    padding: 4px;
    border: 0;
    border-radius: var(--r-lg);
    color: var(--text);
    background-color: var(--glass-thick);
    background-image: var(--sheen);
    -webkit-backdrop-filter: var(--lens-deep);
    backdrop-filter: var(--lens-deep);
    /* !important: Semantic's own .ui.basic.modal sets `box-shadow: none
       !important` at equal specificity, which silently ate both the drop shadow
       and the specular rim. */
    box-shadow: var(--spec), var(--shadow-lg) !important;
    font-family: var(--ui);
    text-align: left;
}

.ui.basic.modal > .ui.icon.header,
.ui.basic.modal > .header {
    padding: 22px 26px 14px;
    border-bottom: 1px solid var(--edge-soft);
    color: var(--text) !important;
    font-family: var(--ui);
    font-size: 19px;
    font-weight: 650;
    letter-spacing: -0.01em;
    line-height: 1.3;
    text-align: left;
    text-shadow: none;
}

/* The markup carries empty <i> placeholders that would otherwise reserve
   vertical space above each title. */
.ui.basic.modal > .ui.icon.header > i.icon:empty,
.ui.basic.modal > .ui.icon.header > i:empty {
    display: none;
}

.ui.basic.modal > .content {
    padding: 18px 26px;
    color: var(--text);
    font-size: 14.5px;
    line-height: 1.62;
}

.ui.basic.modal > .content p {
    margin: 0 0 13px;
}

.ui.basic.modal > .content ul {
    margin: 10px 0 14px;
    padding-left: 0;
    list-style: none;
}

.ui.basic.modal > .content li {
    position: relative;
    padding-left: 20px;
    margin: 0 0 7px;
}

.ui.basic.modal > .content li::before {
    position: absolute;
    top: 0.55em;
    left: 4px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
    content: "";
}

.ui.basic.modal > .content a,
.ui.basic.modal > .content a:hover {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid rgba(14, 124, 140, 0.4);
}

.ui.basic.modal > .content i {
    font-style: normal;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12.5px;
    word-break: break-all;
}

.ui.basic.modal > .actions {
    padding: 6px 26px 22px;
    border-top: 0;
    text-align: right;
}

.ui.basic.modal .ui.button,
.ui.basic.modal .ui.white.button,
.ui.basic.modal .ui.white.ok.button,
.ui.basic.modal .ui.white.ok.inverted.button {
    padding: 11px 22px;
    border: 0;
    border-radius: var(--r-pill);
    color: var(--accent-ink) !important;
    background-color: var(--accent-fill) !important;
    background-image: var(--sheen) !important;
    -webkit-backdrop-filter: blur(12px) saturate(170%);
    backdrop-filter: blur(12px) saturate(170%);
    /* !important because Semantic's .ui.inverted.button sets a 2px white inset
       ring with !important, which frames the button like a sticker. */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5),
                0 2px 10px rgba(9, 30, 40, 0.18) !important;
    font-family: var(--ui);
    font-size: 14px;
    font-weight: 600;
    transition: filter 140ms ease, transform 140ms ease;
}

.ui.basic.modal .ui.button:hover {
    filter: brightness(1.09);
    transform: translateY(-1px);
}

/* ---------------------------------------------------------------- tooltips */

/* Semantic's popup, used for the locate and split-view button hints. Stock is an
   opaque white card, which looks pasted on next to glass controls. */
.ui.popup {
    max-width: 250px;
    padding: 11px 14px;
    border: 0;
    border-radius: var(--r-md);
    color: var(--text);
    background-color: var(--glass-thick);
    background-image: var(--sheen);
    -webkit-backdrop-filter: var(--lens-deep);
    backdrop-filter: var(--lens-deep);
    box-shadow: var(--spec), var(--shadow);
    font-family: var(--ui);
    font-size: 13px;
    line-height: 1.5;
}

.ui.popup > .header {
    color: var(--text);
    font-family: var(--ui);
    font-size: 13.5px;
    font-weight: 650;
}

/* The arrow is a rotated square carrying its own background and a directional
   border-shadow. Match the tint and drop the shadow, or it reads as a grey
   staple stuck to the side of the card. */
.ui.popup::before {
    background: var(--glass-thick) !important;
    -webkit-backdrop-filter: var(--lens-deep);
    backdrop-filter: var(--lens-deep);
    box-shadow: none !important;
}

/* --------------------------------------------------------------- snackbars */

.snackbar-container {
    border-radius: var(--r-md) !important;
    color: var(--text) !important;
    /* !important on both halves: snackbar.js writes `style.background =
       '#323232'` inline, and that shorthand resets the sheen as well as the
       tint. Matching the toolbar's tint and blur rather than the thicker sheet
       material -- at 0.72/30px nothing showed through and it read as a flat
       white pill sitting next to actual glass. */
    background-color: var(--glass-mid) !important;
    background-image: var(--sheen) !important;
    -webkit-backdrop-filter: var(--lens);
    backdrop-filter: var(--lens);
    border: 0;
    box-shadow: var(--spec), var(--shadow) !important;
    /* Stock is 9999, which floats the pin/share snackbar on top of the info
       modal. Sit above the map panes and the brandmark but below Semantic's
       dimmer (1000) and modal (1001) so opening the modal covers it, same as
       the split-view badge. */
    z-index: 990 !important;
    font-family: var(--ui) !important;
    font-size: 13.5px !important;
    letter-spacing: 0.005em;
}

/* snackbar.js assigns its textColor option (white by default) as an inline style
   on the wrapper <p>, which every non-important rule loses to. The pin/share
   snackbar is glass now, so that white has to be beaten. */
.snackbar-container p,
.snackbar-container #clicked {
    color: var(--text) !important;
}

.snackbar-container a,
.snackbar-container .action {
    color: var(--accent) !important;
    font-weight: 600;
    text-decoration: none !important;
    text-transform: none !important;
}

.snackbar-container #clicked {
    font-variant-numeric: tabular-nums;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* The coordinates have to stay readable where there is no lens to sit behind
   them, so the tint carries it alone. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .snackbar-container {
        background-color: rgba(255, 255, 255, 0.92) !important;
    }
}

/* --------------------------------------------------------- focus + motion */

.leaflet-bar > a:focus-visible,
.leaflet-bar > button:focus-visible,
.suggestion:focus-visible,
.leaflet-control-layers-toggle:focus-visible,
.ui.basic.modal .ui.button:focus-visible,
.wm-support-pill:focus-visible,
.wm-callout-go:focus-visible,
.wm-nudge-go:focus-visible,
.wm-nudge-no:focus-visible,
.wm-copy:focus-visible,
.wm-pay-go:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .suggestion,
    .leaflet-bar > a,
    .ui.basic.modal .ui.button,
    .wm-support-pill,
    .wm-nudge,
    .wm-nudge-go,
    .wm-nudge-no,
    .wm-copy,
    .wm-pay-go,
    .wm-callout-go {
        transition: none;
    }

    .suggestion:hover,
    .suggestion:active {
        transform: translateX(-50%);
    }

    /* Still has to arrive, just without travelling. */
    .wm-nudge {
        transform: translate(-50%, 0);
    }

    .leaflet-bar a:active,
    .leaflet-bar button:active,
    .ui.basic.modal .ui.button:hover,
    .wm-support-pill:hover,
    .wm-support-pill:active,
    .wm-nudge-go:active,
    .wm-nudge-no:active,
    .wm-copy:active,
    .wm-pay-go:active,
    .wm-callout-go:active {
        transform: none;
    }
}

/* ------------------------------------------------------------------ mobile */

/* Keep controls clear of notches and home indicators. */
.leaflet-top    { top:    env(safe-area-inset-top, 0px); }
.leaflet-bottom { bottom: env(safe-area-inset-bottom, 0px); }
.leaflet-left   { left:   env(safe-area-inset-left, 0px); }
.leaflet-right  { right:  env(safe-area-inset-right, 0px); }

@media (max-width: 760px) {
    .brandmark {
        top: calc(10px + env(safe-area-inset-top, 0px));
        padding: 6px 13px;
        font-size: 13px;
    }

    .brandmark .brandmark-nz {
        display: none;
    }
}

@media (max-width: 520px) {
    .suggestion {
        display: none;
    }

    /* The attribution is hidden at this width, so the pill is the only thing
       in the corner and sits on the bottom edge itself. */
    .wm-support-pill {
        bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    }

    /* 250px beside a toolbar button overruns a narrow phone, and Semantic
       answers that by hunting through every fallback position and logging
       that the popup doesn't fit. Give it something that always fits. */
    .ui.popup {
        max-width: calc(100vw - 24px);
    }

    /* Text on its own line, buttons under it -- side by side leaves the text a
       column two words wide on a phone. */
    .wm-nudge {
        flex-wrap: wrap;
        padding: 12px 14px;
    }

    .wm-nudge-actions {
        justify-content: flex-end;
        width: 100%;
    }

    /* The account number and the Bitcoin address both need the full width. */
    .wm-pay-row {
        flex-wrap: wrap;
    }

    .wm-pay-label {
        flex: 1 1 100%;
    }

    .wm-pay-value {
        flex: 1 1 auto;
        margin-top: 2px;
    }

    .ui.basic.modal > .content .wm-pay-hint {
        margin-left: 0;
    }

    .ui.basic.modal {
        border-radius: var(--r-md);
    }

    .ui.basic.modal > .ui.icon.header,
    .ui.basic.modal > .header {
        padding: 18px 18px 12px;
        font-size: 17px;
    }

    .ui.basic.modal > .content {
        padding: 15px 18px;
        font-size: 14px;
    }

    .ui.basic.modal > .actions {
        padding: 4px 18px 18px;
    }
}

/* Touch devices need larger targets than the desktop default. */
@media (hover: none) and (pointer: coarse) {
    :root { --tap: 44px; }
}