// @wuys/map · ui/styles.js — single style injector for overlay UI.

const STYLE_ID = "wuys-map-overlay-styles";

const CSS = `
.wuys-map-overlay {
  position: absolute; inset: 0; pointer-events: none; z-index: 10;
  font: 14px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: rgba(255,255,255,0.95);
}
.wuys-map-overlay > * { pointer-events: auto; }
.wuys-map-overlay-tl, .wuys-map-overlay-tr {
  position: absolute; top: 16px; display: flex; gap: 8px; align-items: center;
}
.wuys-map-overlay-tl { left: 16px; }
.wuys-map-overlay-tr { right: 16px; }

.wuys-map-btn {
  background: rgba(20,15,40,0.6);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.92);
  height: 36px; min-width: 36px; padding: 0 12px;
  border-radius: 10px; cursor: pointer; font-size: 16px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background .15s, border-color .15s, transform .1s;
}
.wuys-map-btn:hover { background: rgba(40,28,70,0.75); border-color: rgba(255,255,255,0.32); }
.wuys-map-btn:active { transform: scale(0.97); }

.wuys-map-select {
  appearance: none; padding-right: 30px;
  background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.7) 50%),
                    linear-gradient(135deg, rgba(255,255,255,0.7) 50%, transparent 50%);
  background-position: right 12px top 16px, right 7px top 16px;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

.wuys-map-search-wrap { position: relative; }
.wuys-map-search {
  background: rgba(20,15,40,0.6);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.95);
  height: 36px; width: 220px; padding: 0 12px;
  border-radius: 10px; font-size: 14px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.wuys-map-search::placeholder { color: rgba(255,255,255,0.5); }
.wuys-map-search:focus { outline: none; border-color: rgba(183,104,255,0.7); }

.wuys-map-search-results {
  position: absolute; top: 44px; right: 0; min-width: 220px;
  background: rgba(20,15,40,0.92);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px; padding: 4px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  display: flex; flex-direction: column;
}
.wuys-map-search-results:empty { display: none; }
.wuys-map-search-item {
  background: transparent; border: 0; color: inherit;
  text-align: left; padding: 8px 10px; border-radius: 6px; cursor: pointer;
  font: inherit;
}
.wuys-map-search-item:hover { background: rgba(183,104,255,0.25); }

.wuys-map-perf {
  position: absolute; right: 16px; bottom: 16px;
  background: rgba(0,0,0,0.5); color: #b8eaff;
  padding: 6px 10px; border-radius: 8px;
  font: 12px/1 ui-monospace, "SF Mono", Consolas, monospace;
}
.wuys-map-renderer-badge {
  position: absolute; left: 16px; bottom: 16px;
  background: rgba(0,0,0,0.45); color: rgba(255,255,255,0.7);
  padding: 4px 8px; border-radius: 8px;
  font: 11px/1 ui-monospace, "SF Mono", Consolas, monospace;
  display: inline-flex; align-items: center; gap: 6px;
}
.wuys-map-renderer-select {
  background: rgba(20,15,40,0.75);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.92);
  padding: 2px 22px 2px 6px; border-radius: 5px;
  font: 11px ui-monospace, monospace;
  appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.65) 50%),
                    linear-gradient(135deg, rgba(255,255,255,0.65) 50%, transparent 50%);
  background-position: right 9px center, right 4px center;
  background-size: 4px 4px; background-repeat: no-repeat;
}

.wuys-map-help {
  position: absolute; inset: 0; display: none;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
}
.wuys-map-help.open { display: flex; }
.wuys-map-help-card {
  background: rgba(20,15,40,0.95);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 14px; padding: 24px; min-width: 320px; color: #fff;
}
.wuys-map-help-card h3 { margin: 0 0 12px 0; font-weight: 600; }
.wuys-map-help-card ul { list-style: none; padding: 0; margin: 0 0 16px 0; }
.wuys-map-help-card li { margin: 6px 0; color: rgba(255,255,255,0.85); }
.wuys-map-help-card kbd {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  padding: 1px 6px; border-radius: 4px; font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 11px; margin: 0 2px;
}

.wuys-map-dragging { cursor: grabbing !important; }
`;

export function ensureStyles() {
  if (document.getElementById(STYLE_ID)) return;
  const s = document.createElement("style");
  s.id = STYLE_ID;
  s.textContent = CSS;
  document.head.appendChild(s);
}
