:root {
  --panel: #f8fafc; --ink: #0f172a; --muted: #64748b;
  --line: #e2e8f0; --accent1: #60a5fa; --accent2: #a855f7;
}
* { box-sizing: border-box; }
html { height: 100%; }
body { margin: 0; height: 100%; display: flex; flex-direction: column; overflow: hidden;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #e5edff; background: #0d1220; }

/* ── top bar ─────────────────────────────────────────── */
.wih-top { flex: none; z-index: 20; display: flex; gap: 10px; align-items: center;
  justify-content: space-between; padding: 9px 16px; backdrop-filter: blur(8px);
  background: rgba(13,18,32,.94); border-bottom: 1px solid rgba(255,255,255,.07); }
.wih-brand { font-weight: 800; letter-spacing: .01em; white-space: nowrap; flex: none;
  font-size: 15px; color: #e5edff; text-decoration: none; }
.wih-brand:hover { color: var(--accent1); }
.wih-page-name { font-weight: 400; opacity: .65; }
.wih-search { position: relative; flex: 1; max-width: 400px; }
.wih-search input { width: 100%; padding: 7px 12px; border-radius: 9px; border: 1px solid rgba(255,255,255,.14);
  background: #0f1830; color: #e5edff; font-size: 13px; outline: none; }
.wih-search ul { position: absolute; left: 0; right: 0; margin: 4px 0 0; padding: 4px; list-style: none;
  background: #0f1830; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; max-height: 240px;
  overflow: auto; z-index: 30; }
.wih-search li { padding: 7px 10px; border-radius: 7px; cursor: pointer; font-size: 13px; }
.wih-search li:hover { background: rgba(255,255,255,.08); }
.wih-search[hidden], .wih-search ul[hidden] { display: none; }
.wih-icon-btn { flex: none; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  color: #e5edff; border-radius: 8px; padding: 6px 10px; cursor: pointer;
  display: flex; align-items: center; gap: 5px; font-size: 12px; text-decoration: none;
  transition: background .15s; }
.wih-icon-btn:hover { background: rgba(255,255,255,.14); }
.wih-c5p-link { border-color: rgba(96,165,250,.35); color: var(--accent1); font-weight: 600; }
.wih-icon-btn.active { background: rgba(96,165,250,.18); border-color: var(--accent1); color: var(--accent1); }
.wih-icon-btn.locating svg { animation: wih-spin 1s linear infinite; }
@keyframes wih-spin { to { transform: rotate(360deg); } }

/* ── two-state main ──────────────────────────────────────
   State 1 (initial): map fills everything
   State 2 (has-selection): map shrinks to top strip, cards slide up
─────────────────────────────────────────────────────────── */
.wih-main { flex: 1; min-height: 0; position: relative; overflow: hidden; }

/* ── map: initially fills all ── */
.wih-map-wrap {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  overflow: hidden;
  transition: bottom 0.55s cubic-bezier(.4,0,.2,1);
  will-change: bottom;
}
#wih-map { position: absolute; inset: 0; }

/* ── cards: initially hidden below viewport ── */
.wih-cards {
  position: absolute; left: 0; right: 0; top: 100%; bottom: 0; z-index: 1;
  overflow-y: auto; overflow-x: hidden;
  padding: 40px 16px 46px;
  display: flex; flex-direction: column; gap: 6px;
  background: #0d1220;
  border-top: 1px solid rgba(255,255,255,.09);
  transition: top 0.55s cubic-bezier(.4,0,.2,1);
  will-change: top;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.12) transparent;
}

/* ── after clicking a point: split layout ── */
.wih-main.has-selection .wih-map-wrap { bottom: 70%; }
.wih-main.has-selection .wih-cards    { top: 30%; }

/* floating coords badge */
.wih-coords { position: absolute; bottom: 32px; left: 10px; z-index: 5;
  background: rgba(13,18,32,.78); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.1); color: #93a4c8; font-size: 11px;
  padding: 4px 9px; border-radius: 6px; pointer-events: none;
  max-width: calc(100% - 20px); }

/* floating map controls (satellite toggle + overlay label) */
.wih-map-controls { position: absolute; bottom: 26px; right: 10px; z-index: 5;
  display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.wih-map-ctrl-btn { background: rgba(13,18,32,.82); border: 1px solid rgba(255,255,255,.18);
  color: #e5edff; border-radius: 7px; padding: 5px 10px; cursor: pointer; font-size: 12px;
  backdrop-filter: blur(4px); transition: background .15s; }
.wih-map-ctrl-btn:hover { background: rgba(96,165,250,.18); }
.wih-map-ctrl-btn.active { color: var(--accent1); border-color: var(--accent1); }
.wih-ov-label { font-size: 10px; color: rgba(255,255,255,.5); }

/* ── row: diamond (left, separate) + card (right) ── */
.wih-row { display: flex; align-items: center; gap: 16px; position: relative;
  opacity: 0; transform: translateY(10px); cursor: pointer;
  border-radius: 14px;
  transition: opacity .35s, transform .35s, background .2s; }
.wih-row.shown { opacity: 1; transform: none; }
/* hover: subtle highlight hinting the row is clickable/selectable */
.wih-row:hover { background: rgba(96,165,250,.06); }
/* selected (clicked) layer — accent ring; included in the share URL as ?layer= */
.wih-row.selected { background: rgba(96,165,250,.1); }
.wih-row.selected .wih-card { box-shadow: 0 0 0 2px var(--accent1), 0 6px 20px rgba(0,0,0,.4); }

/* ── wieber: a rotated, rounded-corner square = a diamond with real rounded
   corners AND a real box-shadow (clip-path would clip the shadow away too).
   IMPORTANT: rotating a square by 45deg grows its visual bounding box by
   √2 (a 106px square becomes a 150px-wide diamond on screen). ".wih-diamond-slot"
   is sized to that exact bounding box and participates in flex layout with NO
   transform of its own — so the rotated diamond can never overflow into the
   card on the right or past the container edge on the left. Only the slot gets
   the negative vertical margin (intentional overlap between stacked "layers"). */
.wih-diamond-slot { position: relative; flex: none; width: 150px; height: 150px; margin: -32px 0; }
.wih-diamond-mask {
  position: absolute; top: 50%; left: 50%;
  width: 106px; height: 106px;     /* 106 * √2 ≈ 150 = the slot size above */
  transform: translate(-50%, -50%) rotate(45deg);
  border-radius: 13px;
  overflow: hidden;
  background: #0a0f1c;             /* black backdrop behind the map */
  box-shadow: 0 12px 28px rgba(0,0,0,.55), inset 0 0 0 1.5px rgba(255,255,255,.28);
}
.wih-diamond-inner {
  position: absolute; top: 50%; left: 50%;
  width: 148%; height: 148%;       /* overshoot so rotating back leaves no gaps at corners */
  transform: translate(-50%, -50%) rotate(-45deg);
}
.wih-diamond-inner .maplibregl-control-container { display: none !important; }
.wih-diamond-inner .maplibregl-canvas { outline: none; }
.wih-diamond-mask.loading { animation: wih-dia-pulse 1s ease-in-out infinite alternate; }
@keyframes wih-dia-pulse { from { opacity: .45; } to { opacity: .8; } }

/* ── card (right, separate white card) ── */
.wih-card { flex: 1; min-width: 0; background: var(--panel); color: var(--ink);
  border-radius: 12px; padding: 11px 16px; box-shadow: 0 6px 20px rgba(0,0,0,.4); }
.wih-card:hover { box-shadow: 0 12px 30px rgba(0,0,0,.55); }
.wih-layer-header { display: flex; align-items: baseline; justify-content: space-between;
  gap: 6px; margin-bottom: 3px; }
.wih-body h3, .wih-card h3 { margin: 0; font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.wih-pdok-link { font-size: 9px; color: var(--accent1); text-decoration: none; white-space: nowrap; flex: none; }
.wih-pdok-link:hover { text-decoration: underline; }
.wih-card .src { color: var(--muted); font-size: 10px; margin-bottom: 6px; }

/* Key-value: label (xs uppercase) above value (XL bold) */
.wih-kv { display: flex; flex-direction: column; padding: 3px 0 6px;
  border-bottom: 1px solid var(--line); }
.wih-kv:last-child { border-bottom: 0; padding-bottom: 0; }
.wih-kv span { font-size: 9px; color: #94a3b8; text-transform: uppercase;
  letter-spacing: .07em; font-weight: 700; margin-bottom: 1px; }
.wih-kv b { font-size: 18px; font-weight: 700; color: var(--ink); line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.wih-row.err h3 { color: #b91c1c; }
.wih-row.err .wih-facts { font-size: 11px; color: #b91c1c; padding: 2px 0; }

/* ── main map marker glow on card hover ── */
.wih-marker-glow {
  animation: wih-marker-pulse 0.65s ease-in-out infinite alternate;
}
@keyframes wih-marker-pulse {
  from { filter: drop-shadow(0 0 4px rgba(168,85,247,.5)); }
  to   { filter: drop-shadow(0 0 14px rgba(168,85,247,1)) brightness(1.35); }
}

/* ── share dialog ────────────────────────────────────── */
.wih-share-dialog { border: none; padding: 0; background: transparent; max-width: 460px; width: calc(100% - 32px); }
.wih-share-dialog::backdrop { background: rgba(5,8,16,.72); backdrop-filter: blur(3px); }
.wih-share-panel { background: #121a2e; border: 1px solid rgba(255,255,255,.12); border-radius: 16px;
  padding: 18px 20px 20px; color: #e5edff; box-shadow: 0 24px 64px rgba(0,0,0,.6);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.wih-share-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.wih-share-header h2 { margin: 0; font-size: 17px; font-weight: 800; }
.wih-share-header button { background: none; border: none; color: #93a4c8; font-size: 15px;
  cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.wih-share-header button:hover { background: rgba(255,255,255,.08); color: #fff; }
.wih-share-section { margin-bottom: 14px; }
.wih-share-label { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: #93a4c8; margin-bottom: 6px; }
.wih-share-label small { text-transform: none; letter-spacing: 0; font-weight: 400; opacity: .8; }
.wih-share-pos { font-size: 14px; font-weight: 600; }
.wih-share-layers { display: flex; flex-wrap: wrap; gap: 6px; }
.wih-share-chip { font-size: 11px; padding: 3px 9px; border-radius: 20px;
  border: 1.5px solid rgba(255,255,255,.25); color: #c8d4ee; }
.wih-share-chip.selected { background: rgba(96,165,250,.18); color: #fff; font-weight: 700; }
.wih-share-urlrow { display: flex; gap: 8px; }
.wih-share-urlrow input { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.14); background: #0f1830; color: #c8d4ee; font-size: 12px; }
.wih-share-urlrow button { flex: none; padding: 8px 12px; border-radius: 8px; cursor: pointer;
  border: 1px solid rgba(96,165,250,.4); background: rgba(96,165,250,.14); color: var(--accent1);
  font-size: 12px; font-weight: 600; transition: background .15s; }
.wih-share-urlrow button:hover { background: rgba(96,165,250,.26); }
.wih-share-actions { display: flex; gap: 8px; }
.wih-share-action { flex: 1; padding: 9px 0; border-radius: 9px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: #e5edff;
  font-size: 13px; font-weight: 600; transition: background .15s; }
.wih-share-action:hover { background: rgba(255,255,255,.13); }

/* ── footer: shameless plug + credits (static, survives card re-renders) ── */
.wih-footer { flex: none; padding: 9px 16px; text-align: center;
  background: rgba(13,18,32,.94); border-top: 1px solid rgba(255,255,255,.07); }
.wih-footer p { margin: 0; font-size: 11.5px; color: #93a4c8; line-height: 1.5; }
.wih-footer a { color: var(--accent1); text-decoration: none; }
.wih-footer a:hover { text-decoration: underline; }
.wih-footer .wih-credits { margin-top: 2px; font-size: 10.5px; color: #64748b; }

/* ── mobile ─────────────────────────────────────────────── */
@media (max-width: 760px) {
  .wih-main.has-selection .wih-map-wrap { bottom: 62%; }
  .wih-main.has-selection .wih-cards    { top: 38%; }
  .wih-diamond-slot { width: 112px; height: 112px; margin: -24px 0; }
  .wih-diamond-mask { width: 79px; height: 79px; border-radius: 10px; }
  .wih-kv b { font-size: 16px; }
  .wih-brand span.wih-page-name { display: none; }
  .wih-c5p-link span { display: none; }
  .wih-c5p-link::after { content: "C5P ↗"; }
  .wih-footer { padding: 6px 12px; }
  .wih-footer p { font-size: 10px; }
  .wih-footer .wih-credits { font-size: 9.5px; }
}