/* ══ Responsive ═════════════════════════════════════════════════════════
   One block, one direction, range syntax so there is no 759.98px fudge, and
   em units so the breakpoint respects the reader's font size. */
@media (width >= 47.5em) {
  /* Wide enough to stand in the flow rather than over the content. */
  #sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
  }
  body > main {
    margin-left: 0;
    padding: var(--space-large) var(--space-xlarge) 60px;
  }
}

/* ══ Touch ══════════════════════════════════════════════════════════════
   Keyed on the input, never on the viewport: width and modality are
   orthogonal. A 390px desktop window should not get finger padding, and an
   iPad at 1024px should. `any-pointer: coarse` would fire on touchscreen
   laptops and wreck the Forecast's density, so it is deliberately not used. */
/* @media (hover: none) and (pointer: coarse) {
  button,
  select,
  input:not([type=checkbox]),
  a { min-height: var(--touch-target); }
  input[type=checkbox] {
    width: var(--tap-min);
    height: var(--tap-min);
  }
  label { min-height: var(--touch-target); }
  #horizon button { min-width: var(--touch-target); }
  ~ The variant column sets the whole first column's width; keep it off
    half the screen on a phone. ~
  #grid [data-variant] [scope=row] {
    min-width: 9rem;
    max-width: 11rem;
  }
  ~ Dense grids keep their density and reach the WCAG AA 24px floor instead. ~
  #grid button,
  #grid a { min-height: var(--tap-min); }
  #grid th,
  #grid td { padding: var(--space-regular); }
} */

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}