/* MAPWOVEN POWERSUITE — the one control surface, for every map.
   Phone first: the menus sit at the BOTTOM, in the thumb's reach, because a
   map is held in one hand. On a desktop the same model becomes a top rail.
   Flat controls, no motion that nobody asked for, and colour is how a thing
   says it is on. */
:root {
  --nxs-paper: #f4efe2; --nxs-surface: #fbf7ec; --nxs-ink: #2c2a22; --nxs-muted: #7a6f5c;
  --nxs-hair: rgba(44, 42, 34, .15); --nxs-forest: #29463b; --nxs-copper: #c87342;
  --nxs-r: 14px; --nxs-r-s: 10px;
  --nxs-sh1: 0 1px 2px rgba(44, 42, 34, .08), 0 6px 18px rgba(44, 42, 34, .10);
  --nxs-sh2: 0 2px 6px rgba(44, 42, 34, .12), 0 16px 40px rgba(44, 42, 34, .20);
  --nxs-focus: 0 0 0 3px rgba(200, 115, 66, .45);
  --nxs-tap: 44px;                 /* nothing you tap is ever smaller */
  --nxs-gap: 8px;
  --nxs-safe-b: env(safe-area-inset-bottom, 0px);
}
.nxs-stage { position: relative; overflow: hidden; }
.nxs-surface { touch-action: none; -webkit-user-select: none; user-select: none; cursor: grab; }
.nxs-surface.nxs-panning { cursor: grabbing; }
.nxs-stage :focus-visible { outline: none; box-shadow: var(--nxs-focus); }

/* ── the bar ─────────────────────────────────────────────────────────── */
.nxs-bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px 10px calc(8px + var(--nxs-safe-b));
  background: linear-gradient(180deg, rgba(244, 239, 226, 0), rgba(244, 239, 226, .92) 38%, var(--nxs-paper) 100%);
  pointer-events: none;
}
.nxs-bar > * { pointer-events: auto; }

/* ── search ──────────────────────────────────────────────────────────── */
.nxs-search { position: relative; }
.nxs-search-input {
  width: 100%; height: var(--nxs-tap); min-height: var(--nxs-tap);
  border: 1px solid var(--nxs-hair); border-radius: 999px; background: var(--nxs-surface);
  padding: 0 18px; font: 16px/1.2 inherit; color: var(--nxs-ink); box-shadow: var(--nxs-sh1);
}
.nxs-search-input::placeholder { color: var(--nxs-muted); }
.nxs-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.nxs-results {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 8px);
  background: var(--nxs-surface); border: 1px solid var(--nxs-hair); border-radius: var(--nxs-r);
  box-shadow: var(--nxs-sh2); max-height: min(50vh, 380px); overflow-y: auto;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.nxs-results[hidden] { display: none; }
.nxs-result {
  display: block; width: 100%; min-height: var(--nxs-tap); text-align: left;
  border: 0; border-bottom: 1px solid var(--nxs-hair); background: transparent;
  padding: 9px 16px; font: inherit; color: inherit;
}
.nxs-result:last-child { border-bottom: 0; }
.nxs-result b { display: block; font-weight: 600; }
.nxs-result small { display: block; color: var(--nxs-muted); font-size: 13px; }
.nxs-result:hover, .nxs-result.is-cursor { background: var(--nxs-paper); }
.nxs-result.is-empty { color: var(--nxs-muted); font-size: 14px; }

