/* map.css: the map area's styles (screen 3, the live map). Built on field.css's
   tokens and components; see field.css for the rules every stylesheet here
   keeps. The floating summary panel's position comes from js/map.js through
   custom properties set by CSSOM (--fp-x, --fp-y, --fp-max): the CSP allows
   no inline styles. */

:root {
  /* The no-basemap skin (the prototype's SKINS) and the floating surfaces. */
  --m-basemap: #e6eaef;
  --m-float: rgba(255, 255, 255, 0.95);
  --m-float-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
  --m-pressed: #eff2f5;
  --m-tile-on: #f0f2f5;
  --m-tile-ink: #1c2128;
  --m-preview: #eef2f6;
  --m-crit: #a40e26;
  --m-crit-mark: #cf222e;
  --m-warn: #953800;
  --m-warn-mark: #bc4c00;
  --m-muted-mark: #d1d9e0;
  --m-label-ink: #25292e;
  --m-label-halo: #ffffff;
  --m-hit: rgba(9, 105, 218, 0.12);
}

[data-theme="dark"] {
  --m-basemap: #151b23;
  --m-float: rgba(1, 4, 9, 0.92);
  --m-pressed: #212830;
  --m-tile-on: #21262d;
  --m-tile-ink: #f0f6fc;
  --m-preview: #161b22;
  --m-crit: #ff8080;
  --m-crit-mark: #ff8080;
  --m-warn: #f0b072;
  --m-warn-mark: #f0b072;
  --m-muted-mark: #3d444d;
  --m-label-ink: #f0f6fc;
  --m-label-halo: #0d1117;
  --m-hit: rgba(68, 147, 248, 0.22);
}

/* ---------------------------------------------------------------- page */

.m-page {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Full map, as the prototype's expanded map: the band, masthead and
   navigation step aside and the map takes the screen. Its own top-right
   buttons stand in for the masthead's (alerts, notifications, profile). */
html.m-full .f-band,
html.m-full .f-head,
html.m-full .f-nav {
  display: none !important;
}

html.m-full .m-page {
  padding-top: env(safe-area-inset-top, 0px);
}

html.m-full .m-controls,
html.m-full .m-key {
  bottom: calc(12px + var(--field-safe-bottom));
}

html.m-full .m-banner {
  padding-bottom: calc(9px + var(--field-safe-bottom));
}

.m-top {
  display: none;
}

html.m-full .m-top {
  position: absolute;
  z-index: 4;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

html.m-full .m-search {
  right: 160px;
}

.m-top__btn {
  position: relative;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid var(--borderColour-primary);
  background: var(--sfColour-primary);
  color: var(--iconColour-primary, var(--textColour-primary));
  display: grid;
  place-items: center;
  box-shadow: var(--m-float-shadow);
  cursor: pointer;
}

.m-top__btn::before,
.m-top__avatar::before {
  content: "";
  position: absolute;
  inset: -4px;
}

.m-top__badge {
  position: absolute;
  top: -7px;
  right: -7px;
}

.m-top__badge:empty {
  display: none;
}

.m-top__avatar {
  position: relative;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--field-coral);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  box-shadow: var(--m-float-shadow);
  cursor: pointer;
}

/* The positions are not live: the prototype's chip under the search. */
.m-stale {
  position: absolute;
  z-index: 6;
  top: 64px;
  left: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border-radius: 999px;
  background: var(--m-float);
  color: #953800;
  border: 1px solid #ffb77c;
  box-shadow: var(--m-float-shadow);
  white-space: nowrap;
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font-mono-accent);
  font-variant-numeric: tabular-nums;
}

.m-stale__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #bc4c00;
}

.m-map.is-offline .m-stale {
  background: #82071e;
  color: #fff;
  border-color: #660018;
}

.m-map.is-offline .m-stale__dot {
  background: #fff;
}

.m-map.is-offline .m-canvas {
  filter: grayscale(0.55);
}

/* ---------------------------------------------------------------- the map */

.m-map {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: var(--m-basemap);
}

/* .m-map > raises it over MapLibre's own .maplibregl-map { position: relative }. */
.m-map > .m-canvas {
  position: absolute;
  inset: 0;
  transition: opacity 240ms ease, filter 240ms ease;
}

