/* Public network map.
   Apple-style: frosted glass panels floating over the map, grouped inset
   lists, segmented controls, system colours and type. The left panel holds
   search, time and What's on / Layers / Key; details and the editor open as
   a panel on the right (a sheet from the bottom on a phone). Map symbols keep
   the convention drivers already read: a pin with an impact ring and a glyph
   for type, and dashed blue diversions. */

:root {
  --nm-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --nm-label: #1c1c1e;
  --nm-label-2: rgba(60, 60, 67, 0.62);
  --nm-label-3: rgba(60, 60, 67, 0.32);
  --nm-sep: rgba(60, 60, 67, 0.16);
  --nm-fill: rgba(118, 118, 128, 0.12);
  --nm-fill-2: rgba(118, 118, 128, 0.2);
  --nm-glass: rgba(246, 246, 250, 0.82);
  --nm-cell: rgba(255, 255, 255, 0.92);
  --nm-ground: #f2f2f7;
  --nm-blue: #007aff;
  --nm-red: #ff3b30;
  --nm-orange: #ff9500;
  --nm-yellow: #ffcc00;
  --nm-green: #34c759;
  --nm-indigo: #5856d6;
  --nm-purple: #af52de;
  --nm-grey: #8e8e93;
  --nm-radius: 18px;
  --nm-shadow: 0 10px 40px rgba(0, 0, 0, 0.14), 0 1px 3px rgba(0, 0, 0, 0.08);
  /* Surfaces and text colours the set above does not name; the dark theme (end of file) changes these too. */
  --nm-surface: #ffffff;
  --nm-pop: rgba(250, 250, 252, 0.97);
  --nm-seg-on: #ffffff;
  --nm-attr: rgba(255, 255, 255, 0.72);
  --nm-edge: rgba(255, 255, 255, 0.6);
  --nm-mapbg: #e8e8ed;
  --nm-switch-off: rgba(120, 120, 128, 0.16);
  --nm-bar: #c7c7cc;
  --nm-muted: #6b6b72;
  --nm-red-ink: #c4261d;
  --nm-blue-ink: #0063cc;
  --nm-orange-ink: #a35a00;
  --nm-green-ink: #1d7a37;
  --nm-indigo-ink: #4a48a8;
  /* The Layers panel's tiles and options pages (the dark theme sets its own). Small words there
     use --nm-ink-2, not --nm-label-2: it stays at 4.5:1 or more on the glass whatever map is under it. */
  --nm-ink-2: #55555c;
  --nm-tilebg: #ffffff;
  --nm-tile-edge: rgba(60, 60, 67, 0.14);
  --nm-glyph-off: #6e6e73;
  --nm-glyphbg-off: rgba(118, 118, 128, 0.13);
  --nm-chip-on: #e3eefc;
  --nm-onbar: #e8f0fc;
  --nm-btn-blue: #0062cc;
  --nm-link: #004fa8;   /* blue words on the panel: 4.5:1 even on the glass over the satellite map, or a black one */
  --nm-panel-w: 372px;                /* the panel itself */
  --nm-side-w: var(--nm-panel-w);     /* how far the things beside it sit in from the edge (0 once the panel is closed) */
  --nm-detail-w: 400px;
  --nm-gap: 12px;
  --nm-safe-t: env(safe-area-inset-top, 0px);
  --nm-safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--nm-ground);
  color: var(--nm-label);
  font: 15px/1.35 var(--nm-font);
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid rgba(0, 122, 255, 0.5); outline-offset: 2px; }

.nm-map { position: fixed; inset: 0; background: var(--nm-mapbg); }

/* ── glass */

.nm-side, .nm-topbar, .nm-detail, .nm-editor {
  background: var(--nm-glass);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  box-shadow: var(--nm-shadow);
  border: 0.5px solid var(--nm-edge);
}

/* ── left panel */

.nm-side {
  position: fixed;
  z-index: 1100;
  top: calc(var(--nm-gap) + var(--nm-safe-t));
  left: var(--nm-gap);
  width: var(--nm-panel-w);
  max-height: calc(100% - 2 * var(--nm-gap) - var(--nm-safe-t) - var(--nm-safe-b));
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 14px 12px;
  border-radius: 22px;
}
/* The panel is only as tall as what is in it, so a short one leaves the map clear below. */

.nm-side__head { display: flex; align-items: center; gap: 10px; }
.nm-brand { width: 36px; height: 36px; flex: none; border-radius: 10px; background: #000; display: grid; place-items: center; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.nm-brand img { width: 26px; height: 26px; object-fit: contain; }
.nm-side__title h1 { margin: 0; font-size: 20px; line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; }
.nm-side__title p { margin: 1px 0 0; font-size: 13px; color: var(--nm-label-2); }

.nm-search { position: relative; display: flex; align-items: center; background: var(--nm-fill); border-radius: 11px; height: 38px; padding: 0 4px 0 10px; }
.nm-search__icon { width: 17px; height: 17px; flex: none; fill: none; stroke: var(--nm-label-2); stroke-width: 2.2; stroke-linecap: round; }
.nm-search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: none;
  padding: 0 8px;
  font-size: 16px; /* stops iOS zooming in on focus */
  outline: none;
}
.nm-search input::placeholder { color: var(--nm-label-2); }
.nm-search__locate { width: 32px; height: 32px; border: 0; border-radius: 9px; background: none; color: var(--nm-blue); display: grid; place-items: center; cursor: pointer; }
.nm-search__locate svg { width: 17px; height: 17px; fill: currentColor; }
.nm-search__results {
  position: absolute;
  z-index: 5;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--nm-pop);
  border-radius: 14px;
  box-shadow: var(--nm-shadow);
  max-height: 50vh;
  overflow: auto;
}
.nm-search__results button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 10px; border-radius: 9px; cursor: pointer; font-size: 14px; }
.nm-search__results button:hover, .nm-search__results button:focus { background: var(--nm-fill); outline: none; }
.nm-search__msg { padding: 10px; color: var(--nm-label-2); font-size: 14px; }
/* (The option the arrow keys are on: the keyboard stays in the box, so this is its focus.) */
.nm-search__results button.is-active { background: var(--nm-fill); box-shadow: inset 0 0 0 2px var(--nm-blue); }
.nm-search__what { margin-left: 4px; font-size: 12px; color: var(--nm-label-2); }
.nm-search__credit { padding: 6px 10px 2px; font-size: 11px; line-height: 1.35; color: var(--nm-label-2); }
.nm-search__on { display: inline-block; margin-right: 6px; font-size: 11px; font-weight: 600; color: var(--nm-red); }

/* segmented control */
.nm-seg { display: flex; padding: 2px; border-radius: 9px; background: var(--nm-fill); gap: 0; }
.nm-seg button {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  border-radius: 7px;
  padding: 6px 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--nm-label);
  cursor: pointer;
  white-space: nowrap;
  transition: background .18s, box-shadow .18s;
}
.nm-seg button.is-on, .nm-seg button.is-active { background: var(--nm-seg-on); box-shadow: 0 3px 8px rgba(0, 0, 0, .12), 0 1px 1px rgba(0, 0, 0, .04); font-weight: 600; }
.nm-seg button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; vertical-align: -3px; }
.nm-seg--when button[data-window="custom"] { flex: 0 0 40px; }

.nm-dates { display: grid; gap: 8px; padding: 10px; border-radius: 14px; background: var(--nm-cell); }
.nm-dates[hidden] { display: none; }
.nm-dates__quick { display: flex; gap: 6px; flex-wrap: wrap; }
.nm-dates__quick button { border: 0; background: var(--nm-fill); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 500; cursor: pointer; }
.nm-dates__row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.nm-dates label { display: grid; gap: 4px; font-size: 12px; color: var(--nm-label-2); min-width: 0; }
.nm-dates input { min-width: 0; width: 100%; border: 0; border-radius: 9px; padding: 8px; background: var(--nm-fill); font-size: 16px; }

/* summary */
.nm-summary { padding: 0 2px; }
.nm-summary strong { display: block; font-size: 15px; font-weight: 600; }
.nm-chips { display: flex; gap: 6px; overflow-x: auto; padding: 6px 0 0; scrollbar-width: none; }
.nm-chips::-webkit-scrollbar { display: none; }
.nm-chip { flex: none; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--nm-fill); color: var(--nm-label); }
.nm-chip--closure { background: rgba(255, 59, 48, 0.14); color: var(--nm-red-ink); }
.nm-chip--diversion { background: rgba(0, 122, 255, 0.13); color: var(--nm-blue-ink); }
.nm-chip--wclosure { background: rgba(255, 59, 48, 0.09); color: var(--nm-red-ink); }
.nm-hint { margin: 6px 0 0; font-size: 13px; color: var(--nm-label-2); }
.nm-linkbtn { border: 0; padding: 0; background: none; color: var(--nm-blue); cursor: pointer; font-weight: 500; }
.nm-sumtools { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.nm-sumtools button { border: 0; background: none; padding: 2px 0; color: var(--nm-blue); font-size: 13px; font-weight: 500; cursor: pointer; }
.nm-side:not(.has-panel) .nm-sumtools { display: none; }

.nm-panel { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; margin: 0 -14px -12px; padding: 2px 14px 14px; border-top: 0.5px solid var(--nm-sep); }
.nm-panel[hidden] { display: none; }

/* grouped inset lists */
.nm-group { margin: 14px 4px 6px; font-size: 13px; color: var(--nm-muted); font-weight: 400; text-transform: uppercase; letter-spacing: .02em; }
.nm-group:first-child { margin-top: 10px; }
/* The chip under the search: the authority or company the map is limited to. (Its words in the
   panel's link blue: the brighter blue read at 3.4:1 on the chip.) */
.nm-orgchip { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 0 0; padding: 6px 8px 6px 12px; border-radius: 999px; background: var(--nm-blue-soft, rgba(0, 122, 255, .12)); color: var(--nm-link); font-size: 13px; }
.nm-orgchip[hidden] { display: none; }
.nm-orgchip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nm-orgchip button { flex: none; width: 24px; height: 24px; border: 0; border-radius: 50%; background: rgba(0, 122, 255, .18); color: inherit; font-size: 17px; line-height: 1; cursor: pointer; }
/* The same chip for the dates, when not Now and the row is out of sight (renderWhenChip). Picked
   dates across a new year run long: the words wrap rather than being cut. */
.nm-whenchip { border-radius: 16px; }
.nm-whenchip span { overflow: visible; white-space: normal; }
.nm-search__on--org { padding: 1px 7px; border-radius: 999px; background: rgba(0, 122, 255, .14); color: var(--nm-blue); }
.nm-cells { background: var(--nm-cell); border-radius: 12px; overflow: hidden; }
.nm-cell {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 6px 12px;
  cursor: pointer;
}
.nm-cell + .nm-cell::before { content: ""; position: absolute; top: 0; right: 0; left: 12px; border-top: 0.5px solid var(--nm-sep); }
.nm-cell:has(.nm-tile) + .nm-cell::before { left: 54px; }
.nm-cell__text { flex: 1; min-width: 0; font-size: 15px; }
.nm-cell__text small { display: block; font-size: 12px; color: var(--nm-label-2); }
.nm-cell input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.nm-cell--input { cursor: default; padding: 6px 8px; }
.nm-cell--input input { width: 100%; border: 0; background: none; padding: 6px 4px; font-size: 16px; outline: none; }

.nm-tile { width: 30px; height: 30px; flex: none; border-radius: 8px; background: var(--tile, var(--nm-grey)); display: grid; place-items: center; }
.nm-tile svg { width: 18px; height: 18px; }

.nm-switch { flex: none; width: 51px; height: 31px; border-radius: 999px; background: var(--nm-switch-off); position: relative; transition: background .2s; }
.nm-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .16); transition: transform .2s; }
.nm-cell input:checked + .nm-switch { background: var(--nm-green); }
.nm-cell input:checked + .nm-switch::after { transform: translateX(20px); }
.nm-cell input:focus-visible + .nm-switch { outline: 3px solid rgba(0, 122, 255, 0.5); outline-offset: 2px; }

/* ── Base map: a picture for each choice (owner, 19 Oct 2026: "show the type of map below via a screenshot").
   As Google Maps' map type chooser: a square picture of that map with its name under it, the one in use ringed
   in blue (and aria-pressed). The picture is one live tile of the place in view from that map's own tiles
   (basePicsPaint in network-map.js: an <img class="nm-base__tile"> drawn 135% wide and moved so the middle of
   the view is in the middle where the tile allows). Under it, a drawn swatch for each kind of map, which is all
   there is while no tile has come: before the map's keys are known, for a locked choice or one with no tiles of
   its own (Google Maps on the free map), and when a tile fails. The map stays the light one in both themes, so
   the swatches do too. Signed out, Satellite and Google Maps show locked (syncBaseChoice). */
