/* ══════════════════════════════════════════════════════════════════════
   Zeke's Maps — styling
   Design rule: nothing on screen can open something that needs closing.
   Every control is a toggle or an instant action.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --panel:        rgba(255,255,255,.88);
  --panel-edge:   rgba(0,0,0,.10);
  --fg:           #1b1b1f;
  --paper:        #fbfaf7;
  --paper-grid:   rgba(0,0,0,.06);
  --banner-bg:    rgba(255,255,255,.92);
  --shadow:       0 6px 20px rgba(0,0,0,.20);
  --press:        0 4px 0 rgba(0,0,0,.18);
}

:root[data-theme="dark"] {
  --panel:        rgba(28,33,42,.90);
  --panel-edge:   rgba(255,255,255,.14);
  --fg:           #f2f4f8;
  --paper:        #12161d;
  --paper-grid:   rgba(255,255,255,.07);
  --banner-bg:    rgba(28,33,42,.92);
  --shadow:       0 6px 20px rgba(0,0,0,.50);
  --press:        0 4px 0 rgba(0,0,0,.45);
}

/* ── kid-proofing ──────────────────────────────────────────────────────
   No text selection, no iOS "Copy / Look Up" callout on long-press,
   no blue tap flash, no rubber-band scroll, no pull-to-refresh.
   These are the things that produce a stuck state a 4-year-old
   can't get out of.                                                     */
* {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  position: fixed;
  inset: 0;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
  background: var(--paper);
  color: var(--fg);
  font: 600 17px/1.2 -apple-system, "SF Pro Rounded", "Avenir Next", system-ui, sans-serif;
}

#map { position: absolute; inset: 0; }

/* the drawing surface — injected into the map so it pans/zooms with it */
#draw-canvas {
  position: absolute;
  top: 0; left: 0;
  pointer-events: none;
  touch-action: none;
}
/* blank "whiteboard" mode: opaque background hides the map,
   but the place pins stay visible on top so he can draw roads to them */
#draw-canvas.paper {
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--paper-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--paper-grid) 1px, transparent 1px);
  background-size: 44px 44px, 44px 44px;
}

/* place pins shouldn't eat touches meant for drawing */
.maplibregl-marker { pointer-events: none !important; }

/* ── destination banner ──────────────────────────────────────────────── */
#banner {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%) translateY(-14px);
  padding: 10px 22px;
  border-radius: 999px;
  background: var(--banner-bg);
  border: 1px solid var(--panel-edge);
  box-shadow: var(--shadow);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: .2px;
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
  white-space: nowrap;
  max-width: 70vw;
  overflow: hidden;
  text-overflow: ellipsis;
}
#banner.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── buttons ─────────────────────────────────────────────────────────── */
.tool {
  position: relative;
  width: 62px;
  height: 62px;
  border: 1px solid var(--panel-edge);
  border-radius: 20px;
  background: var(--panel);
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
  transition: transform .07s ease, opacity .15s ease;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.tool .ico { font-size: 30px; line-height: 1; pointer-events: none; }
.tool:active { transform: scale(.93); }
.tool[aria-pressed="true"] {
  background: #0a84ff;
  border-color: #0a84ff;
  box-shadow: var(--shadow), inset 0 0 0 3px rgba(255,255,255,.35);
}

/* GO button greys out when there's no line to drive — never disabled in a
   way that produces a confusing "nothing happened" tap */
.tool.go.is-off { opacity: .35; }
.tool.go:not(.is-off) { background: #34c759; border-color: #34c759; }

/* hold-to-erase: a modal confirm would be exactly the thing we're avoiding,
   so destructive actions require a 900ms press with a visible fill instead */
.tool.hold .hold-fill {
  position: absolute;
  inset: 0;
  background: #ff3b30;
  transform: scaleX(0);
  transform-origin: left center;
  opacity: .85;
}
.tool.hold.holding .hold-fill {
  transform: scaleX(1);
  transition: transform .9s linear;
}

/* ── right-hand tool rail ────────────────────────────────────────────── */
.rail {
  position: absolute;
  top: calc(14px + env(safe-area-inset-top));
  right: calc(14px + env(safe-area-inset-right));
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 5;
}

/* ── pan pad ─────────────────────────────────────────────────────────
   Lets him keep drawing past the edge of the screen without putting the
   pen down. Each tap shifts the map about three-quarters of a screen,
   so it reads like turning a page. Bottom-right, clear of the colour
   swatches on the left and the places along the bottom.               */
#dpad {
  position: absolute;
  right: calc(16px + env(safe-area-inset-right));
  bottom: calc(16px + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: repeat(3, 58px);
  grid-template-rows: repeat(3, 58px);
  gap: 6px;
  z-index: 5;
  transition: opacity .18s ease, transform .18s ease;
}
#dpad.hidden {
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
}
.pad {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  font-size: 22px;
  font-weight: 700;
  color: var(--fg);
  line-height: 1;
}
.pad[data-dir="up"]    { grid-area: 1 / 2; }
.pad[data-dir="left"]  { grid-area: 2 / 1; }
.pad[data-dir="right"] { grid-area: 2 / 3; }
.pad[data-dir="down"]  { grid-area: 3 / 2; }

/* ── drawing toolbar (left side) ─────────────────────────────────────── */
#drawbar {
  position: absolute;
  left: calc(14px + env(safe-area-inset-left));
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 5;
  transition: opacity .18s ease, transform .18s ease;
}
#drawbar.hidden {
  opacity: 0;
  transform: translateY(-50%) translateX(-24px);
  pointer-events: none;
}

