/* Global app theme tokens, responsive spacing, and shared layout measurements. */
:root{
  font-size: clamp(0.875rem, 1.6vw, 1rem);
  /* Fluid spacing, radii, and outline scales used throughout app and drawer UI. */
  --space-1: clamp(0.25rem, 0.35vw, 0.375rem);
  --space-2: clamp(0.375rem, 0.5vw, 0.5625rem);
  --space-3: clamp(0.5rem, 0.75vw, 0.75rem);
  --space-4: clamp(0.625rem, 1vw, 0.875rem);
  --space-5: clamp(0.75rem, 1.2vw, 1rem);
  --space-6: clamp(0.875rem, 1.4vw, 1.125rem);
  --space-7: clamp(1rem, 1.6vw, 1.375rem);
  --space-8: clamp(1.25rem, 2vw, 1.625rem);
  --space-9: clamp(1.5rem, 2.4vw, 2rem);
  --space-10: clamp(1.75rem, 2.8vw, 2.25rem);
  --space-11: clamp(1.55rem, 2.4vw, 2.25rem);
  --space-0-5: calc(var(--space-1) / 2);
  --radius-sm: clamp(0.375rem, 0.7vw, 0.625rem);
  --radius-md: clamp(0.5rem, 0.9vw, 0.75rem);
  --radius-lg: clamp(0.625rem, 1vw, 0.875rem);
  --radius-xl: clamp(0.75rem, 1.2vw, 1rem);
  --outline: clamp(0.125rem, 0.3vw, 0.1875rem);
  --outline-offset: clamp(0.125rem, 0.3vw, 0.25rem);
  --border-1: clamp(0.0625rem, 0.12vw, 0.125rem);
  --panel-bg:#ffffff;
  --panel-bdr:#9b9b9b;
  --panel-body-border:#BDB7A4;
  --panel-header-bg:#1F2F46;
  --panel-header-text-color:#FAF8F2;
  --panel-header-text-size:1rem;
  --panel-header-btn-text-color:#FAF8F2;
  --panel-header-btn-text-size:0.875rem;
  --panel-header-btn-bg:#B44747;
  --search-section-header-border:#A8C686;
  --search-section-header-bg:#A8C686;
  --search-section-title-size:0.95rem;
  --search-section-title-weight:700;
  --search-accent-default:#7C8A97;
  --search-accent-apn:#c3a568;
  --search-accent-address:#6DAA5E;
  --search-accent-latlong:#4F8CC9;
  --search-accent-location:#A3475B;
  --search-accent-trs:#7C8A97;
  --search-accent-width:clamp(0.25rem, 0.55vw, 0.5rem);
  --coverage-checkbox-bg:#FFF2A8;
  --coverage-checkbox-border:#6F5A00;
  --coverage-checkbox-accent:#6F5200;
  --coverage-overlay-fill:rgba(132, 104, 184, 0.6);
  --coverage-overlay-outline:rgba(82, 53, 135, 0.85); /* #523587 with alpha */
  --coverage-overlay-outline-width:1.5;
  --draw-btn-bg:#E6E2D3;
  --draw-btn-border:#B8B3A2;
  --draw-btn-text:#333333;
  --draw-btn-hover-bg:#D4CCB2;
  --draw-btn-hover-border:#978C6A;
  --draw-btn-point-active:#A8C686;
  --draw-btn-rect-active:#D9C38A;
  --draw-btn-poly-active:#7FB3D5;
  --drop-shadow: 0 2px 0 rgba(0,0,0,0.08);
  --panel-shadow: var(--drop-shadow);
  --text:#000000;
  --muted:#242424;
  --accent:#111827;
  --accent-contrast:#fff;
  --focus-ring:#005FCC;
  --focus-ring-outer:#FFFFFF;
  --focus-ring-dark:#000000;
  --focus-ring-warm:#FFD54A;
  --soft:#f7f7f7;
  --panel-content-bg:#F3EEDB;
  --panel-width: clamp(18rem, 30vw, 30rem);
  --action-btn-height: clamp(1.75rem, 3.2vw, 2.5rem);
  --results-closed-shift: 0;
  --results-shift: var(--results-closed-shift);      /* shared offset for results drawer and toggle */
  --drawer-handle-width: 5rem;
  --results-open-shift: calc(var(--panel-width) + var(--drawer-handle-width));
  --malt-css-vvh: 100vh;
  --malt-css-vvw: 100vw;
  --malt-js-vvh: var(--malt-css-vvh);
  --malt-js-vvw: var(--malt-css-vvw);
  --malt-app-height: var(--malt-css-vvh);
  --malt-app-width: var(--malt-css-vvw);
  --malt-safe-area-top: 0px;
  --malt-safe-area-right: 0px;
  --malt-safe-area-bottom: 0px;
  --malt-safe-area-left: 0px;
  --malt-mobile-safe-top: max(0px, var(--malt-safe-area-top));
  --malt-mobile-safe-right: max(0px, var(--malt-safe-area-right));
  --malt-mobile-safe-bottom: max(0px, var(--malt-safe-area-bottom));
  --malt-mobile-safe-left: max(0px, var(--malt-safe-area-left));

  /* Draw-tool tip and popover colors. */
  --tip-bg:#ffffff;
  --tip-bdr:#93c5fd;
  --tip-accent:#3b82f6;

  /* Result table column divider color. */
  --col-sep:#a3a3a3;

  /* Header/body alignment helpers for the results table. */
  --sbw: 17px;                                       /* runtime fallback; app.js sets actual scrollbar width */
  --results-table-pad-inline: var(--space-5);

  /* Results table column flex ratios and minimums shared by header and body rows. */
  --col-title-fr: 2;
  --col-year-fr: 0.5;
  --col-preview-fr: 1;
  --col-link-fr: 0.5;
  --col-title-min: 1.75rem;
  --col-year-min: 0.95rem;
  --col-preview-min: 1.125rem;
  --col-link-min: 0.875rem;
  /* Preview button states. */
  --preview-active: #3b82f6;
  --preview-hover: #1d4ed8;

  /* Autocomplete list theme. */
  --autocomplete-bg: #ffffff;
  --autocomplete-border: #c9d4e5;
  --autocomplete-divider: #e3ebf5;
  --autocomplete-hover: #f1f6ff;
  --autocomplete-active: #e0ecff;
  --autocomplete-text: #0f172a;
  --autocomplete-muted: #475569;
  --autocomplete-shadow: 0 0.4rem 1.15rem rgba(15, 23, 42, 0.14);
}
@supports (height: 100dvh){
  :root{
    --malt-css-vvh: 100dvh;
  }
}
@supports (width: 100dvw){
  :root{
    --malt-css-vvw: 100dvw;
  }
}
@supports (top: env(safe-area-inset-top)){
  :root{
    --malt-safe-area-top: env(safe-area-inset-top);
    --malt-safe-area-right: env(safe-area-inset-right);
    --malt-safe-area-bottom: env(safe-area-inset-bottom);
    --malt-safe-area-left: env(safe-area-inset-left);
  }
}

