/* Sign-in backdrop: a one-line weather panel in the top-right corner, the
 * mirror image of the activity-feed console on the left.
 *
 * Decorative, same rules as the sphere and activity feed (login-orb.css,
 * activity-feed.css): aria-hidden, so it is invisible to assistive
 * technology. Unlike those two it DOES take pointer events - clicking it
 * jumps to the next place (js/login-weather.js) - but it sits in the
 * top-right corner, clear of the sign-in card, so it can never intercept a
 * click meant for the form. It reads its places from
 * static/json/weather_locations.json and each reading from Open-Meteo; if
 * any of that fails the panel just keeps its last line (or stays empty) and
 * the form still works.
 *
 * Hidden below 1000px - the same breakpoint the activity feed uses, where the
 * card has to sit centred and there is no room for a corner panel.
 */
.weather-feed {
  display: none;
}

@media (min-width: 1000px) {
  .weather-feed {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    position: fixed;
    /* Above .auth-shell (z-index:1), which is a full-viewport flex container
       rendered after the backdrop - at an equal z-index it would sit on top
       of this panel and eat the click. The panel is in the top-right corner,
       clear of the card, so being above it is harmless. */
    z-index: 2;
    top: var(--space-5);
    right: clamp(var(--space-5), 4vw, var(--space-6));
    max-width: clamp(260px, 22vw, 340px);
    padding: var(--space-3) var(--space-4);
    pointer-events: auto;
    cursor: pointer;
    text-align: right;
    background: color-mix(in srgb, var(--orb-backdrop) 55%, transparent);
    border: 1px solid color-mix(in srgb, var(--orb-bright) 20%, transparent);
    border-radius: var(--radius);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: border-color 0.2s ease, transform 0.1s ease;
  }

  .weather-feed:hover {
    border-color: color-mix(in srgb, var(--orb-bright) 45%, transparent);
  }

  .weather-feed:active {
    transform: scale(0.985);
  }
}

.weather-feed-label {
  margin: 0;
  font: 700 var(--text-xs) var(--font);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--orb-bright) 70%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--orb-bright) 18%, transparent);
  padding-bottom: var(--space-2);
}

.weather-feed-line {
  margin: 0;
  min-height: 1.5em;
  font: var(--text-xs) / 1.5 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  color: var(--orb-soft);
  text-shadow: 0 0 10px color-mix(in srgb, var(--orb-soft) 45%, transparent);
  opacity: 0;
  transition: opacity 0.45s ease;
}

.weather-feed-line.is-in {
  opacity: 1;
}