/* The map's controls in the phone app's layout (map-hud.js): chips along the top, round buttons down the right,
   a sheet that slides up, the drawing tools along the bottom. Everything here applies only under body.mp-hud. */
.mp-hud .mp-bar { position: absolute; top: 64px; left: 10px; right: 76px; z-index: 1150; max-width: 520px; padding: 0; background: transparent; border: 0; display: none; }
.mp-hud.hud-finding .mp-bar { display: flex; }
.mp-hud .mp-bar .brand { display: none; }
.mp-hud .mp-find { max-width: none; background: rgba(16, 21, 18, .96); border: 1px solid #2a342d; border-radius: 22px; padding: 4px; box-shadow: 0 4px 14px rgba(0, 0, 0, .45); }
.mp-hud .mp-find input { border: 0; background: transparent; color: #f4f1ea; padding: 0 12px; min-height: 40px; font-size: 16px; }
.mp-hud .mp-find button { border-radius: 18px; }
.mp-hud .mp-main { height: 100%; }

/* ---- the chips ---- */
.hud-chips { position: absolute; top: 10px; left: 10px; right: 10px; z-index: 1100; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 46px 6px 0; -webkit-overflow-scrolling: touch; }
.hud-chips::-webkit-scrollbar { display: none; }
.hud-chip { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; padding: 0 16px; border-radius: 22px; border: 1px solid #2a342d; background: rgba(16, 21, 18, .94); color: #f4f1ea; font: 700 15px system-ui, -apple-system, "Segoe UI", sans-serif; text-decoration: none; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .4); white-space: nowrap; }
.hud-chip:hover, .hud-chip:focus-visible { background: rgba(32, 40, 35, .98); outline: none; }
.hud-chip.has { border-color: #ff7a33; }
.hud-chip .hud-n { font-style: normal; color: #ff7a33; }
.hud-chip .hud-n:empty { display: none; }
.hud-chip.on { background: #ff7a33; border-color: #ff7a33; color: #1a0d05; }
.hud-chip.on .hud-n { color: #1a0d05; }
.hud-brand { gap: 0; padding-left: 14px; font-size: 17px; letter-spacing: .01em; }
.hud-brand::before { content: ""; width: 24px; height: 17px; margin-right: 8px; background: #ff7a33; --tag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 20'%3E%3Cpath fill-rule='evenodd' d='M9 1h17a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H9L1 10zm1.500 7a2 2 0 1 0 0 4 2 2 0 0 0 0-4z'/%3E%3C/svg%3E"); -webkit-mask: var(--tag) center / contain no-repeat; mask: var(--tag) center / contain no-repeat; }
.hud-brand .hud-tag { color: #ff7a33; }
.hud-chip.hud-acct { margin-left: auto; min-height: 44px; }
.hud-more { position: absolute; top: 12px; right: 10px; z-index: 1101; width: 40px; height: 44px; margin: 0; padding: 0; border-radius: 22px; border: 0; background: #ff7a33; color: #1a0d05; font: 700 24px/1 system-ui, sans-serif; cursor: pointer; box-shadow: -8px 0 12px rgba(16, 21, 18, .7); }
.hud-more[hidden] { display: none; }

/* ---- the round buttons ---- */
.hud-floats { position: absolute; top: 72px; right: 10px; z-index: 1050; display: flex; flex-direction: column; gap: 10px; }
.hud-round { width: 52px; height: 52px; margin: 0; padding: 0; border-radius: 26px; border: 1px solid #2a342d; background: rgba(16, 21, 18, .94); color: #f4f1ea; display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .4); }
.hud-round:hover, .hud-round:focus-visible { background: rgba(32, 40, 35, .98); outline: none; }

/* the map library's own zoom buttons sit under the chips, in the same dress */
.mp-hud .leaflet-top.leaflet-left { top: 62px; }
.mp-hud .leaflet-bar { border: 1px solid #2a342d; border-radius: 14px; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, .4); }
.mp-hud .leaflet-bar a { background: rgba(16, 21, 18, .94); color: #f4f1ea; border-bottom-color: #2a342d; }
.mp-hud .leaflet-bar a:hover { background: rgba(32, 40, 35, .98); color: #fff; }
/* the old Layers button and legend box: the chips and the sheet do their work */
.mp-hud .leaflet-top.leaflet-right .mp-ctl, .mp-hud .mp-legendbox { display: none; }

/* ---- the drawing tools: a bar along the bottom ---- */
.mp-hud .mp-tools { top: auto; right: 0; left: 0; bottom: 0; max-height: none; flex-direction: row; justify-content: space-around; gap: 0; border-radius: 0; border: 0; border-top: 1px solid #2a342d; background: rgba(16, 21, 18, .97); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); overflow-x: auto; overflow-y: hidden; }
.mp-hud .mp-tools button { width: auto; min-width: 64px; flex: 1 1 0; max-width: 120px; min-height: 54px; font-size: 12.5px; }
.mp-hud .mp-tools [data-tool="more"] { border-top: 0; margin-top: 0; }
.mp-hud .mp-tools [data-tool="me"], .mp-hud .mp-tools [data-tool="3d"] { display: none; }
.mp-hud .mp-tools button[aria-pressed="true"] { color: #ff7a33; }
.mp-hud .leaflet-bottom { bottom: 72px; }
.mp-hud #mp-apple, .mp-hud .mp-map { bottom: 0; }

/* ---- the sheet ---- */
.mp-hud .mp-panel { left: 10px; right: 10px; bottom: 82px; max-height: min(62%, 560px); border: 1px solid #2a342d; border-radius: 18px; background: #171e1a; padding: 16px 18px 18px; box-shadow: 0 10px 30px rgba(0, 0, 0, .55); }
@media (min-width: 760px) { .mp-hud .mp-panel { right: auto; width: 440px; bottom: 82px; max-height: calc(100% - 170px); border-top: 1px solid #2a342d; } }
.mp-hud .mp-panel h2 { text-transform: none; letter-spacing: 0; font-size: 1.25rem; margin-right: 90px; }
.mp-hud .mp-panel button.mp-close { top: 12px; right: 12px; min-height: 40px; padding: 0 16px; border-radius: 12px; border: 0; background: #ff7a33; color: #1a0d05; font-weight: 700; }
.mp-hud .mp-panel button { border-radius: 12px; }
.hud-layer { display: flex !important; align-items: flex-start; justify-content: space-between; gap: 14px; margin: 0 !important; padding: 13px 0; border-top: 1px solid #2a342d; cursor: pointer; }
.hud-words { flex: 1; min-width: 0; display: grid; gap: 4px; }
.hud-words b { font-size: 1rem; }
.hud-words small { color: #a3ada6; font-size: .85rem; line-height: 1.35; }
.hud-words small.hud-note { color: #ffb347; }
/* a switch, drawn from a plain tick box or choice */
.hud-switch { appearance: none; -webkit-appearance: none; flex: none; width: 52px; height: 32px; margin: 2px 0 0; border-radius: 16px; background: #5a645c; position: relative; cursor: pointer; transition: background .15s; }
.hud-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 13px; background: #fff; transition: transform .15s; }
.hud-switch:checked { background: #ff7a33; }
.hud-switch:checked::after { transform: translateX(20px); }
.hud-switch:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* the status line and the "where" line ride above the tool bar, in the app's pill */
.mp-hud .mp-status { left: 10px; bottom: 82px; max-width: min(560px, calc(100% - 20px)); border-radius: 14px; padding: 9px 12px; background: rgba(16, 21, 18, .94); border: 1px solid #2a342d; }
.mp-hud .mp-where { top: 62px; bottom: auto; left: 56px; border-radius: 18px; padding: 8px 14px; background: rgba(16, 21, 18, .94); border: 1px solid #2a342d; font-size: .9rem; }
@media (min-width: 760px) { .mp-hud .mp-where { display: block; } }

@media (max-width: 560px) {
  .hud-chip { min-height: 42px; padding: 0 14px; font-size: 14.5px; }
  .hud-round { width: 48px; height: 48px; }
  .mp-hud .mp-bar { right: 68px; }
}