/*
 * Styling for the generated download pages (channel landing pages and the stable
 * download history). Uploaded to <remote base>/shared.css by releasectl and linked
 * from every generated page.
 *
 * Self-contained on purpose: these pages are served straight from static hosting,
 * next to but independent of the main site, so they must still look right if
 * basic.css changes or fails to load.
 */

/*
 * These pages are served on their own, so they have to carry their own canvas. Without
 * `color-scheme` the browser keeps its light default background in dark mode, and the dark rules
 * at the bottom then paint near-white text onto white. Declaring both, and setting the background
 * explicitly in each, is what makes the dark rules safe to write at all.
 */
:root {
  color-scheme: light dark;
}

body {
  margin: 0;
  background: #ffffff;
  color: #1a1a1a;
}

.page-content {
  max-width: 60rem;
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.55;
}

.page-content h1 {
  font-size: 1.9rem;
  margin: 0 0 0.25rem;
}

.page-content h2 {
  font-size: 1.25rem;
  margin: 2.5rem 0 0.75rem;
}

/* Version being offered, directly under the title: the one thing a visitor needs to
   know before deciding whether to download again. */
.release-meta {
  margin: 0 0 1.5rem;
  font-size: 0.95rem;
  opacity: 0.75;
}

/* What an update brings: a note's line breaks are its bullets. */
.change-meta {
  margin: 1rem 0 0.25rem;
  font-size: 0.9rem;
  opacity: 0.75;
}

.change-notes {
  margin: 0;
  white-space: pre-line;
}

.earlier-changes {
  margin: 1.5rem 0;
}

.earlier-changes summary {
  cursor: pointer;
  font-weight: 600;
}

/* Downloads are grouped per platform, so a visitor picks their system first and the build
   second. A platform appears here by being published, not by anything in this file. */
.platforms {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  margin: 1.5rem 0;
}

.os-group h2 {
  margin: 0 0 0.6rem;
  font-size: 1.15rem;
}

