/* Location profile pages (/countries/<slug>/, /regions/<slug>/,
   /cities/<slug>/): the "Where it sits" tooltip and the location map. Linked
   only from those pages. */
/* "Where it sits": the places a location sits in, as a tree, in a tooltip
   beside the hero subtitle (from the location atlas,
   scripts/lib/location-profile-map.mjs). */
.loc-where { position: relative; display: inline-block; }
.loc-where-btn {
    font: inherit;
    color: var(--blue);
    background: none;
    border: 0;
    border-bottom: 1px dotted var(--blue);
    padding: 0;
    cursor: help;
}
.loc-where-tip {
    position: absolute;
    z-index: 30;
    left: 0;
    top: calc(100% + 8px);
    width: min(360px, 80vw);
    display: none;
    padding: 12px 14px;
    background: var(--surface-card);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    box-shadow: var(--shadow-md);
    color: var(--white);
    font-size: 13px;
    line-height: 1.45;
    text-align: left;
}
.loc-where:hover .loc-where-tip,
.loc-where:focus-within .loc-where-tip { display: block; }
.loc-where-row { display: block; margin-bottom: 8px; }
.loc-where-label { display: block; font-weight: 600; font-size: 12px; color: var(--text-light); }
.loc-tree a { color: var(--blue); text-decoration: none; }
.loc-tree a:hover { text-decoration: underline; }
/* The places it sits in, as a tree: broadest at the top, the location itself
   at the bottom, each level joined to its parent by an elbow. */
.loc-tree, .loc-tree-node, .loc-tree-kids { display: block; }
.loc-tree { margin-top: 2px; line-height: 1.7; }
.loc-tree-kids { margin-left: 5px; padding-left: 15px; }
.loc-tree-node { position: relative; }
.loc-tree-kids > .loc-tree-node::before {
    content: "";
    position: absolute;
    left: -15px;
    top: 0;
    width: 10px;
    height: 0.85em;
    border-left: 1px solid var(--border-mid);
    border-bottom: 1px solid var(--border-mid);
    border-bottom-left-radius: 4px;
}
/* The line runs on past a node that has siblings below it. */
.loc-tree-kids > .loc-tree-node:not(:last-child)::after {
    content: "";
    position: absolute;
    left: -15px;
    top: 0;
    bottom: 0;
    border-left: 1px solid var(--border-mid);
}
.loc-tree-here { font-weight: 700; color: var(--white); }

/* Location map: the border and the locations inside it, named on hover.
   The page ships the SVG drawing; js/location-profile-map.js lays a real map
   (MapLibre on the site basemap) over it and adds .is-live once it has drawn. */
.lpm { position: relative; margin: 0; }
.lpm-stage { position: relative; }
/* Sized, not positioned by MapLibre: its stylesheet sets the container to
   relative, which would collapse it here. */
.lpm-live, .lpm-live.maplibregl-map {
    position: absolute;
    inset: 0;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    overflow: hidden;
    opacity: 0;
    transition: opacity .25s ease;
    font-family: var(--font-sans);
}
.lpm-live[hidden] { display: none; }
.lpm-stage.is-live .lpm-live { opacity: 1; }
.lpm-stage.is-live .lpm-svg { visibility: hidden; }
.lpm-live .maplibregl-ctrl-group { border-radius: 8px; box-shadow: var(--shadow-sm); }
.lpm-live .maplibregl-ctrl-attrib { font-size: 11px; }
.lpm-svg {
    display: block;
    width: 100%;
    height: auto;
    background: var(--surface-tray);
    border: 1px solid var(--border-light);
    border-radius: 12px;
}
.lpm-land { fill: var(--surface-card); stroke: var(--border-mid); stroke-width: 0.6; }
.lpm-border { fill: var(--blue); fill-opacity: 0.1; stroke: var(--blue); stroke-width: 1.6; stroke-linejoin: round; }
.lpm-dot { fill: var(--blue); fill-opacity: 0.8; stroke: var(--surface-card); stroke-width: 0.8; cursor: pointer; }
.lpm-dot.is-area { fill: var(--blue-ink); fill-opacity: 0.85; }
.lpm-dot.is-hover { fill-opacity: 1; stroke: var(--white); stroke-width: 1.5; }
.lpm-tip {
    position: absolute;
    z-index: 3;
    transform: translate(-50%, calc(-100% - 8px));
    padding: 4px 8px;
    background: var(--white);
    color: var(--surface-card);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
}
.lpm-caption { margin-top: 8px; font-size: 12px; color: var(--text-faint); }
.lpm-caption a { color: var(--blue); }
/* Bridges the gap so the pointer can move from the button into the tooltip. */
.loc-where-tip::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.hero-map.can-zoom { cursor: zoom-in; }