/* Full-screen map viewport and global typography baseline. */
html, body, #main-content, #view {
  height: 100%;
  width: 100%;
  margin: 0;
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
}
body{
  overflow: hidden;
}
body.is-mobile-device{
  --malt-app-height: var(--malt-js-vvh);
  --malt-app-width: var(--malt-js-vvw);
}
body.is-mobile-device,
body.is-mobile-device #main-content,
body.is-mobile-device #view{
  width: var(--malt-app-width);
  min-width: var(--malt-app-width);
  max-width: var(--malt-app-width);
  height: var(--malt-app-height);
  min-height: var(--malt-app-height);
  max-height: var(--malt-app-height);
}
body.is-mobile-device .modal-overlay,
body.is-mobile-device .mobile-orientation-overlay{
  width: var(--malt-app-width);
  max-width: var(--malt-app-width);
  height: var(--malt-app-height);
  max-height: var(--malt-app-height);
}
[hidden]{
  display: none !important;
}
/* Map zoom controls: large high-contrast targets over all basemaps. */
.malt-zoom-control{
  --malt-zoom-button-size: 44px;
  --malt-zoom-symbol-size: 28px;
  --malt-zoom-symbol-stroke: 4px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #000000;
  box-shadow: 0 2px 0 rgba(0,0,0,0.16);
}
.malt-zoom-btn{
  appearance: none;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--malt-zoom-button-size);
  height: var(--malt-zoom-button-size);
  min-width: var(--malt-zoom-button-size);
  min-height: var(--malt-zoom-button-size);
  margin: 0;
  padding: 0;
  border: 0;
  background: #ffffff;
  color: #000000;
  cursor: pointer;
  position: relative;
  touch-action: manipulation;
}
.malt-zoom-btn + .malt-zoom-btn{
  border-top: 1px solid #000000;
}
.malt-zoom-btn:hover{
  background-color: #f0f0f0;
}
.malt-zoom-btn:active{
  background-color: #e0e0e0;
}
.malt-zoom-btn:disabled{
  cursor: not-allowed;
  opacity: 0.55;
}
.malt-zoom-btn::before,
.malt-zoom-btn::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--malt-zoom-symbol-size);
  height: var(--malt-zoom-symbol-stroke);
  background: #000000;
  border-radius: var(--malt-zoom-symbol-stroke);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.malt-zoom-btn::after{
  width: var(--malt-zoom-symbol-stroke);
  height: var(--malt-zoom-symbol-size);
}
.malt-zoom-btn--out::after{
  display: none;
}
.malt-zoom-btn:disabled::before,
.malt-zoom-btn:disabled::after{
  background: #767676;
}
.app-shell{
  position: relative;
  overflow: hidden;
}
#main-content:focus{
  outline: none;
  box-shadow: inset 0 0 0 calc(var(--outline) + var(--outline-offset)) var(--focus-ring);
}
.skip-link{
  position: fixed;
  top: var(--space-4);
  left: var(--space-4);
  z-index: 100000;
  transform: translateY(calc(-100% - var(--space-8)));
  background: #ffffff;
  color: #000000;
  border: var(--outline) solid var(--focus-ring);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-5);
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 0 0 calc(var(--outline) + var(--outline-offset)) var(--focus-ring-outer), var(--drop-shadow);
  transition: transform .15s ease;
}
.skip-link:focus,
.skip-link:focus-visible{
  transform: translateY(0);
}

/* Left search panel shell. */
.panel{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 15px;
  width: var(--panel-width);
  height: auto;
  max-height: none ;
  background: var(--panel-bg);
  border: var(--border-1) solid var(--panel-bdr);
  border-radius: var(--radius-xl);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  box-shadow: var(--panel-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: 5;
  container-type: inline-size;
  container-name: main-panel;
  transition: left .45s ease;
}
body.search-drawer-collapsed{
  --results-open-shift: var(--drawer-handle-width);
  --results-closed-shift: calc(-1 * var(--panel-width));
}
body.search-drawer-collapsed .panel{
  left: calc(-1 * var(--panel-width));
}

/* Basemap selector panel anchored over the map. */
.basemap-control{
  position: absolute;
  bottom: 15px;
  right: 0;
  z-index: 7;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--panel-content-bg);
  border: var(--border-1) solid var(--panel-bdr);
  border-radius: var(--radius-xl);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  box-shadow: var(--panel-shadow);
}
.basemap-btn{
  appearance: none;
  border: none;
  border-radius: var(--radius-md);
  background: var(--basemap-btn-bg, var(--search-accent-default));
  color: #000000;
  padding: var(--space-2) var(--space-4);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  opacity: 1;
  transition: .15s ease-in-out;
}
.basemap-btn:hover:not(.is-active){
  opacity: 1;
  border-color: var(--accent);
  box-shadow: 0 0 0 var(--outline) rgba(17, 24, 39, 0.35);
  filter: saturate(1.25) brightness(0.88);
  transform: translateY(calc(var(--space-1) / -4));
}
.basemap-btn[data-basemap="topo-vector"]{
  --basemap-btn-bg: var(--search-accent-apn);
}
.basemap-btn[data-basemap="satellite"]{
  --basemap-btn-bg: var(--search-accent-address);
}
.basemap-btn[data-basemap="hybrid"]{
  --basemap-btn-bg: var(--search-accent-latlong);
}
.basemap-btn[data-basemap="streets-navigation-vector"]{
  --basemap-btn-bg: var(--search-accent-trs);
}
.basemap-btn.is-active{
  opacity: 1;
  box-shadow:
    0 0 0 var(--outline) var(--accent);
  filter: saturate(1.2) brightness(0.9);
  transform: translateY(calc(var(--space-1) / -4));
}
.basemap-btn:focus-visible{
  outline: var(--outline) solid var(--accent);
  outline-offset: var(--outline-offset);
}

