/* Collapsible side rails — index-v3. Rails slide away; edge tabs bring them back. */
body.rails-ready .atlas-shell { transition: grid-template-columns .32s cubic-bezier(.22, 1, .36, 1); }
.side-rail, .info-rail { overflow: hidden; }
.side-rail > *, .info-rail > * { transition: opacity .2s ease; }

body.rail-left-collapsed .side-rail { padding-inline: 0; border-right: 0; }
body.rail-left-collapsed .side-rail > * { opacity: 0; pointer-events: none; }
body.rail-right-collapsed .info-rail { padding-inline: 0; border-left: 0; }
body.rail-right-collapsed .info-rail > * { opacity: 0; pointer-events: none; }

/* Hover transforms made real pointer input chase a moving target. */
.side-nav a,
.side-nav a:hover {
  transform: none !important;
  transition: color .2s ease, opacity .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

@media (min-width: 1500px) {
  body.rail-left-collapsed .atlas-shell { grid-template-columns: 0 minmax(0, 1fr) 288px; }
  body.rail-right-collapsed .atlas-shell { grid-template-columns: 184px minmax(0, 1fr) 0; }
  body.rail-left-collapsed.rail-right-collapsed .atlas-shell { grid-template-columns: 0 minmax(0, 1fr) 0; }
}

@media (max-width: 1499px) and (min-width: 768px) {
  body.rail-left-collapsed .atlas-shell { grid-template-columns: 0 minmax(0, 1fr); }
  .rail-toggle.rail-toggle--right { display: none; }

  /* The desktop info rail is intentionally hidden at these widths. Keep its
     already-existing recommendation controls available inside the main flow. */
  .mobile-personalize {
    padding: 18px 32px 14px;
    display: block;
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    background: rgba(249, 249, 248, .86);
  }
  .mobile-personalize h2 {
    margin: 0 0 11px;
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 500;
  }
  .mobile-personalize > div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .mobile-personalize button {
    min-height: 36px;
    padding: 0 15px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-pill);
    background: white;
    font-size: 9px;
    cursor: pointer;
  }
  .mobile-personalize button[aria-pressed="true"] {
    border-color: var(--navy);
    background: var(--navy);
    color: white;
  }
}

.rail-toggle { position: fixed; z-index: 60; top: 50%; transform: translateY(-50%); width: 26px; height: 64px; padding: 0; display: grid; place-items: center; border: 1px solid rgba(40, 45, 60, .1); background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); color: #737986; box-shadow: 0 6px 18px rgba(40, 45, 65, .08); cursor: pointer; transition: color .2s ease, box-shadow .2s ease; }
.rail-toggle:hover { color: var(--text-primary); box-shadow: 0 8px 22px rgba(40, 45, 65, .16); }
.rail-toggle svg { width: 14px; height: 14px; transition: transform .32s cubic-bezier(.22, 1, .36, 1); }
.rail-toggle--left { left: 0; border-left: 0; border-radius: 0 12px 12px 0; }
.rail-toggle--right { right: 0; border-right: 0; border-radius: 12px 0 0 12px; }
body:not(.rail-left-collapsed) .rail-toggle--left svg { transform: rotate(180deg); }
body.rail-right-collapsed .rail-toggle--right svg { transform: rotate(180deg); }

/* Address → geocoding → weather result. Overrides the former decorative status row. */
.side-status { margin-top: 17px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.weather-form { margin: 0; }
.weather-form__label { display: block; margin-bottom: 6px; color: var(--text-muted); font-size: 6.5px; font-weight: 600; letter-spacing: .1em; }
.weather-form__row { display: grid; grid-template-columns: minmax(0, 1fr) 34px; gap: 5px; }
.weather-form__input { width: 100%; min-width: 0; height: 31px; padding: 0 9px; border: 1px solid var(--line-soft); border-radius: 10px; background: rgba(255,255,255,.86); color: var(--text-primary); font-size: 7.5px; outline: none; }
.weather-form__input:focus-visible { border-color: rgba(82,127,166,.55); box-shadow: 0 0 0 2px rgba(82,127,166,.12); }
.side-status .weather-form__submit { width: 34px; height: 31px; padding: 0; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--navy); color: white; font-size: 7px; cursor: pointer; }
.side-status .weather-form__submit:disabled { opacity: .55; cursor: progress; }
.weather-result { min-height: 72px; margin-top: 8px; padding: 9px; display: grid; gap: 3px; border: 1px solid var(--line-soft); border-radius: 12px; background: rgba(255,255,255,.72); }
.weather-result__top { display: flex; justify-content: space-between; align-items: baseline; }
.weather-result__top strong { font-family: var(--serif); font-size: 17px; font-weight: 500; }
.weather-result__top b { font-size: 10px; }
.weather-result__place { overflow: hidden; color: var(--text-primary); font-size: 7.5px; font-weight: 600; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.weather-result__condition { color: var(--text-secondary); font-size: 7px; line-height: 1.25; }
.weather-result__status { color: var(--text-muted); font-size: 6.25px; line-height: 1.3; }
.weather-result[data-state="loading"] .weather-result__status { color: #527fa6; }
.weather-result[data-state="error"] .weather-result__status { color: #a45151; }
.weather-result[data-state="success"] .weather-result__status { color: #317b61; }

@media (max-width: 767px) { .rail-toggle { display: none; } }