/* Screen-sized SVG geometry; the map's marker transform cancels map zoom. */
.map-glyph {
    --glyph-backdrop: #655633;
    --glyph-edge: #c6b486;
    --glyph-ink: #fff8e5;
    --glyph-halo: #10150f;
    fill: none;
    stroke: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.map-glyph--exit { --glyph-backdrop: #34543c; --glyph-edge: #a6d092; }
.map-glyph--travel { --glyph-backdrop: #28555d; --glyph-edge: #99d6dc; }
.map-glyph--danger { --glyph-backdrop: #773e29; --glyph-edge: #f2ab78; }
.map-glyph--boss { --glyph-backdrop: #752f37; --glyph-edge: #ef9c9d; }
.map-glyph--access { --glyph-backdrop: #5d5630; --glyph-edge: #d7c48b; }
.map-glyph--person { --glyph-backdrop: #3d4d58; --glyph-edge: #b5c7d3; }
.map-glyph--task { --glyph-backdrop: #756031; --glyph-edge: #f0d38a; }
.map-glyph--quest { --glyph-backdrop: #315878; --glyph-edge: #a3cee9; }
.map-glyph--party { --glyph-backdrop: #60466e; --glyph-edge: #d8b4e7; }

.map-glyph[aria-hidden="true"] > .map-glyph__hit {
    fill: transparent;
    stroke: none;
    pointer-events: all;
}

.map-glyph[aria-hidden="true"] > .map-glyph__backdrop {
    fill: var(--glyph-backdrop);
    stroke: var(--glyph-halo);
    stroke-width: 4;
    paint-order: stroke fill;
}

.map-glyph[aria-hidden="true"] > .map-glyph__symbol {
    fill: none;
    stroke: var(--glyph-ink);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.map-glyph[aria-hidden="true"] > .map-glyph__ring {
    fill: none;
    stroke: var(--glyph-edge);
    stroke-width: 2;
    opacity: 0;
}

.map-glyph.is-selected > .map-glyph__ring,
:is(.map-landmark, .map-task-pin, .map-party-poi):is(:hover, :focus, :focus-visible, .is-active) .map-glyph > .map-glyph__ring,
[role="button"]:focus-visible .map-glyph > .map-glyph__ring {
    opacity: 1;
}

:is(.map-landmark, .map-task-pin, .map-party-poi):is(:focus, :focus-visible) .map-glyph > .map-glyph__ring,
[role="button"]:focus-visible .map-glyph > .map-glyph__ring {
    stroke: #fff8e5;
    stroke-dasharray: 3 3;
}

.map-glyph[aria-hidden="true"] > .map-glyph__badge > circle {
    fill: #eee3c5;
    stroke: var(--glyph-halo);
    stroke-width: 2;
}

.map-glyph[aria-hidden="true"] > .map-glyph__badge > text {
    fill: #171d13;
    stroke: none;
    font: 700 10px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: 0;
    text-anchor: middle;
    dominant-baseline: central;
    pointer-events: none;
}