/* Climate advice — the left rail. Same shape as weather.html's .wx-workspace
 * and energy.html's .wkk-workspace (wkk-workspace.css): a narrow rail beside
 * the report, plain block flow at its natural height, deliberately NOT
 * position:sticky — .dash-shell, .dash-main, .container and .tab-container
 * all set overflow:hidden, and a sticky element cannot stick inside any
 * ancestor that does.
 *
 * The one thing neither precedent needed: this rail's own content changes
 * depending on which tab is open (climate-ui.js: _syncRail). Weather's rail
 * is identical across every sub-tab; WKK's rail exists on exactly one tab.
 * Climate has five tabs that want a rail (Upload/Brief/Today/History/Rules)
 * and two that don't (Columns/Model, both org-wide — no greenhouse or date
 * concept applies), so the rail itself hides for those two and the grid
 * collapses to one column via :has() below.
 */

.climate-workspace {
  display: grid;
  grid-template-columns: var(--climate-rail-w, 280px) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.climate-rail > * + * {
  margin-top: 1rem;
}

.climate-main {
  min-width: 0;
}

/* Columns/Model: no rail content applies, so don't reserve the column either. */
.climate-workspace:has(.climate-rail[hidden]) {
  grid-template-columns: minmax(0, 1fr);
}

/* Below this the two columns do not both fit, so the rail becomes a
   full-width block above the report rather than beside it. */
@media (max-width: 900px) {
  .climate-workspace {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The greenhouse selector (climate-ui.js: _renderGreenhouseSelector) is a
   flat label+select flex row — fine in a horizontal top-of-tab bar, cramped
   in a 280px column. Stack it instead, matching the rail's other fields. */
.climate-rail .climate-gh-select {
  flex-direction: column;
  align-items: stretch;
  gap: 0.25rem;
}

.climate-rail .climate-gh-select select {
  width: 100%;
  box-sizing: border-box;
}