/* ============================================================
   amapmaker.com — white minimal, zero animation.
   Chrome is grayscale; the only color on the page is the logo
   mark and the user's own paints.
   ============================================================ */

/* 1. Tokens ------------------------------------------------- */
:root {
  --border: #e5e7eb;
  --text: #111827;
  --text-2: #374151;
  --muted: #6b7280;
  --land: #e9edf1;
  --hover-stroke: #94a3b8;
  --accent: #0071e3;
  --accent-hover: #0064c9;
  --accent-active: #0056ad;
  --radius: 8px;
  --header-h: 56px;

  /* Region name labels (the "Show names on map" toggle). The app reads these
     and bakes them into the SVG, so they style the screen AND the downloads.
     Size is the on-screen size; labels hold it constant while zooming.
     Color must be a 6-digit hex so a label dragged into a map text keeps it. */
  --map-label-size: 10px;
  --map-label-color: #111827;
  --map-label-font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --map-label-weight: 400;
}

/* 2. Reset & base ------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  transition: none !important;
  animation: none !important;
}
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 14px;
  color: var(--text);
  background: #fff;
}
button, input, select {
  font: inherit;
  color: inherit;
}
button { cursor: pointer; }
h1, h2, p, ol, ul { margin: 0; }
/* hidden must always win — author display rules (e.g. .brush-pop's flex)
   otherwise override the browser's [hidden] and ghost elements stay visible */
[hidden] { display: none !important; }

