/* ===================================================================== */
/* rvacrime.css — ALL styling for the RVACrime map page.                 */
/*                                                                       */
/* Self-contained, temporary feature (plan: rvacrime 20260817).          */
/* rvacrime.html links this file plus main.css, leaflet.css, and the two */
/* MarkerCluster stylesheets; main.css is used READ-ONLY for the shared  */
/* header/nav/footer and is never modified. To remove the whole feature, */
/* delete rvacrime.html, assets/js/rvacrime-tiers.js,                     */
/* assets/js/rvacrime-data.js, assets/js/rvacrime-map.js, and this file.  */
/* (The vendored leaflet / markercluster library files in assets/ are    */
/* shared and stay.)                                                     */
/* ===================================================================== */

/* Custom properties, scoped so they cannot leak to other pages. */
.nc-app,
.nc-post {
	--nc-border: #e5e5e5;
	--nc-radius: 4px;
	--nc-focus: #111;
	--nc-muted: #666;
	--nc-accent: #4a78c2;
	--nc-t5: #d7191c;
	--nc-t4: #f07c4a;
	--nc-t3: #fdae61;
	--nc-t2: #fee08b;
	--nc-t1: #ffffbf;
}

/* --- Shared shell tweaks (header/tagline/main/post) ------------------ */
.nc-header {
	padding-top: 1.5em;
	padding-bottom: 1.5em;
	min-height: 0;
}

.nc-header > .container {
	padding: 1em 0 0 0;
	border-bottom: none;
	box-shadow: none;
}

.nc-logo {
	margin-bottom: 0.25em;
}

.nc-tagline {
	margin-top: 0;
	font-size: 0.9em;
	font-style: italic;
}

.nc-main {
	padding-top: 2em;
	padding-bottom: 2em;
}

.nc-post {
	border-top: none;
	box-shadow: none;
	margin-top: 0;
	padding-top: 0;
}

/* --- "What is this?" — ported from scotia's details/summary --------- */
.nc-post details {
	border: 1px solid var(--nc-border);
	border-radius: var(--nc-radius);
	padding: 0.5em 1em;
	margin-bottom: 1.5em;
	background: #f7f7f7;
}

.nc-post summary {
	position: relative;
	cursor: pointer;
	font-weight: bold;
	outline: none;
	list-style: none;
	text-align: center;
	padding: 0.5em 0;
}

.nc-post summary::-webkit-details-marker {
	display: none;
}

.nc-post summary::before {
	content: '\25BA';
	position: absolute;
	left: 1em;
	top: 50%;
	transform: translateY(-50%);
}

.nc-post summary::after {
	content: '\25C4';
	position: absolute;
	right: 1em;
	top: 50%;
	transform: translateY(-50%);
}

.nc-post summary:focus-visible {
	outline: 3px solid var(--nc-focus);
	outline-offset: 2px;
}

.nc-post details[open] summary {
	margin-bottom: 0.75em;
}

.nc-about {
	text-align: left;
	margin-bottom: 0;
}

.nc-about p {
	text-align: left;
}

/* --- App layout ----------------------------------------------------- */
.nc-app {
	display: flex;
	flex-direction: column;
	gap: 1.25em;
}

/* Visually hidden but available to screen readers (for the slider labels). */
.nc-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --- Time-range slider ---------------------------------------------- */
.nc-slider-wrap {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}

.nc-slider-label {
	font-weight: bold;
}

.nc-slider-readout {
	font-variant-numeric: tabular-nums;
	font-weight: bold;
	color: #222;
}

.nc-slider-hint {
	font-size: 0.85em;
	color: var(--nc-muted);
	margin: 0;
}

/* "Data last updated <date>" note directly under the map. */
.nc-updated {
	font-size: 0.85em;
	color: var(--nc-muted);
	margin: 0.5em 0 0;
}

/* Dual-handle slider: two overlaid native range inputs (keyboard-friendly)
   plus a draggable filled segment between them for moving the whole window. */
