/* ================= HOUR BY HOUR =================

   The rules for the strip JS/features/weather-hourly.js draws, on both of its
   hosts: the rail's full-forecast dialog and the phone's weather card. One sheet
   rather than a block in each host's own stylesheet — every question in this
   feature area answered twice has come apart (core rule 4).

   Tokens resolve on both, checked rather than assumed: alt-tokens.css's `--a-*`
   family are literal aliases of the base names below, not approximations, so one
   sheet resolves identically under both. `--a-r` is the one radius name mobile.html
   also declares for itself; `--a-2`/`--a-3` are Suite-only and would collapse
   silently on the phone, so this file avoids them.

   Nothing here is scoped to a host: the two surfaces are the same information at
   two sizes, and a horizontal scroller is the right shape for both. `.wx-hr-btn`
   and `.wx-hr-chev` are the phone's alone — the rail's dialog is already the
   disclosed layer, so hiding the hours behind a second press there would be
   disclosure for its own sake.

   No animation anywhere in this file: the phone's section opens by being BUILT,
   inside `.wx-fold`'s own height transition — a child animating its own height
   would move that target mid-flight. */

/* The phone's fold — the border and 9px rhythm match `.wx-days`/`.wx-picker`
   around it, so the section reads as one more band of the card. */
.wx-hr-sec{
  margin-top:9px; padding-top:9px; border-top:1px solid var(--border-soft);
}

/* 44px because it is a phone control — §18's tap-target floor, unconditional here
   since this is the only host that draws this button. */
.wx-hr-btn{
  width:100%; min-height:44px; display:flex; align-items:center; justify-content:space-between;
  gap:8px; padding:0; background:transparent; border:0; cursor:pointer;
  font:inherit; color:var(--text-dim); text-align:left;
}
.wx-hr-btn .t{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; }
.wx-hr-chev{ flex:0 0 auto; display:flex; color:var(--text-faint); transition:transform var(--dur-quick, 460ms) var(--ease-out, ease); }
.wx-hr-btn[aria-expanded="true"] .wx-hr-chev{ transform:rotate(180deg); }
/* The chevron is the one thing here that moves, and a reader who asked for less motion gets the
   state without the rotation — the same exemption the card's own chevron takes. */
@media (prefers-reduced-motion: reduce){
  .wx-hr-chev{ transition:none; }
}

/* The scroller is the focusable element, not the strip inside it: `tabindex="0"`
   is what makes the arrow keys reach hour twenty-four, the keyboard equivalent
   of the swipe.

   No `:focus-visible` rule here, deliberately — both hosts already declare it
   globally (CSS/alt/alt-focus.css for the Suite, the same rule inline in
   mobile.html), and a third copy here is the duplication core rule 4 is about.

   `min-width:0` is what lets this be appended anywhere: the rail's dialog drops
   it into a flex container with no wrapper, so it must be safe as a bare child
   or it would widen the modal instead of scrolling inside it. */
.wx-hr-scroll{
  margin-top:6px; min-width:0; overflow-x:auto; overflow-y:hidden;
  -webkit-overflow-scrolling:touch; scrollbar-width:thin;
  border-radius:var(--a-r);
}
/* `min-width:min-content` stops the flex row collapsing its children to fit the box — without it
   the cells shrink to nothing instead of overflowing, and there is no scroll to reach. */
.wx-hr-strip{ display:flex; gap:6px; min-width:min-content; padding-bottom:2px; }

/* Radius and padding are measured off the rail dialog's own neighbouring tiles
   (`.a-wx-day-l`, `.a-wx-fact`, both `--a-r` at 8-10px top padding) rather than
   picked — a value from the scale that still did not match its neighbours. */
.wx-hr-cell{
  flex:0 0 auto; width:56px; box-sizing:border-box; text-align:center;
  padding:8px 4px; border-radius:var(--a-r);
  background:var(--panel-2); border:1px solid var(--border-soft);
}
/* THE HOUR IN PROGRESS, AND IT IS NOT CARRIED BY COLOUR ALONE — the cell is also the only one
   whose label reads "Now" rather than a clock time, so the distinction survives a reader who
   cannot separate the accent wash from the plain one. */
.wx-hr-cell.now{ background:var(--accent-soft); border-color:var(--accent); }
.wx-hr-cell .h{
  display:block; font-size:11px; font-weight:700; letter-spacing:.4px;
  text-transform:uppercase; color:var(--text-faint); white-space:nowrap;
}
.wx-hr-cell.now .h{ color:var(--accent-text); }
.wx-hr-cell .g{ display:block; font-size:15px; line-height:1.4; }
.wx-hr-cell .t{
  display:block; font-size:13px; font-weight:600; color:var(--text);
  font-variant-numeric:tabular-nums;
}
/* Always present, often empty — min-height keeps the row off a ragged baseline
   when most hours have nothing worth showing. */
.wx-hr-cell .p{
  display:block; min-height:14px; font-size:11px; color:var(--text-dim);
  font-variant-numeric:tabular-nums;
}

/* The two states that are not a forecast — no hourly block, or every hour is
   behind us. Quiet, because neither is an error. */
.wx-hr-msg{
  margin-top:6px; font-size:12px; color:var(--text-dim); line-height:1.45;
}