/* Shared chrome for every 3D map page (national, targets, inventory).
   One copy, three consumers — a fork here is three diverging maps. */
:root { color-scheme: dark; }
* { margin: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  background: #0b0e13;
  color: #e8e6e1;
  font-family: Inter, system-ui, -apple-system, sans-serif;
  overflow: hidden;
}
#map { position: absolute; inset: 0; }
.chrome { position: absolute; z-index: 10; }

.masthead {
  top: 0; left: 0; right: 0;
  display: flex; align-items: baseline; gap: 14px 16px; flex-wrap: wrap;
  padding: 18px 24px 26px;
  background: linear-gradient(#0b0e13ee, #0b0e1300);
  pointer-events: none;
}
.masthead a, .masthead .pickers, .masthead .toggles,
.masthead .presets, .masthead .hf-mark { pointer-events: auto; }
.back { color: #b7b3ab; text-decoration: none; font-size: 13px; letter-spacing: .04em; }
.back:hover { color: #fff; }
h1 { font-size: 27px; font-weight: 700; letter-spacing: .005em; }
h1 .mark { color: #e2504c; }
.sub { color: #b7b3ab; font-size: 15px; }
.sub b { color: #fff; font-weight: 600; }
.draft {
  font: 700 10px/1 inherit; letter-spacing: .12em; text-transform: uppercase;
  color: #f0b429; border: 1px solid #6b5410; background: #26200c;
  border-radius: 999px; padding: 5px 9px; vertical-align: middle;
}

.pickers { display: flex; gap: 14px; flex-wrap: wrap; width: 100%; pointer-events: auto; align-items: center; }
.pickers label { font-size: 12px; color: #b7b3ab; display: flex; align-items: center; gap: 7px; letter-spacing: .04em; }
.pickers select {
  background: #141922; border: 1px solid #2a3140; color: #e8e6e1; font: inherit;
  font-size: 13px; padding: 7px 10px; border-radius: 8px; max-width: 300px;
}
.pickers select:hover { border-color: #4a5468; }
.pickers button {
  background: #141922cc; border: 1px solid #2a3140; color: #d9d6cf; font: inherit;
  font-size: 13px; padding: 7px 14px; border-radius: 999px; cursor: pointer;
}
.pickers button:hover { border-color: #e2504c; color: #fff; }

/* Pre-built views. A named question is easier to reach for than two dropdowns. */
.presets { display: flex; gap: 7px; flex-wrap: wrap; width: 100%; align-items: center; margin-top: 2px; }
.presets .plabel { font-size: 11px; color: #8f8b83; letter-spacing: .1em; text-transform: uppercase; margin-right: 2px; }
.presets button {
  background: #141922cc; border: 1px solid #2a3140; color: #d9d6cf; font: 600 12.5px/1 inherit;
  padding: 8px 13px; border-radius: 999px; cursor: pointer;
}
.presets button:hover { border-color: #4a5468; color: #fff; }
.presets button[aria-pressed="true"] { background: #b8332f; border-color: #b8332f; color: #fff; }

/* The answer, in words, before anyone touches a control. Sits directly under the
   question pills so the map is read rather than operated. */
.finding {
  width: 100%; margin-top: 4px; pointer-events: auto;
  font-size: 13.5px; line-height: 1.5; color: #b7b3ab; max-width: 74ch;
  border-left: 2px solid #b8332f; padding-left: 11px;
}
.finding b { color: #fff; font-weight: 600; }
.finding[hidden] { display: none; }

/* The 31-measure explorer is still here — one click away, not in the way. */
.builder { width: 100%; pointer-events: auto; margin-top: 2px; }
.builder > summary {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none;
  background: #141922cc; border: 1px solid #2a3140; color: #b7b3ab;
  font: 600 12px/1 inherit; padding: 7px 12px; border-radius: 999px; width: max-content;
}
.builder > summary::-webkit-details-marker { display: none; }
.builder > summary::after { content: '▾'; font-size: 10px; opacity: .8; }
.builder[open] > summary::after { content: '▴'; }
.builder > summary:hover { border-color: #4a5468; color: #fff; }
.builder > summary:focus-visible { outline: 2px solid #e2504c; outline-offset: 2px; }
.builder .pickers { margin-top: 10px; }

.card { background: #141922f2; border: 1px solid #2a3140; border-radius: 10px; box-shadow: 0 8px 30px #0009; }
.legend { left: 24px; bottom: 24px; padding: 14px 16px; width: 264px; }
.legend h2 { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #b7b3ab; margin-bottom: 10px; font-weight: 600; }
.legend .row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; margin-top: 6px; color: #d9d6cf; }
.ramp { height: 10px; border-radius: 5px; flex: 1;
  background: linear-gradient(90deg, #2c7fb8, #7fcdbb, #edf8b1, #fd8d3c, #e2504c); }
.ramp.div { background: linear-gradient(90deg, #24384f, #5b6675, #9a958c, #c4614f, #b8332f); }
.ramp-labels { display: flex; justify-content: space-between; font-size: 11px; color: #8f8b83; margin-top: 3px; }
.legend .note { margin-top: 10px; font-size: 11.5px; color: #b7b3ab; line-height: 1.45; }
.legend .height-note { margin-top: 12px; font-size: 12.5px; color: #d9d6cf; line-height: 1.45; }
.legend .height-note b { color: #fff; }
.legend .nodata-note { margin-top: 8px; font-size: 11.5px; color: #8f8b83; display: flex; align-items: center; gap: 7px; }
.legend .nodata-note .swatch { width: 12px; height: 12px; border-radius: 3px; background: #3a3f4c; flex: 0 0 12px; }
.legend .scale { margin-top: 12px; display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; font-size: 12px; color: #b7b3ab; }
.legend .scale input[type=range] { width: 100%; accent-color: #e2504c; }
.legend .scale button { background: none; border: 1px solid #2a3140; color: #d9d6cf; border-radius: 6px; font: 600 11px/1 inherit; padding: 5px 8px; cursor: pointer; }
.legend .scale button:hover { border-color: #4a5468; color: #fff; }

.hover { right: 24px; top: 128px; width: 300px; padding: 16px 18px; display: none; }
.hover.on { display: block; }
.hover h3 { font-size: 17px; font-weight: 600; margin-bottom: 2px; }
.hover .place { color: #b7b3ab; font-size: 12.5px; margin-bottom: 12px; }
.hover dl { display: grid; grid-template-columns: 1fr auto; gap: 7px 12px; font-size: 13px; }
.hover dt { color: #b7b3ab; }
.hover dd { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.hover .pending { color: #f0b429; font-size: 13px; }
.hover .verdict { margin-top: 11px; font-size: 12.5px; line-height: 1.45; border-top: 1px solid #2a3140; padding-top: 9px; }
.hover .verdict b { color: #fff; }
.hover .verdict.high { color: #ffa39f; }
.hover .verdict.low { color: #9ec5e8; }
.hover .verdict.ok { color: #b7b3ab; }
.hover dd small { display: block; color: #8f8b83; font-weight: 400; font-size: 11.5px; }

.toggles { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end;
  margin-left: auto; pointer-events: auto; }
.toggles button, .toggles a {
  background: #141922f2; color: #d9d6cf; border: 1px solid #2a3140; border-radius: 8px;
  font: 600 12.5px/1 inherit; padding: 9px 13px; cursor: pointer; text-decoration: none;
}
.toggles button:hover, .toggles a:hover { border-color: #4a5468; color: #fff; }
.toggles button[aria-pressed="true"] { background: #b8332f; border-color: #b8332f; color: #fff; }

.loading {
  position: absolute; inset: 0; display: grid; place-items: center; z-index: 20;
  background: #0b0e13; transition: opacity .6s; font-size: 14px; color: #b7b3ab; letter-spacing: .06em;
}
.loading.done { opacity: 0; pointer-events: none; }
.pulse { color: #e2504c; animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }

.hf-btn { background: #141922f2 !important; border-color: #2a3140 !important; color: #d9d6cf !important; }
.hf-btn:hover { border-color: #4a5468 !important; }
.hf-up { color: #6cc38b !important; } .hf-down { color: #ff7b76 !important; }
.hf-help { color: #e8e6e1 !important; }
.hf-modal { color: #20242b; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hint { left: 50%; transform: translateX(-50%); bottom: 24px; color: #8f8b83; font-size: 12px; letter-spacing: .03em; pointer-events: none; }

@media (max-width: 720px) {
  .legend { width: 210px; padding: 11px 12px; }
  .hover { right: 12px; top: 150px; width: 240px; }
  .hint { display: none; }
}
/* A short window — a laptop with browser chrome, or an embedded pane — leaves the
   four-row masthead sitting on top of the bottom-anchored legend. Tighten both rather
   than let the controls cover the map they describe. */
@media (max-height: 620px) {
  .masthead { padding: 10px 18px 12px; gap: 6px 12px; }
  h1 { font-size: 21px; }
  .sub { font-size: 13px; }
  .presets button { padding: 6px 11px; font-size: 12px; }
  .finding { font-size: 12.5px; margin-top: 2px; }
  .pickers select, .pickers button { padding: 5px 9px; font-size: 12px; }
  .toggles button, .toggles a { padding: 7px 11px; font-size: 12px; }
  .legend { padding: 10px 12px; width: 232px; }
  .legend .note { display: none; }        /* the same text is on the active preset pill */
  .legend .height-note, .legend .nodata-note { margin-top: 7px; font-size: 11.5px; }
  .hint { display: none; }
}
/* Shorter still (an embedded pane): the legend keeps only the colour scale and the
   height control. Everything it drops is stated on the active preset or in the hover. */
@media (max-height: 470px) {
  .legend .height-note, .legend .nodata-note { display: none; }
  .legend { width: 210px; }
  .legend h2 { margin-bottom: 6px; }
  .legend .scale { margin-top: 8px; }
}
/* On a phone the masthead, both dropdowns, the legend and the hover card together
   cover the map they describe. Shrink the chrome and let the hover card sit at the
   bottom, over the legend, so the map itself keeps the middle of the screen. */
@media (max-width: 480px) {
  .masthead { padding: 12px 14px 16px; gap: 8px 10px; }
  h1 { font-size: 20px; }
  .sub { font-size: 13px; }
  .pickers { gap: 8px; }
  .pickers label { width: 100%; min-width: 0; }
  .pickers select { flex: 1 1 auto; min-width: 0; max-width: none; font-size: 12px; padding: 6px 8px; }
  .toggles { gap: 6px; }
  .toggles button, .pickers button { font-size: 12px; padding: 6px 11px; }
  .presets { gap: 5px; }
  .presets button { font-size: 11.5px; padding: 6px 10px; }
  .presets .plabel { display: none; }
  .finding { font-size: 12.5px; padding-left: 9px; }
  .legend { left: 12px; right: 12px; bottom: 12px; width: auto; }
  .hover { left: 12px; right: 12px; top: auto; bottom: 12px; width: auto; z-index: 12; }
}