/*
 * The map product only. Shared furniture is in shell.css.
 *
 * The poster is one sheet of paper with a live map inset into it and the type drawn over
 * the whole thing. The inset's margins are fractions of the sheet's SHORT SIDE — the same
 * fractions src/map/labels.ts prints with — so the shape on screen is the shape that
 * prints, in both orientations.
 *
 * They arrive already converted: a percentage of the width for left and right, and a
 * percentage of the HEIGHT for top and bottom, because that is what those properties
 * resolve against. The conversion is one line of JS beside the aspect ratio it depends on.
 */
.mapposter {
  /* the paper the poster is printed on — what shows around the map */
  position: relative; overflow: hidden; background: var(--paper, #EFE9E1);
  aspect-ratio: var(--poster-aspect, 5 / 7);
  box-shadow: 0 2px 4px rgba(42, 42, 40, .07), 0 22px 50px -24px rgba(42, 42, 40, .42);
  margin-inline: auto;
}
@media (min-width: 900px) {
  .mapposter { width: min(100%, calc(74vh * var(--poster-wh, 0.714))); }
}
.mapview {
  position: absolute; overflow: hidden;
  left: var(--plate-side, 7.8%); right: var(--plate-side, 7.8%);
  top: var(--plate-top, 13.4%); bottom: var(--plate-bottom, 10.9%);
}
.map { position: absolute; inset: 0; }

/*
 * The circle inset: the map is a disc on the paper rather than filling the inset.
 *
 * The diameter is the smaller side of the map area, centred in it — the same rule
 * geometry() applies for the print, so the two agree at every size and in both
 * orientations.
 */
.mapposter[data-shape="circle"] .map,
.mapposter[data-shape="circle"] .markerlayer {
  inset: auto; position: absolute; left: 50%; top: 50%;
  width: var(--disc-px, 60%); height: var(--disc-px, 60%);
  transform: translate(-50%, -50%);
}
.mapposter[data-shape="circle"] .map { border-radius: 50%; overflow: hidden; }
.mapposter[data-shape="circle"] .markerlayer { border-radius: 50%; }

/*
 * The type covers the WHOLE sheet and is transparent, exactly as it is on the print — the
 * paper behind the words and the paper around the map are one rectangle. It must not take
 * the pointer: everything under it is draggable.
 */
.mapblock { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.mapblock svg { width: 100%; height: 100%; display: block; }

/* the marker rides above the map and takes pointer events only on itself */
.markerlayer { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.marker {
  position: absolute; top: 0; left: 0; display: block; cursor: grab;
  pointer-events: auto; touch-action: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .28));
}
.marker.dragging { cursor: grabbing; }

/*
 * Under the poster, never on it. The preview is the print, so nothing sits on top of it —
 * including a loading line, which is what this used to be: absolutely positioned against
 * the bottom edge of the map.
 */
.map-busy {
  height: 3px; margin-top: 3px; border-radius: 2px; background: var(--tomato);
  transform-origin: left; animation: mapbusy 900ms ease-in-out infinite;
}
@keyframes mapbusy { 0% { transform: scaleX(0); } 60% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0; } }

.provider-warn {
  margin: var(--s2) 0 0; padding: var(--s2) var(--s3); border-radius: var(--r-chip);
  background: #FBE6D8; color: #7A3B12; font-size: 12px; line-height: 1.45;
}

/*
 * MapLibre still builds its four empty control corners even when no control is added.
 * They are zero-sized and invisible, but this makes certain a stray control can never
 * appear over the poster — routes-probe asserts the same thing from the other side.
 */
.mapposter .maplibregl-ctrl-container { display: none !important; }


/* the place search moved to shell.css when /starmap started using it too */



.zoomrow { display: flex; align-items: center; gap: var(--s3); }
.zoomrow .ghostbtn { min-width: 44px; font-size: 17px; line-height: 1; padding: 10px 14px; }
.zoomread { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }


/* ── marker picker ───────────────────────────────────────────────────────── */
.mks { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); }
@media (min-width: 420px) { .mks { grid-template-columns: repeat(7, 1fr); } }
.mk { display: grid; gap: 5px; cursor: pointer; justify-items: center; }
.mk input { position: absolute; opacity: 0; pointer-events: none; }
.mk-art {
  display: grid; place-items: center; width: 100%; aspect-ratio: 1;
  background: var(--sheet); border: 2px solid var(--rule); border-radius: var(--r-chip);
  color: var(--muted); transition: border-color 120ms ease, color 120ms ease, transform 120ms ease;
}
.mk-art svg { width: 60%; height: 60%; display: block; }
.mk:hover .mk-art { transform: translateY(-2px); }
.mk:has(input:checked) .mk-art { border-color: var(--tomato); color: var(--tomato); background: var(--sheet); }
.mk:has(input:focus-visible) .mk-art { outline: 2px solid var(--tomato); outline-offset: 2px; }
.mk-name { font-size: 10px; color: var(--muted); text-align: center; }
.mk:has(input:checked) .mk-name { color: var(--ink); font-weight: 600; }


/* ── the add-to-cart stays reachable on a phone ──────────────────────────── */
@media (max-width: 899px) {
  .mapproduct .addcart {
    position: sticky; bottom: var(--s3); z-index: 4;
    box-shadow: 0 6px 20px -8px rgba(42, 42, 40, .55);
  }
}