/* Current-place identity belongs to the bottom-left title; navigation shows ancestors. */
body[data-stage="country"] .breadcrumbs .country-crumb,
body[data-stage="country"] .breadcrumbs .region-crumb,
body[data-stage="region"] .breadcrumbs .region-crumb {
  display: none;
}

#country .place-caption h1 { margin: 0; }
body:is([data-stage="country"],[data-stage="region"]) #geography {overflow:hidden}

/* Framing uses actual canvas dimensions, keeping geographic anchors attached. */
body[data-stage="country"] #home-relief-canvas {
  left:calc(50% - 47% * var(--country-desktop-map-scale,1) + var(--country-desktop-map-x,0vw));
  top:calc(48% - 39% * var(--country-desktop-map-scale,1) + var(--country-desktop-map-y,0vh));
  width:calc(94% * var(--country-desktop-map-scale,1));
  height:calc(78% * var(--country-desktop-map-scale,1));
}
body[data-stage="country"] #country .place-caption {
  left:var(--country-desktop-title-left,1vw);bottom:var(--country-desktop-title-bottom,3vh);
}
body[data-stage="country"] .product-header {left:var(--country-desktop-title-left,1vw)}
body[data-stage="country"] #country .place-caption h1 {font-size:var(--country-desktop-title-size,72px)}
body:is([data-stage="country"],[data-stage="region"]) .breadcrumbs,
body:is([data-stage="country"],[data-stage="region"]) .collection-nav,
body:is([data-stage="country"],[data-stage="region"]) .view-switch {gap:var(--country-desktop-nav-gap,28px)}
body:is([data-stage="country"],[data-stage="region"]) .product-header button,
body:is([data-stage="country"],[data-stage="region"]) .breadcrumbs span {font-size:var(--country-desktop-nav-size,14px);min-height:44px}
body:is([data-stage="country"],[data-stage="region"]) .breadcrumbs span {min-height:0}

