/* ============================================================
 * Sidebar
 * The location/timezone/format/units/appearance panel stack on the left, including city search suggestions and the current-location summary box.
 * ============================================================ */
/* ---------- 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;}