.desktop-vector-map,
.map-risk-scale { display: none; }

body.regions-page .regions-map-context { display: none; }

/* The overview's quiet caption sits above the box and belongs to the desktop
   card only.  It is hidden here so tablets and phones keep the exact card
   they render today; the min-width block below turns it back on. */
.regions-overview-caption { display: none; }

/* The vector map is also used on phones.  It must have a real layout box
   before MapLibre initializes; otherwise the JavaScript change alone creates
   a zero-sized, invisible canvas.  Keep the legacy SVG visible only as the
   brief loading fallback, then remove it once the vector map reports ready. */
@media (max-width: 760px) {
  .desktop-vector-map {
    display: block;
    position: relative;
    z-index: 2;
    width: 100%;
    height: 270px;
    flex: 0 0 270px;
    overflow: hidden;
    background: #02070c;
    touch-action: pan-x pan-y;
  }

  body.regions-page.has-vector-map .region-map-viewport,
  body.regions-page.has-vector-map .region-map-hint {
    display: none;
  }

  .desktop-vector-map .maplibregl-ctrl-top-right {
    top: 10px;
    right: 10px;
  }

  .desktop-vector-map .maplibregl-ctrl-bottom-right {
    right: 8px;
    bottom: 8px;
  }

  .desktop-vector-map .maplibregl-ctrl-group {
    overflow: hidden;
    border: 1px solid rgba(88, 139, 154, .32);
    border-radius: 4px;
    background: rgba(4, 12, 18, .84);
  }

  .desktop-vector-map .maplibregl-ctrl-group button {
    width: 34px;
    height: 34px;
  }

  /* Country labels stay available on the phone; sea labels remain hidden to
     keep the compact map readable.  The list below remains the source for
     risk scores and full regional details. */
  .desktop-vector-map .vector-water-label {
    display: none;
  }

  .desktop-vector-map .vector-country-label {
    display: block;
    pointer-events: none;
    color: rgba(126, 153, 160, .68);
    font: 600 9px/1.1 var(--sans);
    letter-spacing: -.02em;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(2, 7, 12, .94), 0 0 6px rgba(2, 7, 12, .78);
  }

  .desktop-vector-map .vector-risk-marker {
    position: relative;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .desktop-vector-map .vector-risk-marker::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 9px;
    height: 9px;
    border: 2px solid #071017;
    border-radius: 50%;
    background: var(--marker-color);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--marker-color), transparent 52%), 0 0 13px var(--marker-color);
    transform: translate(-50%, -50%);
  }

  .desktop-vector-map .vector-risk-marker__pulse {
    position: absolute;
    top: -13px;
    left: -13px;
    width: 26px;
    height: 26px;
    border: 1px solid color-mix(in srgb, var(--marker-color), transparent 48%);
    border-radius: 50%;
    animation: vectorRiskPulse 3.4s ease-out infinite;
  }

  .desktop-vector-map .vector-risk-marker__label {
    position: absolute;
    z-index: 3;
    bottom: 12px;
    left: 0;
    display: block;
    padding: 3px 5px;
    border: 1px solid color-mix(in srgb, var(--marker-color), transparent 62%);
    border-radius: 3px;
    background: rgba(4, 11, 17, .76);
    color: #deeaed;
    font: 740 10px/1.2 var(--sans);
    white-space: nowrap;
    transform: translateX(-50%);
    box-shadow: 0 2px 9px rgba(0, 0, 0, .26);
  }

  .desktop-vector-map .vector-risk-marker__label strong { font: inherit; }
  .desktop-vector-map .vector-risk-marker__label b { display: none; }
}

