/* NIXAN AI identity, observed at https://nixan.ai/ on 2026-11-06.
   Typography and core palette match style.css and experience.css there.
   This layer styles the GIS controls; map imagery and data colors keep their meaning. */
:root {
  --nixan-font: 'Avenir Next', Avenir, 'Segoe UI', sans-serif;
  font-family: var(--nixan-font);
  font-synthesis: none;
}

@media screen {
  :root {
    --night: #070c10;
    --petrol: #102329;
    --text: #e8eeed;
    --muted: #a4b3b6;
    --accent: #78b8b4;
    --ice: #b9d8df;
    --warm: #a99789;
    --navy: var(--night);
    --ink: var(--text);
    --line: rgba(185, 216, 223, .19);
    --green: var(--accent);
    --green-light: rgba(120, 184, 180, .12);
    --amber: #e4bd88;
    --violet: #c2afe8;
    --panel: rgba(16, 35, 41, .97);
    --control: #132a30;
    --hover: #214249;
    --shadow: 0 16px 44px rgba(7, 12, 16, .24), 0 1px 5px rgba(7, 12, 16, .16);
    color-scheme: dark;
    background: var(--night);
  }

  body { background: var(--night); color: var(--text); }
  ::selection { background: var(--accent); color: var(--night); }
  button, input, select, textarea { font-family: var(--nixan-font); }
  button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
    outline-color: var(--ice);
  }
  .topbar {
    background: linear-gradient(120deg, #0b191e, var(--night) 70%);
    color: var(--text);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 5px 20px rgba(7, 12, 16, .18);
  }

  /* Same light-on-dark treatment as the original site's #header-logo.
     The source PNG, all letter shapes and its aspect ratio are unchanged. */
  .logo-box { background: transparent; border-radius: 0; }
  .logo-box img { filter: brightness(0) invert(1); }
  .brand-app { color: var(--ice); font-weight: 400; border-color: var(--line); }
  .header-divider { background: var(--line); }
  .country, .dataset-status { color: var(--muted); }
  .dataset-status i, .source-dot { background: var(--accent); }
  .global-search {
    background: linear-gradient(140deg, rgba(232, 238, 237, .065), rgba(16, 35, 41, .28));
    border-color: var(--line);
    border-radius: 13px;
    transition: border-color .18s, background .18s;
  }
  .global-search:focus-within { border-color: var(--accent); background: var(--control); }
  .global-search input { color: var(--text); }
  .global-search input::placeholder { color: var(--muted); opacity: 1; }
  .global-search svg, .global-search kbd { color: var(--ice); }
  .global-search kbd { border-color: var(--line); }

  .panel, dialog {
    border: 1px solid var(--line);
    background: var(--panel);
    box-shadow: var(--shadow);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
  }
  .panel { border-radius: 16px; }
  .eyebrow { color: var(--muted); font-weight: 500; letter-spacing: .13em; }
  .field-label, .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);
  }
  .section-heading h2 { font-weight: 600; letter-spacing: -.02em; }
  .layer-row strong, .select-wrap select, .side-tabs button, .detail-tabs button,
  .base-control button, .primary-button, .national-progress-button > span { font-weight: 600; }
  .details h1, .metric strong, .national-metrics b, #measure-value {
    font-weight: 500;
    letter-spacing: -.035em;
  }
  .mini-tag {
    background: rgba(185, 216, 223, .08);
    color: var(--ice);
    font-weight: 500;
  }
  .select-wrap, .text-field {
    background: var(--control);
    border-color: var(--line);
    border-radius: 10px;
    color: var(--text);
  }
  .select-wrap { flex-shrink: 0; }
  .select-wrap select, .search-options select { color: var(--text); }
  select option { background: var(--petrol); color: var(--text); }
  .text-field::placeholder { color: var(--muted); opacity: 1; }
  .text-field:focus { border-color: var(--accent); }
  .layer-row, .data-row { border-color: var(--line); }
  .layer-glyph.parcel { background: rgba(120, 184, 180, .13); color: var(--accent); }
  .layer-glyph.building { background: rgba(228, 189, 136, .13); color: var(--amber); }
  .layer-glyph.unit { background: rgba(194, 175, 232, .13); color: var(--violet); }
  .toggle { background: #40585e; }
  .toggle:after { background: var(--text); }
  .layer-row input:checked + .toggle:after { background: var(--night); }
  .layer-row input:focus-visible + .toggle { outline-color: var(--ice); }
  .side-tabs button, .detail-tabs button { color: var(--muted); }
  .side-tabs button.active, .detail-tabs button.active { color: var(--accent); }
  .detail-tabs { background: var(--petrol); }

  .icon-btn { color: var(--text); border-radius: 10px; }
  .icon-btn.light { color: var(--ice); }
  .icon-btn:hover, .icon-btn.light:hover { background: var(--hover); }
  .icon-btn.active { background: var(--green-light); color: var(--accent); }
  .primary-button {
    color: var(--night);
    background: var(--accent);
    border-radius: 24px;
    transition: background .18s;
  }
  .primary-button:hover { background: #92cbc7; }
  .secondary-button, .install-button {
    color: var(--text);
    border: 1px solid rgba(185, 216, 223, .31);
    background: linear-gradient(140deg, rgba(232, 238, 237, .086), rgba(16, 35, 41, .2));
    box-shadow: inset 0 1px 0 rgba(232, 238, 237, .04);
  }
  .secondary-button { border-radius: 11px; }
  .install-button { border-radius: 24px; }
  .secondary-button:hover, .install-button:hover { background: var(--hover); }
  .secondary-button.saved { color: var(--accent); background: var(--green-light); border-color: var(--accent); }
  .text-button { color: var(--accent); }
  .base-control { border-radius: 18px; }
  .base-control button { color: var(--muted); border-radius: 12px; }
  .base-control button.active { background: var(--accent); color: var(--night); }
  .base-control button:not(.active):hover { background: var(--hover); color: var(--text); }

  .result-item:hover { background: var(--hover); }
  .result-item .area-label, .search-section-label { color: var(--accent); }
  .empty-state svg { color: var(--ice); }
  .detail-subtags span, .property-breadcrumb button, #about-stats span {
    background: var(--green-light);
    color: var(--ice);
  }
  .metric, .national-metrics > div {
    background: rgba(185, 216, 223, .055);
    border: 1px solid var(--line);
    border-radius: 12px;
  }
  .detail-actions { background: transparent; }
  .owner-card { background: rgba(7, 12, 16, .14); border-color: var(--line); }
  .segmented, .install-platforms { background: rgba(7, 12, 16, .38); }
  .segmented button.active, .install-platforms button.active {
    color: var(--night);
    background: var(--accent);
    box-shadow: none;
  }
  .location-badge, .map-notice { color: var(--text); }
  .map-bottom { color: var(--text); text-shadow: none; }
  .map-bottom span { background: rgba(16, 35, 41, .94); border: 1px solid var(--line); }
  .leaflet-control-zoom a { color: var(--night) !important; }
  .map-loading { background: radial-gradient(ellipse at 50% 35%, var(--petrol), var(--night)); color: var(--muted); }
  .map-loading strong { color: var(--text); font-weight: 400; letter-spacing: -.025em; }
  .spinner { border-color: var(--line); border-top-color: var(--accent); }
  #toast { background: var(--petrol); color: var(--text); border: 1px solid rgba(185, 216, 223, .31); }

  dialog { background: #102329; color: var(--text); border-radius: 22px; }
  dialog::backdrop { background: rgba(7, 12, 16, .72); }
  dialog h2, .install-preview strong { font-weight: 500; letter-spacing: -.035em; }
  .dialog-brand { display: flex; align-items: center; gap: 11px; margin: 0; }
  .install-dialog #install-message { color: var(--accent); }
  .national-progress-button { background: var(--green-light); color: var(--accent); border-color: var(--line); border-radius: 12px; }
  .national-progress-button:hover { background: var(--hover); }
  .national-build { border-color: var(--line); }
  #national-bar { background: var(--control); border: 0; border-radius: 8px; overflow: hidden; }
  #national-bar::-webkit-progress-bar { background: var(--control); }
  #national-bar::-webkit-progress-value { background: var(--accent); }
  #national-bar::-moz-progress-bar { background: var(--accent); }
  .sheet-handle { background: rgba(185, 216, 223, .4); }
  .mobile-nav { background: rgba(7, 12, 16, .98); border-color: var(--line); }
  .mobile-nav button { color: var(--muted); }
  .mobile-nav button.active { background: var(--green-light); color: var(--accent); }

  .sidebar, .detail-scroll, #detail-content, .search-results, dialog, .national-regions {
    scrollbar-color: #4d7178 transparent;
    scrollbar-width: thin;
  }
  @supports not (backdrop-filter: blur(1px)) {
    .panel { background: var(--petrol); }
  }
}