.nc-slider {
	position: relative;
	height: 44px;
	margin: 0.25em 0;
}

.nc-slider-track {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 6px;
	transform: translateY(-50%);
	background: #ddd;
	border-radius: 3px;
}

.nc-slider-fill {
	position: absolute;
	top: 50%;
	height: 10px;
	transform: translateY(-50%);
	background: var(--nc-accent);
	border-radius: 5px;
	cursor: grab;
	z-index: 2;
	touch-action: none;
}

.nc-slider-fill:active {
	cursor: grabbing;
}

input.nc-range {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 44px;
	margin: 0;
	background: none;
	pointer-events: none; /* only the thumbs receive pointer events */
	-webkit-appearance: none;
	appearance: none;
	z-index: 3;
}

input.nc-range::-webkit-slider-runnable-track {
	height: 44px;
	background: none;
}

input.nc-range::-moz-range-track {
	height: 44px;
	background: none;
}

input.nc-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	pointer-events: auto;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--nc-accent);
	cursor: pointer;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

input.nc-range::-moz-range-thumb {
	pointer-events: auto;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--nc-accent);
	cursor: pointer;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

input.nc-range:focus-visible::-webkit-slider-thumb {
	outline: 3px solid var(--nc-focus);
	outline-offset: 2px;
}

input.nc-range:focus-visible::-moz-range-thumb {
	outline: 3px solid var(--nc-focus);
	outline-offset: 2px;
}

/* --- Filter & layer controls ---------------------------------------- */
.nc-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 1em 1.5em;
	align-items: flex-start;
}

/* Fieldset used purely for grouping + an accessible label; no chrome. */
.nc-control {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.nc-control-legend {
	padding: 0;
	margin: 0 0 0.35em 0;
	font-size: 0.8rem;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--nc-muted);
}

/* Segmented control: buttons joined into one pill row. */
.nc-segmented {
	display: inline-flex;
	flex-wrap: wrap;
	border-radius: var(--nc-radius);
}

.nc-toggle {
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	font: inherit;
	font-size: 0.85rem;
	line-height: 1.2;
	padding: 0.4em 0.8em;
	background: #fff;
	/* !important defeats main.css's theme rule `button { color:#fff !important }`,
	   which otherwise renders unpressed (white-background) buttons white-on-white.
	   See notes/todo.md — the durable fix is to standardise button colour. */
	color: #222 !important;
	border: 1px solid #bbb;
	border-left-width: 0;
	margin: 0;
}

.nc-segmented .nc-toggle:first-child {
	border-left-width: 1px;
	border-top-left-radius: var(--nc-radius);
	border-bottom-left-radius: var(--nc-radius);
}

.nc-segmented .nc-toggle:last-child {
	border-top-right-radius: var(--nc-radius);
	border-bottom-right-radius: var(--nc-radius);
}

.nc-toggle:hover {
	background: #f2f6ff;
}

/* Pressed / active state — the segment is currently on. */
.nc-toggle[aria-pressed="true"] {
	background: var(--nc-accent);
	border-color: var(--nc-accent);
	color: #fff !important;
}

/* Keep the joined seam crisp when a pressed button sits next to another. */
.nc-toggle[aria-pressed="true"] + .nc-toggle {
	border-left-color: var(--nc-accent);
}

.nc-toggle:focus-visible {
	outline: 3px solid var(--nc-focus);
	outline-offset: 2px;
	position: relative;
	z-index: 1;
}

/* Severity buttons carry a small tier-coloured dot so the numbers read as
   severity, not arbitrary. The dot stays visible in both on and off states. */
.nc-sev-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-variant-numeric: tabular-nums;
}

.nc-sev-btn::before {
	content: '';
	width: 0.7em;
	height: 0.7em;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.35);
	background: var(--nc-chip, #ccc);
	flex: 0 0 auto;
}

