/* Select Spectrum brand variables (web style guide v2.2) */
		:root {
			--font-primary: 'Nunito', sans-serif;
			--color-navy: #0A115E;
			--color-dark-blue: #133991;
			--color-cta-blue: #1F64FF;
			/* hover darkens (dark blue) rather than lightens — white 13.5px text
			   on the old #5287FF was 3.4:1, under the AA line */
			--color-cta-hover: #133991;
			--color-cta-active: #0854FF;
			--color-body-text: #555555;
			--color-text-secondary: #666666; /* brand-family secondary gray, 5.7:1 on white */
			--color-border: #E3E5E8;         /* the one hairline gray */
			--color-surface: #F2F7FD;                /* pale blue hover surface */
			--color-surface-selected: #EEF4FD;       /* selected chip/tab fill */
			--color-surface-selected-hover: #DFEAFC;
			--color-surface-neutral: #F1F3F4;        /* neutral gray surface (tiles, disabled) */
			--color-border-strong: #CCCCCC;          /* form-control borders */
			--color-error: #C4151C;                  /* one red for every error signal */
			--color-white: #FFFFFF;
			/* type scale — six steps; anything smaller/larger is icon sizing.
			   --fs-16 doubles as the phone input size (16px stops iOS zoom). */
			--fs-11: 11px;
			--fs-12: 12px;
			--fs-13: 13px;
			--fs-14: 14px;
			--fs-16: 16px;
			--fs-18: 18px;
			/* corner radii — controls, cards, panels; pills keep 999/50% */
			--r-control: 6px;
			--r-card: 10px;
			--r-panel: 12px;
				--rail-h: calc(62px + env(safe-area-inset-bottom, 0px));
		}
		html, body {
			height: 100vh; height: 100dvh;
			margin: 0;
			font-family: var(--font-primary);
			color: var(--color-body-text);
			background: #fff;
		}
		button, tr, li { -webkit-tap-highlight-color: transparent; }
		arcgis-map {
			height: 100vh; height: 100dvh;
			/* keep the map chrome (zoom tooltips, attribution) in the brand font
			   instead of Calcite's default — a third family otherwise */
			font-family: var(--font-primary);
			--calcite-sans-family: var(--font-primary);
		}
		/* ---- Top app bar: brand + always-visible search + Contact Us ---- */
		/* Lives at the top of the results column — the map keeps the full height */
		#app-bar {
			flex: none;
			display: flex;
			align-items: center;
			flex-wrap: wrap; /* narrow splits stack instead of overflowing */
			gap: 10px 14px;
			background: #fff;
			border-bottom: 1px solid var(--color-border);
			padding: 10px 16px;
		}
		#brand { display: flex; align-items: center; flex: none; text-decoration: none; }
		#brand-logo { height: 34px; width: auto; display: block; }
		#appbar-search-slot { flex: 1 1 200px; min-width: 0; }
		#appbar-search-slot #search-box { margin: 0; max-width: none; width: 100%; }
		#appbar-search-slot #search-input { width: 100%; }
		#appbar-contact {
			margin-left: auto;
			font: inherit;
			font-size: var(--fs-14);
			font-weight: 700;
			color: #fff;
			background: var(--color-cta-blue);
			border: none;
			border-radius: var(--r-control);
			padding: 10px 20px;
			cursor: pointer;
		}
		@media (min-width: 769px) {
			/* Split view: table left (55%), map right (45%), full height */
			arcgis-map {
				position: fixed;
				top: 0;
				left: var(--split);
				right: 0;
				bottom: 0;
				width: auto;
				height: auto;
				margin-top: 0;
			}
			#split-handle {
				position: fixed;
				touch-action: none; /* drag resizes instead of scrolling on touch tablets */
				top: 0;
				bottom: 0;
				left: calc(var(--split) - 11px);
				width: 22px;
				z-index: 23;
				cursor: col-resize;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			#split-handle::after {
				content: '';
				width: 8px;
				height: 80px;
				border-radius: var(--r-control);
				/* ≥3:1 on white per WCAG non-text contrast — the grip is how you
				   find the resize control at all */
				background: #8a919b;
			}
			#split-handle:hover::after, #split-handle:focus-visible::after { background: var(--color-cta-blue); }
			body.stage-open #split-handle { display: none; }
		}
		/* Touch devices (tablets): a finger needs a much bigger grab zone than a
		   mouse pointer, and a grip you can actually see to drag */
		@media (min-width: 769px) and (pointer: coarse) {
			#split-handle { left: calc(var(--split) - 22px); width: 44px; }
			#split-handle::after { width: 10px; height: 96px; background: #8a919b; box-shadow: 0 0 0 4px rgba(255,255,255,0.6); }
		}
		@media (min-width: 769px) {
			body.stage-open arcgis-map { left: 0; } /* the Stage gets the full-bleed map */
			/* panel states are a phone concept now — neutralize them here */
			#results-panel.collapsed #results-scroll { display: block; }
			#bar-pull, #results-expand, #results-collapse { display: none !important; }
			/* one Contact Us — the app bar's; the header copy goes */
			#results-header #inquiry-cta { display: none; }
			/* one control column on the map: rail sits under the zoom/home stack.
			   Filter belongs with the results — its button lives in the list header */
			body #tool-rail { left: calc(var(--split) + 15px); }
			#rail-filters { display: none; }
		}
		@media (max-width: 768px) {
			/* phones keep the brand: a slim logo row above the search pill.
		   Contact lives in the sticky bar and search in the results header,
		   so the app bar reduces to just the lockup. */
		#app-bar { padding: 10px 14px 0; min-height: 0; }
		#brand-logo { height: 28px; }
		#appbar-contact { display: none; }
		/* the collapsed bottom bar (map tab) stays slim — no logo row there */
		#results-panel.collapsed #app-bar { display: none; }
			#split-handle { display: none; }
		}
		/* ---- Results table panel ---- */
		:root { --split: 55%; } /* draggable list/map divider position */
		#results-panel {
			position: absolute;
			top: 0;
			left: 0;
			right: calc(100% - var(--split)); /* the map owns the rest */
			bottom: 0;
			z-index: 20;
			background: #fff;
			border-right: 1px solid var(--color-border);
			display: flex;
			flex-direction: column;
			overflow: hidden;
		}
		#results-panel.collapsed { height: auto; overflow: visible; }
		#results-panel.collapsed #results-scroll { display: none; }
		#bar-pull {
			display: none;
			position: absolute;
			top: -17px;
			left: 50%;
			transform: translateX(-50%);
			width: 58px;
			height: 20px;
			border: none;
			background: #fff;
			border-radius: var(--r-panel) var(--r-panel) 0 0;
			box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.07);
			align-items: center;
			justify-content: center;
			color: var(--color-cta-blue);
			cursor: pointer;
		}
		#bar-pull .material-icons { font-size: 20px; }
		#results-panel.collapsed #bar-pull { display: flex; }
		#results-panel.collapsed #results-header { cursor: pointer; }
		#results-panel.fullscreen {
			top: 12px;
			left: 12px;
			right: 12px;
			bottom: 12px;
			height: auto;
		}
		/* ---- One-line orientation note (dismissible) ----
		   In flow at the top of the results column, so it pushes content down
		   instead of covering the app bar's search and Contact Us. */
		#intro-note {
			display: flex;
			align-items: center;
			gap: 10px;
			margin: 8px 16px 2px;
			background: var(--color-surface);
			border: 1px solid #d7e6f8;
			border-radius: var(--r-card);
			padding: 8px 10px 8px 12px;
			font-size: var(--fs-13);
			line-height: 1.45;
			color: var(--color-body-text);
		}
		#intro-note[hidden] { display: none; }
		#intro-note strong { color: var(--color-dark-blue); }
		#intro-dismiss {
			flex: none;
			border: none;
			background: none;
			font-size: 30px;
			line-height: 1;
			color: var(--color-text-secondary);
			cursor: pointer;
			padding: 8px 14px;
			min-width: 44px;
			min-height: 44px;
		}
		#intro-dismiss:hover { color: #333333; }
		/* ---- Color key inside the FAQ ---- */
		#faq-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; margin: 8px 0 2px; }
		.faq-swatch-row {
			display: flex;
			align-items: center;
			gap: 8px;
			width: 100%;
			font: inherit;
			font-size: var(--fs-13);
			color: var(--color-body-text);
			text-align: left;
			background: none;
			border: none;
			border-radius: var(--r-control);
			padding: 7px 8px;
			min-height: 40px;
			cursor: pointer;
		}
		.faq-swatch-row:hover { background: var(--color-surface); }
		.faq-swatch-row:focus-visible { outline: 2px solid var(--color-cta-blue); outline-offset: -2px; }
		.faq-swatch-row.off { opacity: 0.4; }
		.faq-swatch-row svg { width: 15px; height: 15px; flex: none; }
		#faq-legend-hint { font-size: var(--fs-12); color: var(--color-text-secondary); margin: 2px 0 6px; }
		@media (max-width: 480px) { #faq-legend { grid-template-columns: 1fr; } }
		/* ---- Desktop Contact Us popover (anchored to its button) ---- */
		#inquiry-panel.popover { top: auto; left: auto; }
		/* ---- Fatal-error net: friendly message instead of a blank page ---- */
		#fatal-note {
			position: fixed;
			inset: 0;
			z-index: 90;
			display: flex;
			align-items: center;
			justify-content: center;
			background: rgba(245, 247, 250, 0.96);
			padding: 20px;
		}
		#fatal-note[hidden] { display: none; }
		.fatal-card {
			max-width: 420px;
			background: #fff;
			border-radius: var(--r-panel);
			box-shadow: 0 10px 34px rgba(20, 40, 80, 0.18);
			padding: 26px 28px;
			font-size: var(--fs-14);
			line-height: 1.55;
			text-align: center;
		}
		.fatal-card strong { display: block; font-size: 17px; margin-bottom: 8px; color: var(--color-dark-blue); }
		.fatal-card a { color: var(--color-cta-blue); }
		#fatal-retry {
			margin-top: 14px;
			font: inherit;
			font-weight: 700;
			color: #fff;
			background: var(--color-cta-blue);
			border: none;
			border-radius: var(--r-control);
			padding: 11px 26px;
			cursor: pointer;
		}
		/* the Retry button in the load-failure message reads as a link, like
		   the contact-us link beside it (.linklike proper is scoped to the
		   band bulk row) */
		#zero-results-msg .linklike {
			background: none;
			border: none;
			padding: 0;
			font: inherit;
			color: var(--color-cta-blue);
			text-decoration: underline;
			cursor: pointer;
		}
		/* the app pin marks the full-screen phone pages as still-Spectrum-Search */
		.drawer-pin { display: none; }
		@media (max-width: 768px) {
			.drawer-pin { display: inline-block; height: 22px; width: auto; vertical-align: -5px; margin-right: 8px; }
		}
		/* the company signs its own lead-capture forms */
		.form-brand { display: block; height: 20px; width: auto; margin: 0 0 10px; }
		/* Leased/Sold view: the report says so before anything else */
		#report-sold-badge {
			display: inline-block;
			background: var(--color-navy);
			color: #fff;
			font-size: var(--fs-11);
			font-weight: 700;
			letter-spacing: 0.5px;
			text-transform: uppercase;
			padding: 3px 10px;
			border-radius: 999px;
			margin-bottom: 8px;
		}
		/* inline form feedback (validation, success, failure) */
		.form-msg {
			margin: 8px 0 0;
			font-size: var(--fs-13);
			line-height: 1.4;
			color: var(--color-body-text);
		}
		/* brand red, darkened enough to pass AA at this size */
		.form-msg-error { color: var(--color-error); }
		.form-msg a { color: var(--color-cta-blue); }
		/* bigger, easier close targets on all drawers */
		#report-header button, #inquiry-header button, #filters-side-close { font-size: 24px; padding: 6px 12px; }
		/* the close controls are all the Material 'close' icon now (brand: one icon set) */
		#band-acc-close .material-icons, #inquiry-close .material-icons, #faq-close .material-icons,
		#report-close .material-icons, #intro-dismiss .material-icons { font-size: 22px; vertical-align: middle; }
		@media (max-width: 768px) {
			#intro-note { margin: 8px 12px 2px; }
			/* the collapsed bottom bar (phone Map tab) must stay slim — the
			   banner otherwise rides inside it and eats a third of the map */
			#results-panel.collapsed #intro-note { display: none; }
			/* phones already have the full-width Clear row in the chips area
			   (double ID beats the #results-header .tray-btn display rule) */
			#results-header #desktop-clear { display: none; }
		}
		#results-scroll { padding-bottom: 6px; }
		#results-expand .material-icons, #results-collapse .material-icons { font-size: 21px; vertical-align: middle; }
		/* ---- License report panel (same docked-drawer anchor, sits above) ---- */
		#report-panel {
			z-index: 27;
			width: min(380px, calc(100vw - 80px));
			font-size: var(--fs-14);
			color: var(--color-body-text);
		}
		/* ---- Stat-card license report ---- */
		#report-hero { padding: 12px 16px 10px; border-left: 4px solid transparent; }
		.report-market { font-size: var(--fs-16); font-weight: 700; line-height: 1.3; }
		.report-hero-row { display: flex; gap: 22px; margin-top: 9px; }
		.report-hero-val { font-size: var(--fs-13); font-weight: 600; margin-top: 1px; }
		.report-hero-val a { color: var(--color-cta-blue); }
		.report-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 2px 14px 8px; }
		.report-stat { background: var(--color-surface-neutral); border-radius: var(--r-card); padding: 9px 10px 10px; }
		.report-stat.wide { grid-column: 1 / -1; }
		.rs-label { display: block; font-size: var(--fs-11); font-weight: 600; color: var(--color-text-secondary); }
		.rs-value { display: block; font-size: var(--fs-16); font-weight: 700; margin-top: 2px; }
		.rs-help { border: none; background: none; padding: 0 2px; cursor: pointer; color: var(--color-cta-blue); vertical-align: middle; }
		.rs-help .material-icons { font-size: var(--fs-16); vertical-align: -3px; }
		.report-maplink { padding: 2px 14px 12px; }
		.report-maplink a {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 8px;
			width: 100%;
			box-sizing: border-box;
			min-height: 44px;
			font-size: var(--fs-14);
			font-weight: 700;
			color: var(--color-cta-blue);
			background: #fff;
			border: 1.5px solid var(--color-cta-blue);
			border-radius: var(--r-control);
			padding: 10px 16px;
			text-decoration: none;
		}
		.report-maplink a:hover { background: var(--color-surface); }
		.report-maplink .material-icons { font-size: 19px; }
		#report-header, #inquiry-header, #faq-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 10px 14px;
			font-weight: 700;
			font-size: var(--fs-14);
			border-bottom: 1px solid var(--color-border);
		}
		#report-header button, #inquiry-header button, #faq-header button {
			font: inherit;
			font-size: 26px;
			line-height: 1;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			min-width: 44px;
			min-height: 44px;
			margin: -6px -8px -6px 0; /* bigger target without growing the header */
			border: none;
			border-radius: var(--r-card);
			background: none;
			color: var(--color-text-secondary);
			cursor: pointer;
			padding: 0;
		}
		#report-header button:hover, #inquiry-header button:hover, #faq-header button:hover { background: var(--color-surface-neutral); color: #333333; }
		#faq-panel {
			z-index: 27;
			width: min(400px, calc(100vw - 80px));
			font-size: var(--fs-14);
			color: var(--color-body-text);
		}
		#faq-body { padding: 4px 16px 16px; }
		#faq-body h4 {
			margin: 14px 0 3px;
			font-size: var(--fs-14);
			font-weight: 700;
			color: var(--color-dark-blue);
		}
		#faq-body p { margin: 0 0 2px; line-height: 1.5; color: var(--color-body-text); }
		#faq-body a { color: var(--color-cta-blue); }
		#report-body table {
			width: 100%;
			border-collapse: collapse;
		}
		#report-body th, #report-body td {
			text-align: left;
			padding: 8px 14px;
			border-bottom: 1px solid var(--color-border);
			vertical-align: middle;
		}
		#report-body th {
			width: 38%;
			font-weight: 600;
			color: var(--color-text-secondary);
			white-space: nowrap;
		}
		#report-body a { color: var(--color-cta-blue); }
		.band-swatch {
			display: inline-block;
			vertical-align: -2px;
			margin-right: 6px;
		}
		.report-contact {
			padding: 12px 14px 16px;
		}
		.report-contact h4 {
			margin: 0 0 4px;
			font-size: var(--fs-14);
		}
		.report-contact p {
			margin: 0 0 10px;
			color: var(--color-text-secondary);
			font-size: var(--fs-13);
		}
		.report-contact label {
			display: block;
			font-size: var(--fs-12);
			font-weight: 600;
			margin: 8px 0 3px;
		}
		.report-contact input {
			width: 100%;
			box-sizing: border-box;
			font: inherit;
			font-size: var(--fs-13);
			padding: 7px 9px;
			border: 1px solid var(--color-border-strong);
			border-radius: var(--r-control);
		}
		.report-contact input.invalid { border-color: var(--color-error); }
		#contact-submit, #inquiry-submit {
			margin-top: 12px;
			font: inherit;
			font-size: var(--fs-14);
			font-weight: 700;
			color: #fff;
			background: var(--color-cta-blue);
			border: none;
			border-radius: var(--r-control);
			width: 100%;
			box-sizing: border-box;
			padding: 11px 0;
			cursor: pointer;
		}
		/* disabled = visibly inert, not a navy that impersonates the hover state */
		#contact-submit:disabled, #inquiry-submit:disabled {
			color: var(--color-text-secondary);
			background: var(--color-surface-neutral);
			cursor: default;
		}
		/* ---- Legend rows (inside the Filters & Legend drawer) ---- */

		#filter-band-list {
			list-style: none;
			margin: 0;
			padding: 6px 0 10px;
		}
		#filter-band-list li {
			display: flex;
			align-items: center;
			gap: 8px;
			padding: 5px 14px;
			cursor: pointer;
		}
		#filter-band-list li:hover { background: var(--color-surface); }
		#filter-band-list li.off { opacity: 0.45; }
		#filter-band-list input[type="checkbox"] {
			accent-color: var(--color-cta-blue);
			flex: none;
		}
		#filter-band-list .band-swatch { flex: none; margin: 0; }
		/* ---- Left icon rail: search + filters (matches the live app's pattern) ---- */
		#tool-rail {
			position: absolute;
			top: 132px; /* below the map's zoom/home column */
			left: 15px;
			z-index: 26;
			display: flex;
			flex-direction: column;
			gap: 6px;
		}
		.rail-btn {
			width: 36px;
			height: 36px;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #fff;
			border: none;
			border-radius: var(--r-card);
			box-shadow: 0 2px 8px rgba(20, 40, 80, 0.10);
			color: var(--color-body-text);
			cursor: pointer;
			transition: box-shadow 0.16s ease, background 0.16s ease, transform 0.12s ease;
		}
		.rail-btn:hover { background: var(--color-surface); box-shadow: 0 4px 14px rgba(20, 40, 80, 0.16); transform: translateY(-1px); }
		.rail-btn:focus { outline: none; }
		.rail-btn:focus-visible { outline: 2px solid var(--color-cta-blue); outline-offset: 2px; }
		/* active = color + tint, so color isn't the only signal */
		.rail-btn.active { color: var(--color-cta-blue); background: var(--color-surface-selected); }
		.rail-btn .material-icons { font-size: 19px; }
		.rail-btn .rail-label { display: none; }
		#rail-table-btn { display: none; } /* phone bottom bar only */
			#rail-map-btn { display: none; } /* phone bottom bar only */
		/* Everything the rail opens docks as a consistent left drawer */
		.rail-drawer {
			position: absolute;
			top: 70px;
			left: 60px; /* clear of the zoom/home column */
			z-index: 26;
			width: 300px;
			box-sizing: border-box;
			max-height: calc(100% - 84px);
			overflow: auto;
			background: #fff;
			border-radius: var(--r-panel);
			box-shadow: 0 10px 34px rgba(20, 40, 80, 0.14);
		}
		.rail-drawer[hidden] { display: none; }
		/* ---- License Stage (desktop): a clicked license takes over the screen —
		   full-height report column on the left, the map (others dimmed) everywhere else ---- */
		@media (min-width: 769px) {
			body.stage-open #results-panel,
			body.stage-open #tool-rail,
			body.stage-open #filters-panel,
			body.stage-open #inquiry-panel,
			body.stage-open #appbar-contact,
			body.stage-open #intro-note { display: none !important; }
			body.stage-open #report-panel {
				top: 12px;
				left: 12px;
				bottom: 12px;
				width: 420px;
				max-height: none;
			}
			body.stage-open #faq-panel { position: absolute; left: 448px; top: 74px; width: min(400px, calc(100vw - 470px)); max-height: calc(100vh - 320px); overflow: auto; } /* clears the related strip below */
			body.stage-open #stage-back { display: inline-flex; }
			/* The zoom/home widgets sit at the map element's top-left, which the
			   full-bleed Stage puts UNDER the report column (SDK 5.0 components
			   ignore view.padding for widget placement). Shift them right of the
			   column and below the Back pill so they stay usable. */
			body.stage-open arcgis-zoom,
			body.stage-open arcgis-home { transform: translate(448px, 44px); }
		}
		#stage-back {
			display: none;
			position: fixed;
			top: 20px;
			left: 448px;
			z-index: 28;
			align-items: center;
			gap: 6px;
			font: inherit;
			font-size: var(--fs-13);
			font-weight: 600;
			color: var(--color-body-text);
			background: #fff;
			border: none;
			border-radius: 20px;
			box-shadow: 0 2px 10px rgba(20, 40, 80, 0.18);
			padding: 9px 16px 9px 12px;
			cursor: pointer;
		}
		#stage-back .material-icons { font-size: var(--fs-18); color: var(--color-cta-blue); }
		#stage-back:hover { background: var(--color-surface); }
		/* ---- Related licenses strip (License Stage, desktop) ---- */
		#related-strip {
			display: none;
			position: fixed;
			left: 448px;
			right: 12px;
			bottom: 12px;
			z-index: 25;
			background: #fff;
			border-radius: var(--r-panel);
			box-shadow: 0 4px 18px rgba(20, 40, 80, 0.16);
			padding: 10px 12px 12px;
		}
		@media (min-width: 769px) {
			body.stage-open #related-strip { display: block; }
		}
		#related-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
		#related-title { font-size: var(--fs-13); font-weight: 700; color: var(--color-body-text); }
		#related-head button {
			border: none;
			background: none;
			color: var(--color-cta-blue);
			cursor: pointer;
			padding: 2px 6px;
		}
		#related-head button .material-icons { font-size: 22px; }
		#related-scroller {
			display: flex;
			gap: 10px;
			overflow-x: auto;
			scroll-snap-type: x proximity;
			padding-bottom: 2px;
		}
		.related-empty { font-size: var(--fs-13); color: var(--color-text-secondary); padding: 14px 4px; }
		.related-card {
			flex: 0 0 auto;
			scroll-snap-align: start;
			display: flex;
			width: 230px;
			text-align: left;
			font: inherit;
			background: #fff;
			border: 1px solid var(--color-border);
			border-radius: var(--r-card);
			overflow: hidden;
			cursor: pointer;
			padding: 0;
		}
		/* Sold-view cross-sell: exactly 3 cards share the full row, so there is
		   no dead space and the long composite call signs stop truncating */
		#related-scroller.fill .related-card { flex: 1 1 0; width: auto; min-width: 230px; }
		.related-card:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); }
		.related-stripe { width: 4px; flex: none; }
		.related-body { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; min-width: 0; }
		.related-tag { font-size: var(--fs-11); font-weight: 700; color: var(--color-cta-blue); text-transform: uppercase; letter-spacing: 0.3px; }
		.related-lbl { font-size: var(--fs-11); font-weight: 600; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.3px; margin-top: 2px; }
		.related-market { font-size: var(--fs-13); font-weight: 700; color: var(--color-body-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
		.related-sub, .related-meta { font-size: var(--fs-11); color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
		/* ---- Search + Filter live in the results header ---- */
		#search-box {
			position: relative;
			z-index: 35; /* autofill list paints above the card grid */
			flex: 1;
			max-width: 420px;
			margin: 0 14px;
		}
		#search-box {
			position: relative;
			display: flex;
			align-items: center;
		}
		.tray-search-icon {
			position: absolute;
			left: 11px;
			font-size: 19px;
			color: var(--color-text-secondary);
			pointer-events: none;
		}
		#search-input {
			width: 100%;
			box-sizing: border-box;
			font: inherit;
			font-size: var(--fs-14);
			padding: 10px 10px 10px 36px;
			border: none;
			border-radius: var(--r-card);
			background: transparent;
		}
		#search-input:focus {
			background: var(--color-surface);
		}
		#results-header .tray-btn {
			display: inline-flex;
			align-items: center;
			gap: 6px;
			font: inherit;
			font-size: var(--fs-13);
			font-weight: 700;
			line-height: 1;
			color: var(--color-dark-blue); /* AA contrast on the light pill */
			background: var(--color-surface-selected);
			border: 1.5px solid var(--color-cta-blue);
			border-radius: var(--r-card);
			padding: 9px 16px;
			margin-right: 10px;
			cursor: pointer;
			white-space: nowrap;
		}
		#results-header .tray-btn:hover { background: var(--color-surface-selected-hover); }
		/* Clear reads as off until a filter gives it something to do */
		#results-header #desktop-clear:disabled {
			color: var(--color-border-strong);
			border-color: var(--color-border);
			background: none;
			cursor: default;
		}
		#results-header .tray-btn:focus { outline: none; }
		#results-header .tray-btn:focus-visible { outline: 2px solid var(--color-cta-blue); outline-offset: 2px; }
		#results-header .tray-btn.active { color: #fff; background: var(--color-cta-blue); border-color: var(--color-cta-blue); }
		#results-header .tray-btn .material-icons { font-size: var(--fs-18); }
		#search-suggestions {
			position: absolute;
			top: calc(100% + 8px);
			left: 0;
			width: min(420px, 100%);
			box-sizing: border-box;
			margin: 0;
			padding: 6px 0;
			list-style: none;
			background: #fff;
			border-radius: var(--r-panel);
			box-shadow: 0 10px 34px rgba(20, 40, 80, 0.14);
			max-height: 320px;
			overflow: auto;
		}
		#search-suggestions[hidden] { display: none; }
		#search-suggestions .sugg-head {
			padding: 6px 12px 4px;
			font-size: var(--fs-12);
			font-weight: 700;
			color: var(--color-text-secondary);
			text-transform: none;
			cursor: default;
		}
		#search-suggestions .sugg-recent .material-icons {
			font-size: var(--fs-16);
			color: var(--color-text-secondary);
			vertical-align: -3px;
			margin-right: 8px;
		}
		@media (min-width: 769px) {
			#tool-rail { z-index: 19; } /* below the results panel: fullscreen table covers the icons */
		}
		#search-suggestions li {
			padding: 7px 12px;
			font-size: var(--fs-13);
			cursor: pointer;
		}
		#search-suggestions li:hover { background: var(--color-surface); }
		#search-suggestions li.kbd-active { background: var(--color-surface); }

		/* ---- Filters & Legend panel ---- */
		#filters-panel {
			font-size: var(--fs-13);
		}
		.filters-body { padding: 14px 16px 16px; }
		#band-acc {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font: inherit;
			font-size: var(--fs-13);
			padding: 7px 8px;
			border: 1px solid var(--color-border-strong);
			border-radius: var(--r-control);
			background: #fff;
			color: var(--color-body-text);
			cursor: pointer;
		}
		#band-acc .material-icons { font-size: var(--fs-18); color: var(--color-text-secondary); }
		#band-acc-content { border: 1px solid var(--color-border); border-top: none; border-radius: 0 0 var(--r-control) var(--r-control); padding: 6px 4px; }
		#band-acc-content[hidden] { display: none; }
		.band-bulk-row { display: flex; align-items: center; padding: 2px 8px 4px; font-size: var(--fs-12); font-weight: 600; }
		#band-acc-close {
			margin-left: auto;
			font: inherit;
			font-size: var(--fs-16);
			line-height: 1;
			border: none;
			background: var(--color-surface-neutral);
			border-radius: 50%;
			width: 22px;
			height: 22px;
			color: var(--color-text-secondary);
			cursor: pointer;
		}
		#band-acc-close:hover { background: var(--color-border); }
		.band-bulk-row a { color: var(--color-cta-blue); cursor: pointer; }
		.band-bulk-row button.linklike { color: var(--color-cta-blue); cursor: pointer; background: none; border: none; font: inherit; font-size: var(--fs-12); font-weight: 600; padding: 0; }
		#filter-band-list { margin: 0; padding: 0; max-height: 220px; overflow: auto; }
		#filter-band-list li { padding: 5px 8px; border-radius: var(--r-control); }
		.band-section-head {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.legend-show-toggle {
			padding: 9px 14px 11px;
			font-size: var(--fs-13);
			font-weight: 600;
			color: var(--color-cta-blue);
			cursor: pointer;
		}
		.legend-show-toggle:hover { text-decoration: underline; }
		.band-bulk { font-size: var(--fs-12); font-weight: 600; }
		.band-bulk a { color: var(--color-cta-blue); cursor: pointer; }
		/* Available vs Leased & sold — a view switch, so it reads as one pill
		   with two states rather than a link that looks like a filter action. */
		#ls-toggle {
			display: inline-flex;
			/* Sit with the results count on the right. The count carries order:9
			   and an auto margin; taking order:8 + the auto margin here absorbs
			   the free space first, so the pair ends up adjacent. */
			order: 8;
			margin-left: auto;
			border: 1px solid var(--color-border);
			border-radius: 999px;
			overflow: hidden;
			font-size: var(--fs-13);
			line-height: 1;
			white-space: nowrap;
		}
		.ls-tab {
			display: inline-flex;
			align-items: center;
			gap: 5px;
			padding: 6px 11px;
			/* action blue marks the CLICKABLE side; the current side gets a
			   quiet navy selected state below — per the brand rule that
			   #1F64FF always means "you can click this" */
			color: var(--color-cta-blue);
			text-decoration: none;
		}
		.ls-tab + .ls-tab { border-left: 1px solid var(--color-border); }
		.ls-tab:hover { background: var(--color-surface); }
		.ls-tab .ls-n { font-weight: 400; font-variant-numeric: tabular-nums; }
		.ls-tab[aria-current="true"],
		.ls-tab[aria-current="true"]:hover { background: var(--color-navy); color: #fff; cursor: default; }
		#filters-panel h4 { margin: 0 0 8px; font-size: var(--fs-14); }
		#filters-panel label {
			display: block;
			font-size: var(--fs-12);
			font-weight: 600;
			margin: 8px 0 3px;
		}
		#filters-panel select {
			width: 100%;
			font: inherit;
			font-size: var(--fs-13);
			padding: 7px 8px;
			border: 1px solid var(--color-border-strong);
			border-radius: var(--r-control);
			background: #fff;
		}
		#filters-panel .filter-actions {
			display: flex;
			gap: 8px;
			margin-top: 12px;
		}
		#filters-panel .filter-actions button {
			flex: 1;
			font: inherit;
			font-size: var(--fs-13);
			font-weight: 600;
			border: none;
			border-radius: var(--r-control);
			padding: 9px 0;
			cursor: pointer;
		}
		#filter-clear { color: var(--color-text-secondary); background: none; font-weight: 600; }
		#filter-clear:hover { background: var(--color-surface-neutral); text-decoration: underline; }

		#contact-submit, #inquiry-submit, #results-header #inquiry-cta {
			border-radius: var(--r-control);
			letter-spacing: 0.033em;
			transition: background-color 200ms ease-in-out;
		}
		/* every solid-blue CTA shares one hover and one active state — these
		   buttons previously carried four slightly different treatments */
		#contact-submit:hover, #inquiry-submit:hover, #results-header #inquiry-cta:hover,
		#appbar-contact:hover, .cta-card-btn:hover, #fatal-retry:hover,
		#mobile-contact-bar:hover { background: var(--color-cta-hover); }
		#contact-submit:active, #inquiry-submit:active, #results-header #inquiry-cta:active,
		#appbar-contact:active, .cta-card-btn:active, #fatal-retry:active,
		#mobile-contact-bar:active { background: var(--color-cta-active); }
		/* Docked drawers: on wide desktop Filter/FAQ live INSIDE the list panel,
		   below its header — opening pushes the cards down instead of covering them */
		#results-panel > #filters-panel,
		#results-panel > #faq-panel {
			position: relative; /* anchor the close button to the drawer, not the whole panel */
			top: auto; right: auto; bottom: auto; left: auto; /* drop the floating-drawer offsets */
			width: auto;
			max-height: none;
			border-radius: 0;
			box-shadow: none;
			border-bottom: 1px solid var(--color-border);
			flex: none;
			overflow: visible;
		}
		#results-panel > #faq-panel { max-height: 52vh; overflow: auto; }
		@media (min-width: 1025px) {
			.filters-body {
				display: flex;
				flex-wrap: wrap;
				align-items: flex-end;
				gap: 14px;
				padding: 12px 16px 14px;
			}
			.fcol { display: flex; flex-direction: column; gap: 4px; min-width: 180px; }
			.fcol-actions { flex-direction: row; align-items: flex-end; gap: 8px; min-width: 0; }
			.fcol-actions button { min-width: 96px; }
			#filters-panel #filters-side-close {
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: 12px;
				width: 44px;
				height: 44px;
				font-size: 22px;
				border: none;
				border-radius: var(--r-card);
				background: var(--color-surface-neutral);
				color: var(--color-body-text);
				cursor: pointer;
			}
			#filters-panel #filters-side-close:hover { background: var(--color-border); }
			.band-wrap { position: relative; }
			#band-acc { min-width: 220px; }
			#band-acc-content {
				position: absolute;
				top: calc(100% + 6px);
				left: 0;
				width: 320px;
				background: #fff;
				border: none;
				border-radius: var(--r-card);
				box-shadow: 0 2px 12px rgba(0, 0, 0, 0.22);
				padding: 8px;
				z-index: 30;
			}
			#filter-band-list { max-height: 300px; }
			body.filter-open #results-panel.fullscreen { top: 112px; } /* drop below the open filter row */
		}
		#filters-side-close { display: none; }
		#filters-title { display: none; }
		#filter-apply-bar { display: none; }
		@keyframes ss-slide-in {
			from { transform: translateX(-105%); }
			to { transform: none; }
		}
		/* ---- Tablet (769-1024px): Filter slides in from the side; large tap rectangles ---- */
		@media (min-width: 769px) and (max-width: 1024px) {
			.rail-btn { width: 44px; height: 44px; }
			.rail-btn .material-icons { font-size: 22px; }
			#filters-panel {
				top: 0;
				left: 0;
				bottom: 0;
				width: 390px;
				max-height: none;
				border-radius: 0 14px 14px 0;
				box-shadow: 4px 0 18px rgba(0, 0, 0, 0.25);
				animation: ss-slide-in 220ms ease;
			}
			#filters-side-close {
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				top: 10px;
				right: 10px;
				width: 44px;
				height: 44px;
				border: none;
				border-radius: var(--r-card);
				background: var(--color-surface-neutral);
				color: var(--color-body-text);
				cursor: pointer;
			}
			.filters-body { padding: 60px 20px 20px; }
			.filters-body label, .filters-body h4 { font-size: var(--fs-16); }
			#band-acc { padding: 14px 12px; font-size: var(--fs-16); border-radius: var(--r-card); }
			#filter-band-list { max-height: none; }
			#filter-band-list li {
				padding: 13px 14px;
				margin: 8px 0;
				font-size: var(--fs-16);
				border: 1px solid var(--color-border);
				border-radius: var(--r-card);
			}
			#filter-band-list input[type="checkbox"] { width: 22px; height: 22px; }
			#filters-panel select { padding: 14px 12px; font-size: var(--fs-16); border-radius: var(--r-card); }
			.filter-actions button { padding: 15px 0; font-size: var(--fs-16); border-radius: var(--r-card); }
		}
		/* ---- Responsive: tablet ---- */
		@media (max-width: 1024px) {
			#report-panel { width: min(340px, calc(100vw - 80px)); }
		}
		/* ---- Responsive: narrow window / small tablet ---- */
		@media (max-width: 900px) {
			#search-input { width: min(250px, calc(100vw - 90px)); }
			/* NB: no left/right here — the split owns the column edges above 768px
			   and the phone block owns them below. A leftover floating-panel rule
			   used to sit here and made the list overlap the map at 769-900px. */
		}
		/* ---- Touchscreen (any size): finger-sized targets, no hover needed ---- */
		@media (pointer: coarse) {
			.rail-btn { width: 44px; height: 44px; }
			.rail-btn .material-icons { font-size: 22px; }
			#legend-list li { padding: 10px 14px; }
			#filter-band-list input[type="checkbox"] { width: 20px; height: 20px; }
			#filters-panel select, .report-contact input { padding: 11px 10px; font-size: var(--fs-16); }
		}
		/* ---- Phone / small tablet: touch-first layout — bottom action bar + bottom sheets ---- */
		@media (max-width: 768px) {
			/* the rail becomes a labeled bottom action bar (thumb zone) */
			#tool-rail {
				top: auto;
				bottom: 0;
				left: 0;
				right: 0;
				flex-direction: row;
				justify-content: space-around;
				gap: 0;
				background: #fff;
				box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.22);
				padding: 5px 4px calc(5px + env(safe-area-inset-bottom));
			}
			.rail-btn {
				flex: 1;
				width: auto;
				height: 52px;
				flex-direction: column;
				gap: 2px;
				box-shadow: none;
				border-radius: var(--r-card);
			}
			.rail-btn .material-icons { font-size: 23px; }
			.rail-btn .rail-label { display: block; font-size: var(--fs-11); font-weight: 600; }
			/* cards + contact lead on phones; the map is the LAST tab, not the second */
			#rail-table-btn { display: flex; order: 1; }
				#rail-filters { order: 2; }
				#rail-faq { order: 3; }
				#rail-map-btn { display: flex; order: 4; }
				#rail-search { display: none; } /* search lives in the list header on phones */
				#faq-panel { width: auto; } /* full-width bottom sheet (ID rule would beat the class override) */
			/* popouts become true bottom sheets: flush edges, grabber, no scrollbar */
			.rail-drawer {
				top: auto;
				bottom: var(--rail-h); /* clears the tab bar incl. safe-area inset */
				left: 0;
				right: 0;
				width: auto;
				max-height: 60dvh;
				border-radius: var(--r-panel) var(--r-panel) 0 0;
				scrollbar-width: none;
			}
			.rail-drawer::-webkit-scrollbar { display: none; }
			.rail-drawer::before {
				content: '';
				display: block;
				width: 36px;
				height: 4px;
				border-radius: 2px;
				background: var(--color-border);
				margin: 8px auto 0;
			}