/* The hero map wears the colours of the real map it enlarges into
   (js/basemap-style.js): tinted land on a card-coloured sea, and the place,
   its country and its pin in the border blue instead of the page-type accent. */
.hero-row.has-map .hero-map {
    --hero-accent: var(--blue);
    background: var(--surface-card);
}
.hero-row.has-map .hero-map .lm-c {
    fill: #DCE4F8; /* theme-guardrail-allow: the basemap land colour in js/basemap-style.js, which MapLibre cannot read from a token */
    stroke: var(--surface-card);
}
.hero-row.has-map .hero-map.has-outline .hero-map-svg .lm-c.is-focus {
    fill: var(--blue);
    fill-opacity: 0.34;
    stroke: var(--surface-card);
    stroke-opacity: 1;
}
.hero-row.has-map .hero-map .lm-outline {
    fill: var(--blue);
    fill-opacity: 0.5;
    stroke: var(--blue);
    stroke-opacity: 1;
}

/* The Enlarge pill at the foot of the hero map, and the card it opens
   (js/location-profile-map.js): the real map with the border and the
   locations inside it, laid over the page from the small map's corner. The
   card reuses the stage, tip and caption styles above. */
.lpm-enlarge {
    position: absolute;
    left: 50%;
    bottom: 0.65rem;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px 4px 9px;
    border: 1px solid var(--border-light);
    border-radius: 999px;
    background: var(--surface-card);
    color: var(--text-light);
    font: 600 12px/1.5 var(--font-sans);
    opacity: .92;
    cursor: pointer;
    transform: translateX(-50%);
    transition: transform .16s cubic-bezier(.2, .7, .2, 1), opacity .15s ease, color .15s ease, box-shadow .16s ease;
}
.lpm-enlarge svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* It pops a little when the map is hovered, and a little more under the pointer. */
.hero-map:hover .lpm-enlarge,
.lpm-enlarge:focus-visible {
    opacity: 1;
    color: var(--white);
    box-shadow: var(--shadow-md);
    transform: translateX(-50%) scale(1.08);
}
.hero-map .lpm-enlarge:hover { transform: translateX(-50%) scale(1.13); }
.lpm-enlarge:focus-visible { outline: 2px solid var(--eyebrow); outline-offset: 1px; }
/* The label reads "Enlarge" at rest. Hovering the map opens "Click here to"
   in front of it, so it reads "Click here to enlarge". */
.lpm-enlarge-label { display: inline-flex; white-space: pre; }
.lpm-enlarge-pre {
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-width .2s cubic-bezier(.2, .7, .2, 1), opacity .15s ease;
}
.lpm-enlarge-word { text-transform: capitalize; }
.lpm-enlarge:focus-visible .lpm-enlarge-pre { max-width: 8em; opacity: 1; }
.lpm-enlarge:focus-visible .lpm-enlarge-word { text-transform: none; }
@media (hover: hover) {
    .hero-map:hover .lpm-enlarge-pre { max-width: 8em; opacity: 1; }
    .hero-map:hover .lpm-enlarge-word { text-transform: none; }
}
/* The pill sits where the map's name caption was. On a page with the map
   card the caption is not shown: the page title already names the place. */
body:has(.lpm-source) .hero-map-caption { display: none; }
.lpm-pop {
    position: absolute;
    z-index: 40;
    box-sizing: border-box;
    padding: 10px;
    background: var(--surface-card);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    box-shadow: var(--shadow-xl);
    opacity: 0;
    transform: scale(.94);
    pointer-events: none;
    transition: transform .18s cubic-bezier(.2, .7, .2, 1), opacity .15s ease;
}
.lpm-pop[hidden] { display: none; }
.lpm-pop.is-open { opacity: 1; transform: none; pointer-events: auto; }
.lpm-pop .lpm-svg { aspect-ratio: 16 / 10; }
.lpm-pop .lpm-caption { margin: 8px 2px 0; }
/* The card's body: the "Where it sits" tree in a panel on the left, the map
   on the right. The panel is as tall as the map and scrolls past that. */
