/* Styles for the map plugin. Prefix every selector with .p-map */
.p-map-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; margin: 0 0 14px; }
.p-map-by { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.p-map-by > span, .p-map-zoom > span { font: 400 13px/1 var(--mono); color: var(--ink-2); }
.p-map-seg { display: flex; flex-wrap: wrap; gap: 4px; }
.p-map-seg button, .p-map-zoom button, .p-map .p-map-retry {
  font: 500 13px/1 var(--mono); color: var(--ink); background: var(--paper);
  border: 1px solid var(--ink); border-radius: 2px; padding: 9px 11px; cursor: pointer;
}
.p-map-seg button:hover, .p-map-zoom button:hover, .p-map .p-map-retry:hover { background: var(--wash); }
.p-map-seg button[aria-pressed="true"], .p-map-zoom button[aria-pressed="true"] { background: var(--mark); }
.p-map .p-map-retry { margin-left: 8px; }

.p-map-grid { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 20px 32px; align-items: start; }
.p-map-zoom { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0 0 8px; }
.p-map-zoom[hidden] { display: none; }
.p-map-zoom > span { margin-right: 6px; }

.p-map-stage { position: relative; width: 100%; max-height: 620px; min-height: 120px; }
.p-map-stage.geo { background: var(--paper); border: 1px solid var(--rule); overflow: hidden; }
.p-map-stage svg { display: block; width: 100%; height: 100%; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.p-map-stage.geo.zoomed svg { touch-action: none; cursor: grab; }
.p-map-stage.geo.dragging svg { cursor: grabbing; }
.p-map-stage .notice { margin: 0; }

.p-map-s { outline: none; cursor: pointer; }
.p-map-s path { fill: var(--oth); }
.p-map-stage.geo .p-map-s path { stroke: #fff; stroke-width: 0.75; stroke-linejoin: round; vector-effect: non-scaling-stroke; fill-rule: evenodd; }
.p-map-flip { fill: #fff; stroke: var(--ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; pointer-events: none; }
.p-map-hl, .p-map-hl2 { fill: none; pointer-events: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; fill-rule: evenodd; }
.p-map-hl2 { stroke: var(--mark); stroke-width: 7; }
.p-map-hl { stroke: var(--ink); stroke-width: 2.5; }
.p-map-state { font-family: var(--display); font-weight: 800; font-variation-settings: "wdth" 76; fill: var(--ink); pointer-events: none; }

.p-map-pm { position: absolute; top: 8px; right: 8px; display: flex; flex-direction: column; gap: 4px; }
.p-map-pm button {
  width: 36px; height: 36px; font: 500 20px/1 var(--mono); color: var(--ink); background: var(--paper);
  border: 2px solid var(--ink); border-radius: 2px; box-shadow: 3px 3px 0 var(--ink); cursor: pointer; padding: 0;
}
.p-map-pm button:hover { background: var(--mark); }

.p-map-side h3 { font-size: 16px; margin: 0 0 6px; }
.p-map-read { border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); padding: 12px 14px; margin: 0 4px 22px 0; min-height: 148px; }
.p-map-read h3 { font-size: 20px; margin: 0 0 4px; }
.p-map-read p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.45; }
.p-map-read .p-map-hint { color: var(--ink-2); margin: 0; }
.p-map-open { font-weight: 700; font-size: 15px; }
.p-map-key { list-style: none; margin: 0 0 10px; padding: 0; font-size: 14.5px; }
.p-map-key li { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-top: 1px solid var(--rule); }
.p-map-key li b { margin-left: auto; font: 500 14px/1 var(--mono); }
.p-map-key.tints { font-size: 13.5px; color: var(--ink-2); }
.p-map-key.tints li { border-top: 0; padding: 2px 0; }
.p-map-key .sw { border-radius: 2px; }
.p-map-key .p-map-dot { border-radius: 50%; background: #fff; border: 1.5px solid var(--ink); }
.p-map-note { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); margin: 0; }

@media (max-width: 820px) {
  .p-map-grid { grid-template-columns: minmax(0, 1fr); }
  .p-map-read { min-height: 0; }
  .p-map-stage { max-height: 78vh; }
}

.p-map-find { display: flex; flex-direction: column; gap: 5px; margin-left: auto; }
.p-map-find label { font: 400 13px/1 var(--mono); color: var(--ink-2); }
.p-map-find > span { display: flex; gap: 4px; }
.p-map-find input { font: 400 15px/1.2 var(--display); color: var(--ink); background: var(--paper); border: 1px solid var(--ink); border-radius: 2px; padding: 7px 9px; width: 190px; min-width: 0; }
.p-map-find button { font: 500 13px/1 var(--mono); color: var(--ink); background: var(--mark); border: 1px solid var(--ink); border-radius: 2px; padding: 9px 11px; cursor: pointer; }
.p-map-findmsg { margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--ink-2); max-width: 280px; }
.p-map-findmsg:empty { display: none; }
.p-map-lab { font-family: var(--display); font-weight: 700; font-variation-settings: "wdth" 76; fill: var(--ink); stroke: #fff; stroke-linejoin: round; paint-order: stroke; pointer-events: none; }
.p-map-lab.sel { font-weight: 800; }
.p-map-also { display: block; margin-top: 6px; font-size: 14px; }
.p-map-tipx { margin-top: 5px; padding-top: 5px; border-top: 1px solid var(--rule); }
@media (max-width: 820px) {
  .p-map-find { margin-left: 0; width: 100%; }
  .p-map-find input { flex: 1; width: auto; }
  .p-map-findmsg { max-width: none; }
}
.p-map-anchor { font-family: var(--mono); font-weight: 500; fill: var(--ink); stroke: #fff; stroke-linejoin: round; paint-order: stroke; pointer-events: none; }