html, body, #map { margin: 0; height: 100%; }
body { background: #e8e6e0; font-family: system-ui, sans-serif; }
button { font: inherit; }

#readout {
  position: absolute; left: 10px; bottom: 28px; width: max-content; max-width: 320px; box-sizing: border-box;
  padding: 10px 28px 10px 12px; background: #fff; border-radius: 6px; box-shadow: 0 1px 6px rgba(0, 0, 0, .3); font-size: 14px;
}
#readout[hidden], #layers[hidden], #debug[hidden], #debug [hidden], #terrain-box [hidden] { display: none; }
#readout button { background: none; border: 0; padding: 0; cursor: pointer; }
#readout-close { position: absolute; right: 10px; top: 6px; color: #666; }
#readout-position { color: #1a5fb4; text-decoration: underline; }
#readout-elevation, #readout-maps { margin-left: 8px; white-space: nowrap; }
#readout-maps { color: #1a5fb4; }
#readout-rows div { display: flex; justify-content: space-between; margin-top: 4px; }
#readout-rows .note { color: #666; font-size: 12px; }

#dock { display: contents; }
#layers-bar { position: absolute; left: 10px; top: 10px; }
#layers-button { padding: 7px 12px; border: 0; border-radius: 6px; background: #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, .3); font-size: 13px; cursor: pointer; }
#layers-button[aria-expanded="true"] { background: #1a5fb4; color: #fff; }
#layers {
  position: absolute; left: 10px; top: 52px; width: 230px; box-sizing: border-box; max-height: calc(100% - 70px); overflow: auto;
  padding: 10px 12px; background: #fff; border-radius: 6px; box-shadow: 0 1px 6px rgba(0, 0, 0, .3); font-size: 13px;
}
#surface { display: flex; border-radius: 6px; overflow: hidden; border: 1px solid #1a5fb4; }
#surface button { flex: 1; padding: 7px 6px; border: 0; background: #fff; font-size: 13px; cursor: pointer; }
#surface button[aria-pressed="true"] { background: #1a5fb4; color: #fff; }
#terrain-box { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
#debug-label { margin-left: auto; }
#terrain-box input[type="range"] { flex: 1 0 100%; min-width: 0; margin: 0; }
#debug { margin-top: 10px; padding-top: 8px; border-top: 1px solid #ddd; }
#debug label, #debug input[type="range"]:not([hidden]) { display: block; }
#debug input[type="range"] { width: 100%; margin: 4px 0; }
#year-legend div { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
#year-legend i { width: 14px; height: 14px; border-radius: 2px; }

@media (max-width: 599px) {
  #dock { display: flex; flex-direction: column; position: absolute; left: 0; right: 0; bottom: 0; background: #fff; border-radius: 6px 6px 0 0; box-shadow: 0 -1px 6px rgba(0, 0, 0, .3); }
  #readout, #layers { position: static; width: auto; max-width: none; box-shadow: none; border-radius: 0; }
  #readout { padding-bottom: 10px; border-bottom: 1px solid #ddd; }
  #layers { max-height: 45vh; padding: 6px 12px 8px; }
  #surface button { padding: 4px 6px; }
  #terrain-box { margin-top: 6px; gap: 4px 8px; }
  /* Closed, the panel keeps its Ground and Surface row; only the options hide. */
  #layers[hidden] { display: block; }
  #layers[hidden] > :not(#surface) { display: none; }
  /* The toggle is a small square like the (i) control, top left over the map. */
  #layers-bar { position: fixed; left: 10px; top: 10px; }
  #layers-button { width: 29px; height: 29px; padding: 0; position: relative; border-radius: 4px; }
  #layers-button span { display: none; }
  #layers-button::before { content: ""; position: absolute; left: 8px; top: 13px; width: 13px; height: 2px; background: currentColor; box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor; }
  .maplibregl-ctrl-bottom-right, .maplibregl-ctrl-bottom-left { margin-bottom: var(--dock-height, 0); }
}