.nc-sev-5 { --nc-chip: var(--nc-t5); }
.nc-sev-4 { --nc-chip: var(--nc-t4); }
.nc-sev-3 { --nc-chip: var(--nc-t3); }
.nc-sev-2 { --nc-chip: var(--nc-t2); }
.nc-sev-1 { --nc-chip: var(--nc-t1); }

/* --- Heatmap radius control ------------------------------------------ */
.nc-radius-field {
	display: flex;
	align-items: center;
	gap: 0.4em;
}

.nc-radius-field label {
	font-size: 0.85rem;
}

.nc-radius-input {
	width: 5em;
	font: inherit;
	font-size: 0.85rem;
	padding: 0.35em 0.5em;
	border: 1px solid #bbb;
	border-radius: var(--nc-radius);
	color: #222;
}

.nc-radius-input:focus-visible {
	outline: 3px solid var(--nc-focus);
	outline-offset: 2px;
}

.nc-radius-hint {
	font-size: 0.85rem;
	color: var(--nc-muted);
}

/* --- Performance cap note (weak-machine "showing newest N of M") ----- */
.nc-cap-note {
	margin: 0;
	padding: 0.5em 0.75em;
	border: 1px solid #e0c200;
	border-radius: var(--nc-radius);
	background: #fffbe6;
	color: #5c4a00;
	font-size: 0.85rem;
	line-height: 1.35;
}

/* --- Map ------------------------------------------------------------ */
.nc-map {
	height: 600px;
	width: 100%;
	border-radius: var(--nc-radius);
	background: #eee;
}

.nc-map:focus-visible {
	outline: 3px solid var(--nc-focus);
	outline-offset: 2px;
}

/* --- Legend (Leaflet control) --------------------------------------- */
.nc-legend {
	background: rgba(255, 255, 255, 0.94);
	border: 1px solid var(--nc-border);
	border-radius: var(--nc-radius);
	padding: 0.5em 0.7em;
	font-size: 0.8rem;
	line-height: 1.35;
	color: #222;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
	max-width: 15em;
}

.nc-legend-title {
	font-weight: bold;
	margin: 0 0 0.35em 0;
}

.nc-legend-row {
	display: flex;
	align-items: center;
	gap: 0.4em;
	margin: 0.15em 0;
}

.nc-legend-swatch {
	width: 14px;
	height: 14px;
	border-radius: 3px;
	border: 1px solid rgba(0, 0, 0, 0.35);
	flex: 0 0 auto;
}

.nc-legend-name {
	flex: 1 1 auto;
}

.nc-legend-count {
	font-variant-numeric: tabular-nums;
	color: var(--nc-muted);
}

.nc-legend-empty {
	color: var(--nc-muted);
	margin: 0;
}

/* --- Heat legend (Leaflet control): explains the gradient, not points  */
.nc-heat-legend {
	background: rgba(255, 255, 255, 0.94);
	border: 1px solid var(--nc-border);
	border-radius: var(--nc-radius);
	padding: 0.5em 0.7em;
	font-size: 0.78rem;
	line-height: 1.35;
	color: #222;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
	max-width: 14em;
}

.nc-heat-legend-caption {
	margin: 0 0 0.4em 0;
}