.lpm-pop-body { display: flex; gap: 12px; align-items: stretch; }
.lpm-pop-main { position: relative; flex: 1 1 auto; min-width: 0; }
.lpm-pop-side {
    position: relative;
    flex: 0 0 210px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--white);
}
.lpm-pop-side-inner { position: absolute; inset: 0; overflow: auto; padding: 4px 6px 4px 4px; }
/* The place's name, top left of the card. */
.lpm-pop-title {
    margin: 0 0 10px;
    font: 700 19px/1.2 var(--font-display);
    color: var(--white);
}
.lpm-pop > .lpm-pop-title { margin: 2px 2px 10px; }
/* On a page with the card, "Where it sits" opens it; the tooltip stays for
   pages without one. */
.loc-where.opens-map .loc-where-btn { cursor: pointer; }
.loc-where.opens-map .loc-where-tip,
.loc-where.opens-map:hover .loc-where-tip,
.loc-where.opens-map:focus-within .loc-where-tip { display: none; }
.lpm-pop-close {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 4;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--surface-card);
    box-shadow: var(--shadow-sm);
    color: var(--white);
    font: 400 20px/1 var(--font-sans);
    cursor: pointer;
}
.lpm-pop-close:focus-visible { outline: 2px solid var(--eyebrow); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) {
    .lpm-pop, .lpm-enlarge, .lpm-enlarge-pre { transition: none; }
}
/* Phones: a taller map, so a city is not a thumbnail. */
@media (max-width: 640px) {
    .lpm-svg, .lpm-pop .lpm-svg { aspect-ratio: 4 / 3; }
    /* The tree goes under the map, at its own height. */
    .lpm-pop-body { flex-direction: column-reverse; }
    .lpm-pop-side { flex: 0 0 auto; }
    .lpm-pop-side-inner { position: static; padding: 2px 2px 0; }
}
/* Phones: the tooltip spans the screen inside its side margins. */
@media (max-width: 640px) {
    .loc-where-tip { position: fixed; left: 16px; right: 16px; top: auto; width: auto; margin-top: 8px; }
}

/* The map card wears the quarterly report card's surface (.qrc-card in
   css/entity-profile.css): the tray tint, its border, and the accent band
   along the top edge. */
.lpm-pop {
    padding: 20px 16px 12px;
    background: var(--surface-tray) linear-gradient(var(--eyebrow), var(--eyebrow)) 0 0 / 100% 4px no-repeat;
    border-color: var(--border-tray);
    color: var(--white);
}
.lpm-pop .lpm-pop-body { gap: 20px; }
.lpm-pop .lpm-pop-side { flex-basis: 250px; }
.lpm-pop .lpm-pop-side-inner { padding: 2px 8px 2px 4px; }
.lpm-pop .lpm-pop-title { margin-bottom: 14px; font-size: 22px; }
.lpm-pop .loc-where-row { margin: 0; }
.lpm-pop .loc-where-label {
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--eyebrow);
}
/* Tight lines with space between the nodes, so a name that wraps reads as
   one node and not as two. */
.lpm-pop .loc-tree { line-height: 1.3; }
.lpm-pop .loc-tree-node { padding-top: 5px; }
.lpm-pop .loc-tree-kids > .loc-tree-node::before { height: calc(5px + 0.65em); }
.lpm-pop .loc-tree a { color: var(--text-light); }
.lpm-pop .loc-tree a:hover { color: var(--blue); }
.lpm-pop .loc-tree-here { color: var(--white); }
.lpm-pop .lpm-live,
.lpm-pop .lpm-svg { border-color: var(--border-tray); }
.lpm-pop .lpm-svg { aspect-ratio: 16 / 9; }
.lpm-pop .lpm-caption { margin: 10px 4px 0; color: var(--text-light); }
/* A faint veil over the page while the card is open. */
.lpm-veil {
    position: fixed;
    inset: 0;
    z-index: 39;
    background: var(--white);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
}
.lpm-veil.is-open { opacity: .08; }
/* The whole small map opens the card: it grows a few px under the pointer. */
.hero-map.opens-map {
    cursor: pointer;
    transition: transform .18s cubic-bezier(.2, .7, .2, 1), box-shadow .18s ease;
}
@media (hover: hover) {
    .hero-map.opens-map:hover { transform: scale(1.025); box-shadow: var(--shadow-md); }
}
@media (prefers-reduced-motion: reduce) {
    .lpm-veil, .hero-map.opens-map { transition: none; }
}
@media (max-width: 640px) {
    .lpm-pop { padding: 16px 10px 10px; }
    .lpm-pop .lpm-svg { aspect-ratio: 4 / 3; }
}