:root {
  --ink: #17262c;
  --paper: #f6f6ee;
  --panel: rgba(246, 246, 238, 0.94);
  --line: #b8c4c0;
  --accent: #d44720;
}

* { box-sizing: border-box; }

body { margin: 0; color: var(--ink); font-family: Georgia, "Times New Roman", serif; }

.map-shell, #map { height: 100vh; width: 100%; }

.titlebar, .controls {
  position: absolute;
  z-index: 2;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: 0 3px 16px rgba(23, 38, 44, 0.16);
}

.titlebar { left: 50%; max-width: calc(100% - 48px); padding: 12px 15px; top: 18px; transform: translateX(-50%); border-left: 5px solid #246b9a; }
.eyebrow, .section-label { margin: 0; color: #52636a; font-family: "Avenir Next", sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0; text-transform: uppercase; }
h1 { margin: 3px 0 0; font-size: 20px; font-weight: 600; white-space: nowrap; }

.controls { top: 18px; right: 18px; width: 214px; padding: 15px; }
.controls section + section { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 14px; }
.depth-shading-panel { border: 0; margin: 0; padding: 0; }
.depth-shading-panel summary { color: var(--ink); cursor: pointer; font: 600 13px "Avenir Next", sans-serif; list-style: none; }
.depth-shading-panel summary::-webkit-details-marker { display: none; }
.depth-shading-panel summary::after { color: #52636a; content: 'Hide'; float: right; font-size: 11px; font-weight: 500; }
.depth-shading-panel:not([open]) summary::after { content: 'Show'; }
.depth-shading-panel > section:first-of-type { margin-top: 12px; }
.depth-shading-panel > .prominence-controls, .depth-shading-panel > .contour-controls { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 14px; }
.depth-bands { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-top: 9px; }
.depth-bands button { min-height: 31px; border: 1px solid #8ca4aa; background: #fff; color: var(--ink); cursor: pointer; font: 600 12px "Avenir Next", sans-serif; }
.depth-bands button:hover, .depth-bands button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.layer-controls { display: grid; gap: 8px; font: 13px "Avenir Next", sans-serif; }
.layer-controls label { align-items: center; display: flex; gap: 7px; }
.prominence-controls { display: grid; gap: 6px; font: 12px "Avenir Next", sans-serif; }
.prominence-controls label { display: flex; justify-content: space-between; }
.prominence-controls output { color: #52636a; font-variant-numeric: tabular-nums; }
.prominence-controls input { accent-color: #246b9a; cursor: pointer; margin: 0 0 6px; width: 100%; }
.contour-controls { display: grid; gap: 7px; font: 12px "Avenir Next", sans-serif; }
.contour-intervals { display: grid; gap: 6px; grid-template-columns: repeat(3, 1fr); }
.contour-intervals label { align-items: center; display: flex; gap: 4px; }
.contour-controls > label { display: flex; justify-content: space-between; }
.contour-controls output { color: #52636a; font-variant-numeric: tabular-nums; }
.contour-controls > input { accent-color: #246b9a; cursor: pointer; margin: 0; width: 100%; }
.readout strong { display: block; font-size: 16px; margin: 4px 0; }
.readout span { color: #52636a; display: block; font: 11px/1.35 "Avenir Next", sans-serif; }
.attribution { bottom: 7px; color: rgba(255, 255, 255, 0.58); left: 50%; max-width: calc(100% - 100px); pointer-events: none; position: absolute; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.86); transform: translateX(-50%); width: max-content; z-index: 2; font: 10px/1.35 "Avenir Next", sans-serif; }

@media (max-width: 620px) {
  .titlebar { max-width: calc(100% - 32px); top: 10px; }
  h1 { font-size: 16px; }
  .controls { bottom: 44px; left: 10px; right: 10px; top: auto; width: auto; }
  .depth-shading-panel summary { font-size: 14px; }
  .depth-bands { grid-template-columns: repeat(4, 1fr); }
  .layer-controls, .readout { display: none; }
  .attribution { max-width: calc(100% - 20px); white-space: normal; width: calc(100% - 20px); }
}