.m-map:not(.is-ready) .m-canvas {
  opacity: 0;
}

.m-canvas .maplibregl-canvas {
  outline: none;
}

/* Zone code labels: HTML markers, so they need no glyph server (the plain
   map has none) and use the app's own type. */
.m-label {
  pointer-events: none;
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 14px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--m-label-ink);
  text-shadow:
    -1px -1px 0 var(--m-label-halo), 1px -1px 0 var(--m-label-halo),
    -1px 1px 0 var(--m-label-halo), 1px 1px 0 var(--m-label-halo),
    0 0 3px var(--m-label-halo);
}

.m-label--off {
  color: var(--textColour-tertiary);
}

.m-label--sel {
  font-weight: 700;
}

/* Zoomed out, the labels fade away as the location's pin comes in (js/map.js
   sets each marker's opacity from the zoom: 0 below z14, 1 from z15). A
   selected zone keeps its label. Faded right out, they leave the
   accessibility tree too. */
.m-map.is-labels-out .m-label:not(.m-label--sel) {
  visibility: hidden;
}

/* A searched place: a small ink pin, until the next search or a tap on the
   map. Drawn in CSS so it needs no image. */
.m-place {
  width: 22px;
  height: 30px;
  pointer-events: none;
  animation: m-place-drop 260ms cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.m-place span {
  position: absolute;
  left: 2px;
  top: 0;
  width: 18px;
  height: 18px;
  border-radius: 50% 50% 50% 0;
  background: #0969da;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transform: translateY(2px) rotate(-45deg);
  transform-origin: center;
}

.m-place span::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 5px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
}

@keyframes m-place-drop {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .m-place { animation: none; }
}

/* The person's own position: a blue dot in a pulsing halo. */
.m-me {
  position: relative;
  width: 16px;
  height: 16px;
  pointer-events: none;
}

.m-me__halo {
  position: absolute;
  left: -17px;
  top: -17px;
  width: 50px;
  height: 50px;
  border-radius: 999px;
  background: rgba(128, 204, 255, 0.55);
  animation: m-pulse 2.4s ease-out infinite;
}

.m-me__dot {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #0969da;
  border: 3px solid #fff;
}

@keyframes m-pulse {
  0% { transform: scale(0.35); opacity: 0.7; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* ---------------------------------------------------------------- search */

.m-search {
  position: absolute;
  z-index: 4;
  top: 12px;
  left: 12px;
  right: 56px;
  height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--sfColour-primary);
  border: 1px solid var(--borderColour-primary);
  box-shadow: var(--m-float-shadow);
  color: var(--textColour-tertiary);
}

@media (min-width: 700px) {
  .m-search { max-width: 380px; }
}

.m-search .f-icon {
  flex: none;
}

.m-search__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--textColour-primary);
  font: 400 13px var(--font-sans);
  -webkit-appearance: none;
  appearance: none;
}

.m-search__input::placeholder {
  color: var(--textColour-tertiary);
}

/* A phone zooms the page on focus for anything under 16px. */
@media (pointer: coarse) {
  .m-search__input { font-size: 16px; }
}

.m-search__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.m-search:focus-within {
  border-color: var(--textColour-tertiary);
}

.m-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 4px;
  list-style: none;
  max-height: min(50vh, 360px);
  overflow-y: auto;
  border-radius: 10px;
  background: var(--sfColour-primary);
  border: 1px solid var(--borderColour-primary);
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.18);
  animation: m-fade 120ms ease-out;
}

.m-result {
  width: 100%;
  min-height: 44px;
  padding: 6px 10px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background-color 120ms ease;
  -webkit-tap-highlight-color: transparent;
}

.m-result:hover,
.m-result.is-active {
  background: var(--sfColour-hover);
}

.m-result:active {
  background: var(--m-pressed);
}

