:root {
  --inspect-popup-text: #333333;
  --inspect-popup-border: #e5e7eb;
  --inspect-popup-bg: #ffffff;
  --inspect-button-icon: #333333;
  --inspect-ctrl-bg: #ffffff;
  --inspect-background: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-inspect-theme='light']) {
    --inspect-popup-text: #e5e7eb;
    --inspect-popup-border: #4b5563;
    --inspect-popup-bg: #1f2937;
    --inspect-button-icon: #e5e7eb;
    --inspect-ctrl-bg: #374151;
    --inspect-background: #1f2937;
  }
}

:root[data-inspect-theme='light'] {
  --inspect-popup-text: #333333;
  --inspect-popup-border: #e5e7eb;
  --inspect-popup-bg: #ffffff;
  --inspect-button-icon: #333333;
  --inspect-ctrl-bg: #ffffff;
  --inspect-background: #ffffff;
}

:root[data-inspect-theme='dark'] {
  --inspect-popup-text: #e5e7eb;
  --inspect-popup-border: #4b5563;
  --inspect-popup-bg: #1f2937;
  --inspect-button-icon: #e5e7eb;
  --inspect-ctrl-bg: #374151;
  --inspect-background: #1f2937;
}

/* Popup container — override MapLibre defaults */
.maplibregl-popup-content:has(.maplibregl-inspect-popup) {
  background: var(--inspect-popup-bg);
  border-radius: 8px;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -2px rgba(0, 0, 0, 0.1);
  padding: 12px 14px;
  max-height: 400px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--inspect-popup-border) transparent;
}

/* Webkit thin scrollbar */
.maplibregl-popup-content:has(.maplibregl-inspect-popup)::-webkit-scrollbar {
  width: 4px;
}

.maplibregl-popup-content:has(
    .maplibregl-inspect-popup
  )::-webkit-scrollbar-track {
  background: transparent;
}

.maplibregl-popup-content:has(
    .maplibregl-inspect-popup
  )::-webkit-scrollbar-thumb {
  background-color: var(--inspect-popup-border);
  border-radius: 4px;
}

/* Popup tip arrow — all 8 anchor positions */
.maplibregl-popup-anchor-top .maplibregl-popup-tip,
.maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
.maplibregl-popup-anchor-top-right .maplibregl-popup-tip {
  border-bottom-color: var(--inspect-popup-bg);
}

.maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip {
  border-top-color: var(--inspect-popup-bg);
}

.maplibregl-popup-anchor-left .maplibregl-popup-tip {
  border-right-color: var(--inspect-popup-bg);
}

.maplibregl-popup-anchor-right .maplibregl-popup-tip {
  border-left-color: var(--inspect-popup-bg);
}

/* Popup content */
.maplibregl-inspect-popup {
  color: var(--inspect-popup-text);
  display: table;
  font-size: 12px;
  line-height: 1.5;
}

.maplibregl-inspect-feature:not(:last-child) {
  border-bottom: 1px solid var(--inspect-popup-border);
  padding-bottom: 6px;
  margin-bottom: 6px;
}

.maplibregl-inspect-layer::before {
  content: '#';
}

.maplibregl-inspect-layer {
  display: block;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 2px;
}

.maplibregl-inspect-property {
  display: table-row;
}

.maplibregl-inspect-property-value {
  display: table-cell;
  word-break: break-all;
  padding: 1px 0;
}

.maplibregl-inspect-property-name {
  display: table-cell;
  padding-right: 10px;
  word-break: break-all;
  padding: 1px 0;
  opacity: 0.7;
}

/* Control button backgrounds */
.maplibregl-ctrl-group:has(.maplibregl-ctrl-inspect),
.maplibregl-ctrl-group:has(.maplibregl-ctrl-map) {
  background: var(--inspect-ctrl-bg);
}

/* Button icons via mask-image — specificity must beat .maplibregl-ctrl-group button */
.maplibregl-ctrl-group button.maplibregl-ctrl-inspect {
  background-color: var(--inspect-button-icon);
  background-image: none;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='xMidYMid meet' viewBox='-10 -10 60 60'%3E%3Cg%3E%3Cpath d='m15 21.6q0-2 1.5-3.5t3.5-1.5 3.5 1.5 1.5 3.5-1.5 3.6-3.5 1.4-3.5-1.4-1.5-3.6z m18.4 11.1l-6.4-6.5q1.4-2.1 1.4-4.6 0-3.4-2.5-5.8t-5.9-2.4-5.9 2.4-2.5 5.8 2.5 5.9 5.9 2.5q2.4 0 4.6-1.4l7.4 7.4q-0.9 0.6-2 0.6h-20q-1.3 0-2.3-0.9t-1.1-2.3l0.1-26.8q0-1.3 1-2.3t2.3-0.9h13.4l10 10v19.3z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='xMidYMid meet' viewBox='-10 -10 60 60'%3E%3Cg%3E%3Cpath d='m15 21.6q0-2 1.5-3.5t3.5-1.5 3.5 1.5 1.5 3.5-1.5 3.6-3.5 1.4-3.5-1.4-1.5-3.6z m18.4 11.1l-6.4-6.5q1.4-2.1 1.4-4.6 0-3.4-2.5-5.8t-5.9-2.4-5.9 2.4-2.5 5.8 2.5 5.9 5.9 2.5q2.4 0 4.6-1.4l7.4 7.4q-0.9 0.6-2 0.6h-20q-1.3 0-2.3-0.9t-1.1-2.3l0.1-26.8q0-1.3 1-2.3t2.3-0.9h13.4l10 10v19.3z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

/* Hover state — must beat .maplibregl-ctrl button:not(:disabled):hover (0,3,1) */
.maplibregl-ctrl-group button.maplibregl-ctrl-inspect:not(:disabled):hover,
.maplibregl-ctrl-group button.maplibregl-ctrl-map:not(:disabled):hover {
  background-color: var(--inspect-button-icon);
}

.maplibregl-ctrl-group button.maplibregl-ctrl-map {
  background-color: var(--inspect-button-icon);
  background-image: none;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 60 60' preserveAspectRatio='xMidYMid meet'%3E%3Cg%3E%3Cpath d='m25 31.640000000000004v-19.766666666666673l-10-3.511666666666663v19.766666666666666z m9.140000000000008-26.640000000000004q0.8599999999999923 0 0.8599999999999923 0.8600000000000003v25.156666666666666q0 0.625-0.625 0.783333333333335l-9.375 3.1999999999999993-10-3.5133333333333354-8.906666666666668 3.4383333333333326-0.2333333333333334 0.07833333333333314q-0.8616666666666664 0-0.8616666666666664-0.8599999999999994v-25.156666666666663q0-0.625 0.6233333333333331-0.7833333333333332l9.378333333333334-3.198333333333334 10 3.5133333333333336 8.905000000000001-3.4383333333333344z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 60 60' preserveAspectRatio='xMidYMid meet'%3E%3Cg%3E%3Cpath d='m25 31.640000000000004v-19.766666666666673l-10-3.511666666666663v19.766666666666666z m9.140000000000008-26.640000000000004q0.8599999999999923 0 0.8599999999999923 0.8600000000000003v25.156666666666666q0 0.625-0.625 0.783333333333335l-9.375 3.1999999999999993-10-3.5133333333333354-8.906666666666668 3.4383333333333326-0.2333333333333334 0.07833333333333314q-0.8616666666666664 0-0.8616666666666664-0.8599999999999994v-25.156666666666663q0-0.625 0.6233333333333331-0.7833333333333332l9.378333333333334-3.198333333333334 10 3.5133333333333336 8.905000000000001-3.4383333333333344z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}