/* map page, colours come from :root in terminal.css so the display settings (contrast, colour blind) work here too */
/* wider than the other pages so the map is big enough to click small nations */
.terminal-content.map-page { --measure: 1240px; }
.map-frame {
    position: relative;
    margin: 20px 0 10px;
    border: 1px solid var(--border);
    border-top: 3px solid var(--orange-dark);
    background: var(--bg);
    box-shadow: inset 0 0 30px rgba(0,0,0,.25);
    overflow: hidden;
}
.map-loading { margin: 0; padding: 60px 20px; text-align: center; color: var(--muted); letter-spacing: 1px; }

/* the map is an svg drawn by map.js. when it is zoomed in a finger drags the map, otherwise it still scrolls the page */
#map-svg { display: block; width: 100%; height: auto; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.map-frame.zoomed #map-svg { touch-action: none; }
.map-frame.dragging #map-svg { cursor: grabbing; }

.map-sea { fill: var(--bg); }
.map-background, .map-nation {
    fill: var(--panel-light);
    fill: color-mix(in srgb, var(--orange-dark) 40%, var(--panel));
    stroke: var(--orange-dark);
    stroke-width: 1;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    fill-rule: evenodd;
}
.map-background { pointer-events: none; opacity: .6; }
.map-nation { cursor: pointer; }
/* a dashed outline on top of the colour, so the home nation is not marked by colour alone */
.map-nation.home { stroke: var(--orange-bright); stroke-dasharray: 5 3; }

/* a nation with no record is faded and drawn with a dotted outline, still clickable */
.map-nation.lost { fill: var(--panel); stroke: var(--border); stroke-dasharray: 2 3; }

/* the highlight is a copy of the nation's outline drawn on top, so its border is never covered by a neighbour */
.map-hover, .map-selected { fill-rule: evenodd; pointer-events: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.map-hover { fill: var(--orange); fill-opacity: .35; stroke: var(--orange-bright); stroke-width: 2; }
.map-selected { fill: var(--orange); fill-opacity: .18; stroke: var(--text); stroke-width: 3; }

.map-tools { position: absolute; top: 10px; left: 10px; z-index: 2; display: flex; flex-direction: column; gap: 6px; }
.map-tool {
    width: 34px; height: 34px; padding: 0;
    border: 1px solid var(--border); background: var(--panel); color: var(--text);
    font: inherit; font-size: 18px; line-height: 1; cursor: pointer;
}
.map-tool:hover:not(:disabled) { border-color: var(--orange); color: var(--orange-bright); }
.map-tool:disabled { opacity: .35; cursor: not-allowed; }
.map-tool:focus-visible { outline: 2px solid var(--orange-bright); outline-offset: 2px; }
.map-tool-reset { font-size: 15px; }
.map-frame.file-left .map-tools { left: auto; right: 10px; }

.map-tip {
    position: absolute; z-index: 3; pointer-events: none; white-space: nowrap;
    padding: 4px 8px; border: 1px solid var(--orange-dark); background: var(--panel);
    color: var(--text); font-size: 11px; letter-spacing: 1px;
}

/* the nation file that opens when a nation is clicked */
.map-popup {
    position: absolute; top: 12px; right: 12px; z-index: 4;
    width: min(330px, calc(100% - 70px)); max-height: calc(100% - 24px); overflow-y: auto;
    padding: 16px 18px;
    border: 1px solid var(--orange-dark); border-top: 3px solid var(--orange);
    background: var(--panel);
    box-shadow: 0 12px 40px rgba(0,0,0,.6), inset 0 0 30px rgba(0,0,0,.25);
    text-align: left;
}
.map-popup.left { right: auto; left: 12px; }
.map-popup:focus { outline: 0; }
.map-popup-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.map-popup-tag { margin: 0 0 4px; color: var(--orange); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; }
.map-popup h2 { margin: 0; color: var(--text); font-size: 17px; letter-spacing: 1px; overflow-wrap: anywhere; }
/* the arrows button moves the file to the other side of the map */
.map-popup-buttons { display: flex; flex-shrink: 0; gap: 6px; }
.map-popup-close, .map-popup-side {
    flex-shrink: 0; width: 30px; height: 30px; padding: 0;
    border: 1px solid var(--border); background: transparent; color: var(--text);
    font: inherit; font-size: 16px; line-height: 1; cursor: pointer;
}
.map-popup-close:hover, .map-popup-side:hover { border-color: var(--orange); color: var(--orange-bright); }
.map-popup-close:focus-visible, .map-popup-side:focus-visible { outline: 2px solid var(--orange-bright); outline-offset: 2px; }
.map-facts { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 14px 0 0; font-size: 12px; }
.map-facts dt { color: var(--muted); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; padding-top: 2px; }
.map-facts dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.map-popup-lost { color: var(--muted); }
.map-popup-note { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--border); font-size: 12px; line-height: 1.7; white-space: pre-wrap; }
.map-popup h3 { margin: 14px 0 8px; padding-top: 12px; border-top: 1px solid var(--border); color: var(--muted); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; }
.map-neighbours { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }

.map-help { margin: 0 0 24px; color: var(--muted); font-size: 11px; letter-spacing: .5px; line-height: 1.6; }

/* the index is also how a keyboard or screen reader reaches every nation */
.map-search {
    display: block; width: 100%; max-width: 360px; padding: 10px 12px;
    border: 1px solid var(--border); background: var(--bg); color: var(--text);
    font: inherit; font-size: 12px; letter-spacing: 1px;
}
.map-search:focus { outline: 0; border-color: var(--orange); box-shadow: 0 0 15px rgba(182,90,56,.15); }
.map-count { margin: 10px 0 0; color: var(--muted); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; }
.nation-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.nation-link {
    display: block; width: 100%; padding: 8px 10px; text-align: left;
    border: 1px solid var(--border); border-left: 3px solid var(--border); background: var(--bg); color: var(--text);
    font: inherit; font-size: 12px; letter-spacing: .5px; cursor: pointer; overflow-wrap: anywhere;
}
.nation-link:hover, .nation-link:focus-visible { border-color: var(--orange); }
.nation-link:focus-visible { outline: 2px solid var(--orange-bright); outline-offset: 2px; }
.nation-link[aria-current="true"] { border-left-color: var(--orange-bright); color: var(--orange-bright); font-weight: bold; }
.nation-link.lost { color: var(--muted); border-left-style: dotted; }
.nation-link .home-mark { color: var(--muted); font-weight: normal; }
.map-neighbours .nation-link { width: auto; padding: 5px 8px; font-size: 11px; }

/* on a phone the file slides up from the bottom of the screen instead of covering the map */
@media (max-width: 700px) {
    .map-popup, .map-popup.left { position: fixed; top: auto; left: 10px; right: 10px; bottom: 10px; width: auto; max-height: 60vh; }
    .map-popup-side { display: none; }
    .map-frame.file-left .map-tools { left: 10px; right: auto; }
}