.nc-heat-legend-bar {
	height: 10px;
	border-radius: 5px;
	background: linear-gradient(to right, #2c7fb8, #41ab5d, #fec44f, #d7191c);
}

.nc-heat-legend-labels {
	display: flex;
	justify-content: space-between;
	margin-top: 0.25em;
	color: var(--nc-muted);
}

/* --- Cluster bubbles (custom, coloured by worst crime inside) -------- */
.nc-cluster {
	background: none;
}

.nc-cluster div {
	width: 36px;
	height: 36px;
	margin-left: 2px;
	margin-top: 2px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font: bold 12px "Helvetica Neue", Arial, Helvetica, sans-serif;
	border: 2px solid rgba(255, 255, 255, 0.9);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

/* --- Point tooltips (permanent labels when zoomed in) --------------- */
.leaflet-tooltip.nc-point-label {
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid var(--nc-border);
	border-radius: 3px;
	padding: 2px 6px;
	font-size: 0.78rem;
	font-weight: bold;
	color: #222;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	white-space: nowrap;
}

/* --- Leaflet popup content ------------------------------------------ */
.nc-popup {
	font-size: 0.9rem;
	line-height: 1.4;
}

.nc-popup-type {
	font-weight: bold;
}

.nc-popup-tier {
	display: inline-block;
	margin: 0.2em 0;
	padding: 1px 6px;
	border-radius: 3px;
	font-size: 0.8em;
	border: 1px solid rgba(0, 0, 0, 0.3);
}

.nc-popup-addr {
	color: var(--nc-muted);
	font-size: 0.85em;
}

/* --- Collapsible trend chart panel ---------------------------------- */
/* The panel reuses the framed details/summary look from .nc-post details,
   exactly like .nc-table-panel below it. The Plotly mount needs an explicit
   height so the library has a box to fill; it draws only while the panel is
   open (lazy, from rvacrime-map.js). */
.nc-chart {
	height: 360px;
	width: 100%;
}

/* --- Collapsed incidents panel -------------------------------------- */
/* The panel reuses the framed details/summary look from .nc-post details
   (same inward ►◄ affordance as the "What is this?" panel). The table inside
   only builds its rows while the panel is open. Inside the framed panel the
   table already sits in a bordered wrap; drop the wrap's own border so the two
   frames don't double up. */
.nc-table-panel .nc-table-wrap {
	border: 0;
	border-radius: 0;
}

/* --- Summary table -------------------------------------------------- */
.nc-table-wrap {
	border: 1px solid var(--nc-border);
	border-radius: var(--nc-radius);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.nc-table {
	width: 100%;
	min-width: 640px;
	border-collapse: collapse;
	font-size: 0.9rem;
	margin: 0;
}

.nc-table caption {
	caption-side: top;
	text-align: left;
	font-weight: bold;
	padding: 0.6em 0.75em;
}

.nc-table th,
.nc-table td {
	text-align: left;
	vertical-align: top;
	padding: 0.5em 0.75em;
	border-bottom: 1px solid var(--nc-border);
}

.nc-table thead th {
	border-bottom: 2px solid #ccc;
	white-space: nowrap;
}

.nc-table tbody tr:last-child th,
.nc-table tbody tr:last-child td {
	border-bottom: 0;
}

.nc-table-addr {
	color: var(--nc-muted);
}

.nc-table-empty {
	padding: 0.75em;
	color: var(--nc-muted);
}

/* Tier chip used in the table cell. */
.nc-tier-chip {
	display: inline-block;
	min-width: 1.4em;
	text-align: center;
	padding: 1px 6px;
	border-radius: 3px;
	font-size: 0.85em;
	border: 1px solid rgba(0, 0, 0, 0.3);
	color: #222;
}

.nc-tier-5 { background: var(--nc-t5); color: #fff; }
.nc-tier-4 { background: var(--nc-t4); }
.nc-tier-3 { background: var(--nc-t3); }
.nc-tier-2 { background: var(--nc-t2); }
.nc-tier-1 { background: var(--nc-t1); }

/* Rows fly the map to their incident on click / Enter / Space. */
.nc-row-click {
	cursor: pointer;
}

.nc-row-click:hover {
	background: #f2f6ff;
}

.nc-row-click:focus-visible {
	outline: 3px solid var(--nc-focus);
	outline-offset: -3px;
}

/* --- Stacked-incident popup (item 1) -------------------------------- */
/* When several incidents share one block-level point, the marker popup shows a
   compact, scrollable table instead of a single incident. */
.nc-stack-popup {
	font-size: 0.85rem;
}

.nc-stack-head {
	margin: 0 0 0.4em 0;
	font-weight: bold;
}

.nc-stack-sub {
	font-weight: normal;
	color: var(--nc-muted);
}

.nc-stack-scroll {
	max-height: 12em;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--nc-border);
	border-radius: var(--nc-radius);
}

.nc-stack-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.8rem;
}

.nc-stack-table th,
.nc-stack-table td {
	text-align: left;
	vertical-align: top;
	padding: 0.3em 0.5em;
	border-bottom: 1px solid var(--nc-border);
}

.nc-stack-table thead th {
	position: sticky;
	top: 0;
	background: #f7f7f7;
	border-bottom: 2px solid #ccc;
	white-space: nowrap;
	font-size: 0.85rem;
	font-weight: 700;
	color: #111;
}

.nc-stack-table tbody tr:last-child td {
	border-bottom: 0;
}

.nc-stack-date {
	white-space: nowrap;
}

.nc-stack-addr {
	color: var(--nc-muted);
}

/* --- Collapsible legend header (item 6) ----------------------------- */
/* Each on-map legend gets a header button. On mobile the body starts collapsed
   (class set from JS); on desktop it starts open. Button state is in aria-expanded. */
.nc-legend-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5em;
	width: 100%;
	appearance: none;
	-webkit-appearance: none;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	font-weight: bold;
	font-size: 0.8rem;
	line-height: 1.2;
	color: #222 !important;
	cursor: pointer;
}

.nc-legend-toggle:hover {
	color: #000 !important;
}

.nc-legend-toggle:focus-visible {
	outline: 3px solid var(--nc-focus);
	outline-offset: 2px;
}

.nc-legend-toggle-icon::before {
	content: '\25BC';
	font-size: 0.7em;
	color: var(--nc-muted);
}

.nc-legend-toggle[aria-expanded="true"] .nc-legend-toggle-icon::before {
	content: '\25B2';
}

.nc-legend-body {
	margin-top: 0.4em;
}

.nc-collapsed .nc-legend-body {
	display: none;
}

/* --- Address search: map-corner control ------------------------------ */
/* A Leaflet control (topleft, added after the default zoom control so it
   sits directly under the +/- buttons). Collapsed = a single magnifying-glass
   button matching the zoom buttons' size via the shared `.leaflet-bar a`
   rules. Expanded = an input + autocomplete dropdown floating beside it. */
.nc-addr-ctrl {
	position: relative;
}

.nc-addr-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #444;
}