/* ── the dock ────────────────────────────────────────────────────────── */
.nxs-dock { position: relative; }
.nxs-rail {
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  padding: 2px 0; scroll-padding: 10px; overscroll-behavior-x: contain;
}
.nxs-rail::-webkit-scrollbar { display: none; }
.nxs-chip {
  flex: 0 0 auto; min-height: var(--nxs-tap); display: inline-flex; align-items: center;
  border: 1px solid var(--nxs-hair); border-radius: 999px; background: var(--nxs-surface);
  padding: 0 16px; font: 600 14px/1 inherit; color: var(--nxs-ink);
  box-shadow: var(--nxs-sh1); white-space: nowrap; cursor: pointer;
}
.nxs-chip.is-on { background: var(--nxs-forest); border-color: var(--nxs-forest); color: #f7f3e8; }
.nxs-chip[aria-expanded="true"] { border-color: var(--nxs-ink); }
.nxs-pop {
  position: absolute; bottom: calc(100% + 8px); min-width: 208px; max-width: min(92vw, 340px);
  background: var(--nxs-surface); border: 1px solid var(--nxs-hair); border-radius: var(--nxs-r);
  box-shadow: var(--nxs-sh2); overflow: hidden auto; max-height: min(56vh, 420px);
  overscroll-behavior: contain; z-index: 7;
}
.nxs-item {
  display: block; width: 100%; min-height: var(--nxs-tap); text-align: left;
  border: 0; border-bottom: 1px solid var(--nxs-hair); background: transparent;
  padding: 10px 16px; font: inherit; color: inherit; cursor: pointer;
}
.nxs-item:last-child { border-bottom: 0; }
.nxs-item:hover { background: var(--nxs-paper); }
.nxs-item.is-on { background: rgba(41, 70, 59, .10); box-shadow: inset 3px 0 0 var(--nxs-forest); }
.nxs-item-label { display: block; font-weight: 600; font-size: 15px; }
.nxs-item-sub { display: block; color: var(--nxs-muted); font-size: 13px; margin-top: 1px; }

/* ── the hands: zoom, fit, locate ────────────────────────────────────── */
.nxs-nav {
  position: absolute; right: 10px; z-index: 5; display: flex; flex-direction: column; gap: 6px;
  bottom: calc(112px + var(--nxs-safe-b));
}
.nxs-nav-btn {
  width: var(--nxs-tap); height: var(--nxs-tap);
  border: 1px solid var(--nxs-hair); border-radius: var(--nxs-r-s);
  background: var(--nxs-surface); box-shadow: var(--nxs-sh1);
  font: 400 20px/1 inherit; color: var(--nxs-ink); cursor: pointer;
}
.nxs-nav-btn:active { transform: translateY(1px); }

/* ── the sheet ───────────────────────────────────────────────────────── */
.nxs-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 8;
  background: var(--nxs-surface); border-top-left-radius: var(--nxs-r); border-top-right-radius: var(--nxs-r);
  box-shadow: var(--nxs-sh2); display: flex; flex-direction: column;
  height: 62%; transition: height .22s cubic-bezier(.22, .8, .3, 1);
}
.nxs-sheet[hidden] { display: none; }
.nxs-sheet.is-dragging { transition: none; }
.nxs-grip {
  flex: 0 0 auto; height: 26px; display: grid; place-items: center; cursor: grab;
  touch-action: none;
}
.nxs-grip::before { content: ''; width: 42px; height: 4px; border-radius: 2px; background: var(--nxs-hair); }
.nxs-sheet.is-dragging .nxs-grip { cursor: grabbing; }
.nxs-close {
  position: absolute; right: 10px; top: 10px; width: 36px; height: 36px;
  border: 0; border-radius: 50%; background: var(--nxs-paper); font-size: 18px; line-height: 1;
  color: var(--nxs-ink); cursor: pointer; z-index: 2;
}
.nxs-sheet-body {
  flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 2px 18px calc(20px + var(--nxs-safe-b));
}

/* ── desktop: the same model, a top rail and a side panel ────────────── */
@media (min-width: 900px) {
  .nxs-bar {
    top: 0; bottom: auto; flex-direction: row; align-items: center; gap: var(--nxs-gap);
    padding: 10px 12px;
    background: linear-gradient(180deg, var(--nxs-paper) 0, rgba(244, 239, 226, .92) 62%, rgba(244, 239, 226, 0));
  }
  .nxs-search { width: min(340px, 34vw); }
  .nxs-results { bottom: auto; top: calc(100% + 8px); }
  .nxs-dock { flex: 1 1 auto; min-width: 0; }
  .nxs-pop { bottom: auto; top: calc(100% + 8px); }
  .nxs-nav { bottom: auto; top: 76px; }
  .nxs-sheet {
    left: auto; right: 14px; top: 76px; bottom: 14px; width: 392px;
    height: auto !important; border-radius: var(--nxs-r); transition: none;
  }
  .nxs-grip { display: none; }
  .nxs-sheet-body { padding: 16px 20px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .nxs-sheet { transition: none; }
}