.os-downloads {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* On a single-platform page the row stands on its own rather than inside a group. */
.page-content > .os-downloads {
  margin: 1.5rem 0;
}

/* Label above, size below: the size is the whole reason the choice is worth making. */
.os-downloads .button {
  display: inline-flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 1.05rem;
  padding: 0.7rem 1.4rem;
  text-align: left;
}

.dl-meta {
  font-size: 0.8rem;
  font-weight: 500;
  opacity: 0.85;
}

.dl-meta:empty {
  display: none;
}

/* Which build to pick, where picking needs something known about the machine. Quieter than
   .note on purpose: it explains a choice, it does not warn about one. */
/* Unlike the hint, not muted: whoever is below the minimum has to notice it before downloading. */
.os-requirements {
  margin: 0.6rem 0 0;
  max-width: 46rem;
  font-size: 0.9rem;
}

.os-hint {
  margin: 0.6rem 0 0;
  max-width: 46rem;
  font-size: 0.9rem;
  opacity: 0.75;
}

/* What to do with a downloaded package. Not muted like the hint: someone who took the download and
   found their software centre refusing it is looking for exactly this. */
.os-note {
  margin: 0.7rem 0 0.3rem;
  max-width: 46rem;
  font-size: 0.9rem;
}

.os-note-cmd {
  margin: 0;
  max-width: 46rem;
  padding: 0.6rem 0.9rem;
  border-radius: 0.4rem;
  background: #f2f4f6;
  font-size: 0.85rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Folded away: installing from the repository is the better way in, and still not what someone
   who came for a one-off download is reading the page for. */
.os-repo {
  margin: 0.8rem 0 0;
  max-width: 46rem;
  font-size: 0.9rem;
}

.os-repo summary {
  cursor: pointer;
  color: #1668c1;
}

.os-repo .repo-family {
  margin: 0.9rem 0 0.3rem;
  font-weight: 600;
}

/* Commands are copied by hand, so they wrap rather than scroll sideways out of view. */
.os-repo pre {
  margin: 0;
  padding: 0.7rem 0.9rem;
  border-radius: 0.4rem;
  background: #f2f4f6;
  font-size: 0.85rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* basic.css already styles .button on the main site; these rules make the pages stand
   on their own when it is absent, and are harmless overrides when it is not. */
.button {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  border-radius: 0.4rem;
  background: #1668c1;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  border: 1px solid transparent;
}

.button:hover,
.button:focus {
  background: #12569f;
}

.button.secondary {
  background: transparent;
  color: #1668c1;
  border-color: #9ec2e8;
}

.button.secondary:hover,
.button.secondary:focus {
  background: #eaf2fb;
}

/* Shown in place of a download button for a platform that has nothing in this channel
   yet, so the page never offers a link that 404s. */
.unavailable {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  border-radius: 0.4rem;
  border: 1px dashed #b9b9b9;
  color: #6b6b6b;
  font-weight: 600;
}

.note {
  padding: 0.75rem 1rem;
  border-left: 3px solid #e0a30c;
  background: #fdf6e3;
  border-radius: 0 0.3rem 0.3rem 0;
}

.lang-switch {
  margin: 0 0 1rem;
  font-size: 0.9rem;
}

table.downloads {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

table.downloads th,
table.downloads td {
  text-align: left;
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid #e2e2e2;
  vertical-align: top;
}

table.downloads th {
  font-weight: 600;
  white-space: nowrap;
}

/* The release notes are the last column; a line break in them is a bullet on its own line. */
table.downloads td:last-child {
  white-space: pre-line;
}

table.downloads tbody tr:hover {
  background: #f6f9fc;
}

/* The checksum copies rather than prints: 64 hex characters would dominate every row, and
   verifying one means pasting it into a command anyway. */
.copy-sha {
  display: inline-block;
  margin-top: 0.35rem;
  padding: 0.15rem 0.5rem;
  font: inherit;
  font-size: 0.78rem;
  line-height: 1.6;
  color: inherit;
  background: transparent;
  border: 1px solid #cfcfcf;
  border-radius: 0.3rem;
  cursor: pointer;
  opacity: 0.8;
  /* The table scrolls sideways when it has to; a three-line button is worse than that. */
  white-space: nowrap;
}

.copy-sha::before {
  content: '⧉';
  margin-right: 0.35rem;
  opacity: 0.7;
}

.copy-sha:hover,
.copy-sha:focus {
  opacity: 1;
  border-color: #1668c1;
}

.copy-sha.copied {
  border-color: #2e8b45;
  color: #2e8b45;
  opacity: 1;
}

.copy-sha.copied::before {
  content: '✓';
}

.filesize {
  white-space: nowrap;
  opacity: 0.75;
}

/* Narrow screens: the history table is the only wide thing here, so let it scroll on
   its own rather than pushing the page sideways. */
.table-scroll {
  overflow-x: auto;
}

@media (max-width: 40rem) {
  .page-content {
    padding: 1.25rem 1rem 3rem;
  }

  .os-downloads .button {
    width: 100%;
  }
}

@media (prefers-color-scheme: dark) {
  body {
    background: #16181a;
    color: #e8e8e8;
  }

  .button.secondary {
    color: #7ab5ec;
    border-color: #3a5978;
  }

  .button.secondary:hover,
  .button.secondary:focus {
    background: #16283a;
  }

  .note {
    background: #2e2721;
    border-left-color: #c8901a;
  }

  .unavailable {
    border-color: #4a4a4a;
    color: #9a9a9a;
  }

  .os-repo summary {
    color: #7ab5ec;
  }

  .os-repo pre,
  .os-note-cmd {
    background: #23282d;
  }

  table.downloads th,
  table.downloads td {
    border-bottom-color: #3a3a3a;
  }

  table.downloads tbody tr:hover {
    background: #23282d;
  }

  .copy-sha {
    border-color: #4a4a4a;
  }

  .copy-sha:hover,
  .copy-sha:focus {
    border-color: #7ab5ec;
  }

  .copy-sha.copied {
    border-color: #5cc47a;
    color: #5cc47a;
  }
}

/* The download for the machine reading the page: moved to the front by the detection script and
   filled in, so the page still lists every platform while pointing at one. Styling only -- with no
   script, or a browser that will not say what it is, the page reads exactly as it did before. */
.button.secondary.detected {
  background: #1668c1;
  color: #fff;
  border-color: #1668c1;
  box-shadow: 0 0 0 3px rgba(22, 104, 193, 0.25);
}

.detected-hint {
  font-weight: 600;
}

.detected-hint::before {
  content: ' · ';
  font-weight: 400;
}

/* A release with one build per architecture has several archived files; side by side they run
   into each other on a phone. */
.history-download + .history-download {
  margin-top: 0.35rem;
}