/*
 * The download page. `TODO.md` §51, redesigned for §53.
 *
 * Borrows `../join/join.css` wholesale rather than restating it - same fonts, same palette,
 * same form controls - and adds only what this page has that that one does not: the build
 * hero, the copy button, the SmartScreen panel, and the "what is this" block at the foot.
 *
 * `h2` is not styled globally in join.css, so the two headings here are given the same small
 * upper-case treatment rather than the browser's default 1.5em bold, which would compete with
 * the version number and lose.
 */

/* ── the build hero ───────────────────────────────────────────────────────── */

.build {
  margin-top: 32px;
  border: 1px solid var(--hairline-firm);
  border-radius: 14px;
  background: var(--s-base);
  padding: clamp(20px, 4vw, 30px);
}

.build-label {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
}

/*
 * The whole reason the page exists, and the reason people come BACK to it: is what I am
 * running the current one? It is set to be read from across the room - which is what §53
 * asked for and what "one large yellow number in a row of other things" was not.
 */
.ver {
  margin-top: 6px;
  font-size: clamp(44px, 12vw, 76px);
  font-weight: 700;
  font-stretch: 78%;
  letter-spacing: -0.03em;
  line-height: 0.95;
  color: var(--brand);
}

.build-sub {
  margin-top: 10px;
  font-family: var(--font-text);
  color: var(--text-3);
  font-size: 16px;
}
.build-sub .dot {
  padding-inline: 6px;
  color: var(--hairline-firm);
}
/* No build date yet, no orphaned separator. */
#built:empty + .dot {
  display: none;
}

.facts {
  margin: 0;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
  display: grid;
  gap: 10px;
}
.facts > div {
  display: flex;
  gap: 14px;
  align-items: baseline;
  flex-wrap: wrap;
}
.facts dt {
  min-width: 5ch;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
}
.facts dd {
  margin: 0;
  font-size: 15px;
  color: var(--text-2);
  overflow-wrap: anywhere;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  color: var(--text-3);
}

/*
 * One gesture for a 32-character string nobody should be transcribing. It keeps its width
 * when the label changes to "Copied", so the row does not twitch under the cursor that just
 * pressed it.
 */
.copy {
  flex: none;
  min-width: 7ch;
  background: none;
  border: 1px solid var(--hairline-firm);
  border-radius: 8px;
  padding: 4px 10px;
  color: var(--text-3);
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
}
.copy:hover {
  color: var(--text-1);
  border-color: var(--text-3);
}
.copy.done {
  color: var(--ok);
  border-color: var(--ok);
}

/* ── the gate (§52 deletes this and the markup it styles) ─────────────────── */

.ask {
  margin-top: 30px;
  font-family: var(--font-text);
  font-size: 17px;
  color: var(--text-2);
  max-width: 54ch;
}

/* The small print under the button: here, that the same installer also updates. */
.why {
  margin-top: 18px;
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-3);
  max-width: 58ch;
}

.cta.big {
  display: inline-block;
  margin-top: 28px;
  font-size: 18px;
  padding: 16px 32px;
  text-decoration: none;
}

.link {
  display: block;
  margin-top: 16px;
  background: none;
  border: 0;
  padding: 0;
  color: var(--text-3);
  font: inherit;
  font-size: 14px;
  text-decoration: underline;
  cursor: pointer;
}
.link:hover {
  color: var(--text-1);
}

/* ── the thing that actually stops installs ───────────────────────────────── */

/*
 * A left rule in brand yellow rather than a red box. It is not an error and it is not a
 * danger: it is a surprise, and the job is to spend it here instead of on the desktop with
 * a blue dialog open and no idea whether to trust the file.
 */
.warn {
  margin-top: 46px;
  border-left: 3px solid var(--brand);
  background: var(--s-base);
  border-radius: 0 12px 12px 0;
  padding: 18px 22px;
}
.warn-head {
  font-weight: 700;
  font-size: 16px;
  color: var(--text-1);
}
.warn-body {
  margin-top: 8px;
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-2);
  max-width: 58ch;
}
.warn-body strong {
  color: var(--text-1);
  font-weight: 600;
}

/* ── after the download ───────────────────────────────────────────────────── */

.after {
  margin-top: 40px;
}
.after h2,
.what h2 {
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
}
.after .steps {
  margin-top: 16px;
  padding-top: 0;
  border-top: 0;
}

/* Said out loud rather than left to be discovered by double-clicking on a Mac. */
.only-windows {
  margin-top: 20px;
  font-family: var(--font-text);
  font-size: 14px;
  color: var(--text-3);
  max-width: 58ch;
}

/* ── for somebody who has never heard of it ───────────────────────────────── */

.what {
  margin-top: 54px;
  padding-top: 30px;
  border-top: 1px solid var(--hairline);
}
.what-body {
  margin-top: 14px;
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-2);
  max-width: 58ch;
}
.what figure {
  margin: 22px 0 0;
}
/* Portrait, and a phone screenshot at full column width would be taller than the viewport. */
.what figure img {
  display: block;
  width: min(240px, 60%);
  border-radius: 10px;
  border: 1px solid var(--hairline-firm);
  background: var(--s-void);
}
.link-on {
  display: inline-block;
  margin-top: 20px;
  color: var(--brand);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
}
.link-on:hover {
  text-decoration: underline;
}

.foot {
  display: flex;
  gap: 22px;
}

/* ── the Android app, 2026-10-01 ──────────────────────────────────────────── */

.lede a {
  color: inherit;
}
.android {
  margin-top: 54px;
  padding-top: 30px;
  border-top: 1px solid var(--hairline);
}
.android h2 {
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
}
.android-lede {
  margin-top: 14px;
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-2);
  max-width: 58ch;
}
.android-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 32px;
  margin-top: 24px;
}
/* White behind the code, whatever the page is: a camera reads dark on light. */
.qr {
  display: block;
  background: #fff;
  padding: 10px;
  border-radius: 12px;
}
.qr-hint {
  font-size: 14px;
  color: var(--text-3);
  margin-bottom: 14px;
}
.android .cta {
  display: inline-block;
  text-decoration: none;
}
.qr-small {
  margin-top: 12px;
  font-size: 13px;
  color: var(--text-4, var(--text-3));
}
.android .steps {
  margin-top: 28px;
}
/* On the phone itself the code is no use: the button is the way. */
@media (max-width: 560px) {
  .qr { display: none; }
}

/* Server | Android, 2026-10-01. Pills in the logo's yellow, the chosen one filled. */
.tabs {
  display: flex;
  gap: 10px;
  margin: 26px 0 34px;
}
.tab {
  flex: 0 0 auto;
  padding: 10px 26px;
  border-radius: 999px;
  border: 1px solid var(--brand);
  color: var(--brand);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
}
.tab:hover { background: rgba(253, 186, 8, 0.1); }
.tab.on { background: var(--brand); color: #111; }
.pane[hidden] { display: none; }
.pane .android { margin-top: 0; padding-top: 0; border-top: 0; }