.nc-addr-btn:focus-visible {
	outline: 3px solid var(--nc-focus);
	outline-offset: -2px;
	z-index: 1;
	position: relative;
}

.nc-addr-panel {
	display: none;
	position: absolute;
	top: 0;
	left: 34px;
	z-index: 1;
	width: 16em;
	max-width: calc(100vw - 4em);
	background: #fff;
	border: 1px solid var(--nc-border);
	border-radius: var(--nc-radius);
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
	padding: 0.4em;
}

.nc-addr-ctrl.nc-addr-open .nc-addr-panel {
	display: block;
}

.nc-addr-input {
	width: 100%;
	font: inherit;
	font-size: 0.85rem;
	padding: 0.4em 0.6em;
	border: 1px solid #bbb;
	border-radius: var(--nc-radius);
	color: #222;
}

.nc-addr-input:focus-visible {
	outline: 3px solid var(--nc-focus);
	outline-offset: 2px;
}

.nc-addr-list {
	list-style: none;
	margin: 0.4em 0 0 0;
	padding: 0;
	max-height: 14em;
	overflow-y: auto;
	border: 1px solid var(--nc-border);
	border-radius: var(--nc-radius);
}

.nc-addr-list[hidden] {
	display: none;
}

.nc-addr-option {
	padding: 0.4em 0.6em;
	font-size: 0.85rem;
	line-height: 1.3;
	cursor: pointer;
	border-bottom: 1px solid var(--nc-border);
}

.nc-addr-option:last-child {
	border-bottom: 0;
}