/* (One row: at most three show; on the narrowest phones they shrink a little rather than wrap.) */
.nm-base { display: flex; gap: 12px; margin: 2px 0 4px; }
.nm-base button {
  position: relative; flex: 0 1 88px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 0; border: 0; background: none; color: var(--nm-label); font: inherit; font-size: 12.5px; line-height: 1.25; font-weight: 500;
  text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.nm-base button[hidden] { display: none; }
.nm-base__pic {
  position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden;
  background: #ece9e2 var(--nm-base-swatch, none) center / cover no-repeat;
  box-shadow: 0 0 0 1px var(--nm-tile-edge), 0 1px 3px rgba(0, 0, 0, 0.12);
  transition: box-shadow .15s;
}
.nm-base button[data-base="clean"] { --nm-base-swatch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' fill='%23f2efe9'/%3E%3Cpath d='M0 46c9-3 17 0 24 6s14 10 24 12H0z' fill='%23aed4f2'/%3E %3Cpath d='M37 5h21v17H37z' fill='%23d3e9c8'/%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M-4 32 68 19M22-4l9 72M46 68l9-72' stroke='%23dcd6ca' stroke-width='6'/%3E %3Cpath d='M-4 32 68 19M22-4l9 72M46 68l9-72' stroke='%23fff' stroke-width='4'/%3E%3C/g%3E%3C/svg%3E"); }
.nm-base button[data-base="road"], .nm-base button[data-base="google"] { --nm-base-swatch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' fill='%23f1eee8'/%3E%3Cpath d='M0 46c9-3 17 0 24 6s14 10 24 12H0z' fill='%23aed4f2'/%3E %3Cpath d='M37 5h21v17H37z' fill='%23cfe7c1'/%3E%3Cpath d='M4 4h12v10H4zM4 18h12v8H4zM36 31h8v8h-8zM48 29h10v10H48z' fill='%23e2ded5'/%3E %3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M22-4l9 72M46 68l9-72' stroke='%23dcd6ca' stroke-width='5'/%3E%3Cpath d='M22-4l9 72M46 68l9-72' stroke='%23fff' stroke-width='3.4'/%3E %3Cpath d='M-4 32 68 19' stroke='%23e2b74a' stroke-width='7'/%3E%3Cpath d='M-4 32 68 19' stroke='%23f7d77a' stroke-width='5'/%3E%3C/g%3E%3C/svg%3E"); }
.nm-base button[data-base="satellite"] { --nm-base-swatch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' fill='%234b5a3b'/%3E%3Cpath d='M0 0h28l-6 26H0z' fill='%235f6f45'/%3E%3Cpath d='M36 0h28v22l-24 6z' fill='%236f6a4c'/%3E %3Cpath d='M0 44c9-3 17 0 24 6s14 10 24 12H0z' fill='%232e4655'/%3E%3Cpath d='M40 34l24-6v20l-20 4z' fill='%233d4b30'/%3E %3Cpath d='M-4 32 68 19M22-4l9 72' stroke='%23b9b4a3' stroke-width='2.4' fill='none' opacity='.85'/%3E%3C/svg%3E"); }
.nm-base__tile {
  position: absolute; left: -17.5%; top: -17.5%; width: 135%; max-width: none; height: auto; aspect-ratio: 1 / 1;
  opacity: 0; transition: opacity .2s; pointer-events: none; user-select: none; -webkit-user-drag: none;
}
.nm-base__tile.is-in { opacity: 1; }
.nm-base__name { max-width: 100%; overflow-wrap: anywhere; }
.nm-base button.is-on .nm-base__pic { box-shadow: 0 0 0 2.5px var(--nm-blue), 0 1px 3px rgba(0, 0, 0, 0.12); }
.nm-base button.is-on .nm-base__name { color: var(--nm-link); font-weight: 600; }
.nm-base button:focus-visible { outline: none; }
.nm-base button:focus-visible .nm-base__pic { outline: 3px solid rgba(0, 122, 255, 0.5); outline-offset: 3px; }
@media (hover: hover) {
  .nm-base button:not(.is-on):hover .nm-base__pic { box-shadow: 0 0 0 1px var(--nm-tile-edge), 0 3px 10px rgba(0, 0, 0, 0.2); }
}
/* Locked: the picture faded, with a padlock in its corner ("(sign in)" is read out with the name). */
.nm-base button.is-locked { color: var(--nm-ink-2); }
.nm-base button.is-locked .nm-base__pic { opacity: 0.6; }
.nm-base button:not(.is-locked) .nm-base__lock { display: none; }
.nm-base button.is-locked::after {
  content: ""; position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(28, 28, 30, 0.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M7 10V8a5 5 0 0 1 10 0v2h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h1zm2 0h6V8a3 3 0 0 0-6 0v2z'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}
@media (forced-colors: active) {
  .nm-base button.is-on .nm-base__pic { outline: 3px solid Highlight; outline-offset: 2px; }
}
@media (prefers-reduced-motion: reduce) { .nm-base__pic, .nm-base__tile { transition: none; } }
@media print { .nm-base { display: none !important; } }
/* ── (end of the base map pictures) */

/* What's on */
.nm-list { display: grid; gap: 8px; padding-top: 10px; }
.nm-row {
  display: grid;
  grid-template-columns: 30px 1fr 10px;
  grid-template-areas: "pin badge chev" "pin title chev" "pin sub chev";
  column-gap: 12px;
  width: 100%;
  text-align: left;
  border: 0;
  background: var(--nm-cell);
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
}
.nm-row::after { content: ""; grid-area: chev; align-self: center; width: 7px; height: 7px; border-top: 2px solid var(--nm-label-3); border-right: 2px solid var(--nm-label-3); transform: rotate(45deg); }
.nm-row:hover { background: var(--nm-surface); }
.nm-row.is-on { box-shadow: inset 0 0 0 2px var(--nm-blue); }
.nm-row.is-upcoming { opacity: .72; }
.nm-row__pin { grid-area: pin; align-self: center; }
.nm-row__pin svg { display: block; width: 30px; height: auto; max-height: 37px; }
.nm-row__badge { grid-area: badge; font-size: 12px; font-weight: 500; color: var(--nm-label-2); }
.nm-row__title { grid-area: title; font-size: 15px; font-weight: 600; margin: 1px 0; }
.nm-row__sub { grid-area: sub; font-size: 13px; color: var(--nm-label-2); }
.nm-row--road_closure .nm-row__badge, .nm-row--road_closure_access .nm-row__badge, .nm-row--emergency_closure .nm-row__badge,
.nm-row--banned_turn .nm-row__badge, .nm-row--no_entry .nm-row__badge, .nm-row--w-closure .nm-row__badge { color: var(--nm-red); }

.nm-impact { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-left: 6px; vertical-align: 1px; }
.nm-impact--low { background: var(--nm-green); }
.nm-impact--moderate { background: var(--nm-orange); }
.nm-impact--high, .nm-impact--severe { background: var(--nm-red); }

/* Key */
.nm-keylist { display: grid; gap: 0; background: var(--nm-cell); border-radius: 12px; overflow: hidden; margin-top: 10px; }
.nm-keyhead { padding: 12px 12px 4px; font-size: 13px; color: var(--nm-label-2); text-transform: uppercase; letter-spacing: .02em; background: var(--nm-ground); }
.nm-keyrow { display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 10px; padding: 7px 12px; font-size: 14px; border-top: 0.5px solid var(--nm-sep); }
.nm-keyhead + .nm-keyrow { border-top: 0; }
.nm-keyrow svg { display: block; margin: 0 auto; }
.nm-keyline { display: block; height: 0; border-top: 4px dashed var(--nm-blue); width: 36px; margin: 0 auto; }
.nm-keyline--closure { border-top-color: var(--nm-red); }
.nm-note { font-size: 12px; color: var(--nm-label-2); margin: 12px 4px 0; }

/* ── top right: one glass box (#nmTopBar) holding the mode dropdown and the account chip
   (#nmCouncilBar, which the script fills). Bottom left on a phone. It sits above the side
   panel (1100) so an open menu is never under it; its max-width keeps it clear of the panel. */

.nm-topbar {
  position: fixed;
  z-index: 1105;
  top: calc(var(--nm-gap) + var(--nm-safe-t));
  right: var(--nm-gap);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border-radius: 999px;
  max-width: calc(100vw - var(--nm-side-w) - 3 * var(--nm-gap) - 28px);
}
.nm-council { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 0 1 auto; }
.nm-council[hidden] { display: none; }
.nm-council .nm-btn { border-radius: 999px; }
/* A thin line between the mode and the account. */
.nm-topbar > .nm-council:not([hidden]) { padding-left: 6px; border-left: 0.5px solid var(--nm-sep); }
.nm-embed .nm-topbar > .nm-council, body.nm-assessing .nm-topbar > .nm-council { padding-left: 0; border-left: 0; }

/* The mode dropdown: a <details>, so the summary opens it with a click, Enter or Space. */
.nm-modes { flex: none; }
.nm-modes > summary { display: flex; align-items: center; gap: 7px; list-style: none; cursor: pointer; padding: 3px 9px 3px 3px; border-radius: 999px; font-size: 14px; font-weight: 600; white-space: nowrap; color: var(--nm-label); }
.nm-modes > summary::-webkit-details-marker { display: none; }
.nm-modes > summary::marker { content: ""; }
.nm-modes > summary:hover, .nm-modes[open] > summary { background: var(--nm-fill); }
.nm-modes__icon { width: 30px; height: 30px; flex: none; padding: 6px; border-radius: 50%; background: var(--nm-fill); fill: none; stroke: var(--nm-label); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nm-modes__chev { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--nm-label-2); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.nm-modes[open] .nm-modes__chev { transform: rotate(180deg); }
/* The menu hangs off the box: from its left edge, or from its right edge when the box is
   narrower than the menu, so it never runs off the screen. */
.nm-modes__menu { --nm-menu-w: 280px; position: absolute; z-index: 5; top: calc(100% + 8px); left: min(0px, calc(100% - var(--nm-menu-w))); width: var(--nm-menu-w); padding: 6px; border-radius: 14px; background: var(--nm-pop); box-shadow: var(--nm-shadow); display: grid; gap: 2px; }
.nm-modes__menu button, .nm-modes__menu .nm-modes__app { position: relative; display: grid; gap: 1px; width: 100%; padding: 8px 10px 8px 34px; border: 0; border-radius: 9px; background: none; text-align: left; color: var(--nm-label); cursor: pointer; }
.nm-modes__menu button:hover, .nm-modes__menu .nm-modes__app:hover { background: var(--nm-fill); }
/* The dashboard and its insights, links under the modes (syncExtraModes); permits and traffic orders too since 24 Oct
   2026, so the menu scrolls rather than run off a short screen. */
.nm-modes__menu { max-height: calc(100vh - 110px); overflow-y: auto; }
.nm-modes__menu .nm-modes__app { box-sizing: border-box; text-decoration: none; }
.nm-modes__menu .nm-modes__app[hidden], .nm-modes__sep[hidden] { display: none; }
.nm-modes__sep { width: calc(100% - 20px); margin: 4px 10px; border: 0; border-top: 0.5px solid var(--nm-sep); }
.nm-modes__menu b { font-size: 15px; font-weight: 600; }
.nm-modes__menu small { font-size: 12.5px; line-height: 1.3; color: var(--nm-label-2); }
.nm-modes__menu button.is-on b { color: var(--nm-blue-ink); }
.nm-modes__menu button.is-on::before { content: ""; position: absolute; left: 13px; top: 13px; width: 10px; height: 5px; border-left: 2px solid var(--nm-blue-ink); border-bottom: 2px solid var(--nm-blue-ink); transform: rotate(-45deg); }
.nm-signin { display: flex; align-items: center; gap: 9px; padding: 4px 14px 4px 4px; border-radius: 999px; color: var(--nm-label); text-decoration: none; }
.nm-signin:hover { background: var(--nm-fill); }
.nm-signin svg, .nm-account summary svg { width: 30px; height: 30px; flex: none; padding: 6px; border-radius: 50%; background: var(--nm-blue); fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; }
.nm-signin span { display: grid; font-size: 15px; font-weight: 600; line-height: 1.1; }
.nm-signin small { font-size: 11.5px; font-weight: 400; color: var(--nm-label-2); }
.nm-account { position: relative; }
/* The visitor's Appearance button (.nm-cog): the account chip's round icon, but neutral rather than blue. */
.nm-cog summary { padding: 3px; }
.nm-cog summary svg { background: var(--nm-fill); stroke: var(--nm-label); stroke-width: 1.8; stroke-linejoin: round; }
.nm-cog summary:hover svg { background: var(--nm-fill-2); }
.nm-cog .nm-account__menu, .nm-account__menu:has(.theme-seg) { width: 280px; }
.nm-account__menu .theme-seg { margin: 2px 8px 6px; width: calc(100% - 16px); }
.nm-account__menu p:has(+ [data-theme-switch]) { margin-bottom: 4px; }
.nm-account summary { display: flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; padding: 3px 10px 3px 3px; border-radius: 999px; font-size: 14px; font-weight: 600; max-width: 220px; }
.nm-account summary::-webkit-details-marker { display: none; }
.nm-account summary span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nm-account summary:hover { background: var(--nm-fill); }
.nm-account__menu { position: absolute; right: 0; top: calc(100% + 10px); width: 260px; padding: 8px; border-radius: 14px; background: var(--nm-pop); box-shadow: var(--nm-shadow); display: grid; gap: 2px; z-index: 5; }
.nm-account__menu p { margin: 4px 8px 8px; font-size: 13px; color: var(--nm-label-2); }
.nm-account__menu a, .nm-account__menu button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 10px 8px; border-radius: 9px; font-size: 15px; color: var(--nm-label); text-decoration: none; cursor: pointer; }
.nm-account__menu a:hover, .nm-account__menu button:hover { background: var(--nm-fill); }
.nm-account__menu .is-danger { color: var(--nm-red); }
.nm-council__who { font-size: 12px; color: var(--nm-label-2); padding: 0 6px; white-space: nowrap; }
body.nm-editing .nm-council, body.nm-detail-open .nm-council { display: none; }
/* A card or the editor open on a computer: the box (the mode dropdown; the chip steps aside, above)
   moves to the left of it, and the ward pill keeps clear of it (or steps aside: body.nm-where-tight,
   set by the script). On a tablet or a phone the box steps aside instead (further down). */
@media (min-width: 1041px) {
  body.nm-detail-open .nm-topbar, body.nm-editing .nm-topbar { right: calc(var(--nm-detail-w) + 2 * var(--nm-gap)); max-width: calc(100vw - var(--nm-side-w) - var(--nm-detail-w) - 4 * var(--nm-gap) - 28px); }
  body.nm-detail-open .nm-where, body.nm-editing .nm-where { max-width: min(420px, calc(100vw - var(--nm-side-w) - var(--nm-detail-w) - 5 * var(--nm-gap) - 30px - var(--nm-topbar-w, 160px))); }
  /* Just over 1040 the box is close to the panel: the open menu narrows so it does not cover the panel. */
  body.nm-detail-open .nm-modes__menu, body.nm-editing .nm-modes__menu { --nm-menu-w: min(280px, calc(100vw - var(--nm-side-w) - var(--nm-detail-w) - 4 * var(--nm-gap) - 4px)); }
  /* "Loading…" keeps its place at the top in the middle (owner, 14 Oct 2026: it dropped a row and
     moved sideways whenever a card or Add TTRO opened). The box, moved beside the card, is the right
     edge of its room here (the pill's own rules, further down, explain the room). */
  body.nm-detail-open .nm-loading, body.nm-editing .nm-loading {
    --nm-load-r: calc(100vw - var(--nm-detail-w) - 2 * var(--nm-gap) - var(--nm-topbar-w, 160px) - 69px);
  }
}
/* In an embed (no mode dropdown) or an assessment (dropdown hidden), a card hides the chip too:
   nothing is left in the box, so the box goes as well rather than leave an empty blob. */
.nm-embed body.nm-detail-open .nm-topbar, .nm-embed body.nm-editing .nm-topbar,
body.nm-assessing.nm-detail-open .nm-topbar, body.nm-assessing.nm-editing .nm-topbar { display: none; }
@media (min-width: 761px) { body.nm-where-tight .nm-where { display: none; } }
/* Where room is short (a tablet beside the panel, a narrow phone): the chip shows only its icon,
   "Add to map" only its plus, and "Sign in" loses its second line. Screen readers still read them. */
@media (min-width: 761px) and (max-width: 1040px), (max-width: 480px) {
  .nm-topbar .nm-account:not(.nm-cog) summary { padding-right: 3px; }
  .nm-topbar .nm-account:not(.nm-cog) summary span, .nm-council__addtext { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
  .nm-council .nm-btn[data-council="add"] { width: 36px; padding: 0; }
  .nm-signin small { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
}

/* ── buttons */

.nm-btn {
  border: 0;
  background: var(--nm-fill);
  color: var(--nm-blue);
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  white-space: nowrap;
}
.nm-btn:hover { background: var(--nm-fill-2); }
/* (A deeper blue than --nm-blue under white words, for 4.5:1: WCAG 1.4.3. Same in the dark theme.) */
.nm-btn--primary { background: var(--nm-btn-blue); color: #fff; }
.nm-btn--primary:hover { background: #0056b3; }
.nm-btn--ghost { background: transparent; color: var(--nm-blue); }
.nm-btn--danger { color: var(--nm-red); }
.nm-btn--accept { background: #34c759; color: #fff; }
.nm-btn--accept:hover { background: #2fb350; }
.nm-btn--reject { background: #ff3b30; color: #fff; }
.nm-btn--reject:hover { background: #e6342a; }
.nm-btn[disabled] { opacity: .5; cursor: default; }
/* Going through abnormal loads one by one: where you are, and back / next. */
#nmLoadsAssess { width: 100%; margin-top: 10px; }
/* The assessment view: only the route being assessed is on the map, so the panel, the modes and the
   rest step aside and the card is the whole of the interface. */
body.nm-assessing #nmSide, body.nm-assessing .nm-where, body.nm-assessing .nm-modes { display: none; }
.nm-endpin { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: #fff; font: 700 13px/1 var(--nm-font, -apple-system, system-ui, sans-serif); box-shadow: 0 0 0 2.5px #fff, 0 2px 7px rgba(0, 0, 0, .4); }
.nm-endpin--a { background: #34c759; }
.nm-endpin--b { background: #ff3b30; }
.nm-detail--assess .nm-clash > div { padding: 10px 12px; border-top: 0.5px solid rgba(255, 59, 48, 0.25); font-size: 14px; color: var(--nm-red-ink); }
.nm-detail--assess .nm-clash > div:first-child { border-top: 0; }
.nm-clash.nm-assess__flags { background: var(--nm-cell); }
.nm-clash.nm-assess__flags button { color: var(--nm-label); border-top-color: var(--nm-sep); }
.nm-clash.nm-assess__flags small { padding: 8px 12px; color: var(--nm-label-2); }
.nm-assess__layer small .is-red { color: var(--nm-red, #ff3b30); font-weight: 600; }
.nm-assess__wait { color: var(--nm-label-2); }
.nm-assess { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; padding: 4px; border-radius: 12px; background: var(--nm-cell); }
.nm-assess b { flex: 1; text-align: center; font-size: 13px; font-weight: 600; color: var(--nm-label-2); }
.nm-assess .nm-btn { min-height: 32px; padding: 4px 12px; }
.nm-assess__stop { background: none; }
.nm-decide { width: 100%; margin: 0 0 4px; font-size: 13px; color: var(--nm-label-2); }
.nm-decide strong { color: var(--nm-label); }
.nm-detail__actions .nm-btn--accept, .nm-detail__actions .nm-btn--reject { flex: 1 1 40%; min-height: 44px; font-size: 16px; }
.nm-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.nm-x {
  width: 30px;
  height: 30px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: var(--nm-fill);
  color: var(--nm-label-2);
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

/* ── details and editor: right panel */

.nm-detail, .nm-editor {
  position: fixed;
  z-index: 1120;
  top: calc(var(--nm-gap) + var(--nm-safe-t));
  right: var(--nm-gap);
  bottom: calc(var(--nm-gap) + var(--nm-safe-b));
  width: var(--nm-detail-w);
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.nm-detail[hidden], .nm-editor[hidden] { display: none; }

.nm-detail__head { position: relative; padding: 18px 56px 14px 18px; }
.nm-detail__head .nm-x { position: absolute; right: 14px; top: 16px; }
.nm-detail__head h2 { margin: 4px 0 6px; font-size: 22px; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
.nm-detail__kind { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 600; color: var(--nm-label-2); }
.nm-detail__kind svg { width: 26px; height: 32px; flex: none; }
.nm-detail__state { display: inline-block; margin: 0; padding: 3px 10px; border-radius: 999px; font-weight: 600; font-size: 13px; background: var(--nm-fill); }
.nm-state--active { color: var(--nm-red-ink); background: rgba(255, 59, 48, 0.12) !important; }
.nm-state--upcoming { color: var(--nm-orange-ink); background: rgba(255, 149, 0, 0.14) !important; }
.nm-state--ended, .nm-state--withdrawn { color: var(--nm-label-2); }

.nm-detail__body { flex: 1; overflow-y: auto; padding: 0 16px 16px; -webkit-overflow-scrolling: touch; }
.nm-detail__text { margin: 12px 4px; font-size: 15px; }
.nm-detail__meta { font-size: 12px; color: var(--nm-label-2); margin: 12px 4px 0; }
.nm-link { font-weight: 600; color: var(--nm-blue); text-decoration: none; }

.nm-progress { margin: 2px 2px 12px; }
.nm-progress__bar { height: 6px; border-radius: 999px; background: var(--nm-fill-2); overflow: hidden; }
.nm-progress__bar span { display: block; height: 100%; background: var(--nm-blue); border-radius: inherit; }
.nm-progress p { margin: 5px 0 0; font-size: 12px; color: var(--nm-label-2); display: flex; justify-content: space-between; }

.nm-divbox { display: flex; gap: 12px; align-items: center; background: rgba(0, 122, 255, 0.1); border-radius: 12px; padding: 12px; margin: 0 0 12px; }
.nm-divbox strong { display: block; font-weight: 600; }
.nm-divbox span:not(.nm-div-sign) { font-size: 13px; color: var(--nm-label-2); }
/* (Each way round on its own line: "Northbound: from Park Lane to Front Street, about 0.8 miles.") */
.nm-divbox div > span { display: block; }

.nm-sec { margin: 16px 4px 6px; font-size: 13px; color: var(--nm-label-2); text-transform: uppercase; letter-spacing: .02em; }
.nm-dl { margin: 0; background: var(--nm-cell); border-radius: 12px; padding: 0 12px; }
.nm-dl__row { display: grid; grid-template-columns: 122px 1fr; gap: 10px; padding: 10px 0; border-top: 0.5px solid var(--nm-sep); }
.nm-dl__row:first-child { border-top: 0; }
.nm-dl dt { color: var(--nm-label-2); font-size: 14px; }
.nm-dl dd { margin: 0; font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.nm-linked { display: grid; gap: 0; background: var(--nm-cell); border-radius: 12px; overflow: hidden; }
.nm-linked button { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; text-align: left; border: 0; background: none; padding: 10px 12px; cursor: pointer; border-top: 0.5px solid var(--nm-sep); }
.nm-linked button:first-child { border-top: 0; }
.nm-linked strong { font-size: 14px; font-weight: 600; }
.nm-linked span { grid-column: 1; font-size: 12.5px; color: var(--nm-label-2); }
.nm-linked em { grid-row: 1 / 3; grid-column: 2; align-self: center; font-style: normal; color: var(--nm-blue); font-size: 13px; font-weight: 500; }

.nm-detail__actions, .nm-editor__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 16px 16px;
  border-top: 0.5px solid var(--nm-sep);
}
.nm-detail__actions .nm-btn { flex: 1 1 auto; }
/* A structure's "Open structure page": a row of its own above Copy details and Zoom to. */
.nm-detail__actions .nm-btn--page, .nm-detail__actions .nm-btn--wide { flex: 1 1 100%; }

/* ── map symbols */

.nm-icon { background: none; border: 0; }
.nm-icon svg { display: block; overflow: visible; }
.nm-icon--sign svg, .nm-icon--pin svg { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .28)); }
.nm-div-sign {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  background: var(--nm-yellow);
  border: 2px solid #111;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  color: #111;
  flex: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
.nm-cross { width: 20px; height: 20px; display: grid; place-items: center; background: var(--nm-red); color: #fff; border: 2px solid #fff; border-radius: 50%; font-size: 11px; font-weight: 900; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.nm-icon--tag { width: auto !important; height: auto !important; }
.nm-tag {
  display: inline-block;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font: 700 10.5px/1 var(--nm-font);
  letter-spacing: .03em;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1.5px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
  color: #fff;
  background: var(--nm-red);
}
.nm-tag--lane { background: var(--nm-orange); }
/* A closure's words hang just under its pin, at the middle of the line, so the two read as one mark. */
.nm-tag--under { transform: translate(-50%, 5px); }
.nm-tag--diversion { background: var(--nm-blue); }
/* Where a diversion starts and ends (divEndIcon in network-map.js): a flag in the diversion's blue on a short stem,
   the start's filled and above its point, the end's outlined and below it, so where one way round ends and the
   other starts both read. Fixed colours: they sit on the map, whatever the theme. */
.nm-icon--divend { width: auto !important; height: auto !important; }
.nm-divend {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  font: 700 10.5px/1 var(--nm-font);
  letter-spacing: .02em;
  padding: 4px 7px;
  border-radius: 6px;
  border: 1.5px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
  color: #fff;
  background: #0063cc;
}
.nm-divend::after { content: ""; position: absolute; left: 50%; width: 2px; height: 9px; margin-left: -1px; background: #0063cc; }
.nm-divend--start { transform: translate(-50%, calc(-100% - 9px)); }
.nm-divend--start::after { top: 100%; }
.nm-divend--end { transform: translate(-50%, 9px); color: #0063cc; background: #fff; border-color: #0063cc; }
.nm-divend--end::after { bottom: 100%; }
/* One way only, its start not picked yet: the diversion's two ends offered on the map (dirPickMarks), each a start flag
   that takes a tap. */
.nm-divend--pick { cursor: pointer; }
.nm-divend--pickbelow { transform: translate(-50%, 9px); }
.nm-divend--pickbelow::after { bottom: 100%; }
.nm-tip { font: 500 13px var(--nm-font); border-radius: 8px; border: 0; box-shadow: var(--nm-shadow);
  /* Wraps (owner, 22 Oct 2026: a long name or list of numbers made the tip as wide as the screen): up to 300 px, then a
     new line; a short tip stays as narrow as its words. */
  width: max-content; max-width: min(300px, 80vw); white-space: normal; overflow-wrap: break-word; line-height: 1.35; }

/* An icon the mouse is on (the lift in network-map.js): a little bigger, on a soft shadow, in front of its neighbours.
   `scale`, not `transform`, which Leaflet uses to place the marker. */
.leaflet-marker-icon.nm-lift { z-index: 100000 !important; filter: drop-shadow(0 0 2px #ffd60a) drop-shadow(0 0 4px #ffd60a) drop-shadow(0 2px 5px rgba(0, 0, 0, .4)); }
.leaflet-marker-icon.nm-lift > * { scale: 1.3; transition: scale .12s ease-out; }
/* A line pointed at: the rest of the lines' canvas fades back (the line itself is drawn again above it, in nm-lift). */
.leaflet-nm-works-pane > canvas { transition: opacity .15s ease-out; }
.nm-lifting .leaflet-nm-works-pane > canvas { opacity: .45; }
@media (prefers-reduced-motion: reduce) { .leaflet-marker-icon.nm-lift > *, .leaflet-nm-works-pane > canvas { transition: none; } }
.nm-boundary-label { background: none; border: 0; }
.nm-boundary-label span { display: inline-block; transform: translate(-50%, -50%); white-space: nowrap; font: 700 10.5px var(--nm-font); text-transform: uppercase; letter-spacing: .09em; color: rgba(72, 70, 180, .9); text-shadow: 0 0 2px #fff, 0 0 3px #fff, 0 0 5px #fff; }

/* "You're in": ward and council at the middle of the map */
.nm-where { position: fixed; z-index: 1050; top: calc(var(--nm-gap) + var(--nm-safe-t)); left: calc(var(--nm-side-w) + 2 * var(--nm-gap) + 30px); max-width: min(420px, calc(100vw - var(--nm-side-w) - 4 * var(--nm-gap) - 30px - var(--nm-topbar-w, 300px)));
  display: flex; align-items: center; gap: 7px; padding: 7px 13px 7px 10px; border-radius: 999px; background: var(--nm-glass); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .12), 0 0 0 .5px rgba(0, 0, 0, .06); font: 500 13px/1.2 var(--nm-font); color: var(--nm-label); pointer-events: none; white-space: nowrap; }
.nm-where[hidden] { display: none; }
.nm-where b, .nm-where span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.nm-where b { font-weight: 600; }
.nm-where > span:last-child { color: var(--nm-label-2); }
.nm-where i { flex: none; width: 3px; height: 3px; border-radius: 50%; background: var(--nm-label-3); }
.nm-where__pin { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--nm-indigo); box-shadow: 0 0 0 3px rgba(88, 86, 214, .2); }

/* ── editor */

.nm-editor__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 10px 18px; }
.nm-editor__head h2 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.nm-editor__body { flex: 1; overflow-y: auto; padding: 0 16px 14px; -webkit-overflow-scrolling: touch; }
.nm-editor hr { border: 0; border-top: 0.5px solid var(--nm-sep); margin: 16px 0; }
.nm-field { display: grid; gap: 5px; margin: 0 0 12px; }
.nm-field[hidden] { display: none; }
.nm-field > span { font-size: 13px; color: var(--nm-label-2); padding-left: 4px; }
.nm-field input, .nm-field select, .nm-field textarea {
  width: 100%;
  min-width: 0;
  border: 0;
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--nm-cell);
  font-size: 16px;
}
.nm-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.nm-kinds { display: grid; gap: 14px; margin-bottom: 12px; }
.nm-kinds h3 { margin: 0 0 6px 4px; font-size: 13px; font-weight: 400; color: var(--nm-label-2); text-transform: uppercase; letter-spacing: .02em; }
.nm-kinds__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.nm-kind { display: grid; justify-items: center; gap: 4px; padding: 8px 4px; border: 0; border-radius: 12px; background: var(--nm-cell); font-size: 11.5px; font-weight: 500; line-height: 1.15; text-align: center; cursor: pointer; }
.nm-kind svg { width: 30px; height: 30px; }
.nm-kind.is-on { box-shadow: inset 0 0 0 2px var(--nm-blue); background: var(--nm-surface); }
.nm-turnseg button { display: grid; justify-items: center; gap: 3px; padding: 7px 2px; }
.nm-turnseg button svg { width: 30px !important; height: 30px !important; }
.nm-turnseg small { font-size: 11px; font-weight: 500; color: var(--nm-label-2); white-space: normal; line-height: 1.1; }
.nm-chosen { display: flex; align-items: center; gap: 10px; background: var(--nm-cell); border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; }
.nm-chosen strong { flex: 1; font-weight: 600; }
.nm-chosen svg { width: 30px; height: 30px; }
.nm-steps { display: flex; padding: 2px; border-radius: 9px; background: var(--nm-fill); margin: 4px 0 8px; }
.nm-step { flex: 1; border: 0; background: none; border-radius: 7px; padding: 7px; font-size: 13px; font-weight: 600; cursor: pointer; }
.nm-step.is-on { background: var(--nm-seg-on); box-shadow: 0 3px 8px rgba(0, 0, 0, .12); }
.nm-step[hidden] { display: none; }
.nm-step[data-target="diversion"].is-on { color: var(--nm-blue); }
.nm-help { margin: 4px 4px 10px; font-size: 13px; color: var(--nm-label-2); }
.nm-draw-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.nm-check { display: inline-flex; gap: 8px; align-items: center; font-size: 14px; margin-right: auto; }
.nm-check input { width: 18px; height: 18px; accent-color: var(--nm-blue); }
.nm-check[hidden] { display: none; }
/* The Layers panel's round tick (.nm-check further down) shares the class name: the editor's own
   tick boxes ("Follow roads", "Different dates from the scheme") keep their label layout. */
.nm-editor label.nm-check { width: auto; height: auto; border: 0; border-radius: 0; display: inline-flex; place-items: initial; gap: 8px; align-items: center; font-size: 14px; }
.nm-editor label.nm-check[hidden] { display: none; }
.nm-error { color: var(--nm-red-ink); font-weight: 600; }
.nm-mine { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 12px; background: var(--nm-cell); border-radius: 12px; margin-bottom: 8px; }
.nm-mine strong { font-weight: 600; }
.nm-mine span { display: block; font-size: 13px; color: var(--nm-label-2); }
.nm-mine__actions { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.nm-mine__actions .nm-btn { font-size: 13px; padding: 6px 10px; min-height: 30px; }
.nm-worklist { display: grid; background: var(--nm-cell); border-radius: 12px; overflow: hidden; margin-bottom: 8px; }
.nm-worklist label { display: flex; gap: 10px; align-items: center; padding: 9px 12px; border-top: 0.5px solid var(--nm-sep); font-size: 14px; cursor: pointer; }
.nm-worklist label:first-child { border-top: 0; }
.nm-worklist input { width: 18px; height: 18px; accent-color: var(--nm-blue); flex: none; }
.nm-worklist span small { display: block; color: var(--nm-label-2); font-size: 12px; }
body.nm-editing .leaflet-container { cursor: crosshair; }
body.nm-busy .leaflet-container { cursor: progress; }

/* ── bottom: credits and map controls */

.nm-credit {
  position: fixed;
  z-index: 900;
  left: calc(var(--nm-side-w) + 2 * var(--nm-gap));
  bottom: calc(10px + var(--nm-safe-b));
  margin: 0;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--nm-attr);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: 11px;
  color: var(--nm-label-2);
  max-width: calc(100vw - var(--nm-side-w) - 200px);
}
.leaflet-bottom.leaflet-right { right: var(--nm-gap); bottom: calc(var(--nm-gap) + var(--nm-safe-b)); }
.leaflet-bottom.leaflet-left { left: calc(var(--nm-side-w) + var(--nm-gap)); bottom: calc(32px + var(--nm-safe-b)); }
.leaflet-control-zoom { border: 0 !important; border-radius: 12px !important; overflow: hidden; box-shadow: var(--nm-shadow) !important; }
.leaflet-control-zoom a { width: 40px !important; height: 40px !important; line-height: 40px !important; background: var(--nm-glass) !important; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); color: var(--nm-label) !important; border-bottom: 0.5px solid var(--nm-sep) !important; font-weight: 400 !important; }
.leaflet-control-attribution { background: var(--nm-attr) !important; color: var(--nm-label-2) !important; border-radius: 8px 0 0 0; font: 10px var(--nm-font); }
body.nm-detail-open .leaflet-bottom.leaflet-right, body.nm-editing .leaflet-bottom.leaflet-right { right: calc(var(--nm-detail-w) + 2 * var(--nm-gap)); }

.nm-toast {
  position: fixed;
  z-index: 2000;
  /* Words only: a tap on the map under it still reaches the map (while drawing, it swallowed taps). */
  pointer-events: none;
  left: 50%;
  bottom: calc(28px + var(--nm-safe-b));
  transform: translateX(-50%);
  background: rgba(28, 28, 30, 0.88);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  color: #fff;
  padding: 11px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: var(--nm-shadow);
  max-width: calc(100vw - 32px);
  text-align: center;
}

/* ── phones: panel across the top, sheets from the bottom */

@media (max-width: 760px) {
  :root { --nm-gap: 8px; --nm-panel-w: calc(100vw - 16px);
    /* The bottom edge of a phone, from the bottom up (owner, 20 Oct 2026: the controls floated high above
       the bottom, with Google's logo hanging in the gap): the credit line and Google's logo share one line
       along the edge; the box with the mode dropdown and the chip sits just above them; the ward pill above
       the box (46px tall); the weather card above that, and the measuring bar above it. */
    --nm-credit-h: 18px; /* the credit line's height: the script writes it (one line to four) */
    --nm-box-b: calc(var(--nm-gap) + max(var(--nm-credit-h), 18px) + 10px + var(--nm-safe-b));
    --nm-where-b: calc(var(--nm-box-b) + 54px);
    --nm-stack-top: calc(var(--nm-where-b) + 36px);
  }
  .nm-side { padding: 10px 12px 10px; gap: 8px; border-radius: 20px; }
  .nm-side__head { display: none; }
  .nm-side.has-panel { bottom: auto; max-height: 64vh; }
  .nm-side:not(.has-panel) .nm-summary .nm-chips { display: none; }
  .nm-panel { margin: 0 -12px -10px; padding: 2px 12px 12px; }
  /* The box sits at the bottom left, above the Google logo; its menus open upward from its left edge. */
  .nm-topbar { top: auto; right: auto; left: var(--nm-gap); bottom: var(--nm-box-b); max-width: calc(100vw - 2 * var(--nm-gap)); }
  .nm-modes__icon { display: none; }
  .nm-modes > summary { min-height: 36px; padding: 3px 9px 3px 12px; }
  .nm-topbar .nm-account { position: static; }
  .nm-modes__menu, .nm-account__menu { top: auto; bottom: calc(100% + 8px); left: 0; right: auto; width: min(280px, calc(100vw - 2 * var(--nm-gap))); }
  /* A short screen (a phone on its side): the menus never run off the top; they scroll instead. */
  .nm-modes__menu, .nm-account__menu { max-height: calc(100vh - 170px - var(--nm-safe-b) - var(--nm-safe-t)); max-height: calc(100dvh - 170px - var(--nm-safe-b) - var(--nm-safe-t)); overflow-y: auto; }
  body.nm-detail-open .nm-topbar, body.nm-editing .nm-topbar { display: none; }
  .nm-council__who { display: none; }
  .nm-council a[href="/dashboard"] { display: none; }
  .nm-credit { display: none; }
  .nm-where { top: auto; left: var(--nm-gap); bottom: var(--nm-where-b); max-width: calc(100vw - 80px); font-size: 12.5px; padding: 6px 11px 6px 9px; }
  /* A menu from the box opens upward over where the pill is: the pill steps aside while it is open. */
  body.nm-menu-open .nm-where { visibility: hidden; }
  body.nm-council-on .nm-where { max-width: calc(100vw - 80px); }
  body.nm-detail-open .nm-where, body.nm-editing .nm-where { display: none; }
  /* Google's logo (bottom left) and the credit line (bottom right) share the edge's one line, the logo level
     with the box above it. The credit line wraps rather than run under the logo on a narrow phone. */
  .leaflet-bottom.leaflet-left { left: 0; bottom: calc(var(--nm-gap) + var(--nm-safe-b)); }
  .leaflet-bottom.leaflet-left .leaflet-control { margin: 0 0 0 var(--nm-gap); }
  .leaflet-control-attribution { max-width: calc(100vw - 59px - 4 * var(--nm-gap)); }

  .nm-detail, .nm-editor {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-height: 72vh;
    border-radius: 22px 22px 0 0;
    padding-bottom: var(--nm-safe-b);
  }
  .nm-detail::before, .nm-editor::before { content: ""; display: block; width: 36px; height: 5px; border-radius: 3px; background: var(--nm-label-3); margin: 7px auto 0; flex: none; }
  .nm-editor { max-height: 58vh; }
  .nm-kinds__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.nm-detail-open .leaflet-bottom.leaflet-right, body.nm-editing .leaflet-bottom.leaflet-right { right: var(--nm-gap); }
  body.nm-detail-open .nm-side, body.nm-editing .nm-side { display: none; }
}

/* ── embedded on someone else's page */

.nm-embed #nmLocateBtn, .nm-embed .nm-credit { display: none; }

/* ── print */

@media print {
  html, body { overflow: visible; height: auto; background: #fff; }
  .nm-topbar, .nm-toast, .nm-editor, .nm-sumtools, .nm-credit, .nm-search, .nm-seg, .leaflet-control-container { display: none !important; }
  .nm-map { position: relative; height: 55vh; }
  .nm-side, .nm-detail { position: static !important; width: auto !important; max-height: none !important; box-shadow: none !important; backdrop-filter: none !important; background: #fff !important; }
  .nm-panel { overflow: visible; }
  .nm-row { break-inside: avoid; }
}

@media (prefers-reduced-motion: reduce) {
  .nm-switch, .nm-switch::after, .nm-seg button { transition: none; }
}
.nm-turnseg small::first-letter { text-transform: uppercase; }

/* council-only */
.nm-private { float: right; text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--nm-purple); }
.nm-private::before { content: ""; display: inline-block; width: 9px; height: 10px; margin-right: 4px; vertical-align: -1px; border: 1.6px solid currentColor; border-radius: 2px; border-top-width: 4px; }
.nm-clash { display: grid; gap: 0; background: rgba(255, 59, 48, 0.1); border-radius: 12px; overflow: hidden; margin-bottom: 10px; }
.nm-clash button { text-align: left; border: 0; background: none; padding: 10px 12px; cursor: pointer; border-top: 0.5px solid rgba(255, 59, 48, 0.25); font-size: 14px; color: var(--nm-red-ink); }
.nm-clash button:first-child { border-top: 0; }
.nm-clash strong { display: block; font-weight: 600; }
.nm-clash--ok { background: rgba(52, 199, 89, 0.12); padding: 10px 12px; color: var(--nm-green-ink); font-size: 14px; font-weight: 500; }
.nm-dims { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
.nm-dims div { background: var(--nm-cell); border-radius: 12px; padding: 8px 6px; text-align: center; }
.nm-dims b { display: block; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.nm-dims span { font-size: 11px; color: var(--nm-label-2); }
/* A date tile's year, small under its day ("4 Jan" over "2027"); the labels then line up along the bottom. */
.nm-dims b small { display: block; font-size: 11px; font-weight: 600; line-height: 1.25; color: var(--nm-label-2); }
.nm-dims--yr div { display: flex; flex-direction: column; }
.nm-dims--yr span { margin-top: auto; }
.nm-row--load .nm-row__badge { color: var(--nm-purple); }
.nm-row--clash .nm-row__badge { color: var(--nm-red); }

/* schemes: stepper, items, review, published */
.nm-stepper { display: flex; gap: 4px; list-style: none; margin: 0 16px 10px; padding: 0; }
.nm-stepper li { flex: 1; }
.nm-stepper button { width: 100%; display: flex; align-items: center; gap: 6px; border: 0; background: none; padding: 6px 2px; font-size: 13px; font-weight: 600; color: var(--nm-label-2); cursor: pointer; border-top: 3px solid var(--nm-fill-2); }
.nm-stepper button:disabled { cursor: default; opacity: .6; }
.nm-stepper span { width: 20px; height: 20px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 11px; background: var(--nm-fill-2); color: var(--nm-label-2); }
.nm-stepper .is-on button { color: var(--nm-label); border-top-color: var(--nm-blue); }
.nm-stepper .is-on span { background: var(--nm-btn-blue); color: #fff; }
.nm-stepper .is-done button { color: var(--nm-label); border-top-color: var(--nm-green); }
.nm-stepper .is-done span { background: var(--nm-green); color: #fff; }
.nm-sub { display: block; font-size: 12.5px; font-weight: 400; color: var(--nm-label-2); }
.nm-items { display: grid; background: var(--nm-cell); border-radius: 12px; overflow: hidden; margin-bottom: 10px; }
.nm-item { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto auto; align-items: center; gap: 4px 6px; padding: 9px 8px 9px 12px; border-top: 0.5px solid var(--nm-sep); }
.nm-item:first-child { border-top: 0; }
.nm-item strong { display: block; font-size: 14.5px; font-weight: 600; }
.nm-item span { font-size: 12.5px; color: var(--nm-label-2); }
.nm-item .nm-btn { font-size: 13px; padding: 6px 8px; min-height: 30px; }
.nm-item.is-hidden > svg, .nm-item.is-hidden > div { opacity: .45; }
/* A restriction saved behind the list (saveItemBehind): "Saving…", or "Not saved" with Try again. */
.nm-item__state { display: block; margin-top: 2px; font-size: 12.5px; color: var(--nm-ink-2); }
/* (The -ink colours: small words at 4.5:1 or more, light and dark.) */
.nm-item__state.is-failed { color: var(--nm-red-ink); font-weight: 600; }
.nm-item__state .nm-linkbtn { margin-left: 2px; font-weight: 600; color: var(--nm-link); }
.nm-eye svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -4px; }

/* Plotting: Road sections or Trace, the sections chosen, and a closure's direction. */
.nm-modeseg { margin: 2px 0 6px; }
.nm-modeseg[hidden] { display: none; }
.nm-sections { display: grid; gap: 0; margin: 0 0 8px; background: var(--nm-cell); border-radius: 12px; overflow: hidden; }
.nm-sections[hidden] { display: none; }
.nm-section { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px; padding: 7px 6px 7px 12px; border-top: 0.5px solid var(--nm-sep); font-size: 14px; }
.nm-section:first-child { border-top: 0; }
.nm-section span { display: grid; min-width: 0; }
.nm-section small { color: var(--nm-label-2); font-size: 12.5px; }
.nm-section .nm-btn { font-size: 18px; padding: 2px 10px; min-height: 30px; }
/* The restriction form, in the order it is answered: what it is, where, which way, the
   diversion, when. Each part is a titled section; the long how-to sits behind its (i). */
#edAfterKind[hidden], .nm-edsec[hidden], #edDivMore[hidden], #edDirPick[hidden], .nm-editseg[hidden] { display: none; }
.nm-edsec { margin: 0 0 14px; }
.nm-edsec__h { margin: 0 0 6px 4px; font-size: 13px; font-weight: 600; color: var(--nm-label-2); text-transform: uppercase; letter-spacing: .02em; display: flex; align-items: center; gap: 4px; }
.nm-edsec__h .nm-i { text-transform: none; letter-spacing: 0; }
.nm-edsec > .nm-seg + .nm-seg, .nm-edsec > .nm-seg + #edModeRow { margin-top: 6px; }
.nm-edsec #edDirPick { margin-top: 6px; }
.nm-editseg { margin: 0 0 6px; }
/* How to draw it: a card each (Follow roads, By hand, Road sections, From the permit). */
.nm-methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0 0 6px; }
.nm-methods[hidden] { display: none; }
.nm-method { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 8px; align-items: center; text-align: left; padding: 8px 10px; border: 0; border-radius: 12px; background: var(--nm-cell); color: var(--nm-label); cursor: pointer; font: inherit; }
.nm-method svg { grid-row: 1 / span 2; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--nm-label-2); }
.nm-method strong { font-size: 14px; font-weight: 600; line-height: 1.2; }
.nm-method small { font-size: 12px; color: var(--nm-label-2); line-height: 1.2; }
.nm-method.is-on { box-shadow: inset 0 0 0 2px var(--nm-blue); background: var(--nm-surface); }
.nm-method.is-on svg { color: var(--nm-blue); }
/* Drawn: only the way it was drawn, with "Change how it is drawn" beside it (one way per
   restriction, owner 18 Oct 2026); its confirm ("This clears what is drawn.") on a line below. */
.nm-methods.is-chosen { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px; }
.nm-methods.is-chosen .nm-method { cursor: default; }
.nm-methodchange { min-height: 36px; padding: 0 2px; font-size: 13px; font-weight: 600; color: var(--nm-link); text-align: right; }
.nm-methodask { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 2px; font-size: 13px; color: var(--nm-ink-2); }
.nm-methodask span { flex: 1 1 150px; }
#edPermitArea { margin-top: -2px; }
#edDivNote:not([hidden]) { margin: 6px 0 10px; }
#edPermitArea .nm-linkbtn, .nm-dates-note .nm-linkbtn { min-height: 32px; font-weight: 600; color: var(--nm-link); }
@media (pointer: coarse) { .nm-methodchange, .nm-methodask .nm-btn, #edPermitArea .nm-linkbtn, .nm-dates-note .nm-linkbtn { min-height: 44px; } }
.nm-editseg button[data-target="diversion"].is-on { color: var(--nm-blue); }
/* ── the restriction editor's steps (owner, 19 Oct 2026: "more steps within the plotting ... dropdowns
   which are initially close but open when its done"; edStepHtml / edStepsSync in network-map.js).
   Each step is a header button (number, name, one line saying what is set, a chevron) over a part that
   opens; a step not reachable yet is muted ("Draw it first"); one a save was refused for has a red number. */
.nm-edstep { margin: 0; border-top: 0.5px solid var(--nm-sep); }
#edAfterKind > .nm-edstep:first-child { border-top: 0; }
.nm-edstep[hidden] { display: none; }
.nm-edstep__h { margin: 0; font: inherit; }
.nm-edstep__btn { display: grid; grid-template-columns: 24px minmax(0, 1fr) 18px; column-gap: 10px; row-gap: 1px; align-items: center; width: calc(100% + 12px); min-height: 52px; margin: 0 -6px; padding: 9px 6px; border: 0; border-radius: 12px; background: none; color: var(--nm-label); font: inherit; text-align: left; cursor: pointer; }
.nm-edstep__n { grid-row: 1 / span 2; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--nm-fill); color: var(--nm-label); font-size: 12.5px; font-weight: 700; line-height: 1; }
.nm-edstep__t { grid-column: 2; font-size: 15px; font-weight: 600; line-height: 1.25; }
.nm-edstep__s { grid-column: 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; line-height: 1.3; color: var(--nm-ink-2); }
.nm-edstep__chev { grid-column: 3; grid-row: 1 / span 2; width: 18px; height: 18px; fill: none; stroke: var(--nm-label-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s ease; }
.nm-edstep.is-open .nm-edstep__n { background: var(--nm-btn-blue); color: #fff; }
.nm-edstep.is-open .nm-edstep__s { display: none; }
.nm-edstep.is-open .nm-edstep__chev { transform: rotate(180deg); }
.nm-edstep.is-locked .nm-edstep__btn { cursor: default; }
.nm-edstep.is-locked .nm-edstep__n, .nm-edstep.is-locked .nm-edstep__t, .nm-edstep.is-locked .nm-edstep__chev { opacity: .45; }
.nm-edstep.is-locked .nm-edstep__s { color: var(--nm-label-2); }
.nm-edstep.is-warn .nm-edstep__s { color: var(--nm-orange-ink); }
.nm-edstep.is-wrong .nm-edstep__n { background: var(--nm-red); color: #fff; }
.nm-edstep.is-wrong .nm-edstep__t { color: var(--nm-red-ink); }
@media (hover: hover) { .nm-edstep__btn:not([aria-disabled]):hover { background: var(--nm-fill); } }
@media (prefers-reduced-motion: reduce) { .nm-edstep__chev { transition: none; } }
.nm-edstep__body { padding: 0 0 14px; }
.nm-edstep__body[hidden] { display: none; }
.nm-edstep__body > .nm-error { margin: 0 4px 10px; }
/* The question inside a step ("Which way is it closed?", "Is there a diversion?"), with its (i). */
.nm-edq { display: flex; align-items: center; gap: 4px; margin: 2px 4px 6px; font-size: 13px; color: var(--nm-label-2); }
.nm-edstep .nm-field + #edDirRow { margin-top: -2px; }
/* The hint under the ways to draw, and the (i) on how to draw. */
.nm-edhelp { display: flex; align-items: flex-start; gap: 4px; }
.nm-edhelp .nm-help { flex: 1; min-width: 0; }
.nm-edhelp .nm-i { flex: none; margin-top: 3px; }
#edDivTools:not(:empty) { margin-top: 8px; }
#edDivNote:not([hidden]) + #edDivTools:not(:empty) { margin-top: 0; }
/* On a phone the sheet keeps its open height while the steps open and close (once what it is has been
   chosen). Edit opens with every step closed: a shorter sheet there had the map fitted to the room above
   it, and opening a step then grew the sheet over the restriction's ends. */
@media (max-width: 760px) {
  .nm-editor:has(> .nm-editor__body > #edAfterKind:not([hidden])) { min-height: 58vh; }
}
/* ── Where is it?'s Confirm (owner, 20 Oct 2026: "dont show undo and clear straight away untill started
   plotted then add confirm which then goes onto the next thing"; edWhereConfirm in network-map.js).
   Undo and Clear show once something is drawn; Confirm, the step's own button, once it can be saved:
   the width of the step, under the tools, so it reads as the way on. */
.nm-edwhere-next { margin: 4px 0 0; }
.nm-edwhere-next .nm-btn { width: 100%; min-height: 44px; }
/* ── the ways round (owner, 21 Oct 2026: "put a save on the diversion route", "clarify start and end of diversions
   with the possibility of them being two"; divWaysSync in network-map.js). Which of two the taps change, a line for
   each (its direction, where it starts and ends, how long), Swap start and end and the second way's add or remove, then
   the step's own Save: the width of the step, as Where is it?'s Confirm. */
.nm-divwayseg { margin: 8px 0 4px; }
.nm-divways { margin: 8px 0 4px; }
.nm-divways__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.nm-divways__list li { display: grid; gap: 1px; padding: 8px 10px; border-radius: 10px; background: rgba(0, 122, 255, 0.08); font-size: 13px; line-height: 1.35; }
.nm-divways__list b { font-weight: 600; color: var(--nm-label); }
.nm-divways__list span { color: var(--nm-ink-2); }
.nm-divways__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 6px 0 0; }
.nm-divways__acts .nm-linkbtn { min-height: 32px; font-size: 13px; font-weight: 600; color: var(--nm-link); text-align: left; }
.nm-divways__acts .nm-linkbtn--danger { color: var(--nm-red-ink); }
/* Closed one way only: which way, picked on the map or with its two buttons, in Where is it? (closureDirSync). */
.nm-dirstart { margin: 8px 0 4px; }
.nm-dirstart .nm-help { margin: 6px 0 0; }
/* The route being drawn: both ways or one way, and where it starts (divDirSync). */
.nm-divdir { margin: 10px 0 4px; }
.nm-divdir .nm-seg { margin-bottom: 4px; }
.nm-divdir .nm-help { margin: 4px 0 6px; }
/* The route being drawn, among several. */
.nm-divways__list li.is-on { box-shadow: inset 0 0 0 1.5px var(--nm-btn-blue, #0062cc); }
/* Where is it?'s road and which way it is closed, once it is drawn. */
#edWhereMore { margin-top: 10px; }
@media (pointer: coarse) { .nm-divways__acts .nm-linkbtn { min-height: 44px; } }
.nm-edstepsave { margin: 10px 0 0; }
.nm-edstepsave .nm-btn { width: 100%; min-height: 44px; }
.nm-kind { position: relative; }
.nm-kind__tag { position: absolute; top: -6px; right: -2px; font-style: normal; font-size: 10px; font-weight: 700; background: #ff9500; color: #fff; border-radius: 6px; padding: 1px 5px; line-height: 1.4; }
.nm-plotrow { display: flex; align-items: center; gap: 6px; }
.nm-plotrow .nm-add { flex: 1; }
.nm-permit strong .nm-i { margin-left: 6px; vertical-align: -2px; }
.nm-dirrow { display: grid; gap: 6px; }
.nm-dirrow[hidden] { display: none; }
.nm-dirrow select[hidden] { display: none; }

/* Permits near here: a list under the Permit box, numbered like their pins on the map. */
.nm-nearby__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nm-nearby__head .nm-sec { margin-bottom: 4px; }
.nm-nearby__list { display: grid; background: var(--nm-cell); border-radius: 12px; overflow: hidden; max-height: 320px; overflow-y: auto; margin-bottom: 12px; }
.nm-nearby__row { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; text-align: left; border: 0; border-top: 0.5px solid var(--nm-sep); background: none; padding: 9px 12px; font: inherit; color: var(--nm-label); cursor: pointer; }
.nm-nearby__row:first-child { border-top: 0; }
.nm-nearby__row:hover, .nm-nearby__row:focus-visible { background: var(--nm-fill); }
.nm-nearby__row > span:last-child { display: grid; min-width: 0; }
.nm-nearby__row strong { font-size: 14.5px; font-weight: 600; }
.nm-nearby__row small { color: var(--nm-label-2); font-size: 12.5px; overflow-wrap: anywhere; }
.nm-nearby__ref { font-variant-numeric: tabular-nums; }
.nm-pnum { display: grid; place-items: center; }
.nm-pnum span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--nm-orange); color: #fff; font: 700 12px/1 var(--nm-font); box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0, 0, 0, .3); }
.nm-pnum.is-closure span { background: var(--nm-red); }
/* The permit picked: a blue row with a tick, and on the map a bigger blue tick pin; the rest fade. */
.nm-nearby__row.is-picked { background: rgba(0, 122, 255, .12); box-shadow: inset 4px 0 0 var(--nm-blue); }
.nm-nearby__row.is-picked:hover { background: rgba(0, 122, 255, .16); }
.nm-pnum.is-picked span { background: var(--nm-blue); }
.leaflet-marker-icon.nm-pnum.is-picked span { width: 32px; height: 32px; font-size: 16px; box-shadow: 0 0 0 3px #fff, 0 0 0 7px rgba(0, 122, 255, .3), 0 3px 10px rgba(0, 0, 0, .35); }
.leaflet-marker-icon.nm-pnum.is-faded { opacity: .5; }
.nm-picked { font-style: normal; font-size: 11.5px; font-weight: 700; color: #fff; background: var(--nm-btn-blue); border-radius: 999px; padding: 1px 7px; margin-left: 4px; vertical-align: 1px; }
.nm-nearby__what { color: var(--nm-label) !important; }
.nm-ttro-flag { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--nm-red-ink, #c4001d); background: rgba(255, 59, 48, .14); border-radius: 999px; padding: 1px 7px; margin-left: 4px; vertical-align: 1px; white-space: nowrap; }
/* The works promoter, from the permit: shown, not typed. */
.nm-field input.is-locked { background: var(--nm-fill); color: var(--nm-label-2); cursor: default; }
/* "From the permit" beside a box the permit fills and locks: a small lock and a word, no pill.
   (Not .nm-lock: that is the locked-layer card further down.) */
.nm-fromlock { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; font-size: 12px; font-weight: 500; color: var(--nm-label-2); }
.nm-fromlock svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.nm-fromlock[hidden] { display: none; }
/* A box with a button inside its right-hand end (Scheme name: name it from the map). */
.nm-inputbtn { position: relative; }
.nm-inputbtn input { padding-right: 46px !important; }
.nm-inputbtn__btn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 36px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--nm-blue); cursor: pointer; }
.nm-inputbtn__btn:hover { background: var(--nm-fill); }
.nm-inputbtn__btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Fields most schemes leave alone, folded away. */
.nm-more { margin: 2px 0 12px; border-radius: 12px; background: var(--nm-cell); padding: 0 12px; }
.nm-more > summary { cursor: pointer; padding: 11px 0; font-size: 14px; font-weight: 600; color: var(--nm-label); list-style: none; display: flex; align-items: center; gap: 8px; }
.nm-more > summary::-webkit-details-marker { display: none; }
.nm-more > summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--nm-label-2); border-bottom: 2px solid var(--nm-label-2); transform: rotate(-45deg); transition: transform .15s; }
.nm-more[open] > summary::before { transform: rotate(45deg); }
.nm-more .nm-field input, .nm-more .nm-field textarea { background: var(--nm-fill); }
.nm-field > span .nm-i { margin-left: 4px; vertical-align: -2px; }
/* Date and time: the map's calendar beside a time list. */
.nm-dt__row { display: grid; grid-template-columns: minmax(0, 1fr) 104px; gap: 6px; }
.nm-dt .nm-date__btn, .nm-dt .nm-select__btn { min-height: 42px; }
/* The points of the line being drawn: drag them. A big hit area round a small dot, for fingers. */
.nm-handle { background: none; border: 0; cursor: grab; touch-action: none; }
.nm-handle::before { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2.5px #d4141c, 0 1px 4px rgba(0, 0, 0, .4); transition: transform .12s; }
.nm-handle--end::before { width: 18px; height: 18px; margin: -9px 0 0 -9px; background: #d4141c; box-shadow: 0 0 0 3px #fff, 0 1px 5px rgba(0, 0, 0, .45); }
.nm-handle--mid::before { width: 10px; height: 10px; margin: -5px 0 0 -5px; background: rgba(255, 255, 255, .9); box-shadow: 0 0 0 1.5px rgba(212, 20, 28, .75); }
.nm-handle--mid::after { content: "+"; position: absolute; left: 0; right: 0; top: 50%; margin-top: -7px; text-align: center; font: 700 11px/14px var(--nm-font); color: #d4141c; opacity: 0; transition: opacity .12s; }
.nm-handle--mid:hover::before { transform: scale(1.6); }
.nm-handle--mid:hover::after { opacity: 1; }
.nm-handle:hover::before { transform: scale(1.2); }
.nm-handle.is-diversion::before { box-shadow: 0 0 0 2.5px #111, 0 1px 4px rgba(0, 0, 0, .4); }
.nm-handle--end.is-diversion::before { background: #111; }
.leaflet-dragging .nm-handle, .nm-handle.leaflet-drag-target { cursor: grabbing; }
/* Still on its way (renderDraft): a tapped stretch is drawn straight at once, dashed and moving
   along, until its road comes (Follow roads) and it is drawn as the restriction; a road-section
   tap is a ring. */
path.nm-pendleg { stroke-dasharray: 6 6; animation: nm-pendleg .7s linear infinite; }
@keyframes nm-pendleg { to { stroke-dashoffset: -12; } }
path.nm-pendring { stroke-dasharray: 6 6; animation: nm-pendleg .7s linear infinite; }
@media (prefers-reduced-motion: reduce) { path.nm-pendleg, path.nm-pendring { animation: none; } }
.nm-dates-note { margin-top: 0; }
/* Publish: what the public map shows of the scheme, a tick each. */
.nm-showlist { display: grid; gap: 0; background: var(--nm-cell); border-radius: 12px; padding: 2px 12px; margin: 0 0 10px; }
.nm-editor .nm-showlist label.nm-check { display: flex; margin: 0; padding: 9px 0; border-top: 0.5px solid var(--nm-sep); font-weight: 400; }
.nm-editor .nm-showlist label.nm-check:first-child { border-top: 0; }
.nm-busticks .nm-line { display: inline-grid; place-items: center; min-width: 28px; height: 22px; padding: 0 6px; border-radius: 6px; background: var(--nm-btn-blue); color: #fff; font-size: 12px; font-weight: 700; margin-right: 2px; }
.nm-busticks .nm-showlist { max-height: 260px; overflow-y: auto; }
/* Publish: the emergency services mapped near the works, a row each (not ticks: nothing goes in the order). */
.nm-emerg__row { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 0; border-top: 0.5px solid var(--nm-sep); }
.nm-emerg__row:first-child { border-top: 0; }
.nm-emerg__row b { display: block; font-weight: 600; overflow-wrap: anywhere; }
.nm-emerg__row small { display: block; color: var(--nm-label-2); font-size: 12.5px; overflow-wrap: anywhere; }
/* A level crossing's card: phone the signaller first (automatic and user-worked crossings), or check the signs. */
.nm-lc-warn { margin: 0 4px 12px; padding: 9px 12px; border-radius: 12px; background: rgba(255, 149, 0, 0.14); color: var(--nm-orange-ink); font-size: 14px; line-height: 1.35; font-weight: 600; }
.nm-lc-note { margin: 0 4px 12px; color: var(--nm-label-2); font-size: 13px; line-height: 1.35; }
/* Publish documents: each document a tick, Read beside it, and the gaps still in a ticked one. */
.nm-pubdocs { display: grid; gap: 0; background: var(--nm-cell); border-radius: 12px; padding: 2px 12px; margin: 0 0 10px; }
.nm-pubdocs > .nm-help { margin: 9px 0; color: var(--nm-ink-2); }
/* Publish's "Who lives along it": the equality line reads as text, not as a hint. */
.nm-ttpeople > .nm-help { color: var(--nm-ink-2); }
.nm-ttpeople > .nm-detail__meta { margin: 4px 4px 4px; }
.nm-ttpeople > p:last-child { margin: 4px 4px 10px; }
.nm-pubdoc { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 10px; padding: 4px 0; border-top: 0.5px solid var(--nm-sep); }
.nm-pubdoc:first-child { border-top: 0; }
.nm-editor .nm-pubdoc label.nm-check { display: flex; margin: 0; padding: 5px 0; min-width: 0; font-weight: 400; }
.nm-pubdoc__read { min-height: 32px; padding: 0 2px; color: var(--nm-link); font-size: 14px; font-weight: 600; }
.nm-pubdoc__gaps { grid-column: 1 / -1; margin: -2px 0 5px 28px; font-size: 12.5px; line-height: 1.35; color: var(--nm-orange-ink); }
.nm-done .nm-done__docs { margin: -8px 0 16px; color: var(--nm-ink-2); }
/* A card's Documents (a scheme's, and each of its restrictions'): Read in the link blue, 4.5:1. */
.nm-docs-list span { color: var(--nm-ink-2); }
.nm-docs-list em { color: var(--nm-link); font-weight: 600; }
/* The restriction just come from (Edit scheme on its card), picked out in the scheme's list for a moment. */
.nm-item.is-focus { box-shadow: inset 0 0 0 2px var(--nm-btn-blue); border-radius: 10px; }
/* Signed out (or nearly) with a scheme or the editor open: said at the top of the panel, with Sign in again. */
.nm-sessnote { margin: 0 0 12px; padding: 9px 12px; border-radius: 12px; border-left: 4px solid var(--nm-orange); background: rgba(255, 149, 0, 0.13); color: var(--nm-label); font-size: 13.5px; line-height: 1.4; }
.nm-sessnote .nm-linkbtn { color: var(--nm-link); font-weight: 600; }
/* The account chip while it cannot be read (offline, the server restarting): still signed in. */
.nm-connecting { display: flex; align-items: center; gap: 9px; padding: 4px 14px 4px 4px; font-size: 15px; font-weight: 600; color: var(--nm-ink-2); white-space: nowrap; }
.nm-connecting svg { width: 30px; height: 30px; flex: none; padding: 6px; border-radius: 50%; background: var(--nm-grey); fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; }
/* The tab Sign in again opened, once signed in: says so, and closes itself. */
body.nm-resumed-on > :not(.nm-resumed) { display: none !important; }
.nm-resumed { position: fixed; inset: 0; z-index: 5000; display: grid; place-items: center; padding: 16px; background: var(--nm-ground); }
.nm-resumed__card { box-sizing: border-box; width: 100%; max-width: 420px; display: grid; justify-items: center; gap: 10px; padding: 28px 24px 22px; border-radius: 20px; background: var(--nm-surface); box-shadow: var(--nm-shadow); text-align: center; }
.nm-resumed__tick { width: 56px; height: 56px; border-radius: 50%; background: var(--nm-green); color: #fff; font-size: 30px; font-weight: 700; display: grid; place-items: center; }
.nm-resumed__card h2 { margin: 4px 0 0; font-size: 21px; }
.nm-resumed__card p { margin: 0 0 6px; color: var(--nm-ink-2); font-size: 15px; }
.nm-resumed__card .nm-btn { min-width: 200px; }
.nm-resumed__here { color: var(--nm-link); font-size: 14px; padding: 6px; }
#edDirPick[hidden] { display: none; }


/* Add TTRO is for the Network tab: Collisions and Speeds are for looking, not publishing. */
body.nm-mode-collisions .nm-council [data-council="add"],
body.nm-mode-loads .nm-council [data-council="add"] { display: none; }
.nm-empty { background: var(--nm-cell); border-radius: 12px; padding: 16px; font-size: 14px; color: var(--nm-label-2); margin-bottom: 10px; }
.nm-add { width: 100%; margin: 4px 0 6px; }
.nm-back { padding: 6px 8px; margin-left: -8px; font-weight: 500; max-width: 50%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; text-align: left; }
.nm-editor__head .nm-back + h2 { flex: 1; text-align: right; font-size: 17px; }
.nm-review { background: var(--nm-cell); border-radius: 12px; padding: 2px 12px; }
.nm-review__row { display: grid; grid-template-columns: 100px 1fr; gap: 10px; padding: 9px 0; border-top: 0.5px solid var(--nm-sep); font-size: 14px; }
.nm-review__row:first-child { border-top: 0; }
.nm-review__row span { color: var(--nm-label-2); }
.nm-review__row b { font-weight: 600; }
/* A scheme's permit: the reference with Find, and what Street Manager said about it. */
.nm-inline { display: flex; gap: 8px; min-width: 0; }
.nm-inline input { flex: 1; min-width: 0; }
.nm-permit { display: grid; gap: 4px; margin: -4px 0 12px; padding: 10px 12px; border-radius: 12px; background: var(--nm-cell); border-left: 4px solid var(--nm-grey); font-size: 13px; }
.nm-permit strong { font-size: 14px; }
.nm-permit span, .nm-permit small { color: var(--nm-label-2); }
.nm-permit .nm-btn { justify-self: start; margin-top: 4px; }
.nm-permit.is-found { border-left-color: var(--nm-green); }
.nm-permit.is-found strong { color: var(--nm-green-ink); }
.nm-permit.is-waiting { border-left-color: var(--nm-orange); }
.nm-permit.is-waiting strong { color: var(--nm-orange-ink); }
.nm-permit.is-linked { border-left-color: var(--nm-blue); }
#wzText { font: 13px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace; white-space: pre-wrap; }
.nm-done { text-align: center; padding: 24px 6px 6px; }
.nm-done__tick { width: 56px; height: 56px; border-radius: 50%; background: var(--nm-green); color: #fff; font-size: 30px; font-weight: 700; display: grid; place-items: center; margin: 0 auto 10px; }
.nm-done h3 { margin: 0 0 6px; font-size: 22px; }
.nm-done p { color: var(--nm-label-2); margin: 0 0 16px; }
.nm-linkbox { display: flex; gap: 6px; background: var(--nm-cell); border-radius: 12px; padding: 6px; }
.nm-linkbox input { flex: 1; min-width: 0; border: 0; background: none; font-size: 14px; padding: 0 6px; }
.nm-status { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; vertical-align: 2px; background: var(--nm-fill); color: var(--nm-label-2); }
.nm-status--published { background: rgba(52, 199, 89, 0.16); color: var(--nm-green-ink); }
.nm-status--draft { background: rgba(255, 149, 0, 0.16); color: var(--nm-orange-ink); }
body.nm-editing .nm-toast, body.nm-detail-open .nm-toast { bottom: calc(96px + var(--nm-safe-b)); }
.nm-hint2 { font-size: 12px; color: var(--nm-label-2); padding-left: 4px; }
.nm-pick { margin: -4px 0 12px; padding-left: 4px; font-size: 14px; }
body.nm-picking .leaflet-container { cursor: crosshair; }
.nm-usrn-label span { display: inline-block; transform: translate(-50%, -50%); padding: 1px 6px; border-radius: 6px; background: rgba(48, 176, 199, 0.95); color: #fff; font: 600 10.5px var(--nm-font); font-variant-numeric: tabular-nums; white-space: nowrap; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.nm-usrn-pop .leaflet-popup-content-wrapper { border-radius: 14px; box-shadow: var(--nm-shadow); }
.nm-usrn-pop .leaflet-popup-content { margin: 10px 12px; display: grid; gap: 3px; font: 14px var(--nm-font); min-width: 150px; }
.nm-usrn-pop strong { font-weight: 600; }
.nm-usrn-pop span { font-variant-numeric: tabular-nums; color: var(--nm-label-2); }
.nm-usrn-pop button { margin-top: 4px; border: 0; border-radius: 8px; background: var(--nm-fill); color: var(--nm-blue); font-weight: 600; padding: 6px 8px; cursor: pointer; }
.nm-usrn-pop small { color: var(--nm-label-3); font-size: 11px; }
.leaflet-container path.leaflet-interactive:focus { outline: none; }
.nm-usrn-pop dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 4px 0 2px; font-size: 13px; }
.nm-usrn-pop dt { color: var(--nm-label-2); }
.nm-usrn-pop dd { margin: 0; font-weight: 500; }

/* ── transport, places, live and council layers */

.nm-place { background: none; border: 0; }
.nm-place > span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 28%; background: var(--tile, var(--nm-grey)); box-shadow: 0 0 0 1.5px #fff, 0 1px 3px rgba(0, 0, 0, .35); }
.nm-place svg { width: 74%; height: 74%; }
.nm-place--live > span { box-shadow: 0 0 0 1.5px #fff, 0 0 0 4px rgba(0, 122, 255, .28), 0 1px 3px rgba(0, 0, 0, .35); }
.nm-place--key { display: block; width: 22px; height: 22px; margin: 0 auto; }
.nm-place-sign { background: none; border: 0; }
.nm-count-pin { background: none; border: 0; }
/* Places too far out to draw one by one (renderPlaceGroups): a pill in the tile's colour, its symbol and how many,
   centred on the places it counts. A tap zooms in. */
.nm-group-pin { background: none; border: 0; }
.nm-group-pin > span { display: inline-flex; align-items: center; gap: 4px; transform: translate(-50%, -50%); padding: 2px 8px 2px 2px; border-radius: 999px;
  background: var(--nm-surface); color: var(--nm-label); font: 700 11.5px/1 var(--nm-font); font-variant-numeric: tabular-nums; white-space: nowrap;
  box-shadow: 0 0 0 1.5px var(--tile, var(--nm-grey)), 0 2px 6px rgba(0, 0, 0, .28); cursor: zoom-in; }
.nm-group-pin i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--tile, var(--nm-grey)); }
.nm-group-pin svg { width: 13px; height: 13px; }
@media (forced-colors: active) { .nm-group-pin > span { border: 1px solid CanvasText; } }
/* An icon a pill stands for, while it would sit on top of others (declutter in network-map.js). */
.leaflet-marker-icon.nm-declutter-off { display: none; }
.nm-count-pin > span { display: inline-block; transform: translate(-50%, -50%); padding: 1px 6px; border-radius: 9px; background: var(--nm-indigo); color: #fff; font: 700 10.5px var(--nm-font); font-variant-numeric: tabular-nums; white-space: nowrap; box-shadow: 0 0 0 1.5px #fff, 0 1px 3px rgba(0, 0, 0, .3); cursor: pointer; }
.nm-count-pin--key { display: block; text-align: center; }
.nm-count-pin--key > span { transform: none; }

.nm-bus { background: none; border: 0; }
.nm-bus__dot { position: relative; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--c); color: #fff; box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(0, 0, 0, .35); font: 700 9.5px/1 var(--nm-font); letter-spacing: -.02em; }
.nm-bus__dot b { position: relative; z-index: 1; font-weight: 700; }
.nm-bus__dot i { position: absolute; inset: -8px; pointer-events: none; }
.nm-bus__dot i::before { content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%); border: 5px solid transparent; border-top: 0; border-bottom: 7px solid var(--c); }
.nm-bus--key { display: block; width: 26px; margin: 0 auto; }
.nm-bus-state { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--nm-label) !important; }
.nm-bus-state::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
path.nm-heldup { animation: nm-heldup 1.8s ease-in-out infinite; }
@keyframes nm-heldup { 50% { stroke-opacity: .35; fill-opacity: .04; } }
@media (prefers-reduced-motion: reduce) { path.nm-heldup { animation: none; } }

.nm-ward-label { background: none; border: 0; }
.nm-ward-label span { display: inline-block; transform: translate(-50%, -50%); color: var(--nm-indigo-ink); font: 500 11.5px var(--nm-font); white-space: nowrap; text-shadow: 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #fff; cursor: pointer; }

.nm-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 4px; }
/* (A darker red than the bus routes' line: white numbers on it read at 5.6:1; on #ff2d55 they were 3.6:1.) */
.nm-chips button { border: 0; border-radius: 7px; background: #c9184a; color: #fff; font: 700 12.5px/1.2 var(--nm-font); padding: 4px 8px; min-width: 30px; cursor: pointer; }
.nm-chips button:hover { background: #a3123b; }
.nm-detail .nm-chips { margin: 4px 4px 8px; }
.nm-pop-sub, .leaflet-popup-content .nm-pop-sub { margin: 2px 0; font-size: 13px; color: var(--nm-label-2); }
.nm-pop-msg { max-height: 120px; overflow: auto; white-space: pre-line; }
.nm-pop-big, .leaflet-popup-content .nm-pop-big { margin: 0 0 2px; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.nm-pop-big small { font-size: 12.5px; font-weight: 400; color: var(--nm-label-2); }
.nm-pop-link { display: inline-block; margin: 4px 0 2px; color: var(--nm-blue); font-weight: 600; font-size: 13.5px; text-decoration: none; }
.nm-pop-link:hover { text-decoration: underline; }
.nm-spark { display: block; margin: 6px 0 0; }
.nm-spark__years { display: block; color: var(--nm-label-3); font-size: 11px; }
.nm-cam-img { display: block; width: 100%; min-height: 140px; margin: 6px 0; border-radius: 8px; background: var(--nm-fill); object-fit: cover; }

.nm-public { color: var(--nm-blue); }
.nm-public::before { display: none; }
.nm-upload { display: grid; gap: 0; }
.nm-upload__row { display: grid; grid-template-columns: 84px 1fr; align-items: center; gap: 8px; padding: 8px 12px; border-top: 0.5px solid var(--nm-sep); font-size: 14px; }
.nm-upload__row:first-child { border-top: 0; }
.nm-upload__row > span { color: var(--nm-label-2); }
.nm-upload__row input, .nm-upload__row select { width: 100%; min-width: 0; border: 0; background: var(--nm-fill); border-radius: 8px; padding: 7px 9px; font-size: 15px; }
.nm-upload__row input[type="file"] { padding: 5px 6px; font-size: 13px; }
.nm-upload__go { display: grid; gap: 6px; padding: 10px 12px 12px; border-top: 0.5px solid var(--nm-sep); }
.nm-upload__go small { color: var(--nm-label-2); font-size: 12px; }
.nm-uplist { margin-top: 8px; }
.nm-uplist__row { cursor: default; }
.nm-uplist__row .nm-btn { font-size: 13px; padding: 5px 10px; min-height: 30px; color: var(--nm-red); }

/* ── popups: one card design for everything on the map */

.nm-card-pop .leaflet-popup-content-wrapper { border-radius: 18px; padding: 0; background: var(--nm-pop); box-shadow: 0 12px 40px rgba(0, 0, 0, .18), 0 1px 3px rgba(0, 0, 0, .1); }
.nm-card-pop .leaflet-popup-content { margin: 0; width: auto !important; min-width: 250px; max-width: 320px; font: 14px/1.35 var(--nm-font); color: var(--nm-label); }
.nm-card-pop .leaflet-popup-tip { background: var(--nm-pop); }
.nm-card-pop a.leaflet-popup-close-button { top: 10px; right: 10px; width: 24px; height: 24px; border-radius: 50%; background: var(--nm-fill); color: var(--nm-label-2); font: 600 16px/24px var(--nm-font); text-align: center; }
.nm-card { padding: 14px 14px 12px; display: grid; gap: 8px; }
.nm-card__head { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; padding-right: 26px; }
.nm-card__icon { width: 40px; height: 40px; border-radius: 10px; background: var(--tile, var(--nm-grey)); display: grid; place-items: center; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, .08); }
.nm-card__icon svg { width: 24px; height: 24px; }
.nm-card__icon--sign { background: none; box-shadow: none; }
.nm-card__icon--sign svg { width: 40px; height: 40px; }
.nm-card__titles { display: grid; gap: 1px; min-width: 0; }
.nm-card__titles strong { font-size: 16px; font-weight: 650; letter-spacing: -0.01em; line-height: 1.25; overflow-wrap: anywhere; }
.nm-card__titles span { font-size: 13px; color: var(--nm-label-2); overflow-wrap: anywhere; }
.nm-card__badge, .leaflet-popup-content .nm-card__badge { justify-self: start; margin: 0; display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 7px; border-radius: 999px; background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--nm-label); font-size: 12.5px; font-weight: 600; }
.nm-card__badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.nm-card__label, .leaflet-popup-content .nm-card__label { margin: 0; font-size: 13px; color: var(--nm-label-2); }
.nm-card__msg, .leaflet-popup-content .nm-card__msg { margin: 0; padding: 9px 11px; border-radius: 10px; background: var(--nm-surface); font-size: 13px; max-height: 130px; overflow: auto; white-space: pre-line; }
.nm-card dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); margin: 0; background: var(--nm-surface); border-radius: 11px; overflow: hidden; font-size: 13.5px; box-shadow: 0 0 0 0.5px var(--nm-sep); }
.nm-card dt, .nm-card dd { margin: 0; padding: 7px 11px; border-top: 0.5px solid var(--nm-sep); }
.nm-card dt { color: var(--nm-label-2); padding-right: 6px; white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.nm-card dd { text-align: right; font-weight: 500; overflow-wrap: break-word; min-width: 0; }
.nm-card dt:first-of-type, .nm-card dt:first-of-type + dd { border-top: 0; }
.nm-card__actions { display: flex; flex-wrap: wrap; gap: 6px; }
.nm-card__btn { flex: 1 1 auto; display: inline-flex; justify-content: center; align-items: center; min-height: 32px; padding: 6px 10px; border: 0; border-radius: 9px; background: rgba(0, 122, 255, .1); color: var(--nm-blue); font: 600 13px var(--nm-font); text-decoration: none; cursor: pointer; white-space: nowrap; }
.nm-card__btn:hover { background: rgba(0, 122, 255, .16); }
.nm-card__src { color: var(--nm-label-3); font-size: 11px; line-height: 1.3; }
.nm-card .nm-chips { margin: 0; }
.nm-card .nm-cam-img { margin: 0; }
.nm-card .nm-pop-big { margin: 0; }
.nm-card .nm-spark { margin: 0; }

/* ── Layers: a layer's kinds. The tiles' › opens them on the layer's options page (the
   control grid, further down); these are the base styles, and the archived Abnormal loads
   key that still opens under its row. */

.nm-disclose { flex: none; width: 30px; height: 30px; margin-right: 4px; border: 0; border-radius: 50%; background: none; color: var(--nm-label-3); display: grid; place-items: center; cursor: pointer; }
.nm-disclose:hover { background: var(--nm-fill); color: var(--nm-label-2); }
.nm-disclose svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.nm-disclose[aria-expanded="true"] svg { transform: rotate(180deg); }
/* A locked layer has no options. */
.nm-cell.is-locked .nm-disclose { display: none; }
.nm-subkey { background: rgba(118, 118, 128, 0.06); border-top: 0.5px solid var(--nm-sep); padding: 2px 0; }
.nm-subkey[hidden] { display: none; }
.nm-subrow { position: relative; display: grid; grid-template-columns: 30px 1fr 24px; align-items: center; gap: 10px; padding: 7px 14px 7px 54px; font-size: 14px; cursor: pointer; }
.nm-subrow__sw { display: grid; place-items: center; }
.nm-subrow__sw svg { display: block; }
.nm-subrow input { position: absolute; opacity: 0; pointer-events: none; }
.nm-check { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--nm-label-3); display: grid; place-items: center; }
.nm-subrow input:checked + .nm-check { background: var(--nm-blue); border-color: var(--nm-blue); }
.nm-subrow input:checked + .nm-check::after { content: ""; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.2px 2.2px 0; transform: translateY(-1px) rotate(45deg); }
.nm-subrow input:not(:checked) ~ .nm-subrow__text, .nm-subrow:has(input:not(:checked)) .nm-subrow__sw { opacity: .45; }
.nm-subrow input:focus-visible + .nm-check { outline: 3px solid rgba(0, 122, 255, 0.5); outline-offset: 2px; }
.nm-place--sw { display: block; width: 20px; height: 20px; }

/* ── a street's card: traffic, speeds, collisions */

.nm-detail--street .nm-detail__kind .nm-card__icon { width: 26px; height: 26px; border-radius: 7px; }
.nm-detail--street .nm-dims b { font-size: 20px; }
.nm-small { font-size: 13px; line-height: 1.4; }
.nm-muted { color: var(--nm-label-2); }

/* ── a thing on the map in the right-hand card (openCard in network-map.js): a count, a road's bus
   delays, a bus stop, an incident. Built like a street's card; on a computer it is only as tall as it needs. */
.nm-detail--feature .nm-card__badge { margin: 2px 0 0; border-radius: 12px; }
.nm-detail--feature .nm-dims { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
.nm-detail--feature .nm-detail__kind .nm-card__icon--sign svg { width: 26px; height: 26px; }
.nm-detail--feature .nm-detail__text { margin: 2px 4px 12px; }
.nm-detail--feature .nm-detail__text.nm-small { margin-top: 10px; }
.nm-detail--feature .nm-card__msg { max-height: none; padding: 10px 12px; border-radius: 12px; background: var(--nm-cell); font-size: 14px; line-height: 1.45; }
.nm-detail--feature .nm-cam-img { margin: 0 0 12px; border-radius: 12px; }
.nm-detail--feature .nm-chips { margin: 2px 4px 0; }
.nm-detail--feature .nm-spark { margin: 2px 0 0; }
.nm-detail--feature .nm-spark__years { margin: 2px 4px 0; font-size: 12px; color: var(--nm-label-2); }
.nm-detail--feature .nm-bars--hours { height: 80px; margin: 0 0 4px; padding-bottom: 18px; }
.nm-detail--feature .nm-detail__head h2 { overflow-wrap: anywhere; }
@media (max-width: 380px) { .nm-detail--feature .nm-dims[style*="--n:4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 761px) {
  .nm-detail--feature { bottom: auto; max-height: calc(100vh - 2 * var(--nm-gap) - var(--nm-safe-t) - var(--nm-safe-b)); }
  .nm-detail--feature .nm-detail__body { flex: 1 1 auto; min-height: 0; }
}

/* ── folds on the right-hand cards (cardFold in network-map.js; owner, 19 Oct 2026: the key facts first, the longer
   parts in dropdowns that start closed). Each fold is one rounded cell: a heading row (its name, a count, a line
   under it, any "i", the chevron) whose button stretches over the whole row, over its body. Inside, the lists and
   rows lose their own cell so the fold reads as one list. Light and dark from the tokens; the area check's Details
   folds (network-map-area.css) look the same. */
.nm-cfold { margin: 8px 0 0; border-radius: 14px; background: var(--nm-cell); }
.nm-cfold__h { position: relative; display: flex; align-items: center; gap: 6px; margin: 0; padding: 0 14px 0 0; border-radius: 14px; font: inherit; }
.nm-cfold__btn {
  position: static; flex: 1 1 auto; min-width: 0; min-height: 46px;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  padding: 10px 0 10px 14px; border: 0; background: none; color: var(--nm-label); text-align: left; cursor: pointer;
  font: 600 15px/1.25 var(--nm-font); letter-spacing: -0.01em;
}
/* (The whole row is the button: the chevron and the space round the words open it too.) */
.nm-cfold__btn::after { content: ""; position: absolute; inset: 0; border-radius: 14px; }
.nm-cfold__btn:focus-visible { outline: none; }
.nm-cfold__btn:focus-visible::after { outline: 3px solid rgba(0, 122, 255, 0.5); outline-offset: -3px; }
@media (hover: hover) { .nm-cfold__h:hover { background: var(--nm-fill); } }
.nm-cfold.is-open > .nm-cfold__h { border-radius: 14px 14px 0 0; }
.nm-cfold__t { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; overflow-wrap: anywhere; }
.nm-cfold__c { flex: none; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--nm-fill); color: var(--nm-ink-2); font-size: 12.5px; font-weight: 600; line-height: 1.35; text-align: center; font-variant-numeric: tabular-nums; }
.nm-cfold__n { font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--nm-ink-2); overflow-wrap: anywhere; }
/* (Open, the fold shows what its line summed up.) */
.nm-cfold.is-open .nm-cfold__n { display: none; }
.nm-cfold__tip { position: relative; z-index: 1; flex: none; display: flex; }
.nm-cfold__tip .nm-i { margin: 0; }
.nm-cfold__chev { flex: none; width: 8px; height: 8px; margin: 0 4px 0 6px; border-right: 2px solid var(--nm-ink-2); border-bottom: 2px solid var(--nm-ink-2); transform: rotate(45deg) translate(-2px, -2px); transition: transform .18s; pointer-events: none; }
.nm-cfold.is-open .nm-cfold__chev { transform: rotate(-135deg) translate(-2px, -2px); }
/* (No padding, border or margin on the body itself: closed, find in page keeps it laid out with nothing shown.) */
.nm-cfold__body[hidden="until-found"] { display: block !important; }
.nm-cfold__in { padding: 2px 14px 12px; border-top: 0.5px solid var(--nm-sep); }
.nm-cfold__in > :first-child { margin-top: 8px; }
.nm-cfold__in > .nm-dl:first-child, .nm-cfold__in > .nm-linked:first-child, .nm-cfold__in > .nm-recent:first-child { margin-top: 0; }
.nm-cfold__in > :last-child { margin-bottom: 0; }
.nm-cfold__in .nm-dl, .nm-cfold__in .nm-recent { padding: 0; background: none; border-radius: 0; }
.nm-cfold__in .nm-recent { margin-top: 4px; }
.nm-cfold__in .nm-linked { margin: 0 -14px; background: none; border-radius: 0; }
.nm-cfold__in .nm-linked button { padding: 10px 14px; }
.nm-cfold__in > .nm-linked:last-child { margin-bottom: -12px; }
.nm-cfold__in .nm-linked button:last-child { border-radius: 0 0 14px 14px; }
.nm-cfold__in .nm-sec { margin: 14px 0 4px; }
.nm-cfold__in > .nm-sec:first-child { margin-top: 10px; }
.nm-cfold__in .nm-sec + .nm-dl .nm-dl__row:first-child { border-top: 0; }
/* ── the street card's tabs (26 Oct 2026; owner: "restructure the side card, it just has too much information on
   it"): a segmented control under what stays in sight (the tiles, what is along it, what is on it now), kept at the
   top of the card's body as it scrolls, on the card's own glass so the folds pass under it; the tab's folds under
   it, the other tabs' hidden (streetTabs in network-map.js). Printed, the bar goes (.nm-seg is hidden in print) and
   every tab shows. */
.nm-tabs { position: sticky; top: 0; z-index: 3; margin: 16px -16px 0; padding: 6px 16px 10px; background: var(--nm-glass); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); }
.nm-seg--tabs { gap: 3px; }
.nm-seg--tabs button { padding: 7px 2px; font-size: 12.5px; letter-spacing: -0.01em; }
.nm-tabpanel[hidden] { display: none; }
.nm-tabpanel > .nm-cfold:first-child { margin-top: 4px; }
@media (max-width: 380px) { .nm-seg--tabs button { font-size: 11.5px; } }
@media (forced-colors: active) { .nm-seg--tabs button.is-on { outline: 2px solid CanvasText; outline-offset: -2px; } }
@media print { .nm-tabs { position: static; } .nm-tabpanel[hidden] { display: block !important; } }
.nm-cfold__in .nm-detail__text { margin: 8px 0; }
.nm-cfold__in .nm-detail__meta { margin: 8px 0 0; }
.nm-cfold__in .nm-bars { background: var(--nm-fill); }
.nm-cfold__in .nm-card__msg { max-height: none; padding: 0; background: none; font-size: 14px; line-height: 1.45; }
.nm-cfold__in .nm-sevchips { margin-top: 4px; }
/* The key facts kept in sight above the folds. */
.nm-dl--key { margin: 0 0 4px; }
/* With its longer parts folded, a card on a computer is only as tall as it needs (as a thing's card,
   .nm-detail--feature, already was, and as the sheet on a phone is); it grows as folds open, to the screen's height. */
@media (min-width: 761px) {
  .nm-detail--fit { bottom: auto; max-height: calc(100vh - 2 * var(--nm-gap) - var(--nm-safe-t) - var(--nm-safe-b)); max-height: calc(100dvh - 2 * var(--nm-gap) - var(--nm-safe-t) - var(--nm-safe-b)); }
  .nm-detail--fit .nm-detail__body { flex: 1 1 auto; min-height: 0; }
}
.nm-detail__body > .nm-cfold:last-child { margin-bottom: 4px; }
/* ── The larger cards, gone through (owner, 23 Oct 2026: "enhance them for a user ... covers all this new data we have
   now without overwhelming a user"). Long names wrap, never wider than the panel. A restriction's or a works card's
   "Who it affects" heading shows only once one of its folds has come (impactGroup). A works card's flags (worksFlags):
   amber for what changes what the council does next. A street card's What is along it (properties, buses, steepest
   part), and a place's line on why it matters (placeWhy), each a soft cell. Colours from the tokens, so dark mode
   follows. */
.nm-detail__head h2 { overflow-wrap: anywhere; }
.nm-linked strong, .nm-linked span { min-width: 0; overflow-wrap: anywhere; }
.nm-affects:not(:has(.nm-cfold)) { display: none; }
.nm-affects > .nm-sec { margin-bottom: 0; }
.nm-flags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; padding: 0; list-style: none; }
.nm-flag { max-width: 100%; padding: 3px 10px; border-radius: 999px; background: var(--nm-fill); color: var(--nm-label); font-size: 12.5px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.nm-flag--warn { background: rgba(255, 149, 0, 0.16); color: var(--nm-orange-ink); }
.nm-along { margin: 0 0 12px; padding: 6px 12px; list-style: none; border-radius: 12px; background: var(--nm-cell); }
.nm-along li { padding: 3px 0; font-size: 13.5px; line-height: 1.4; color: var(--nm-label); overflow-wrap: anywhere; }
.nm-along .nm-i { margin-left: 4px; vertical-align: -2px; }
.nm-why { margin: 0 0 12px; padding: 8px 12px; border-radius: 12px; background: var(--nm-fill); color: var(--nm-label); font-size: 13.5px; line-height: 1.4; }
@media (prefers-reduced-motion: reduce) { .nm-cfold__chev { transition: none; } }
@media (forced-colors: active) {
  .nm-cfold { border: 1px solid CanvasText; }
  .nm-cfold__chev { border-color: CanvasText; }
  /* (The cards' soft cells keep an edge when the colours are the system's.) */
  .nm-flag, .nm-along, .nm-why { border: 1px solid CanvasText; }
}
@media print {
  /* (A printout has every fold open.) */
  .nm-cfold__body[hidden] { display: block !important; content-visibility: visible; }
  .nm-cfold__chev { display: none; }
}
.nm-src { display: inline-block; padding: 1px 7px; margin-right: 4px; border-radius: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #fff; background: var(--nm-grey); }
.nm-src--council, .nm-src--counted, .nm-src--major_link, .nm-src--nearby_count { background: var(--nm-green); }
.nm-sevchips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 8px; }
.nm-sevchip { display: flex; flex-direction: column; align-items: center; padding: 7px 4px; border-radius: 12px; background: var(--nm-cell); font-size: 11px; color: var(--nm-label-2); }
.nm-sevchip b { font-size: 19px; color: var(--c); font-variant-numeric: tabular-nums; }
.nm-bars { display: flex; align-items: flex-end; gap: 4px; height: 64px; padding: 6px 10px 0; margin-bottom: 8px; background: var(--nm-cell); border-radius: 12px; }
.nm-bars div { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.nm-bars i { display: block; width: 100%; min-height: 2px; border-radius: 4px 4px 0 0; background: var(--nm-red); opacity: .8; }
.nm-bars span { font-size: 10px; color: var(--nm-label-2); padding: 2px 0 4px; }
.nm-recent { list-style: none; margin: 8px 0 0; padding: 0 12px; background: var(--nm-cell); border-radius: 12px; }
.nm-recent li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: center; padding: 8px 0; border-top: 0.5px solid var(--nm-sep); font-size: 13.5px; }
.nm-recent li:first-child { border-top: 0; }
.nm-recent li > i { width: 9px; height: 9px; border-radius: 50%; }
.nm-recent li em { grid-column: 2; font-style: normal; color: var(--nm-ink-2); font-size: 12.5px; }
/* (A darker pink than the map's bus lines: white words on #ff2d55 read at 3.7:1, on this at 5.2:1.) */
.nm-recent li .nm-line { min-width: 34px; padding: 2px 6px; border-radius: 6px; background: #d70f45; color: #fff; font-size: 12px; text-align: center; }
.nm-recent li .nm-line + span { font-weight: 500; }
/* Bus services with their company (serviceChips): a company's numbers, each a button that shows
   its whole route, then the company and its buses a weekday. A number stays on one line; a long
   name (a park and ride's) wraps at its spaces, never cut short. */
.nm-svcs li > .nm-svcs__lines { display: flex; flex-wrap: wrap; gap: 4px; max-width: 10.5em; }
.nm-svcs li:has(> em) > .nm-svcs__lines { grid-row: 1 / span 2; }
.nm-svcs__lines + span { font-weight: 500; overflow-wrap: anywhere; }
.nm-svcs .nm-line { max-width: 100%; min-height: 28px; border: 0; padding: 4px 8px; font: 700 12.5px/1.2 var(--nm-font); overflow-wrap: break-word; cursor: pointer; }
.nm-svcs .nm-line:hover { background: #b50c3a; }
.nm-svcs .nm-line:focus-visible { outline: 3px solid rgba(0, 122, 255, 0.6); outline-offset: 2px; }
/* A visitor's numbers are not buttons (a whole route is a signed-in council's): no pointer, no hover. */
.nm-svcs .nm-line--plain { cursor: default; display: inline-flex; align-items: center; justify-content: center; }
.nm-svcs .nm-line--plain:hover { background: #d70f45; }
.nm-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 3px rgba(0, 0, 0, .06); }
.nm-recent li.nm-tap { cursor: pointer; }
.nm-recent li.nm-tap:hover span { color: var(--nm-blue); }
.nm-recent li .nm-line--grey { background: var(--nm-fill-2); color: var(--nm-label); }
/* The street card's works history (25 Oct 2026): works started each financial year in the streets layer's teal; a
   promoter's badge is its permits; a section 58 in force is the layer's purple, a proposed one pale. */
.nm-bars--works i { background: #30b0c7; }
.nm-recent li .nm-line--teal { background: #30b0c7; color: #fff; }
.nm-recent li .nm-line--s58 { background: #7c3aed; color: #fff; }
.nm-recent li .nm-line--s58soon { background: var(--nm-fill-2); color: #7c3aed; }

/* ── the panel is the filters: search first, then the switches */

/* The Filters button beside the search: on a phone it opens the filters over the map; on a computer it
   folds them away so only the search shows, and back (owner, 18 Oct 2026). Tinted while they show. */
.nm-search__filters { position: relative; }
.nm-search__filters[aria-expanded="true"] { background: rgba(0, 122, 255, .12); }
/* Folded on a computer, how many layers are on, so the map's layers are not a surprise. */
.nm-filters__n { position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  background: var(--nm-btn-blue, #0a66d8); color: #fff; font: 700 10.5px/16px var(--nm-font); text-align: center; box-shadow: 0 0 0 2px var(--nm-glass); pointer-events: none; }
.nm-filters__n[hidden] { display: none; }
.nm-summary--hints:empty { display: none; }
.nm-summary--hints .nm-hint { margin: 0 2px 4px; }
.nm-tools { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 14px 4px 4px; }
.nm-subnote { margin: 8px 14px 8px 54px; font-size: 13px; color: var(--nm-label-2); }

/* collisions: who was involved, coloured by severity */
/* The marker box is a generous, invisible tap target; the dot sits in its middle. */
.nm-coll { background: none; border: 0; display: grid; place-items: center; cursor: pointer; }
.nm-coll span { display: grid; place-items: center; width: var(--d, 16px); height: var(--d, 16px); border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1.5px #fff, 0 1px 3px rgba(0, 0, 0, .35); }
.nm-coll span svg { width: 70%; height: 70%; }
.nm-coll--3 span svg { width: 64%; height: 64%; }

/* ── right-click (or long-press) menu */

.nm-ctx { position: absolute; z-index: 1200; min-width: 230px; padding: 6px; border-radius: 14px; background: var(--nm-pop);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: var(--nm-shadow); font: 14px var(--nm-font); }
.nm-ctx[hidden] { display: none; }
.nm-ctx__where { padding: 6px 10px 8px; font-size: 12px; color: var(--nm-label-2); border-bottom: 0.5px solid var(--nm-sep); margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.nm-ctx button { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; padding: 9px 10px; border-radius: 9px; text-align: left; font: inherit; color: var(--nm-label); cursor: pointer; }
.nm-ctx button:hover, .nm-ctx button:focus-visible { background: rgba(0, 122, 255, .1); outline: none; }
.nm-ctx button svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--nm-blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nm-ctx hr { border: 0; border-top: 0.5px solid var(--nm-sep); margin: 4px 6px; }
.nm-ctx-pin { background: none; border: 0; }
.nm-ctx-pin span { display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--nm-blue); box-shadow: 0 0 0 3px #fff, 0 2px 6px rgba(0, 0, 0, .3); }
.nm-measure-pt { display: grid; place-items: center; background: none; border: 0; }
.nm-measure-pt span { display: block; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid var(--nm-blue); box-sizing: border-box; }
/* The last point while measuring: tap it to finish. */
.nm-measure-pt--end span { width: 14px; height: 14px; background: var(--nm-blue); border-color: #fff; box-shadow: 0 0 0 2px var(--nm-blue), 0 1px 4px rgba(0, 0, 0, .3); }
/* The handle half way along a segment: drag it (or the line itself) to add a point there and bend the
   line. Lighter and smaller than a point. It takes no taps itself (a tap there goes to the map, or to
   the pin or street under it); the script takes hold of it within 14px, as of a point.
   The z-indexes put the handles over the line, the points over them and the total over all: Leaflet
   gives the pane's SVG (the line) 200 and a marker its height on the screen, so a point less than
   200px from the top of the map went under the line. */
.nm-measure-ghost { display: grid; place-items: center; background: none; border: 0; z-index: 210 !important; }
.nm-measure-ghost span { display: block; width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .85); border: 2px solid var(--nm-blue); box-sizing: border-box; opacity: .75; }
.nm-measure-ghost--hot span { opacity: 1; transform: scale(1.2); }
.nm-measure-ghost--off, body.nm-editing .nm-measure-ghost, body.nm-picking .nm-measure-ghost, .map-report-drawing .nm-measure-ghost { display: none; }
.nm-measure-pt { z-index: 220 !important; }
.nm-measure-label { z-index: 230 !important; }
/* Measuring: every tap on the map is a point, so the pointer says so (a point can be dragged). */
body.nm-measuring .nm-map, body.nm-measuring .nm-map .leaflet-interactive:not(.nm-measure-pt) { cursor: crosshair; }
.nm-map .nm-measure-pt { cursor: move; }
/* Over the line or a handle, where a press and drag bends it, and while it is being bent. */
.nm-map.nm-measure-grab, .nm-map.nm-measure-grab *, body.nm-measure-bending, body.nm-measure-bending * { cursor: move !important; }
/* The bar at the bottom while measuring (and while a finished line is on the map): what to tap next or
   the total, Done and Clear. Centred on the map between the panel and any card. A phone has no
   right-click, so this is where it finishes and clears. */
.nm-measure {
  position: fixed; z-index: 1070; left: calc((var(--nm-side-w) + 100vw) / 2); bottom: calc(24px + var(--nm-safe-b)); transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 2 * var(--nm-gap)); padding: 5px 5px 5px 12px; border-radius: 999px;
  background: var(--nm-glass); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px);
  box-shadow: var(--nm-shadow); border: 0.5px solid var(--nm-edge); color: var(--nm-label); font: 14px var(--nm-font); white-space: nowrap;
}
.nm-measure > svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--nm-blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nm-measure__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; padding-right: 2px; }
.nm-measure__text b { font-weight: 600; }
.nm-measure__done { flex: none; min-height: 34px; padding: 6px 14px; border: 0; border-radius: 999px; background: var(--nm-btn-blue); color: #fff; font: 600 14px var(--nm-font); cursor: pointer; }
.nm-measure__x { flex: none; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: var(--nm-fill); color: var(--nm-label); font: 400 22px/1 var(--nm-font); cursor: pointer; }
.nm-measure__x:hover { background: var(--nm-fill-2); }
.nm-measure button:focus-visible { outline: 2px solid var(--nm-blue); outline-offset: 2px; }
body.nm-measure-shown:not(.nm-detail-open):not(.nm-editing) .nm-toast { bottom: calc(76px + var(--nm-safe-b)); }
@media (min-width: 1041px) {
  body.nm-detail-open .nm-measure, body.nm-editing .nm-measure { left: calc((var(--nm-side-w) + 100vw - var(--nm-detail-w)) / 2); }
}
@media (max-width: 1040px) {
  /* A tablet: the card (or the editor) has the right of the screen and the panel is hidden,
     so the bar is centred in the map left of it, and never runs under it; it sits higher,
     clear of the credits, which take two lines in that narrower space. */
  body.nm-detail-open .nm-measure, body.nm-editing .nm-measure {
    left: calc((100vw - var(--nm-detail-w) - var(--nm-gap)) / 2);
    bottom: calc(46px + var(--nm-safe-b));
    max-width: calc(100vw - var(--nm-detail-w) - 3 * var(--nm-gap));
  }
}
@media (max-width: 760px) {
  /* (Above the box and the ward pill, which sit along the bottom edge.) */
  .nm-measure { left: 50%; bottom: var(--nm-stack-top); }
  body.nm-measure-shown:not(.nm-detail-open):not(.nm-editing) .nm-toast { bottom: calc(var(--nm-stack-top) + 54px); }
  /* A card or the editor is a sheet along the bottom: the bar goes to the top. */
  body.nm-detail-open .nm-measure, body.nm-editing .nm-measure { bottom: auto; top: calc(var(--nm-gap) + var(--nm-safe-t)); }
}
@media print { .nm-measure { display: none !important; } }
.nm-measure-label { background: none; border: 0; }
.nm-measure-label span { display: inline-block; transform: translate(-50%, -150%); padding: 3px 8px; border-radius: 8px; background: var(--nm-btn-blue); color: #fff; font: 600 12.5px var(--nm-font); white-space: nowrap; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.nm-incident { background: none; border: 0; }
.nm-incident span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 8px; background: var(--c); box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0, 0, 0, .3); cursor: pointer; }
.nm-incident span svg { width: 72%; height: 72%; }
.nm-incident.is-live span { animation: nm-pulse 1.8s ease-out infinite; }
@keyframes nm-pulse { 0% { box-shadow: 0 0 0 2px #fff, 0 0 0 2px var(--c); } 100% { box-shadow: 0 0 0 2px #fff, 0 0 0 12px rgba(255, 59, 48, 0); } }
@media (prefers-reduced-motion: reduce) { .nm-incident.is-live span { animation: none; } }
.nm-card__lead { margin: 4px 0 8px; font-size: 14px; line-height: 1.4; }
.nm-plain { margin: 2px 4px 10px; font-size: 16px; line-height: 1.4; font-weight: 500; }
.nm-detail:not(.nm-detail--street) .nm-dims b { font-size: 15px; }

/* Bus delays: a weekday hour by hour, busiest and quietest picked out. */
.nm-bars--hours { gap: 2px; height: 64px; margin: 8px 0 4px; padding-bottom: 14px; position: relative; }
.nm-bars--hours > div { flex: 1 1 0; min-width: 0; position: relative; }
.nm-bars--hours > div i { background: var(--nm-bar); border-radius: 2px 2px 0 0; }
.nm-bars--hours > div span { position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 0; }
.nm-bars--hours > div.is-slow i { background: #ff3b30; }
.nm-bars--hours > div.is-fast i { background: #34c759; }
.nm-bars--hours span { font-size: 9px; }
.nm-congtop { margin: 6px 0 10px; padding: 10px 12px; border-radius: 12px; background: var(--nm-cell); }
.nm-congtop__h { margin: 0 0 6px; font-weight: 600; font-size: 13px; }
.nm-congtop ol { margin: 0; padding-left: 18px; }
.nm-congtop li { margin: 4px 0; }
.nm-congtop button { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.nm-congtop button span { font-size: 12px; color: var(--nm-label-2); }
/* In view / Across the council (congestionTop), and the band's colour beside each road (its words say the figure). */
.nm-congtop__seg { margin: 0 0 8px; }
.nm-congtop .nm-congtop__seg button { display: block; text-align: center; overflow: hidden; text-overflow: ellipsis; }
.nm-congtop__note { margin: 2px 0; font-size: 13px; color: var(--nm-ink-2); }
.nm-congtop b small { font-weight: 500; color: var(--nm-ink-2); }
.nm-congtop__dot { display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 50%; box-shadow: 0 0 0 1.5px #fff; vertical-align: 0; }
/* A key swatch on a plate the colour of the base map (light in both themes), so the darker bus delay colours
   read on the dark panel as they do on the map. */
.nm-sw-plate { display: inline-flex; align-items: center; padding: 4px 3px; border-radius: 6px; background: #f2efe9; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, .15); }

/* Collision analysis: a row that opens a tool rather than a layer, and the
   signed-out panel. The tool's own styles load with it. */
/* The dates and hints are about closures and works, not collisions. */
body.nm-ca-panel .nm-when, body.nm-ca-panel #nmSummary { display: none; }
/* Collisions and Speeds have their own filters: no Now / Today bar or works hints. */
body.nm-mode-collisions .nm-when,
body.nm-mode-collisions #nmDates,
body.nm-mode-collisions #nmSummary, body.nm-mode-loads #nmSummary { display: none; }
.nm-collyears { display: grid; grid-template-columns: auto 1fr 1fr; align-items: center; gap: 8px; padding: 8px 12px; margin-bottom: 10px; border-radius: 14px; background: var(--nm-cell); font-size: 12px; color: var(--nm-label-2); }
.nm-collyears[hidden] { display: none; }
.nm-collyears b { font-size: 13px; font-weight: 600; color: var(--nm-label); }
.nm-collyears label { display: grid; gap: 3px; min-width: 0; }
.nm-collyears select { min-width: 0; width: 100%; border: 0; border-radius: 9px; padding: 7px 8px; background: var(--nm-fill); font-size: 16px; color: var(--nm-label); }
.nm-group--static { margin-top: 10px; }
.nm-capitch--card { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: var(--nm-cell); }
.nm-capitch--card h2 { margin-top: 0; font-size: 16px; }
.nm-capitch--card .nm-plain { margin-bottom: 12px; font-size: 13px; color: var(--nm-label-2); }

/* The mode dropdown is in the box at the top right (above, with the account chip). Not in an embed. */
.nm-embed .nm-modes { display: none; }
@media (max-width: 760px) {
  /* On a phone the ward pill is above the box (--nm-where-b). */
  .nm-where { bottom: var(--nm-where-b); }
  .leaflet-control-scale { display: none; }
}

/* "Loading…": top and centre of the screen, in one place (a card open moves it only to keep clear of
   the box beside the card, above). On a phone the panel runs across the top, so it sits just under it
   (the script keeps --nm-side-bottom up to date), and never under the notch while the panel is hidden.
   The script un-hides it the moment something starts, but draws it (is-shown) only once a load has
   taken 300ms, so a quick answer never flashes it (paintLoading in network-map.js). */
.nm-loading {
  position: fixed; z-index: 1065; display: flex; align-items: center; gap: 8px;
  left: 50%; transform: translateX(-50%);
  top: calc(var(--nm-gap) + var(--nm-safe-t) + 6px);
  padding: 8px 14px 8px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--nm-label);
  background: var(--nm-glass); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px);
  box-shadow: var(--nm-shadow); border: 0.5px solid var(--nm-edge); pointer-events: none;
  opacity: 0; visibility: hidden; transition: opacity .15s ease, visibility 0s linear .15s;
}
.nm-loading.is-shown { opacity: 1; visibility: visible; transition: opacity .15s ease, visibility 0s; }
.nm-loading__spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--nm-fill-2); border-top-color: var(--nm-blue); animation: nm-spin .7s linear infinite; }
@keyframes nm-spin { to { transform: rotate(360deg); } }
/* On a computer it stays in the middle of the screen whether or not a card is open. Only where the box
   at the top right would reach it (a narrow window, or the box moved beside a card) does it step left,
   along the same row, to stay clear of it: its middle is kept 69px (half the pill and 12px) from the
   box and from the panel. It never drops below the box: where the row has no room for the whole pill
   the script shows just its spinner there (body.nm-load-compact, below). */
@media (min-width: 1041px) {
  .nm-loading {
    --nm-load-l: calc(var(--nm-side-w) + var(--nm-gap) + 69px);
    --nm-load-r: calc(100vw - var(--nm-gap) - var(--nm-topbar-w, 160px) - 69px);
    left: max(var(--nm-load-l), min(50vw, var(--nm-load-r)));
    top: calc(var(--nm-gap) + var(--nm-safe-t) + 6px);
  }
}
/* Not at the middle of the screen (the panel, the ward pill beside it or the box would reach it):
   in the middle of the room between them, measured by the script (body.nm-load-aside,
   --nm-load-mid). No room there for the whole pill: just its spinner, still at the top (the words
   stay for screen readers; body.nm-load-compact). */
@media (min-width: 1041px) {
  body.nm-load-aside .nm-loading { left: var(--nm-load-mid, 50%); }
  body.nm-load-compact .nm-loading {
    left: var(--nm-load-mid, 50%); top: calc(var(--nm-gap) + var(--nm-safe-t) + 6px);
    padding: 9px; gap: 0; font-size: 0; line-height: 0;
  }
}
/* A tablet with a card open: the card covers the middle, so it sits in the middle of the map left of it. */
@media (min-width: 761px) and (max-width: 1040px) {
  body.nm-detail-open .nm-loading, body.nm-editing .nm-loading { left: calc((100vw - var(--nm-detail-w) - var(--nm-gap)) / 2); }
}
@media (max-width: 760px) { .nm-loading { left: 50%; top: max(calc(var(--nm-side-bottom, 118px) + 8px), calc(var(--nm-gap) + var(--nm-safe-t) + 6px)); } }
@media (prefers-reduced-motion: reduce) { .nm-loading, .nm-loading.is-shown { transition: none; } }
@media print { .nm-loading { display: none !important; } }

/* Your authority, or the wider map: a setting (Settings, Area shown), not something on the map. */
/* Beyond your authority: the pale veil over it and the shade under it go, so what is out there looks as it does
   inside (owner, 22 Oct 2026); the boundary's edge stays. */
body.nm-scope-wide .leaflet-nm-area-veil-pane, body.nm-scope-wide .nm-area-dim { display: none; }

/* Layers of figures Auroute generates: shown, locked until a council signs in. */
/* The switch is swapped for a lock and "Sign in"; the rest of the row is dimmed so it reads as
   not available yet, while the tag stays at full strength so it is plain what to do. */
.nm-cell.is-locked { cursor: pointer; }
.nm-cell.is-locked .nm-tile, .nm-cell.is-locked .nm-cell__text { opacity: 0.55; }
.nm-cell.is-locked .nm-switch { display: none; }
.nm-locktag { display: none; flex: none; align-items: center; gap: 5px; padding: 5px 10px 5px 8px; border-radius: 999px; background: rgba(0, 122, 255, 0.12); color: var(--nm-blue); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.nm-cell.is-locked .nm-locktag { display: inline-flex; }
.nm-locktag::before {
  content: ""; width: 13px; height: 13px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V8a5 5 0 0 1 10 0v2h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h1zm2 0h6V8a3 3 0 0 0-6 0v2z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V8a5 5 0 0 1 10 0v2h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h1zm2 0h6V8a3 3 0 0 0-6 0v2z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.nm-lock { margin: 12px 0 4px; padding: 12px 14px; border-radius: 14px; background: var(--nm-cell); }
.nm-lock b { font-size: 14px; }
.nm-lock p { margin: 4px 0 10px; font-size: 13px; color: var(--nm-label-2); }
.nm-cell--go { width: 100%; border: 0; background: none; text-align: left; font: inherit; color: inherit; }
.nm-chev { flex: none; width: 8px; height: 8px; margin-right: 4px; border-right: 2px solid var(--nm-label-3); border-bottom: 2px solid var(--nm-label-3); transform: rotate(-45deg); }
.nm-capitch { padding: 10px 4px; }
.nm-capitch h2 { margin: 8px 0 6px; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.nm-capitch .nm-plain { margin: 0 0 6px; }
.nm-capitch .nm-hint { margin: 0 0 14px; }
.nm-capitch__back { font-size: 15px; }
.nm-capitch .nm-btn--primary { display: inline-flex; text-decoration: none; }

/* A collision's vehicles: which way each went, numbered and coloured to match. */
.nm-moves-figure { display: grid; place-items: center; margin: 4px 0 10px; padding: 8px; border-radius: 14px; background: var(--nm-cell); }
.nm-vehicles li { align-items: flex-start; }
.nm-vref { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--c, #8e8e93); color: #fff; font-size: 12px; font-weight: 700; }
.nm-vehicles em + em { display: block; }

/* A street against streets like it: three bars on one scale. */
.nm-cmp { margin: 8px 0 6px; padding: 10px 12px 8px; border-radius: 12px; background: var(--nm-cell); }
.nm-cmp__row { display: grid; grid-template-columns: 104px 1fr 34px 62px; align-items: center; gap: 8px; margin: 3px 0; font-size: 13px; }
.nm-cmp__row i { display: block; height: 10px; border-radius: 5px; }
.nm-cmp__row i.is-obs { background: #ff3b30; }
.nm-cmp__row i.is-pred { background: var(--nm-bar); }
.nm-cmp__row i.is-eb { background: #ff9500; }
.nm-cmp__row b { text-align: right; font-variant-numeric: tabular-nums; }
/* (A year, beside the figure over the years recorded.) */
.nm-cmp__row small { font-size: 11.5px; color: var(--nm-label-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nm-cmp__note { margin: 4px 0 0; font-size: 11px; color: var(--nm-label-2); }
.nm-warn { color: var(--nm-red-ink); font-weight: 600; }
.nm-btn--wide { width: 100%; margin-top: 8px; }


/* ── small pieces shared by the map and its collision tool (nm-ui.js):
   the "i" that explains, styled dropdowns, a styled calendar */

.nm-i {
  display: inline-grid; place-items: center; vertical-align: middle;
  width: 17px; height: 17px; margin-left: 5px; padding: 0; flex: none;
  border: 0; border-radius: 50%; cursor: pointer;
  background: var(--nm-fill-2); color: var(--nm-label-2);
  font: italic 700 11px/1 Georgia, "Times New Roman", serif; letter-spacing: 0;
  text-transform: none;
}
.nm-i:hover, .nm-i[aria-expanded="true"] { background: var(--nm-btn-blue); color: #fff; }

.nm-pop {
  position: fixed; z-index: 3000; overflow: auto; max-width: min(340px, calc(100vw - 16px));
  background: var(--nm-pop);
  -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px);
  border: 0.5px solid var(--nm-sep); border-radius: 14px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22), 0 1px 3px rgba(0, 0, 0, 0.1);
  color: var(--nm-label); font-size: 14px; line-height: 1.4;
}
.nm-pop--info { padding: 12px 14px 4px; width: 320px; }
.nm-pop--info b { display: block; margin-bottom: 4px; font-size: 14px; }
.nm-pop--info p { margin: 0 0 9px; color: var(--nm-label-2); font-size: 13.5px; }

.nm-select { position: relative; display: block; min-width: 0; }
.nm-select__native, .nm-date__native { position: absolute !important; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.nm-select__btn, .nm-date__btn {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 38px; padding: 7px 10px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--nm-cell); color: var(--nm-label); font-size: 15px; text-align: left;
  box-shadow: inset 0 0 0 0.5px var(--nm-sep);
}
.nm-select__btn:hover, .nm-date__btn:hover { box-shadow: inset 0 0 0 1px var(--nm-fill-2); }
.nm-select__btn[aria-expanded="true"], .nm-date__btn[aria-expanded="true"] { box-shadow: inset 0 0 0 1.5px var(--nm-blue); }
.nm-select__label, .nm-date__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nm-date__label.is-empty { color: var(--nm-label-3); }
.nm-select__btn svg, .nm-date__btn svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--nm-label-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nm-select.is-disabled { opacity: 0.5; }
.nm-select.is-disabled .nm-select__btn { cursor: default; }

.nm-select__list { padding: 5px; min-width: 160px; }
.nm-select__opt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 9px;
  background: none; color: var(--nm-label); font-size: 15px; text-align: left; cursor: pointer;
}
.nm-select__opt:hover, .nm-select__opt.is-active { background: var(--nm-fill); }
.nm-select__opt.is-selected { color: var(--nm-blue); font-weight: 600; }
.nm-select__opt:disabled { opacity: 0.4; cursor: default; }
.nm-select__opt svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--nm-blue); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.nm-select__group { padding: 9px 10px 3px; color: var(--nm-label-2); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }

.nm-cal { padding: 10px; width: 292px; }
.nm-cal__head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 6px; }
.nm-cal__title { flex: 1; padding: 6px 8px; border: 0; border-radius: 9px; background: none; font-size: 15px; font-weight: 650; cursor: pointer; }
.nm-cal__title:hover { background: var(--nm-fill); }
.nm-cal__nav { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: var(--nm-fill); cursor: pointer; }
.nm-cal__nav svg { width: 16px; height: 16px; fill: none; stroke: var(--nm-label); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.nm-cal__dow, .nm-cal__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.nm-cal__dow span { padding: 4px 0; color: var(--nm-label-2); font-size: 11.5px; font-weight: 600; }
.nm-cal__days button, .nm-cal__months button { height: 34px; padding: 0; border: 0; border-radius: 50%; background: none; font-size: 14px; cursor: pointer; }
.nm-cal__days button:hover:not(:disabled), .nm-cal__months button:hover { background: var(--nm-fill); }
.nm-cal__days button:disabled { color: var(--nm-label-3); cursor: default; }
.nm-cal__days .is-today { color: var(--nm-blue); font-weight: 700; }
.nm-cal__days .is-selected, .nm-cal__months .is-selected { background: var(--nm-btn-blue) !important; color: #fff; font-weight: 650; }
.nm-cal__months { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.nm-cal__months button { border-radius: 10px; height: 42px; }
.nm-cal__foot { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 6px; border-top: 0.5px solid var(--nm-sep); }
.nm-cal__foot button { padding: 6px 8px; border: 0; background: none; color: var(--nm-blue); font-size: 14px; font-weight: 600; cursor: pointer; }
@media (max-width: 760px) { .nm-cal { width: min(320px, calc(100vw - 16px)); } }

/* Weather and forecast: a card at the bottom left of the map, for the middle of the view. */
.nm-weather {
  position: fixed; z-index: 1060; left: calc(var(--nm-side-w) + 2 * var(--nm-gap)); bottom: calc(34px + var(--nm-safe-b));
  width: 330px; max-width: calc(100vw - 2 * var(--nm-gap)); padding: 6px; border-radius: 20px;
  background: var(--nm-glass); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px);
  box-shadow: var(--nm-shadow); border: 0.5px solid var(--nm-edge);
}
.nm-weather:not(.is-open) { width: auto; }
.nm-weather__head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 4px 8px; border: 0; background: none; text-align: left; cursor: pointer; }
.nm-weather__icon { font-size: 26px; line-height: 1; }
.nm-weather__now { display: grid; line-height: 1.15; }
.nm-weather__now b { font-size: 20px; letter-spacing: -0.02em; }
.nm-weather__now small, .nm-weather__wind { font-size: 12.5px; color: var(--nm-label-2); }
.nm-weather__wind { margin-left: auto; white-space: nowrap; }
.nm-weather__chev { width: 7px; height: 7px; border-right: 2px solid var(--nm-label-3); border-bottom: 2px solid var(--nm-label-3); transform: rotate(45deg); margin: 0 4px 3px 2px; flex: none; }
.nm-weather.is-open .nm-weather__chev { transform: rotate(-135deg); margin-bottom: -2px; }
.nm-weather__frost { margin: 2px 8px 6px; padding: 5px 9px; border-radius: 9px; background: rgba(0, 122, 255, 0.12); color: var(--nm-blue-ink); font-size: 12.5px; font-weight: 600; }
.nm-weather__hours { display: flex; gap: 2px; overflow-x: auto; padding: 4px 4px 6px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.nm-weather__hours::-webkit-scrollbar { display: none; }
.nm-weather__h { display: grid; justify-items: center; gap: 2px; min-width: 50px; padding: 6px 2px; border-radius: 12px; font-size: 12px; }
.nm-weather__h span { color: var(--nm-label-2); }
.nm-weather__h em { font-style: normal; font-size: 19px; }
.nm-weather__h b { font-size: 14px; }
.nm-weather__h small { min-height: 14px; color: var(--nm-blue-ink); font-size: 11px; }
.nm-weather__days { display: grid; gap: 1px; margin: 0 4px; border-top: 0.5px solid var(--nm-sep); padding-top: 4px; }
.nm-weather__d { display: grid; grid-template-columns: 52px 30px 1fr 34px 34px; align-items: center; padding: 4px 6px; font-size: 13.5px; }
.nm-weather__d em { font-style: normal; font-size: 17px; }
.nm-weather__d small { color: var(--nm-blue-ink); font-size: 11.5px; }
.nm-weather__d b { text-align: right; }
.nm-weather__d i { text-align: right; font-style: normal; color: var(--nm-label-2); }
.nm-weather__credit { margin: 4px 8px 4px; font-size: 10.5px; color: var(--nm-label-3); }
@media (max-width: 760px) { .nm-weather { left: var(--nm-gap); bottom: var(--nm-stack-top); } }
body.nm-detail-open .nm-weather { display: none; }
@media print { .nm-weather { display: none !important; } }

/* Abnormal loads: the status key's counts, and the note when a long list is cut. */
.nm-subrow__text small { margin-left: 6px; color: var(--nm-label-2); font-size: 12px; }
#nmLoadsNote { margin: 8px 4px 0; }
#nmLoadsFit { width: 100%; margin-top: 10px; }

/* ── very narrow phones (360 and under): nothing may reach past the edge.
   The box at the bottom left shrinks the chip's name first (and under 480 shows only its icon). */
.nm-council .nm-account { min-width: 0; flex: 0 1 auto; }
@media (max-width: 760px) {
  body.nm-council-on .nm-where { max-width: calc(100vw - 2 * var(--nm-gap)); }
}
@media (max-width: 380px) {
  .nm-where { font-size: 12px; }
}
/* A phone on its side has little height above the box: the mode menu drops its one-line descriptions. */
@media (max-width: 760px) and (max-height: 400px) {
  .nm-modes__menu small { display: none; }
}

/* The four figure tiles in a card (vehicles, casualties, limit, severity): a
   word such as "Serious" must stay inside its tile on a narrow phone. */
.nm-dims div { min-width: 0; }
.nm-dims b { overflow-wrap: anywhere; }
@media (max-width: 420px) {
  .nm-detail--street .nm-dims b { font-size: 17px; }
  .nm-dims span { font-size: 10.5px; }
}

/* Tablets in portrait (761 to 1040 wide): the side panel and the card are each
   a column, and together they leave no map. While a card (or the editor) is
   open it has the screen, as it does on a phone; closing it brings the panel
   back, and the box with the mode dropdown and the chip steps aside too. */
@media (min-width: 761px) and (max-width: 1040px) {
  body.nm-detail-open .nm-side, body.nm-editing .nm-side,
  body.nm-detail-open .nm-topbar, body.nm-editing .nm-topbar,
  body.nm-detail-open .nm-where, body.nm-editing .nm-where { display: none; }
  body.nm-detail-open .leaflet-bottom.leaflet-left, body.nm-editing .leaflet-bottom.leaflet-left { left: var(--nm-gap); }
}

/* Words for search engines and screen readers that are not drawn. */
.nm-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* The data-sources link in the credits is underlined, not told apart by colour alone. */
.leaflet-control-attribution a[href*="auroute.uk/data"] { text-decoration: underline; text-underline-offset: 2px; }
/* One line, the rest under "…" until it is pointed at or tapped, as Esri's own map library shows its credit (owner,
   24 Oct 2026: the licence text "still super long"): Sources and licences first, so it is always in sight. */
.leaflet-control-attribution { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: min(520px, calc(100vw - 24px)); }
.leaflet-control-attribution:hover, .leaflet-control-attribution:focus-within, .leaflet-control-attribution:active { white-space: normal; overflow: visible; }
/* A street card's section 58, in its colour. */
.nm-along__s58 { color: #7c3aed; font-weight: 600; }
html[data-theme="dark"] .nm-along__s58 { color: #b392ff; }

/* Abnormal loads: the page that goes through routes one by one. The routes are a
   list (not all drawn on the map), and the layer switch under it is not offered. */
.nm-cell--quiet { display: none !important; }
.nm-plain--tight { margin: 0 4px 10px; }
.nm-queue { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
.nm-queue li { margin: 0; }
.nm-queue .nm-row { width: 100%; }
#nmLoadsAssess:disabled { opacity: .5; cursor: default; }

/* ── Dark theme ───────────────────────────────────────────────────────────
   Light, Dark or Auto is chosen with the cog on the map (and in the dashboard's
   settings); theme.js puts data-theme="dark" on <html>. The same layout in
   Apple's dark system colours: tokens first, then the few rules that painted a
   literal light colour. Screen only, so a printout stays black on white. */
@media screen {
  html[data-theme="dark"] {
    color-scheme: dark;
    --nm-label: #f5f5f7;
    --nm-label-2: rgba(235, 235, 245, 0.66);
    --nm-label-3: rgba(235, 235, 245, 0.38);
    --nm-sep: rgba(255, 255, 255, 0.14);
    --nm-fill: rgba(118, 118, 128, 0.28);
    --nm-fill-2: rgba(118, 118, 128, 0.4);
    --nm-glass: rgba(28, 28, 30, 0.8);
    --nm-cell: rgba(255, 255, 255, 0.07);
    --nm-ground: #000000;
    --nm-blue: #0a84ff;
    --nm-red: #ff453a;
    --nm-orange: #ff9f0a;
    --nm-yellow: #ffd60a;
    --nm-green: #30d158;
    --nm-indigo: #5e5ce6;
    --nm-purple: #bf5af2;
    --nm-grey: #98989d;
    --nm-shadow: 0 10px 40px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.4);
    --nm-surface: #2c2c2e;
    --nm-pop: rgba(44, 44, 46, 0.97);
    --nm-seg-on: #636366;
    --nm-attr: rgba(28, 28, 30, 0.75);
    --nm-edge: rgba(255, 255, 255, 0.12);
    --nm-mapbg: #e8e8ed;   /* the map stays the light one in the dark theme */
    --nm-switch-off: rgba(120, 120, 128, 0.36);
    --nm-bar: #48484a;
    --nm-muted: rgba(235, 235, 245, 0.62);
    --nm-red-ink: #ff6961;
    --nm-blue-ink: #64b5ff;
    --nm-orange-ink: #ffb340;
    --nm-green-ink: #32d74b;
    --nm-indigo-ink: #9d9bff;
    --nm-ink-2: #d1d1d6;   /* (4.5:1 on the glass over the map at its whitest too) */
    --nm-tilebg: #232325;
    --nm-tile-edge: rgba(255, 255, 255, 0.08);
    --nm-glyph-off: #aeaeb2;
    --nm-glyphbg-off: rgba(118, 118, 128, 0.32);
    --nm-chip-on: #12355c;
    --nm-onbar: #16304d;
    --nm-btn-blue: #0062cc;
    --nm-link: #7cc0ff;
  }
  html[data-theme="dark"] :focus-visible { outline-color: rgba(10, 132, 255, 0.7); }
  /* A collision's direction drawing on a dark card (on the map, which stays light, it keeps its white edge). */
  html[data-theme="dark"] .nm-moves-figure .nm-moves__edge { stroke: #2c2c2e; }
  html[data-theme="dark"] .nm-moves-figure .nm-moves__ring { stroke: rgba(235, 235, 245, 0.22); }
  html[data-theme="dark"] .nm-moves-figure .nm-moves__n { fill: rgba(235, 235, 245, 0.6); }
  /* (21 Oct 2026) Its arrows in the streets' lighter teal there: the deep teal they are on white is under 3:1 on the dark card, this is 5.4:1. */
  html[data-theme="dark"] .nm-moves-figure .nm-moves__ink { stroke: #30b0c7; }
  html[data-theme="dark"] .nm-moves-figure .nm-moves__head { fill: #30b0c7; }
  html[data-theme="dark"] .leaflet-control-attribution a { color: var(--nm-blue-ink); }
  html[data-theme="dark"] .nm-card-pop .leaflet-popup-content-wrapper { box-shadow: 0 12px 40px rgba(0, 0, 0, .6), 0 1px 3px rgba(0, 0, 0, .4), 0 0 0 .5px rgba(255, 255, 255, .12); }
}


/* ── the left panel's arrow: closes the panel to the edge and opens it again (a computer; a phone has the
   Filters button). The things beside the panel sit in from --nm-side-w, which is 0 while it is closed. */

.nm-sidetoggle {
  position: fixed; z-index: 1110;
  top: calc(var(--nm-gap) + var(--nm-safe-t) + 22px);
  left: calc(var(--nm-gap) + var(--nm-panel-w) - 1px);
  width: 26px; height: 54px; padding: 0; border: 0; border-radius: 0 14px 14px 0; cursor: pointer;
  display: grid; place-items: center; color: var(--nm-label-2);
  background: var(--nm-glass); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px);
  box-shadow: var(--nm-shadow); border: 0.5px solid var(--nm-edge); border-left: 0;
  transition: left .22s ease, color .15s;
}
.nm-sidetoggle:hover { color: var(--nm-label); }
.nm-sidetoggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .22s ease; }
body.nm-side-closed .nm-sidetoggle { left: 0; padding-right: 2px; }
body.nm-side-closed .nm-sidetoggle svg { transform: rotate(180deg); }
.nm-side { transition: transform .22s ease, visibility 0s; }
body.nm-side-closed .nm-side { transform: translateX(calc(-100% - 2 * var(--nm-gap))); visibility: hidden; transition: transform .22s ease, visibility 0s linear .22s; }
body.nm-side-closed { --nm-side-w: 0px; }
@media (max-width: 760px) {
  .nm-sidetoggle { display: none; }
  body.nm-side-closed { --nm-side-w: var(--nm-panel-w); }
  body.nm-side-closed .nm-side { transform: none; visibility: visible; }
}
/* On a computer the arrow stays while a card or the TTRO panel is open (owner, 18 Oct 2026: a laptop was
   crowded and the panel could not be closed then). A tablet's card or editor hides the panel itself. */
body.nm-assessing .nm-sidetoggle { display: none; }
@media (min-width: 761px) and (max-width: 1040px) {
  body.nm-detail-open .nm-sidetoggle, body.nm-editing .nm-sidetoggle { display: none; }
}
/* The filters folded away (only the search showing): the arrow fits the short panel. */
@media (min-width: 761px) {
  .nm-side:not(.has-panel) ~ .nm-sidetoggle { top: calc(var(--nm-gap) + var(--nm-safe-t) + 12px); height: 42px; }
}
.nm-embed .nm-sidetoggle { display: none; }
@media (prefers-reduced-motion: reduce) { .nm-side, .nm-sidetoggle, .nm-sidetoggle svg { transition: none; } }

/* ── Choose your filters (#nmSettings): a card over the map (a sheet from the bottom on a phone). It was the map's
   Settings sheet until 20 Oct 2026 (see the block on the map's own choices at the end of this file). */

.nm-settings { position: fixed; inset: 0; z-index: 2600; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, 0.32); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.nm-settings[hidden] { display: none; }
.nm-settings__card {
  width: min(520px, 100%); max-height: min(680px, calc(100dvh - 32px)); overflow: auto; overscroll-behavior: contain;
  padding: 0 0 8px; border-radius: 22px; background: var(--nm-pop); color: var(--nm-label);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35), 0 0 0 0.5px var(--nm-edge);
}
.nm-settings__head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 16px 12px 10px 20px; background: var(--nm-pop); }
.nm-settings__head h2 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.nm-settings__x { width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--nm-fill); color: var(--nm-label-2); font-size: 20px; line-height: 1; cursor: pointer; }
.nm-settings__x:hover { background: var(--nm-fill-2); color: var(--nm-label); }
.nm-set { padding: 4px 16px 6px; }
.nm-set h3 { margin: 12px 6px 6px; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--nm-label-2); }
.nm-set__list { border-radius: 14px; background: var(--nm-cell); overflow: hidden; }
.nm-set__row { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 52px; padding: 10px 14px; position: relative; }
.nm-set__row + .nm-set__row { border-top: 0.5px solid var(--nm-sep); }
.nm-set__row > span:first-child { min-width: 0; display: grid; gap: 1px; }
.nm-set__row b { font-size: 15px; font-weight: 600; }
.nm-set__row small { font-size: 12.5px; color: var(--nm-label-2); line-height: 1.3; }
.nm-set__row input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.nm-set__row input:checked + .nm-switch { background: var(--nm-green); }
.nm-set__row input:checked + .nm-switch::after { transform: translateX(20px); }
.nm-set__row input:focus-visible + .nm-switch { outline: 3px solid rgba(0, 122, 255, 0.5); outline-offset: 2px; }
.nm-set__row--stack { display: grid; gap: 8px; }
.nm-set__row .theme-seg { width: 100%; }
.nm-set__row .nm-seg { width: 100%; }
.nm-set__row .nm-seg button { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nm-set a.nm-set__row, .nm-set button.nm-set__row { width: 100%; border: 0; background: none; text-align: left; color: var(--nm-label); text-decoration: none; cursor: pointer; font-size: 15px; }
.nm-set a.nm-set__row:hover, .nm-set button.nm-set__row:hover { background: var(--nm-fill); }
.nm-set__row.is-danger { color: var(--nm-red); }
.nm-set__row .chev { color: var(--nm-label-3); font-size: 18px; }
.nm-set__note { margin: 8px 8px 2px; font-size: 12.5px; color: var(--nm-label-2); }
@media (max-width: 760px) {
  .nm-settings { padding: 0; place-items: end center; }
  .nm-settings__card { width: 100%; max-height: min(86dvh, 86vh); border-radius: 22px 22px 0 0; padding-bottom: calc(10px + var(--nm-safe-b)); }
}

/* ── Filters switched off in Settings (owner, 19 Oct 2026; Settings > Choose your filters, filterHide in network-map.js).
   A switched-off tile goes from the panel, and so does a section, or a mode's group with its heading, left with none
   (nm-hidegroup, set by the script, which knows which tiles an account has). A mode whose every tile is switched off
   keeps only its sign-in card and its note. The note at the foot of each mode's filters says what is switched off,
   with Change, only on a page without Choose your filters' row under Map (21 Oct 2026: the row's summary says it);
   with the row, it shows only in a mode whose every tile is switched off. The Settings page itself: a back button,
   the title in the middle, a switch per tile with its picture. */
#nmLayers .nm-cell.is-unwanted, #nmLayers .nm-hidegroup { display: none !important; }
#nmLayers [data-mode-panel].nm-allhidden > :not(.nm-capitch):not(.nm-hidenote) { display: none !important; }
/* (Wide tiles, two a row: with some switched off, the last one showing spans the row when it is alone in it.) */
#nmLayers .nm-grid--wide.nm-hide-some > .nm-cell:last-child:nth-child(odd) { grid-column: auto; }
#nmLayers .nm-grid--wide.nm-hide-some > .nm-cell.nm-cell.nm-wide-odd { grid-column: 1 / -1; }
/* (Nor the "Nothing on · tap a tile" line, with no tile to tap.) */
#nmLayers:has(> [data-mode-panel].nm-allhidden:not([hidden])) > .nm-onbar { display: none; }
.nm-hidenote { margin: 16px 2px 4px; font-size: 13px; line-height: 1.4; color: var(--nm-ink-2); }
.nm-hidenote[hidden] { display: none; }
.nm-hidenote .nm-linkbtn { font-weight: 600; }
.nm-settings__head--sub { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; padding-left: 10px; }
.nm-settings__head--sub h2 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; text-align: center; }
.nm-settings__head--sub .nm-settings__x { justify-self: end; }
.nm-settings__back {
  justify-self: start; display: inline-flex; align-items: center; gap: 1px; min-height: 36px; padding: 4px 10px 4px 2px;
  border: 0; border-radius: 10px; background: none; color: var(--nm-link); font: inherit; font-size: 15px; font-weight: 500; cursor: pointer;
}
.nm-settings__back svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.nm-settings__back:hover { background: var(--nm-fill); }
.nm-settings__back:focus-visible { outline: 3px solid rgba(0, 122, 255, 0.5); outline-offset: 1px; }
.nm-set__intro { margin: 2px 24px 4px; line-height: 1.4; }
.nm-set__all { margin: 8px 24px 0; }
.nm-set__all[hidden] { display: none; }
.nm-set__row--layer { justify-content: flex-start; gap: 12px; min-height: 48px; padding: 8px 14px 8px 10px; cursor: pointer; }
.nm-set__row--layer .nm-set__name { flex: 1 1 auto; min-width: 0; }
.nm-set__row--layer .nm-set__name b { font-size: 15px; font-weight: 500; }
.nm-set__tile { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--tile, #8e8e93); }
.nm-set__tile svg { width: 19px; height: 19px; }
@media (hover: hover) { .nm-set__row--layer:hover { background: var(--nm-fill); } }
@media (forced-colors: active) { .nm-set__tile { border: 1px solid CanvasText; } }
body.nm-where-off .nm-where { display: none !important; }
.nm-cog__btn { display: flex; padding: 3px; border: 0; border-radius: 999px; background: none; cursor: pointer; }
.nm-cog__btn:hover { background: var(--nm-fill); }
.nm-cog__btn svg { width: 30px; height: 30px; flex: none; padding: 6px; border-radius: 50%; background: var(--nm-fill); fill: none; stroke: var(--nm-label); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.nm-notrans .nm-side, body.nm-notrans .nm-sidetoggle, body.nm-notrans .nm-sidetoggle svg { transition: none !important; }


/* ── Layers panel: the control grid (owner, 12 Oct 2026)
   Every layer is a tile, and one tap turns it on or off. The tile is the <label> round the
   layer's hidden checkbox, so its state is the checkbox's own (read out by a screen reader;
   Space on a focused tile). On: filled with the layer's colour (--tile-on: network-map.js
   moves its lightness until white words on it read at 4.8:1 and it stands 3:1 clear of an
   off tile in the dark theme), white glyph and words.
   Off: a plain tile with a grey glyph. The four closures and works layers (and Speeds' and
   Collisions') are wide tiles with their count; the rest are small, four to a row, with a
   count badge on the glyph while on. A › opens the layer's options page (#nmOpts) in place
   of the tiles. Every small word here is --nm-label or --nm-ink-2 (4.5:1 or more, light and
   dark), so the old panel's faint counts are gone. Only #nmLayers: the collision tool's
   panel (#nmCaPanel) and Settings keep the list rows above. */

#nmLayers .nm-group { margin: 18px 2px 8px; font-size: 13.5px; font-weight: 600; letter-spacing: -0.005em; text-transform: none; color: var(--nm-label); }
#nmLayers .nm-group:first-child { margin-top: 12px; }

/* What is on, in one line, with Clear. */
.nm-onbar { display: flex; align-items: center; gap: 8px; min-height: 36px; margin: 10px 0 0; padding: 4px 4px 4px 12px; border-radius: 12px; background: var(--nm-onbar); color: var(--nm-label); font-size: 13px; }
.nm-onbar__text { flex: 1; display: flex; min-width: 0; margin: 0; white-space: nowrap; }
.nm-onbar__text b { flex: none; font-weight: 700; color: var(--nm-link); }
.nm-onbar__text span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: pre; }
.nm-onbar button { flex: none; min-height: 28px; padding: 4px 10px; border: 0; border-radius: 8px; background: none; color: var(--nm-link); font-size: 13px; font-weight: 600; cursor: pointer; }
.nm-onbar button:hover { background: var(--nm-fill); }
.nm-onbar button[hidden] { display: none; }
body.nm-mode-loads .nm-onbar { display: none; }

#nmLayers .nm-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; background: none; border-radius: 0; overflow: visible; }
#nmLayers .nm-grid--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* An odd one out at the end of a wide grid takes the whole row. */
#nmLayers .nm-grid--wide > .nm-cell:last-child:nth-child(odd) { grid-column: 1 / -1; }

.nm-grid > .nm-cell {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  min-width: 0; min-height: 80px; padding: 8px 7px; border-radius: 14px;
  background: var(--nm-tilebg); box-shadow: inset 0 0 0 0.5px var(--nm-tile-edge), 0 1px 2px rgba(0, 0, 0, 0.05);
  color: var(--nm-label); cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: background-color .15s, transform .12s;
}
.nm-grid > .nm-cell::before { content: none; }
.nm-grid > .nm-cell:active { transform: scale(0.97); }
.nm-grid > .nm-cell:has(input:checked):not(.is-locked) { background: var(--tile-on, var(--tile)); color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.nm-grid > .nm-cell:has(input:focus-visible) { outline: 3px solid rgba(0, 122, 255, 0.6); outline-offset: 2px; }
/* (The hidden checkbox covers the whole tile, so Tab to a tile at the panel's edge scrolls all of it into view.) */
.nm-grid > .nm-cell > input[data-layer] { inset: 0; width: 100%; height: 100%; margin: 0; }
.nm-grid > .nm-cell > .nm-switch { display: none; }

.nm-grid > .nm-cell .nm-tile { position: relative; width: 30px; height: 30px; border-radius: 9px; background: var(--nm-glyphbg-off); }
.nm-grid > .nm-cell .nm-tile svg { width: 19px; height: 19px; }
.nm-grid > .nm-cell .nm-tile svg [stroke="#fff"] { stroke: var(--nm-glyph-off); }
.nm-grid > .nm-cell .nm-tile svg [fill="#fff"] { fill: var(--nm-glyph-off); }
.nm-grid > .nm-cell:has(input:checked):not(.is-locked) .nm-tile { background: rgba(255, 255, 255, 0.2); }
.nm-grid > .nm-cell:has(input:checked):not(.is-locked) .nm-tile svg [stroke="#fff"] { stroke: #fff; }
.nm-grid > .nm-cell:has(input:checked):not(.is-locked) .nm-tile svg [fill="#fff"] { fill: #fff; }

/* A small tile: the short name (two lines; never cut short: with wider letter and line spacing,
   WCAG 1.4.12, it takes a third and the row grows); its count is read out, not shown (the badge is). */
.nm-grid > .nm-cell .nm-cell__text { flex: none; width: 100%; font-size: 11.5px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; overflow-wrap: break-word; }
.nm-grid:not(.nm-grid--wide) .nm-cell__text small { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
/* A wide tile: the full name and the count line. */
.nm-grid--wide > .nm-cell { min-height: 92px; padding: 10px 10px 10px 11px; gap: 7px; }
.nm-grid--wide > .nm-cell .nm-cell__text { display: block; font-size: 13.5px; line-height: 1.22; letter-spacing: -0.015em; -webkit-line-clamp: none; }
.nm-grid--wide > .nm-cell .nm-cell__text small { display: block; margin-top: 3px; font-size: 12px; font-weight: 500; line-height: 1.25; letter-spacing: 0; color: var(--nm-ink-2); }
.nm-grid--wide > .nm-cell:has(input:checked):not(.is-locked) .nm-cell__text small { color: #fff; }

/* The count badge on a small tile's glyph, while its layer is on and has something in view. */
.nm-badge { position: absolute; top: -6px; right: -10px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #fff; color: var(--tile-on, var(--nm-label)); font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; letter-spacing: 0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); }
.nm-badge[hidden] { display: none; }

/* The › to the layer's options page: always on a wide tile, on a small one while its layer is on. */
.nm-grid > .nm-cell .nm-disclose { position: absolute; top: 6px; right: 5px; width: 26px; height: 26px; margin: 0; border-radius: 50%; background: var(--nm-glyphbg-off); color: var(--nm-label); }
.nm-grid--wide > .nm-cell .nm-disclose { top: 9px; right: 9px; width: 30px; height: 30px; }
.nm-grid > .nm-cell .nm-disclose svg { width: 16px; height: 16px; stroke-width: 2.6; transition: none; }
.nm-grid > .nm-cell .nm-disclose:hover { background: var(--nm-fill-2); color: var(--nm-label); }
.nm-grid > .nm-cell:has(input:checked):not(.is-locked) .nm-disclose { background: rgba(255, 255, 255, 0.24); color: #fff; }
.nm-grid > .nm-cell:has(input:checked):not(.is-locked) .nm-disclose:hover { background: rgba(255, 255, 255, 0.36); }
.nm-grid:not(.nm-grid--wide) > .nm-cell:not(:has(input:checked)) .nm-disclose { display: none; }
.nm-grid > .nm-cell .nm-disclose:focus-visible { outline: 3px solid rgba(0, 122, 255, 0.6); outline-offset: 1px; }

/* Locked (sign in, or not in the plan): a plain tile at full strength, and its tag. */
.nm-grid > .nm-cell.is-locked .nm-tile, .nm-grid > .nm-cell.is-locked .nm-cell__text { opacity: 1; }
.nm-grid > .nm-cell.is-locked .nm-tile { background: var(--nm-glyphbg-off); }
.nm-grid > .nm-cell.is-locked .nm-locktag { margin-top: auto; padding: 3px 8px 3px 6px; gap: 4px; background: rgba(0, 122, 255, 0.1); color: var(--nm-link); font-size: 11.5px; }
.nm-grid > .nm-cell.is-locked .nm-locktag::before { width: 11px; height: 11px; }
.nm-grid--wide > .nm-cell.is-locked .nm-locktag { position: absolute; top: 10px; right: 9px; margin: 0; }
.nm-locktag:focus-visible { outline: 3px solid rgba(0, 122, 255, 0.6); outline-offset: 2px; }

/* Check an area (#nmAreaBtn): a card at the top of the filters, under the search, on a phone too (owner, 19 Oct 2026:
   "make it so area seatch is back at the top of the filters instead of the bottom"; it sat above Map from 14 Oct; not
   in the top-right box). Outside the mode panels, so it is hidden here in the other modes, as it was inside Network's.
   Signed in only (data-signed-in-only); not in an embed or an assessment. Filled blue while the check, or picking its
   middle, is on. White on --nm-btn-blue is 5.8:1. */
.nm-areacard {
  display: flex; align-items: center; gap: 11px; width: 100%; min-height: 58px; margin: 10px 0 0; padding: 9px 10px 9px 11px;
  border: 0; border-radius: 14px; background: var(--nm-tilebg); box-shadow: inset 0 0 0 0.5px var(--nm-tile-edge), 0 1px 2px rgba(0, 0, 0, 0.05);
  color: var(--nm-label); font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color .15s, transform .12s;
}
.nm-areacard[hidden] { display: none; }
.nm-areacard:active { transform: scale(0.98); }
.nm-areacard__icon { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--nm-btn-blue); }
.nm-areacard__icon svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.nm-areacard__icon svg circle + circle { fill: #fff; stroke: none; }
.nm-areacard__text { flex: 1 1 auto; min-width: 0; }
.nm-areacard__text b { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; }
.nm-areacard__text small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.3; color: var(--nm-ink-2); }
.nm-areacard__go { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--nm-ink-2); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .nm-areacard:hover { background: color-mix(in srgb, var(--nm-tilebg) 90%, var(--nm-btn-blue)); } }
.nm-areacard[aria-pressed="true"] { background: var(--nm-btn-blue); color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.nm-areacard[aria-pressed="true"] .nm-areacard__icon { background: rgba(255, 255, 255, 0.2); }
.nm-areacard[aria-pressed="true"] .nm-areacard__text small { color: #fff; }
.nm-areacard[aria-pressed="true"] .nm-areacard__go { stroke: #fff; }
.nm-areacard:focus-visible { outline: 3px solid rgba(0, 122, 255, 0.6); outline-offset: 2px; }
.nm-embed .nm-areacard, body.nm-assessing .nm-areacard,
body.nm-mode-collisions .nm-areacard, body.nm-mode-loads .nm-areacard,
body.nm-mode-structures .nm-areacard, body.nm-mode-approvals .nm-areacard { display: none; }
/* Structures and Route approvals are always the council's own (owner, 24 Oct 2026): no Choose your filters there either
   (their layers are not in it: HIDE_NEVER), as no Area shown (paintScope) or Check an area. */
body.nm-mode-structures #nmMapPrefs [data-hide-open], body.nm-mode-approvals #nmMapPrefs [data-hide-open] { display: none; }
/* Nor the line of what is on with Clear: each has two tiles, which say it themselves (owner, 24 Oct 2026: "2 on on
   structures and route approvals is pointless considering we only have 2 filters on each"). */
body.nm-mode-structures #nmOnBar, body.nm-mode-approvals #nmOnBar { display: none; }
@media (forced-colors: active) { .nm-areacard { border: 1px solid CanvasText; } .nm-areacard[aria-pressed="true"] { background: Highlight; color: HighlightText; } }

/* A link turned this layer on: it glows for a moment. */
.nm-grid > .nm-cell.is-linked { animation: nm-linked 2.4s ease-out; }
@keyframes nm-linked { 0%, 55% { box-shadow: 0 0 0 3px var(--nm-blue); } 100% { box-shadow: 0 0 0 3px transparent; } }

/* Narrow phones (374px and under): three small tiles to a row, since four left the count badge
   touching the › and the "Sign in" tag running over the tile's edge; and a locked wide tile's tag
   goes under its name, clear of the glyph. (Never wider than the screen.) */
@media (max-width: 374px) {
  #nmLayers .nm-grid:not(.nm-grid--wide) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nm-grid--wide > .nm-cell.is-locked .nm-locktag { position: static; margin-top: auto; }
}
/* Windows High Contrast (forced colours) drops the fills: every tile gets an edge, and an "on"
   one the system's highlight, so on and off still differ. */
@media (forced-colors: active) {
  .nm-grid > .nm-cell { border: 1px solid CanvasText; }
  .nm-grid > .nm-cell:has(input:checked):not(.is-locked) { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
  .nm-grid > .nm-cell:has(input:checked):not(.is-locked) .nm-tile,
  .nm-grid > .nm-cell:has(input:checked):not(.is-locked) .nm-disclose { background: transparent; color: HighlightText; }
  .nm-grid > .nm-cell:has(input:checked):not(.is-locked) .nm-tile svg [stroke="#fff"] { stroke: HighlightText; }
  .nm-grid > .nm-cell:has(input:checked):not(.is-locked) .nm-tile svg [fill="#fff"] { fill: HighlightText; }
  .nm-grid > .nm-cell:has(input:checked):not(.is-locked) .nm-cell__text small { color: HighlightText; }
  .nm-grid > .nm-cell:has(input:checked):not(.is-locked) .nm-badge { background: HighlightText; color: Highlight; box-shadow: none; }
  .nm-grid > .nm-cell:has(input:focus-visible) { outline-color: CanvasText; }
}
@media (prefers-reduced-motion: reduce) {
  .nm-grid > .nm-cell { transition: none; }
  .nm-grid > .nm-cell:active { transform: none; }
  .nm-grid > .nm-cell.is-linked { animation: none; box-shadow: 0 0 0 3px var(--nm-blue); }
}

/* ── the sections fold (owner, 13 Oct 2026): each heading is a button over its tiles, with a
   chevron (up while open, down while folded, so it is not mistaken for a tile's ›) and, folded,
   how many of its layers are on. The text sits where the plain heading's did. */
#nmLayers .nm-fold > .nm-fold__head { margin: 12px 0 4px; }
#nmLayers .nm-fold:first-child > .nm-fold__head { margin-top: 8px; }
.nm-fold__btn {
  display: flex; align-items: center; gap: 8px; width: calc(100% + 12px); min-height: 36px; margin: 0 -6px; padding: 5px 8px;
  border: 0; border-radius: 10px; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-align: left;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
/* (Not on a touch screen, where a tapped heading would stay lit as if picked. The tile's own
   ground, not a grey fill: the blue "N on" stays at 4.5:1 on it in dark too.) */
@media (hover: hover) { .nm-fold__btn:hover { background: var(--nm-tilebg); } }
.nm-fold__btn:focus-visible { outline: 3px solid rgba(0, 122, 255, 0.6); outline-offset: 0; }
.nm-fold__t { flex: 1 1 auto; min-width: 0; }
.nm-fold__n { flex: none; font-size: 12.5px; font-weight: 600; color: var(--nm-link); white-space: nowrap; }
.nm-fold__n:empty { display: none; }
.nm-fold__btn svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--nm-ink-2); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transform: rotate(180deg); transition: transform .2s; }
.nm-fold.is-folded .nm-fold__btn svg { transform: none; }
.nm-fold__body[hidden] { display: none; }
@media (forced-colors: active) { .nm-fold__btn svg { stroke: CanvasText; } .nm-fold__btn:focus-visible { outline-color: CanvasText; } }
@media (prefers-reduced-motion: reduce) { .nm-fold__btn svg { transition: none; } }

/* The dates (Now, Today, 7 days, 30 days, pick dates), at the top of Closures and works: they
   decide which orders, their diversions and works are shown, and nothing else on the map. */
/* The dates, under the search (26 Oct 2026; in the Closures and works fold from 13 Oct): the panel's own gap spaces them. */
.nm-side > .nm-when { margin: 0; }
.nm-side > .nm-dates { margin: -2px 0 0; }
.nm-side > .nm-dates label { color: var(--nm-ink-2); }
.nm-when__note { margin: -4px 4px 0; font-size: 12.5px; color: var(--nm-ink-2); }
.nm-when__note[hidden] { display: none; }

/* ── a layer's options page: in place of the tiles (and the "on" line and the map block) */
#nmLayers.is-opts > :not(#nmOpts) { display: none !important; }
.nm-opts { padding: 6px 0 8px; }
.nm-opts__back { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; margin: 4px 0 2px -6px; padding: 6px 10px 6px 8px; border: 0; border-radius: 10px; background: none; color: var(--nm-link); font-size: 15px; font-weight: 600; cursor: pointer; }
.nm-opts__back::before { content: ""; width: 9px; height: 9px; margin: 0 1px 0 4px; border-left: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg); }
.nm-opts__back:hover { background: var(--nm-fill); }
.nm-opts__head { display: flex; align-items: center; gap: 12px; margin: 6px 2px 12px; }
.nm-opts__head .nm-tile { width: 42px; height: 42px; border-radius: 12px; background: var(--tile-on, var(--tile, var(--nm-grey))); }
.nm-opts__head .nm-tile svg { width: 25px; height: 25px; }
.nm-opts__name { min-width: 0; }
.nm-opts__title { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: var(--nm-label); }
.nm-opts__title:focus { outline: none; }
.nm-opts__title:focus-visible { outline: 3px solid rgba(0, 122, 255, 0.6); outline-offset: 2px; border-radius: 4px; }
.nm-opts__count { margin: 3px 0 0; font-size: 13px; color: var(--nm-ink-2); }
.nm-opts__about { margin: -4px 2px 12px; font-size: 13px; color: var(--nm-ink-2); }
.nm-opts__list { border-radius: 14px; background: var(--nm-tilebg); box-shadow: inset 0 0 0 0.5px var(--nm-tile-edge); overflow: hidden; }
.nm-opts__row { position: relative; display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 9px 12px 9px 14px; cursor: pointer; }
.nm-opts__row + .nm-opts__row::before { content: ""; position: absolute; top: 0; left: 14px; right: 0; border-top: 0.5px solid var(--nm-sep); }
.nm-opts__row[hidden] { display: none; }
.nm-opts__row > span:first-child { flex: 1; min-width: 0; display: grid; gap: 2px; }
.nm-opts__row b { font-size: 15px; font-weight: 600; color: var(--nm-label); }
.nm-opts__row small { font-size: 12.5px; line-height: 1.3; color: var(--nm-ink-2); }
.nm-opts__row input { position: absolute; opacity: 0; pointer-events: none; }
.nm-opts__row input:checked + .nm-switch { background: var(--nm-green); }
.nm-opts__row input:checked + .nm-switch::after { transform: translateX(20px); }
.nm-opts__row input:focus-visible + .nm-switch { outline: 3px solid rgba(0, 122, 255, 0.6); outline-offset: 2px; }
.nm-opts__kindhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 18px 2px 8px; }
.nm-opts__kindhead[hidden] { display: none; }
#nmLayers .nm-opts__kindhead .nm-group { margin: 0; }
.nm-opts__allnone { display: flex; gap: 2px; flex: none; }
.nm-opts__allnone[hidden] { display: none; }
.nm-opts__allnone button { min-height: 30px; padding: 4px 10px; border: 0; border-radius: 8px; background: none; color: var(--nm-link); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.nm-opts__allnone button:hover { background: var(--nm-fill); }
.nm-opts__empty, .nm-opts__note { margin: 10px 2px 0; font-size: 13px; line-height: 1.35; color: var(--nm-ink-2); }
.nm-opts__note b { color: var(--nm-label); }
#nmLayers .nm-opts__org .nm-group { margin-top: 18px; margin-bottom: 4px; }
.nm-opts__org .nm-opts__note { margin-top: 0; }
.nm-opts__when { margin: -6px 2px 12px; }
.nm-opts__when[hidden] { display: none; }

/* The kinds, as chips that wrap: a tick, the kind's picture, its name. */
#nmOpts .nm-subkey { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; border: 0; background: none; }
#nmOpts .nm-subkey[hidden] { display: none; }
#nmOpts .nm-subkey--grouped { display: block; }
#nmOpts .nm-chiphead { margin: 12px 2px 6px; font-size: 12.5px; font-weight: 600; color: var(--nm-ink-2); }
#nmOpts .nm-chiphead:first-child { margin-top: 0; }
#nmOpts .nm-chipset { display: flex; flex-wrap: wrap; gap: 6px; }
#nmOpts .nm-subrow { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 34px; padding: 5px 11px 5px 7px; border-radius: 999px; background: var(--nm-tilebg); box-shadow: inset 0 0 0 1px var(--nm-tile-edge); font-size: 13px; line-height: 1.2; color: var(--nm-label); cursor: pointer; -webkit-tap-highlight-color: transparent; }
#nmOpts .nm-subrow__sw { flex: none; display: grid; place-items: center; width: 20px; height: 20px; }
#nmOpts .nm-subrow__sw svg { width: 20px; height: 20px; }
#nmOpts .nm-subrow__sw .nm-place--sw { width: 18px; height: 18px; }
#nmOpts .nm-subrow__sw:has(.nm-sw-plate) { width: 24px; }
#nmOpts .nm-sw-plate { width: 24px; height: 18px; padding: 0; justify-content: center; }
#nmOpts .nm-sw-plate svg { width: 18px; height: 8px; }
#nmOpts .nm-subrow__text { min-width: 0; overflow-wrap: anywhere; }
#nmOpts .nm-subrow input:not(:checked) ~ .nm-subrow__text { opacity: 1; }
#nmOpts .nm-subrow:has(input:not(:checked)) .nm-subrow__sw { opacity: .5; }
#nmOpts .nm-subrow .nm-check { order: -1; flex: none; width: 17px; height: 17px; border: 1.5px solid var(--nm-glyph-off); }
#nmOpts .nm-subrow input:checked + .nm-check { background: var(--nm-btn-blue); border-color: var(--nm-btn-blue); }
#nmOpts .nm-subrow input:checked + .nm-check::after { width: 4px; height: 8px; border-width: 0 2px 2px 0; }
#nmOpts .nm-subrow:has(input:checked) { background: var(--nm-chip-on); box-shadow: none; color: var(--nm-link); font-weight: 600; }
#nmOpts .nm-subrow:has(input:focus-visible) { outline: 3px solid rgba(0, 122, 255, 0.6); outline-offset: 2px; }
#nmOpts .nm-subrow input:focus-visible + .nm-check { outline: none; }
#nmOpts .nm-subrow__text small { margin-left: 4px; color: inherit; font-size: 12px; }
#nmOpts .nm-subnote { flex-basis: 100%; margin: 2px; color: var(--nm-ink-2); }
/* Structures, restrictions and alerts (network-map.js: SRA): a council's own records are locked to a visitor, as a
   council-only tile is (the tick swapped for a lock and "Sign in", which a tap or Enter on it goes to). */
#nmOpts .nm-subrow.is-locked { cursor: pointer; font-weight: 400; color: var(--nm-ink-2); }
#nmOpts .nm-subrow.is-locked .nm-check { display: none; }
#nmOpts .nm-subrow.is-locked .nm-subrow__sw { opacity: .5; }
#nmOpts .nm-subrow.is-locked .nm-locktag { display: inline-flex; gap: 4px; padding: 2px 7px 2px 5px; background: rgba(0, 122, 255, 0.1); color: var(--nm-link); font-size: 11.5px; }
#nmOpts .nm-subrow.is-locked .nm-locktag::before { width: 11px; height: 11px; }
/* Crime rate and Crime rate change: their box (network-map-safety.js) is a list of choices, not chips. */
#nmOpts .nm-subkey[data-sub^="crime"] { display: block; }
#nmOpts .nm-subkey[data-sub^="crime"][hidden] { display: none; }
#nmOpts .nmc { padding: 0; }
#nmOpts .nmc__opts { border-radius: 14px; background: var(--nm-tilebg); box-shadow: inset 0 0 0 0.5px var(--nm-tile-edge); overflow: hidden; }
#nmOpts .nm-subhead { margin: 18px 2px 8px; padding: 0; font-size: 13.5px; font-weight: 600; letter-spacing: -0.005em; text-transform: none; color: var(--nm-label); }
#nmOpts .nm-subrow--pick { display: grid; grid-template-columns: 1fr 22px; width: 100%; min-height: 46px; padding: 8px 12px 8px 14px; border-radius: 0; background: none; box-shadow: none; color: var(--nm-label); font-size: 14px; font-weight: 400; }
#nmOpts .nm-subrow--pick + .nm-subrow--pick { box-shadow: inset 0 0.5px 0 var(--nm-sep); }
#nmOpts .nm-subrow--pick:has(input:checked) { background: none; color: var(--nm-label); }
#nmOpts .nm-subrow--pick .nm-check { order: 0; width: 22px; height: 22px; }
#nmOpts .nm-subrow--pick input:checked ~ .nm-check { background: var(--nm-btn-blue); border-color: var(--nm-btn-blue); }
#nmOpts .nm-subrow--pick .nm-subrow__text small { display: block; margin: 1px 0 0; font-size: 12px; font-weight: 400; color: var(--nm-ink-2); }
#nmOpts .nm-subrow--link { display: flex; justify-content: space-between; width: 100%; margin-top: 10px; padding: 10px 2px; border-radius: 0; background: none; box-shadow: none; color: var(--nm-link); font-size: 14px; }
#nmOpts .nmc__status { margin: 10px 2px 0; color: var(--nm-ink-2); }

/* Words in the panel that were too faint, or a blue too light, for 4.5:1. */
.nm-side .nm-hint, #nmLayers .nm-capitch--card .nm-plain, #nmLayers .nm-collyears, #nmLayers .nm-congtop button span, #nmLayers .nm-subnote { color: var(--nm-ink-2); }
.nm-side .nm-linkbtn, #nmLayers .nm-sumtools button { color: var(--nm-link); }
#nmLayers .nm-btn--primary { background: var(--nm-btn-blue); }

/* An area's fill takes no tap itself, only its outline: a works area (Streetworks' "Show work areas"), an order or
   event drawn as an area, a planning constraint, a flood warning and a Met Office warning. So a street, a line or a pin under or over it
   takes its own tap, and a tap inside it that nothing took reaches the map, which opens the smallest area there
   (areaTapOpen in network-map.js; owner, 21 Oct 2026: an area opens with a tap anywhere inside it). */
.leaflet-pane > svg path.leaflet-interactive.nm-works-area { pointer-events: visibleStroke; }
.leaflet-pane > svg path.leaflet-interactive.nm-restr-area { pointer-events: visibleStroke; }
.leaflet-pane > svg path.leaflet-interactive.nm-pc-area, .leaflet-pane > svg path.leaflet-interactive.nm-flood-area,
.leaflet-pane > svg path.leaflet-interactive.nm-met-area { pointer-events: visibleStroke; }
/* "Also here" on its card: the other areas under the same tap, each opened by its name. */
.nm-also li { display: block; }
.nm-also .nm-linkbtn { display: block; padding: 0; border: 0; background: none; color: var(--nm-link); font: 600 14px/1.35 var(--nm-font); text-align: left; cursor: pointer; }
.nm-also small { display: block; color: var(--nm-ink-2); font-size: 12.5px; }
/* The "i" that explains, inside the panel: darker, so its letter reads at 4.5:1 too. */
#nmLayers .nm-i { color: var(--nm-label); }
#nmLayers .nm-i:hover, #nmLayers .nm-i[aria-expanded="true"] { background: var(--nm-btn-blue); color: #fff; }

/* (The long-press menu on a phone during an area check: its card steps aside while the menu is open.) */
body.nm-circle-tucked #nmDetail.nm-detail--area { display: none; }

/* Hovering a works pin or line: the permit's headline. */
.nm-tip--works { display: grid; gap: 1px; width: max-content; max-width: min(320px, 80vw); white-space: normal; line-height: 1.35; padding: 8px 11px; }
.nm-tip--works b { font-weight: 650; }
.nm-tip--works span { font-weight: 400; }
.nm-tip--works em { font-style: normal; font-size: 11.5px; opacity: .7; margin-top: 3px; }

/* Lines and areas sit under the pins in the same pane, always. A pin's own stacking
   order comes from where it is on the map (Leaflet sets z-index from its pixel
   position), and after a pan the pins towards the top go negative: they then fell
   under the pane's canvas or SVG, which took the mouse except right on a line. */
.leaflet-pane > canvas, .leaflet-pane > svg { z-index: -1000000; }

/* Traffic orders: a save on its way. Its button stays bright and says "Saving…" with a
   small turning ring; the others are held (disabled) until the answer (saveEditor,
   holdSaves in network-map.js). The diversion's "Working out a way round…" line too. */
.nm-btn.is-saving[disabled] { opacity: 1; cursor: progress; }
.nm-btn.is-saving::before {
  content: ""; display: inline-block; width: .85em; height: .85em; margin-right: .45em; vertical-align: -.1em;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: nm-saving-turn .8s linear infinite;
}
@keyframes nm-saving-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .nm-btn.is-saving::before { animation: none; border-right-color: currentColor; opacity: .6; } }
.nm-savenote { margin: 6px 0 0; color: var(--nm-ink-2); }
.nm-error .nm-linkbtn { margin-left: 4px; font-weight: 600; color: var(--nm-link); }

/* Closures with no TTRO yet (loadGaps in network-map.js). Its › page is a list in the options page's own look
   (a white card of rows, like "Show on the map"), not chips; red (#d70015) only for the mark on the map. */
#nmOpts .nm-subkey[data-sub="ttro_gap"] { display: block; }
#nmOpts .nm-subkey[data-sub="ttro_gap"][hidden] { display: none; }
#nmOpts .nm-subkey[data-sub="ttro_gap"] .nm-chiphead { margin: 16px 2px 6px; }
.nm-gapsum { margin: 0 2px; font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--nm-label); }
.nm-gaplist { border-radius: 14px; background: var(--nm-tilebg); box-shadow: inset 0 0 0 0.5px var(--nm-tile-edge); overflow: hidden; }
.nm-gaprow { display: flex; align-items: center; gap: 6px; padding-right: 10px; }
.nm-gaprow + .nm-gaprow { box-shadow: inset 0 0.5px 0 var(--nm-sep); }
.nm-gaprow__main { flex: 1; min-width: 0; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; padding: 9px 4px 9px 12px; border: 0; background: none; font: inherit; color: var(--nm-label); text-align: left; cursor: pointer; }
/* (The whole row lights up, its button too: the main part alone made a two-tone row.) */
@media (hover: hover) { .nm-gaprow:hover { background: var(--nm-fill); } }
.nm-gaprow__main:focus-visible { outline: 3px solid rgba(0, 122, 255, 0.6); outline-offset: -3px; border-radius: 10px; }
.nm-gaprow__pin svg { display: block; width: 22px; height: auto; }
.nm-gaprow__text { display: grid; gap: 1px; min-width: 0; }
.nm-gaprow__text strong { font-size: 14.5px; font-weight: 600; overflow-wrap: anywhere; }
.nm-gaprow__text small { font-size: 12.5px; line-height: 1.3; color: var(--nm-ink-2); overflow-wrap: anywhere; }
.nm-gaptag { justify-self: start; margin-top: 4px; padding: 1px 8px; border-radius: 999px; background: var(--nm-fill); color: var(--nm-label); font-style: normal; font-size: 11.5px; font-weight: 600; }
.nm-gaprow__go { flex: none; min-height: 32px; padding: 5px 12px; font-size: 13.5px; color: var(--nm-link); }
.nm-gapfoot { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; margin: 14px 2px 0; font-size: 13px; color: var(--nm-ink-2); }
.nm-gapfoot .nm-linkbtn { min-height: 32px; color: var(--nm-link); font-size: 13px; font-weight: 600; }
.nm-gapfoot .nm-linkbtn:disabled, .nm-gapfoot .nm-linkbtn[aria-disabled="true"] { color: var(--nm-ink-2); cursor: default; }
/* The works card's note: "No traffic order yet", with Start (or Carry on a draft). */
.nm-detail .nm-gapcall { margin: 0 0 12px; }
.nm-gapcall__btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.nm-gapcall .nm-btn { margin-top: 0; }
/* Small words and the link button at 4.5:1 or more (the shared .nm-permit span is lighter). */
.nm-gapcall span { color: var(--nm-ink-2); }
.nm-gapcall .nm-btn--ghost { color: var(--nm-link); }
/* The list's actions at a finger's size on a phone. */
@media (max-width: 760px) {
  .nm-gaprow__go, .nm-gapfoot .nm-linkbtn, .nm-opts__note [data-gap-refresh] { min-height: 44px; }
}
/* The list's mark on a works pin, zoom 13 and in (further out, a red ring round the works' dot). */
.nm-gappin .nm-pinbadge { position: absolute; top: -4px; right: -6px; width: 16px; height: 16px; border-radius: 50%; background: #d70015; color: #fff; font: 800 11px/16px -apple-system, system-ui, sans-serif; text-align: center; box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(0, 0, 0, .35); pointer-events: none; }

/* ── Events (owner, 19 Oct 2026: "events ... should be there own thing which you can link a traffic regulation
   order too"). Their own layer, pin, card and editor (network-map.js, "events"); one colour, #c2268f, on the map,
   the tile and the kinds. Nothing here changes another feature's look. */
.nm-tag--event { background: #c2268f; }
.nm-tag--event.is-draft { background: #8e8e93; }
/* (Add event is in the + at the top right since 21 Oct 2026: the + block below.) */
/* The editor: the kinds as the restriction editor's tiles, four a row on a computer. */
.nm-evkinds { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 380px) { .nm-evkinds { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.nm-evkinds .nm-kind[aria-pressed="true"] { box-shadow: inset 0 0 0 2px #c2268f; }
.nm-evcancel { color: var(--nm-red-ink, #c01f17); font-weight: 600; min-height: 32px; }
.nm-evcancel:disabled { color: var(--nm-label-2); }
/* The card: "Add a traffic order for this event" under its orders; "For: <event>" on a scheme's card. */
.nm-detail .nm-evadd { gap: 6px; margin: 10px 0 4px; }
.nm-detail .nm-evadd svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.nm-evfor { margin: 0 0 12px; }
/* Its card's state: in the events' colour while it is on ("On now · ends in 28 hours"), grey a draft, finished or
   cancelled (coming up: the orders' orange, .nm-state--upcoming). */
.nm-state--evon { color: #a11f77; background: rgba(194, 38, 143, 0.12) !important; }
.nm-state--evgrey { color: var(--nm-label-2); }
html[data-theme="dark"] .nm-state--evon { color: #f07cc6; background: rgba(240, 124, 198, 0.16) !important; }
.nm-evfor strong { color: #a11f77; }
/* (theme.js always writes the theme on <html>, Auto too.) */
html[data-theme="dark"] .nm-evfor strong { color: #f07cc6; }
@media (max-width: 760px) {
  .nm-evcancel { min-height: 44px; }
}

/* ── The + at the top right (owner, 21 Oct 2026: "combine add TTRO and add event in top right to just a plus
   button"; plusMenuHtml in network-map.js). One round blue button in the box; its menu hangs from it as the person
   menu does (upward from the box's left edge on a phone, where the box is at the bottom left). The traffic order and
   the event first, with filled icons; the things on their own after a quieter heading, smaller and plain. Network
   only, as Add TTRO and Add event were. */
.nm-plus { position: relative; flex: none; }
.nm-plus > summary { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--nm-btn-blue); color: #fff; list-style: none; cursor: pointer; }
.nm-plus > summary::-webkit-details-marker { display: none; }
.nm-plus > summary::marker { content: ""; }
.nm-plus > summary:hover { background: #0056b3; }
.nm-plus > summary svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; transition: transform .15s; }
.nm-plus[open] > summary svg { transform: rotate(45deg); }
.nm-plus__menu { position: absolute; z-index: 5; right: 0; top: calc(100% + 10px); width: 300px; padding: 6px; border-radius: 14px; background: var(--nm-pop); box-shadow: var(--nm-shadow); display: grid; gap: 2px; }
.nm-plus__head, .nm-plus__sub { margin: 6px 10px 4px; font-size: 12.5px; font-weight: 600; color: var(--nm-label-2); }
.nm-plus__sub { margin: 6px 0 2px; padding: 9px 10px 0; border-top: 0.5px solid var(--nm-sep); }
.nm-plus__item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px; background: none; text-align: left; color: var(--nm-label); cursor: pointer; font: inherit; }
.nm-plus__item:hover, .nm-plus__item:focus-visible { background: var(--nm-fill); }
.nm-plus__ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--nm-btn-blue); color: #fff; }
.nm-plus__item[data-council="event"] .nm-plus__ic { background: #c2268f; }
.nm-plus__item.is-quiet { padding-top: 6px; padding-bottom: 6px; }
.nm-plus__item.is-quiet .nm-plus__ic { width: 34px; height: 30px; background: var(--nm-fill); color: var(--nm-label); }
.nm-plus__ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nm-plus__t { display: grid; gap: 1px; min-width: 0; }
.nm-plus__t b { font-size: 15px; font-weight: 600; }
.nm-plus__t small { font-size: 12.5px; line-height: 1.3; color: var(--nm-label-2); }
.nm-plus__item.is-quiet .nm-plus__t b { font-size: 14px; font-weight: 500; }
@media (min-width: 761px) { .nm-plus__menu { max-height: calc(100vh - 76px - var(--nm-safe-b)); max-height: calc(100dvh - 76px - var(--nm-safe-b)); overflow-y: auto; } }
@media (max-width: 760px) {
  .nm-topbar .nm-plus { position: static; }
  .nm-plus__menu { top: auto; bottom: calc(100% + 8px); left: 0; right: auto; width: min(300px, calc(100vw - 2 * var(--nm-gap)));
    max-height: calc(100vh - 170px - var(--nm-safe-b) - var(--nm-safe-t)); max-height: calc(100dvh - 170px - var(--nm-safe-b) - var(--nm-safe-t)); overflow-y: auto; }
  .nm-plus__item { min-height: 44px; }
}
body.nm-mode-kerbside .nm-council .nm-plus,
body.nm-mode-loads .nm-council .nm-plus { display: none; }

/* ── the map's dates follow the scheme being worked on (datesFollow in network-map.js; owner, 19 Oct 2026):
   "Showing 21 to 25 October: the scheme's dates. Back to today" under the dates in Closures and works. */
.nm-when__note .nm-linkbtn { font: inherit; font-weight: 600; color: var(--nm-link); white-space: nowrap; }
@media (pointer: coarse) { .nm-when__note .nm-linkbtn { padding: 10px 2px; margin: -10px 0; } }

/* ── The map's own choices at the foot of the filters, and Appearance in the person menu (owner, 20 Oct 2026:
   "move these back somewhere in filters ive decided but looks clean"; "the light and dark should be for both the
   dashboard and map"). #nmMapPrefs (mapPrefsDraw in network-map.js), under Map and its pictures: Area shown (a
   council signed in; not in Collisions), Choose your filters (the ward and council tag is a tile in Places and
   boundaries from 21 Oct 2026). One white card of rows as
   a layer's options page has, edge to edge with the pictures and the tiles. The map's Settings sheet went: what is
   left of #nmSettings is Choose your filters, and light or dark is in the person menu (a visitor: the round
   Appearance button, .nm-cog, a <details> as the chip is). */
.nm-mapprefs { margin: 14px 0 4px; }
/* (The same card at the foot of Collision analysis while it has the filters' place, under its own Map: mapPrefsPlace.
   Clear of the Apply bar above it.) */
.nm-camap { margin-top: 26px; }
.nm-camap .nm-mapprefs { margin-top: 6px; }
.nm-mapprefs .nm-set__list { background: var(--nm-tilebg); box-shadow: inset 0 0 0 0.5px var(--nm-tile-edge); }
.nm-mapprefs .nm-set__row { min-height: 50px; padding: 9px 12px 9px 14px; color: var(--nm-label); }
.nm-mapprefs .nm-set__row[hidden] { display: none; }
.nm-mapprefs .nm-set__row small { color: var(--nm-ink-2); }
.nm-mapprefs .nm-set__row--stack { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; gap: 8px; }
/* (The name and its (i) on one line: .nm-set__row's first span is otherwise a grid of lines.) */
.nm-mapprefs .nm-set__row > .nm-mapprefs__name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.nm-mapprefs .nm-mapprefs__name b { min-width: 0; }
.nm-mapprefs label.nm-set__row { cursor: pointer; }
.nm-mapprefs button.nm-set__row { width: 100%; border: 0; background: none; text-align: left; font: inherit; font-size: 15px; cursor: pointer; }
.nm-mapprefs .nm-set__row + button.nm-set__row { border-top: 0.5px solid var(--nm-sep); }
@media (hover: hover) { .nm-mapprefs button.nm-set__row:hover, .nm-mapprefs label.nm-set__row:hover { background: var(--nm-fill); } }
.nm-mapprefs button.nm-set__row:focus-visible { outline: 3px solid rgba(0, 122, 255, 0.6); outline-offset: -3px; }
/* (The first row showing has no line above it: Area shown is hidden for a visitor.) */
.nm-mapprefs .nm-set__row[hidden] + .nm-set__row { border-top: 0; }
/* The area's two choices fill the row, each half: a long council name is cut only as a last resort. */
.nm-mapprefs .nm-seg { width: 100%; }
.nm-mapprefs .nm-seg button { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media print { .nm-mapprefs, .nm-camap { display: none !important; } }

/* The person menu's Appearance, and the visitor's: the label and the switch lined up with the words. */
.nm-account__menu .nm-account__label { margin: 6px 8px 4px; font-size: 13px; font-weight: 600; color: var(--nm-label-2); }
.nm-account__menu .theme-seg { margin: 0 8px 8px; width: calc(100% - 16px); }
/* (The menu's one column keeps to the menu's width, and the switch's three buttons share it: at their own widths,
   14 px each side, they made the column 11 px wider than a computer's 280 px menu, so the switch sat off-centre
   and the menu could be scrolled sideways, its rows losing their left edge. The buttons are as a phone has them.) */
.nm-account__menu { grid-template-columns: minmax(0, 1fr); overflow-x: hidden; }
.nm-account__menu .theme-seg .theme-seg__btn { padding-left: 8px; padding-right: 8px; }
.nm-cog > summary.nm-cog__btn { list-style: none; }
.nm-cog > summary.nm-cog__btn::-webkit-details-marker { display: none; }
.nm-cog > summary.nm-cog__btn:focus-visible { outline: 3px solid rgba(0, 122, 255, 0.5); outline-offset: 1px; }
.nm-cog .nm-account__menu { width: 280px; }
@media (max-width: 760px) { .nm-cog .nm-account__menu { width: min(280px, calc(100vw - 2 * var(--nm-gap))); } }
/* (A short screen wider than a phone, a phone on its side: the person menu, a row taller with Appearance in it,
   has its rows a little closer, and scrolls rather than run off the bottom, as the phone's menus do.) */
@media (min-width: 761px) { .nm-account__menu { max-height: calc(100vh - 76px - var(--nm-safe-b)); max-height: calc(100dvh - 76px - var(--nm-safe-b)); overflow-y: auto; } }
@media (min-width: 761px) and (max-height: 480px) { .nm-account__menu > a, .nm-account__menu > button { padding-top: 7px; padding-bottom: 7px; } }

/* ── The person menu, redrawn (owner, 21 Oct 2026: "make the drop down from the user look better ... on both
   dashboards"). The same as the dashboard's (#accountMenu, dashboard-skin.css; personMenuHtml in network-map.js):
   a head with who you are (the blue person, the email, the role at the council or "Auroute admin, looking at ...",
   and a note where publishing is not open to you), then groups split by hairlines, Appearance, the apps and Settings,
   Switch council (Auroute's own account), and Sign out on its own at the foot. Every row has a 20 px line icon, a
   44 px target and the same hover and focus. (The visitor's Appearance menu, .nm-cog, keeps its own look.) */
.nm-account > .nm-account__menu--person { width: 304px; padding: 6px; gap: 0; border-radius: 16px; box-sizing: border-box; }
.nm-account__menu--person .nm-account__head { display: flex; align-items: center; gap: 12px; padding: 10px 10px 12px; }
.nm-account__menu--person .nm-account__head > svg { width: 40px; height: 40px; flex: none; padding: 9px; border-radius: 50%; box-sizing: border-box; background: var(--nm-blue); fill: none; stroke: #fff; stroke-width: 2.1; stroke-linecap: round; }
.nm-account__who { display: grid; gap: 2px; min-width: 0; }
.nm-account__who strong { font-size: 15px; font-weight: 600; line-height: 1.25; color: var(--nm-label); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nm-account__who span { font-size: 13px; line-height: 1.3; color: var(--nm-label-2); }
.nm-account__who small { margin-top: 2px; font-size: 12px; line-height: 1.35; color: var(--nm-label-2); }
.nm-account__group { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; margin: 0 -6px; padding: 6px; border-top: 0.5px solid var(--nm-sep); }
.nm-account__group--theme { padding-bottom: 8px; }
.nm-account__menu--person .nm-account__group--theme .nm-account__label { margin: 4px 10px 8px; }
.nm-account__menu--person .nm-account__group--theme .theme-seg { margin: 0 4px; width: calc(100% - 8px); }
.nm-account__menu--person .theme-seg .theme-seg__btn { font-size: 14px; font-weight: 500; line-height: 1.2; }
.nm-account__menu--person .nm-account__group > a,
.nm-account__menu--person .nm-account__group > button { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 10px; border-radius: 10px; box-sizing: border-box; font: inherit; font-size: 15px; line-height: 1.25; color: var(--nm-label); }
.nm-account__menu--person .nm-account__group > a.is-danger,
.nm-account__menu--person .nm-account__group > button.is-danger { color: var(--nm-red); }
.nm-account__menu--person .nm-account__group > * > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nm-account__menu--person .nm-account__group > * > svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--nm-label-2); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nm-account__menu--person .nm-account__group > .is-danger > svg { stroke: currentColor; }
.nm-account__menu--person .nm-account__group > a:hover,
.nm-account__menu--person .nm-account__group > button:hover { background: var(--nm-fill); }
.nm-account__menu--person .nm-account__group > a:focus-visible,
.nm-account__menu--person .nm-account__group > button:focus-visible { outline: 2px solid var(--nm-blue); outline-offset: -2px; background: var(--nm-fill); }
.nm-account__menu--person .nm-account__group > a:active,
.nm-account__menu--person .nm-account__group > button:active { background: var(--nm-fill-2); }
/* A phone: the menu rises from the box at the foot, the width of the screen less its gutters (as the dashboard's sheet). */
@media (max-width: 760px) { .nm-account > .nm-account__menu--person { width: min(380px, calc(100vw - 2 * var(--nm-gap))); } }
@media (min-width: 761px) and (max-height: 480px) { .nm-account__menu--person .nm-account__group > a, .nm-account__menu--person .nm-account__group > button { min-height: 38px; padding-top: 6px; padding-bottom: 6px; } }

/* The Documents step's "Settings › Traffic order templates": a link to the app's Settings page in a new tab (the
   person chip, and its Settings, step aside while a scheme is open). Blue words, as the panel's other links. */
#wzDocs a[data-docs-settings] { color: var(--nm-link); font-weight: 600; text-decoration: none; }
#wzDocs a[data-docs-settings]:hover { text-decoration: underline; }
#wzDocs a[data-docs-settings]:focus-visible { outline: 3px solid rgba(0, 122, 255, 0.5); outline-offset: 2px; border-radius: 3px; }

/* ── Add TTRO step 1 (owner, 20 Oct 2026): "For" (Works, An event, Something else) at the top, and the permit's box as a
   dropdown of the permits near here, the permit found standing in the box's place (ttroFor*, ttroCombo* and
   ttroFoundHtml in network-map.js). */
.nm-ttfor { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.nm-ttfor > span { flex: none; font-size: 13px; color: var(--nm-label-2); padding-left: 4px; }
.nm-ttfor .nm-seg { flex: 1; min-width: 0; }
.nm-ttfor .nm-i { flex: none; }
/* (Its buttons share the width by their words, not in equal thirds, so "Something else" fits on a 320 px phone.) */
.nm-ttfor .nm-seg button { flex: 1 1 auto; padding-left: 6px; padding-right: 6px; }
@media (max-width: 400px) {
  .nm-ttfor { gap: 6px; }
  .nm-ttfor > span { padding-left: 0; }
  .nm-ttfor .nm-seg button { padding-left: 3px; padding-right: 3px; letter-spacing: -0.1px; }
}
@media (max-width: 340px) { .nm-ttfor .nm-seg button { font-size: 12px; } }
.nm-pcombo__anchor { position: relative; }
.nm-pcombo__entry { position: relative; }
.nm-pcombo__entry input { padding-right: 46px !important; }
.nm-pcombo__chev { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 36px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--nm-label-2); cursor: pointer; }
.nm-pcombo__chev:hover { background: var(--nm-fill); }
.nm-pcombo__chev svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.nm-pcombo__chev[aria-expanded="true"] svg { transform: rotate(180deg); }
/* The dropdown: over the boxes below it, taller than the list was, its heading kept in sight as it scrolls. */
/* (Solid, not the menus' see-through glass: the boxes it lies over showed through it in the dark theme.) */
.nm-pcombo__drop { --nm-pcombo-bg: #fafafc; position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px); padding: 0 6px 4px; border-radius: 14px; background: var(--nm-pcombo-bg); box-shadow: var(--nm-shadow), 0 0 0 0.5px var(--nm-sep); max-height: min(60vh, 540px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.nm-pcombo__drop .nm-nearby__head { position: sticky; top: 0; z-index: 1; padding: 8px 4px 2px 6px; background: var(--nm-pcombo-bg); }
html[data-theme="dark"] .nm-pcombo__drop { --nm-pcombo-bg: #2c2c2e; }
.nm-pcombo__drop > .nm-help { margin: 6px 8px 10px; }
.nm-pcombo__drop .nm-nearby__list { max-height: none; overflow: visible; margin-bottom: 2px; }
.nm-nearby__row.is-active { background: var(--nm-fill); box-shadow: inset 0 0 0 2px var(--nm-blue); }
.nm-nearby__row.is-picked.is-active { box-shadow: inset 4px 0 0 var(--nm-blue), inset 0 0 0 2px var(--nm-blue); }
@media (prefers-reduced-motion: reduce) { .nm-pcombo__chev svg { transition: none; } }
/* On a phone the sheet stands taller while the dropdown is open, so a few permits show at once. */
@media (max-width: 760px) {
  .nm-editor:has(#wzNearby:not([hidden])) { max-height: 74vh; min-height: 74vh; }
  .nm-pcombo__drop { max-height: max(220px, calc(74vh - 290px)); }
  .nm-pcombo__chev { width: 44px; height: 40px; }
}
/* The permit found, in the box's place: its street with a tick, its reference and place, then promoter, dates and
   what the works are; Clear at the top right, Change at the foot. */
.nm-pfound { gap: 2px; margin: 0 0 2px; padding: 10px 10px 8px 12px; }
.nm-pfound__head { display: flex; align-items: flex-start; gap: 10px; }
.nm-pfound__head .nm-pnum { flex: none; margin-top: 1px; }
.nm-pfound .nm-pnum span { color: #fff; background: var(--nm-blue); }
.nm-pfound__title { flex: 1; min-width: 0; display: grid; gap: 1px; }
.nm-permit.is-found .nm-pfound__title strong { color: var(--nm-label); font-size: 15px; font-weight: 600; }
.nm-pfound__title small { font-size: 12.5px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.nm-pfound__clear { flex: none; width: 30px; height: 30px; margin: -3px -3px 0 0; border: 0; border-radius: 50%; background: var(--nm-fill); color: var(--nm-label-2); display: grid; place-items: center; cursor: pointer; }
.nm-pfound__clear:hover { background: var(--nm-fill-2); }
.nm-pfound__clear svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.nm-pfound__lines { display: grid; gap: 2px; }
.nm-pfound__line { padding-left: 34px; font-size: 13px; }
.nm-pfound__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-left: 34px; margin-top: 2px; }
.nm-permit .nm-pfound__from { color: var(--nm-green-ink); font-size: 12.5px; font-weight: 600; }
.nm-pfound__from .nm-i { margin-left: 4px; vertical-align: -2px; }
.nm-permit .nm-pfound__foot .nm-btn { margin-top: 0; }
@media (max-width: 760px) { .nm-pfound__clear { width: 40px; height: 40px; margin: -8px -6px 0 0; } }
/* An event's order: the event under its dropdown, its kind and dates, and Show on map. */
.nm-ttevent__it { display: flex; align-items: center; gap: 10px; margin: -4px 0 12px; padding: 8px 10px; border-radius: 12px; background: var(--nm-cell); border-left: 4px solid #c2268f; }
.nm-ttevent__it > svg { flex: none; }
.nm-ttevent__it > span { flex: 1; min-width: 0; display: grid; gap: 1px; }
.nm-ttevent__it strong { font-size: 14px; font-weight: 600; }
.nm-ttevent__it small { font-size: 12.5px; color: var(--nm-label-2); }
.nm-ttevent__it .nm-btn { flex: none; margin: 0; }
.nm-ttevent > .nm-help { margin-top: -4px; }

/* ── Planning constraints (planning.data.gov.uk; 21 Oct 2026) ───────────────────────────────────────────────────
   The small heading over their six tiles in Places and boundaries (it goes when all six are switched off in Choose
   your filters); the soft outlines on the map (a tap anywhere inside one opens it: areaTapOpen); and the lines on a
   restriction's card ("In a conservation area: Grainger Town"). */
#nmLayers .nm-pc-head { margin: 14px 2px 6px; font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--nm-label); }
#nmLayers .nm-pc-head small { margin-left: 4px; font-size: 12px; font-weight: 500; color: var(--nm-ink-2); }
#nmLayers .nm-pc-head:not(:has(+ .nm-grid > .nm-cell:not(.is-unwanted):not([hidden]))) { display: none; }
.nm-pc-near { margin: 10px 0 4px; padding: 8px 10px; border-radius: 10px; background: var(--nm-fill); }
.nm-pc-near p { display: flex; align-items: baseline; gap: 8px; margin: 2px 0; font-size: 13px; line-height: 1.35; color: var(--nm-label); }
.nm-pc-near__dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--c); transform: translateY(1px); }
/* An Article 4 area's card: the rights its direction takes away, each code a chip (owner, 22 Oct 2026: "it should have
   the code but hovering over gives what it means on all of them"; a4RightsHtml, the tip in nm-ui.js). A code that
   matters to highways has the area's pink ring and dot (a lighter pink on the dark card: 4.6:1 there); one we do not
   know, a dashed edge. The chips are 32 px tall with 6 px between, for a thumb. */
.nm-a4 { --a4: var(--c, #c2457a); margin: 2px 0 14px; }
.nm-a4__codes { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 8px; padding: 0; list-style: none; }
.nm-a4__codes li { margin: 0; max-width: 100%; }
.nm-code {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 40px; min-height: 32px; max-width: 100%;
  padding: 4px 10px; border: 0; border-radius: 9px; cursor: pointer; background: var(--nm-fill); color: var(--nm-label);
  font: 700 13.5px/1.2 var(--nm-font); font-variant-numeric: tabular-nums; text-align: left; overflow-wrap: anywhere;
}
.nm-code:hover, .nm-code.is-tip { background: var(--nm-fill-2); }
.nm-code:focus-visible { outline: 3px solid rgba(0, 122, 255, 0.6); outline-offset: 2px; }
.nm-code small { font-size: 12px; font-weight: 500; color: var(--nm-muted); }
.nm-code--road { box-shadow: inset 0 0 0 1.5px var(--a4); }
.nm-code--road::before, .nm-a4__dot { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--a4); }
.nm-code--unknown { padding: 3px 9px; border: 1px dashed var(--nm-muted); background: transparent; font-weight: 600; }
.nm-a4 p { margin: 0 0 4px; font-size: 12.5px; line-height: 1.35; color: var(--nm-muted); }
.nm-a4 .nm-a4__road { display: flex; align-items: flex-start; gap: 7px; font-size: 13px; color: var(--nm-label); }
.nm-a4__road .nm-a4__dot { margin-top: 0.45em; }
.nm-a4 .nm-a4__credit { margin-top: 6px; font-size: 11.5px; }
/* Its tip: the code, what it means, the highways note in a box, the legal name small. */
.nm-pop--code { width: 300px; }
.nm-pop--code b { font-size: 15px; font-variant-numeric: tabular-nums; }
.nm-pop--code .nm-pop__lead { color: var(--nm-label); font-size: 14px; }
.nm-pop--code .nm-pop__note { padding: 7px 9px; border-radius: 9px; background: var(--nm-fill); color: var(--nm-label); font-size: 13px; }
.nm-pop--code .nm-pop__note strong { display: block; margin-bottom: 2px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--nm-muted); }
.nm-pop--code .nm-pop__small { font-size: 12.5px; color: var(--nm-muted); }
@media screen { html[data-theme="dark"] .nm-a4 { --a4: #e0709f; } }

/* ── Properties on a street and on the streets a closure closes (OS Open Linked Identifiers; owner, 21 Oct 2026:
   "properties, address ... if this is free licence no harm in adding that"): a line of the street card's What is along
   it (.nm-along, with the larger cards' rules after the folds) and the closure card's fold (propsFillCard: each
   street's count in a plain pill, not a bus line's red). (Not on the scheme's step 2 since 21 Oct 2026: the owner
   asked for it off.) */
.nm-recent.nm-props li .nm-line { background: var(--nm-fill); color: var(--nm-label); font-variant-numeric: tabular-nums; }
/* ── Met Office weather warnings (21 Oct 2026): the weather box's line for a warning at the middle of the map (a
   button that opens its card; "unavailable just now" with the link when the feed cannot be had), the Met Office's own
   words on the card, kept apart from ours by a bar in the warning's colour, and the line on an event's card. */
.nm-weather__met { display: block; box-sizing: border-box; width: calc(100% - 16px); max-width: 314px; margin: 2px 8px 6px; padding: 5px 9px 5px 12px; border: 0; border-radius: 9px;
  background: color-mix(in srgb, var(--c, #ff9900) 24%, transparent); box-shadow: inset 4px 0 0 var(--c, #ff9900); color: var(--nm-label);
  font: 600 12.5px/1.35 var(--nm-font); text-align: left; cursor: pointer; }
.nm-weather__met.is-off, .nm-evmet.is-off { background: var(--nm-fill); box-shadow: none; color: var(--nm-label-2); font-weight: 500; cursor: default; }
.nm-weather__met a, .nm-evmet a { color: var(--nm-link); font-weight: 600; }
.nm-metquote { margin: 0 0 12px; padding: 2px 0 2px 12px; border-left: 4px solid var(--c, #ff9900); }
.nm-metquote p { margin: 4px 0; font-size: 14px; line-height: 1.45; color: var(--nm-label); }
.nm-evmet { margin: -2px 0 12px; padding: 7px 10px 7px 12px; border-radius: 10px; background: color-mix(in srgb, var(--c, #ff9900) 18%, transparent);
  box-shadow: inset 4px 0 0 var(--c, #ff9900); font-size: 13px; line-height: 1.4; color: var(--nm-label); }
.nm-evmet.is-later { background: var(--nm-fill); box-shadow: none; color: var(--nm-label-2); }
.nm-metwarn-others li { display: block; }
.nm-metwarn-others .nm-linkbtn { display: block; padding: 0; border: 0; background: none; color: var(--nm-link); font: 600 14px/1.35 var(--nm-font); text-align: left; cursor: pointer; }
.nm-metwarn-others small { display: block; color: var(--nm-ink-2); font-size: 12.5px; }

/* ── The permit's footway closure on step 2 (21 Oct 2026): Street Manager says the works close the footway, so a
   footway closure is offered, drawn from the permit's works; nothing is added until the officer saves it. */
.nm-fwoffer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 10px 0 4px; padding: 8px 10px; border-radius: 12px; background: var(--nm-fill); }
.nm-fwoffer > span { flex: 1 1 180px; min-width: 0; font-size: 13px; line-height: 1.35; color: var(--nm-label); }
.nm-fwoffer > .nm-btn { flex: none; margin: 0; }

/* ── Structures and Route approvals (23 Oct 2026): the busiest in view under the tiles, and the new structure's form. */
.nm-modelist { margin: 4px 0 8px; }
.nm-modelist:empty { display: none; }
.nm-modelist .nm-linked { margin-top: 6px; }
body.nm-picking .leaflet-container { cursor: crosshair; }
.nm-structadd { display: grid; gap: 10px; margin: 4px 0 6px; }
.nm-structadd label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: var(--nm-label); }
.nm-structadd label[hidden] { display: none; }
.nm-structadd label small { font-weight: 400; color: var(--nm-label-2); }
.nm-structadd input, .nm-structadd select, .nm-structadd textarea { width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--nm-sep); background: var(--nm-surface); color: var(--nm-label); font: 400 14px var(--nm-font); }
.nm-structadd__val { display: flex; align-items: center; gap: 8px; }
.nm-structadd__val b { font-weight: 600; color: var(--nm-label-2); }
.nm-structadd__btns { display: flex; gap: 8px; }
.nm-structadd__btns .nm-btn { flex: 1; }
/* The Publish step's boxes for the council only (emergency services, planning, schools, who lives along it): one line
   each, opened for the detail (pubFold, 23 Oct 2026). */
.nm-pubfold { margin: 0 0 6px; border-radius: 12px; background: var(--nm-cell); }
.nm-pubfold > summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 8px; padding: 9px 12px; list-style: none; cursor: pointer; }
.nm-pubfold > summary::-webkit-details-marker { display: none; }
.nm-pubfold > summary::marker { content: ""; }
.nm-pubfold > summary b { font-size: 13.5px; font-weight: 600; color: var(--nm-label); white-space: nowrap; }
.nm-pubfold > summary small { min-width: 0; font-size: 12.5px; color: var(--nm-label-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nm-pubfold > summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--nm-label-3); border-bottom: 2px solid var(--nm-label-3); transform: rotate(45deg) translateY(-2px); transition: transform .15s; }
.nm-pubfold[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }
.nm-pubfold > summary:focus-visible { outline: 3px solid rgba(0, 122, 255, .5); outline-offset: 2px; border-radius: 12px; }
.nm-pubfold__in { padding: 0 12px 10px; }
.nm-pubfold__in > :first-child { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .nm-pubfold > summary::after { transition: none; } }
/* A Publish box with nothing more to open (pubLine: Emergency services with no station near): a fold's one line. */
.nm-publine__row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 8px; margin: 0; padding: 9px 12px; }
.nm-publine__row b { font-size: 13.5px; font-weight: 600; color: var(--nm-label); white-space: nowrap; }
.nm-publine__row small { min-width: 0; font-size: 12.5px; color: var(--nm-label-2); }
/* A council's own collision records (23 Oct 2026): squares in the severity's colour, where STATS19's are dots; and the
   form's pairs of boxes and its who-was-involved ticks. */
.nm-ccoll { background: none; border: 0; }
.nm-ccoll > span { display: block; width: 100%; height: 100%; border-radius: 3px; background: var(--c, #f59e0b); box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(0, 0, 0, .35); }
.nm-structadd__two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* A structure's limits, any of the five (structAddForm, 24 Oct 2026). */
.nm-structadd__limits { margin: 0; padding: 0; border: 0; min-width: 0; }
.nm-structadd__limits[hidden] { display: none; }
.nm-structadd__limits legend { padding: 0; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--nm-label); }
.nm-structadd__limits legend small { font-weight: 400; color: var(--nm-label-2); }
.nm-structadd__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
.nm-structadd__who { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin: 0; padding: 0; border: 0; min-width: 0; }
.nm-structadd__who legend { padding: 0; margin-bottom: 4px; font-size: 13px; font-weight: 600; color: var(--nm-label); }
.nm-structadd__who .nm-check { font-weight: 400; display: flex; gap: 8px; align-items: center; margin: 0; white-space: nowrap; }
.nm-structadd__who .nm-check input { flex: none; width: 18px; height: 18px; padding: 0; margin: 0; }
/* The scale of Where loads cross and How busy, over its mode's list (heatScaleHtml): the collision heatmap's colours
   (HEAT_GRADIENT, as .nmca-scale__bar), the fewest to the most, figures under (24 Oct 2026). */
.nm-heatscale { margin: 0 0 12px; }
.nm-heatscale__bar { height: 8px; border-radius: 999px; background: linear-gradient(90deg, #4db7ff, #22c55e, #f59e0b, #f97316, #ef4444, #dc2626); }
.nm-heatscale__ends { display: flex; justify-content: space-between; margin: 4px 0 0; font-size: 12px; color: var(--nm-ink-2); }

/* Next to the street (27 Oct 2026): a row a kind, its tile, how many and how near, opening to its list. */
.nm-near { display: grid; gap: 6px; margin-top: 8px; }
.nm-near__g { border-radius: 12px; background: var(--nm-cell); }
.nm-near__g > summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1px 10px; padding: 7px 14px 7px 8px; list-style: none; cursor: pointer; border-radius: 12px; }
.nm-near__g > summary::-webkit-details-marker { display: none; }
.nm-near__g > summary::marker { content: ""; }
.nm-near__g > summary .nm-card__icon { grid-row: 1 / 3; width: 30px; height: 30px; border-radius: 8px; }
.nm-near__g > summary .nm-card__icon svg { width: 18px; height: 18px; }
.nm-near__g > summary b { font-size: 13.5px; font-weight: 600; }
.nm-near__g > summary small { grid-column: 2; font-size: 12px; color: var(--nm-label-2); }
.nm-near__g > summary::after { content: ""; grid-column: 3; grid-row: 1 / 3; width: 7px; height: 7px; border-right: 2px solid var(--nm-label-3); border-bottom: 2px solid var(--nm-label-3); transform: rotate(45deg) translateY(-2px); transition: transform .15s; }
.nm-near__g[open] > summary::after { transform: rotate(-135deg) translateY(1px); }
.nm-near__g > summary:hover { background: var(--nm-fill); }
.nm-near__g > summary:focus-visible { outline: 3px solid rgba(0, 122, 255, .5); outline-offset: 2px; }
.nm-near__g .nm-recent.nm-near__list { margin: 0 8px 8px; padding: 0 10px; background: var(--nm-surface); }
.nm-near__g > .nm-detail__meta { margin: -2px 14px 8px; }
@media (forced-colors: active) { .nm-near__g > summary::after { border-color: CanvasText; } }

/* Colour the streets by (the Streets tile's options page, 27 Oct 2026): the choice and its key. */
.nm-seg--shade { margin: 2px 0 10px; }
.nm-shadekey .nm-chiphead { display: flex; align-items: center; gap: 2px; }
.nm-shadekey__bar { display: flex; gap: 2px; margin: 6px 0 2px; }
.nm-shadekey__bar span { flex: 1; height: 10px; border-radius: 3px; background: var(--c); }
.nm-shadekey__ends { display: flex; justify-content: space-between; margin: 0 0 6px; font-size: 11.5px; color: var(--nm-label-2); }