/* The overview map of a destination page (PlaceMapSvg.razor, PlaceMapRenderer): paper, the trip
   maps' backdrop, the distance rings, the towns and places with their straight-line km, the
   pin and the China inset. Colours follow route-map.css. */

.pm-svg {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
}

.pm-paper {
    fill: #EFE9DC;
}

.pm-sea {
    fill: #CFE3EA;
}

.pm-high {
    stroke: #C9BEA8;
    stroke-width: .8;
    opacity: .85;
}

.pm-hatch {
    stroke: #CDC2AC;
    stroke-width: 1.1;
}

.pm-hatch-dense {
    stroke: #BFB197;
}

.pm-lake {
    fill: #CFE0EA;
    stroke: #A9C6D6;
    stroke-width: .8;
}

.pm-river {
    fill: none;
    stroke: #A9C6D6;
    stroke-width: 1.3;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.pm-peak {
    fill: none;
    stroke: #8D8471;
    stroke-width: 1.3;
    stroke-linejoin: round;
}

.pm-ring {
    fill: none;
    stroke: #CFC6B1;
    stroke-width: 1;
    stroke-dasharray: 3 4;
}

.pm-ring-label {
    font: 400 10px Roboto, Arial, sans-serif;
    fill: #8D8471;
}

.pm-town {
    fill: #3D3D3D;
}

.pm-dest {
    fill: #EFE9DC;
    stroke: #D20158;
    stroke-width: 2;
}

.pm-arrow {
    fill: #3D3D3D;
}

.pm-name {
    font: 500 12px 'Roboto Serif', Georgia, serif;
    fill: #191919;
}

/* The Chinese name after a place's English name, in a plain Chinese face. */
.pm-zh {
    font: 400 12px 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    fill: #555;
}

/* A destination's name links to its page: a little smaller than the towns, no underline until
   hovered (Florian, 4 November 2026). */
.pm-link-place {
    text-decoration: none;
}

.pm-link-place .pm-name {
    font-size: 11px;
    text-decoration: none;
    cursor: pointer;
}

.pm-link-place:hover .pm-name,
.pm-link-place:focus .pm-name {
    fill: #D20158;
    text-decoration: underline;
}

.pm-link-place:hover .pm-zh {
    fill: #D20158;
}

.pm-km {
    font: 400 10px Roboto, Arial, sans-serif;
    fill: #555;
}

.pm-place {
    font: 700 15px 'Roboto Serif', Georgia, serif;
    fill: #191919;
    paint-order: stroke;
    stroke: #EFE9DC;
    stroke-width: 3px;
    stroke-linejoin: round;
}

.pm-pin {
    fill: #D20158;
    stroke: #fff;
    stroke-width: 1.5;
}

.pm-pin-eye {
    fill: #fff;
}

.pm-note {
    font: 400 10px Roboto, Arial, sans-serif;
    fill: #555;
}

.pm-north {
    fill: #3D3D3D;
}

.pm-north text {
    font: 500 10px Roboto, Arial, sans-serif;
}

.pm-inset-bg {
    fill: #F7F3EA;
    stroke: #B9B09E;
    stroke-width: 4;
}

.pm-province {
    fill: #E8E2D3;
    stroke: #C9C0AA;
    stroke-width: 2;
}

.pm-province.is-current {
    fill: #D8CDB4;
}

.pm-inset-dot {
    fill: #D20158;
    stroke: #fff;
    stroke-width: 5;
}

.pm-province-name {
    font: 700 13px 'Roboto Serif', Georgia, serif;
    fill: #191919;
}

.pm-province-area {
    font: 400 10px Roboto, Arial, sans-serif;
    fill: #555;
}

/* The two links under the map, with the icons the trip page's map panel uses. */
.pm-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 12px 0 0;
}

.pm-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #191919;
    border-radius: 20px;
    padding: 6px 14px 6px 9px;
    font: 500 14px Roboto, system-ui, sans-serif;
    color: #191919;
    text-decoration: none;
    background: #fff;
    min-height: 36px;
    box-sizing: border-box;
}

.pm-link:hover {
    background: #F5F1E8;
}

.pm-link img {
    width: 20px;
    height: 20px;
    flex: none;
}

.pm-link-zh {
    font-weight: 400;
    color: #757575;
}

/* Two frames of the same map: the wide one on desktop, the narrow one on phones. */
.pm-phone {
    display: none;
}

@media (max-width: 600px) {
    .pm-wide {
        display: none;
    }

    .pm-phone {
        display: block;
    }

    .pm-links {
        display: grid;
        gap: 8px;
    }
}

/* "See the live map": a button with the other two, shown once the script runs; the live AMap map
   takes the drawn map's place and size (place-live-map.js). */
.pm-js-only {
    display: none;
}

.pm-stage {
    position: relative;
}

/* On the map, bottom right, like the trip page's "Open the live map". */
.pm-live-toggle {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 5;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: #191919;
    font: 500 13px Roboto, system-ui, sans-serif;
    box-shadow: 0 4px 12px rgba(43, 38, 34, .18);
}

.pm-figure.has-js .pm-js-only {
    display: inline-flex;
    cursor: pointer;
}

.pm-live-toggle:hover {
    color: #D20158;
}

.pm-live-toggle svg {
    flex: none;
}

.pm-figure.is-loading .pm-live-toggle {
    color: #757575;
}

.pm-live {
    width: 100%;
    aspect-ratio: 600 / 380;
    border-radius: 12px;
    overflow: hidden;
    background: #F3EEE4;
}

.pm-live[hidden] {
    display: none;
}

.pm-figure.is-live .pm-svg {
    display: none;
}

.pm-live-pin {
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    background: #D20158;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    margin-bottom: 6px;
}

.pm-live-town {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #191919;
    border: 2px solid #fff;
}

.pm-live-label {
    font: 500 13px Roboto, Arial, sans-serif;
    color: #191919;
}

.pm-live-label.is-town {
    font-weight: 400;
}

.pm-live .amap-marker-label {
    border: 0;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 4px;
    padding: 2px 6px;
}

@media (max-width: 600px) {
    .pm-live {
        aspect-ratio: 380 / 400;
    }

}

/* The OpenStreetMap credit in the drawn map's corner. */
.pm-osm:hover .pm-note {
    text-decoration: underline;
}