@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Source+Serif+4:opsz,wght@8..60,500;8..60,600;8..60,700&display=swap");

:root {
  --nx-bg: #faf8f5;
  --nx-fg: #1a1816;
  --nx-accent: #c96442;
  --nx-border: rgba(26, 24, 22, 0.10);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-color-scheme='light']) {
    --nx-bg: #141210;
    --nx-fg: #f5f2eb;
    --nx-accent: #e8a090;
    --nx-border: rgba(245, 242, 235, 0.10);
  }
}

:root[data-color-scheme='dark'] {
  --nx-bg: #141210;
  --nx-fg: #f5f2eb;
  --nx-accent: #e8a090;
  --nx-border: rgba(245, 242, 235, 0.10);
}

:root[data-color-scheme='light'] {
  --nx-bg: #faf8f5;
  --nx-fg: #1a1816;
  --nx-accent: #c96442;
  --nx-border: rgba(26, 24, 22, 0.10);
}

html {
  font-family: "DM Sans", system-ui, -apple-system, sans-serif;
  /* Removes ~300ms tap delay and double-tap-to-zoom on mobile buttons. */
  touch-action: manipulation;
  background: var(--nx-bg);
  color: var(--nx-fg);
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  background: var(--nx-bg);
  color: var(--nx-fg);
  -webkit-tap-highlight-color: transparent;
}

button,
a,
[role="button"],
.MuiButtonBase-root {
  touch-action: manipulation;
}

.maplibregl-ctrl-group button {
  touch-action: manipulation;
}

/* Align with mapControls.css (28px) — direct icon buttons only */
.maplibregl-map .maplibregl-ctrl-top-right .maplibregl-ctrl-group > button,
.maplibregl-map .maplibregl-ctrl-top-left .maplibregl-ctrl-group > button {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  max-width: 28px;
  max-height: 28px;
  padding: 0 !important;
  box-sizing: border-box;
}

.maplibregl-map .maplibregl-ctrl-top-right .maplibregl-ctrl-group > button .maplibregl-ctrl-icon,
.maplibregl-map .maplibregl-ctrl-top-left .maplibregl-ctrl-group > button .maplibregl-ctrl-icon {
  width: 100% !important;
  height: 100% !important;
  background-size: 20px 20px;
  background-repeat: no-repeat;
  background-position: center;
}

/*
 * Main map control stack: stuck to the right (LTR) / left (RTL),
 * vertically centered at mid-screen. !important beats MapLibre defaults
 * loaded after /styles.css via the JS bundle.
 */
.maplibregl-ctrl-top-right {
  top: 50% !important;
  right: 0 !important;
  left: auto !important;
  bottom: auto !important;
  transform: translateY(-50%);
}

.maplibregl-ctrl-top-left {
  top: 50% !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateY(-50%);
}

/* iOS Safari zooms focused inputs when font-size < 16px. Match MUI md (~900px). */
@media (max-width: 899px) {
  input,
  textarea,
  select,
  .MuiInputBase-input,
  .MuiSelect-select,
  .MuiAutocomplete-input {
    font-size: 16px !important;
  }
}

.root {
  display: flex;
  flex-direction: column;
  height: 100%;
}

@media print {
  * {
    height: auto !important;
    overflow: visible !important;
  }
}