/* ============================================================
 * Sidebar (shared across every app that uses this location-panel layout)
 * The location panel on the left, including city search suggestions and the current-location
 * summary box. Time Zone/Clock Format/Units moved into the Settings modal (shared/css/card-modal.css,
 * shared/js/settings-modal.js) -- .panel/.panel h2 stay defined here since the modal reuses them
 * directly for visual consistency with their old sidebar look.
 * Moved here from golden-hour/css/ -- it was already byte-identical to sun-and-moon's own copy
 * and cross-linked from stargaze/index.html and novelearth/index.html, so it was functioning as a
 * shared file without living in shared/css/.
 * ============================================================ */
/* ---------- Layout ---------- */
.layout{display:grid; grid-template-columns:300px 1fr; gap:22px; align-items:start;}
.layout > main{min-width:0;}
@media (max-width:860px){ .layout{grid-template-columns:1fr;} }

.panel{
  background:var(--bg-panel);
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  padding:18px;
}
.sidebar > .panel + .panel{margin-top:var(--space-4);}

.panel h2{
  font-family:var(--font-body); font-weight:600; font-size:11px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--ink-faint); margin:0 0 14px;
}

/* location method tabs */
.method-tabs{display:flex; gap:6px; margin-bottom:14px;}
.method-tab{
  flex:1; padding:8px 6px; text-align:center; font-size:12px; border-radius:8px; cursor:pointer;
  background:var(--bg-panel-2); color:var(--ink-dim); border:1px solid transparent; user-select:none;
}
.method-tab.active{background:var(--bg-raised); color:var(--ink); border-color:var(--line);}
.method-pane{display:none;}
.method-pane.active{display:block;}

#citySuggestions{
  margin-top:6px; border-radius:8px; overflow:hidden; border:1px solid var(--line);
  max-height:230px; overflow-y:auto; display:none;
}
#citySuggestions.show{display:block;}
.suggestion{
  padding:9px 10px; font-size:13px; cursor:pointer; background:var(--bg-panel-2);
  border-bottom:1px solid var(--line-soft);
}
.suggestion:last-child{border-bottom:none;}
.suggestion:hover{background:var(--bg-raised);}
.suggestion .s-name{color:var(--ink);}
.suggestion .s-sub{color:var(--ink-faint); font-size:11px;}

.current-loc{
  margin-top:4px; padding:10px 12px; background:var(--bg-panel-2); border-radius:8px; border:1px solid var(--line-soft);
}
.current-loc .cl-name{font-weight:600; font-size:13.5px;}
.current-loc .cl-coords{font-family:var(--font-mono); font-size:11.5px; color:var(--ink-dim); margin-top:3px;}

/* Small always-visible 2D picker map, underneath the three location methods above -- pan/zoom/
   click-to-set, no data overlays. Square via aspect-ratio rather than a fixed pixel height so it
   stays square at any sidebar width. MapLibre's own canvas fills this via its usual 100%/100%. */
.sidebar-location-map{
  margin-top:14px; width:100%; aspect-ratio:1;
  border-radius:8px; border:1px solid var(--line-soft); overflow:hidden;
}
/* MapLibre's own FullscreenControl fullscreens this element directly (it has no separate
   controls-overlay/legend to wrap, unlike the site's other maps). The square aspect-ratio has to
   go, the same way golden-hour/css/07-graph.css overrides a normal-view CanvasHolder's own
   sizing -- an ID selector already out-specifies the plain class rule above, so no !important
   needed here. */
#sidebarLocationMap:fullscreen, #sidebarLocationMap:-webkit-full-screen{
  aspect-ratio:auto; width:100%; height:100%; border-radius:0; border:none;
}