button, select, input[type="text"] {
  height: 36px;
  padding: 0 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
button:not(:disabled):active { background: #f3f4f6; }
button.primary:active { background: var(--accent-active); border-color: var(--accent-active); }
select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 30px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
button:disabled {
  color: #9ca3af;
  cursor: default;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
input[type="text"]:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

/* 3. Header — phones only; on desktop the brand lives in the map rail and
   the freed band goes to the toolbar and map */
.site-header {
  display: none;
  align-items: center;
  gap: 16px;
  height: var(--header-h);
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
}
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--text);
  margin-right: 4px;
}
.brand-mark { display: block; width: 26px; height: 26px; }
.brand-name {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.brand-name .brand-accent { color: var(--accent); }
/* on desktop this wrap only hosts the (hidden) phone map dropdown */
.map-nav-wrap {
  position: relative;
  margin-left: auto;
  display: flex;
  align-items: center;
}
/* map rail items = quiet text rows, deliberately unlike the toolbar's pills.
   They are real links now (one page per map), so anchors get button posture */
.nav-item {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  height: 34px;
  padding: 0 10px;
  border: 0;
  border-left: 2px solid transparent;
  border-radius: 0;
  background: none;
  font-size: 13px;
  color: var(--muted);
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  --btn-hover: transparent;
}
.nav-item:hover { color: var(--text); }
.nav-item[aria-current] {
  border-left-color: var(--accent);
  color: var(--text);
  font-weight: 600;
}
.map-menu-btn {
  display: none;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 4px;
  border: 0;
  background: none;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  --btn-hover: transparent;
}
.map-menu-btn svg { width: 10px; height: 6px; color: var(--muted); }

.map-menu {
  position: absolute;
  z-index: 60;
  top: 48px;
  right: 0;
  min-width: 200px;
  padding: 5px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(16, 24, 40, 0.12);
}
.menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  font-size: 13px;
  color: var(--text-2);
  text-align: left;
  text-decoration: none;
}
.menu-check { visibility: hidden; font-size: 12px; }
.menu-item[aria-current] { color: var(--text); font-weight: 600; }
.menu-item[aria-current] .menu-check { visibility: visible; }

/* 4. Layout -------------------------------------------------- */
/* svh, not dvh: dvh changes as the phone URL bar hides while scrolling to
   the about section, which made the whole map area shift */
.app {
  display: flex;
  height: 100vh;
  height: 100svh;
}
/* desktop map list — a quiet vertical rail on the left, brand on top */
.side-nav {
  flex: 0 0 158px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 10px 14px;
  border-right: 1px solid var(--border);
  overflow-y: auto;
  scrollbar-width: none;
}
.side-nav .brand {
  margin: 0 0 12px;
  padding: 2px 8px 14px;
  border-bottom: 1px solid var(--border);
}
.side-nav::-webkit-scrollbar { width: 0; height: 0; }
.map-wrap { flex: 1; height: 100%; }

/* 5. Floating UI — the map is the interface; controls float on it.
   Pieces: on-map title, legend card, top-right action cluster with
   popovers, bottom-center paint dock. No permanent panel. */

/* legend (hidden until the map has colors) — plain text pinned at the map's
   bottom-left, the same fixed home the download uses. Not movable, no card. */
.legend-card {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 15; /* above the map, below the toolbar and its popovers */
  max-width: 250px;
  padding: 0;
  background: none;
  border: 0;
}
.legend-card:has(#legend:empty) { display: none; }
.legend-head {
  display: flex;
  align-items: center;
  gap: 6px;
}
.legend-hide svg { width: 12px; height: 12px; }
input.legend-title-input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: 26px;
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: 12.5px;
  font-weight: 600;
}
input.legend-title-input:focus { outline: none; box-shadow: inset 0 -1px 0 var(--accent); }
#legend {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 4px;
  max-height: 200px;
  overflow-y: auto;
  scrollbar-width: none;
}
#legend::-webkit-scrollbar { width: 0; height: 0; }
#legend li {
  display: flex;
  align-items: center;
  gap: 7px;
}
.legend-swatch {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 1px solid rgba(17, 24, 39, 0.12);
  border-radius: 4px;
}
input.legend-label {
  flex: 1;
  min-width: 0;
  height: 24px;
  padding: 0 2px;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: none;
  font-size: 12.5px;
}
.legend-label:hover { border-bottom-color: var(--border); }
input.legend-label:focus {
  outline: none;
  border-bottom-color: var(--text);
}
.legend-count {
  font-size: 11px;
  color: var(--muted);
  min-width: 14px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.legend-del {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 5px;
  background: none;
  color: #c3c9d1;
  --btn-hover: #fdf1f1;
}
.legend-del svg { width: 11px; height: 11px; }

/* the single centered toolbar — floats over the top of the map.
   Centered with auto margins, NOT transform: a transform would make this the
   containing block for the phone popovers' position:fixed, trapping and
   clipping them inside the overflow-x:auto bar */
.topbar {
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: fit-content;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100vw - 24px);
  padding: 5px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 8px 24px rgba(16, 24, 40, 0.08);
}
.tb-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 11px;
  border: 0;
  border-radius: 8px;
  background: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
}
.tb-btn svg { width: 15px; height: 15px; flex: 0 0 auto; }
.tb-btn[aria-pressed="true"] {
  background: var(--accent);
  color: #fff;
}
.tb-btn:disabled { opacity: 0.35; cursor: default; }
.fab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  color: var(--text-2);
}
.fab svg { width: 15px; height: 15px; flex: 0 0 auto; }
.fab.primary { font-weight: 600; }
/* split download button — the ⋯ segment belongs to Download */
.split { display: flex; }
.split .split-main { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.split .split-more {
  width: 30px;
  padding: 0;
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left-color: rgba(255, 255, 255, 0.28);
}

/* popovers */
.pop-wrap { position: relative; }
.pop {
  position: absolute;
  top: 42px;
  right: 0;
  z-index: 30;
  min-width: 208px;
  padding: 5px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(16, 24, 40, 0.12);
}
.pop-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  font-size: 13px;
  color: var(--text-2);
  text-align: left;
}
.pop-item svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--muted); }
.pop-item[aria-pressed="true"] {
  background: var(--accent);
  color: #fff;
}
.pop-item[aria-pressed="true"] svg { color: #fff; }
.pop-item.danger { color: #b02525; --btn-hover: #fdf1f1; }
.pop-item.danger svg { color: #b02525; }
/* pops in the centered bars drop down centered under their button */
.topbar .pop {
  right: auto;
  left: 50%;
  transform: translateX(-50%);
}
/* crop frame: its border marks exactly what a cropped download contains.
   Screen anchored and centered, so pan and zoom change what lands inside */
.crop-frame {
  position: absolute;
  z-index: 5;
  border: 1.5px solid var(--accent);
  pointer-events: none;
}
/* per-text mini toolbar — floats just above the selected map text */
.txt-bar {
  position: absolute;
  transform: translate(-50%, -100%);
  z-index: 15; /* above the map, below the toolbar and its popovers */
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 6px 20px rgba(16, 24, 40, 0.1);
}
.txt-step, .txt-trash {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: none;
  font-size: 15px;
  color: var(--text-2);
}
.txt-trash { color: #b02525; --btn-hover: #fdf1f1; }
.txt-trash svg { width: 14px; height: 14px; }
/* "Put inside <country>" action on the image mini bar */
.img-fill-btn {
  height: 26px;
  padding: 0 9px;
  border: 0;
  border-radius: 7px;
  background: none;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}
.img-fill-btn:disabled { color: var(--muted); font-weight: 500; }
.txt-size-val {
  min-width: 26px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
}
input.txt-color {
  width: 26px;
  height: 26px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #fff;
  cursor: pointer;
}
.txt-color::-webkit-color-swatch { border: none; border-radius: 4px; }
.txt-color::-webkit-color-swatch-wrapper { padding: 0; }
.txt-color::-moz-color-swatch { border: none; border-radius: 4px; }
/* style popover */
.pop-style { min-width: 248px; padding: 14px; }
.style-colors {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.style-cell {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  cursor: pointer;
}
.color-input {
  width: 100%;
  height: 32px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #fff;
  cursor: pointer;
}
.color-input::-webkit-color-swatch { border: none; border-radius: 4px; }
.color-input::-webkit-color-swatch-wrapper { padding: 0; }
.color-input::-moz-color-swatch { border: none; border-radius: 4px; }
.style-width {
  margin-top: 14px;
  font-size: 12px;
  color: var(--muted);
}
.style-width > span { display: block; margin-bottom: 6px; }
.seg {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 2px;
  padding: 2px;
  background: #f3f4f6;
  border-radius: 8px;
}
.seg button {
  height: 26px;
  padding: 0 2px;
  border: 0;
  border-radius: 6px;
  background: none;
  font-size: 12px;
  color: var(--muted);
}
.seg button[aria-pressed="true"] {
  background: #fff;
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 0 0 1px var(--border), 0 1px 2px rgba(16, 24, 40, 0.06);
}
.pop-reset {
  display: block;
  height: auto;
  margin: 14px auto 0;
  padding: 2px 4px;
  border: 0;
  background: none;
  font-size: 12px;
  color: var(--muted);
  text-decoration: underline;
  text-decoration-color: #d1d5db;
  text-underline-offset: 2px;
}

/* data → choropleth modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(16, 24, 40, 0.45);
}
.data-modal {
  width: 480px;
  max-width: 100%;
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(16, 24, 40, 0.2);
}
.data-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.data-head h2 { font-size: 16px; }
.data-hint {
  margin-bottom: 10px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
}
.data-sample-btn {
  height: auto;
  padding: 0;
  border: 0;
  background: none;
  font-size: 12.5px;
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: #bcd8f5;
  text-underline-offset: 2px;
}
#data-csv {
  width: 100%;
  min-height: 132px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  font: 12.5px/1.5 ui-monospace, SFMono-Regular, Consolas, Menlo, monospace;
  color: var(--text);
  resize: vertical;
}
#data-csv:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}
.data-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.data-preview {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
}
.data-preview.err { color: #b02525; }
.data-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  margin-top: 14px;
}
.data-field { min-width: 0; }
.data-field > span {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--muted);
}
.data-classes-seg button { padding: 0; }
.data-field-colors { margin-top: 14px; }
.ramp-row {
  display: flex;
  gap: 6px;
}
.ramp-btn {
  flex: 1;
  height: 24px;
  min-width: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.ramp-btn[aria-pressed="true"] {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.data-reverse { margin-top: 12px; }
.data-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

/* switches */
.switch-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
}
.pop-style .switch-row { margin-top: 14px; }
.switch-row input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.switch {
  flex: 0 0 auto;
  position: relative;
  width: 32px;
  height: 18px;
  border-radius: 999px;
  background: #d1d5db;
}
.switch::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
}
.switch-row input:checked + .switch { background: var(--accent); }
.switch-row input:checked + .switch::before { left: 16px; }
.switch-row input:focus-visible + .switch {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* bottom cluster floating over the map: history | paints | zoom */
.bottom-bar {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  pointer-events: none; /* the strip spans the map; only the islands catch clicks */
}
.bottom-bar > * { pointer-events: auto; }
.paint-dock {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 8px 24px rgba(16, 24, 40, 0.08);
}
.swatches {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.swatches::-webkit-scrollbar { width: 0; height: 0; }
.swatch {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(17, 24, 39, 0.12);
  border-radius: 8px;
}
/* selection ring drawn inside the swatch — .swatches is a scroll container,
   so an outer outline would get clipped flat on top/bottom */
.swatch[aria-pressed="true"], .swatch[data-selected="true"] {
  border: 2px solid var(--text);
  box-shadow: inset 0 0 0 2px #fff;
}
/* eraser leads the paint row — it clears like a paint, so it lives with them */
.swatch-eraser {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--text-2);
}
.swatch-eraser svg { width: 56%; height: 56%; }
/* custom color = eyedropper cell at the end of the row; the little dot in the
   corner shows the currently picked custom color */
.swatch-custom {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--text-2);
  cursor: pointer;
}
.swatch-custom > svg { width: 54%; height: 54%; }
.swatch-custom .well {
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 9px;
  height: 9px;
  border: 1px solid #fff;
  border-radius: 50%;
  background: #6741d9;
}
#custom-color {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  border: 0;
  padding: 0;
}

/* 6. Map area ------------------------------------------------ */
.map-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* the map fills the area; toolbar and bottom cluster float over it */
  padding: 10px;
  overflow: hidden;
  min-width: 0;
  background: #fff;
}
/* the frame IS the viewport: it fills the area and the map view fills it
   edge to edge by default (the JS keeps the view's aspect in step) */
.map-frame {
  position: relative;
  width: 100%;
  height: 100%;
}
/* direct child only — the map canvas; icon svgs inside .zoom-ui etc.
   must not inherit the canvas border/shadow */
.map-frame > svg {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.map-frame .region { cursor: pointer; }
.map-frame[data-arrow="1"] > svg,
.map-frame[data-arrow="1"] .region { cursor: crosshair; }
.map-frame[data-text="1"] > svg,
.map-frame[data-text="1"] .region { cursor: text; }
/* arrow shafts are always grabbable, like everything else; only their thin
   stroke band catches clicks so the map stays paintable around them */
.map-frame .arrow path { pointer-events: visiblePainted; cursor: move; }
.map-frame[data-tool="erase"] .arrow path { cursor: pointer; }
.arrow-handle { cursor: pointer; } /* pointing finger over the grab points */
/* …and it stays the pointer for the whole handle drag, wherever the mouse is
   (image corner drags keep their diagonal resize cursor the same way) */
.map-frame[data-hdrag="1"], .map-frame[data-hdrag="1"] * { cursor: pointer !important; }
.map-frame[data-hdrag="nwse"], .map-frame[data-hdrag="nwse"] * { cursor: nwse-resize !important; }
.map-frame[data-hdrag="nesw"], .map-frame[data-hdrag="nesw"] * { cursor: nesw-resize !important; }
/* focus feedback: nearing a grabbable annotation lights it up, and nearing a
   handle point fills its dot in and swells it (the group includes a wide
   invisible hit circle, so "near" is enough — Excalidraw style) */
.map-frame .arrow:hover,
.map-frame .shape:hover,
.map-frame .mtext:hover,
.map-frame .mimg:hover {
  filter: drop-shadow(0 0 2.5px rgba(0, 113, 227, 0.7));
}
.arrow-handle:hover .handle-dot,
.shape-handle:hover .handle-dot,
.img-handle:hover .handle-dot,
.text-handle:hover .handle-dot,
.fill-handle:hover .handle-dot,
.rot-handle:hover .handle-dot {
  fill-opacity: 1;
  transform: scale(1.25);
  transform-box: fill-box;
  transform-origin: center;
}
/* shape outlines are always grabbable, like texts and images; interiors stay
   click-through so the countries underneath keep painting */
.map-frame .shape ellipse, .map-frame .shape rect { pointer-events: visiblePainted; cursor: move; }
.map-frame[data-tool="erase"] .shape ellipse,
.map-frame[data-tool="erase"] .shape rect { cursor: pointer; }
.shape-handle { cursor: nwse-resize; }
.shape-handle[data-h="ne"], .shape-handle[data-h="sw"] { cursor: nesw-resize; }
.map-frame[data-shape="1"] > svg,
.map-frame[data-shape="1"] .region { cursor: crosshair; }
/* texts are always grabbable — no Text tool needed to select or move them */
.map-frame .mtext { pointer-events: auto; cursor: move; user-select: none; -webkit-user-select: none; }
.map-frame[data-tool="erase"] .mtext { cursor: pointer; }
/* name labels are inert unless "Move name labels" (Style) is on; grabbing
   one converts it into a normal map text */
.map-frame[data-lbledit="1"] .mlabel { pointer-events: auto; cursor: move; }
.map-frame[data-lbledit="1"] .mlabel:hover { filter: drop-shadow(0 0 2.5px rgba(0, 113, 227, 0.7)); }
/* images too: tap selects, drag moves, corners resize */
.map-frame .mimg image { cursor: move; }
.map-frame[data-tool="erase"] .mimg image { cursor: pointer; }
.img-handle { cursor: nwse-resize; }
.img-handle[data-h="ne"], .img-handle[data-h="sw"] { cursor: nesw-resize; }
/* the picture inside a country: corners resize keeping the ratio, edge
   midpoints stretch that side only; texts resize by their corners too */
.fill-handle, .text-handle { cursor: nwse-resize; }
.fill-handle[data-h="ne"], .fill-handle[data-h="sw"],
.text-handle[data-h="ne"], .text-handle[data-h="sw"] { cursor: nesw-resize; }
.fill-handle[data-h="n"], .fill-handle[data-h="s"] { cursor: ns-resize; }
.fill-handle[data-h="e"], .fill-handle[data-h="w"] { cursor: ew-resize; }
.map-frame[data-hdrag="ns"], .map-frame[data-hdrag="ns"] * { cursor: ns-resize !important; }
.map-frame[data-hdrag="ew"], .map-frame[data-hdrag="ew"] * { cursor: ew-resize !important; }
/* the rotation grip above a selection */
.rot-handle { cursor: grab; }
.map-frame[data-hdrag="rot"], .map-frame[data-hdrag="rot"] * { cursor: grabbing !important; }
/* in-place text editor floated over the map at the text's spot */
input.text-edit {
  position: absolute;
  z-index: 15;
  transform: translate(-50%, -50%);
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  outline: 1px dashed #94a3b8;
  background: transparent;
  font-family: inherit;
  font-weight: 600;
  text-align: center;
  color: inherit;
}
.map-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}
.zoom-ui {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}
.zoom-ui button {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #374151;
}
.zoom-ui svg { width: 16px; height: 16px; }
/* undo / redo / clear island — sits beside the paint dock in the bottom bar */
.hist-ui {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}
.hist-ui button {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #374151;
}
.hist-ui button:disabled { opacity: 0.35; }
.hist-ui svg { width: 16px; height: 16px; }
.hist-ui .hist-danger { color: #b02525; --btn-hover: #fdf1f1; }
.hist-ui .hist-danger svg { width: 14px; height: 14px; }
.tooltip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 50;
  background: var(--text);
  color: #fff;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 6px;
  pointer-events: none;
  white-space: nowrap;
}
.status {
  position: absolute;
  left: 50%;
  top: 62px; /* just under the floating toolbar */
  transform: translateX(-50%);
  z-index: 6;
  max-width: 50%;
  font-size: 13px;
  color: var(--muted);
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 7. About & footer ------------------------------------------ */
.about {
  max-width: 680px;
  margin: 0 auto;
  padding: 48px 20px 8px;
}
.about h1 {
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}
.about h2 {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 28px 0 8px;
}
.about p, .about li {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-2);
}
.about ol, .about ul { padding-left: 20px; }
.about li { margin: 4px 0; }
.about a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: #9ca3af;
  text-underline-offset: 2px;
}
.about .fineprint {
  margin-top: 28px;
  font-size: 12.5px;
  color: var(--muted);
}
.site-footer {
  margin-top: 24px;
  padding: 20px;
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}
.site-footer a { color: var(--muted); }