/* Search-mode and no-results modal overlay system. */
.modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.7);
  backdrop-filter: blur(var(--space-2));
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  z-index: 15;
}
.modal-overlay.is-visible{
  display: flex;
}
.modal-card{
  position: relative;
  width: min(clamp(21.25rem, 38vw, 30rem), 100%);
  background: #fff;
  border-radius: clamp(0.75rem, 1.4vw, 1.125rem);
  padding: var(--space-10) var(--space-9) var(--space-9);
  box-shadow: var(--drop-shadow);
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  text-align: center;
  container-type: inline-size;
  container-name: modal-card;
}
.modal-card h2#searchModeTitle{
  font-family: "Segoe UI Semibold", "Segoe UI", "Inter", system-ui, -apple-system, sans-serif;
  font-size: 1.6rem;
  letter-spacing: -0.01em;
  margin: 0;
}
.modal-close{
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  appearance: none;
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  border: var(--border-1) solid #ffffff;
  border-radius: var(--radius-md);
  font-size: 1.35rem;
  color: #ffffff;
  cursor: pointer;
  line-height: 1;
  z-index: 1;
}
.modal-close:hover{
  background: #000000;
}
.modal-intro{
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}
.modal-options{
  display: grid;
  gap: var(--space-4);
  padding: var(--space-7);
  border-radius: var(--radius-xl);
}
.modal-btn{
  width: 100%;
  border: var(--border-1) solid var(--panel-bdr);
  border-radius: var(--radius-lg);
  background: #e9e9e9;
  color: var(--text);
  font-weight: 600;
  padding: var(--space-4) var(--space-6);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
  text-align: center;
}
.modal-btn:hover,
.modal-btn:focus-visible{
  box-shadow: 0 0 0 var(--outline) var(--accent);
  transform: translateY(calc(var(--space-1) / -4));
  outline: none;
}
.modal-footnote{
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}
#searchModeOverlay .modal-card{
  background: var(--panel-content-bg);
  overflow: hidden;
  padding: 0 var(--space-9) var(--space-9);
}
#searchModeOverlay .modal-card h2#searchModeTitle{
  margin: 0 calc(var(--space-9) * -1);
  color: var(--panel-header-text-color);
  background: var(--panel-header-bg);
  border: 0;
  border-bottom: var(--border-1) solid var(--panel-bdr);
  border-radius: 0;
  padding: var(--space-6) calc(var(--space-5) + 2.75rem) var(--space-6) var(--space-5);
}
#searchModeOverlay .modal-options .modal-btn{
  --modal-option-accent: var(--search-accent-default);
  background: #fff;
  border: var(--border-1) solid var(--panel-bdr);
  border-left: var(--search-accent-width) solid var(--modal-option-accent);
  color: var(--text);
}
#searchModeOverlay .modal-options .modal-btn[data-mode="draw"]{
  --modal-option-accent: var(--search-accent-default);
}
#searchModeOverlay .modal-options .modal-btn[data-mode="apn"]{
  --modal-option-accent: var(--search-accent-apn);
}
#searchModeOverlay .modal-options .modal-btn[data-mode="address"]{
  --modal-option-accent: var(--search-accent-address);
}
#searchModeOverlay .modal-options .modal-btn[data-mode="latlong"]{
  --modal-option-accent: var(--search-accent-latlong);
}
#searchModeOverlay .modal-options .modal-btn[data-mode="location"]{
  --modal-option-accent: var(--search-accent-location);
}
#searchModeOverlay .modal-options .modal-btn[data-mode="township"]{
  --modal-option-accent: var(--search-accent-trs);
}
#searchModeOverlay .modal-btn[data-mode="browse"]{
  background: var(--panel-header-btn-bg);
  color: var(--panel-header-btn-text-color);
  border-color: var(--panel-header-btn-bg);
}
/* No-results modal sits above the search-mode overlay when both could be present. */
.no-results-overlay{
  z-index: 16;
}
/* Compact no-results card sized for a short message and recovery actions. */
.no-results-card{
  width: min(clamp(12rem, 30vw, 15rem), 100%);
  padding: var(--space-8) var(--space-8) var(--space-7);
  gap: var(--space-5);
}
.no-results-card h2{
  margin: 0;
  font-size: 1.25rem;
}
.no-results-message{
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}
.no-results-actions{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.no-results-actions .modal-btn{
  width: auto;
  min-width: 8rem;
  max-width: 100%;
}
#noResultsDismiss{
  color: var(--panel-header-btn-text-color);
  font-size: var(--panel-header-btn-text-size);
  background: var(--panel-header-btn-bg);
  border-color: var(--panel-header-btn-bg);
}

.panel-body{
  --panel-bdr: var(--panel-body-border);
  --tip-bdr: var(--panel-body-border);
  --search-section-header-border: var(--panel-body-border);
  --tab-bdr: var(--panel-body-border);
  --draw-btn-border: var(--panel-body-border);
  flex: 1 1 0;
  min-height: 0;
  padding: var(--space-5);
  background: var(--panel-content-bg);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

.mobile-panel-scroll-cue{
  display: none;
}

.panel-header{
  display: flex;
  align-items: center;
  padding: var(--space-4) var(--space-5);
  background: var(--panel-header-bg);
  border-bottom: var(--border-1) solid var(--panel-bdr);
  justify-content: space-between;
}

.app-title{
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--panel-header-text-size);
  color: var(--panel-header-text-color);
  font-weight: 700;
  letter-spacing: 0.0125em;
}
.app-title-icon{
  width: 24px;
  height: 24px;
  display: block;
  flex: 0 0 auto;
}
.header-actions{
  display:flex;
  gap:.5rem;
  margin-left:auto;
  align-items: center;
  justify-content:flex-end;
}

