/* The drawn route map (docs/plans/trip-route-map.md): the SVG that RouteMapSvg.razor draws
   from TripMapRenderer, on the trip page and, with several trips at once, on the experience
   pages. The route colour is --tg-route: the pink by default (series 0), one colour per trip on
   a map of several (tg-map-series-N on every road, arrow, ring and airport of that trip). */

.tg-map-series-1 {
    --tg-route: #0B8F8D;
}

.tg-map-series-2 {
    --tg-route: #15559A;
}

.tg-map-series-3 {
    --tg-route: #B8771B;
}

.tg-map-river {
    fill: none;
    stroke: #9CC9D8;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .8;
}

.tg-map-lake {
    fill: #B9DCE6;
    stroke: none;
}

.tg-map-sea {
    fill: #CFE3EA;
    stroke: none;
}

.tg-map-high {
    stroke: none;
}

.tg-map-hatch {
    stroke: #DCD2BF;
    stroke-width: 1.1;
}

.tg-map-hatch-dense {
    stroke: #CDC0A6;
    stroke-width: 1.3;
}

.tg-map-peak {
    fill: none;
    stroke: #B8AD9A;
    stroke-width: 1.8;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.tg-map-arrow {
    fill: var(--tg-route, #D20158);
}

.tg-map-drive {
    fill: none;
    stroke: var(--tg-route, #D20158);
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1 8;
}

.tg-map-drive-guess {
    opacity: .5;
}

.tg-map-flight {
    fill: none;
    stroke: #15559A;
    stroke-width: 2;
    stroke-dasharray: 6 5;
}

.tg-map-ring {
    fill: #fff;
    stroke: var(--tg-route, #D20158);
    stroke-width: 3;
}

/* The ring's number (1, 2, 3... in trip order), inside the ring. */
.tg-map-ring-number {
    font-family: Roboto, Arial, sans-serif;
    font-size: 9px;
    font-weight: 700;
    fill: var(--tg-route, #D20158);
}

.tg-map-dot {
    fill: var(--tg-route, #D20158);
}

/* Airport or station where a drive ends: the route colour, like the rings. */
.tg-map-terminal circle {
    fill: #fff;
    stroke: var(--tg-route, #D20158);
    stroke-width: 2;
}

.tg-map-terminal path {
    fill: var(--tg-route, #D20158);
}

.tg-map-title {
    font-family: 'Roboto Serif', Georgia, serif;
    font-size: 13px;
    font-weight: 600;
    fill: #2B2622;
}

.tg-map-sub {
    font-family: Roboto, system-ui, sans-serif;
    font-size: 11px;
    fill: #6B625A;
}

.tg-map-compass {
    fill: #2B2622;
}

.tg-map-compass-south {
    fill: #B8AD9A;
}

.tg-map-compass text,
.tg-map-scale text {
    font-family: Roboto, system-ui, sans-serif;
    font-size: 10px;
    fill: #6B625A;
}

.tg-map-scale line {
    stroke: #2B2622;
    stroke-width: 2;
}

/* The historic roads behind the trips (AncientRoads): a faint sand-coloured dashed line, and a
   small label where one leaves the frame ("to Xi'an"). */
.tg-map-ancient {
    fill: none;
    stroke: #9E7B3C;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 7 5;
    opacity: .55;
}

.tg-map-landmark {
    fill: #fff;
    stroke: #9E7B3C;
    stroke-width: 2;
}

.tg-map-ancient-label {
    font-family: 'Roboto Serif', Georgia, serif;
    font-style: italic;
    font-size: 11px;
    fill: #7A6240;
}

/* ---- The experience page's map of its trips (ExperienceRouteMap.razor) ---- */

/* The section sits in the body's grid (.gd-body--solo, 718 px column, the guides' measure), so
   it is exactly as wide as the text; with the contents column it takes the text's column, like the article. */
/* The map sits inside the article column, between the first paragraph and the rest of the text,
   with no heading of its own (Florian, 22 October 2026). */
.ex-route-map {
    min-width: 0;
    margin: 4px 0 28px;
}

.ex-route-map-box {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    border-radius: 16px;
    background: #F6F1E7;
}

.ex-route-map-figure {
    position: relative;
    margin: 0;
    min-width: 0;
    border-radius: 10px;
    overflow: hidden;
    cursor: zoom-in;
}

/* The expand button in the corner of the map, and the full-screen dialog it opens (js/route-map.js):
   the drawing cloned in at a readable width, scrollable both ways, the page locked behind it. */
.ex-route-map-expand {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: #3D3D3D;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
    cursor: zoom-in;
}

.ex-route-map-full {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: #F6F1E7;
}

.ex-route-map-full::backdrop {
    background: rgba(0, 0, 0, .6);
}

.ex-route-map-full-scroll {
    position: absolute;
    inset: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
}

.ex-route-map-full-scroll .tg-route-svg {
    display: block;
    flex: none;
    width: max(100%, 900px);
    height: auto;
    margin: auto;
}

.ex-route-map-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .95);
    color: #3D3D3D;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .25);
    cursor: pointer;
}

html.ex-route-map-open {
    overflow: hidden;
}

.ex-route-map-figure .tg-route-svg {
    display: block;
    width: 100%;
    height: auto;
}

/* The trips as a row of cards under the map, each in its colour. */
.ex-route-map-trips {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ex-route-map-trips li {
    flex: 1 1 200px;
    min-width: 0;
}

.ex-route-map-trips a {
    display: flex;
    height: 100%;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 14px;
    border-radius: 10px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(31, 27, 24, .06);
}

.ex-route-map-trips a:hover .ex-route-map-name {
    text-decoration: underline;
}

.ex-route-map-swatch {
    flex: none;
    width: 14px;
    height: 14px;
    margin-top: 3px;
    border-radius: 50%;
    border: 3px solid var(--tg-route, #D20158);
    background: #fff;
}

.ex-route-map-trip {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ex-route-map-name {
    font-family: 'Roboto Serif', Georgia, serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: #1F1B18;
}

.ex-route-map-meta {
    font-size: 13px;
    color: #6B625A;
}

/* The legend and the note on one line under the trips. */
.ex-route-map-aside {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 24px;
}

.ex-route-map-legend {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    font-size: 13px;
    color: #3D3D3D;
}

.ex-route-map-legend li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ex-route-map-sample {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 18px;
}

.ex-route-map-ring {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 3px solid #D20158;
    background: #fff;
}

.ex-route-map-ancient {
    width: 26px;
    border-top: 2px dashed #9E7B3C;
}

.ex-route-map-note {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: #6B625A;
}

@media (max-width: 760px) {
    .ex-route-map-box {
        padding: 12px;
    }

    /* The map fits the width, no scrolling in the page: a tap opens it full screen, where the
       drawing is wide enough to read (Florian, 22 October 2026). */
    .ex-route-map-expand {
        width: 32px;
        height: 32px;
        right: 8px;
        bottom: 8px;
    }
}


/* The destination page's trip card (DestinationTripCard): the loop in ink, the stop of this
   place lit in pink with a halo, and the legs that touch it pink. */
.dt-map {
    --tg-route: #6B625A;
}

.dt-map .tg-map-drive {
    stroke-width: 3;
}

.dt-map .tg-map-lit {
    --tg-route: #D20158;
}

.tg-map-ring.tg-map-lit {
    fill: #D20158;
    stroke: #fff;
    stroke-width: 3;
}

.tg-map-halo {
    fill: #D20158;
    opacity: .16;
}

.tg-map-lit-title {
    fill: #D20158;
    font-weight: 700;
    paint-order: stroke;
    stroke: #F4EFE4;
    stroke-width: 3px;
    stroke-linejoin: round;
}