/* Shared type, surfaces and controls across map, valuation and 3D views. */
:root { --ui-font: Arial, Helvetica, sans-serif; --ui-mono: ui-monospace, Consolas, monospace; --font-geist-sans: var(--ui-font); --font-geist-mono: var(--ui-mono); --ui-radius: 10px; --ui-ease: cubic-bezier(.2,.7,.2,1); }
:root,.property-app {
  --ui-control-radius:7px;
  --ui-control-shadow:inset 0 1px #ffffff05;
  --ui-control-duration:180ms;
  --ui-control-shine:linear-gradient(115deg,#9bacb9 8%,#ebf0f5 26%,#a4b4c0 41%,#fff 49%,#c5d8e3 54%,#9bacb9 64%,#e1eaf0 80%);
}
[data-theme=light]{--ui-control-shine:linear-gradient(115deg,#40566a 8%,#586f81 26%,#2c4a5c 41%,#526b78 49%,#38586b 54%,#344f5d 64%,#516979 80%);--ui-control-shadow:inset 0 1px #ffffff80}
html,body { margin:0; font-family:var(--ui-font); background:var(--ui-base); color:var(--ui-text); }
/* Keep touch scrolling; the map and charts own their zoom gestures. */
html,body { touch-action:pan-x pan-y; }
button,input,select,textarea { font:inherit; }
:root, .property-app {
  --ui-base: #090b0f;
  --ui-glass: rgb(13 13 13 / 62%);
  --ui-panel: var(--ui-glass);
  --ui-raised: #ffffff06;
  --ui-hover: #ffffff0d;
  --ui-active: #ffffff12;
  --ui-border: #ffffff24;
  --ui-line: #ffffff0d;
  --ui-text: #eceef2;
  --ui-muted: #a2a6b0;
  --ui-faint: #7d828e;
  --ui-focus: #e2e5ed;
  --ui-shadow: 0 6px 24px #0004;
  --map-panel: var(--ui-panel);
  --map-border: var(--ui-border);
  --map-text: var(--ui-text);
  background: var(--ui-base);
  color: var(--ui-text);
}
[data-theme=light] {
  --ui-base: #f3f4f6;
  --ui-glass: rgb(250 250 250 / 80%);
  --ui-panel: var(--ui-glass);
  --ui-raised: #20232c04;
  --ui-hover: #20232c09;
  --ui-active: #20232c10;
  --ui-border: #292b3428;
  --ui-line: #292b3410;
  --ui-text: #24262c;
  --ui-muted: #60636d;
  --ui-faint: #787c87;
  --ui-focus: #353a46;
  --ui-shadow: 0 6px 24px #14172112;
}
/* Gray surfaces preserve full-color maps and evidence imagery. */
[data-theme=gray]{--ui-base:#373737;--ui-glass:rgb(58 58 58 / 76%);--ui-panel:var(--ui-glass);--ui-raised:#ffffff07;--ui-hover:#ffffff10;--ui-active:#ffffff19;--ui-border:#ffffff2b;--ui-line:#ffffff12;--ui-text:#f1f1f1;--ui-muted:#c6c6c6;--ui-faint:#b1b1b1;--ui-focus:#f4f4f4;--ui-shadow:0 8px 28px #0004;color-scheme:dark}
.property-app{transition:background-color .4s ease,color .3s ease}
.property-app :is(.atlas-header,.atlas-sidebar,.places-section,.map-legend,.page-title-row){transition:background-color .4s ease,border-color .4s ease,color .3s ease}
[data-theme=gray] .sound-visual i[data-lit=true]{background:#dedede}[data-theme=gray] .sound-volume::-webkit-slider-runnable-track{background:linear-gradient(to right,#dedede var(--sound-level),var(--ui-border) var(--sound-level))}
@media(prefers-reduced-motion:reduce){.property-app,.property-app :is(.atlas-header,.atlas-sidebar,.places-section,.map-legend,.page-title-row){transition:none}}
.ui-close-icon {display:block;flex:none;margin:auto;pointer-events:none}
.ui-icon-button {display:grid;place-items:center;width:36px;height:36px;flex:none;padding:0;border:1px solid var(--ui-border);border-radius:var(--ui-radius);background:var(--ui-raised);color:var(--ui-text);cursor:pointer}
.ui-icon-button:hover {background:var(--ui-hover)}
.ui-icon-button:focus-visible {outline:2px solid var(--ui-focus);outline-offset:2px}
@keyframes uiPanelOpen {from{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}

/* Consistent depth for cards; existing translucent surfaces remain intact. */
:root,.property-app{--ui-card-shadow:0 2px 5px #00000024,0 10px 26px #00000029;--ui-floating-shadow:0 4px 12px #00000030,0 18px 42px #0000003d}
[data-theme=light]{--ui-card-shadow:0 2px 5px #1c24300a,0 10px 26px #1c243014;--ui-floating-shadow:0 4px 12px #1c243011,0 18px 42px #1c24301f}
.property-app :is(.api-panel,.finance-card,.history-panel,.history-graph-card,.history-visitors-panel,.bank-alert-card,.alert-history-card,.listing-card,.login-card,.preview-card,.rental-card,.rental-compact-card,.rental-overview-card,.value-card,.places-section){box-shadow:var(--ui-card-shadow)}
.property-app :is(.alert-plot-popup,.capture-panel,.map-ink-panel,.map-place-popup,.mobile-settings-panel,.player-trail-panel,.plot-selection-panel,.rental-floor-panel,.map-legend,.store-popup,.sound-panel){box-shadow:var(--ui-floating-shadow)}
/* Ticked scroll tracks fade away after demonstrated wheel, touch or keyboard scrolling.
   Keep their gutter fixed so the content does not jump. */
@property --session-scrollbar-alpha{syntax:'<number>';inherits:true;initial-value:1}
html{--session-scrollbar-alpha:1;transition:--session-scrollbar-alpha .4s ease}
html body *{scrollbar-color:color-mix(in srgb,var(--ui-muted) calc(var(--session-scrollbar-alpha)*65%),transparent) transparent!important;scrollbar-width:thin}
@supports selector(::-webkit-scrollbar){
 html body *{scrollbar-color:auto!important;scrollbar-width:auto!important}
 html ::-webkit-scrollbar{width:10px!important;height:10px!important;background:transparent!important}
 html ::-webkit-scrollbar-track{border:3px solid transparent!important;background:repeating-linear-gradient(to bottom,color-mix(in srgb,var(--ui-muted) calc(var(--session-scrollbar-alpha)*22%),transparent) 0 2px,transparent 2px 12px) content-box!important}
 html ::-webkit-scrollbar-thumb{border:3px solid transparent!important;border-radius:0!important;box-shadow:none!important;background:repeating-linear-gradient(to bottom,color-mix(in srgb,var(--ui-text) calc(var(--session-scrollbar-alpha)*72%),transparent) 0 2px,transparent 2px 12px) content-box!important}
 html ::-webkit-scrollbar-thumb:hover{background:repeating-linear-gradient(to bottom,color-mix(in srgb,var(--ui-text) calc(var(--session-scrollbar-alpha)*100%),transparent) 0 2px,transparent 2px 12px) content-box!important}
 html ::-webkit-scrollbar:horizontal{height:8px!important}
 html ::-webkit-scrollbar-track:horizontal,html ::-webkit-scrollbar-thumb:horizontal{background-image:repeating-linear-gradient(to right,color-mix(in srgb,var(--ui-muted) calc(var(--session-scrollbar-alpha)*65%),transparent) 0 2px,transparent 2px 12px)!important}
 html ::-webkit-scrollbar-button{display:none!important;width:0!important;height:0!important}
 html ::-webkit-scrollbar-corner{background:transparent!important}
}
@media(prefers-reduced-motion:reduce){html{transition:none}}