/* map. The root carries no class of its own: `.sk-map` is the atom, so this sheet keys on [data-sk="map"]. */

/* A LOCATION is what makes the plate a photograph; the placeholder grid that
 * stands in without one is a band. */
.sk-component[data-sk="map"]:has(.sk-map iframe) {
  margin-block-start: calc(-1 * var(--sk-chrome-clear, 0px));
  --sk-chrome-member-stage: var(--sk-chrome-row-stage);
  --sk-chrome-ground: media;
}

.sk-map {
  --sk-map-street: color-mix(in srgb, var(--sk-ink) 8%, transparent);
  --sk-map-avenue: color-mix(in srgb, var(--sk-ink) 14%, transparent);
  /* Saturation boosted before the grayscale: the marker is the only saturated mass in a cross-origin frame. */
  --sk-map-filter: saturate(2.2) grayscale(0.78);
  --sk-map-tint: 30%;
  --sk-map-veil: color-mix(in srgb, var(--sk-bg) var(--sk-map-tint), transparent);
  --sk-map-crop: min(180px, 45%);
  --sk-map-pin-x: 50%;
  --sk-map-pin-y: 44%;
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--sk-map-aspect, 4 / 3);
  border-radius: var(--sk-media-radius);
  border: var(--sk-border-width) solid var(--sk-stroke);
  background:
    linear-gradient(
      64deg,
      transparent calc(50% - 3px),
      var(--sk-map-avenue) calc(50% - 3px) calc(50% + 3px),
      transparent calc(50% + 3px)
    ),
    repeating-linear-gradient(0deg, transparent 0 64px, var(--sk-map-avenue) 64px 67px),
    repeating-linear-gradient(90deg, transparent 0 88px, var(--sk-map-avenue) 88px 91px),
    repeating-linear-gradient(0deg, transparent 0 21px, var(--sk-map-street) 21px 22px),
    repeating-linear-gradient(90deg, transparent 0 29px, var(--sk-map-street) 29px 30px),
    var(--sk-card);
}
.sk-map::before {
  content: "";
  position: absolute;
  left: var(--sk-map-pin-x);
  top: var(--sk-map-pin-y);
  width: 72px;
  height: 72px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--sk-accent) 22%, transparent),
    transparent 72%
  );
}
.sk-map::after {
  content: "";
  position: absolute;
  left: var(--sk-map-pin-x);
  top: var(--sk-map-pin-y);
  width: 14px;
  height: 14px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--sk-accent);
  border: 3px solid var(--sk-bg);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--sk-ink) 32%, transparent);
}
.sk-map[data-pin="upper-left"] {
  --sk-map-pin-x: 30%;
  --sk-map-pin-y: 28%;
}
.sk-map[data-pin="upper-right"] {
  --sk-map-pin-x: 70%;
  --sk-map-pin-y: 28%;
}
.sk-map[data-pin="lower-left"] {
  --sk-map-pin-x: 30%;
  --sk-map-pin-y: 68%;
}
.sk-map[data-pin="lower-right"] {
  --sk-map-pin-x: 70%;
  --sk-map-pin-y: 68%;
}

.sk-map-embed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  filter: var(--sk-map-filter);
}
/* Without data-place-card the iframe bleeds up by the crop so Google's card falls outside the clip. */
.sk-map:not([data-place-card="true"]) .sk-map-embed {
  top: calc(-1 * var(--sk-map-crop));
  height: calc(100% + var(--sk-map-crop));
}
/* Without data-interactive no pointer reaches the embed, so wheel and drag stay with the page. */
.sk-map:not([data-interactive="true"]) .sk-map-embed {
  pointer-events: none;
}
/* A real element, never a pseudo or a blend mode. */
.sk-map-veil {
  position: absolute;
  inset: 0;
  background: var(--sk-map-veil);
  pointer-events: none;
}
/* Invert + hue-rotate keeps land/water hues while flipping dark. */
[data-tone="inverted"] .sk-map {
  --sk-map-filter: invert(0.9) hue-rotate(180deg) grayscale(0.5) contrast(0.9);
}
[data-tone="accent"] .sk-map {
  --sk-map-tint: 50%;
}
/* grayscale(1) BEFORE the invert strips every hue; the hue-rotate swings the marker toward blue so it inverts lighter than the tiles. */
.sk-map[data-look="dark"] {
  --sk-map-filter: saturate(1.5) hue-rotate(240deg) grayscale(1) invert(0.92) brightness(0.85)
    contrast(0.95);
  --sk-map-tint: 0%;
}
/* Ink: the tiles pushed to two values — land, labels and the marker at the poles, water the mid step. The
 * brightness drops BEFORE the contrast so Google's red marker (mid luminance once gray) lands on the ink
 * pole rather than the paper's; contrast then spreads the tiles' narrow band of near-whites to the whole
 * range. The polarity rides the band's own (--sk-ink-on-dark): invert(0) leaves paper land on a light
 * band, invert(1) flips it under an inverted tone or a dark theme — one rule, no per-tone arm. The veil
 * thins to half so the water stays ink rather than fog; the accent band keeps its full wash, since two
 * values under one color IS the duotone. */
.sk-map[data-look="ink"] {
  --sk-map-filter: grayscale(1) brightness(0.6) contrast(6.2) invert(var(--sk-ink-on-dark));
  --sk-map-tint: 15%;
}
[data-tone="accent"] .sk-map[data-look="ink"] {
  --sk-map-tint: 50%;
}
.sk-map[data-look="natural"] {
  --sk-map-filter: none;
}
.sk-map[data-look="natural"] .sk-map-veil {
  display: none;
}
.sk-map:has(.sk-map-embed)::before,
.sk-map:has(.sk-map-embed)::after {
  content: none;
}

/* `none` is the viewport-share register (--sk-map-h, a bare svh count). */
[data-sk="map"][data-aspect="none"] .sk-map,
[data-sk="map"][data-aspect=""] .sk-map {
  aspect-ratio: auto;
  /* Of the band, not the raw viewport: a bare svh overshoots the fold by a bar height. */
  height: calc(
    var(--sk-map-h, 60) * var(--sk-band-stage, calc(100svh - var(--sk-chrome-above, 0px))) / 100
  );
}
[data-sk="map"][data-aspect] .sk-map {
  --sk-map-aspect: var(--sk-aspect);
}

[data-sk="map"] {
  padding-block: 0;
}
[data-sk="map"] .sk-map {
  border: 0;
  border-radius: 0;
}