/* ============================================================
   weather.css — live conditions strip component styles.
   Pairs with weather.js.
   ============================================================ */
/* --- weather telemetry ticker (imported component) --- */
.weather-telemetry{
  border-top:1px solid var(--black);
  border-bottom:1px solid var(--black);
  background:var(--black);
  color:var(--white);
  padding:10px 0;
  min-height:40px;         /* reserves the loaded-state height up
                               front so data arriving never shifts
                               the layout below it */
  display:flex;
  align-items:center;
  overflow:hidden;
  white-space:nowrap;
}
.weather-telemetry .track{
  display:flex;
  width:max-content;
  font-family:'Barlow Condensed', sans-serif;
  font-weight:600;
  font-size:12px;
  letter-spacing:.05em;
  animation:weather-scroll 22s linear infinite;
}
.weather-telemetry .track span{ margin-right:40px; color:var(--teal); }
.weather-telemetry .track .vertical-divider{ border-left:2px solid var(--slate); height:16px; margin-right:40px; }

/* The keyframes belong to the component, not to the pages. Every
   original page carried its own copy of this rule at the bottom of
   its inline <style>, so a page that dropped its inline CSS during
   the design port kept the .track animation above and lost the
   keyframes it names — a ticker that renders correctly and never
   moves, with nothing in the console to say why. weather.js writes
   the track out four times over, so the -50% wrap is seamless. */
@keyframes weather-scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

@media (prefers-reduced-motion:reduce){
  /* the strip is live data, so it still has to be readable when it
     is not moving: stop the scroll and let it be swiped instead */
  .weather-telemetry{ overflow-x:auto; }
  .weather-telemetry .track{ animation:none; }
}

@media (min-width:861px){
  /* part of the same over-the-band chrome as the header: the strip is an
     overlay on the opening band, not a solid rule above it. --bar-scrim is
     0.90 so --teal stays AA-legible whatever photo sits behind it. */
  .weather-telemetry{
    position:relative; z-index:40;
    background:var(--bar-scrim);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    border-top:0; border-bottom:0;
  }
}