/* The members' map: one screen, the map under everything, tools along the right edge. */
body.mp { margin: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.mp-bar { display: flex; align-items: center; gap: 12px; flex: none; min-width: 0; padding-top: 8px; padding-bottom: 8px; }
.mp-bar .brand { flex: none; }
.mp-embed .mp-bar .brand { display: none; }
.mp-find { display: flex; gap: 6px; flex: 1; max-width: 460px; margin: 0; }
.mp-find input { flex: 1; min-width: 0; min-height: 40px; margin: 0; }
.mp-find button { min-height: 40px; margin: 0; padding: 0 14px; }
.mp-main { position: relative; flex: 1; min-height: 0; padding: 0; margin: 0; max-width: none; }
/* Edges spelled out as well as inset, and a size of its own: the map must have room even where a web view lays the page out before its screen has a size */
.mp-map { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; width: 100%; height: 100%; min-height: 240px; background: #222; }
.mp-map.mp-aim { cursor: crosshair; }

.mp-tools { position: absolute; right: 10px; bottom: 28px; z-index: 1000; display: flex; flex-direction: column; gap: 6px; max-height: calc(100% - 140px); overflow-y: auto; }
.mp-tools button { font: 600 .9rem system-ui, sans-serif; min-height: 42px; margin: 0; padding: 0 12px; color: #fff; background: rgba(20, 17, 13, .9); border: 1px solid #3a4038; box-shadow: 0 1px 5px rgba(0, 0, 0, .6); cursor: pointer; text-align: left; }
.mp-tools button[aria-pressed="true"] { background: transparent; color: var(--accent, #ff6a13); }

/* The tool bar: one rounded strip down the right edge, a picture over a word on each button */
.mp-tools { gap: 0; right: 10px; background: rgba(16, 21, 18, .94); border: 1px solid #2a342d; border-radius: 16px; box-shadow: 0 4px 14px rgba(0, 0, 0, .45); overflow-x: hidden; scrollbar-width: none; padding: 4px 0; }
.mp-tools::-webkit-scrollbar { display: none; }
.mp-tools button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 60px; min-height: 52px; padding: 7px 2px 6px; background: transparent; border: 0; box-shadow: none; text-align: center; color: #eef1ea; font: 600 .64rem/1.1 system-ui, sans-serif; letter-spacing: .01em; white-space: nowrap; }
.mp-tools [data-tool="more"] { border-top: 1px solid #2a342d; margin-top: 2px; }
/* Each tool is a plain line drawing in the button's own colour, so the eight read as one set (they were
   emoji, which every phone draws differently and none of them draws well small). */
.mp-tools button::before { content: ""; width: 22px; height: 22px; flex: none; background: currentColor; -webkit-mask: var(--mp-i) center / contain no-repeat; mask: var(--mp-i) center / contain no-repeat; }
.mp-tools button:hover, .mp-tools button:focus-visible { background: rgba(255, 255, 255, .09); outline: none; }
.mp-tools button:active { background: rgba(255, 255, 255, .16); }
.mp-tools .mp-tool-more { display: none; }
.mp-tools [data-tool="me"] { --mp-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l18-8-8 18-2-8-8-2z'/%3E%3C/svg%3E"); }
.mp-tools [data-tool="pin"] { --mp-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6-5.6-6-10.5a6 6 0 1 1 12 0C18 15.4 12 21 12 21z'/%3E%3Ccircle cx='12' cy='10.5' r='2'/%3E%3C/svg%3E"); }
.mp-tools [data-tool="line"] { --mp-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 16.5c0-8 12-2.5 12-9.5'/%3E%3Ccircle cx='6' cy='18.5' r='2'/%3E%3Ccircle cx='18' cy='5' r='2'/%3E%3C/svg%3E"); }
.mp-tools [data-tool="area"] { --mp-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 4.8v8.4L12 21l-8-4.800V7.8z'/%3E%3C/svg%3E"); }
.mp-tools [data-tool="track"] { --mp-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-dasharray='2.5 3'%3E%3Cpath d='M5 19c2.500-6 4.500 0 7-6s4.500 0 7-6'/%3E%3C/svg%3E"); }
.mp-tools [data-tool="places"] { --mp-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.500l2.600 5.400 5.900.800-4.300 4.100 1.100 5.900L12 16.900l-5.300 2.800 1.100-5.900L3.500 9.700l5.900-.800z'/%3E%3C/svg%3E"); }
.mp-tools [data-tool="3d"] { --mp-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.500 19l6.500-11 4 6.500 2.200-3.300L21.500 19z'/%3E%3C/svg%3E"); }
.mp-tools [data-tool="more"] { --mp-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7h14'/%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M5 17h14'/%3E%3C/svg%3E"); }
/* Under "More": each tool with a line saying what it does */
.mp-more { display: flex; flex-direction: column; }
.mp-panel .mp-more button { display: block; width: 100%; min-height: 0; margin: 0; padding: 11px 2px; text-align: left; background: transparent; color: inherit; border: 0; border-top: 1px solid var(--line, #2c3630); font: inherit; }
.mp-panel .mp-more button:hover, .mp-panel .mp-more button:focus-visible { background: rgba(255, 255, 255, .06); }
.mp-more b { display: block; font-weight: 600; }
.mp-more small { display: block; margin-top: 2px; font-size: .84rem; line-height: 1.35; color: var(--muted, #9aa69e); }

.mp-where, .mp-status { position: absolute; left: 10px; z-index: 1000; margin: 0; max-width: calc(100% - 150px); background: rgba(20, 17, 13, .9); color: #fff; font: 600 .82rem system-ui, sans-serif; padding: 6px 9px; }
.mp-where { bottom: 28px; }
.mp-status { bottom: 64px; font-weight: 500; }

.mp-panel { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1100; max-height: 62%; overflow-y: auto; background: var(--surface, #171e1a); color: var(--ink, #f4f1ea); border-top: 2px solid var(--accent, #ff6a13); padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 18px rgba(0, 0, 0, .5); }
@media (min-width: 760px) { .mp-panel { left: 10px; right: auto; bottom: 28px; width: 400px; max-height: calc(100% - 60px); border: 1px solid var(--line, #2c3630); border-top: 2px solid var(--accent, #ff6a13); } .mp-where { display: none; } }
.mp-panel h2 { margin: 0 70px 8px 0; font-size: 1.15rem; text-transform: uppercase; letter-spacing: .02em; }
.mp-panel h3 { margin: 14px 0 4px; font-size: .95rem; }
.mp-panel p { margin: 6px 0; }
.mp-panel .fine { font-size: .82rem; color: var(--muted, #9aa69e); }
.mp-panel button, .mp-pop button { font: 600 .92rem system-ui, sans-serif; min-height: 40px; margin: 4px 6px 4px 0; padding: 0 12px; cursor: pointer; border: 1px solid var(--accent, #ff6a13); background: var(--accent, #ff6a13); color: #14110d; }
.mp-panel button.quiet, .mp-pop button.quiet { background: transparent; color: inherit; border-color: var(--line, #5a645c); }
.mp-panel button:disabled { opacity: .5; cursor: default; }
.mp-close { position: absolute; top: 8px; right: 10px; }
.mp-panel button.mp-close { background: transparent; color: inherit; border-color: var(--line, #5a645c); min-height: 34px; margin: 0; }
.mp-panel input[type="text"], .mp-panel input[type="date"] { min-height: 40px; }
.mp-panel input[type="range"] { width: 100%; }
.mp-panel label { display: block; margin: 8px 0 2px; font-size: .88rem; }

.mp-list { list-style: none; margin: 8px 0; padding: 0; }
.mp-list li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line, #2c3630); }
.mp-list li > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.mp-list small { display: block; color: var(--muted, #9aa69e); }
.mp-list button { min-height: 34px; margin: 0; padding: 0 9px; font-size: .82rem; }
.mp-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #14110d; }

.mp-rows { width: 100%; border-collapse: collapse; margin: 6px 0; font-size: .9rem; }
.mp-rows th { text-align: left; font-weight: 600; padding: 3px 10px 3px 0; vertical-align: top; white-space: nowrap; color: var(--muted, #9aa69e); }
.mp-rows td { padding: 3px 0; overflow-wrap: anywhere; }

.mp-pop { font: 500 .9rem system-ui, sans-serif; min-width: 200px; }
.mp-pop b { display: block; margin-bottom: 4px; }
.mp-pop button { min-height: 36px; font-size: .85rem; }
.mp-pop button.quiet { color: #14110d; border-color: #777; }
.mp-pop .fine { font-size: .78rem; color: #555; margin: 4px 0 0; }

.mp-unit { font: 700 12px system-ui, sans-serif; color: #fff; background: rgba(20, 17, 13, .7); border: 0; box-shadow: none; padding: 1px 5px; }
.mp-unit:before, .mp-tag:before { display: none; }
.mp-tag { font: 700 11px system-ui, sans-serif; color: #fff; background: rgba(20, 17, 13, .85); border: 0; box-shadow: none; padding: 1px 4px; }
.mp-legend { margin: 6px 0; font-size: .82rem; }
.mp-legend i { display: inline-block; width: 11px; height: 11px; margin: 0 4px 0 8px; vertical-align: -1px; border: 1px solid #000; }
.mp-legend i:first-child { margin-left: 0; }
/* The map's own buttons: Layers at the top right, the legend at the top left */
.mp-ctl { font: 600 .9rem system-ui, sans-serif; min-height: 42px; padding: 0 14px; color: #14110d; background: #fff; border: 2px solid rgba(0, 0, 0, .25); border-radius: 4px; cursor: pointer; box-shadow: 0 1px 5px rgba(0, 0, 0, .4); }
.mp-legendbox { max-width: min(260px, 70vw); }
.mp-legend-body { margin-top: 6px; max-height: 46vh; overflow-y: auto; background: rgba(20, 17, 13, .92); color: #fff; padding: 8px 10px; font: 500 .8rem system-ui, sans-serif; border-radius: 4px; }
.mp-legend-body > div { margin: 0 0 8px; }
.mp-legend-body > div:last-child { margin-bottom: 0; }
.mp-legend-body b { display: block; margin-bottom: 2px; }
.mp-key { display: flex; flex-wrap: wrap; gap: 3px 10px; margin-top: 3px; font-size: .8rem; }
.mp-key > span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.mp-sw { display: inline-block; flex: none; width: 13px; height: 13px; border: 1px solid rgba(0, 0, 0, .7); box-sizing: border-box; }
.mp-sw-line { width: 18px; height: 0; border: 0; border-top: 3px solid; }
.mp-sw-dash { width: 18px; height: 0; border: 0; border-top: 3px dashed; }
/* One layer in the list: its switch, its name, what it is, its colours */
.mp-panel label.mp-layer { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 9px 0; border-top: 1px solid var(--line, #2c3630); font-size: 1rem; cursor: pointer; }
.mp-layer input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--accent, #ff6a13); }
.mp-layer > span { flex: 1; min-width: 0; }
.mp-layer b { display: block; font-weight: 600; }
.mp-layer small { display: block; margin-top: 2px; font-size: .84rem; line-height: 1.35; color: var(--muted, #9aa69e); }
.mp-zoomin { color: var(--accent, #ff6a13) !important; font-weight: 600; }
/* A pin with a picture: a round badge in the pin's colour */
.mp-pinwrap { background: none; border: 0; }
.mp-pinicon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; box-sizing: border-box; border-radius: 50%; border: 2px solid #14110d; font-size: 17px; line-height: 1; box-shadow: 0 1px 4px rgba(0, 0, 0, .55); cursor: pointer; }
.mp-iconset { display: block; margin: 8px 0 0; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted, #9aa69e); }
.mp-icons { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.mp-panel .mp-icons button { min-width: 44px; min-height: 44px; margin: 0; padding: 0 8px; font-size: 1.25rem; line-height: 1; }
.mp-panel .mp-icons button[aria-pressed="true"] { background: var(--accent, #ff6a13); border-color: var(--accent, #ff6a13); color: #14110d; }
.mp-panel .mp-icons button:first-child { font-size: .85rem; }
/* A tint is multiplied into the map under it, so contour lines and names still show through */
.mp-tint { mix-blend-mode: multiply; }
.mp-fade { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.mp-fade input[type="range"] { flex: 1; min-width: 0; width: auto; height: 28px; margin: 0; accent-color: var(--accent, #ff6a13); }
.mp-layer .mp-fade small { display: inline; margin: 0; }
.mp-legend-body .mp-zoomin { display: block; }

/* The layer switch is a word, not the stock picture (which is not shipped with the site) */
.mp .leaflet-control-layers-toggle, .mp .leaflet-touch .leaflet-control-layers-toggle { width: auto; height: 42px; background-image: none; padding: 0 12px; font: 600 .9rem/42px system-ui, sans-serif; color: #14110d; text-decoration: none; }
.mp .leaflet-control-layers-toggle::after { content: "Layers"; }
.mp .leaflet-control-layers-expanded .leaflet-control-layers-toggle { display: none; }
.leaflet-control-layers { font: 500 .85rem system-ui, sans-serif; }
.leaflet-control-layers-expanded { max-height: 70vh; overflow-y: auto; }

/* The view from a spot (map-view.js): a picture the hunter drags to turn and tilt, so the
   page must not scroll under his finger while it is on the picture. */
.mv { margin: 8px 0; }
.mv-pic { display: block; width: 100%; height: auto; background: #222; touch-action: none; cursor: grab; -webkit-user-select: none; user-select: none; }
.mv-pic:active { cursor: grabbing; }
.mv-pic:focus-visible { outline: 2px solid var(--accent, #ff6a13); outline-offset: 2px; }
.mp-panel .mv-read { font-weight: 600; margin-top: 8px; }
.mp-panel .mv button[aria-pressed="true"] { background: var(--accent, #ff6a13); border-color: var(--accent, #ff6a13); color: #14110d; }

/* Everything that floats on the map shares one look with the tool bar: dark, rounded, light text.
   (The zoom buttons, the Layers button and the legend button were white boxes from the map library.) */
.mp .leaflet-bar { border: 1px solid #2a342d; border-radius: 14px; box-shadow: 0 4px 14px rgba(0, 0, 0, .45); background: rgba(16, 21, 18, .94); overflow: hidden; }
.mp .leaflet-bar a, .mp .leaflet-touch .leaflet-bar a { width: 42px; height: 42px; line-height: 42px; background: transparent; color: #eef1ea; border-bottom: 1px solid #2a342d; }
.mp .leaflet-bar a:last-child { border-bottom: 0; }
.mp .leaflet-bar a:hover, .mp .leaflet-bar a:focus-visible { background: rgba(255, 255, 255, .09); color: #fff; }
.mp .leaflet-bar a.leaflet-disabled { background: transparent; color: #5d6a61; }
.mp .leaflet-control-layers:not(.leaflet-control-layers-expanded) { border: 1px solid #2a342d; border-radius: 14px; box-shadow: 0 4px 14px rgba(0, 0, 0, .45); background: rgba(16, 21, 18, .94); }
.mp .leaflet-control-layers:not(.leaflet-control-layers-expanded) .leaflet-control-layers-toggle { color: #eef1ea; }
.mp-ctl { border: 1px solid #2a342d; border-radius: 14px; box-shadow: 0 4px 14px rgba(0, 0, 0, .45); background: rgba(16, 21, 18, .94); color: #eef1ea; }
.mp-where, .mp-status { border: 1px solid #2a342d; border-radius: 12px; background: rgba(16, 21, 18, .94); padding: 8px 11px; }
.mp-find input { border-radius: 12px; }
.mp-find button { border-radius: 12px; background: var(--accent, #ff6a13); color: #14110d; border: 0; font-weight: 700; }