@media (min-width: 769px) {
  body.regions-page { overflow: hidden; background: #02070c; }
  body.regions-page > .ambient-grid { display: none; }
  body.regions-page .app-shell { position: relative; z-index: 1; width: 100%; max-width: none; min-height: 100dvh; margin: 0; }
  body.regions-page .topbar {
    position: relative;
    z-index: 30;
    width: min(100%, 1544px);
    margin: 0 auto;
    background: linear-gradient(180deg, rgba(2, 8, 13, .92), rgba(2, 8, 13, .64) 72%, transparent);
    backdrop-filter: blur(5px);
  }
  body.regions-page .topbar .system-status { display: none; }
  body.regions-page .topbar .utc-block { display: none; }
  body.regions-page .regions-main {
    position: fixed;
    z-index: 1;
    inset: 0;
    width: 100vw;
    max-width: none;
    height: 100dvh;
    margin: 0;
    padding: 0;
  }
  body.regions-page .regions-intro {
    display: none;
  }
  body.regions-page .regions-intro h1 { margin-top: 0; }
  body.regions-page .regions-live { pointer-events: auto; }
  body.regions-page .regions-workspace,
  body.regions-page .regional-map-panel { width: 100%; height: 100%; min-height: 0; }
  body.regions-page .regional-map-panel { border: 0; border-radius: 0; background: #02070c; }
  body.regions-page .region-map-viewport { position: absolute; inset: 0; min-height: 0; }

  .desktop-vector-map {
    display: block;
    position: absolute;
    z-index: 1;
    inset: 0;
    visibility: visible;
    opacity: 1;
    background: #02070c;
  }
  .conflict-link-layer {
    position: absolute;
    z-index: 7;
    inset: 0;
    overflow: visible;
    pointer-events: none;
  }
  .conflict-link-layer path {
    fill: none;
    stroke: var(--link-color);
    stroke-width: 1.25;
    stroke-linecap: round;
    opacity: .66;
    filter: drop-shadow(0 0 3px var(--link-color));
  }
  .conflict-link-layer path.is-revealing {
    stroke-dasharray: var(--link-length);
    stroke-dashoffset: var(--link-length);
    animation: conflictLinkReveal .48s cubic-bezier(.2, .74, .24, 1) forwards;
  }
  .conflict-link-layer .conflict-link-start {
    fill: #071119;
    stroke: var(--link-color);
    stroke-width: 1.8;
    opacity: .98;
    filter: drop-shadow(0 0 4px var(--link-color));
  }
  .conflict-link-layer .conflict-link-junction {
    fill: #071119;
    stroke: var(--link-color);
    stroke-width: 1.5;
    filter: drop-shadow(0 0 4px var(--link-color));
  }
  .conflict-link-layer .conflict-link-start.is-revealing {
    transform-box: fill-box;
    transform-origin: center;
    animation: conflictLinkStart .18s ease-out both;
  }
  @keyframes conflictLinkReveal { to { stroke-dashoffset: 0; } }
  @keyframes conflictLinkStart { from { opacity: 0; transform: scale(.25); } to { opacity: .98; transform: scale(1); } }
  body.regions-page .region-map-transform,
  body.regions-page .map-monitor-network,
  body.regions-page .map-toolbar { display: none; }
  .desktop-vector-map .maplibregl-canvas { outline: none; }
  .desktop-vector-map .maplibregl-ctrl-top-right {
    top: 150px;
    right: 26px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
  }
  .desktop-vector-map .maplibregl-ctrl-top-right .maplibregl-ctrl { margin: 0; }
  .desktop-vector-map .maplibregl-ctrl-bottom-right { right: 22px; bottom: 142px; }
  .desktop-vector-map .maplibregl-ctrl-group {
    overflow: hidden;
    border: 1px solid rgba(88, 139, 154, .36);
    border-radius: 4px;
    background: rgba(4, 12, 18, .84);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .25);
    backdrop-filter: blur(8px);
  }
  .desktop-vector-map .maplibregl-ctrl-group button { width: 38px; height: 38px; background-color: transparent; }
  .desktop-vector-map .maplibregl-ctrl-group button + button { border-top-color: rgba(88, 139, 154, .28); }
  .desktop-vector-map .maplibregl-ctrl-icon { filter: invert(84%) sepia(10%) saturate(548%) hue-rotate(145deg) brightness(89%); }
  .desktop-vector-map .vector-home-control button svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: #9eb4bb;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .desktop-vector-map .maplibregl-ctrl-attrib { color: #78909a; background: rgba(3, 10, 15, .76); }
  .desktop-vector-map .maplibregl-ctrl-attrib a { color: #83b9c1; }
  .desktop-vector-map .conflict-hover-popup {
    z-index: 18;
    max-width: min(340px, calc(100vw - 48px)) !important;
  }
  .desktop-vector-map .conflict-hover-popup .maplibregl-popup-content {
    overflow: hidden;
    padding: 9px 12px;
    border: 1px solid rgba(91, 145, 157, .38);
    border-radius: 4px;
    background: rgba(3, 11, 17, .94);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .38);
    color: #a9bcc1;
    backdrop-filter: blur(9px);
  }
  .desktop-vector-map .conflict-hover-popup .maplibregl-popup-tip { border-top-color: rgba(3, 11, 17, .94); }
  .desktop-vector-map .conflict-hover-popup__line {
    width: min(300px, calc(100vw - 72px));
    font: 560 12px/1.45 var(--sans);
  }
  .desktop-vector-map .conflict-hover-popup__heading {
    display: block;
    position: relative;
    min-height: 24px;
    padding-right: 86px;
    margin-bottom: 6px;
  }
  .desktop-vector-map .conflict-hover-popup__heading strong {
    color: #edf4f5;
    display: block;
    font-size: 17px;
    font-weight: 780;
    line-height: 1.18;
    letter-spacing: -.02em;
  }
  .desktop-vector-map .conflict-hover-popup__score {
    display: inline-flex;
    align-items: baseline;
    gap: 0;
    position: absolute;
    top: 1px;
    right: 0;
    margin: 0;
    white-space: nowrap;
  }
  .desktop-vector-map .conflict-hover-popup__score small {
    color: #78929a;
    margin-right: 4px;
    font: 650 10px/1 var(--sans);
    letter-spacing: .02em;
  }
  .desktop-vector-map .conflict-hover-popup__score b {
    color: var(--risk-color);
    font: 800 15px/1 var(--mono);
    letter-spacing: -.02em;
  }
  .desktop-vector-map .conflict-hover-popup__score i {
    color: #70868f;
    font: 650 10px/1 var(--mono);
    font-style: normal;
  }
  .desktop-vector-map .conflict-hover-popup__line span {
    display: block;
    margin-top: 2px;
    color: #a9bcc1;
  }

  .map-risk-scale {
    position: absolute;
    z-index: 14;
    right: auto;
    bottom: 28px;
    left: 50%;
    display: grid;
    grid-template-columns: auto minmax(200px, clamp(220px, 25vw, 340px));
    align-items: center;
    gap: 12px;
    width: min(calc(100vw - 330px), 444px);
    padding: 8px 11px 7px;
    border: 1px solid rgba(80, 127, 140, .25);
    border-radius: 5px;
    background: rgba(3, 10, 15, .72);
    box-shadow: 0 9px 24px rgba(0, 0, 0, .22);
    backdrop-filter: blur(7px);
    transform: translateX(-50%);
  }
  .map-risk-scale > strong {
    color: #8ca3aa;
    font: 680 10px/1 var(--sans);
    letter-spacing: .04em;
  }
  .map-risk-scale__body {
    position: relative;
    display: grid;
    grid-template-rows: 10px auto;
    gap: 6px;
    min-width: 0;
  }
  .map-risk-scale__bar {
    position: relative;
    width: 100%;
    height: 9px;
    border: 1px solid rgba(174, 202, 207, .22);
    border-radius: 999px;
    background: linear-gradient(to right, #45d1a3 0%, #dfc54a 30%, #ff9a3d 50%, #e7633f 70%, #ff4f58 85%, #ff1f42 100%);
    box-shadow: 0 0 12px rgba(255, 78, 60, .12);
  }
  .map-risk-scale__bar i {
    position: absolute;
    top: -4px;
    left: 50%;
    width: 1px;
    height: 17px;
    border-left: 1px solid #e9f1f2;
    transform: translateX(-50%);
    transition: left .5s ease;
  }
  .map-risk-scale__bar i::after {
    content: "";
    position: absolute;
    top: -1px;
    left: -3px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #eef5f5;
    box-shadow: 0 0 8px rgba(238, 245, 245, .65);
  }
  .map-risk-scale__bar i b {
    position: absolute;
    top: -22px;
    left: 50%;
    color: #edf4f5;
    font: 740 10px/1 var(--mono);
    text-shadow: 0 1px 3px #02070c;
    transform: translateX(-50%);
    white-space: nowrap;
  }
  .map-risk-scale__ticks {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    color: #718991;
    font: 620 9px/1 var(--mono);
  }

  .vector-country-label {
    pointer-events: none;
    color: rgba(119, 148, 156, .7);
    font: 600 11px/1.1 var(--sans);
    letter-spacing: -.02em;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(2, 7, 12, .92), 0 0 6px rgba(2, 7, 12, .78);
    opacity: .74;
  }
  .vector-water-label {
    pointer-events: none;
    color: rgba(74, 123, 138, .58);
    font: 560 10px/1.1 var(--sans);
    letter-spacing: .1em;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(2, 7, 12, .94), 0 0 7px rgba(2, 7, 12, .86);
  }
  .vector-water-label--ocean {
    color: rgba(69, 119, 135, .52);
    font-size: 11px;
    letter-spacing: .16em;
  }

  .vector-risk-marker {
    --marker-color: #ff8a35;
    position: relative;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-family: var(--sans);
  }
  .vector-risk-marker::before {
    content: "";
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    width: 11px;
    height: 11px;
    border: 2px solid #071017;
    border-radius: 50%;
    background: var(--marker-color);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--marker-color), transparent 42%), 0 0 17px var(--marker-color);
    transform: translate(-50%, -50%);
  }
  .vector-risk-marker__pulse {
    position: absolute;
    z-index: 2;
    top: -17px;
    left: -17px;
    width: 34px;
    height: 34px;
    border: 1px solid color-mix(in srgb, var(--marker-color), transparent 52%);
    border-radius: 50%;
    animation: vectorRiskPulse 3.4s ease-out infinite;
  }
  .vector-risk-marker__label {
    position: absolute;
    z-index: 4;
    left: 0;
    bottom: 18px;
    display: grid;
    width: max-content;
    min-width: 72px;
    padding: 7px 9px 6px;
    border: 1px solid color-mix(in srgb, var(--marker-color), transparent 46%);
    border-radius: 4px;
    background: rgba(4, 11, 17, .88);
    box-shadow: 0 7px 18px rgba(0, 0, 0, .3);
    color: #e4edef;
    text-align: left;
    transform: translateX(-50%);
    backdrop-filter: blur(6px);
  }
  .vector-risk-marker__label strong { font-size: 11px; font-weight: 760; line-height: 1.2; white-space: nowrap; }
  .vector-risk-marker__label b { margin-top: 3px; color: var(--marker-color); font: 800 18px/1 var(--mono); }
  .vector-risk-marker:hover,
  .vector-risk-marker:focus-visible,
  .vector-risk-marker.is-selected { z-index: 20; outline: none; }
  .vector-risk-marker:hover .vector-risk-marker__label,
  .vector-risk-marker:focus-visible .vector-risk-marker__label,
  .vector-risk-marker.is-selected .vector-risk-marker__label { border-color: var(--marker-color); background: rgba(6, 14, 21, .96); }

  body.regions-page .regions-overview {
    z-index: 8;
    top: clamp(170px, 26vh, 500px);
    right: auto;
    bottom: auto;
    left: clamp(350px, 35.8vw, 1375px);
    width: 300px;
    max-height: calc(100dvh - 224px);
    margin: 0;
    overflow: auto;
    border: 1px solid rgba(176, 198, 208, .62);
    border-radius: 7px;
    background: linear-gradient(180deg, rgba(21, 26, 32, .92), rgba(9, 13, 18, .95));
    box-shadow: 0 12px 30px rgba(0, 0, 0, .2);
    backdrop-filter: blur(7px);
    cursor: grab;
    scrollbar-width: thin;
    scrollbar-color: rgba(84, 135, 148, .38) transparent;
  }
  body.regions-page .regions-overview-caption {
    position: absolute;
    z-index: 1;
    top: -21px;
    left: 15px;
    display: block;
    margin: 0;
    color: rgba(176, 198, 208, .55);
    font: 600 10px/1.3 var(--sans);
    letter-spacing: .12em;
    white-space: nowrap;
    pointer-events: none;
  }
  body.regions-page .regions-map-context {
    position: absolute;
    z-index: 8;
    top: 98px;
    left: clamp(350px, 35.8vw, 1375px);
    display: block;
    width: min(340px, calc(100vw - 390px));
    pointer-events: none;
  }
  body.regions-page .regions-map-context strong {
    display: block;
    color: #c9dcdf;
    font: 720 12px/1.2 var(--sans);
  }
  body.regions-page .regions-map-context strong::before {
    display: inline-block;
    width: 5px;
    height: 5px;
    margin: 0 7px 1px 0;
    border-radius: 50%;
    background: #4ccfd0;
    box-shadow: 0 0 8px rgba(76, 207, 208, .52);
    content: "";
  }
  body.regions-page .regions-map-context p {
    margin: 5px 0 0;
    color: #8da3aa;
    font: 500 11px/1.5 var(--sans);
    white-space: nowrap;
    letter-spacing: -.01em;
  }
  body.regions-page .regions-overview .regions-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  body.regions-page .regions-overview .region-overview-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name score" "driver score" "status score" "summary summary";
    column-gap: 14px;
    min-height: 0;
    padding: 11px 15px;
    border: 0;
    border-radius: 0;
    background: transparent;
    cursor: grab;
    box-shadow: none;
    transform: none;
  }
  body.regions-page .regions-overview .region-overview-card + .region-overview-card {
    border-top: 1px solid rgba(105, 146, 158, .16);
    border-left: 0;
  }
  body.regions-page .regions-overview .region-overview-card:hover,
  body.regions-page .regions-overview .region-overview-card:focus-visible {
    border-color: rgba(105, 146, 158, .16);
    background: rgba(77, 128, 141, .08);
    outline: none;
  }
  body.regions-page .regions-overview .region-card header {
    display: block;
    grid-area: name;
    min-width: 0;
    min-height: 0;
  }
  body.regions-page .regions-overview .region-card .region-icon,
  body.regions-page .regions-overview .region-card .region-direction,
  body.regions-page .regions-overview .region-card .risk-bar,
  body.regions-page .regions-overview .region-card .region-change { display: none; }
  body.regions-page .regions-overview .region-card .region-name {
    margin: 0;
    overflow: hidden;
    color: #eef4f5;
    font-size: 16px;
    font-weight: 740;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body.regions-page .regions-overview .region-overview-card[data-region="nuclear"] .region-name {
    display: inline-flex;
    align-items: center;
  }
  body.regions-page .regions-overview .region-overview-card[data-region="nuclear"] .region-name::before {
    content: "☢";
    display: inline-block;
    margin: 0 8px 0 0;
    color: #ff595f;
    font: 700 19px/1 Arial, sans-serif;
    text-shadow: 0 0 8px rgba(255, 54, 68, .82), 0 0 15px rgba(222, 50, 69, .28);
  }
  body.regions-page .regions-overview .region-card .region-driver {
    grid-area: driver;
    min-width: 0;
    margin: 2px 0 0;
    overflow: hidden;
    color: #9db1b8;
    font-size: 13px;
    font-weight: 580;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body.regions-page .regions-overview .region-card .region-summary {
    grid-area: summary;
    min-width: 0;
    margin: 3px 0 0;
    overflow: hidden;
    color: #bccacf;
    font: 500 13px/1.3 var(--sans);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body.regions-page .regions-overview .region-card .region-status-row {
    grid-area: status;
    display: block;
    margin-top: 3px;
  }
  body.regions-page .regions-overview .region-card .region-level {
    color: var(--risk-color);
    font: 680 12px/1.2 var(--sans);
  }
  body.regions-page .regions-overview .region-card .region-score-row {
    grid-area: score;
    align-self: center;
    margin: 0;
  }
  body.regions-page .regions-overview .region-card .region-score {
    color: var(--risk-color);
    font-size: 30px;
    font-weight: 740;
    letter-spacing: -.02em;
  }
  body.regions-page .regions-overview .region-card .region-score-row > span { display: none; }
  body.regions-page .region-detail-panel {
    width: min(860px, calc(100vw - 72px));
    max-height: min(660px, calc(100vh - 64px));
    padding: 26px 28px 24px;
  }
  body.regions-page .region-detail-panel #regionDetailContent {
    max-height: calc(min(660px, 100vh - 64px) - 50px);
  }
  body.regions-page .region-detail-panel .detail-kicker { display: none; }
  body.regions-page .region-detail-panel #regionDetailContent > .detail-popup { display: block; }
  body.regions-page .region-detail-panel .detail-popup__header {
    padding-bottom: 17px;
    border-bottom: 1px solid rgba(105, 146, 158, .28);
  }
  body.regions-page .region-detail-panel .detail-popup__header .detail-title-row { margin-top: 0; }
  body.regions-page .region-detail-panel .detail-popup__body {
    display: grid;
    grid-template-columns: minmax(250px, 1.1fr) minmax(255px, .9fr);
    column-gap: 26px;
    padding-top: 19px;
    align-items: start;
  }
  body.regions-page .region-detail-panel .detail-section--situation {
    margin: 0;
    padding: 0;
    border: 0;
  }
  body.regions-page .region-detail-panel .detail-section--situation h3 { margin-bottom: 11px; }
  body.regions-page .region-detail-panel .detail-popup__aside {
    display: grid;
    gap: 0;
  }
  body.regions-page .region-detail-panel .detail-popup__aside .detail-section {
    grid-column: auto;
    margin: 0;
    padding: 0 0 14px;
  }
  body.regions-page .region-detail-panel .detail-popup__aside .detail-section + .detail-section {
    padding-top: 13px;
    border-top: 1px solid rgba(105, 146, 158, .16);
  }
  body.regions-page .site-footer { display: none; }
  .regional-map-panel:fullscreen,
  .regional-map-panel:-webkit-full-screen { width: 100vw; height: 100vh; background: #02070c; }

  /* The overview is collapsed by default: regions.js pins .regions-clip to one
     card's height and slides the stack so every region takes a turn.  The box
     itself stops clipping so .overview-toggle can hang below its lower edge;
     .regions-clip does all the clipping and holds the expanded list to the
     room left under the box (the box top is the same clamp used above). */
  body.regions-page .regions-overview {
    overflow: visible;
    max-height: calc(100dvh - clamp(170px, 26vh, 500px) - 26px);
  }
  body.regions-page .regions-overview .regions-clip {
    overflow: hidden;
    max-height: calc(100dvh - clamp(170px, 26vh, 500px) - 28px);
    border-radius: 6px;
    transition: height .3s ease;
  }
  body.regions-page .regions-overview.is-expanded .regions-clip {
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(84, 135, 148, .38) transparent;
  }
  body.regions-page .regions-overview .regions-grid {
    transition: transform .4s ease;
  }
  body.regions-page .regions-overview.is-expanded .regions-grid {
    transition: none;
  }
  /* The toggle is a notch let into the card's lower edge rather than a pill
     hanging under it.  Its top starts on the card's own bottom border, and the
     SVG fill (which is the card's background colour) paints over that border
     across the notch, so the outline dips down instead of running straight
     through it.  Only the two slants and the base are stroked. */
  body.regions-page .overview-toggle {
    position: absolute;
    z-index: 3;
    top: 100%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 56px;
    height: 18px;
    margin-top: 0;
    padding: 0;
    transform: translateX(-50%);
    border: 0;
    background: none;
    color: #9fd0d8;
    font: 700 12px/1 var(--mono);
    cursor: pointer;
  }
  body.regions-page .overview-toggle svg {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
  }
  body.regions-page .overview-toggle .overview-toggle__fill {
    fill: rgba(9, 13, 18, .95);
    transition: fill .16s ease;
  }
  body.regions-page .overview-toggle .overview-toggle__line {
    fill: none;
    stroke: rgba(176, 198, 208, .62);
    stroke-width: 1.5;
    stroke-linejoin: round;
    transition: stroke .16s ease;
  }
  body.regions-page .overview-toggle:hover,
  body.regions-page .overview-toggle:focus-visible {
    color: #4ccfd0;
    outline: none;
  }
  body.regions-page .overview-toggle:hover .overview-toggle__fill,
  body.regions-page .overview-toggle:focus-visible .overview-toggle__fill {
    fill: rgba(13, 28, 36, .97);
  }
  body.regions-page .overview-toggle:hover .overview-toggle__line,
  body.regions-page .overview-toggle:focus-visible .overview-toggle__line {
    stroke: rgba(76, 207, 208, .85);
  }
  body.regions-page .overview-toggle i {
    position: relative;
    z-index: 1;
    display: block;
    font-style: normal;
    transform: translateY(0);
    transition: transform .24s ease;
  }
  body.regions-page .regions-overview.is-expanded .overview-toggle i {
    transform: rotate(180deg) translateY(0);
  }
  body.regions-page .regions-overview.is-dragging,
  body.regions-page .regions-overview.is-dragging .region-overview-card {
    cursor: grabbing;
  }
  body.regions-page .regions-overview.is-dragging .regions-grid {
    transition: none;
  }
}

@keyframes vectorRiskPulse {
  0%, 52% { opacity: .56; transform: scale(.55); }
  100% { opacity: 0; transform: scale(1.9); }
}

/* ── Phone (max-width: 760px) ──────────────────────────────────────────────
   The phone page renders the very same vector map the desktop page uses and
   nothing else: the page title and copy stay, while the legacy SVG map, its
   instruction bar, the region rank list, the map toolbar and the region detail
   sheet are retired.  The desktop-only overlays (risk scale, overview card,
   context copy) are deliberately not brought across — they are still hidden
   by the base rules above.  The 761–768px band is left exactly as it is today,
   which is the same band regions-maplibre.js skips, so that range keeps the
   legacy SVG map. ───────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  /* Let the map occupy every pixel left below the page title: the shell, the
     main column and the workspace all stretch, so the panel has a real box to
     measure against without a hard-coded viewport offset. */
  body.regions-page .app-shell {
    display: flex;
    min-height: calc(100dvh - var(--mobile-nav-height, 70px) - env(safe-area-inset-bottom) - 12px);
    flex-direction: column;
  }
  body.regions-page .regions-main {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
  }
  body.regions-page .regions-intro { flex: 0 0 auto; }
  body.regions-page .regions-workspace {
    display: flex;
    flex: 1 1 auto;
    min-height: 340px;
    flex-direction: column;
  }
  body.regions-page .regional-map-panel { flex: 1 1 auto; min-height: 340px; }

  /* Retired on the phone: legacy SVG map, drag hint, toolbar, the
     overview card and the global indicator chips.  The existing region list
     and its detail sheet remain available below the vector map. */
  body.regions-page .region-map-viewport,
  body.regions-page .region-map-hint,
  body.regions-page .map-toolbar,
  body.regions-page .regions-overview,
  body.regions-page .global-risk-indicators { display: none; }

  .desktop-vector-map {
    display: block;
    position: absolute;
    z-index: 1;
    inset: 0;
    visibility: visible;
    opacity: 1;
    background: #02070c;
  }
  .conflict-link-layer {
    position: absolute;
    z-index: 7;
    inset: 0;
    overflow: visible;
    pointer-events: none;
  }
  .conflict-link-layer path {
    fill: none;
    stroke: var(--link-color);
    stroke-width: 1.25;
    stroke-linecap: round;
    opacity: .66;
    filter: drop-shadow(0 0 3px var(--link-color));
  }
  .conflict-link-layer .conflict-link-start {
    fill: #071119;
    stroke: var(--link-color);
    stroke-width: 1.8;
    opacity: .98;
    filter: drop-shadow(0 0 4px var(--link-color));
  }
  .conflict-link-layer .conflict-link-junction {
    fill: #071119;
    stroke: var(--link-color);
    stroke-width: 1.5;
    filter: drop-shadow(0 0 4px var(--link-color));
  }
  .desktop-vector-map .maplibregl-canvas { outline: none; }
  .desktop-vector-map .maplibregl-ctrl-top-right {
    top: 10px;
    right: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
  }
  .desktop-vector-map .maplibregl-ctrl-top-right .maplibregl-ctrl { margin: 0; }
  .desktop-vector-map .maplibregl-ctrl-bottom-right { right: 6px; bottom: 6px; }
  .desktop-vector-map .maplibregl-ctrl-group {
    overflow: hidden;
    border: 1px solid rgba(88, 139, 154, .36);
    border-radius: 4px;
    background: rgba(4, 12, 18, .84);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .25);
    backdrop-filter: blur(8px);
  }
  .desktop-vector-map .maplibregl-ctrl-group button { width: 38px; height: 38px; background-color: transparent; }
  .desktop-vector-map .maplibregl-ctrl-group button + button { border-top-color: rgba(88, 139, 154, .28); }
  .desktop-vector-map .maplibregl-ctrl-icon { filter: invert(84%) sepia(10%) saturate(548%) hue-rotate(145deg) brightness(89%); }
  .desktop-vector-map .vector-home-control button svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: #9eb4bb;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .desktop-vector-map .maplibregl-ctrl-attrib { color: #78909a; background: rgba(3, 10, 15, .76); }
  .desktop-vector-map .maplibregl-ctrl-attrib a { color: #83b9c1; }
  .desktop-vector-map .conflict-hover-popup {
    z-index: 18;
    max-width: min(340px, calc(100vw - 48px)) !important;
  }
  .desktop-vector-map .conflict-hover-popup .maplibregl-popup-content {
    overflow: hidden;
    padding: 9px 12px;
    border: 1px solid rgba(91, 145, 157, .38);
    border-radius: 4px;
    background: rgba(3, 11, 17, .94);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .38);
    color: #a9bcc1;
    backdrop-filter: blur(9px);
  }
  .desktop-vector-map .conflict-hover-popup .maplibregl-popup-tip { border-top-color: rgba(3, 11, 17, .94); }
  .desktop-vector-map .conflict-hover-popup__line {
    width: min(300px, calc(100vw - 72px));
    font: 560 12px/1.45 var(--sans);
  }
  .desktop-vector-map .conflict-hover-popup__heading {
    display: block;
    position: relative;
    min-height: 24px;
    padding-right: 86px;
    margin-bottom: 6px;
  }
  .desktop-vector-map .conflict-hover-popup__heading strong {
    color: #edf4f5;
    display: block;
    font-size: 17px;
    font-weight: 780;
    line-height: 1.18;
    letter-spacing: -.02em;
  }
  .desktop-vector-map .conflict-hover-popup__score {
    display: inline-flex;
    align-items: baseline;
    gap: 0;
    position: absolute;
    top: 1px;
    right: 0;
    margin: 0;
    white-space: nowrap;
  }
  .desktop-vector-map .conflict-hover-popup__score small {
    color: #78929a;
    margin-right: 4px;
    font: 650 10px/1 var(--sans);
    letter-spacing: .02em;
  }
  .desktop-vector-map .conflict-hover-popup__score b {
    color: var(--risk-color);
    font: 800 15px/1 var(--mono);
    letter-spacing: -.02em;
  }
  .desktop-vector-map .conflict-hover-popup__score i {
    color: #70868f;
    font: 650 10px/1 var(--mono);
    font-style: normal;
  }
  .desktop-vector-map .conflict-hover-popup__line span {
    display: block;
    margin-top: 2px;
    color: #a9bcc1;
  }

  .vector-country-label {
    pointer-events: none;
    color: rgba(119, 148, 156, .7);
    font: 600 11px/1.1 var(--sans);
    letter-spacing: -.02em;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(2, 7, 12, .92), 0 0 6px rgba(2, 7, 12, .78);
    opacity: .74;
  }
  .vector-water-label {
    pointer-events: none;
    color: rgba(74, 123, 138, .58);
    font: 560 10px/1.1 var(--sans);
    letter-spacing: .1em;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(2, 7, 12, .94), 0 0 7px rgba(2, 7, 12, .86);
  }
  .vector-water-label--ocean {
    color: rgba(69, 119, 135, .52);
    font-size: 11px;
    letter-spacing: .16em;
  }

  .vector-risk-marker {
    --marker-color: #ff8a35;
    position: relative;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-family: var(--sans);
  }
  .vector-risk-marker::before {
    content: "";
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    width: 11px;
    height: 11px;
    border: 2px solid #071017;
    border-radius: 50%;
    background: var(--marker-color);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--marker-color), transparent 42%), 0 0 17px var(--marker-color);
    transform: translate(-50%, -50%);
  }
  .vector-risk-marker__pulse {
    position: absolute;
    z-index: 2;
    top: -17px;
    left: -17px;
    width: 34px;
    height: 34px;
    border: 1px solid color-mix(in srgb, var(--marker-color), transparent 52%);
    border-radius: 50%;
    animation: vectorRiskPulse 3.4s ease-out infinite;
  }
  .vector-risk-marker__label {
    position: absolute;
    z-index: 4;
    left: 0;
    bottom: 18px;
    display: grid;
    width: max-content;
    min-width: 72px;
    padding: 7px 9px 6px;
    border: 1px solid color-mix(in srgb, var(--marker-color), transparent 46%);
    border-radius: 4px;
    background: rgba(4, 11, 17, .88);
    box-shadow: 0 7px 18px rgba(0, 0, 0, .3);
    color: #e4edef;
    text-align: left;
    transform: translateX(-50%);
    backdrop-filter: blur(6px);
  }
  .vector-risk-marker__label strong { font-size: 11px; font-weight: 760; line-height: 1.2; white-space: nowrap; }
  .vector-risk-marker__label b { margin-top: 3px; color: var(--marker-color); font: 800 18px/1 var(--mono); }
  .vector-risk-marker:hover,
  .vector-risk-marker:focus-visible,
  .vector-risk-marker.is-selected { z-index: 20; outline: none; }
  .vector-risk-marker:hover .vector-risk-marker__label,
  .vector-risk-marker:focus-visible .vector-risk-marker__label,
  .vector-risk-marker.is-selected .vector-risk-marker__label { border-color: var(--marker-color); background: rgba(6, 14, 21, .96); }

  .regional-map-panel:fullscreen,
  .regional-map-panel:-webkit-full-screen { width: 100vw; height: 100vh; background: #02070c; }
}