.m-result__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.m-result__title {
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  color: var(--textColour-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.m-result__title strong,
.m-result__tag strong {
  font-weight: 700;
  color: var(--textColour-primary);
  background: var(--m-hit);
  border-radius: 2px;
}

.m-result__sub {
  font-size: 12px;
  line-height: 16px;
  color: var(--textColour-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A device's tracker serial number, the number on its label. */
.m-result__tag {
  flex: none;
  font: 500 11px/16px var(--font-mono-accent, Inter);
  font-variant-numeric: tabular-nums;
  color: var(--textColour-secondary);
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--m-preview);
}

.m-results__group {
  padding: 8px 10px 2px;
  font-size: 11px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--textColour-tertiary);
}

.m-results__group:not(:first-child) {
  margin-top: 4px;
  border-top: 1px solid var(--borderColour-primary);
  padding-top: 10px;
}

.m-results__empty {
  padding: 10px;
  font-size: 13px;
  color: var(--textColour-tertiary);
}

.m-results__empty.is-busy {
  padding: 8px 10px 10px;
  animation: m-busy 1.2s ease-in-out infinite alternate;
}

@keyframes m-busy {
  from { opacity: 1; }
  to { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
  .m-results__empty.is-busy { animation: none; }
}

/* ---------------------------------------------------------------- controls */

.m-controls {
  position: absolute;
  z-index: 3;
  right: 12px;
  bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.m-ctl {
  position: relative;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid var(--borderColour-primary);
  background: var(--sfColour-primary);
  color: var(--iconColour-primary, var(--textColour-primary));
  display: grid;
  place-items: center;
  box-shadow: var(--m-float-shadow);
  cursor: pointer;
  transition: background var(--duration-normal, 200ms) ease;
}

/* 38px to the eye, 44px to the finger. */
.m-ctl::before {
  content: "";
  position: absolute;
  inset: -3px;
}

.m-ctl[aria-pressed="true"],
.m-ctl[aria-expanded="true"] {
  background: var(--m-pressed);
}

.m-ctl span {
  display: grid;
}

.m-ctl__on,
.m-ctl[aria-pressed="true"] .m-ctl__off {
  display: none !important;
}

.m-ctl[aria-pressed="true"] .m-ctl__on {
  display: grid !important;
}

.m-compass__needle {
  transform-origin: 12px 12px;
  transition: transform 120ms linear;
}

/* ---------------------------------------------------------------- popovers */

.m-pop {
  position: absolute;
  z-index: 4;
  right: 58px;
  bottom: 12px;
  border-radius: 10px;
  border: 1px solid var(--borderColour-primary);
  animation: m-fade 150ms ease-out;
}

.m-pop__title {
  padding: 0 0 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--textColour-tertiary);
}

.m-layers {
  width: 218px;
  padding: 10px;
  background: var(--sfColour-primary);
  box-shadow: 0 6px 18px -4px rgba(16, 24, 40, 0.28);
}

.m-layers__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.m-layer {
  padding: calc(5px * var(--sp));
  border-radius: 8px;
  border: 1.5px solid var(--borderColour-primary);
  background: var(--sfColour-primary);
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}

.m-layer[aria-pressed="true"] {
  border-color: var(--m-tile-ink);
  background: var(--m-tile-on);
}

.m-layer__pv {
  position: relative;
  height: 38px;
  border-radius: 5px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--m-preview);
}

.m-layer__band {
  position: absolute;
  left: -6px;
  right: -6px;
  top: 14px;
  height: 11px;
  background: rgba(45, 164, 78, 0.28);
  border-top: 1.5px solid #2da44e;
  border-bottom: 1.5px solid #2da44e;
  transform: rotate(-8deg);
}

.m-layer__pv--off .m-layer__band {
  background: rgba(129, 139, 152, 0.2);
  border-top: 1.5px dashed #818b98;
  border-bottom: 1.5px dashed #818b98;
}

[data-theme="dark"] .m-layer__band { background: rgba(74, 194, 107, 0.3); border-color: #4ac26b; }
[data-theme="dark"] .m-layer__pv--off .m-layer__band { background: rgba(145, 152, 161, 0.22); border-color: #9198a1; }

.m-layer__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f1582b;
  border: 1.5px solid #fff;
  display: inline-block;
}

.m-layer__dot--faint {
  opacity: 0.55;
  margin-left: 5px;
}

.m-layer__text {
  position: relative;
  font-size: 12px;
  font-weight: 600;
  color: var(--textColour-secondary);
  font-family: var(--font-mono-accent);
}

.m-layer__tick {
  display: none !important;
  position: absolute;
  top: 3px;
  right: 3px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--m-tile-ink);
  color: var(--sfColour-primary);
  place-items: center;
}

.m-layer[aria-pressed="true"] .m-layer__tick {
  display: grid !important;
}

.m-layer__tick .f-icon {
  stroke-width: 3;
}

.m-layer__label {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  line-height: 15px;
  font-weight: 500;
  color: var(--textColour-secondary);
}

.m-layer[aria-pressed="true"] .m-layer__label {
  color: var(--textColour-primary);
}

.m-info {
  max-width: 236px;
  padding: 9px 11px;
  background: var(--m-float);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  border-radius: 8px;
  font-size: 11px;
  line-height: 16px;
  color: var(--textColour-secondary);
}

.m-info p {
  margin: 0;
}

.m-info p + p {
  margin-top: 6px;
}

.m-info a {
  color: inherit;
}

/* The plain-map note shows only while the map has no basemap. */
.m-info__plain {
  display: none;
}

.m-map.is-plain .m-info__plain {
  display: block;
}

.m-map.is-plain .m-info__basemap {
  display: none;
}

/* The rail centrelines' attribution (their data is ODbL), under the basemap's. */
.m-info__rail {
  color: var(--textColour-tertiary);
}

/* ---------------------------------------------------------------- key */

.m-key {
  position: absolute;
  z-index: 3;
  left: 12px;
  bottom: 12px;
  padding: 9px 11px;
  border-radius: 8px;
  background: var(--m-float);
  border: 1px solid var(--borderColour-primary);
  box-shadow: var(--m-float-shadow);
}

.m-key__head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--textColour-tertiary);
  cursor: pointer;
}

