/* downloads.css: the downloads page (/downloads/) and the first-start choice cards that
   renderers/downloads.py writes (downloads.choices, downloads.facts, downloads.requirements).
   The download button, .parchment, .title, .eyebrow, .lead, .ios-note and .page-banner come from
   components.css; this file only lays out what is particular to this page. */

.page-downloads {
  --dl-royal: var(--c-royal, #0f27a8);
  --dl-ink: var(--c-ink, #2c2118);
  --dl-ink-soft: var(--c-ink-soft, #4e4034);
  --dl-muted: var(--c-ink-muted, #665442);
  --dl-gold: var(--c-gold, #cf9536);
  --dl-gold-text: var(--c-gold-brown, #85561a);
  --dl-line: var(--c-gold-line, #d6aa5a);
  --dl-pill: var(--c-gold-pale, #f2e2b8);
  --dl-sky: var(--c-tag-added-bg, #dfe9fd);
  --dl-sky-ink: var(--c-tag-added, #1f4fc4);
  --dl-serif: var(--font-heading, Georgia, "Times New Roman", serif);
}

/* .section pads above and below; between two of them on this page one gap is enough. */
.dl-page > .section + .section {
  padding-top: 0;
}

/* ---- Android and iOS ---------------------------------------------------------------------- */

/* One column: the Android card, then a slim iOS strip, on the same axis as the steps below. */
.dl-platforms {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  max-width: 56rem;
  margin-inline: auto;
}

.dl-android {
  display: grid;
  grid-template-columns: clamp(7rem, 12vw, 9.5rem) minmax(0, 1fr);
  grid-template-areas:
    "icon head"
    "icon body";
  column-gap: clamp(1.25rem, 3vw, 2.25rem);
  align-content: start;
}

.dl-android__icon {
  grid-area: icon;
  align-self: start;
}

.dl-android__icon img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 6px 10px rgba(74, 46, 12, 0.25));
}

.dl-android__head {
  grid-area: head;
  align-self: end;
}

.dl-android__head .eyebrow {
  margin: 0 0 0.25rem;
}

.dl-android__title {
  margin: 0;
  font-size: clamp(1.75rem, 3.2vw, 2.4rem);
  line-height: 1.1;
}

.dl-android__body {
  grid-area: body;
  min-width: 0;
}

.dl-android__intro {
  margin: 0.75rem 0 1.25rem;
  color: var(--dl-ink);
  font-size: 1.0625rem;
  line-height: 1.55;
}

.dl-android__cta {
  margin: 0 0 1rem;
}

.dl-android__subtitle {
  margin: 1.5rem 0 0.6rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--dl-line);
  color: var(--dl-gold-text);
  font-family: var(--dl-serif);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.dl-ios {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(1.5rem, 4vw, 3rem);
  row-gap: 0.5rem;
}

.dl-ios__head {
  padding-inline-end: clamp(1.5rem, 4vw, 3rem);
  border-inline-end: 1px solid var(--dl-line);
}

.dl-ios .eyebrow {
  margin: 0 0 0.2rem;
}

.dl-ios__title {
  margin: 0;
  color: var(--dl-royal);
  font-family: var(--dl-serif);
  font-size: var(--fs-h3, 1.5rem);
  line-height: 1.15;
}

.dl-ios__body {
  display: grid;
  justify-items: start;
  gap: 0.3rem;
}

/* The iOS line on its own, left-aligned: without the gold lines it is drawn between elsewhere. */
.dl-ios .ios-note {
  margin: 0;
  justify-content: flex-start;
  font-size: var(--fs-body, 1.0625rem);
  font-weight: 600;
  color: var(--dl-ink);
}

.dl-ios .ios-note::before,
.dl-ios .ios-note::after {
  display: none;
}

.dl-ios .ios-note__label {
  white-space: nowrap;
}

.dl-ios__text {
  margin: 0;
  color: var(--dl-muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* ---- Release facts (downloads.facts) and requirements (downloads.requirements) ------------ */

.release-facts {
  margin: 0;
}

.release-facts--pending {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  color: var(--dl-muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

.release-facts--pending::before {
  content: "";
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  margin-top: 0.45rem;
  border-radius: 50%;
  background: var(--dl-gold);
  box-shadow: 0 0 0 3px rgba(200, 146, 58, 0.22);
}

dl.release-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem clamp(1.5rem, 3vw, 2.5rem);
  max-width: 40rem;
}

.release-facts__item {
  min-width: 0;
}

.release-facts__item--sha {
  flex-basis: 100%;
}

.release-facts dt {
  color: var(--dl-gold-text);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.release-facts dd {
  margin: 0.1rem 0 0;
  color: var(--dl-ink);
  font-weight: 600;
}

.release-facts code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.9em;
}

.release-facts__sha summary {
  cursor: pointer;
  min-height: 44px;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.75rem;
}

.release-facts__sha summary code {
  white-space: nowrap;
}

.release-facts__sha-more {
  color: var(--dl-royal);
  font-size: 0.875rem;
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.release-facts__sha[open] .release-facts__sha-more {
  display: none;
}

.release-facts__sha summary:focus-visible {
  outline: var(--focus-outline, 3px solid #0f27a8);
  outline-offset: 2px;
  border-radius: 4px;
}

.release-facts .release-facts__sha-full {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8em;
  line-height: 1.5;
  word-break: break-all;
  user-select: all;
}

.dl-requirements {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.45rem;
}

.dl-requirements li {
  position: relative;
  padding-left: 1.85rem;
  color: var(--dl-ink);
  line-height: 1.45;
}

.dl-requirements li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.05rem;
  width: 1.3rem;
  height: 1.3rem;
  background: url("/assets/img/badge-check.png") center / contain no-repeat;
}

.dl-requirements strong {
  color: var(--dl-royal);
}

/* ---- Your first start: numbered steps --------------------------------------------------------- */

.dl-section-head {
  max-width: 44rem;
  margin: 0 auto clamp(1.5rem, 3vw, 2.25rem);
  text-align: center;
}

.dl-section-head .eyebrow,
.dl-section-head .title {
  margin-top: 0;
}

.dl-section-head .lead {
  margin-bottom: 0;
}

.dl-steps {
  --dl-coin: clamp(2.6rem, 5vw, 3.1rem);
  counter-reset: dl-step;
  max-width: 54rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.dl-step {
  counter-increment: dl-step;
  position: relative;
  padding: 0 0 clamp(1.75rem, 3.5vw, 2.5rem) clamp(3.75rem, 7vw, 4.75rem);
  color: var(--dl-ink);
  line-height: 1.6;
}

/* The gold numbered coin, as in "Start your adventure" on the home page. */
.dl-step::before {
  content: counter(dl-step);
  position: absolute;
  left: 0;
  top: -0.15rem;
  display: grid;
  place-items: center;
  width: var(--dl-coin);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f7dc9c 0%, #dcab5c 55%, #b47c2c 100%);
  box-shadow: inset 0 0 0 2px rgba(255, 244, 214, 0.75), 0 0 0 1px #b07a2a, 0 3px 6px rgba(90, 56, 14, 0.25);
  color: #fffaf0;
  font-family: var(--dl-serif);
  font-size: calc(var(--dl-coin) * 0.48);
  font-weight: 700;
  text-shadow: 0 1px 1px rgba(110, 66, 10, 0.55);
}

/* The thin gold line that joins the coins. */
.dl-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(var(--dl-coin) / 2 - 1px);
  top: calc(var(--dl-coin) + 0.35rem);
  bottom: 0.5rem;
  width: 2px;
  background: linear-gradient(var(--dl-line), rgba(236, 211, 161, 0.2));
}

.dl-step__title {
  margin: 0 0 0.35rem;
  color: var(--dl-royal);
  font-family: var(--dl-serif);
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  line-height: 1.2;
}

.dl-step p {
  margin: 0 0 0.75rem;
}

.dl-step__note {
  max-width: 44rem;
  color: var(--dl-muted);
  font-size: 0.95rem;
}

/* ---- The two download choices (downloads.choices) ---------------------------------------------- */

.dl-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  max-width: 34rem;
  margin: 1.25rem 0 1.4rem;
  padding: 0;
  list-style: none;
}

/* card-frame.png is a 9-slice: 48 px corners and a 12 px transparent pad around the visible card.
   It is drawn at three quarters (36 px corners, so they keep their shape) and pushed out by the
   pad (9 px at that scale), so the visible card fills the box exactly. */
.dl-choice {
  display: grid;
  grid-template-areas:
    "art"
    "title"
    "size"
    "line";
  grid-template-rows: auto auto auto 1fr;
  justify-items: center;
  row-gap: 0.45rem;
  padding: 0.85rem 0.85rem 1rem;
  border: 0 solid transparent;
  border-image-source: url("/assets/img/card-frame.png");
  border-image-slice: 48 fill;
  border-image-width: 36px;
  border-image-outset: 9px;
  border-image-repeat: stretch;
  text-align: center;
}

.dl-choice--recommended {
  border-image-source: url("/assets/img/card-frame-selected.png");
}

.dl-choice__art {
  grid-area: art;
  display: block;
  width: 100%;
}

.dl-choice__art img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 560 / 285;
  object-fit: contain;
  object-position: center bottom;
}

.dl-choice__title {
  grid-area: title;
  margin: 0.7rem 0 0;
  color: var(--dl-ink);
  font-family: var(--dl-serif);
  font-size: 1.1rem;
  line-height: 1.2;
}

.dl-choice--recommended .dl-choice__title {
  color: var(--dl-royal);
}

/* The ribbon lies across the foot of the picture, so both cards keep their rows level. */
.dl-choice__ribbon {
  grid-area: art;
  align-self: end;
  z-index: 1;
  margin: 0 0 -0.75rem;
  line-height: 0;
}

.dl-choice__ribbon img {
  width: 9rem;
  height: auto;
  filter: drop-shadow(0 2px 2px rgba(20, 70, 20, 0.25));
}

.dl-choice__size {
  grid-area: size;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0.25rem 0.85rem;
  border-radius: 999px;
  background: var(--dl-pill);
  color: var(--dl-ink);
  font-weight: 700;
  font-size: 1rem;
}

.dl-choice--recommended .dl-choice__size {
  background: var(--dl-sky);
  color: var(--dl-sky-ink);
}

.dl-choice__size-icon {
  display: inline-flex;
}

.dl-choice__line {
  grid-area: line;
  margin: 0;
  color: var(--dl-muted);
  font-size: 0.9rem;
  line-height: 1.4;
}

/* ---- Installing an APK ------------------------------------------------------------------------ */

.dl-install__panel {
  max-width: 54rem;
  margin: 0 auto;
}

.dl-install__title {
  margin-top: 0;
  text-align: center;
}

.dl-install__intro {
  margin: 0 auto 1.25rem;
  max-width: 40rem;
  color: var(--dl-ink);
  text-align: center;
}

.dl-install__steps {
  counter-reset: dl-install;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 2rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}

.dl-install__steps li {
  counter-increment: dl-install;
  position: relative;
  padding-left: 2.6rem;
  color: var(--dl-ink);
  line-height: 1.55;
}

.dl-install__steps li::before {
  content: counter(dl-install);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  border: 2px solid var(--dl-gold);
  color: var(--dl-gold-text);
  font-family: var(--dl-serif);
  font-weight: 700;
}

.dl-install__steps strong {
  color: var(--dl-royal);
}

.dl-install__note {
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid var(--dl-line);
  color: var(--dl-muted);
  font-size: 0.95rem;
  line-height: 1.55;
}

.dl-legal {
  max-width: 54rem;
  margin: clamp(1.5rem, 3vw, 2.5rem) auto 0;
  color: var(--dl-muted);
  font-size: 0.78rem;
  line-height: 1.5;
  text-align: center;
}

/* ---- Narrow screens ----------------------------------------------------------------------------- */

@media (max-width: 640px) {
  .dl-ios {
    grid-template-columns: minmax(0, 1fr);
    text-align: center;
  }

  .dl-ios__head {
    padding: 0 0 0.6rem;
    border-inline-end: 0;
    border-bottom: 1px solid var(--dl-line);
  }

  .dl-ios__body {
    justify-items: center;
  }

  .dl-ios .ios-note {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .dl-android__cta .btn-download {
    --btn-fs: 1rem;
    --btn-px: 1rem;
    width: 100%;
  }
}

@media (max-width: 640px) {
  .dl-android {
    grid-template-columns: 4.75rem minmax(0, 1fr);
    grid-template-areas:
      "icon head"
      "body body";
    column-gap: 1rem;
  }

  .dl-android__head {
    align-self: center;
  }

  .dl-install__steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .dl-steps {
    --dl-coin: 2.3rem;
  }

  .dl-step {
    padding-left: 3rem;
  }

  /* The cards become rows, as on the app's own upright choice screen. */
  .dl-choices {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.1rem;
  }

  .dl-choice {
    grid-template-columns: 5.5rem minmax(0, 1fr);
    grid-template-areas:
      "art title"
      "art size"
      "art line";
    grid-template-rows: auto;
    align-content: center;
    align-items: center;
    justify-items: start;
    column-gap: 0.85rem;
    row-gap: 0.3rem;
    padding: 0.7rem 0.75rem;
    text-align: left;
  }

  .dl-choice--recommended {
    grid-template-areas:
      "art title"
      "art ribbon"
      "art size"
      "art line";
  }

  .dl-choice__art {
    align-self: center;
  }

  .dl-choice__title {
    margin: 0;
    font-size: 1.05rem;
  }

  .dl-choice__ribbon {
    grid-area: ribbon;
    align-self: auto;
    margin: 0;
  }

  .dl-choice__ribbon img {
    width: 7.5rem;
  }
}