/* Soft (neumorphic) surface layer for the Atlas, adapted from Uiverse.io components (MIT, Copyright (c) 2023 Uiverse.io):
   - Raised card:   From Uiverse.io by adamgiebl (strong-zebra-87)   - Tags: neumorphism, card
   - Inset card:    From Uiverse.io by adamgiebl (serious-penguin-95) - Tags: neumorphism, card
   - Inset input:   From Uiverse.io by Yaseen549 (stale-frog-25)       - Tags: neumorphism, input
   - Switch:        From Uiverse.io by mobinkakei (great-skunk-8)      - Tags: neumorphism, switch
   - Segmented:     From Uiverse.io by elijahgummer (soft-firefox-40)  - Tags: radio, shadow
   - Soft button:   From Uiverse.io by adamgiebl (good-mouse-67)       - Tags: neumorphism, button
   Colours are re-tuned to the Atlas palette; text keeps WCAG contrast and focus rings stay visible. */

:root {
  --neu-bg: #e8ebf0;           /* the shared soft ground for panels */
  --neu-hi: #ffffff;           /* light source, top-left */
  --neu-lo: #c4cad4;           /* shadow, bottom-right */
  --rail: var(--neu-bg);
  --line: #d6dbe3;
  --line-2: #dde1e8;
  --raised: 8px 8px 16px var(--neu-lo), -8px -8px 16px var(--neu-hi);
  --raised-sm: 4px 4px 8px var(--neu-lo), -4px -4px 8px var(--neu-hi);
  --inset: inset 4px 4px 8px var(--neu-lo), inset -4px -4px 8px var(--neu-hi);
  --inset-sm: inset 2px 2px 5px var(--neu-lo), inset -2px -2px 5px var(--neu-hi);
}

body, .topbar { background: var(--neu-bg); }
.topbar { border-bottom: 0; box-shadow: 0 6px 14px -10px var(--neu-lo); }
.panel { border-right: 0; box-shadow: 6px 0 16px -10px var(--neu-lo); }
.tabs { background: var(--neu-bg); border-bottom: 0; }

/* Inset input (stale-frog-25): the search well */
.search input {
  border: 0; border-radius: 15px; height: 40px;
  background: var(--neu-bg); box-shadow: var(--inset);
}
.search input:focus { background: var(--neu-bg); box-shadow: var(--inset), 0 0 0 2px var(--focus); }
#search-results { background: var(--neu-bg); border: 0; border-radius: 18px; box-shadow: var(--raised); }
#search-results li[aria-selected="true"], #search-results li:hover { background: var(--neu-bg); box-shadow: var(--inset-sm); }

/* Soft buttons (good-mouse-67) */
.icon-btn { border: 0; background: var(--neu-bg); box-shadow: var(--raised-sm); transition: box-shadow .2s ease-in-out; }
.icon-btn:hover { box-shadow: var(--inset-sm), 2px 2px 5px var(--neu-lo), -2px -2px 5px var(--neu-hi); }
.icon-btn:active { box-shadow: var(--inset-sm); }
.btn { border: 0; background: var(--neu-bg); border-radius: 50px; box-shadow: var(--raised-sm); transition: box-shadow .2s ease-in-out; }
.btn:hover:not(:disabled) { box-shadow: var(--inset-sm), 2px 2px 5px var(--neu-lo), -2px -2px 5px var(--neu-hi); }
.btn.primary { background: var(--ink); color: #fff; box-shadow: var(--raised-sm); }

/* Segmented groups (soft-firefox-40): a sunken track with a raised selected key */
.lang, .seg { background: var(--neu-bg); box-shadow: var(--inset-sm); border-radius: 12px; padding: 4px; }
.lang button, .seg button { transition: box-shadow .23s ease, transform .23s ease, color .23s ease; border-radius: 9px; }
.lang button[aria-pressed="true"], .seg button[aria-checked="true"] {
  background: var(--neu-bg); color: var(--ink); box-shadow: var(--raised-sm);
}
.lang button:active, .seg button:active { transform: translateY(1px); }

/* Raised card (strong-zebra-87): selected main-map row, stories, floating cards */
.base-item.on { background: var(--neu-bg); box-shadow: var(--raised-sm); border-radius: 16px; }
.base-row:hover, .switch-row:hover { background: transparent; box-shadow: var(--inset-sm); }
.base-item.on .base-row:hover { box-shadow: none; }
.story-card { border: 0; background: var(--neu-bg); border-radius: 20px; box-shadow: var(--raised); }
.story-card:hover { box-shadow: var(--raised-sm); }
.place, .legend { background: var(--neu-bg); border-radius: 24px; box-shadow: var(--raised); }
.place .pv { border-top-color: var(--line-2); }
.leaflet-bar { box-shadow: var(--raised-sm) !important; border-radius: 14px !important; }
.leaflet-bar a { background: var(--neu-bg) !important; border-bottom-color: var(--line) !important; }

/* Inset card (serious-penguin-95): wells for bars and ramps */
.pv-bar, .ramp { box-shadow: inset 2px 2px 4px var(--neu-lo), inset -2px -2px 4px var(--neu-hi); }
.pv-bar { background: var(--neu-bg); height: 8px; border-radius: 4px; }
.sw { box-shadow: var(--inset-sm); padding: 2px; border-radius: 5px; background: var(--neu-bg); gap: 0; }
.sw i:first-child { border-radius: 3px 0 0 3px; } .sw i:last-child { border-radius: 0 3px 3px 0; }

/* Chips as soft buttons */
.chip { border: 0; background: var(--neu-bg); border-radius: 50px; box-shadow: var(--raised-sm); padding: 4px 12px; }
.chip:hover { box-shadow: var(--inset-sm); }
.chip.on { background: var(--neu-bg); color: var(--ink); font-weight: 600; box-shadow: var(--inset-sm); }

/* Switch (great-skunk-8): sunken track, raised sliding key */
.switch { width: 44px; height: 24px; border-radius: 12px; background: var(--neu-bg);
  box-shadow: inset 3px 3px 5px var(--neu-lo), inset -3px -3px 5px var(--neu-hi); }
.switch::after { top: 3px; left: 3px; width: 18px; height: 18px; background: var(--neu-bg);
  box-shadow: 2px 2px 4px var(--neu-lo), -2px -2px 4px var(--neu-hi);
  transition: transform .4s cubic-bezier(.85, .05, .18, 1.35), background .2s; }
.switch-row input:checked + .switch { background: var(--neu-bg); }
.switch-row input:checked + .switch::after { transform: translateX(20px); background: var(--ink); }

dialog { background: var(--neu-bg); border-radius: 28px; box-shadow: var(--raised); }
.notice { border: 0; border-radius: 16px; box-shadow: var(--inset-sm); }

@media (max-width: 760px) {
  .panel { box-shadow: 0 -8px 18px -8px var(--neu-lo); border-top: 0; }
  .place, .legend { border-radius: 18px; }
}