.nc-addr-option:hover,
.nc-addr-option-active {
	background: #f2f6ff;
}

/* --- Map tools: locate me & draw an area ----------------------------- */
/* A second Leaflet control (topleft, added after the search control so it sits
   under it). Two icon buttons sharing one `.leaflet-bar`, sized by the same
   `.leaflet-bar a` rules as the zoom and search buttons. */
.nc-tools-ctrl {
	position: relative;
}

/* The icon colour rules are scoped through `.nc-tools-ctrl` on purpose: leaflet.css
   sets `.leaflet-bar a { color: black }`, which outranks a lone `.nc-tool-btn`. Two
   classes beat one-class-plus-a-type, so this wins without `!important`. */
.nc-tools-ctrl .nc-tool-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #444;
}

.nc-tools-ctrl .nc-tool-btn:focus-visible {
	outline: 3px solid var(--nc-focus);
	outline-offset: -2px;
	z-index: 1;
	position: relative;
}

/* Engaged = currently drawing, or an area filter is active. Matches the accent
   fill the in-page `.nc-toggle[aria-pressed="true"]` buttons use. */
.nc-tools-ctrl .nc-tool-btn[aria-pressed="true"],
.nc-tools-ctrl .nc-tool-btn[aria-pressed="true"]:hover,
.nc-tools-ctrl .nc-tool-btn[aria-pressed="true"]:focus {
	background-color: var(--nc-accent);
	color: #fff;
}

/* Waiting on the browser's location prompt. */
.nc-tools-ctrl .nc-tool-btn[aria-busy="true"] {
	opacity: 0.5;
	cursor: progress;
}

/* --- While drawing an area ------------------------------------------- */
/* Crosshair cursor, and incident markers/clusters go pointer-inert so a click
   lands on the map as a new corner instead of opening a popup. */
.nc-map.nc-drawing,
.nc-map.nc-drawing .leaflet-interactive {
	cursor: crosshair;
}

.nc-map.nc-drawing .leaflet-marker-pane,
.nc-map.nc-drawing .leaflet-overlay-pane {
	pointer-events: none;
}

.nc-draw-vertex {
	pointer-events: none;
}

/* The draw button holds both of its icons at once and toggles them with `hidden`,
   so the element the click landed on is never detached mid-event. The explicit
   `display` pair is needed because a flex display would otherwise beat `hidden`. */
.nc-tools-ctrl .nc-tool-icon {
	display: flex;
}

.nc-tools-ctrl .nc-tool-icon[hidden] {
	display: none;
}

/* --- Editing a committed area ---------------------------------------- */
/* Corner and midpoint handles are 24x24 transparent markers (the WCAG 2.2 AA
   target size) with a smaller dot drawn centred inside, so the tap target is
   generous without the map looking studded with big blobs. */
.nc-area-handle {
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	cursor: grab;
}

.nc-area-handle span {
	display: block;
	box-sizing: border-box;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--nc-accent);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.nc-area-handle:active {
	cursor: grabbing;
}

/* Midpoints read as "not a corner yet": smaller and faded. */
.nc-area-handle-mid span {
	width: 10px;
	height: 10px;
	border-width: 2px;
	opacity: 0.55;
}

.nc-area-shape {
	cursor: move;
}

/* While the whole shape is being dragged: keep the grabbing cursor everywhere and
   stop incident markers swallowing the pointer mid-gesture. */
.nc-map.nc-area-dragging,
.nc-map.nc-area-dragging .leaflet-interactive {
	cursor: grabbing;
}

.nc-map.nc-area-dragging .leaflet-marker-pane {
	pointer-events: none;
}

/* Running incident count, shown only while an area is being dragged or reshaped.
   Hidden from assistive tech — the live region already announces the final count
   once the drag ends, and a per-frame announcement would be unusable. */
.nc-area-readout {
	padding: 4px 8px;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
	font-size: 0.8rem;
	font-weight: 600;
	color: #222;
}

