/**
 * SOURCE OF TRUTH KEYWORDS: site-responsive, small-screens, prefers-reduced-motion
 * WHAT:  The narrow-screen layout and the reduced-motion overrides for every stylesheet.
 * WHY:   Last in the cascade on purpose, so a media query here wins over the base rule it adjusts. Reduced motion stops the bars and caret rather than slowing them: a looping animation has no gentler form.
 * WHERE: Last stylesheet loaded by site/index.html.
 */

/* ── Small screens ───────────────────────────────────────────────────── */

@media (max-width: 860px) {
  .release-feature-card {
    padding: var(--space-5);
  }
  .release-head .btn {
    margin-left: 0;
  }
  :root {
    --space-12: 80px;
    --space-10: 56px;
  }
  .steps,
  .facts {
    grid-template-columns: 1fr;
  }
  .grid {
    grid-template-columns: 1fr;
  }
  .tile,
  .tile.wide {
    grid-column: auto;
  }
  .install {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
  }
  .nav-links a:not(.btn) {
    display: none;
  }
  .window-body {
    padding: var(--space-4) var(--space-4) 96px;
    font-size: 17px;
  }
  .night {
    margin-inline: var(--space-3);
  }
}

@media (max-width: 560px) {
  :root {
    --gutter: 18px;
  }
  .nav .wrap {
    gap: var(--space-3);
  }
  .mac-option {
    flex-wrap: wrap;
    padding: var(--space-4);
  }
  .mac-option-go {
    width: 100%;
    text-align: center;
  }
  .release-search {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }
  /* In a column the input's `flex: 1` would grow its HEIGHT, not its width. */
  .release-search input {
    flex: none;
    width: 100%;
  }
  /* Phone timeline: the gist drops under the version instead of fighting the date for one line. */
  .rel-summary {
    flex-wrap: wrap;
    row-gap: var(--space-1);
  }
  .rel-gist {
    order: 5;
    flex-basis: 100%;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .rel-date {
    margin-left: auto;
  }
  .release-more {
    padding-left: 0;
  }
  /* The dialog becomes a sheet from the bottom edge. */
  .modal {
    width: 100vw;
    max-width: none;
    margin: auto 0 0;
    border-radius: var(--radius-panel) var(--radius-panel) 0 0;
  }
  .modal-card {
    padding: var(--space-6) var(--space-5) var(--space-5);
  }
  .modal-actions {
    flex-direction: column-reverse;
    align-items: stretch;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .modal[open],
  .modal[open]::backdrop {
    animation: none;
  }
  html {
    scroll-behavior: auto;
  }
  .bars b,
  .caret {
    animation: none;
  }
  .bars b {
    transform: scaleY(0.7);
  }
  .btn,
  .nav,
  .mac-option,
  .faq summary::after {
    transition: none;
  }
}