/* The download page. The rows themselves and the block on a product page are styled in
   feature/shared/Downloads.css, which every page loads; this is the page around them. */

.downloadScreen {
  padding: clamp(3rem, 8vw, 5rem) 0 2rem;
}

.downloadHook {
  margin-bottom: 2.5rem;
}

/* The system switch on the left, the filter on the right, both wrapping on a narrow screen. */
.downloadBar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

/* The system switch is one segmented track. Its three segments are equal columns of a grid, so the
   selected pill — drawn as the track's ::before — is exactly one column wide and slides between them,
   the way the login/register tabs do. (There are exactly three systems, DOWNLOAD_SYSTEMS.) The
   columns stay equal at every width (minmax(0, ...)): a plain 1fr column would not shrink below its
   label, so on a narrow phone "Windows" would take more than a third and the pill would miss it. */
.downloadSystems {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.25rem;
  padding: 0.25rem;
  border-radius: var(--md-sys-shape-corner-full);
  background: color-mix(in srgb, var(--ink) 8%, transparent);
}

/* The selected system is one pill that belongs to the track, not to a button, so it can move between
   the three: the tonal pill the account's tabs mark theirs with, so the choice reads by its fill
   and not by its ink alone. One column wide (the track's inner width, less its two gaps, over three)
   and sliding one column plus the gap per step, as a `translate`, so the press squish below, a
   transform, scales it in place. The slide takes standard (non-spring) easing so the bounded pill
   never overshoots the track, as the account tabs' pill does; the squish springs back like the
   segment over it. */
.downloadSystems::before {
  content: "";
  position: absolute;
  inset: 0.25rem auto 0.25rem 0.25rem;
  width: calc((100% - 1rem) / 3);
  border-radius: var(--md-comp-shape-pill);
  background: var(--tonal);
  transition:
    translate var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
    transform var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-emphasized),
    border-radius var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-emphasized);
}

.downloadSystems[data-index="1"]::before {
  translate: calc(100% + 0.25rem);
}

.downloadSystems[data-index="2"]::before {
  translate: calc(200% + 0.5rem);
}

/* The chosen segment is see-through over the pill, so a press on it squishes and squares off the
   pill too, on the press list's clocks (css/expressive.css), and the two keep one shape. */
/* convention-allow forced-colors-pair: forced colors hide the pill (below), its press with it */
.downloadSystems:has(.downloadSystem[aria-pressed="true"]:is(:active, .held))::before {
  transform: scale(0.94);
  border-radius: var(--md-comp-pressed-morph-small);
  transition:
    translate var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
    transform var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
    border-radius var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}

@media (prefers-reduced-motion: reduce) {
  /* convention-allow forced-colors-pair: forced colors hide the pill (below), its press with it */
  .downloadSystems:has(.downloadSystem[aria-pressed="true"]:is(:active, .held))::before {
    transform: none;
  }
}

/* No system chosen (a phone, or a system the page does not recognize, with no stored choice): no
   segment is pressed, so no pill is drawn under one. The first choice then shows it in place. */
.downloadSystems:not([data-index])::before {
  display: none;
}

/* 40dp like the site's other buttons, with the pill corner that can morph; the squish and its
   transition ride css/expressive.css's press list, the 48dp hit area css/base.css's ::after list. */
.downloadSystem {
  position: relative;
  z-index: 1;
  min-height: 2.5rem;
  padding: 0.5rem 1rem;
  border: 0;
  border-radius: var(--md-comp-shape-pill);
  background: none;
  color: var(--ink-2);
  font: var(--md-sys-typescale-label-large);
  text-align: center;
  cursor: pointer;
  transition:
    background var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
    color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
    border-radius var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}

/* On the narrowest phones a third of the row is narrower than "Windows" with its full side padding,
   so the labels keep less room at their sides there and each still fits inside its third; the
   track fills the bar, or it would shrink to its labels' narrower width and leave room unused. */
@media (max-width: 22rem) {
  .downloadSystems {
    flex: 1 1 auto;
  }

  .downloadSystem {
    padding-inline: 0.25rem;
  }
}

/* The segments sit over the sliding pill (z-index 1), so hover and press answer with a state layer
   on top of it rather than a color change that would fight the selected segment's ink: the page's
   ink on the track, the tonal ink on the pill, as on the account's tabs. */
@media (hover: hover) {
  .downloadSystem:hover {
    background: var(--md-state-ink-hover);
  }
}

.downloadSystem:is(:active, .held) {
  background: var(--md-state-ink-pressed);
  border-radius: var(--md-comp-pressed-morph-small);
}

.downloadSystem[aria-pressed="true"] {
  color: var(--tonal-ink);
}

@media (hover: hover) {
  .downloadSystem[aria-pressed="true"]:hover {
    background: color-mix(in srgb, var(--tonal-ink) calc(var(--md-sys-state-hover-opacity) * 100%), transparent);
  }
}

.downloadSystem[aria-pressed="true"]:is(:active, .held) {
  background: color-mix(in srgb, var(--tonal-ink) calc(var(--md-sys-state-pressed-opacity) * 100%), transparent);
}

/* Forced-colors (Windows High Contrast): the pill and the ink text both flatten to system
   colors, so the three segments would read the same. Hide the pill and pin the selected segment to
   system colors, hovered and held too, so it always reads as the chosen one. */
@media (forced-colors: active) {
  .downloadSystems::before {
    display: none;
  }

  .downloadSystem[aria-pressed="true"],
  .downloadSystem[aria-pressed="true"]:hover, /* m3-allow: the system's selection colors, as at rest, so a tap leaves nothing behind */
  .downloadSystem[aria-pressed="true"]:is(:active, .held) {
    background: SelectedItem;
    color: SelectedItemText;
    forced-color-adjust: none;
  }
}

/* Outlined as .field input is (css/base.css): the outline role reads the 3:1 WCAG 1.4.11 asks of
   the edge that shows where to type, and it darkens to on-surface under the pointer. */
.downloadSearch {
  flex: 0 1 16rem;
  padding: 0.5rem 1rem;
  border: 0.0625rem solid var(--ink-3);
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--bg);
  color: var(--ink);
  font: var(--md-sys-typescale-body-large); /* 16px, so mobile Safari does not auto-zoom the filter on focus */
  transition: border-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}

@media (hover: hover) {
  .downloadSearch:hover {
    border-color: var(--ink);
  }
}

.downloadGroup {
  margin: 2rem 0 0;
  font: var(--md-sys-typescale-title-small);
  color: var(--ink-2);
}

/* Each list is one panel of glass (.glass in the markup) at the account's card corner, its rows split
   by hairlines: one above every drawn row but the first. */
.downloadList {
  margin-top: 0.5rem;
  padding: 0.25rem 1.5rem;
  border-radius: var(--md-sys-shape-corner-xl);
}

.downloadList .downloads.row:not(:empty, [hidden]) ~ .downloads.row {
  border-top: 0.0625rem solid var(--line);
}

/* No empty panel while the releases load, or once the filter has hidden every row. */
.downloadList:not(:has(.downloads.row:not(:empty, [hidden]))) {
  display: none;
}

.downloadEmpty,
.downloadFoot {
  margin-top: 2rem;
  color: var(--ink-2);
}

.downloadFoot {
  font: var(--md-sys-typescale-body-medium);
}

.downloadFootLinks {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin: 0.5rem 0 0;
  margin-inline-start: -1rem; /* the quiet pill's own padding, so its label starts under the sentence */
}