#search-box { margin: 0 8px; max-width: none; }
			#search-box { flex: 1; }
			#search-input { width: 100%; font-size: var(--fs-16); } /* 16px stops iOS auto-zoom */
			/* Trim phone results header: hide controls duplicated on the bottom bar and
			   give search its own row so results aren't buried (was ~157px / 3-4 rows) */
			#search-box { flex: 1 1 100%; order: 2; margin: 6px 0 0; }
			#results-header { padding: 8px 12px; row-gap: 6px; }
			#results-header #filters-btn,
			#results-header #results-expand,
			#results-header #results-collapse { display: none; }
			#results-header .sort-label { display: none; }
			/* sort moves off the cramped phone header (default sort applies); keeps row 1 = title + Contact */
			#results-header #results-sort,
			#results-header #sort-dir { display: none; }
			#results-title-wrap { flex: 1 1 auto; min-width: 0; overflow: hidden; }
			#results-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
			/* touch-sized rows and controls */
			#report-header, #inquiry-header { padding: 12px 16px; }
			#report-header button, #inquiry-header button, #faq-header button { font-size: 28px; min-width: 48px; min-height: 48px; }
			#filter-band-list li { padding: 12px 16px; }
			#filters-panel select { padding: 12px 10px; font-size: var(--fs-16); }
			.report-contact input { font-size: var(--fs-16); padding: 11px 10px; }
			arcgis-map { height: calc(100vh - var(--rail-h)); height: calc(100dvh - var(--rail-h)); } /* map ends above the bottom bar; dvh tracks the live viewport */
			#results-panel {
				left: 0;
				right: 0;
				bottom: 62px;
				height: 46vh;
				border-radius: var(--r-panel) var(--r-panel) 0 0;
			}
			#results-scroll { scrollbar-width: none; }
			#results-scroll::-webkit-scrollbar { display: none; }
			#results-panel.fullscreen { top: 0; left: 0; right: 0; bottom: var(--rail-h); }
				/* List-first phone: the license list IS the landing screen; the map is a tab */
				#results-panel { top: 0; bottom: var(--rail-h); height: auto; border-radius: 0; }
				#results-panel.collapsed { top: auto; height: auto; border-radius: var(--r-panel) var(--r-panel) 0 0; }
				#results-panel.collapsed #search-box { display: none; }
				/* Report / Contact / FAQ are full-screen pages too — same as the
				   filter — so every phone overlay behaves the same way */
				#report-panel, #inquiry-panel, #faq-panel {
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					width: auto;
					max-height: none;
					border-radius: 0;
					box-shadow: none;
					z-index: 40; /* owns the screen, tab bar included */
					overflow: auto;
					overscroll-behavior: contain;
				}
				#report-panel::before, #inquiry-panel::before, #faq-panel::before { display: none; } /* no grabber on a page */
				/* the title bar stays put while the content scrolls */
				#report-header, #inquiry-header, #faq-header {
					position: sticky;
					top: 0;
					z-index: 2;
					background: #fff;
					padding: 14px 8px 14px 16px;
					border-bottom: 1px solid var(--color-border);
				}
				#report-panel .report-contact { padding-bottom: 33dvh; } /* scroll room so Submit clears the keyboard */
				#inquiry-panel .report-contact { padding-bottom: 33dvh; }
				#faq-body { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
				/* ---- Modern phone shell: search pill on top, filter chips, sticky CTA ---- */
				:root { --mcb-h: 56px; } /* sticky contact bar height */
				/* Filter leaves the tab bar (chips own filtering) → List / FAQ / Map */
				#rail-filters { display: none; }
				/* the header Contact button is replaced by the sticky bar */
				#results-header #inquiry-cta { display: none; }
				#results-header {
					padding: 10px 12px 8px;
					background: #fff;
					border-bottom: 1px solid var(--color-border);
					row-gap: 8px;
				}
				/* row 1: the search pill. row 2: filter chips. row 3: the count. */
				#results-title-wrap { order: 3; flex: 1 1 100%; margin: 0; }
				#search-box {
					order: 1;
					flex: 1 1 100%;
					margin: 0;
					background: var(--color-surface-neutral);
					border: 1px solid var(--color-border);
					border-radius: 24px;
					padding: 4px 14px;
					min-height: 48px;
					display: flex;
					align-items: center;
					gap: 8px;
				}
				/* the icon joins the flex row instead of overlapping the text */
				#search-box .tray-search-icon { position: static; font-size: 22px; color: var(--color-text-secondary); }
				#search-input {
					width: 100%;
					font-size: var(--fs-16); /* 16px stops iOS auto-zoom */
					background: none;
					border: none;
					padding: 0;
				}
					#mobile-chips {
					order: 2;
					display: flex;
					/* wrap so the full-width Clear row can drop below the chips */
					flex-wrap: wrap;
					flex: 1 1 100%;
					gap: 8px;
					overflow-x: auto;
					scrollbar-width: none;
					padding-bottom: 2px;
				}
				#mobile-chips::-webkit-scrollbar { display: none; }
				.m-chip {
					flex: none;
					display: inline-flex;
					align-items: center;
					gap: 2px;
					font: inherit;
					font-size: var(--fs-13);
					font-weight: 600;
					color: var(--color-body-text);
					background: #fff;
					border: 1px solid var(--color-border);
					border-radius: 18px;
					padding: 9px 14px;
					min-height: 40px;
					cursor: pointer;
					white-space: nowrap;
				}
				.m-chip[hidden] { display: none; } /* the attribute must beat display:inline-flex */
				.m-chip .material-icons { font-size: var(--fs-18); color: var(--color-text-secondary); }
				.m-chip.on {
					color: var(--color-dark-blue);
					background: var(--color-surface-selected);
					border-color: var(--color-cta-blue);
				}
				.m-chip.on .material-icons { color: var(--color-cta-blue); }
				/* Clear is a full-width row styled like the page's other phone
				   buttons. Double ID: the generic "#results-header button" reset
				   (border: none) outguns any class selector. */
				#mobile-chips #chip-clear {
					flex: 1 1 100%;
					width: 100%;
					justify-content: center;
					color: var(--color-cta-blue);
					background: #fff;
					border: 1px solid var(--color-border-strong);
					border-radius: var(--r-card);
					min-height: 44px;
				}
				/* the list ends above the sticky CTA so the last card is never buried */
				#results-panel { bottom: calc(var(--rail-h) + var(--mcb-h)); }
				/* sticky lead bar, pinned above the tab bar */
				#mobile-contact-bar {
					display: block;
					position: fixed;
					left: 0;
					right: 0;
					bottom: var(--rail-h);
					z-index: 24;
					font: inherit;
					font-size: var(--fs-16);
					font-weight: 700;
					color: #fff;
					background: var(--color-cta-blue);
					border: none;
					border-top: 1px solid rgba(255, 255, 255, 0.25);
					padding: 16px 12px;
					min-height: var(--mcb-h);
					cursor: pointer;
				}
				/* a bottom sheet carries its own CTA — don't stack two */
				body:has(.rail-drawer:not([hidden])) #mobile-contact-bar { display: none; }
				body:has(.rail-drawer:not([hidden])) #results-panel { bottom: var(--rail-h); }
				/* ---- Filter is a full-screen page on phones: it takes over, then
				   hands you back to the list when you close it ---- */
				#filters-panel {
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					width: auto;
					max-height: none;
					overflow: auto;
					border-radius: 0;
					box-shadow: none;
					z-index: 40; /* above the tab bar — it owns the screen */
					padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); /* room for the apply bar */
					overscroll-behavior: contain;
				}
				#filters-panel::before { display: none; } /* grabber belongs to bottom sheets */
				.filters-body { padding: 0 0 8px; }
				#phone-scrim { display: none; } /* the full-screen page replaces the dim */
				/* ---- Filter sheet: one job at a time, with a big centered title ---- */
				/* sticky page header: centered title + close */
				#filters-title {
					display: block;
					position: sticky;
					top: 0;
					z-index: 2;
					background: #fff;
					text-align: center;
					font-size: var(--fs-18);
					font-weight: 700;
					color: var(--color-body-text);
					padding: 18px 60px 16px;
					border-bottom: 1px solid var(--color-border);
				}
				/* the whole rectangle is the button — no accordion, no nested scroll */
				#band-acc { display: none; }
				#band-acc-content[hidden] { display: block; }
				#band-acc-content { border: none; border-radius: 0; padding: 0; }
				#band-acc-close { display: none; }
				#filter-band-list { max-height: none; overflow: visible; }
				#filter-band-list li {
					display: flex;
					align-items: center;
					gap: 14px;
					width: 100%;
					box-sizing: border-box;
					min-height: 60px;
					margin: 0;
					padding: 12px 18px;
					border: none;
					border-bottom: 1px solid var(--color-border);
					border-radius: 0;
					font-size: var(--fs-16);
				}
				#filter-band-list li.off { opacity: 1; color: var(--color-text-secondary); }
				#filter-band-list li:not(.off) { background: var(--color-surface); }
				#filter-band-list input[type="checkbox"] { width: 24px; height: 24px; flex: none; }
				#filter-band-list li svg { flex: none; }
				/* bulk actions as real buttons, not desktop text links */
				.band-bulk-row {
					display: flex;
					gap: 10px;
					padding: 12px 18px;
					font-size: 0;
					border-bottom: 1px solid var(--color-border);
				}
				.band-bulk-row button.linklike {
					flex: 1;
					font-size: var(--fs-16);
					font-weight: 700;
					color: var(--color-dark-blue);
					background: var(--color-surface-selected);
					border: 1px solid #cfe0fb;
					border-radius: var(--r-card);
					padding: 12px 0;
					min-height: 48px;
				}
				/* location rows get the same full-width treatment */
				.fcol-loc { padding: 14px 18px 4px; }
				.fcol-loc label { display: block; text-align: left; font-size: var(--fs-13); color: var(--color-text-secondary); margin-bottom: 6px; }
				#filters-panel select { width: 100%; min-height: 52px; border-radius: var(--r-card); font-size: var(--fs-16); }
				.fcol-actions { padding: 16px 18px 4px; }
				#filter-clear { width: 100%; min-height: 48px; border: 1px solid var(--color-border); border-radius: var(--r-card); font-size: var(--fs-16); }
				/* sticky apply bar — the mobile way out */
				#filter-apply-bar {
					display: block;
					position: fixed;
					left: 0;
					right: 0;
					bottom: 0;
					z-index: 41;
					background: #fff;
					border-top: 1px solid var(--color-border);
					padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
				}
				#filter-done {
					width: 100%;
					font: inherit;
					font-size: var(--fs-16);
					font-weight: 700;
					color: #fff;
					background: var(--color-cta-blue);
					border: none;
					border-radius: var(--r-card);
					padding: 15px 0;
					min-height: 52px;
					cursor: pointer;
				}
				#report-header span:first-child,
				#inquiry-header span:first-child,
				#faq-header span:first-child { flex: 1; text-align: center; font-size: var(--fs-18); }
				/* the sheet shows only the section its chip opened */
				#filters-panel[data-mode="bands"] .fcol-loc,
				#filters-panel[data-mode="loc"] .fcol-band { display: none; }
				.filters-body label {
					font-size: var(--fs-16);
					font-weight: 700;
					text-align: center;
					color: var(--color-body-text);
				}
				#filters-panel[data-mode="bands"] .fcol-band > label { display: none; } /* the title already says it */
				#filters-panel #filters-side-close {
					display: inline-flex;
					align-items: center;
					justify-content: center;
					position: absolute;
					top: 8px;
					right: 8px;
					width: 48px;
					height: 48px;
					font-size: 26px;
					border: none;
					border-radius: 50%;
					background: var(--color-surface-neutral);
					color: var(--color-body-text);
					cursor: pointer;
				}
		}
		#results-header #inquiry-cta {
			font: inherit;
			font-size: var(--fs-13);
			font-weight: 700;
			color: #fff;
			background: var(--color-cta-blue);
			border: none;
			border-radius: var(--r-control);
			padding: 9px 16px;
			margin-right: 10px;
			cursor: pointer;
		}
		#inquiry-panel { z-index: 28; }
		/* ---- Phone-only shell pieces (search pill row, filter chips, sticky CTA) ---- */
		@media (min-width: 769px) {
			#mobile-chips, #mobile-contact-bar, #phone-scrim { display: none; }
		}
		#phone-scrim {
			position: fixed;
			inset: 0;
			z-index: 25; /* under the filter sheet, over the list */
			background: rgba(32, 33, 36, 0.42);
		}
		#phone-scrim[hidden] { display: none; }
		/* in-list Contact Us cards — phones only, where the list IS the experience */
		.cta-card { display: none; }
		@media (max-width: 768px) {
			.cta-card {
				display: flex;
				flex-direction: column;
				gap: 10px;
				grid-column: 1 / -1;
				background: var(--color-surface);
				border: 1px solid #d7e6f8;
				border-radius: var(--r-card);
				padding: 14px 16px;
				font-size: var(--fs-14);
				line-height: 1.5;
				color: var(--color-body-text);
			}
			.cta-card-btn {
				align-self: flex-start;
				font: inherit;
				font-size: var(--fs-14);
				font-weight: 700;
				color: #fff;
				background: var(--color-cta-blue);
				border: none;
				border-radius: var(--r-control);
				padding: 12px 20px;
				min-height: 44px;
				cursor: pointer;
			}
		}
		#zero-results-msg {
			padding: 26px 16px;
			text-align: center;
			color: var(--color-body-text);
			font-size: var(--fs-14);
		}
		#zero-results-msg a { color: var(--color-cta-blue); cursor: pointer; }
		#results-header {
			flex: none;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			gap: 6px 12px;
			justify-content: flex-start;
			padding: 10px 16px;
			font-size: var(--fs-14);
			font-weight: 600;
			color: var(--color-body-text);
			border-bottom: 1px solid var(--color-border);
		}
		#results-header button {
			font: inherit;
			font-size: 17px;
			line-height: 1;
			border: none;
			background: none;
			color: var(--color-text-secondary);
			cursor: pointer;
			padding: 2px 6px;
		}
		#results-scroll {
			flex: 1;
			overflow: auto;
			padding: 10px 14px 14px;
		}
		#cards-grid {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
			gap: 12px;
		}
		.lic-card {
			position: relative;
			display: flex;
			align-items: stretch;
			text-align: left;
			font: inherit;
			color: var(--color-body-text);
			background: #fff;
			border: 1px solid var(--color-border);
			border-radius: var(--r-card);
			padding: 0;
			cursor: pointer;
			overflow: hidden;
			box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
			transition: box-shadow 150ms ease;
		}
		.lic-card:hover { box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16); }
		.lic-card.selected { border-color: var(--color-cta-blue); box-shadow: 0 0 0 1px var(--color-cta-blue); }
		.lic-stripe { width: 5px; flex: none; }
		.lic-body { flex: 1; min-width: 0; padding: 10px 12px 11px; }
		.lic-rank {
			position: absolute;
			top: 8px;
			right: 80px;
			font-size: var(--fs-11);
			font-weight: 600;
			color: var(--color-text-secondary);
		}
		.lic-callsign {
			font-size: var(--fs-16);
			font-weight: 700;
			/* long composite call signs (WQGF315_WQGF316_…) truncate instead of
			   running under the rank badge */
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			padding-right: 34px;
		}
		.lic-market {
			font-size: var(--fs-13);
			margin-top: 2px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.lic-band { font-size: var(--fs-12); color: var(--color-body-text); margin-top: 4px; }
		.lic-meta { font-size: var(--fs-13); margin-top: 4px; }
		.lic-mhz { color: var(--color-cta-blue); font-weight: 700; }
		.lic-pop { color: var(--color-body-text); }
		.lic-dot { color: #b9bdc2; margin: 0 5px; }
		.lic-thumb {
			width: 76px;
			flex: none;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			padding-right: 6px;
		}
		.lic-thumb svg { width: 58px; height: 58px; }
		.lic-card.viewed .lic-stripe, .lic-card.viewed .lic-thumb svg { filter: saturate(0.25) opacity(0.75); }
		.lic-viewed-check {
			position: absolute;
			right: 5px;
			bottom: 5px;
			font-size: var(--fs-16);
			color: var(--color-cta-blue);
			display: none;
		}
		.lic-card.viewed .lic-viewed-check { display: block; }
		/* The count is metadata about the list, not its headline — it sits last
		   and quiet so Filter and Sort lead the row */
		/* one auto margin between the controls and the pill+count pair — two auto
	   margins would split the pair with half the free space each */
	#results-title-wrap { display: inline-flex; align-items: center; gap: 10px; order: 9; }
		.results-label { display: none; }
		.count-chip {
			padding: 0;
			font-size: var(--fs-13);
			/* the in-view count is the bar's real result number — it outweighs
			   the pill's dataset totals (which dropped to weight 400) */
			font-weight: 700;
			color: var(--color-body-text);
			white-space: nowrap;
		}
		.sort-label { font-size: var(--fs-13); color: var(--color-text-secondary); }
		#results-sort {
			font: inherit;
			font-size: var(--fs-13);
			font-weight: 600;
			color: var(--color-body-text);
			background: #fff;
			border: 1px solid var(--color-border);
			border-radius: 16px;
			padding: 6px 12px;
			cursor: pointer;
		}
		#sort-dir {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 30px;
			height: 30px;
			border: 1px solid var(--color-border);
			border-radius: 50%;
			background: #fff;
			color: var(--color-text-secondary);
			cursor: pointer;
			margin-right: 10px;
		}
		#sort-dir:hover { background: var(--color-surface); }
		#sort-dir .material-icons { font-size: 17px; }
		/* visually hidden but announced by screen readers */
		.visually-hidden {
			position: absolute;
			width: 1px; height: 1px;
			margin: -1px; padding: 0; border: 0;
			clip: rect(0 0 0 0);
			overflow: hidden;
			white-space: nowrap;
		}
		/* One keyboard focus ring for every control on the page. :focus-visible
		   means mouse clicks stay clean; only keyboard focus draws the ring. */
		:is(a, button, select, input, [tabindex="0"]):focus-visible {
			outline: 2px solid var(--color-cta-blue);
			outline-offset: 2px;
		}
		/* Users who ask the OS for reduced motion get none of ours. The map
		   flights are handled separately in JS (mapGoTo). */
		@media (prefers-reduced-motion: reduce) {
			*, *::before, *::after {
				animation-duration: 0.01ms !important;
				transition-duration: 0.01ms !important;
			}
		}