/* --- Search pin & distance rings (items 7–8) ------------------------ */
/* The pin (an SVG teardrop) and the ring labels use a distinct blue so they read
   as a separate layer from the severity-coloured incident points. */
.nc-search-pin {
	background: none;
	border: 0;
}

.nc-ring-label {
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid #2540c9;
	border-radius: 3px;
	padding: 0 4px;
	font-size: 0.72rem;
	font-weight: bold;
	line-height: 16px;
	color: #2540c9;
	text-align: center;
	white-space: nowrap;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* --- Mobile ---------------------------------------------------------- */
@media screen and (max-width: 736px) {
	.nc-map {
		height: 440px;
	}

	.nc-chart {
		height: 280px;
	}

	/* Drop the expanded search panel below the button instead of to the side —
	   there is less spare width next to the corner on narrow screens. */
	.nc-addr-panel {
		left: 0;
		top: 34px;
		width: 15em;
	}
}

/* --- Print: title, summary, map and chart only ----------------------- */
/* The page is entirely interactive, so Ctrl+P gets a purpose-built layout: the
   site chrome, the prose panel, every control and the 500-row incidents table
   are dropped, and rvacrime-map.js fills #nc-print-summary with a plain-English
   description of what is on the page (plus a link back to the live view) just
   before the browser takes its snapshot. Modern `break-inside` is paired with
   the legacy `page-break-inside` for older print engines, as in ROEcalc.css. */
.nc-print-summary {
	display: none;
}

/* Scoped to this stylesheet, which only rvacrime.html loads. */
@page {
	margin: 0.5in;
}

@media print {
	/* Site chrome, the "What is this?" prose, the controls, the slider and the
	   incidents table — none of it is usable on paper. */
	#nav,
	#copyright,
	.nc-post > details,
	.nc-controls,
	.nc-slider-wrap,
	.nc-table-panel {
		display: none;
	}

	/* Interactive map chrome. The attribution stays: it is a licence condition. */
	.leaflet-control-zoom,
	.nc-addr-ctrl,
	.nc-tools-ctrl,
	.leaflet-popup {
		display: none;
	}

	/* The heat gradient, the tier chips and the legend swatches carry the
	   meaning, so they have to survive the browser's "skip backgrounds" default.
	   Vendored leaflet.css already does the same for .leaflet-control. */
	.nc-app {
		print-color-adjust: exact;
		-webkit-print-color-adjust: exact;
	}

	.nc-print-summary {
		display: block;
		font-size: 0.8rem;
		line-height: 1.45;
		margin: 0;
	}

	.nc-print-summary p {
		margin: 0 0 0.25em;
	}

	/* The link back to the live view is long; let it break anywhere. */
	.nc-print-link {
		color: #444;
		word-break: break-all;
	}

	/* The chart panel is forced open before printing, so strip its disclosure
	   chrome and let the summary read as a plain caption. */
	.nc-chart-panel .nc-chart-summary {
		list-style: none;
		cursor: auto;
		font-weight: bold;
	}

	.nc-chart-panel .nc-chart-summary::marker,
	.nc-chart-panel .nc-chart-summary::-webkit-details-marker {
		display: none;
	}

	.nc-chart-panel .nc-chart-summary::before,
	.nc-chart-panel .nc-chart-summary::after {
		content: none;
	}

	/* Print dimensions must stay AT OR BELOW the on-screen ones (600px and
	   360px). Shrinking a Leaflet map needs no new tiles; growing it exposes
	   area whose tiles will not have loaded before the snapshot, and prints grey. */
	.nc-map {
		height: 5.5in;
	}

	.nc-chart {
		height: 2.75in;
	}

	/* Keep each of these whole rather than split across a page break. */
	#nc-map,
	.nc-chart-panel,
	.nc-print-summary,
	.nc-legend {
		break-inside: avoid;
		page-break-inside: avoid;
	}
}