/* NIXAN GIS crystal surfaces: clear centers, polished rims and edge refraction.
   Visual reference: the Romance Paris offer panel and the user's six photos.
   React Bits GlassSurface / GlassIcons / Dock adaptation, (c) 2026 David Haz.
   MIT + Commons Clause. Full notice: /vendor/ReactBits-LICENSE.txt. */
.liquid-filter-bank { position: fixed; width: 0; height: 0; overflow: hidden; pointer-events: none; }

@media screen {
  :root {
    --header: calc(94px + env(safe-area-inset-top, 0px));
    --ink: #102329;
    --muted: #314a51;
    --green: #236b68;
    --green-light: rgba(120, 184, 180, .18);
    --amber: #94632b;
    --violet: #73539f;
    --line: rgba(16, 35, 41, .18);
    --glass-tint: rgba(203, 219, 220, .24);
    --glass-reading-tint: rgba(203, 219, 220, .32);
    --glass-control: rgba(239, 248, 248, .34);
    --glass-focus: rgba(239, 248, 248, .78);
    --glass-card: rgba(239, 248, 248, .18);
    --glass-solid: #e8eeed;
    --glass-brightness: 1;
    --glass-logo-filter: none;
    --glass-text-shadow: 0 1px 1px rgba(255, 255, 255, .62);
    --glass-shadow: 0 18px 38px rgba(7, 12, 16, .19), 0 2px 5px rgba(7, 12, 16, .22);
    color-scheme: light;
  }
  /* Smoked crystal on imagery; no blur or white veil is added. */
  html[data-glass-imagery="satellite"], html[data-glass-imagery="hybrid"] {
    --ink: #f3f7f5;
    --muted: #d2dfde;
    --green: #aedbd5;
    --green-light: rgba(120, 184, 180, .17);
    --amber: #e4bd88;
    --violet: #d3bef3;
    --line: rgba(232, 238, 237, .24);
    --glass-tint: rgba(7, 18, 23, .38);
    --glass-reading-tint: rgba(7, 18, 23, .48);
    --glass-control: rgba(7, 18, 23, .50);
    --glass-focus: rgba(7, 18, 23, .78);
    --glass-card: rgba(7, 18, 23, .38);
    --glass-solid: #102329;
    --glass-brightness: .9;
    --glass-logo-filter: brightness(0) invert(1);
    --glass-text-shadow: 0 1px 2px rgba(0, 0, 0, .95), 0 0 6px rgba(0, 0, 0, .7);
    color-scheme: dark;
  }
  body { color: var(--ink); background: #e8eeed; }
  #workspace { position: fixed; inset: 0; height: 100dvh; }
  #map { position: absolute !important; inset: 0; bottom: 0; height: 100%; }

  .liquid-glass {
    --glint-x: 18%; --glint-y: 0%;
    color: var(--ink);
    text-shadow: var(--glass-text-shadow);
    border: 1px solid rgba(7, 18, 23, .48);
    background: linear-gradient(125deg, rgba(239, 255, 255, .035), transparent 32% 78%, rgba(185, 216, 223, .025)), var(--glass-tint);
    -webkit-backdrop-filter: brightness(var(--glass-brightness)) saturate(1.04);
    backdrop-filter: brightness(var(--glass-brightness)) saturate(1.04);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .68), inset 0 -2px 2px rgba(7, 18, 23, .62), inset 2px 0 2px rgba(255, 255, 255, .28), inset -2px 0 3px rgba(7, 18, 23, .3), inset 0 0 0 4px rgba(7, 18, 23, .10), var(--glass-shadow);
  }
  html[data-liquid-glass="svg"] .liquid-glass {
    backdrop-filter: var(--liquid-filter) brightness(var(--glass-brightness)) saturate(1.04);
  }
  .sidebar, .details, .search-results, .measure-panel { --glass-tint: var(--glass-reading-tint); }
  .liquid-glass::before, .liquid-glass::after {
    content: ''; position: absolute; border-radius: inherit; pointer-events: none;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  }
  /* Both highlight layers are rings. The center receives no white reflection. */
  .liquid-glass::before {
    z-index: 2; inset: 0; padding: 1.5px;
    background: radial-gradient(ellipse at var(--glint-x) var(--glint-y), rgba(255,255,255,.72), transparent 48%), linear-gradient(145deg, #ffffff40, transparent 24% 74%, #b9d8df40);
  }
  .liquid-glass::after {
    z-index: 2; inset: 2px; padding: 6px;
    border: 1px solid rgba(7, 18, 23, .23);
    background: conic-gradient(from 210deg, #071217a6, #ffffff70 12%, #ffffff0a 29%, #0712178c 45%, #b9d8df0d 58%, #ffffff61 76%, #ffffff08 88%, #071217a6);
    box-shadow: inset 0 1px 1px #ffffffb3, inset 0 -1px 2px #07121780;
  }
  .topbar {
    position: fixed; top: calc(12px + env(safe-area-inset-top, 0px)); left: 18px; right: 18px;
    height: 68px; padding: 0 18px; border-radius: 24px; gap: 18px;
  }
  /* Center the visible artwork inside the crop, with space clear of the glass rim. */
  .logo-box { position: relative; display: block; flex: 0 0 144px; width: 144px; height: 48px; overflow: hidden; background: transparent; }
  .logo-box img { position: absolute; left: 50%; top: 50%; width: 160px; height: auto; max-width: none; transform: translate(-50%, -51.2%); filter: var(--glass-logo-filter); }
  .brand-app { color: var(--ink); border-color: var(--line); }
  .country, .dataset-status { color: var(--muted); }
  .header-divider { background: var(--line); }
  .global-search {
    background: var(--glass-control); border-color: rgba(225,243,244,.5); border-radius: 18px;
    box-shadow: inset 0 2px 4px #07121726, 0 1px 0 #ffffff60;
  }
  .global-search:focus-within { background: var(--glass-focus); border-color: var(--green); }
  .global-search input, .global-search svg, .global-search kbd { color: var(--ink); text-shadow: var(--glass-text-shadow); }
  .global-search input::placeholder { color: var(--muted); }
  .global-search kbd { border-color: var(--line); }
  .sidebar { top: calc(var(--header) + 6px); border-radius: 26px; }
  .base-control { top: calc(var(--header) + 6px); border-radius: 22px; }
  .map-tools { top: calc(var(--header) + 72px); border-radius: 21px; gap: 8px; padding: 7px; }
  .details { top: calc(var(--header) + 72px); border-radius: 26px; }
  .measure-panel { top: calc(var(--header) + 72px); border-radius: 24px; }
  .search-results { top: calc(var(--header) - 3px); border-radius: 22px; }
  .map-notice, .location-badge { border-radius: 20px; color: var(--ink); }
  .eyebrow, .field-label, .layer-row small, .option-row, .source-note, .source-note small,
  .side-footer, .detail-address, .detail-note, .data-row dt, .metric small, .metric strong span,
  .owner-card > small, .owner-card p, .measure-panel p, .measure-panel > small,
  .location-badge small, .empty-state, .result-item small, .national-progress-button small,
  .national-metrics span, dialog p, dialog .muted { color: var(--muted); }
  .mini-tag { background: var(--glass-card); color: var(--ink); }
  .select-wrap, .text-field {
    background: var(--glass-control); color: var(--ink); border-color: rgba(225,243,244,.45);
    box-shadow: inset 0 1px 3px #07121720, 0 1px 0 #ffffff38; border-radius: 13px;
  }
  .select-wrap select, .search-options select { color: var(--ink); text-shadow: var(--glass-text-shadow); }
  select option { background: var(--glass-solid); color: var(--ink); }
  .text-field::placeholder { color: var(--muted); }
  .text-field:focus { background: var(--glass-focus); }
  .layer-glyph.parcel { color: var(--green); background: #78b8b426; }
  .layer-glyph.building { color: var(--amber); background: #e4bd8826; }
  .layer-glyph.unit { color: var(--violet); background: #c2afe826; }
  .toggle { background: #10232955; box-shadow: inset 0 1px 3px #0712174d; }
  .toggle:after, .layer-row input:checked + .toggle:after { background: #f7fcfc; }
  .side-tabs button, .detail-tabs button, .base-control button { color: var(--muted); }
  .side-tabs button.active, .detail-tabs button.active { color: var(--green); }
  .detail-tabs { background: var(--glass-control); -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 10px 10px 0 0; }
  .icon-btn, .icon-btn.light { color: var(--ink); }
  .icon-btn:hover, .icon-btn.light:hover { background: var(--glass-control); }
  .icon-btn.active { color: var(--green); background: var(--green-light); }
  .map-tools .icon-btn {
    position: relative; border-radius: 13px; border: 1px solid #e1f3f480;
    background: linear-gradient(145deg, #ffffff17, #b9d8df05);
    box-shadow: inset 0 1px 0 #ffffffb3, inset 0 -1px 2px #07121766, inset 1px 0 1px #ffffff40, 0 4px 7px #07121726;
    transition: transform .22s, box-shadow .22s;
  }
  .map-tools .icon-btn + .icon-btn { border-radius: 13px; border-top: 1px solid #e1f3f480; }
  .map-tools .icon-btn svg { filter: drop-shadow(0 1px 1px #07121744); }
  .map-tools .icon-btn.active { background: #78b8b438; }
  .primary-button { background: linear-gradient(135deg, #a9d8d2, #78b8b4); color: #102329; text-shadow: none; box-shadow: inset 0 1px 1px #ffffff66, 0 4px 12px #07121726; }
  .primary-button:hover { background: #b6e1db; }
  .secondary-button, .install-button {
    color: var(--ink); background: var(--glass-control); border-color: #e1f3f475;
    box-shadow: inset 0 1px 1px #ffffff80, inset 0 -1px 2px #07121740, 0 3px 8px #07121714;
  }
  .secondary-button:hover, .install-button:hover { background: var(--glass-focus); }
  .secondary-button.saved { color: var(--green); background: #78b8b429; border-color: #78b8b47d; }
  .base-control button { border-radius: 16px; text-shadow: var(--glass-text-shadow); }
  .base-control button.active { color: var(--ink); background: var(--glass-control); box-shadow: inset 0 1px 0 #ffffffb3, inset 0 0 0 1px #e1f3f48c, inset 0 -2px 3px #07121744, 0 3px 7px #07121729; }
  .base-control button:not(.active):hover { color: var(--ink); background: var(--glass-control); }
  .result-item { color: var(--ink); }
  .result-item:hover { background: var(--glass-focus); }
  .result-item .area-label, .search-section-label { color: var(--green); }
  .empty-state svg { color: var(--muted); }
  .detail-subtags span, .property-breadcrumb button, #about-stats span { background: var(--glass-card); color: var(--ink); }
  .metric, .national-metrics > div { background: var(--glass-card); border-color: #e1f3f440; box-shadow: inset 0 1px 1px #ffffff30, inset 0 -1px 2px #0712171a; }
  .metric strong, .national-metrics b, #measure-value, .details h1 { color: var(--ink); }
  .owner-card { background: var(--glass-card); }
  .segmented, .install-platforms { background: #07121717; box-shadow: inset 0 1px 3px #07121726; }
  .segmented button.active, .install-platforms button.active { background: var(--glass-control); color: var(--green); box-shadow: inset 0 1px 1px #ffffff80, 0 2px 5px #07121726; }
  dialog { color: var(--ink); border-radius: 27px; --glass-tint: var(--glass-reading-tint); }
  dialog::backdrop { background: rgba(7, 12, 16, .24); backdrop-filter: none; }
  .install-dialog #install-message { color: var(--green); }
  .national-progress-button { color: var(--green); background: var(--glass-card); border-color: #e1f3f440; box-shadow: inset 0 1px 1px #ffffff40; }
  .national-progress-button:hover { background: var(--glass-control); }
  #national-bar, #national-bar::-webkit-progress-bar { background: #07121733; }
  #national-bar::-webkit-progress-value { background: #78b8b4; }
  #national-bar::-moz-progress-bar { background: #78b8b4; }
  .sheet-handle { background: var(--muted); opacity: .5; }
  #toast { background: var(--glass-solid); color: var(--ink); border-color: #b9d8df66; backdrop-filter: none; }
  .sidebar, .detail-scroll, #detail-content, .search-results, dialog, .national-regions { scrollbar-color: #638b90 transparent; }

  @media (hover: hover) and (pointer: fine) {
    .map-tools .icon-btn:hover { transform: translateY(-2px); box-shadow: inset 0 1px 1px #fff, inset 0 -1px 3px #1023291a, 0 7px 12px #10232921; }
    .map-tools .icon-btn:active { transform: translateY(0); }
  }
  @media (max-width: 1150px) { .topbar { gap: 12px; padding: 0 16px; } }
  @media (max-width: 1024px) {
    :root { --header: calc(124px + env(safe-area-inset-top, 0px)); }
    .topbar { top: calc(10px + env(safe-area-inset-top, 0px)); left: max(10px, env(safe-area-inset-left, 0px)); right: max(10px, env(safe-area-inset-right, 0px)); height: 100px; padding: 8px 12px 10px; gap: 8px; border-radius: 24px; }
    .logo-box { flex-basis: 108px; width: 108px; height: 34px; }
    .logo-box img { width: 112px; height: auto; }
    .global-search { border-radius: 16px; }
    .sidebar { top: auto; bottom: calc(112px + env(safe-area-inset-bottom, 0px)); max-height: calc(100dvh - var(--header) - 126px - env(safe-area-inset-bottom, 0px)); border-radius: 25px; }
    .base-control { top: calc(var(--header) + 2px); }
    .map-tools { top: calc(var(--header) + 58px); padding: 5px; gap: 5px; border-radius: 18px; }
    .details { top: auto; bottom: calc(112px + env(safe-area-inset-bottom, 0px)); max-height: calc(100dvh - var(--header) - 126px - env(safe-area-inset-bottom, 0px)); border-radius: 25px; }
    .details.expanded { height: calc(100dvh - var(--header) - 126px - env(safe-area-inset-bottom, 0px)); }
    .measure-panel { top: calc(var(--header) + 58px); }
    .search-results { top: calc(var(--header) - 3px); max-height: calc(100dvh - var(--header) - 125px - env(safe-area-inset-bottom, 0px)); }
    .mobile-nav { left: 14px; right: 14px; bottom: calc(30px + env(safe-area-inset-bottom, 0px)); width: auto; max-width: 440px; margin: 0 auto; min-height: 64px; padding: 6px; border-radius: 24px; gap: 4px; }
    .mobile-nav button { color: var(--muted); width: 25%; border-radius: 18px; padding: 6px 0; min-height: 48px; font-weight: 500; position: relative; transition: background .2s, box-shadow .2s; }
    .mobile-nav button.active { color: var(--ink); background: var(--glass-control); box-shadow: inset 0 1px 1px #fff, inset 0 -2px 3px #10232910, 0 2px 6px #10232916; }
    .mobile-nav button.active::after { content: ''; position: absolute; bottom: 1px; width: 12px; height: 2px; border-radius: 2px; background: #3e8580; }
    .location-badge { bottom: calc(119px + env(safe-area-inset-bottom, 0px)); }
    .map-notice { bottom: calc(120px + env(safe-area-inset-bottom, 0px)); }
    #toast { bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }
    .gm-style-cc { bottom: 0 !important; }
    .leaflet-control-zoom { margin-bottom: 120px !important; }
    .leaflet-control-attribution { bottom: 0; }
  }
  @media (max-width: 1024px) and (max-height: 520px) and (orientation: landscape) {
    :root { --header: calc(68px + env(safe-area-inset-top, 0px)); }
    .topbar { top: calc(6px + env(safe-area-inset-top, 0px)); height: 50px; padding: 6px 10px; border-radius: 20px; }
    .global-search { min-width: 0; height: 36px; }
    .sidebar { top: calc(var(--header) + 4px); bottom: calc(64px + env(safe-area-inset-bottom, 0px)); max-height: none; }
    .base-control { top: calc(var(--header) + 3px); }
    .map-tools { top: calc(var(--header) + 45px); gap: 2px; padding: 3px; }
    .map-tools .icon-btn { width: 28px; height: 28px; border-radius: 10px; }
    .map-tools .icon-btn + .icon-btn { border-radius: 10px; }
    .details, .details.expanded { top: calc(var(--header) + 4px); bottom: calc(64px + env(safe-area-inset-bottom, 0px)); height: auto; max-height: none; border-radius: 20px; }
    .measure-panel { top: calc(var(--header) + 4px); max-height: calc(100dvh - var(--header) - 66px - env(safe-area-inset-bottom, 0px)); border-radius: 20px; }
    .search-results { max-height: calc(100dvh - var(--header) - 64px - env(safe-area-inset-bottom, 0px)); }
    .mobile-nav { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); min-height: 42px; max-width: 430px; padding: 3px 6px; border-radius: 20px; }
    .mobile-nav button { min-height: 34px; padding: 4px 0; border-radius: 15px; }
    .mobile-nav button.active::after { bottom: 0; }
    .location-badge { bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
    #toast { bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
  }
  @media (prefers-reduced-motion: reduce) {
    .liquid-glass::before { --glint-x: 18%; --glint-y: 0%; }
    .map-tools .icon-btn:hover { transform: none; }
  }
  @media (prefers-reduced-transparency: reduce) {
    .liquid-glass { background: var(--glass-solid); text-shadow: none; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .liquid-glass { background: var(--glass-solid); text-shadow: none; }
  }
}
@media print { .liquid-glass::before, .liquid-glass::after, .liquid-filter-bank { display: none !important; } }