/* The coordinate picker's own styles — design-04 §9.1.
 *
 * ITS OWN FILE SINCE CYCLE 16, for the same reason coord-picker.js is its own module: the
 * picker now has two callers — the admin page's eatery forms and a person adding a place
 * from the app — and delivery-plan §6.6 made "reuses it rather than authoring a second one"
 * this cycle's stated dependency. Two stylesheets would agree today and drift on the first
 * fix, which is exactly the failure the JS extraction was about.
 *
 * LOADED BY BOTH PAGES, AND IT DEPENDS ONLY ON TOKENS. Nothing here reads a class the app
 * or the admin page owns, so neither page's register leaks into the other's copy of the
 * control. The admin page is "deliberately not the app" (admin-eateries.js) and stays so:
 * what is shared is one control, not a look.
 */

/* The picker's refusal shares the form note's LOOK and not its class — see the comment in
   coordinateField(): the admin page's say() looks up ".form-note" inside the form, so a
   second element by that name would swallow the page's own "Added." */
.coord-note {
  flex: 1 0 100%;
  margin: 6px 0 0;
  padding: 5px 9px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--clay) 14%, transparent);
  border-left: 2px solid var(--clay);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.4;
  color: var(--ink);
}
.coord-note[hidden] { display: none; }

/* ---------- the coordinate picker (cycle 14, design-04 §9.1) ---------- */

/* Three ways in, grouped so it reads as ONE question — "where is it, and how do we know" —
   rather than as five unrelated fields. §9.1 is emphatic that the three are not equally
   good, so the basis line below is part of the control, not a footnote. */
.coordinate > summary {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-soft);
  list-style-position: outside;
}
.coordinate[open] > summary { margin-bottom: 6px; }

.coordinate {
  flex: 1 0 100%;
  margin: 6px 0 0;
  padding: 8px 10px;
  border: 1px dashed color-mix(in srgb, var(--ink) 22%, transparent);
  border-radius: var(--radius-sm);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
}

.coordinate .field[hidden] { display: none; }

.coordinate .use-link {
  align-self: flex-end;
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 4px 8px;
}

/* WHERE THE NUMBER CAME FROM, always on screen beside the number itself. This is
   `bearing_verified` next to `bearing`, one artefact along: a point off a maps listing and
   a pin dropped on a part-referenced grid are different claims, and a form that showed only
   the digits would let the weaker one wear the stronger one's confidence. */
.coord-basis {
  flex: 1 0 100%;
  margin: 2px 0 0;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-soft);
}

/* The pin is approximate and the label says so rather than the styling implying it —
   spine §7.3 names the basis instead of stamping a generic caveat. */
.coordinate[data-coord-source="map_pin"] .coord-basis { color: var(--clay); }

.pin-map {
  flex: 1 0 100%;
  width: 100%;
  height: auto;
  max-width: 300px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  touch-action: none;
  cursor: crosshair;
}
/* Review round 1, note 3 — the map was too small to place a dot in. The zoom moves the
   viewBox, so everything drawn in it would scale with it; these two keep the marks a fixed
   size on screen while the ground under them grows. `vector-effect` is the same trick
   map.js uses on the scene miniatures. */
.pin-map-wrap { position: relative; flex: 1 0 100%; max-width: 300px; }
.pin-map-wrap .pin-map { max-width: none; }

.pin-zoom {
  position: absolute;
  right: 6px;
  bottom: 6px;
  display: flex;
  gap: 4px;
}
.pin-zoom-btn {
  /* 32px, under design-01 §4.1's 44px minimum ON PURPOSE and recorded rather than fudged:
     these sit ON the map, and a pair of 44px targets in the corner of a 300x190 control
     would cover the part of it somebody is trying to aim at. They are a convenience beside
     two full-size text fields that set the same coordinate, not the only way in. */
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--canvas) 88%, transparent);
  color: var(--ink);
  font: 600 15px/1 var(--font-mono);
  cursor: pointer;
}
.pin-zoom-btn[disabled] { opacity: .4; cursor: default; }

.pin-map-road {
  fill: none;
  stroke: color-mix(in srgb, var(--ink) 34%, transparent);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}
.pin-map-scene { fill: color-mix(in srgb, var(--ink) 45%, transparent); }

/* THE STROKE DOES NOT SCALE WITH THE ZOOM, and the first build of the zoom forgot it: the
   radius is divided by the zoom in JS so the pin stays a fixed size on screen, but a
   1.5-unit stroke at 8x draws a 12px ring around a 5px dot — a pale halo with a speck in
   the middle of it, visible in the first pin-map-zoom.png. Non-scaling keeps the ring the
   width it is drawn at, at every zoom. */
.pin-map-pin {
  fill: var(--clay);
  stroke: var(--canvas);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.pin-map-pin[hidden] { display: none; }