/* The shared map layer, its pins and the Now / Later controls. */
.mapwrap { position: absolute; inset: 0; z-index: 1; background: var(--bg); touch-action: none; cursor: grab; overflow: hidden; }
.mapwrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.mapwrap.is-drag { cursor: grabbing; }
.mapwrap .glmap { position: absolute; inset: 0; }
.mapwrap .maplibregl-ctrl-attrib { font-family: inherit; }
.pins { position: absolute; inset: 0; pointer-events: none; }
.pin { position: absolute; left: 0; top: 0; pointer-events: auto; display: grid; place-items: center; width: 48px; height: 48px; margin: -24px 0 0 -24px; will-change: transform; }
.pin__dot { translate: var(--ox, 0px) var(--oy, 0px); animation: pop .45s var(--spring) both; animation-delay: inherit; display: grid; place-items: center; border-radius: 50%; width: 38px; height: 38px; box-shadow: 0 0 0 3px #fff, 0 8px 18px -4px rgba(0,0,0,.45); transition: transform .3s var(--spring); }
.pin__dot svg { display: block; }
.pin--confirmed .pin__dot { background: var(--red); color: #fff; }
.pin--reported .pin__dot { background: #0a0a0a; color: var(--accent); }
.pin--likely .pin__dot { background: #fff; color: #0a0a0a; }
.pin.is-on .pin__dot { transform: scale(1.22); }
.pin__name { position: absolute; top: 46px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px; background: var(--surface); color: var(--text); box-shadow: 0 6px 14px -6px rgba(0,0,0,.35); opacity: 0; transition: opacity .2s; pointer-events: none; }
.pins.show-names .pin__name, .pin.is-on .pin__name { opacity: 1; }
.you { position: absolute; left: 0; top: 0; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: var(--accent); border: 4px solid #0a0a0a; pointer-events: none; }
.you::after { content: ""; position: absolute; inset: -18px; border-radius: 50%; background: #0a0a0a; opacity: .12; animation: pulse 2.4s var(--ease) infinite; }

.when { background: var(--surface); border-radius: 28px; padding: 16px 20px 12px; box-shadow: var(--shadow-nav); animation: rise .35s var(--ease); }
.when__top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 15px; font-weight: 600; }
.when__top small { font-weight: 500; font-size: 12.5px; color: var(--muted); }
.when input { width: 100%; margin: 10px 0 2px; accent-color: var(--text); height: 24px; }
.when__ticks { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); }

.when__now { font-size: 12.5px; font-weight: 500; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }

/* The phone home's one summary: a red count on a white edge. It opens the briefing. Desktop has the briefing open already. */
.stayout { display: none; }
@media (max-width: 767px) {
  .stayout { display: block; order: -1; align-self: flex-start; margin: 2px 0 auto; padding: 8px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-nav); transition: transform .25s var(--spring); }
  .stayout:active { transform: scale(.96); }
}
.stayout__in { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 14px; border-radius: 999px; background: var(--red); color: #fff; font-size: 12.5px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; }
.stayout__in b { font-size: 24px; font-weight: 600; letter-spacing: -.03em; }
.stayout[data-mode="later"] .stayout__in { background: #0a0a0a; }

.brief__mode { margin: 0 0 18px; }
.seg { display: flex; flex: none; gap: 2px; }
.seg button { height: 48px; padding: 0 16px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--muted); transition: background .25s, color .25s; }
.seg button.is-on { background: var(--accent); color: var(--on-accent); }
@media (max-width: 400px) { .seg button { padding: 0 12px; } }

/* Van zones: a wide fixed circle, red while the van is about, blue once it cools. */
.pin__zone { position: absolute; left: 50%; top: 50%; width: var(--d, 32px); height: var(--d, 32px); margin: calc(var(--d, 32px) / -2) 0 0 calc(var(--d, 32px) / -2); border-radius: 50%; pointer-events: none; transition: background .8s, box-shadow .8s; }
.pin--moving .pin__zone { background: rgba(255,45,35,.3); box-shadow: inset 0 0 0 2px #ff2d23; animation: zone 1.6s ease-in-out infinite; }
.pin--cooled .pin__zone { background: rgba(45,110,255,.24); box-shadow: inset 0 0 0 2px #2d6eff; }
@keyframes zone { 50% { background: rgba(255,45,35,.14); } }
.pin--moving .pin__dot { background: #ff2d23; color: #fff; }
.pin--cooled .pin__dot { background: #2d6eff; color: #fff; }

/* Police and military points: quiet markers under the live pins. */
.poi { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: #fff; color: #0a0a0a; box-shadow: 0 2px 6px rgba(0,0,0,.28); }
.poi svg { width: 15px; height: 15px; }
.poi--military { background: #3a4032; color: #fff; }
.pois[data-size="s"] .poi { width: 10px; height: 10px; margin: -5px 0 0 -5px; background: #0a0a0a; box-shadow: 0 0 0 1.5px #fff; }
.pois[data-size="s"] .poi--military { background: #5d6b47; }
.pois[data-size="s"] .poi svg { display: none; }
.pois[data-size="m"] .poi { width: 22px; height: 22px; margin: -11px 0 0 -11px; }
.pois[data-size="m"] .poi svg { width: 13px; height: 13px; }
.pois { position: absolute; inset: 0; pointer-events: none; }
.pois .poi { pointer-events: auto; }

.dest { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; background: var(--accent); color: #0a0a0a; box-shadow: 0 0 0 3px #0a0a0a; pointer-events: none; }
.dest svg { width: 19px; height: 19px; }

/* Live place search in the Where to? sheet */
.rsearch { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px; margin: 0 0 16px; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.rsearch svg { flex: none; width: 20px; height: 20px; }
.rsearch input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--text); font: inherit; font-size: 16px; }
.rsearch__msg { padding: 8px 2px; font-size: 13.5px; color: var(--muted); }

/* Where to? and the chosen route */
.whereto { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 22px 0 6px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-nav); font-size: 16px; font-weight: 600; letter-spacing: -.02em; }
.whereto i { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--cta); color: var(--cta-text); }
.whereto i svg { width: 20px; height: 20px; }
.whereto span { margin-left: auto; font-size: 12.5px; font-weight: 500; color: var(--muted); letter-spacing: -.01em; }
.activeroute { display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 6px; border-radius: 999px; background: #0a0a0a; color: #fff; box-shadow: var(--shadow-nav); }
.activeroute__t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.activeroute__t b { font-size: 14.5px; font-weight: 600; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.activeroute__t span { font-size: 12.5px; color: rgba(255,255,255,.65); }
.activeroute__x { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: #0a0a0a; }
.activeroute__x svg { width: 18px; height: 18px; }

/* Who: the code-word badge on each pin, and wherever a force is named */
.fbadge { display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--c); color: #fff; box-shadow: 0 0 0 1.5px #fff; font-style: normal; }
.fbadge svg { width: 75%; height: 75%; }
.brow__t .fbadge, .frow__b .fbadge, .cmt__b .fbadge { display: inline-grid; margin-right: 5px; vertical-align: -5px; }
.pin__dot { position: relative; }
/* A pin is the animal in its colour. Zones show vans; the corner mark shows how sure a report is. */
.pin .pin__dot, .pin--moving .pin__dot, .pin--cooled .pin__dot, .pin--confirmed .pin__dot, .pin--reported .pin__dot, .pin--likely .pin__dot { background: var(--c); color: #fff; }
.pin__dot > svg { width: 26px; height: 26px; }
.pin__st { position: absolute; top: -7px; right: -7px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; box-shadow: 0 0 0 1.5px #fff; font-style: normal; }
.pin__st svg { width: 12px; height: 12px; }
.pin--confirmed .pin__st { background: var(--red); color: #fff; }
.pin--reported .pin__st { background: #0a0a0a; color: #fff; }
.pin--likely .pin__st { background: #fff; color: #0a0a0a; }
.place__sub .fbadge { margin-right: 6px; vertical-align: -3px; }
.pins.is-settled .pin__dot { animation: none; }
.opts--who .fbadge { width: 30px; height: 30px; }
.mapkey__who .fbadge { width: 30px; height: 30px; }

/* Zoom, find me, and the key */
.zoombtns { display: flex; flex-direction: column; border-radius: 999px; background: var(--surface); color: var(--text); box-shadow: var(--shadow-nav); overflow: hidden; }
.zoombtns button { display: grid; place-items: center; width: 44px; height: 44px; }
.zoombtns button:first-child { border-bottom: 1px solid var(--line); }
.zoombtns svg { width: 20px; height: 20px; }
.mapbtns .round { width: 44px; height: 44px; }
.mapbtns .round svg { width: 20px; height: 20px; }
.keybtn { font-size: 18px; font-weight: 600; }
.you.is-located { width: 28px; height: 28px; margin: -14px 0 0 -14px; border-width: 5px; box-shadow: 0 0 0 3px #fff, 0 8px 18px rgba(0,0,0,.4); z-index: 2; }
.mapkey { overflow-y: auto; padding: 16px 18px 18px; border-radius: 24px; background: var(--surface); color: var(--text); box-shadow: var(--shadow-nav); animation: rise .3s var(--ease); pointer-events: auto; }
.mapkey__top { display: flex; align-items: center; justify-content: space-between; font-size: 15px; letter-spacing: -.02em; }
.mapkey__top b { font-weight: 600; }
.mapkey__top button { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-2); }
.mapkey__top svg { width: 15px; height: 15px; }
.mapkey h4 { margin: 12px 0 8px; font-size: 12px; font-weight: 500; color: var(--muted); }
.mapkey ul { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mapkey li { display: flex; align-items: center; gap: 10px; font-size: 13px; line-height: 1.25; letter-spacing: -.01em; }
.mapkey .mapkey__who { flex-direction: row; flex-wrap: wrap; gap: 14px; }
.mapkey__who li { gap: 6px; font-weight: 600; }
.kmark, .kpin { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; font-style: normal; }
.kpin svg { width: 13px; height: 13px; }
.kmark--red { background: rgba(255,45,35,.3); box-shadow: inset 0 0 0 2px #ff2d23; }
.kmark--blue { background: rgba(45,110,255,.24); box-shadow: inset 0 0 0 2px #2d6eff; }
.kmark--you { width: 16px; height: 16px; margin: 4px; background: var(--accent); box-shadow: 0 0 0 3px #0a0a0a; }
.kpin--confirmed { background: var(--red); color: #fff; }
.kpin--reported { background: #0a0a0a; color: #fff; }
.kpin--likely { background: #fff; color: #0a0a0a; box-shadow: inset 0 0 0 1px var(--line); }
.kpin--post, .kpin--count { background: #0a0a0a; color: #fff; }
.kpin--count { font-size: 11px; }
.kpin--base { background: #3a4032; color: #fff; }

/* Mini community chat beside the map, wide screens only */
.dock, .dockopen { display: none; }
@media (min-width: 1100px) {
  .dock { position: absolute; z-index: 5; right: 20px; bottom: 0; display: flex; flex-direction: column; width: 340px; height: 430px; border-radius: 20px 20px 0 0; background: var(--surface); color: var(--text); box-shadow: var(--shadow-nav); overflow: hidden; pointer-events: auto; }
  .dock[data-state="min"] { height: 56px; }
  .dock[data-state="closed"] { display: none; }
  .dockopen { position: absolute; z-index: 5; right: 20px; bottom: 20px; }
  .dockopen.is-on { display: grid; }
  .app[data-screen="map"] .maplibregl-ctrl-bottom-right { right: 370px; }
  .mapctl { width: min(470px, calc(100% - var(--pw) - 60px - 360px)); }
}
.dock__head { display: flex; align-items: center; gap: 4px; flex: none; height: 56px; padding: 0 10px 0 16px; border-bottom: 1px solid var(--line); }
.dock__title { flex: 1; display: flex; align-items: center; gap: 8px; height: 100%; text-align: left; font-size: 15px; font-weight: 600; letter-spacing: -.02em; }
.dock__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.dock__new, .dockopen__new { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--red); color: #fff; font-size: 11px; font-weight: 600; }
.dockopen__new { position: absolute; top: -4px; right: -4px; }
.dock__head > button:not(.dock__title) { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; }
.dock__head svg { width: 17px; height: 17px; transition: transform .25s; }
.dock[data-state="min"] .dock__min svg { transform: rotate(180deg); }
.dock__list { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 16px; }
.dock .cmtbar { flex: none; }
.opts.opts--who { grid-template-columns: repeat(3, 1fr); }
.comm .opt:not(.is-on) { background: var(--surface); }
.opts--who .opt { flex-direction: row; align-items: center; gap: 7px; min-height: 0; height: 52px; padding: 0 8px; font-size: 12.5px; white-space: nowrap; }
.opts--who .fbadge { width: 28px; height: 28px; }
.opts--who .opt:last-child:nth-child(odd) { grid-column: auto; min-height: 0; }
.opts--who .opt.is-on svg { color: #fff; }
.opts--who .opt { justify-content: flex-start; }