/* Terra Tinker map maker: the map sheet on the table, drawn like a topographic
   sheet's collar. The shared shop styles (inks, type, steps, preview, checkout,
   orders) are in /shared/shop.css. */

/* The sheet on the table: the viewfinder is drawn like a topographic sheet's collar */
#map { position: absolute; inset: 0; background: #dde2da; }
.leaflet-container { font: 12px/1.4 var(--font); }
#viewfinder { position: absolute; z-index: 500; pointer-events: none; }
#viewfinder .frame {
  position: absolute;
  z-index: 0;
  inset: 0;
  outline: 1.5px solid var(--ink);
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.92), 0 0 0 6.5px var(--ink), 0 0 0 100vmax rgba(231, 234, 227, 0.76);
}
.corner { position: absolute; width: 12px; height: 12px; border: 0 solid var(--ink); }
.corner.tl { top: 8px; left: 8px; border-width: 1.5px 0 0 1.5px; }
.corner.tr { top: 8px; right: 8px; border-width: 1.5px 1.5px 0 0; }
.corner.bl { bottom: 8px; left: 8px; border-width: 0 0 1.5px 1.5px; }
.corner.br { bottom: 8px; right: 8px; border-width: 0 1.5px 1.5px 0; }
.splits { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.splits line { stroke: var(--contour); stroke-width: 1.5; stroke-dasharray: 7 5; vector-effect: non-scaling-stroke; }

/* Collar text sits above the frame's veil. */
.collar-title, .coord, .collar-foot { z-index: 1; }
.collar-title {
  position: absolute;
  left: -7px;
  bottom: calc(100% + 30px);
  margin: 0;
  max-width: calc(100% + 14px);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 22px;
  line-height: 1.15;
  font-weight: 750;
  font-stretch: var(--wide);
  letter-spacing: -0.01em;
}
.coord {
  position: absolute;
  font-stretch: var(--narrow);
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  color: var(--contour);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.lon-w { left: -7px; bottom: calc(100% + 12px); }
.lon-e { right: -7px; bottom: calc(100% + 12px); }
/* Latitudes read bottom to top along the west edge, as on a printed sheet. */
.lat-n, .lat-s { right: calc(100% + 12px); writing-mode: vertical-rl; transform: rotate(180deg); }
.lat-n { top: -7px; }
.lat-s { bottom: -7px; }
.collar-foot {
  position: absolute;
  left: -7px;
  right: -7px;
  top: calc(100% + 14px);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 6px 18px;
}
.collar-note { margin: 0; font-size: 13px; text-align: right; }
.collar-note b { font-stretch: var(--narrow); font-weight: 650; font-size: 15px; font-variant-numeric: tabular-nums; }
.scalebar { display: grid; gap: 2px; min-width: 90px; }
.scalebar .bar { display: flex; height: 6px; border: 1px solid var(--ink); background: var(--sheet); }
.scalebar .bar i { flex: 1; }
.scalebar .bar i:nth-child(odd) { background: var(--ink); }
.scalebar .labels {
  position: relative;
  height: 13px;
  font-stretch: var(--narrow);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.scalebar .labels span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.scalebar .labels span:first-child { transform: none; }
.scalebar .labels span:last-child { transform: translateX(-100%); }
.scalebar .ratio { font-stretch: var(--narrow); font-size: 12px; color: var(--ink-2); }
.area-warning {
  position: absolute;
  z-index: 600;
  left: 50%;
  top: 14px;
  transform: translateX(-50%);
  margin: 0;
  padding: 8px 12px;
  border: 1.5px solid var(--alert);
  border-radius: 4px;
  background: var(--sheet);
  color: var(--alert);
  font-size: 14px;
}

@media (max-width: 760px) {
  .collar-title { font-size: 17px; }
}