/* Styles for the map's add-on scripts. Each script keeps its rules in its own block below,
   under its own class prefix, so two people editing at once do not collide:
   map-plan.js .mpp-   map-range.js .mpr-   map-terrain.js .mpt-   map-sync.js .mps- */

/* map-plan.js */
/* Climb and walking time: a finger dragged across the profile moves the point along the line,
   so a sideways drag is kept from the page. Up and down still scrolls the panel. */
.mpp-climb { margin: 8px 0; }
.mpp-climb .mp-rows td, .mpp-wind .mp-rows td { white-space: normal; }
.mpp-climb .mp-rows, .mpp-wind .mp-rows { table-layout: auto; max-width: 100%; }
.mpp-profile { display: block; width: 100%; height: 150px; margin: 8px 0 4px; background: rgba(0, 0, 0, .25); color: var(--ink, #f4f1ea); touch-action: pan-y; cursor: crosshair; -webkit-user-select: none; user-select: none; }
.mpp-profile:focus-visible { outline: 2px solid var(--accent, #ff6a13); outline-offset: 2px; }
.mp-panel .mpp-read { font-weight: 600; }
.mp-panel .mpp-climb button[aria-pressed="true"] { background: var(--accent, #ff6a13); border-color: var(--accent, #ff6a13); color: #14110d; }

/* Wind at my pins: an arrow through each pin, pointing the way the wind blows to, with the words under it */
.mp-panel .mpp-wind select { display: block; width: 100%; min-height: 40px; margin: 0 0 6px; font: inherit; }
.mpp-wind-mark { overflow: visible; }
.mpp-wind-at { position: absolute; left: 0; top: 0; pointer-events: none; }
.mpp-arrow { position: absolute; left: -32px; top: -32px; width: 64px; height: 64px; overflow: visible; }
.mpp-arrow path { fill: #3fb6ff; stroke: #14110d; stroke-width: 1.2; stroke-linejoin: round; }
.mpp-wind-words { position: absolute; left: 0; top: 36px; transform: translateX(-50%); white-space: nowrap; font: 700 12px system-ui, sans-serif; color: #fff; background: rgba(20, 17, 13, .88); padding: 2px 6px; }

/* Print this map: a number beside each pin that matches the list, and north. The sheet's words
   and the north arrow are on the page only while the Print panel is open, and show on paper only. */
.mpp-num { display: flex; align-items: center; justify-content: center; box-sizing: border-box; border-radius: 50%; background: #fff; border: 2px solid #14110d; color: #14110d; font: 700 12px system-ui, sans-serif; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.mpp-pins { list-style: none; margin: 6px 0; padding: 0; font-size: .9rem; }
.mpp-pins li { margin: 2px 0; overflow-wrap: anywhere; }
.mpp-n { display: inline-block; min-width: 2em; font-weight: 700; }
.mpp-sheet, .mpp-north { display: none; }
.mpp-north-arrow { display: block; width: 34px; height: 34px; margin: 0 auto; }
.mpp-north-arrow path { fill: #14110d; stroke: #fff; stroke-width: 1; }

@media print {
  @page { margin: .5in; }
  /* The screen layout is one fixed screen with everything laid over the map. On paper it is a
     page that flows: the title, the map, then the list. */
  body.mpp-printing { display: block; height: auto; min-height: 0; overflow: visible; background: #fff; color: #000; }
  .mpp-printing .mp-bar, .mpp-printing .mp-tools, .mpp-printing .mp-panel, .mpp-printing .mp-where, .mpp-printing .mp-status,
  .mpp-printing .leaflet-control-zoom, .mpp-printing .leaflet-control-layers, .mpp-printing .leaflet-popup-pane { display: none !important; }
  /* The map keeps the pixel size it has on screen, so Leaflet has every square of it loaded and
     in place, and the whole thing is scaled to the paper. The box around it is the scaled size. */
  .mpp-printing .mp-main { display: block; position: relative; flex: none; width: var(--mpp-pw, 100%); height: var(--mpp-ph, 6in); margin: 0; overflow: hidden; border: 1px solid #000; break-inside: avoid; page-break-inside: avoid; }
  .mpp-printing .mp-map { position: absolute; inset: auto; left: 0; top: 0; right: auto; bottom: auto; width: var(--mpp-w, 100%); height: var(--mpp-h, 100%); transform: scale(var(--mpp-k, 1)); transform-origin: 0 0; background: #fff; }
  .mpp-printing .leaflet-tile, .mpp-printing .leaflet-container img { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* Name tags are white words on a dark box, and a printer that leaves backgrounds out would
     leave white words on white paper: on paper they are dark words in a white box. */
  .mpp-printing .mp-tag, .mpp-printing .mp-unit, .mpp-printing .mpp-wind-words { color: #000; background: #fff; border: 1px solid #000; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .mpp-printing .mpp-north { display: block; margin: 8px; padding: 3px 5px; background: #fff; border: 1px solid #000; color: #000; font: 700 13px system-ui, sans-serif; text-align: center; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .mpp-printing .mpp-sheet { display: block; color: #000; font: 12px/1.4 system-ui, sans-serif; max-width: 7.2in; }
  .mpp-sheet-title { margin: 0 0 2px; font: 700 20px/1.2 system-ui, sans-serif; overflow-wrap: anywhere; }
  .mpp-sheet-facts { margin: 0 0 8px; }
  .mpp-sheet-h { margin: 10px 0 2px; font-weight: 700; }
  .mpp-sheet p { margin: 6px 0; }
  .mpp-sheet .mpp-pins { columns: 2; column-gap: 24px; font-size: 12px; }
  .mpp-sheet .mpp-pins li { break-inside: avoid; }
  .mpp-sheet-fine { font-size: 11px; }
}

/* map-range.js */
/* Game range: a species, then a row for each range Colorado Parks and Wildlife publishes for it.
   Each row carries the colour the range is drawn in, on a white chip so the colour looks the
   same in the panel as it does on the map (where every shape has a white edge under it). */
.mp-panel #mpr-species { display: block; width: 100%; min-height: 40px; margin: 0 0 6px; font: inherit; }
.mpr-list { list-style: none; margin: 8px 0; padding: 0; }
.mpr-list li { padding: 7px 0; border-top: 1px solid var(--line, #2c3630); }
.mp-panel .mpr-list label { display: flex; align-items: center; gap: 8px; margin: 0; min-height: 34px; font-size: .95rem; font-weight: 600; cursor: pointer; }
.mpr-list input[type="checkbox"] { flex: none; width: 22px; height: 22px; margin: 0; }
.mpr-list small { display: block; margin: 2px 0 0; font-size: .8rem; color: var(--muted, #9aa69e); }
.mpr-list .mpr-state:empty, .mpr-list .mpr-date:empty { display: none; }
.mpr-list .mpr-state { color: var(--ink, #f4f1ea); }
.mpr-list .mpr-name { color: var(--ink, #f4f1ea); }
/* The key is a small piece of the map: the layer's own line (--c), broken the way it is drawn,
   over white as on the map, around the pale ground of the topo map tinted as strongly (--f) as
   the shape's fill. map-range.js sets --c and --f from the same table it draws from. */
.mpr-key { position: relative; flex: none; box-sizing: border-box; width: 30px; height: 20px; background: #fff; border: 3px solid var(--c, #4a4a4a); outline: 2px solid #fff; }
.mpr-key::before, .mpr-key::after { content: ""; position: absolute; inset: 0; }
.mpr-key::before { background: #e6e2d3; }
.mpr-key::after { background: var(--c, #4a4a4a); opacity: var(--f, .15); }
.mpr-key.mpr-dash { border-style: dashed; }
.mpr-key.mpr-dot { border-style: dotted; }
.mpr-key.mpr-line { height: 0; border-width: 3px 0 0; border-style: dashed; }
.mpr-key.mpr-line::before, .mpr-key.mpr-line::after { display: none; }
.mpr-here h3 { margin-bottom: 0; }
.mpr-found li { padding: 2px 0; border-top: 0; }
.mp-panel .mpr-found label { cursor: default; min-height: 26px; }

/* map-terrain.js */
/* Find terrain: the shading is one small picture stretched over the ground it was worked out
   for, a cell of the picture to a cell of the ground, so it is drawn in hard squares, not blurred. */
.mpt-shade { image-rendering: crisp-edges; image-rendering: pixelated; }
.mp-panel .mpt-num { width: 5.5em; min-height: 40px; font: inherit; }
.mp-panel .mpt-pick { min-height: 40px; max-width: 100%; font: inherit; margin: 4px 0; }
.mp-panel .mpt-pair { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* eight compass points in one row on a phone 375 wide */
.mp-panel .mpt-faces { display: flex; flex-wrap: wrap; gap: 4px; }
.mp-panel .mpt-faces button { flex: 1 0 36px; min-width: 36px; padding: 0 2px; margin: 0; }
.mp-panel .mpt-grade { font: inherit; font-size: .82rem; }
.mp-panel .mpt-faces button[aria-pressed="true"] { background: var(--accent, #ff6a13); border-color: var(--accent, #ff6a13); color: #14110d; }
.mp-panel label.mpt-tick { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0; }
.mp-panel label.mpt-tick input { width: 20px; height: 20px; flex: none; margin: 1px 0 0; }
.mp-panel .mpt-status { font-weight: 600; min-height: 1.3em; }
.mp-panel .mpt-rules { margin: 4px 0 8px; padding-left: 18px; font-size: .82rem; color: var(--muted, #9aa69e); }
.mp-panel .mpt-rules li { margin: 3px 0; }

/* map-sync.js */
/* Members' places, sharing, alerts on spots and the season log. The status line under "My places"
   is quiet on purpose: it says where the places are saved and nothing else. */
.mp-panel .mps-line { margin: 8px 0 4px; min-height: 1.2em; }
.mp-panel .mps-line a { color: inherit; text-decoration: underline; }
.mp-panel .mps-doors { margin: 4px 0 0; }
/* A list to tick from: one row a place, the whole row is the checkbox's label, and a long list scrolls inside itself */
.mp-panel .mps-pick { max-height: 40vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.mp-panel label.mps-check { display: flex; flex: 1; align-items: center; gap: 8px; min-width: 0; min-height: 34px; margin: 0; font-size: .95rem; cursor: pointer; }
.mp-panel label.mps-check input { flex: none; width: 22px; height: 22px; margin: 0; }
.mp-panel label.mps-check > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.mp-panel .mps-field { display: block; width: 100%; box-sizing: border-box; min-height: 40px; font: inherit; }
.mp-panel input.mps-link { width: 100%; box-sizing: border-box; font-size: .82rem; }
/* A hunt's notes keep the line breaks the member typed */
.mp-panel .mps-notes { white-space: pre-wrap; overflow-wrap: anywhere; margin: 8px 0; }
.mps-shared { font-style: italic; }

/* map-3d.js (prefix .mp3-) */
/* The 3D map lies over the flat one and its tool column, and under the panel ("What is here"
   opens over it). Its own buttons take the corners the flat map's controls use. */
.mp3 { position: absolute; inset: 0; z-index: 1050; background: #222; }
/* the engine marks its holder position: relative in its own sheet, which loads later: this has to outrank it */
.mp3 .mp3-map { position: absolute; inset: 0; }
.mp3-map canvas { outline: none; }
.mp3-bar { position: absolute; left: 10px; top: 10px; right: 64px; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; }
.mp3-bar button, .mp3-north { pointer-events: auto; 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; }
.mp3-bar button[aria-pressed="true"], .mp3-bar .mp3-back { background: var(--accent, #ff6a13); border-color: var(--accent, #ff6a13); color: #14110d; }
.mp3-side { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.mp3-north { width: 44px; height: 44px; padding: 0; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: .72rem; line-height: 1; }
/* the needle turns with the map, so it always points at north on the ground */
.mp3-needle { display: block; width: 0; height: 0; margin-bottom: 2px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 14px solid var(--accent, #ff6a13); transform-origin: 50% 100%; }
/* While 3D is open the map's own tool column and status line are lifted over the picture (and
   stay under the panel). The column rides above the line about the picture and stops short of
   the compass; the status line sits under the top buttons. */
.mp3-on .mp-tools { z-index: 1060; bottom: calc(var(--mp3-foot, 64px) + 8px); max-height: calc(100% - var(--mp3-foot, 64px) - 132px); }
.mp3-on .mp-status { z-index: 1060; top: 160px; bottom: auto; max-width: calc(100% - 140px); }
.mp3-aim canvas { cursor: crosshair; }
/* The camera buttons and the line about the picture share the bottom of the screen: the buttons ride above the line however many rows it takes */
.mp3-foot { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: flex-start; pointer-events: none; }
/* on the left, clear of the tool column on the right; on a narrow phone its rows wrap */
.mp3-cam { pointer-events: auto; display: flex; flex-direction: column; gap: 6px; margin: 0 10px 8px; max-width: calc(100% - 150px); }
.mp3-row { display: flex; flex-wrap: wrap; gap: 6px; }
.mp3-cam button { font: 600 .82rem system-ui, sans-serif; min-height: 42px; min-width: 44px; margin: 0; padding: 0 9px; color: #fff; background: rgba(20, 17, 13, .9); border: 1px solid #3a4038; box-shadow: 0 1px 5px rgba(0, 0, 0, .6); cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.mp3-cam button[aria-pressed="true"] { background: var(--accent, #ff6a13); border-color: var(--accent, #ff6a13); color: #14110d; }
.mp3-fine { align-self: stretch; margin: 0; padding: 5px 10px calc(5px + env(safe-area-inset-bottom)); background: rgba(20, 17, 13, .78); color: #e9e6df; font: 500 .7rem/1.35 system-ui, sans-serif; }
/* A pin is a dot on the ground with its name above it; the tag is not part of the dot's box, so the dot sits on the spot */
.mp3-pin { position: relative; width: 18px; height: 18px; pointer-events: none; }
.mp3-pin i { display: block; box-sizing: border-box; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #14110d; }
.mp3-pin span { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); white-space: nowrap; font: 700 11px system-ui, sans-serif; color: #fff; background: rgba(20, 17, 13, .85); padding: 1px 4px; }
.mp3-unit { pointer-events: none; font: 700 12px system-ui, sans-serif; color: #fff; background: rgba(20, 17, 13, .7); padding: 1px 5px; }
.mp3-me { box-sizing: border-box; width: 18px; height: 18px; border-radius: 50%; background: #1e90ff; border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .5); pointer-events: none; }
.mp3-here { box-sizing: border-box; width: 16px; height: 16px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .6); pointer-events: none; }
.mp3 .maplibregl-popup-content { color: #14110d; padding: 12px 14px 10px; }
.mp3 .maplibregl-popup-close-button { width: 32px; height: 32px; font-size: 20px; color: #14110d; }

/* map-route.js (prefix .mpa-) */
/* Auto route and the climb to a pin. The profile is the same picture as a route's own
   (map-plan.js): a sideways drag moves the point along the line, up and down scrolls the panel. */
.mpa .mp-rows td, .mpa-glance .mp-rows td { white-space: normal; }
.mpa .mp-rows, .mpa-glance .mp-rows { table-layout: auto; max-width: 100%; }
.mpa-glance { margin: 8px 0; }
.mp-panel .mpa-pair { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mp-panel .mpa-pair select { flex: 1 1 180px; min-width: 0; max-width: 100%; min-height: 40px; font: inherit; }
.mp-panel .mpa-pair button { margin: 0; }
.mp-panel .mpa-num { width: 5em; min-height: 40px; font: inherit; }
.mp-panel .mpa-grade { font-size: .9rem; }
.mp-panel .mpa-modes { display: flex; flex-wrap: wrap; gap: 4px; }
.mp-panel .mpa-modes button { flex: 1 0 auto; margin: 0; }
.mp-panel .mpa button[aria-pressed="true"] { background: var(--accent, #ff6a13); border-color: var(--accent, #ff6a13); color: #14110d; }
.mp-panel .mpa-status, .mp-panel .mpa-read { font-weight: 600; min-height: 1.3em; }
/* the one thing on the panel he must not miss: the path breaks the limit he set */
.mp-panel .mpa-warn { margin: 4px 0 10px; padding: 8px 10px; border-left: 4px solid #ff3b30; background: rgba(255, 59, 48, .14); font-weight: 600; }
.mpa-profile { display: block; width: 100%; height: 150px; margin: 8px 0 4px; background: rgba(0, 0, 0, .25); color: var(--ink, #f4f1ea); touch-action: pan-y; cursor: crosshair; -webkit-user-select: none; user-select: none; }
.mpa-profile:focus-visible { outline: 2px solid var(--accent, #ff6a13); outline-offset: 2px; }
.mpa-limits { margin-top: 12px; border-top: 1px solid var(--line, #2c3630); }