/* ======================================================================================================
 * Version: 1.3.1
 * File: sdx-map-scale.css
 * Path: assets/css/partials/sdx-map-scale.css
 * Author: Buktika - Binka
 * Purpose: Reusable map scale + grid lego block (sdx-map-scale.js). A vertical scalometer (right),
 *          a horizontal scale (bottom), faint optional grid lines, a [km]/[m] unit tag per scale,
 *          and an Apple-style settings button + popup. Shared by Eco Guilds, Viridians (ugda), Shirushi.
 * License: © Buktika, 2026. All rights reserved.
 * Theming: override on .sdx-mapscale (or a parent):
 *            --sdx-scale-ink   line / tick / text colour   (default near-white for satellite)
 *            --sdx-scale-grid  faint grid-line colour
 *            --sdx-scale-pad   margin from the viewport edges (set in px by the JS; var fallback here)
 * ChangeLog:
 *   v1.1.0 (2026-06-13): Numbers-only ticks; [km]/[m] unit tags (__tag); pad-based insets so the
 *     rulers/grid clear the viewport edges and stay aligned with the ticks.
 *   v1.0.0 (2026-06-13): Initial.
 * Notes:  Shared site-wide partial — classes NOT page-scoped. Overlays use pointer-events: none.
 * ====================================================================================================== */

.sdx-mapscale {
  --sdx-scale-ink: rgba(255, 255, 255, 0.92);
  --sdx-scale-grid: rgba(255, 255, 255, 0.16);
  --sdx-scale-pad: 16px;
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  color: var(--sdx-scale-ink);
  font-family: "Inter", system-ui, sans-serif;
}
.sdx-mapscale [hidden] { display: none; }

/* ── Faint grid (a single <canvas>, crisp 1px lines; size set by JS) ───────── */
.sdx-mapscale__grid { position: absolute; top: 0; left: 0; }

/* ── Shared label + unit tag look ─────────────────────────────────────────── */
.sdx-scale__label,
.sdx-vscale__tag,
.sdx-hscale__tag {
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.78), 0 0 2px rgba(0, 0, 0, 0.55);
}
.sdx-scale__label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.01em; }
.sdx-vscale__tag, .sdx-hscale__tag { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; opacity: 0.95; }

/* ── Vertical ruler (right edge) ──────────────────────────────────────────── */
.sdx-vscale { position: absolute; top: 0; bottom: 0; right: 0; width: 7rem; }
.sdx-vscale__tag { position: absolute; top: var(--sdx-scale-pad); right: var(--sdx-scale-pad); } /* TL-by-line tag */
.sdx-vscale__axis {
  position: absolute;
  top: calc(var(--sdx-scale-pad) + 1.4rem); bottom: var(--sdx-scale-pad); right: var(--sdx-scale-pad);
  width: 2px; background: currentColor; opacity: 0.85; box-shadow: 0 0 2px rgba(0, 0, 0, 0.65);
}
.sdx-vscale__ticks { position: absolute; inset: 0; }
.sdx-vscale__tick {
  position: absolute; right: var(--sdx-scale-pad); width: 0.55rem; height: 0; /* JS sets bottom */
  border-top: 2px solid currentColor; box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
}
.sdx-vscale__tick .sdx-scale__label { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); }

/* ── Horizontal ruler (bottom edge) ───────────────────────────────────────── */
/* The horizontal axis sits on the SAME baseline as the vertical scale's 0 tick (bottom: pad),
   so both scales share the bottom-corner origin. Ticks + labels rise above the line. */