/* Keep the established ranked-region list directly beneath the mobile vector
   map.  The vector canvas replaces only the legacy map viewport, not the
   list that visitors use to open each region's details. */
@media (max-width: 760px) {
  body.regions-page .regional-map-panel {
    display: flex;
    flex: 0 0 auto;
    min-height: 0;
  }

  body.regions-page .desktop-vector-map {
    position: relative;
    z-index: 2;
    inset: auto;
    width: 100%;
    height: 270px;
    flex: 0 0 270px;
  }

  body.regions-page .mobile-region-list {
    position: static;
    z-index: 3;
    display: grid !important;
    width: 100%;
    min-height: 0;
    margin: 0;
  }
}

/* Fullscreen on a phone turns the map panel into a full-viewport map-only view,
   held upright (the screen is locked to portrait for it). The compact list is
   intentionally hidden for this mode; its region names move onto the
   corresponding map markers instead. */
@media (max-width: 760px) {
  body.regions-page .regional-map-panel:fullscreen,
  body.regions-page .regional-map-panel:-webkit-full-screen,
  body.regions-page .regional-map-panel.maplibregl-pseudo-fullscreen {
    width: 100vw;
    height: 100vh;
    min-height: 100vh;
    background: #02070c;
  }

  body.regions-page .regional-map-panel:fullscreen .desktop-vector-map,
  body.regions-page .regional-map-panel:-webkit-full-screen .desktop-vector-map,
  body.regions-page .regional-map-panel.maplibregl-pseudo-fullscreen .desktop-vector-map {
    height: 100%;
    flex: 1 1 auto;
  }

  body.regions-page .regional-map-panel:fullscreen .mobile-region-list,
  body.regions-page .regional-map-panel:-webkit-full-screen .mobile-region-list,
  body.regions-page .regional-map-panel.maplibregl-pseudo-fullscreen .mobile-region-list {
    display: none !important;
  }

  body.regions-page .regional-map-panel:fullscreen .vector-risk-marker__label,
  body.regions-page .regional-map-panel:-webkit-full-screen .vector-risk-marker__label,
  body.regions-page .regional-map-panel.maplibregl-pseudo-fullscreen .vector-risk-marker__label {
    bottom: 17px;
    padding: 5px 7px;
    border-color: color-mix(in srgb, var(--marker-color), transparent 44%);
    background: rgba(3, 10, 16, .88);
    font-size: 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .38);
  }

  body.regions-page .regional-map-panel:fullscreen .vector-country-label,
  body.regions-page .regional-map-panel:-webkit-full-screen .vector-country-label,
  body.regions-page .regional-map-panel.maplibregl-pseudo-fullscreen .vector-country-label {
    color: rgba(139, 166, 173, .76);
    font-size: 11px;
  }
}