:root { --bar: #2e4a2b; --fg: #1b1b1b; --panel-h: 46dvh; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { display: flex; flex-direction: column; font: 15px/1.35 system-ui, sans-serif; color: var(--fg); }
.topbar { display: flex; gap: 8px; align-items: center; padding: 8px; background: var(--bar); color: #fff; }
.topbar select { flex: 1; min-width: 0; font: inherit; padding: 8px; border-radius: 6px; border: 0; }
.topbar button { font: inherit; min-width: 40px; height: 40px; border: 0; border-radius: 6px; background: #fff; cursor: pointer; }
.topbar button:disabled { opacity: .4; cursor: default; }
.day { display: flex; align-items: center; gap: 4px; }
#day-label { min-width: 6em; text-align: center; font-weight: 600; }
.stale { background: #ffe082; color: #4e3b00; padding: 8px 12px; font-weight: 600; text-align: center; }
.stale[hidden] { display: none; }
.mapwrap { position: relative; flex: 1; min-height: 0; overflow: hidden; }
#map { position: absolute; inset: 0; }
.legend { position: absolute; top: 8px; left: 8px; right: 84px; display: flex; flex-wrap: wrap; gap: 2px 10px; padding: 4px 8px;
  background: rgba(255,255,255,.88); border-radius: 6px; font-size: 12px; pointer-events: none; }
.legend span { display: inline-flex; align-items: center; gap: 4px; }
.legend i { width: 12px; height: 12px; border: 1px solid rgba(0,0,0,.35); display: inline-block; }
.legend i.hatch { background: repeating-linear-gradient(45deg, #757575 0 2px, #fff 2px 5px); }
.basemap { position: absolute; top: 84px; right: 10px; z-index: 1; display: flex; flex-direction: column; gap: 2px;
  background: #fff; border-radius: 4px; box-shadow: 0 0 0 2px rgba(0,0,0,.1); }
.basemap button { font: inherit; font-size: 13px; min-width: 64px; height: 40px; padding: 0 8px; border: 0; background: #fff; cursor: pointer; border-radius: 4px; }
.basemap button[aria-checked="true"] { background: var(--bar); color: #fff; font-weight: 600; }
.popup-reserve { border-left-color: #757575; }
.popup-link { margin: 6px 0 0; font-size: 12px; }
.panel { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; background: #fff; box-shadow: 0 -2px 8px rgba(0,0,0,.25);
  border-radius: 12px 12px 0 0; max-height: var(--panel-h); display: flex; flex-direction: column; }
.panel > button { font: inherit; font-weight: 600; padding: 12px; border: 0; background: none; text-align: left; cursor: pointer; }
.panel > button::after { content: "▲"; float: right; font-size: 12px; }
.panel.open > button::after { content: "▼"; }
.panel ol { list-style: none; margin: 0; padding: 0; overflow-y: auto; display: none; }
.panel.open ol { display: block; }
.panel li { border-top: 1px solid #eee; }
.panel li.empty { padding: 12px; color: #555; }
.panel li button { display: flex; width: 100%; gap: 10px; align-items: center; padding: 10px 12px; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.rank-score { min-width: 2.2em; text-align: center; font-weight: 700; background: #eee; border-radius: 4px; padding: 2px 4px; }
.rank-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-dist { color: #555; }
.foot { font-size: 11px; padding: 4px 8px; background: #f5f5f5; color: #444; }
.popup-id { font-weight: 700; margin-bottom: 4px; word-break: break-all; }
.popup-score { border-left: 6px solid #9e9e9e; padding: 2px 8px; margin-bottom: 6px; font-weight: 600; }
.popup table { border-collapse: collapse; width: 100%; }
.popup th { text-align: left; font-weight: 400; color: #555; padding: 1px 8px 1px 0; }
@media (min-width: 701px) {
  .panel { left: auto; right: 12px; bottom: 12px; width: 340px; border-radius: 12px; }
  .legend { right: auto; }
  .mapwrap .maplibregl-ctrl-top-right { top: 0; }
}

.rank-trend { min-width: 1em; text-align: center; font-weight: 700; }
.popup-trend { font-weight: 700; }
.popup-peak { font-weight: 400; font-size: 12px; color: #555; }
.popup-lim { font-size: 12px; color: #555; margin: 0 0 6px 14px; }
.popup-chart { margin: 4px 0 6px; max-width: 100%; }
.popup-chart svg { display: block; max-width: 100%; height: auto; }
.popup-details { margin-top: 6px; font-size: 12px; }
.popup-details summary { cursor: pointer; color: #555; padding: 2px 0; }
.popup-chart [role="button"]:focus-visible rect:not([fill="transparent"]) { stroke: #111; stroke-width: 2px; }
.popup-chart [role="button"]:focus-visible { outline: 2px solid #1a73e8; }