.sdx-hscale { position: absolute; left: 0; right: 0; bottom: 0; height: 3.4rem; }
.sdx-hscale__tag { position: absolute; left: var(--sdx-scale-pad); bottom: calc(var(--sdx-scale-pad) + 0.8rem); } /* BL above line */
.sdx-hscale__axis {
  position: absolute;
  left: var(--sdx-scale-pad); right: var(--sdx-scale-pad); bottom: var(--sdx-scale-pad);
  height: 2px; background: currentColor; opacity: 0.85; box-shadow: 0 0 2px rgba(0, 0, 0, 0.65);
}
.sdx-hscale__ticks { position: absolute; inset: 0; }
.sdx-hscale__tick {
  position: absolute; bottom: var(--sdx-scale-pad); height: 0.55rem; width: 0; /* JS sets left */
  border-left: 2px solid currentColor; box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
}
.sdx-hscale__tick .sdx-scale__label { position: absolute; bottom: 0.7rem; left: 50%; transform: translateX(-50%); }

/* ── Settings control button (top-left MapLibre control group) ─────────────── */
/* Rounded corners + soft shadow so it matches the +/-/? controls. (Our class selector beats
   MapLibre's default button radius, so we must set it ourselves.) */
.sdx-mapscale-ctrl {
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}
.sdx-mapscale-ctrl .sdx-mapscale-btn {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px;
  background: #fff; color: #1c1c1e; cursor: pointer;
}
.sdx-mapscale-ctrl .sdx-mapscale-btn svg { width: 19px; height: 19px; }
.sdx-mapscale-ctrl .sdx-mapscale-btn:hover { background: #f2f2f2; }
.sdx-mapscale-ctrl .sdx-mapscale-btn.is-open { background: #e9eef0; }

/* ── Apple-style popup menu ───────────────────────────────────────────────── */
.sdx-mapscale-menu {
  position: absolute; z-index: 1450; width: 16rem; max-width: calc(100vw - 1.5rem);
  background: rgba(255, 255, 255, 0.98); border-radius: 0.9rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.16), 0 12px 30px rgba(15, 23, 42, 0.28);
  padding: 0.55rem; pointer-events: auto;
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif;
  color: #1c1c1e; animation: sdxScaleMenuIn 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.sdx-mapscale-menu[hidden] { display: none; }
@keyframes sdxScaleMenuIn { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: none; } }

.sdx-mapscale-menu__title {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: #8a8a8e; padding: 0.35rem 0.55rem 0.25rem;
}
.sdx-mapscale-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.5rem 0.55rem; border-radius: 0.55rem; font-size: 0.92rem;
}
.sdx-mapscale-row:hover { background: rgba(0, 0, 0, 0.04); }
.sdx-mapscale-menu__sep { height: 1px; background: rgba(0, 0, 0, 0.08); margin: 0.35rem 0.4rem; }

/* iOS-style toggle */
.sdx-toggle { position: relative; width: 2.7rem; height: 1.6rem; flex: 0 0 auto; }
/* z-index keeps the transparent input ABOVE the track/thumb so clicks hit the checkbox
   (otherwise the later-in-DOM track/thumb capture the click and the toggle never fires). */
.sdx-toggle input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 2; }
.sdx-toggle__track { position: absolute; inset: 0; border-radius: 999px; background: #e3e3e8; transition: background-color 0.18s ease; }
.sdx-toggle__thumb {
  position: absolute; top: 2px; left: 2px; width: 1.2rem; height: 1.2rem; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform 0.18s ease;
}
.sdx-toggle input:checked ~ .sdx-toggle__track { background: #34c759; }
.sdx-toggle input:checked ~ .sdx-toggle__thumb { transform: translateX(1.1rem); }
.sdx-toggle input:focus-visible ~ .sdx-toggle__track { outline: 2px solid #0a84ff; outline-offset: 2px; }

/* Segmented control (Grid: Off / V / H / Both) */
.sdx-segmented {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px;
  background: rgba(120, 120, 128, 0.12); border-radius: 0.6rem; padding: 2px; margin: 0.1rem 0.55rem 0.4rem;
}
.sdx-segmented button {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 0.82rem; font-weight: 600; color: #1c1c1e;
  padding: 0.35rem 0.2rem; border-radius: 0.45rem; transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.sdx-segmented button[aria-pressed="true"] { background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); }
.sdx-segmented button:focus-visible { outline: 2px solid #0a84ff; outline-offset: 2px; }