.m-key__head::before {
  content: "";
  position: absolute;
  inset: -15px -11px;
}

.m-key__head .f-icon {
  transform: rotate(180deg);
  transition: transform var(--duration-normal, 200ms) ease;
  stroke-width: 2.2;
}

.m-key__head[aria-expanded="true"] .f-icon {
  transform: none;
}

.m-key__body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 8px;
}

.m-key__row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  line-height: 14px;
  color: var(--textColour-primary);
}

.m-key__row--muted {
  color: var(--textColour-secondary);
}

.m-key__sw {
  width: 12px;
  height: 8px;
  border-radius: 2px;
  flex: none;
}

.m-key__sw--permitted { background: rgba(46, 160, 67, 0.42); border: 1px solid #1a7f37; }
.m-key__sw--restricted { background: repeating-linear-gradient(135deg, rgba(239,68,68,.75) 0 2px, rgba(34,197,94,.75) 2px 4px); border: 1px solid #EF4444; }
.m-key__sw--warning { background: rgba(245,158,11,.32); border: 1px solid #F59E0B; }
.m-key__sw--prohibited { background: rgba(207, 34, 46, 0.24); border: 1px solid #cf222e; }
.m-key__sw--informational { background: rgba(9, 105, 218, 0.24); border: 1px solid #0969da; }
.m-key__sw--off { background: rgba(129, 139, 152, 0.2); border: 1px solid var(--lm-neutral-7, #c8d1da); }

.m-key__dot {
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 999px;
  background: var(--markerColour-user, #f1582b);
}

.m-key__dot--me {
  width: 11px;
  height: 11px;
  background: #0969da;
}

/* ---------------------------------------------------------------- "no tracker paired" banner */

.m-banner {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 13px;
  background: #fff1e5;
  border-top: 1px solid #ffb77c;
  animation: m-banner-up 320ms ease-out;
}

[data-theme="dark"] .m-banner {
  background: rgba(219, 109, 40, 0.14);
  border-top-color: rgba(219, 109, 40, 0.45);
}

@media (min-width: 700px) {
  .m-banner {
    min-height: 64px;
    padding: 12px 24px;
  }
}

.m-banner > .f-icon {
  flex: none;
  color: #bc4c00;
}

[data-theme="dark"] .m-banner > .f-icon {
  color: #f0883e;
}

.m-banner__text {
  flex: 1;
  min-width: 0;
}

.m-banner__title {
  font-size: 13px;
  font-weight: 600;
}

.m-banner__sub {
  font-size: 12px;
  line-height: 16px;
  color: var(--textColour-secondary);
}

.m-banner__pair {
  position: relative;
  flex: none;
  height: 32px;
  padding: 0 14px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  background: var(--field-coral);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: background var(--duration-normal, 200ms) ease;
}

.m-banner__pair:hover {
  background: var(--lm-brand-5, #d94a20);
}

.m-banner__pair::before,
.m-banner__close::before {
  content: "";
  position: absolute;
  inset: -6px;
}

.m-banner__close {
  position: relative;
  width: 32px;
  height: 32px;
  flex: none;
  margin-right: -6px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--textColour-secondary);
  cursor: pointer;
}

@keyframes m-banner-up {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* ---------------------------------------------------------------- summary: bottom sheet / floating panel */

/* Phone: a bottom sheet over a dim, both above the masthead (66 / 67). */
.m-dim {
  position: fixed;
  inset: 0;
  z-index: 66;
  background: rgba(0, 0, 0, 0.4);
  animation: m-fade 200ms ease-out;
}

.m-sheet {
  position: fixed;
  z-index: 67;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 80%;
  display: flex;
  flex-direction: column;
  padding-top: 14px;
  border-radius: 12px 12px 0 0;
  background: var(--sfColour-primary);
  box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.06);
  animation: m-sheet-in 200ms ease-out;
}

.m-sheet__grip {
  flex: none;
  margin-top: -14px;
  padding: 14px 0;
  display: flex;
  justify-content: center;
}

.m-sheet__grip span {
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: var(--lm-neutral-4, #e0e6eb);
}

.m-sheet__body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Tablet up: a floating panel beside the feature, draggable by its grip. */
@media (min-width: 700px) {
  .m-dim {
    display: none !important;
  }

  .m-sheet {
    position: absolute;
    z-index: 41;
    left: var(--fp-x, auto);
    right: var(--fp-r, 16px);
    top: var(--fp-y, 16px);
    bottom: auto;
    width: 340px;
    max-height: var(--fp-max, calc(100% - 32px));
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 0 0 1px var(--borderColour-primary), 0 16px 32px -12px rgba(16, 24, 40, 0.3), 0 2px 6px rgba(16, 24, 40, 0.08);
    transition: left 280ms ease, top 280ms ease;
  }

  .m-sheet.is-dragging {
    transition: none;
    user-select: none;
  }

  .m-sheet.is-pending {
    visibility: hidden;
  }

  .m-sheet__grip {
    cursor: grab;
    touch-action: none;
  }

  .m-sheet.is-dragging .m-sheet__grip {
    cursor: grabbing;
  }

  .m-sheet__grip span {
    width: 44px;
  }
}

@keyframes m-sheet-in {
  from { transform: translateY(20px); opacity: 0.5; }
  to { transform: none; opacity: 1; }
}

@keyframes m-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.m-sum {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.m-sum__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 16px 18px;
  -webkit-overflow-scrolling: touch;
}

.m-sum__head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.m-sum__code {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
}

.m-sum__name {
  margin-top: 2px;
  font-size: 13px;
  color: var(--textColour-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.m-sum__cat {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin-top: 4px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}

.m-sum__cat > span:first-child {
  flex: none;
}

.m-sum__dot {
  flex: none;
  color: var(--textColour-tertiary);
  font-weight: 400;
}

.m-sum__l2 {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.m-sum__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
}

.m-sum__chips-label {
  margin-right: 2px;
  font-size: 11px;
  color: var(--textColour-tertiary);
}

.m-chip {
  height: 26px;
  max-width: 100%;
  padding: 0 calc(10px * var(--sp));
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: calc(6px * var(--sp));
  border: 1px solid var(--borderColour-primary);
  background: var(--sfColour-primary);
  color: var(--textColour-primary);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.m-chip:hover {
  background: var(--sfColour-hover);
}

.m-chip__sw {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 2px;
}

.m-sw--blue { background: #0969da; }
.m-sw--purple { background: #8250df; }
.m-sw--amber { background: #bf8700; }
.m-sw--cyan { background: #0891b2; }
.m-sw--grey { background: #57606a; }

.m-sum__tiles {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.m-sum__tile {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid var(--borderColour-primary);
}

.m-sum__tile-label {
  font-size: 11px;
  color: var(--textColour-tertiary);
}

.m-sum__big {
  margin-top: 2px;
  font-size: 28px;
  line-height: 32px;
  font-family: var(--font-mono-accent);
  font-variant-numeric: tabular-nums;
}

.m-sum__big--warn {
  color: #bc4c00;
}

[data-theme="dark"] .m-sum__big--warn {
  color: #f0883e;
}

.m-sum__mid {
  margin-top: 2px;
  font-size: 22px;
  line-height: 26px;
  font-family: var(--font-mono-accent);
  font-variant-numeric: tabular-nums;
  color: var(--textColour-primary);
}

.m-sum__mid--critical { color: var(--m-crit); }
.m-sum__mid--warning { color: #7d4e00; }
[data-theme="dark"] .m-sum__mid--warning { color: #e3b341; }

.m-sum__split {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 3px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
}

.m-split {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--textColour-tertiary);
}

.m-split b {
  font-weight: 500;
  font-family: var(--font-mono-accent);
  font-variant-numeric: tabular-nums;
}

.m-split--critical { color: var(--m-crit); }
.m-split--warning { color: var(--m-warn); }

.m-split__diamond {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 2px;
  transform: rotate(45deg);
  background: var(--m-muted-mark);
}

.m-split--critical .m-split__diamond {
  background: var(--m-crit-mark);
}

.m-split__tri {
  width: 0;
  height: 0;
  flex: none;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 7px solid var(--m-muted-mark);
}

.m-split--warning .m-split__tri {
  border-bottom-color: var(--m-warn-mark);
}

.m-sum__batt {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.m-sum__batt .m-sum__mid {
  margin-top: 0;
}

.m-battg {
  display: inline-flex;
  align-items: center;
  flex: none;
  --m-batt-edge: color-mix(in srgb, var(--textColour-primary) 38%, transparent);
}

.m-battg__body {
  width: 24px;
  height: 13px;
  padding: 1.5px;
  border: 1px solid var(--m-batt-edge);
  border-radius: 4.2px;
  display: flex;
}

.m-battg__fill {
  height: 100%;
  border-radius: 2.7px;
  background: var(--textColour-primary);
  transition: width 300ms ease;
}

.m-battg--warning .m-battg__fill { background: #e5a50a; }
.m-battg--critical .m-battg__fill { background: #e5484d; }

.m-battg__cap {
  width: 1.5px;
  height: 5px;
  margin-left: 1px;
  border-radius: 0 1px 1px 0;
  background: var(--m-batt-edge);
}

.m-sum__link {
  width: 100%;
  min-height: 44px;
  margin-top: 14px;
  padding: 0 12px;
  border-radius: 6px;
  border: 1px solid var(--borderColour-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--sfColour-primary);
  color: var(--textColour-primary);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background var(--duration-normal, 200ms) ease;
}

.m-sum__link:hover {
  background: var(--sfColour-hover);
}

.m-sum__link span {
  flex: 1;
}

.m-sum__link .f-icon:first-child {
  color: var(--textColour-secondary);
}

.m-sum__link .f-icon:last-child {
  color: var(--textColour-tertiary);
}

.m-sum__note {
  margin-top: 10px;
  font-size: 11px;
  color: var(--textColour-tertiary);
  text-align: center;
}

.m-sum__who {
  display: flex;
  align-items: center;
  gap: 12px;
}

.m-sum__marker {
  position: relative;
  width: 44px;
  height: 44px;
  flex: none;
}

.m-sum__marker img {
  position: absolute;
  left: -25%;
  top: -25%;
  width: 150%;
  height: 150%;
  display: block;
}

.m-sum__who-text {
  flex: 1;
  min-width: 0;
}

.m-sum__title {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 25px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.m-sum__role {
  margin-top: 2px;
  font-size: 13px;
  line-height: 18px;
  color: var(--textColour-secondary);
}

.m-sum__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.m-status {
  border: 0;
  font-family: inherit;
}

button.m-status {
  position: relative;
  cursor: pointer;
}

button.m-status::before {
  content: "";
  position: absolute;
  inset: -11px -4px;
}

.m-status .f-icon {
  margin-right: -3px;
}

/* The map summary's status pill keeps the design's own tones: Warning is
   amber here (not the orange alert chip), Critical the deeper red. */
.m-status.f-pill--warning { background: #fff8c5; color: #7d4e00; }
.m-status.f-pill--critical { background: #ffebe9; color: #a40e26; }
[data-theme="dark"] .m-status.f-pill--warning { background: rgba(212, 167, 44, 0.18); color: #e3b341; }
[data-theme="dark"] .m-status.f-pill--critical { background: rgba(207, 34, 46, 0.2); color: #ff8080; }

.m-status__live {
  animation: m-live 1.8s ease-in-out infinite;
}

@keyframes m-live {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.m-kind {
  font-weight: 500;
  color: var(--textColour-secondary);
}

.m-mine {
  font-weight: 500;
  background: #ffe3d9;
  color: #8c2d0b;
}

[data-theme="dark"] .m-mine {
  background: rgba(241, 88, 43, 0.2);
  color: #ffb59e;
}

.m-rowsdl {
  margin: 14px 0 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--borderColour-primary);
  border: 1px solid var(--borderColour-primary);
  border-radius: 8px;
  overflow: hidden;
}

.m-rowsdl__row {
  display: flex;
  align-items: baseline;
  gap: calc(12px * var(--sp));
  padding: calc(10px * var(--sp)) calc(12px * var(--sp));
  background: var(--sfColour-primary);
}

.m-rowsdl dt {
  flex: none;
  width: 112px;
  font-size: 12px;
  color: var(--textColour-tertiary);
}

.m-rowsdl dd {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  text-align: right;
  font-family: var(--font-mono-accent);
  font-variant-numeric: tabular-nums;
}

.m-sum__foot {
  flex: none;
  display: flex;
  gap: 8px;
  padding: 16px 16px max(16px, var(--field-safe-bottom));
  border-top: 1px solid var(--borderColour-primary);
  background: var(--sfColour-primary);
}

@media (min-width: 700px) {
  .m-sum__foot { padding-bottom: 16px; }
}

.m-btn {
  flex: 1;
  height: 44px;
  padding: 0 16px;
  border-radius: 6px;
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--duration-normal, 200ms) ease, filter var(--duration-normal, 200ms) ease;
}

.m-btn:active {
  filter: brightness(0.95);
}

.m-btn--quiet {
  flex: none;
  min-width: 96px;
  background: var(--buttonColour-tertiary, #eff2f5);
  color: var(--textColour-primary);
}

.m-btn--quiet:hover {
  background: var(--buttonColour-tertiary-hover, #e6eaef);
}

.m-btn--dark {
  background: #1c2128;
  color: #fff;
}

[data-theme="dark"] .m-btn--dark {
  background: #f0f6fc;
  color: #0d1117;
}

.m-btn--deactivate {
  background: #ffebe9;
  border-color: #ffcecb;
  color: #a40e26;
}

[data-theme="dark"] .m-btn--deactivate {
  background: rgba(207, 34, 46, 0.18);
  border-color: rgba(255, 128, 128, 0.35);
  color: #ff8080;
}

.m-btn--activate {
  background: #1a7f37;
  border-color: #1a7f37;
  color: #fff;
}

/* ---------------------------------------------------------------- zone summary: details, log, stages */

.m-sum__label {
  margin: 16px 0 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--textColour-tertiary);
}

.m-sum__label + .m-rowsdl {
  margin-top: 0;
}

.m-rowsdl dd.m-rowsdl__text {
  font-family: var(--font-sans);
}

.m-rowsdl__chips {
  display: flex;
  justify-content: flex-end;
}

.m-rowsdl__plain {
  font-family: var(--font-mono-accent);
}

.m-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}

.m-chip--more {
  font-family: inherit;
  cursor: pointer;
}

.m-chip__name {
  overflow: hidden;
  text-overflow: ellipsis;
}

.m-chip--extra {
  display: none;
}

.m-chips.is-all .m-chip--extra {
  display: inline-flex;
}

.m-chips.is-all .m-chip--more {
  display: none;
}

.m-log {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}

.m-log__item {
  display: flex;
  gap: calc(11px * var(--sp));
}

.m-log__time {
  flex: none;
  width: 40px;
  font-size: 12px;
  color: var(--textColour-secondary);
  font-family: var(--font-mono-accent);
  font-variant-numeric: tabular-nums;
}

.m-log__rail {
  position: relative;
  flex: none;
  width: 1px;
  background: var(--dividerColour-primary, var(--borderColour-primary));
}

.m-log__dot {
  position: absolute;
  left: -3px;
  top: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d0d7de;
}

[data-theme="dark"] .m-log__dot { background: #3d444d; }
.m-log__item:first-child .m-log__dot { background: #c8d1da; }
[data-theme="dark"] .m-log__item:first-child .m-log__dot { background: #656c76; }
.m-log--on .m-log__item:first-child .m-log__dot { background: #2da44e; }

.m-log__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 0 0 14px 4px;
}

.m-log__title {
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}

.m-log__sub {
  margin-top: 2px;
  font-size: 11px;
  color: var(--textColour-tertiary);
}

/* The footer's step: data-stage on the summary shows the parts marked for it. */
.m-sum [data-st] {
  display: none !important;
}

.m-sum[data-stage="detail"] [data-st="detail"],
.m-sum[data-stage="confirm"] [data-st="confirm"],
.m-sum[data-stage="activate"] [data-st="activate"] {
  display: flex !important;
}

.m-sum p[data-st] {
  margin: 10px 0 0;
}

.m-sum[data-stage="detail"] p[data-st="detail"],
.m-sum[data-stage="confirm"] p[data-st="confirm"],
.m-sum[data-stage="activate"] p[data-st="activate"] {
  display: block !important;
}

p.m-sum__note {
  margin: 10px 0 0;
}

.m-btn--arming {
  background: #fff8c5;
  border-color: #fae17d;
  color: #7d4e00;
  cursor: default;
}

[data-theme="dark"] .m-btn--arming {
  background: rgba(212, 167, 44, 0.18);
  border-color: rgba(212, 167, 44, 0.4);
  color: #e3b341;
}

/* Hold to deactivate: a darker fill runs across in a second, then it posts. */
.m-btn--hold {
  position: relative;
  overflow: hidden;
  background: #cf222e;
  border-color: #cf222e;
  color: #fff;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.m-btn__fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: rgba(0, 0, 0, 0.22);
}

.m-btn--hold.is-holding .m-btn__fill {
  width: 100%;
  transition: width 1s linear;
}

.m-btn__label {
  position: relative;
}

/* ---------------------------------------------------------------- rail details */

/* A tapped centreline feature (js/map.js showRail): OWL's title and fields, in
   the zone summary's sheet and rows. Several under the finger page with ‹ 1 / 2 ›. */
.m-sum--rail .m-sum__head {
  justify-content: space-between;
  padding-top: 2px;
}

/* OWL's titles are data-layer names ("ZEP_Merged_Segments part 2"), longer
   than a zone code: a step smaller, and broken anywhere rather than overflowing. */
.m-sum--rail .m-sum__code {
  min-width: 0;
  font-size: 17px;
  line-height: 24px;
  overflow-wrap: anywhere;
}

.m-rail__pager {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.m-rail__step {
  width: 44px;
  height: 44px;
  border: 1px solid var(--borderColour-primary);
  border-radius: 8px;
  background: var(--sfColour-primary);
  color: var(--textColour-primary);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}

.m-rail__step:hover:not(:disabled) {
  background: var(--sfColour-secondary);
}

.m-rail__step:disabled {
  opacity: 0.4;
  cursor: default;
}

.m-rail__count {
  min-width: 44px;
  text-align: center;
  font-size: 12px;
  color: var(--textColour-secondary);
  font-variant-numeric: tabular-nums;
}

/* A project device in the summary: the staff app's device marker, its
   picture on a grey disc in a white one (js/map.js deviceMarkerImage). */
.m-sum__marker--device {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.m-sum__marker--device::before {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background: #d1d9e0;
}

.m-sum__marker.m-sum__marker--device img {
  position: relative;
  inset: auto;
  width: 60%;
  height: 80%;
  object-fit: contain;
}

.m-layers { max-height: calc(100dvh - 180px); overflow-y: auto; }
.m-layer:disabled { opacity: .45; cursor: default; }
.m-layer__pv--imagery img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.m-layer__pv--imagery.has-image > .f-icon { display: none; }
.m-layer__rail { width: 3px; height: 65px; background: var(--textColour-primary); transform: rotate(40deg); }
.m-layer__rail::after { content: ""; position: absolute; width: 6px; height: 6px; background: #0969da; box-shadow: 0 12px #0969da, 0 24px #0969da; left: 5px; top: 12px; }

.m-map.is-plain.is-imagery .m-info__plain { display: none; }