/* Local visual refresh. Screen-only link preserves the existing print layout. */
:root {
  --ink: #1d1d1f;
  --muted: #6e6e73;
  --accent: #007aff;
  --glass: rgba(255,255,255,.88);
  --hairline: rgba(28,28,30,.09);
  --float-shadow: 0 8px 32px rgba(20,28,40,.10), 0 1px 3px rgba(20,28,40,.06);
}
html, body, button, input, textarea, .leaflet-container {
  font-family: -apple-system, BlinkMacSystemFont, "Geist", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
}
body { color: var(--ink); background: #f5f5f7; }
#app { padding: 12px; gap: 0; }
#map { border-radius: 24px; overflow: hidden; background: #e9ede8; }
#bar {
  position: absolute; z-index: 800;
  left: 30px; right: 30px; top: 30px;
  padding: 12px 14px 12px 20px; gap: 24px;
  border: 1px solid rgba(255,255,255,.8); border-radius: 22px;
  background: var(--glass); box-shadow: var(--float-shadow);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
}
#brand { gap: 11px; color: var(--ink); text-decoration: none; flex-shrink: 0; }
#brand .brand-icon { width: 37px; height: 37px; border-radius: 10px; }
.brand-copy { display: flex; flex-direction: column; gap: 5px; line-height: 1; }
.brand-name { font-size: 20px; font-weight: 650; letter-spacing: -.8px; }
.brand-name span { color: #86868b; font-weight: 450; }
.brand-subtitle { font-size: 10px; font-weight: 550; color: var(--muted); letter-spacing: .04em; }
#search-inline { position: relative; max-width: 460px; }
#search-inline::before {
  content: ''; position: absolute; left: 17px; top: 13px;
  width: 14px; height: 14px; border: 1.7px solid #86868b; border-radius: 50%; pointer-events: none;
}
#search-inline::after {
  content: ''; position: absolute; left: 29px; top: 26px;
  width: 6px; height: 1.7px; background: #86868b; transform: rotate(45deg); pointer-events: none;
}
.search-input {
  font-family: inherit; border-radius: 13px; border: 1px solid transparent;
  background: rgba(118,118,128,.09); padding: 13px 15px; color: var(--ink);
}
#search-input-desktop { padding-left: 43px; font-size: 14px; height: 44px; }
.search-input::placeholder { color: #77777d; }
.search-input:focus { background: #fff; border-color: #007aff; box-shadow: 0 0 0 4px rgba(0,122,255,.12); }
#actions #btn-auth {
  width: auto; min-height: 42px; padding: 0 16px; gap: 8px;
  border-radius: 99px; background: #007aff; border: 0; color: #fff; box-shadow: none;
  font-size: 13px; font-weight: 600;
}
#actions #btn-auth:hover { background: #0068db; }
#actions #btn-auth .label { display: inline; }
#float-tools {
  top: 121px; right: 30px; padding: 6px; gap: 3px;
  background: var(--glass); border: 1px solid rgba(255,255,255,.8);
  border-radius: 19px; box-shadow: var(--float-shadow);
  backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%);
}
#float-tools button { width: 44px; height: 44px; border-radius: 13px; background: transparent; color: #45454a; }
#float-tools button:hover { background: rgba(0,122,255,.09); color: #007aff; }
#float-tools button.active { background: #007aff; color: white; }
#float-tools button svg { stroke-width: 1.65; }
#float-tools #btn-locate { color: #007aff; margin-bottom: 5px; }
#float-tools #btn-locate.active { color: #fff; }
.leaflet-top.leaflet-left { top: 109px; left: 18px; }
.leaflet-touch .leaflet-bar, .leaflet-bar { border: 1px solid rgba(255,255,255,.8); border-radius: 15px; overflow: hidden; box-shadow: var(--float-shadow); }
.leaflet-bar a { width: 40px; height: 40px; line-height: 40px; background: var(--glass); color: #45454a; border-bottom: 1px solid var(--hairline); }
.leaflet-touch .leaflet-bar a { width: 40px; height: 40px; line-height: 40px; }
.leaflet-bottom.leaflet-left { left: 20px; bottom: 10px; }
#footer { background: transparent; border: 0; padding: 10px 9px 0; color: #77777d; gap: 12px; font-size: 10px; }
#footer button, #footer .links a { color: #6e6e73; font-size: 11px; }
#click-cta { bottom: 66px; background: var(--glass); color: #45454a; border: 1px solid rgba(255,255,255,.8); padding: 12px 12px 12px 18px; font-weight: 500; box-shadow: var(--float-shadow); backdrop-filter: blur(20px); }
#click-cta-close { background: rgba(118,118,128,.10); color: #6e6e73; }
.click-cta-hand { color: #007aff; display: flex; }
dialog { border: 1px solid rgba(255,255,255,.85); border-radius: 26px; background: #fbfbfd; box-shadow: 0 32px 100px rgba(20,28,40,.24); color: var(--ink); }
dialog::backdrop { background: rgba(24,30,40,.25); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
dialog .dlg-head { background: transparent; padding: 22px 22px 18px 26px; border-color: var(--hairline); }
dialog .dlg-head h2 { font-size: 19px; font-weight: 650; letter-spacing: -.5px; }
dialog .dlg-body { padding: 24px 26px 28px; }
dialog .x { background: #eaeaee; border-radius: 50%; width: 30px; height: 30px; font-size: 21px; }
.search-btn, .onboarding-actions button.primary { background: #007aff; border-color: #007aff; border-radius: 12px; min-height: 44px; }
.auth-hero-title { font-size: 25px; letter-spacing: -.8px; }
.auth-hero-icon { background: #e7f1ff; color: #007aff; border-radius: 19px; width: 64px; height: 64px; }
.auth-benefits { gap: 15px; }
.layer-row { background: #fff; border: 1px solid var(--hairline); border-radius: 16px; padding: 16px; margin-bottom: 10px; }
.layer-toggle input[type=checkbox], input[type=range] { accent-color: #007aff; }
.layer-desc { color: #6e6e73; }
.btn-print, .btn-cancel { border-radius: 12px; }
#p-sheet { border: 1px solid rgba(255,255,255,.8); border-radius: 20px; box-shadow: var(--float-shadow); background: var(--glass); backdrop-filter: blur(24px); }
.p-sheet-head { background: transparent; border-bottom-color: var(--hairline); }
.leaflet-popup-content-wrapper { border-radius: 17px; box-shadow: var(--float-shadow); }
.onboarding-slide h3 { font-size: 29px; letter-spacing: -1px; font-weight: 650; line-height: 1.15; }
.onboarding-slide p { color: #6e6e73; line-height: 1.6; }
.onboarding-feats li { padding: 13px 0; border-color: var(--hairline); }
.onboarding-foot { background: transparent; border-top-color: var(--hairline); padding: 18px 26px; }
.onboarding-dots .dot.active { background: #007aff; }
.onboarding-actions button { border-radius: 12px; min-height: 42px; }
.toast { border-radius: 99px; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 3px solid #007aff; outline-offset: 3px; }
@media (max-width: 768px) {
  #app { padding: 0; }
  #map { border-radius: 0; }
  #bar { top: max(12px, env(safe-area-inset-top)); left: 12px; right: 12px; padding: 12px 14px; border-radius: 20px; gap: 10px; }
  .brand-name { font-size: 19px; }
  #brand .brand-icon { height: 34px; width: 34px; }
  #actions #btn-auth { min-height: 40px; padding: 0 13px; }
  #float-tools { top: 100px; right: 12px; border-radius: 17px; }
  #float-tools button { width: 42px; height: 42px; }
  .leaflet-top.leaflet-left { top: 90px; left: 2px; }
  #footer { padding: 8px 12px max(8px, env(safe-area-inset-bottom)); background: #f5f5f7; }
  #footer .attribution { max-width: 47%; }
  #click-cta { bottom: 64px; font-size: 12px; max-width: calc(100% - 28px); }
  dialog { border-radius: 28px 28px 0 0; }
  dialog .dlg-body { padding: 20px 24px 26px; }
  .onboarding-slide h3 { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
/* Native-feeling switches retain the semantic checkbox and keyboard behavior. */
.layer-toggle input[type=checkbox] {
  appearance: none; -webkit-appearance: none; position: relative;
  flex: 0 0 36px; width: 36px; height: 22px; margin: 0 3px 0 0;
  background: #d1d1d6; border: 0; border-radius: 99px;
  transition: background .18s ease;
}
.layer-toggle input[type=checkbox]::before {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%; background: white;
  box-shadow: 0 1px 3px rgba(0,0,0,.16); transition: transform .18s ease;
}
.layer-toggle input[type=checkbox]:checked { background: #34c759; }
.layer-toggle input[type=checkbox]:checked::before { transform: translateX(14px); }
.layer-row.off { opacity: 1; background: #f4f4f6; }
@media (min-width: 769px) { #float-tools #btn-search { display: none; } }
@media (max-width: 768px) { #footer .attribution { max-width: 100%; } }
@media (prefers-reduced-motion: reduce) { .layer-toggle input[type=checkbox], .layer-toggle input[type=checkbox]::before { transition: none; } }
/* Consistent icon geometry, independent of browser button padding/font baselines. */
#float-tools button, dialog .x, #p-sheet-close, #click-cta-close {
  appearance: none; -webkit-appearance: none;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; line-height: 1; flex-shrink: 0;
}
#float-tools button svg, #actions button svg, #p-sheet-close svg, #click-cta-close svg {
  display: block; flex: 0 0 auto; margin: 0;
}
.leaflet-control-zoom a, dialog .x { position: relative; }
.leaflet-control-zoom a span { font-size: 0; }
.leaflet-control-zoom a::before, .leaflet-control-zoom-in::after,
dialog .x::before, dialog .x::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 13px; height: 1.6px; background: currentColor; border-radius: 2px;
  transform: translate(-50%, -50%); pointer-events: none;
}
.leaflet-control-zoom-in::after { transform: translate(-50%, -50%) rotate(90deg); }
dialog .x { font-size: 0; }
dialog .x::before { transform: translate(-50%, -50%) rotate(45deg); }
dialog .x::after { transform: translate(-50%, -50%) rotate(-45deg); }
#bar, #float-tools, .leaflet-control-zoom, dialog .dlg-head,
.layer-toggle, .onboarding-actions, button {
  user-select: none; -webkit-user-select: none;
}
/* Keep real keyboard focus visible without a persistent ring after pointer use. */
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid rgba(0,122,255,.65); outline-offset: 2px;
}
html:not(.keyboard-navigation) button:focus,
html:not(.keyboard-navigation) a:focus,
html:not(.keyboard-navigation) input[type=checkbox]:focus,
html:not(.keyboard-navigation) input[type=range]:focus {
  outline: none;
}
.search-input:focus { box-shadow: 0 0 0 2px rgba(0,122,255,.10); }
/* Input focus is drawn by the app, never by the browser's default ring. */
input:not([type=checkbox]):not([type=range]), textarea {
  appearance: none; -webkit-appearance: none; caret-color: #007aff;
}
input:not([type=checkbox]):not([type=range]):focus,
input:not([type=checkbox]):not([type=range]):focus-visible,
textarea:focus, textarea:focus-visible,
.search-input:focus, .p-note-textarea:focus {
  outline: none; box-shadow: none;
  border-color: rgba(60,60,67,.20); background-color: #fff;
}
html.keyboard-navigation input:not([type=checkbox]):not([type=range]):focus-visible,
html.keyboard-navigation textarea:focus-visible {
  outline: none; box-shadow: inset 0 0 0 1px rgba(0,122,255,.55);
}
input[type=search]::-webkit-search-decoration { -webkit-appearance: none; }
/* One continuous frosted-glass header, with controls inset into its surface. */
#bar { pointer-events: auto; }
#search-inline { border: 0; box-shadow: none; background: transparent; }
#search-input-desktop { background: rgba(118,118,128,.09); }
#search-input-desktop:focus { background: rgba(255,255,255,.7); }
#float-tools {
  padding: 4px; gap: 0; top: 121px; border-radius: 17px;
  background: rgba(250,250,252,.92);
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: 0 3px 18px rgba(20,25,35,.12), inset 0 0 0 .5px rgba(0,0,0,.04);
}
#float-tools button { width: 42px; height: 44px; border-radius: 11px; color: #3a3a3c; }
#float-tools #btn-locate { margin-bottom: 9px; position: relative; }
#float-tools #btn-locate::after { content: ''; position: absolute; height: .5px; background: rgba(60,60,67,.16); bottom: -5px; left: 7px; right: 7px; }
#float-tools button.active { background: rgba(0,122,255,.12); color: #007aff; }
#float-tools #btn-locate.active { color: #007aff; }
#float-tools button:hover { background: rgba(118,118,128,.08); }
#float-tools button:active { background: rgba(118,118,128,.16); }
#float-tools button svg { width: 19px; height: 19px; stroke-width: 1.7; }
.leaflet-top.leaflet-left { top: 109px; }
.leaflet-control-zoom a, .leaflet-control-zoom a:hover { background: rgba(250,250,252,.94); }
.leaflet-control-zoom { backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
/* Custom opacity sliders: fine track, white thumb, no native focus halo. */
.layer-row input[type=range] {
  appearance: none; -webkit-appearance: none; height: 28px; margin: 4px 0 0;
  background: transparent; border: 0; box-shadow: none; outline: none; cursor: pointer;
}
.layer-row input[type=range]::-webkit-slider-runnable-track {
  height: 4px; border: 0; border-radius: 99px;
  background: linear-gradient(to right, #007aff 0 var(--range-fill,100%), #dedee3 var(--range-fill,100%) 100%);
}
.layer-row input[type=range]::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin-top: -8px;
  background: #fff; border: .5px solid rgba(0,0,0,.08); border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,.20);
}
.layer-row input[type=range]::-moz-range-track { height: 4px; border-radius: 99px; background: #dedee3; }
.layer-row input[type=range]::-moz-range-progress { height: 4px; border-radius: 99px; background: #007aff; }
.layer-row input[type=range]::-moz-range-thumb { width: 20px; height: 20px; border: .5px solid rgba(0,0,0,.08); border-radius: 50%; background: white; box-shadow: 0 1px 4px rgba(0,0,0,.20); }
.layer-row input[type=range]:disabled { cursor: default; opacity: .45; }
html.keyboard-navigation .layer-row input[type=range]:focus-visible { outline: 2px solid rgba(0,122,255,.5); outline-offset: 2px; border-radius: 8px; }
@media (max-width: 768px) {
  #float-tools { top: 100px; }
  .leaflet-top.leaflet-left { top: 90px; }
}
.layer-row input[type=range]:disabled::-webkit-slider-runnable-track { background: #d1d1d6; }
.layer-row input[type=range]:disabled::-moz-range-progress { background: #d1d1d6; }

/* Shared button family: geometry and feedback are consistent; color conveys role. */
:root { --button-radius: 12px; --button-fill: #efeff2; --button-hover: #e5e5ea; }
button { font-family: inherit; -webkit-tap-highlight-color: transparent; }
.search-btn, .auth-logout-btn, .auth-delete-btn, .btn-print, .btn-cancel,
.btn-danger, .btn-clear-all, .p-retry-btn, .p-visura-btn, .p-action-btn,
.visura-sister-btn, .save-btn, .onboarding-actions button, .confirm-buttons button,
.polygons-empty-cta button {
  border-radius: var(--button-radius); min-height: 42px;
  font-size: 13px; font-weight: 600; line-height: 1.25;
  box-shadow: none; transition: background .15s ease, color .15s ease;
}
.auth-logout-btn, .btn-print, .btn-cancel, .p-retry-btn, .p-action-btn,
.visura-sister-btn, .onboarding-actions button:not(.primary):not(.ghost) {
  background: var(--button-fill); color: #3a3a3c; border: 1px solid transparent;
}
.auth-logout-btn:hover, .btn-print:hover, .btn-cancel:hover, .p-retry-btn:hover,
.p-action-btn:hover, .visura-sister-btn:hover,
.onboarding-actions button:not(.primary):not(.ghost):hover { background: var(--button-hover); border-color: transparent; }
.search-btn, .p-visura-btn, .save-btn, .onboarding-actions button.primary,
.polygons-empty-cta button { background: #007aff; color: white; border-color: transparent; }
.search-btn:hover, .p-visura-btn:hover, .save-btn:hover,
.onboarding-actions button.primary:hover, .polygons-empty-cta button:hover { background: #0068db; border-color: transparent; }
.auth-delete-btn, .btn-clear-all { background: #fff0ef; color: #c52b25; border-color: transparent; }
.auth-delete-btn:hover, .btn-clear-all:hover { background: #ffe2e0; color: #b4231d; border-color: transparent; }
.btn-danger { background: #d92d27; color: white; }
.btn-danger:hover { background: #bd251f; }
.p-save-btn.saved { background: #e8f3ea; color: #287b3c; }
.p-save-btn.saved:hover { background: #dbeddf; }
#actions > #btn-auth:not(.logged) {
  height: 42px; border-radius: var(--button-radius);
  background: #007aff !important; color: white !important; border-color: transparent !important;
  box-shadow: none;
}
#actions > #btn-auth:not(.logged):hover { background: #0068db !important; border-color: transparent !important; }
#actions > #btn-auth:not(.logged):active { background: #005bbf !important; border-color: transparent !important; }
#actions > #btn-auth.logged { border-radius: var(--button-radius); box-shadow: none; }
button:disabled { opacity: .45; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { button { transition: none !important; } }
.bookmark-actions button, .bookmark-actions .import-label, .polygon-actions button {
  min-height: 42px; border-radius: var(--button-radius); padding: 10px 14px;
  font-size: 13px; font-weight: 600; line-height: 1.25; box-shadow: none;
}
.bookmark-actions button, .bookmark-actions .import-label,
.polygon-actions .toggle-visibility {
  background: var(--button-fill) !important; color: #3a3a3c !important; border: 1px solid transparent !important;
}
.bookmark-actions button:hover, .bookmark-actions .import-label:hover,
.polygon-actions .toggle-visibility:hover { background: var(--button-hover) !important; }
.polygon-actions button:not(.toggle-visibility) { background: #007aff; color: white; }
.polygon-actions button:not(.toggle-visibility):hover { background: #0068db; }
.bookmark-actions .toggle-visibility.hidden-state, .polygon-actions .toggle-visibility.hidden-state {
  background: #e7f1ff !important; color: #0068db !important;
}
.bookmark-del, .polygon-del, .polygon-order-btn { border-radius: 10px; }
.measure-exit, .draw-exit, .poly-edit-exit { background: #007aff; font-weight: 600; box-shadow: var(--float-shadow); }
/* Search location: the pointed tip remains exactly on the returned coordinate. */
.search-result-marker { background: transparent; border: 0; }
.search-result-marker svg { display: block; overflow: visible; }
.search-pin-shadow { fill: rgba(15,35,65,.22); }
.search-pin-body { fill: #007aff; stroke: none; filter: drop-shadow(0 2px 2px rgba(0,48,110,.18)); }
.search-pin-disc { fill: rgba(255,255,255,.9); r: 5px; }
.search-pin-center { display: none; }
.search-result-marker:focus-visible { outline: 2px solid #007aff; outline-offset: 4px; border-radius: 18px; }
.search-result-popup .leaflet-popup-content-wrapper {
  background: rgba(255,255,255,.95); border: 1px solid rgba(255,255,255,.8);
  border-radius: 17px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--float-shadow);
}
.search-result-popup .leaflet-popup-content { margin: 16px 32px 16px 18px; font-family: inherit; font-size: 13px; line-height: 1.5; color: #1d1d1f; }
.search-result-label { display: block; font-weight: 550; }
.search-result-popup .leaflet-popup-tip { background: rgba(255,255,255,.95); box-shadow: none; }
.search-result-popup a.leaflet-popup-close-button { top: 7px; right: 7px; color: #86868b; border-radius: 50%; }
@media (max-width: 480px) {
  .search-result-popup .leaflet-popup-content { max-width: calc(100vw - 160px); }
}
/* Phone parcel details stay within thumb reach; the map and its pin remain live. */
@media (max-width: 767.98px) {
  #p-sheet {
    position: fixed; inset: auto 8px max(8px, env(safe-area-inset-bottom)) 8px;
    width: auto; max-width: none; max-height: 46vh; max-height: 46dvh;
    border-radius: 24px; overflow: hidden; z-index: 1100;
    background: rgba(250,250,252,.96);
    box-shadow: 0 -4px 28px rgba(20,28,40,.12), 0 2px 8px rgba(20,28,40,.08);
  }
  #p-sheet:not([hidden]) { display: flex; flex-direction: column; }
  #p-sheet::before, #p-sheet::after { display: none; }
  #p-sheet .p-sheet-head { flex: 0 0 auto; padding: 16px 16px 12px 20px; border-radius: 24px 24px 0 0; }
  #p-sheet .p-sheet-title { font-size: 16px; letter-spacing: -.3px; }
  #p-sheet .p-sheet-body { overflow-y: auto; overscroll-behavior: contain; min-height: 0; padding: 14px 20px 20px; }
  #p-sheet .p-sheet-x { width: 36px; height: 36px; border-radius: 50%; background: #eaeaee; }
}