/* Three provisional label treatments. The original remains a comparison option. */
:root:not([data-country-markers="current"]) body[data-stage="country"] .map-label {
  --label-size:var(--country-desktop-label-size,24px);
  --point-size:var(--country-desktop-point-size,3px);
  --leader:var(--country-desktop-leader,32px);
  color:var(--ink);padding:12px;gap:12px;transform:translate(-13.5px,-50%);
}
:root:not([data-country-markers="current"]) body[data-stage="country"] .map-label .label {font-size:var(--label-size);letter-spacing:0}
:root:not([data-country-markers="current"]) body[data-stage="country"] .map-label .point {width:var(--point-size);height:var(--point-size);background:var(--ink);border-radius:50%;flex-shrink:0}
:root:not([data-country-markers="current"]) body[data-stage="country"] .map-label .point:after {display:none}
:root[data-country-counts="false"] body[data-stage="country"] .map-label .count {display:none}
:root[data-country-markers="survey"] body[data-stage="country"] .map-label {gap:var(--leader);transform:translate(-18px,-50%)}
:root[data-country-markers="survey"] body[data-stage="country"] .map-label .point {width:12px;height:12px;background:none;border-radius:0}
:root[data-country-markers="survey"] body[data-stage="country"] .map-label .point:before,
:root[data-country-markers="survey"] body[data-stage="country"] .map-label .point:after {content:'';display:block;position:absolute;background:var(--ink);border:0;inset:auto;transform:none}
:root[data-country-markers="survey"] body[data-stage="country"] .map-label .point:before {width:10px;height:1px;top:5.5px;left:1px}
:root[data-country-markers="survey"] body[data-stage="country"] .map-label .point:after {width:1px;height:10px;top:1px;left:5.5px}
:root[data-country-markers="survey"] body[data-stage="country"] .map-label:before {content:'';position:absolute;left:24px;top:50%;height:1px;width:calc(var(--leader) - 6px);background:var(--ink);opacity:.35}
:root[data-country-markers="index"] body[data-stage="country"] .map-label {gap:var(--leader)}
:root[data-country-markers="index"] body[data-stage="country"] .map-label:before {content:'';position:absolute;left:calc(12px + var(--point-size));top:50%;height:1px;width:calc(var(--leader) - 5px);background:var(--ink);opacity:.35}
:root[data-country-markers="index"] body[data-stage="country"] .map-label .label {font-size:calc(var(--label-size)*.8)}
.country-index-line {position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.country-symbols {position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;color:var(--ink);opacity:var(--country-symbol-opacity,.7)}
body:not([data-stage="region"]) .country-symbols {display:none}
.context-symbol {pointer-events:auto}
.cartographic-place-name {font:16px Geist,monospace;fill:currentColor;stroke:none}
.airport-context>path {transform-box:fill-box;transform-origin:center;animation:airport-ink 450ms ease-out both}
@keyframes airport-ink {from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}
.cartographic-draw-path {animation:cartographic-ink 700ms ease-out both;stroke-linecap:round;stroke-linejoin:round}
@keyframes cartographic-ink {from{stroke-dashoffset:1;opacity:.25}to{stroke-dashoffset:0;opacity:1}}
@media(prefers-reduced-motion:reduce){.cartographic-draw-path,.airport-context>path{animation:none}}
:root[data-country-markers="index"] body[data-stage="country"] .map-label {transform:translate(0,-50%);gap:0}
:root[data-country-markers="index"] body[data-stage="country"] .map-label .point,
:root[data-country-markers="index"] body[data-stage="country"] .map-label:before {display:none}
.region-photo-reveal {position:absolute;left:12px;bottom:calc(100% + 8px);width:190px;height:160px;display:block;background:var(--paper);padding:5px;border:1px solid var(--line);opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity 180ms,transform 260ms;z-index:20}
.region-photo-reveal img {width:100%;height:100%;object-fit:cover;display:block}
:root[data-country-hover="true"] body[data-stage="country"] .map-label:is(:hover,:focus-visible) {z-index:15}
:root[data-country-hover="true"] body[data-stage="country"] .map-label:is(:hover,:focus-visible) .region-photo-reveal {opacity:1;transform:translateY(0)}
#country-zoom-layer {position:fixed;inset:0;z-index:18;overflow:hidden;pointer-events:none;background:transparent}
#country-zoom-layer canvas {width:100%;height:100%;display:block;transform-origin:0 0}
.country-flight-anchor {position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
body.is-country-zooming .place-caption {opacity:0}
@media(hover:none){.region-photo-reveal{display:none}}
@media(prefers-reduced-motion:reduce){.region-photo-reveal{transition:none}}

@media(max-width:760px) {
  body[data-stage="country"] #home-relief-canvas {
    left:calc(50% - 50% * var(--country-mobile-map-scale,1) + var(--country-mobile-map-x,0vw));
    top:calc(47.5% - 32.5% * var(--country-mobile-map-scale,1) + var(--country-mobile-map-y,0vh));
    width:calc(100% * var(--country-mobile-map-scale,1));height:calc(65% * var(--country-mobile-map-scale,1));
  }
  body[data-stage="country"] #country .place-caption {left:var(--country-mobile-title-left,5.6vw);bottom:var(--country-mobile-title-bottom,3.4vh)}
  body[data-stage="country"] .product-header {left:var(--country-mobile-title-left,5.6vw)}
  body[data-stage="country"] #country .place-caption h1 {font-size:var(--country-mobile-title-size,44px)}
  body:is([data-stage="country"],[data-stage="region"]) .breadcrumbs {gap:var(--country-mobile-nav-gap,10px)}
  body:is([data-stage="country"],[data-stage="region"]) .product-header button,
  body:is([data-stage="country"],[data-stage="region"]) .breadcrumbs span,
  body:is([data-stage="country"],[data-stage="region"]) .collection-nav .view-switch #terrain-tab,
  body:is([data-stage="country"],[data-stage="region"]) .collection-nav .view-switch #photos-tab {font-size:var(--country-mobile-nav-size,12px)}
  body:is([data-stage="country"],[data-stage="region"]) .collection-nav {gap:0}
  body:is([data-stage="country"],[data-stage="region"]) .view-switch {gap:2px}
  :root:not([data-country-markers="current"]) body[data-stage="country"] .map-label {
    --label-size:var(--country-mobile-label-size,18px);--point-size:var(--country-mobile-point-size,3px);--leader:var(--country-mobile-leader,20px);
  }
}

/* Ancestors are actionable; the final place is a readable location indicator. */
body:is([data-stage="country"],[data-stage="region"]) .breadcrumbs button {
  text-decoration: underline; text-decoration-color: #24272366; text-underline-offset: 4px;
}
body:is([data-stage="country"],[data-stage="region"]) .breadcrumbs .current-place {
  color: var(--ink); white-space: nowrap;
}
/* Paper protects navigation from the city drawing without a visible rule. */
body[data-stage="region"] .product-header::before {
  content:""; position:fixed; z-index:-1; top:0; left:0; right:0; height:125px;
  background:linear-gradient(to bottom, var(--paper) 0%, #f3f0e9f2 43%, #f3f0e900 100%);
  pointer-events:none;
}
@media(max-width:760px) {
  body:is([data-stage="country"],[data-stage="region"]) .view-switch {
    position:fixed; left:22px; right:auto; top:64px; bottom:auto;
    padding:2px; gap:2px;
  }
  body[data-stage="region"] .product-header::before { height:155px; }
  body:is([data-stage="country"],[data-stage="region"]) .breadcrumbs {gap:7px}
  body:is([data-stage="country"],[data-stage="region"]) .breadcrumbs button {min-width:44px}
  body[data-stage="region"] .map-zoom-controls {bottom:24px}
}