/* standalone pages: privacy, terms, 404 */
.doc-head {
  max-width: 680px;
  margin: 0 auto;
  padding: 18px 20px 0;
}
.about.doc { padding-top: 26px; padding-bottom: 24px; }

/* 8. Mobile --------------------------------------------------- */
@media (max-width: 880px) {
  .site-header { display: flex; gap: 10px; padding: 0 12px; }
  .app {
    height: calc(100vh - var(--header-h) - 1px);
    height: calc(100svh - var(--header-h) - 1px);
  }
  .map-wrap { padding: 8px; }
  .legend-card { max-width: 78%; bottom: 116px; }
  #legend { max-height: 150px; }
  /* compact icon-only bar on small screens; it scrolls sideways if tight
     (pops are fixed sheets there, so clipping is harmless) */
  .topbar {
    top: 8px;
    padding: 4px;
    gap: 1px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .topbar::-webkit-scrollbar { width: 0; height: 0; }
  .topbar .lbl { display: none; }
  .tb-btn { padding: 0 10px; }
  .split .split-main { padding: 0 10px; }
  /* popovers become a centered sheet — anchored pops hang off small screens */
  .pop {
    position: fixed;
    left: 50%;
    right: auto;
    top: calc(var(--header-h) + 64px);
    transform: translateX(-50%);
    width: min(calc(100vw - 32px), 330px);
  }
  /* narrow screens: history + zoom share a row, paints get their own below */
  .bottom-bar { flex-wrap: wrap; gap: 6px; }
  .hist-ui { order: 1; }
  .zoom-ui { order: 2; }
  .paint-dock { order: 3; max-width: 100%; }
  .swatch { width: 29px; height: 29px; }
  .side-nav { display: none; }
  .map-menu-btn { display: flex; }
}
/* 9. Hover (pointer devices only) ----------------------------- */
@media (hover: hover) {
  button:not(:disabled):not(.primary):not(.swatch):not([aria-pressed="true"]):hover { background: var(--btn-hover, #f9fafb); }
  .menu-item:hover { background: #f9fafb; } /* the dropdown rows are links now */
  button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
  .swatch:not([aria-pressed="true"]):not([data-selected="true"]):hover { border-color: var(--hover-stroke); }
  .legend-del:hover { color: #b02525; }
}