/* ─── Swiss Survey aesthetic: precise, industrial, earthy ─── */
    @import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Outfit:wght@300;400;600;700&display=swap');

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bg:        #f0ebe3;
      --panel:     #faf8f4;
      --border:    #d4c9b8;
      --text:      #2a2318;
      --muted:     #8a7d6a;
      --accent:    #c0392b;   /* Swiss red */
      --accent2:   #2c5f8a;   /* geological blue */
      --mono:      'DM Mono', monospace;
      --sans:      'Outfit', sans-serif;
      --panel-w:   340px;
    }

    html, body { height: 100%; overflow: hidden; background: var(--bg); }

    /* ─── Layout ─── */
    #app {
      display: flex;
      height: 100vh;
      font-family: var(--sans);
      color: var(--text);
    }

    /* ─── Side panel ─── */
    #panel {
      width: var(--panel-w);
      min-width: var(--panel-w);
      background: var(--panel);
      border-right: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    #panel-header {
      padding: 1.2rem 1.4rem 1rem;
      border-bottom: 1px solid var(--border);
      background: var(--text);
      color: #f0ebe3;
    }

    #panel-header h1 {
      font-family: var(--sans);
      font-weight: 700;
      font-size: 1.05rem;
      letter-spacing: .04em;
      text-transform: uppercase;
    }
    #panel-header h1 span { color: var(--accent); }

    #panel-header .subtitle {
      font-size: .72rem;
      font-family: var(--mono);
      color: #a89880;
      margin-top: .25rem;
    }

    /* ─── Bbox info ─── */
    #bbox-info {
      padding: .7rem 1.4rem;
      border-bottom: 1px solid var(--border);
      background: #f5f1eb;
    }

    #bbox-info .label {
      font-family: var(--mono);
      font-size: .62rem;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .08em;
      margin-bottom: .3rem;
    }

    #bbox-coords {
      font-family: var(--mono);
      font-size: .7rem;
      color: var(--accent2);
      line-height: 1.6;
    }

    /* Coverage bar (sits between #bbox-info and #status-bar) */
#coverage-bar-wrap {
  padding: .6rem 1.4rem .5rem;
  border-bottom: 1px solid var(--border);
  background: #f5f1eb;
}

#coverage-bar-wrap .label {
  font-family: var(--mono);
  font-size: .62rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: .35rem;
}

#coverage-bar-track {
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}

#coverage-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent2), #4a9fd4);
  border-radius: 3px;
  transition: width .6s cubic-bezier(.4, 0, .2, 1);
}

#coverage-value {
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--accent2);
  font-weight: 500;
  margin-top: .25rem;
  text-align: right;
}


/* Symbol image thumbnail */
.symbol-thumb {
  width: 35px;          /* display at 35×25 — half of 70×50 for retina */
  height: 25px;
  object-fit: contain;
  flex-shrink: 0;
  image-rendering: pixelated;  /* keep geological patterns crisp */
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 2px;
  align-self: center;
}

.symbol-thumb-missing {
  width: 35px;
  height: 25px;
  flex-shrink: 0;
  background: var(--border);
  border-radius: 2px;
  align-self: center;
}


    /* ─── Status bar ─── */
    #status-bar {
      padding: .5rem 1.4rem;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      gap: .5rem;
      min-height: 2.4rem;
    }

    #status-dot {
      width: 7px; height: 7px;
      border-radius: 50%;
      background: var(--muted);
      flex-shrink: 0;
      transition: background .3s;
    }
    #status-dot.loading { background: #e67e22; animation: pulse .8s infinite; }
    #status-dot.ok      { background: #27ae60; }
    #status-dot.error   { background: var(--accent); }

    @keyframes pulse { 0%,100% { opacity:1 } 50% { opacity:.3 } }

    #status-text {
      font-family: var(--mono);
      font-size: .7rem;
      color: var(--muted);
    }

    /* ─── Symbol list ─── */
    #symbol-list {
      flex: 1;
      overflow-y: auto;
      padding: .6rem 0;
    }

    #symbol-list::-webkit-scrollbar { width: 4px; }
    #symbol-list::-webkit-scrollbar-track { background: transparent; }
    #symbol-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

    .symbol-item {
      display: flex;
      align-items: flex-start;
      gap: .8rem;
      padding: .55rem 1.4rem;
      border-bottom: 1px solid #ece7df;
      transition: background .15s;
      animation: fadeIn .25s ease both;
    }
    .symbol-item:hover { background: #ece7df; }

    @keyframes fadeIn { from { opacity:0; transform: translateX(-6px) } to { opacity:1; transform: none } }

    .symbol-rank {
      font-family: var(--mono);
      font-size: .62rem;
      color: var(--muted);
      min-width: 1.6rem;
      padding-top: .15rem;
      text-align: right;
    }

    .symbol-body { flex: 1; min-width: 0; }

    .symbol-name {
      font-family: var(--mono);
      font-size: .72rem;
      color: var(--accent2);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .symbol-label {
      font-size: .78rem;
      font-weight: 400;
      color: var(--text);
      margin-top: .1rem;
      line-height: 1.3;
    }

    .symbol-count {
      font-family: var(--mono);
      font-size: .78rem;
      font-weight: 500;
      color: var(--accent);
      min-width: 2.5rem;
      text-align: right;
      padding-top: .1rem;
    }

    /* ─── Empty / error states ─── */
    .state-msg {
      padding: 2rem 1.4rem;
      font-size: .82rem;
      color: var(--muted);
      font-family: var(--mono);
      text-align: center;
      line-height: 1.8;
    }

    /* ─── Map container ─── */
    #map {
      flex: 1;
      position: relative;
    }

    /* ─── Scale / coords overlay ─── */
    #coords-overlay {
      position: absolute;
      bottom: 2.4rem;
      right: .8rem;
      background: rgba(250,248,244,.88);
      border: 1px solid var(--border);
      padding: .25rem .6rem;
      font-family: var(--mono);
      font-size: .65rem;
      color: var(--muted);
      pointer-events: none;
      backdrop-filter: blur(4px);
    }

    /* OL overrides */
    .ol-zoom { top: .8rem; left: .8rem; }
    .ol-zoom button {
      background: var(--panel);
      border: 1px solid var(--border);
      color: var(--text);
      font-size: 1.1rem;
      width: 28px; height: 28px;
    }
    .ol-zoom button:hover { background: var(--bg); }
    .ol-attribution { font-size: .6rem; }

    /* ─── WMS toggle ─── */
    #controls {
      padding: .7rem 1.4rem;
      border-top: 1px solid var(--border);
      display: flex;
      gap: .6rem;
      flex-wrap: wrap;
    }

    .ctrl-btn {
      font-family: var(--mono);
      font-size: .68rem;
      padding: .3rem .7rem;
      border: 1px solid var(--border);
      background: var(--panel);
      color: var(--text);
      cursor: pointer;
      border-radius: 2px;
      transition: all .15s;
    }
    .ctrl-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
    .ctrl-btn.active { background: var(--accent2); color: #fff; border-color: var(--accent2); }