.section{ padding: var(--space-4) var(--space-5); border-bottom: var(--border-1) solid var(--panel-bdr); }
.draw-section{
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
  border: var(--border-1) solid var(--panel-bdr);
  border-radius: var(--radius-lg);
  background: var(--soft);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.draw-body{
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.draw-title{
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-bottom: 2px solid var(--search-section-header-border);
  background: var(--search-section-header-bg);
}
.draw-section .draw-help{ margin-top: 0; }
.draw-display-controls{
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  border: var(--border-1) solid var(--panel-bdr);
  border-radius: var(--radius-md);
  background: var(--soft);
}
.draw-display-controls .checkbox span{ font-size: .95rem; }
.draw-display-controls .checkbox{
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border: var(--border-1) solid var(--coverage-checkbox-border);
  background: var(--coverage-checkbox-bg);
}
.coverage-help{
  margin: 0;
}
#toggleCoverage{
  accent-color: var(--coverage-checkbox-accent);
}
.label{ font-weight: 600; margin-bottom: var(--space-2); }
.draw-title,
.advanced-title{
  font-size: var(--search-section-title-size);
  font-weight: var(--search-section-title-weight);
}

/* Shared button-group and button styles for draw and search controls. */
.btn-group{
  display: flex;
  gap: var(--space-2);
}
.draw-section .btn-group{
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  width: 100%;
}
.draw-section .btn-group > .btn,
.draw-section .btn-group > .draw-tool-wrap{
  flex: 1 1 0;
  min-width: clamp(5.625rem, 30%, 8.125rem);
}
.btn{
  appearance: none;
  border: var(--border-1) solid var(--tab-bdr, var(--panel-bdr));
  background: var(--tab-bg-unselected, #eef3fb);
  color: var(--text);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-weight: 600;
  transition: .15s;
}
.btn:hover{ filter: brightness(.85); }
.btn[aria-pressed="true"]{
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent);
}
.draw-section .btn{
  width: 100%;
  text-align: center;
  background: var(--draw-btn-bg);
  border-color: var(--draw-btn-border);
  color: var(--draw-btn-text);
  animation: none;
  will-change: auto;
}
.draw-section .btn:hover:not([aria-pressed="true"]){
  background: var(--draw-btn-hover-bg);
  border-color: var(--draw-btn-hover-border);
  box-shadow: 0 0 0 var(--outline) rgba(151, 140, 106, 0.35);
  transform: translateY(calc(var(--space-1) / -4));
  filter: none;
}
.draw-section .btn[aria-pressed="true"]{
  color: var(--draw-btn-text);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 var(--outline) var(--accent);
  animation: none;
}
#toolPoint{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}
#toolPoint .draw-point-icon{
  width: 20px;
  height: 20px;
  display: block;
  flex: 0 0 20px;
}
#toolRect{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}
#toolRect .draw-rect-icon{
  width: 20px;
  height: 20px;
  display: block;
  flex: 0 0 20px;
}
#toolPoly{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}
#toolPoly .draw-poly-icon{
  width: 20px;
  height: 20px;
  display: block;
  flex: 0 0 20px;
}
#toolPoint.btn[aria-pressed="true"]{
  background: var(--draw-btn-point-active);
  border-color: var(--accent);
}
#toolRect.btn[aria-pressed="true"]{
  background: var(--draw-btn-rect-active);
  border-color: var(--accent);
}
#toolPoly.btn[aria-pressed="true"]{
  background: var(--draw-btn-poly-active);
  border-color: var(--accent);
}
.draw-tool-wrap{
  position: relative;
  display: flex;
}
.draw-tool-wrap.is-popover-visible{
  z-index: 2147483646;
}
.draw-tool-popover{
  position: fixed;
  left: var(--draw-popover-left, -10000px);
  top: var(--draw-popover-top, -10000px);
  width: fit-content;
  max-width: calc(var(--malt-app-width) - var(--space-4));
  max-height: calc(var(--malt-app-height) - var(--space-4));
  padding: var(--space-2);
  box-sizing: border-box;
  border: var(--border-1) solid var(--panel-bdr);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: var(--drop-shadow);
  transform: translate(0, calc(var(--space-1) * -1));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
  z-index: 2147483647;
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
}
.draw-tool-popover::after{
  content: "";
  position: absolute;
  left: var(--space-5);
  bottom: 100%;
  transform: translateX(-50%);
  border-width: 0.5rem;
  border-style: solid;
  border-color: transparent transparent #fff transparent;
}
.draw-tool-popover img,
.draw-tool-popover video{
  display: block;
  width: auto;
  height: 27vh;
  max-width: calc(var(--malt-app-width) - var(--space-8));
  max-height: 27vh;
  border-radius: calc(var(--radius-md) - var(--border-1));
}
.draw-tool-popover video{
  width: auto;
  height: auto;
  max-width: 17.5vw;
  max-height: 17.5vh;
}
.draw-tool-wrap.is-popover-visible .draw-tool-popover{
  opacity: 1;
  visibility: visible;
  transform: translate(0, 0);
}
.btn-ghost{ appearance: none; background: #f3f4f6; border: var(--border-1) solid var(--panel-bdr); color: var(--text); padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); cursor: pointer; }

/* Form label and screen-reader-only helper text styling. */
.field-label{ font-weight:600; font-size:.9rem; }
.sr-only{
  position: absolute;
  width: var(--border-1);
  height: var(--border-1);
  padding: 0;
  margin: calc(var(--border-1) * -1);
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}


/* Advanced search accordion panel and search-mode accent styling. */
.advanced-container{
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
  border: var(--border-1) solid var(--panel-bdr);
  border-radius: var(--radius-lg);
  background: var(--soft);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.advanced-body{
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}
.advanced-title{
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-bottom: 2px solid var(--search-section-header-border);
  background: var(--search-section-header-bg);
}
.advanced-form{
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.search-group{
  --search-group-accent: var(--search-accent-default);
  position: relative;
  border: var(--border-1) solid var(--panel-bdr);
  border-radius: var(--radius-lg);
  background: #fff;
  overflow: hidden;
  padding: 0 var(--space-4) var(--space-5);
}
.search-group::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--search-accent-width);
  background: var(--search-group-accent);
  pointer-events: none;
}
.search-group--apn{ --search-group-accent: var(--search-accent-apn); }
.search-group--address{ --search-group-accent: var(--search-accent-address); }
.search-group--latlong{ --search-group-accent: var(--search-accent-latlong); }
.search-group--location{ --search-group-accent: var(--search-accent-location); }
.search-group--trs{ --search-group-accent: var(--search-accent-trs); }
.search-group.is-highlighted,
.draw-section.is-highlighted{
  animation: highlight-flash 1s ease-in-out 5;
  box-shadow: 0 0 0 var(--outline) rgba(185, 185, 185, 0.35), var(--drop-shadow);
}
.search-group.is-highlighted .search-toggle{
  color: #0f172a;
}
@keyframes highlight-flash{
  0% { box-shadow: 0 0 0 0 rgba(59,130,246,0); }
  50% { box-shadow: 0 0 0 var(--space-2) rgba(1, 153, 255, 0.4); }
  100% { box-shadow: 0 0 0 0 rgba(59,130,246,0); }
}
.search-toggle{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  background: transparent;
  border: 0;
  padding: var(--space-5) 0 var(--space-1) var(--space-2);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.search-toggle-label{
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1 1 auto;
  min-width: 0;
}
.search-toggle-icon{
  width: calc(1.05rem * 1.25);
  height: calc(1.05rem * 1.25);
  flex: 0 0 auto;
  object-fit: contain;
}
.search-toggle:focus-visible{
  outline: var(--outline) solid var(--accent);
  outline-offset: var(--outline-offset);
}
.search-toggle::after{
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  display: inline-block;
  border-right: 0.3rem solid currentColor;
  border-bottom: 0.3rem solid currentColor;
  transform: rotate(45deg);
  transition: transform .25s ease;
}
.search-toggle[aria-expanded="false"]::after{
  transform: rotate(-135deg);
}
.search-panel{
  display: none;
  margin-top: var(--space-2);
}
.search-panel.is-open{
  display: flex;
}
.advanced-form .field-label{
  margin-bottom: var(--space-0-5);
}
/* APN search row layout for input + action button. */
.apn-row{
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  width: 100%;
}
.apn-row input{
  flex: 1 1 clamp(10rem, 40vw, 15rem);
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: var(--border-1) solid var(--panel-bdr);
  font-size: 0.9rem;
  color: var(--text);
}
.apn-row .btn{
  flex: 0 0 auto;
}
.apn-row input::placeholder{
  color: var(--muted);
}

/* APN/address autocomplete suggestion list. */
.autocomplete{
  display: none;
  margin-top: calc(-1 * var(--space-1));
  border: var(--border-1) solid var(--autocomplete-border);
  border-radius: var(--radius-md);
  background: var(--autocomplete-bg);
  box-shadow: var(--autocomplete-shadow);
  max-height: clamp(9rem, 30vh, 14rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 2;
}
.autocomplete.is-open{
  display: block;
}
.autocomplete.is-loading{
  cursor: progress;
}
.autocomplete__option{
  width: 100%;
  display: block;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: var(--space-3) var(--space-4);
  font-size: 0.9rem;
  color: var(--autocomplete-text);
  text-align: left;
  cursor: pointer;
}
.autocomplete__option + .autocomplete__option{
  border-top: var(--border-1) solid var(--autocomplete-divider);
}
.autocomplete__option:hover,
.autocomplete__option.is-active{
  background: var(--autocomplete-hover);
}
.autocomplete__option.is-active{
  background: var(--autocomplete-active);
}
.autocomplete__option:focus-visible{
  outline: var(--outline) solid var(--accent);
  outline-offset: calc(-1 * var(--outline-offset));
}
.autocomplete__status{
  padding: var(--space-3) var(--space-4);
  font-size: 0.85rem;
  color: var(--autocomplete-muted);
}
/* Toggle controls used by coordinate mode and similar option sets. */
.toggle-group{
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.toggle-option{
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  border: var(--border-1) solid var(--panel-bdr);
  background: #fff;
  cursor: pointer;
  font-size: 0.85rem;
  user-select: none;
}
.toggle-option input{
  margin: 0;
}
.toggle-option.is-active{
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}
/* Latitude/longitude field layout and responsive controls. */
.latlong-row{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.375rem, 0.85fr));
  gap: var(--space-3);
  align-items: center;
}
.latlong-row input{
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.latlong-row input::placeholder{
  color: var(--muted);
}

.latlong-controls{
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  container-type: inline-size;
  container-name: latlong-controls;
}
.latlong-controls .toggle-group{
  flex: 1 1 13.75rem;
}
.latlong-controls .btn{
  margin-left: auto;
  flex: 0 0 auto;
}

/* Township/Range/Section form grouping and input sizing. */
.trs-row{
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.trs-fieldset{
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
}
.trs-input,
.trs-select{
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: var(--border-1) solid var(--panel-bdr);
  font-size: 0.9rem;
  color: var(--text);
  background: #fff;
  flex: 1 1 clamp(7.5rem, 40%, 10rem);
  min-width: 0;
}
.trs-input{
  width: clamp(5rem, 9vw, 6.875rem);
}
.trs-select{
  min-width: clamp(5.125rem, 9.5vw, 7.5rem);
}

/* Search drawer toggle in the results header. */
.drawer-search-toggle{
  flex: 0 0 auto;
  height: var(--action-btn-height);
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-3);
  line-height: 1;
  white-space: nowrap;
}
#clearBtn,
#searchDrawerToggle{
  color: var(--panel-header-btn-text-color);
  font-size: var(--panel-header-btn-text-size);
  background: var(--panel-header-btn-bg);
  border-color: var(--panel-header-btn-bg);
}
#clearBtn{
  height: var(--action-btn-height);
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Results drawer shell; it slides beside or over the search panel depending on body state. */
.results-drawer{
  position: absolute;
  top: 0;
  left: calc(-1 * var(--drawer-handle-width));
  bottom: 20px;
  width: calc(var(--panel-width));
  transform: translateX(var(--results-shift));
  transition: transform .45s ease;
  pointer-events: none;
  z-index: 3;
  height: auto;
  max-height: none;
  overflow: visible; /* allow the drawer handle/toggle alignment to extend outside the panel */
}
.results-drawer__panel{
  --results-table-pad-inline: var(--space-5);
  position: relative;
  width: 100%;
  height: 100%;
  max-height: none;
  background: #fff;
  border: var(--border-1) solid var(--panel-bdr);
  border-radius: var(--radius-xl);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  box-shadow: var(--panel-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: 5;
  container-type: inline-size;
  container-name: drawer-panel;
}
.results-drawer.is-open{
  pointer-events: auto;
  z-index: 3;
}
.results-open{
  --results-shift: var(--results-open-shift);
}

/* Results drawer header, body spacing, and table alignment overrides. */
.drawer-header{
  display: flex;
  align-items: center;
  padding: var(--space-4) var(--space-5);
  background: var(--panel-header-bg);
  border-bottom: var(--border-1) solid var(--panel-bdr);
  justify-content: space-between;
}
.drawer-title{
  margin: 0;
  font-size: var(--panel-header-text-size);
  color: var(--panel-header-text-color);
  font-weight: 700;
}
.drawer-body{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: var(--space-5) 0 var(--space-5) var(--space-5);
  gap: var(--space-5);
  overflow: hidden;
}
.drawer-body .tabs{
  padding-left: 0;
  padding-right: var(--results-table-pad-inline);
}
.drawer-body .map-size-filters{
  padding-left: 0;
  padding-right: var(--results-table-pad-inline);
}
.drawer-body .table-head{
  padding-left: 0;
}
.drawer-body .table-scroll{
  padding-left: 0;
  padding-right: var(--results-table-pad-inline);
}
/* Primary action button treatment for submit-style controls. */
.btn-primary{
  background: var(--accent);
  color: var(--accent-contrast);
  border: var(--border-1) solid var(--accent);
}

/* Panel footer links */
.panel-links{
  margin: 0;
  padding: var(--space-6) var(--space-5);
  border: 0;
  background: var(--panel-header-bg);
  border-radius: 0;
  display: flex;
  gap: var(--space-7);
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
}
.link-btn{
  appearance: none;
  background: transparent;
  border: none;
  color: var(--panel-header-btn-text-color);
  font-weight: 600;
  text-decoration: underline;
  padding: var(--space-2) 0;
  cursor: pointer;
}
.link-btn:focus-visible{ outline: var(--outline) solid var(--accent); outline-offset: var(--outline-offset); }
.btn-primary:disabled{
  opacity: .6;
  cursor: not-allowed;
}
.field-help{
  margin: 0;
  font-size: .85rem;
  color: var(--muted);
}
.draw-help{
  margin-top: var(--space-2);
  line-height: 1.4;
  padding: var(--space-3) var(--space-4);
  border: var(--border-1) solid var(--panel-body-border);
  border-radius: var(--radius-md);
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.draw-help-list{
  margin: 0;
  padding-left: var(--space-5);
  display: grid;
  gap: var(--space-1);
}
.draw-help-list li{
  margin: 0;
}
.draw-help-icon{
  width: 1.35em;
  height: 1.35em;
  margin-right: var(--space-1);
  vertical-align: -0.15em;
}
.draw-help-list strong{
  color: #0f172a;
}
.draw-video-descriptions{
  display: grid;
  gap: var(--space-1);
}
.draw-video-description{
  border-top: var(--border-1) solid var(--panel-body-border);
  padding-top: var(--space-2);
}
.draw-video-description summary{
  color: #0f172a;
  cursor: pointer;
  font-weight: 700;
}
.draw-video-description p{
  margin: var(--space-2) 0 var(--space-1);
}
.draw-video-description ol{
  margin: 0;
  padding-left: var(--space-5);
  display: grid;
  gap: var(--space-1);
}
.field-error{
  margin: 0;
  font-size: .85rem;
  color: #b91c1c;
  min-height: 1em;
}

.drawer-controls{
  padding: 0 var(--results-table-pad-inline) var(--space-5) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  border-bottom: var(--border-1) solid var(--panel-bdr);
}
.drawer-controls .opacity-control{
  width: 100%;
}
.drawer-controls .opacity-control input[type="range"]{
  flex: 1 1 auto;
  min-width: 0;
}

.opacity-row{
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
/* Retained map-size filter styles; matching HTML and app.js wiring are currently disabled. */
.map-size-row{
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 0 0 var(--space-3);
}
.map-size-filters{
  display: flex;
  gap: var(--space-2);
  padding: 0 var(--space-5) var(--space-3);
}
.map-size-btn{
  appearance: none;
  flex: 1;
  border: var(--border-1) solid var(--tab-bdr);
  background: var(--tab-bg-unselected);
  color: var(--tab-fg-unselected);
  border-radius: var(--radius-lg);
  padding: var(--space-1) var(--space-2);
  font-size: clamp(0.675rem, 1.2vw, 0.875rem);
  font-weight: 700;
  line-height: normal;
  text-align: left;
  cursor: pointer;
}
.map-size-btn[aria-pressed="true"]{
  background: #121826;
  color: #fff;
  border-color: #121826;
}
.map-size-btn:hover:not(:disabled){
  filter: brightness(0.98);
}
.map-size-btn:focus-visible{
  outline: var(--outline) solid var(--accent);
  outline-offset: var(--outline-offset);
}
.map-size-filters.is-disabled .map-size-btn,
.map-size-btn:disabled{
  opacity: 0.5;
  cursor: not-allowed;
}
.map-size-help{
  margin: 0;
}

/* Results type tabs and count badges. */
.tabs{ display:flex; gap: var(--space-2); padding: 0 var(--space-5) var(--space-3); }
.tab{
  flex:1; text-align:left;
  border: none; background: transparent; cursor: pointer;
  font-weight: 800;
  padding: var(--space-3) var(--space-4); 
  border-radius: var(--radius-lg);
  color: var(--text);
}
.tab[aria-pressed="true"]{ background: #121826; color: #fff; }
.badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width: clamp(1rem, 2vw, 1.5rem); 
  padding: 0 var(--space-2); 
  height: clamp(1rem, 1.8vw, 1.375rem); 
  margin-left: var(--space-2);
  font-size: clamp(0.75rem, 0.9vw, 0.85rem); 
  border-radius: var(--radius-lg); 
  background: rgba(255,255,255,.2);
}

/* Tab color tokens scoped here to preserve the current selected/unselected contrast. */
:root{
  --tab-bg-unselected: #eef3fb;   /* light blueish gray */
  --tab-bdr:           #d6e3f8;   /* subtle border */
  --tab-fg-unselected: #0f172a;   /* dark slate text */
}

/* Unselected state for result tabs. */
.tab{
  background: var(--tab-bg-unselected);
  color: var(--tab-fg-unselected);
  border: var(--border-1) solid var(--tab-bdr);
}

/* Subtle hover feedback for result tabs. */
.tab:hover{
  filter: brightness(0.98);
}

/* Selected state for the active result tab. */
.tab[aria-pressed="true"]{
  background: #121826;
  color: #fff;
  border-color: #121826;
}

/* Count badges remain subtle until their tab/filter is selected. */
.tab .badge{
  background: rgba(0,0,0,.08);
}
.map-size-btn .badge{
  background: rgba(0,0,0,.08);
}
.tab[aria-pressed="true"] .badge{
  background: rgba(255,255,255,.25);
}
.map-size-btn[aria-pressed="true"] .badge{
  background: rgba(255,255,255,.25);
}

/* Table header uses the same flex ratios as body rows.
   Right padding reserves scrollbar width so header/body columns align. */
.table-head{
  display:flex;
  gap:0;
  padding: 0 calc(var(--results-table-pad-inline) + var(--sbw)) var(--space-2) var(--results-table-pad-inline);
  border-bottom: var(--border-1) solid var(--panel-bdr);
  background: #fff;
}
.th{
  box-sizing: border-box;
  font-weight:700;
  font-size: clamp(0.8rem, 0.9vw, 0.95rem);
  padding: 0 var(--space-3) var(--space-2);
  white-space:nowrap;
  overflow:hidden;
  border-right: var(--border-1) solid var(--col-sep);
  text-align: center;
  flex: 1 1 0;
  min-width: 0;
}
.th:last-child{ border-right:none; }
.th.w-title{
  flex: var(--col-title-fr) 1 0;
  min-width: var(--col-title-min);
}
.th.w-year{
  flex: var(--col-year-fr) 1 0;
  min-width: var(--col-year-min);
}
.th.w-preview{
  flex: var(--col-preview-fr) 1 0;
  min-width: var(--col-preview-min);
}
.th.w-link{
  flex: var(--col-link-fr) 1 0;
  min-width: var(--col-link-min);
}

/* Body scroll area reserves a stable gutter so column width does not jump. */
.table-scroll{
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  padding: 0 var(--results-table-pad-inline) 0 var(--results-table-pad-inline);
  flex: 1 1 auto;
}

/* Result rows share the same column flex ratios as the header. */
.result-table{
  display: block;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.result-table tbody{
  display: block;
}
.result-table tr{
  display: flex;
}
.result-table tr.group-row > td{
  font-weight: 600;
  background: rgb(238, 238, 238);
}

/* Result table cells and per-column flex sizing. */
.result-table td{
  box-sizing: border-box;
  padding: clamp(0.5rem, 1vw, 0.75rem) var(--space-3);
  border-bottom: var(--border-1) solid var(--panel-bdr);
  border-right: var(--border-1) solid var(--col-sep);
  vertical-align: middle;
  font-size: clamp(0.7rem, 1vw, 0.95rem);
  text-align: center;
  flex: 1 1 0;
  min-width: 0;
}
.result-table td:last-child{ border-right: none; }
.result-table td.title{
  flex: var(--col-title-fr) 1 0;
  min-width: var(--col-title-min);
}
.result-table td.year{
  flex: var(--col-year-fr) 1 0;
  min-width: var(--col-year-min);
  display: flex;
  align-items: center;
  justify-content: center;
}
.result-table td.preview{
  flex: var(--col-preview-fr) 1 0;
  min-width: var(--col-preview-min);
  display: flex;
  align-items: center;
  justify-content: center;
}
.result-table td.link{
  flex: var(--col-link-fr) 1 0;
  min-width: var(--col-link-min);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Long result titles wrap within their column instead of resizing the table. */
.result-table td.title{
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: normal;
}
.group-toggle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: none;
  background: transparent;
  padding: 0;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: inherit;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  text-align: center;
}
.group-toggle:focus-visible{
  outline: var(--outline) solid var(--accent);
  outline-offset: var(--outline-offset);
}
.group-caret{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 1.25rem;
  font-size: 1.25rem;
  line-height: 1;
  transition: transform .25s ease;
}
.group-caret::before{
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  display: inline-block;
  border-right: 0.3rem solid currentColor;
  border-bottom: 0.3rem solid currentColor;
  transform: rotate(45deg);
}
.group-toggle[aria-expanded="false"] .group-caret{
  transform: rotate(180deg);
}
.group-count{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(1rem, 2vw, 1.5rem);
  height: clamp(1rem, 1.8vw, 1.375rem);
  background: rgba(0,0,0,0.08);
  padding: 0 var(--space-2);
  border-radius: var(--radius-lg);
  font-size: clamp(0.75rem, 0.9vw, 0.85rem);
  font-weight: 700;
}
.group-item.is-hidden{
  display: none;
}

/* Compact inline button used in row actions (preview, etc.). */
.inline{
  padding: clamp(0.25rem, 0.7vw, 0.4375rem) var(--space-3);
  border-radius: clamp(0.375rem, 0.9vw, 0.625rem);
  border: var(--border-1) solid var(--panel-bdr);
  background: var(--soft);
  cursor: pointer;
  font-weight: 600;
}

/* Empty state shown when the active result tab has no rows. */
.empty{ padding: var(--space-5) 0; color: var(--muted); display: none; }

/* Inline checkbox layout used by coverage visibility. */
.checkbox{ display:inline-flex; align-items:center; gap:.5rem; user-select:none; }

/* Opacity control row for scanned-map previews. */
.opacity-control{ display:flex; align-items:center; gap:.5rem; }

/* Preview buttons and active-preview row state. */
.preview-btn {
  appearance: none;
  background: var(--soft);
  border: var(--border-1) solid var(--panel-bdr);
  color: var(--text);
  padding: var(--space-1) var(--space-1);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--space-3);
}

.preview-btn:hover {
  background: var(--preview-hover);
  color: white;
  border-color: var(--preview-hover);
}

.preview-btn.active {
  background: var(--preview-active);
  color: white;
  border-color: var(--preview-active);
}

/* Table row with active preview. */
tr[data-active-preview="true"] {
  background-color: var(--tip-bg);
}


.preview {
  text-align: center;
}
/* Imagery opacity slider sizing and disabled-state readability. */
#opacitySlider{ width: clamp(8.75rem, 18vw, 13.75rem); }
#opacitySlider:disabled{ opacity:.45; cursor:not-allowed; }
.mono{ font-variant-numeric: tabular-nums; }

/* Container queries keep dense controls usable as panels shrink. */
@container main-panel (max-width: 24rem){
  .panel-header,
  .drawer-header{
    padding: var(--space-3) var(--space-4);
  }
  .panel-body{
    padding: var(--space-4);
    gap: var(--space-5);
  }
  .header-actions{
    gap: var(--space-2);
  }
}
@container main-panel (max-width: 20rem){
  .header-actions{
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}

/* Tighten drawer spacing and column widths for small drawer containers. */
@container drawer-panel (max-width: 24rem){
  .results-drawer__panel{
    --col-title-fr: 2;
    --col-year-fr: 0.5;
    --col-preview-fr: 1;
    --col-link-fr: 0.5;
    --col-title-min: 1.75rem;
    --col-year-min: 0.95rem;
    --col-preview-min: 1.125rem;
    --col-link-min: 0.875rem;
    --results-table-pad-inline: var(--space-4);
  }
  .drawer-body{
    padding-right: var(--space-4);
  }
}

/* Reduce modal padding and button density on compact modal widths. */
@container modal-card (max-width: 26rem){
  .modal-card{
    padding: var(--space-8) var(--space-7);
    gap: var(--space-5);
  }
  .modal-btn{
    padding: var(--space-3) var(--space-4);
  }
}

/* Stack lat/long controls vertically when control container gets narrow. */
@container latlong-controls (max-width: 32rem){
  .latlong-controls{
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }
  .latlong-controls .toggle-group{
    width: 100%;
  }
  .latlong-controls .btn{
    align-self: stretch;
    text-align: center;
  }
}

/* High-contrast keyboard focus system. */
.panel-header,
.panel-links,
.drawer-header,
.modal-overlay{
  --focus-ring: var(--focus-ring-warm);
  --focus-ring-outer: var(--focus-ring-dark);
}
a[href]:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
.btn:focus-visible,
.btn-ghost:focus-visible,
.modal-btn:focus-visible,
.basemap-btn:focus-visible,
.search-toggle:focus-visible,
.tab:focus-visible,
.map-size-btn:focus-visible,
.group-toggle:focus-visible,
.inline:focus-visible,
.preview-btn:focus-visible,
.link-btn:focus-visible{
  outline: var(--outline) solid var(--focus-ring);
  outline-offset: var(--outline-offset);
  box-shadow: 0 0 0 calc(var(--outline) + var(--outline-offset)) var(--focus-ring-outer);
}
.checkbox:focus-within,
.toggle-option:focus-within{
  outline: var(--outline) solid var(--focus-ring);
  outline-offset: var(--outline-offset);
  box-shadow: 0 0 0 calc(var(--outline) + var(--outline-offset)) var(--focus-ring-outer);
}
.panel-header button:focus-visible,
.panel-links a:focus-visible,
.drawer-header button:focus-visible{
  background: #111827;
  color: #ffffff;
}

/* Mobile orientation gate */
.mobile-orientation-overlay{
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  box-sizing: border-box;
  padding: max(1.5rem, var(--malt-mobile-safe-top)) max(1.25rem, var(--malt-mobile-safe-right)) max(1.5rem, var(--malt-mobile-safe-bottom)) max(1.25rem, var(--malt-mobile-safe-left));
  background: rgba(31, 47, 70, 0.96);
  color: var(--panel-header-text-color);
  text-align: center;
  z-index: 2147483647;
  pointer-events: none;
}
.mobile-orientation-overlay.is-visible,
body.is-mobile-device.is-mobile-portrait .mobile-orientation-overlay{
  display: grid;
  pointer-events: auto;
}
.mobile-orientation-card{
  width: min(100%, 22rem);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  padding: clamp(1.5rem, 8vw, 2.5rem);
  background: var(--panel-content-bg);
  color: var(--text);
  border: var(--border-1) solid var(--panel-bdr);
  border-radius: var(--radius-lg);
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.35);
}
.mobile-orientation-icon{
  position: relative;
  width: 7rem;
  height: 6rem;
  display: grid;
  place-items: center;
}
.mobile-orientation-phone{
  position: relative;
  width: 2.75rem;
  height: 4.75rem;
  border: 0.25rem solid var(--panel-header-bg);
  border-radius: 0.65rem;
  background: #ffffff;
  box-shadow: 0 0.35rem 0 rgba(0, 0, 0, 0.16);
  transform: rotate(-18deg);
  animation: malt-phone-rotate 1.8s ease-in-out infinite;
}
.mobile-orientation-phone::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.25rem;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--panel-header-bg);
  transform: translateX(-50%);
}
.mobile-orientation-card h2{
  margin: 0;
  font-size: clamp(1.5rem, 7vw, 2rem);
  line-height: 1.1;
  letter-spacing: 0;
}
.mobile-orientation-card p{
  margin: 0;
  max-width: 18rem;
  font-size: 1rem;
  line-height: 1.45;
}
@keyframes malt-phone-rotate{
  0%, 100% { transform: rotate(-18deg); }
  50% { transform: rotate(72deg); }
}
@media (prefers-reduced-motion: reduce){
  .mobile-orientation-phone{
    animation: none;
  }
}
@media (hover: none) and (pointer: coarse) and (orientation: portrait) and (max-width: 540px) and (max-height: 1024px){
  body:not(.orientation-gate-ready) .mobile-orientation-overlay{
    display: grid;
    pointer-events: auto;
  }
}

/* Mobile landscape layout */
@media (hover: none) and (pointer: coarse){
  body.is-mobile-device.is-mobile-landscape{
    --panel-width: clamp(18rem, 34vw, 20rem);
    --drawer-handle-width: 4.25rem;
    --action-btn-height: 2rem;
  }
  body.is-mobile-device.is-mobile-landscape,
  body.is-mobile-device.is-mobile-landscape #main-content,
  body.is-mobile-device.is-mobile-landscape #view{
    height: var(--malt-app-height);
    min-height: var(--malt-app-height);
    max-height: var(--malt-app-height);
  }
  body.is-mobile-device.is-mobile-landscape .panel,
  body.is-mobile-device.is-mobile-landscape .results-drawer{
    top: var(--malt-mobile-safe-top);
    bottom: var(--malt-mobile-safe-bottom);
    width: min(var(--panel-width), calc(var(--malt-app-width) - 7.5rem));
  }
  body.is-mobile-device.is-mobile-landscape .panel{
    border-top-right-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
  }
  body.is-mobile-device.is-mobile-landscape .panel-header,
  body.is-mobile-device.is-mobile-landscape .drawer-header{
    padding: var(--space-2) var(--space-3);
  }
  body.is-mobile-device.is-mobile-landscape .app-title{
    gap: var(--space-2);
    font-size: 0.9rem;
    line-height: 1.2;
  }
  body.is-mobile-device.is-mobile-landscape .app-title-icon{
    width: 1.25rem;
    height: 1.25rem;
  }
  body.is-mobile-device.is-mobile-landscape #clearBtn,
  body.is-mobile-device.is-mobile-landscape #searchDrawerToggle{
    height: var(--action-btn-height);
    padding: 0 var(--space-2);
    font-size: 0.75rem;
  }
  body.is-mobile-device.is-mobile-landscape .panel-body{
    padding: var(--space-3);
    gap: var(--space-3);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
  }
  body.is-mobile-device.is-mobile-landscape .section{
    padding: var(--space-3);
  }
  body.is-mobile-device.is-mobile-landscape .draw-section{
    padding: 0;
  }
  body.is-mobile-device.is-mobile-landscape .draw-display-controls,
  body.is-mobile-device.is-mobile-landscape .advanced-container,
  body.is-mobile-device.is-mobile-landscape .search-panel{
    gap: var(--space-2);
  }
  body.is-mobile-device.is-mobile-landscape .draw-section .btn-group > .btn,
  body.is-mobile-device.is-mobile-landscape .draw-section .btn-group > .draw-tool-wrap{
    min-width: 5rem;
  }
  body.is-mobile-device.is-mobile-landscape .draw-section .btn{
    padding: var(--space-2);
    font-size: 0.8rem;
  }
  body.is-mobile-device.is-mobile-landscape .draw-help{
    font-size: 0.82rem;
    line-height: 1.3;
  }
  body.is-mobile-device.is-mobile-landscape .search-toggle{
    padding: var(--space-3);
  }
  body.is-mobile-device.is-mobile-landscape .panel-links{
    padding: var(--space-3);
  }
  body.is-mobile-device.is-mobile-landscape .mobile-panel-scroll-cue{
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: rgba(31, 47, 70, 0.94);
    color: var(--panel-header-text-color);
    border-top: var(--border-1) solid rgba(255, 255, 255, 0.28);
    box-shadow: 0 -0.35rem 1rem rgba(15, 23, 42, 0.22);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
    text-align: center;
  }
  body.is-mobile-device.is-mobile-landscape .mobile-panel-scroll-cue.is-visible{
    display: flex;
    animation: mobile-scroll-cue-pulse 2.2s ease-in-out infinite;
  }
  body.is-mobile-device.is-mobile-landscape .mobile-panel-scroll-cue__arrow{
    width: 0.55rem;
    height: 0.55rem;
    border-right: 0.18rem solid currentColor;
    border-bottom: 0.18rem solid currentColor;
    transform: translateY(-0.1rem) rotate(45deg);
    animation: mobile-scroll-cue-arrow 1.35s ease-in-out infinite;
  }
  body.is-mobile-device.is-mobile-landscape .drawer-body{
    padding: var(--space-3) 0 var(--space-3) var(--space-3);
  }
  body.is-mobile-device.is-mobile-landscape #searchModeOverlay.modal-overlay{
    align-items: center;
    padding: max(0.375rem, var(--malt-mobile-safe-top)) max(0.5rem, var(--malt-mobile-safe-right)) max(0.375rem, var(--malt-mobile-safe-bottom)) max(0.5rem, var(--malt-mobile-safe-left));
  }
  body.is-mobile-device.is-mobile-landscape #searchModeOverlay .modal-card{
    width: min(20rem, calc(var(--malt-app-width) - 1rem));
    max-height: calc(var(--malt-app-height) - 0.75rem);
    gap: var(--space-2);
    padding: 0 var(--space-4) var(--space-3);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  body.is-mobile-device.is-mobile-landscape #searchModeOverlay .modal-card h2#searchModeTitle{
    margin: 0 calc(var(--space-4) * -1);
    padding: var(--space-2) calc(var(--space-4) + 2.25rem) var(--space-2) var(--space-4);
    font-size: 1rem;
    line-height: 1.15;
  }
  body.is-mobile-device.is-mobile-landscape #searchModeOverlay .modal-close{
    top: var(--space-1);
    right: var(--space-1);
    width: 1.75rem;
    height: 1.75rem;
    font-size: 1rem;
  }
  body.is-mobile-device.is-mobile-landscape #searchModeOverlay .modal-intro,
  body.is-mobile-device.is-mobile-landscape #searchModeOverlay .modal-footnote{
    font-size: 0.72rem;
    line-height: 1.2;
  }
  body.is-mobile-device.is-mobile-landscape #searchModeOverlay .modal-options{
    gap: var(--space-1);
    padding: var(--space-2) 0;
  }
  body.is-mobile-device.is-mobile-landscape #searchModeOverlay .modal-btn{
    min-height: 1.35rem;
    padding: 0.2rem var(--space-2);
    border-radius: var(--radius-sm);
    font-size: 0.68rem;
    line-height: 1.15;
  }
  body.is-mobile-device.is-mobile-landscape .basemap-control{
    right: var(--malt-mobile-safe-right);
    bottom: var(--malt-mobile-safe-bottom);
    max-width: calc(var(--malt-app-width) - var(--panel-width) - var(--space-5));
    gap: var(--space-1);
    padding: var(--space-2);
  }
  body.is-mobile-device.is-mobile-landscape .basemap-btn{
    min-height: 1.8rem;
    padding: var(--space-1) var(--space-2);
    font-size: 0.75rem;
  }
  body.is-mobile-device.is-mobile-landscape .malt-zoom-control{
    --malt-zoom-button-size: 40px;
    --malt-zoom-symbol-size: 24px;
    --malt-zoom-symbol-stroke: 3px;
  }
  body.is-mobile-device.is-mobile-landscape .esri-ui-top-right{
    top: max(var(--space-2), var(--malt-mobile-safe-top));
    right: max(var(--space-2), var(--malt-mobile-safe-right));
  }
  body.is-mobile-device.is-mobile-landscape .draw-tool-popover{
    display: none;
  }
}
@keyframes mobile-scroll-cue-pulse{
  0%, 100% {
    background: rgba(31, 47, 70, 0.9);
  }
  50% {
    background: rgba(31, 47, 70, 1);
  }
}
@keyframes mobile-scroll-cue-arrow{
  0%, 100% {
    transform: translateY(-0.12rem) rotate(45deg);
    opacity: 0.65;
  }
  50% {
    transform: translateY(0.12rem) rotate(45deg);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce){
  .mobile-panel-scroll-cue.is-visible,
  .mobile-panel-scroll-cue__arrow{
    animation: none;
  }
}