#swatches {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: 24px;
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.swatch {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid transparent;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
  padding: 0;
  transition: transform .1s ease;
}
.swatch:active { transform: scale(.9); }
.swatch[aria-pressed="true"] {
  border-color: var(--fg);
  transform: scale(1.16);
}

.drawbar-actions { display: flex; flex-direction: column; gap: 12px; }

/* ── places bar ──────────────────────────────────────────────────────── */
#places {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 14px;
  padding: 26px 16px calc(16px + env(safe-area-inset-bottom));
  z-index: 4;
  pointer-events: none;
}
/* Same card as every other control — translucent panel, same border, same
   radius, same blur. The place's colour lives in the round icon badge
   instead, which is what keeps it tied to its pin on the map without the
   bottom row looking like a different app from the toolbars. */
.place {
  pointer-events: auto;
  border: 1px solid var(--panel-edge);
  border-radius: 20px;
  padding: 10px 18px 12px;
  min-width: 116px;
  background: var(--panel);
  color: var(--fg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  font-size: 17px;
  font-weight: 800;
  box-shadow: var(--press), var(--shadow);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: transform .07s ease;
}
.place .emoji {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(0,0,0,.28);
}
.place:active { transform: translateY(4px); box-shadow: var(--shadow); }

/* ── map pin labels ──────────────────────────────────────────────────── */
.pin { display: flex; flex-direction: column; align-items: center; }
.pin-label {
  background: var(--banner-bg);
  color: var(--fg);
  border: 1px solid var(--panel-edge);
  border-radius: 10px;
  padding: 3px 9px;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  margin-bottom: 4px;
}
/* zoomed far out the places sit on top of each other and the name tags pile
   into an unreadable mess — show just the dots out there */
:root.far .pin-label { display: none; }

.pin-dot {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 3px solid #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
  box-shadow: 0 2px 8px rgba(0,0,0,.45);
}
/* the navigation puck — an iOS-style arrow in a circle. During a drive the
   map rotates so the way he's heading is always up the screen, which means
   the arrow itself never needs to turn: it just points up. */
.puck { width: 56px; height: 56px; pointer-events: none; }
.puck svg {
  width: 56px; height: 56px; display: block;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.45));
}
.puck .halo {
  transform-origin: 28px 28px;
  animation: puck-pulse 2.2s ease-in-out infinite;
}
@keyframes puck-pulse {
  0%, 100% { transform: scale(1);    opacity: .16; }
  50%      { transform: scale(1.14); opacity: .30; }
}

/* ── attribution (required by OpenFreeMap; deliberately not a link so
      there's nothing here that can navigate the app away) ────────────── */
#attrib {
  position: absolute;
  left: calc(8px + env(safe-area-inset-left));
  bottom: calc(2px + env(safe-area-inset-bottom));
  font-size: 9px;
  font-weight: 500;
  opacity: .45;
  pointer-events: none;
  z-index: 3;
}

/* ── narrow screens (iPhone): move draw tools above the places bar ───── */
@media (max-width: 700px) {
  #drawbar {
    left: 0; right: 0;
    top: auto;
    bottom: calc(112px + env(safe-area-inset-bottom));
    transform: none;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
  }
  #drawbar.hidden { transform: translateY(24px); }
  #swatches { flex-direction: row; padding: 8px; gap: 8px; border-radius: 20px; }
  .swatch { width: 36px; height: 36px; }
  .drawbar-actions { flex-direction: row; gap: 10px; }
  .tool { width: 54px; height: 54px; border-radius: 17px; }
  .tool .ico { font-size: 26px; }
  .place { min-width: 92px; padding: 8px 12px 10px; font-size: 14px; gap: 5px; border-radius: 17px; }
  .place .emoji { width: 34px; height: 34px; font-size: 19px; }

  /* the draw toolbar sits above the places bar on a phone, so lift the
     pan pad clear of both */
  #dpad {
    grid-template-columns: repeat(3, 46px);
    grid-template-rows: repeat(3, 46px);
    gap: 4px;
    bottom: calc(180px + env(safe-area-inset-bottom));
    right: calc(10px + env(safe-area-inset-right));
  }
  .pad { width: 46px; height: 46px; border-radius: 14px; font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}