/* ══════════════════════════════════════════════════════════════════════════
   download.css: the only difference between /download and act III of /.

   Loads after kyra-theme.css, overlay.css and site.css, and is deliberately the
   smallest file on the site. Everything /download looks like it is already in
   those three; this restates none of it. What is here is the two things that
   are genuinely different — the island is a form rather than a search field,
   and it is smaller because a form with one field and one button does not need
   560 pixels — plus the handful of act I leftovers that the shared markup
   brings along and this page has no act I to use them in.

   IF YOU ARE ADDING A COLOUR, A RADIUS OR A SHADOW HERE, STOP. The bar is the
   app's own .island and must stay it: the whole argument of the page is that
   the thing you are about to download is the thing you are looking at.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── the leftovers ──
   The shared markup carries the desktop behind the glass, which this page wants,
   and the storm's containers, which it does not. demo.js never fills them here
   (startChaos is not reached), so they are empty boxes; hiding them is belt and
   braces against a stray `show` class rather than a fix for anything. */
.nstack, .loopchip, .cta { display: none !important; }

/* ── the bar ──
   Narrower than the homepage's 560, which is a width chosen to hold a sentence
   you are typing. This one holds an address and a button and nothing else, and
   at 560 it reads as a bar with a hole in it. The head loses the homepage's
   13px gap for the same reason: the form owns its own spacing. */
body.dl .island { width: 476px; }
body.dl .island .i-head { padding: 12px 12px 12px 20px; gap: 0; }

.dl-form { display: flex; align-items: center; gap: 10px; width: 100%; }

/* THE FIELD IS .i-input's TYPE, ONE SIZE DOWN. The homepage's is 20px because
   it is the only thing in a 560px bar; here it shares the row with a button and
   at 20px the two of them fight. `cursor:text` needs !important for the reason
   overlay.css gives at .i-input: kyra-theme.css hides the system cursor
   everywhere with `*{cursor:none !important}`, and a plain declaration loses to
   it however specific. kyra-ambient.js hides the drawn dot over text fields, so
   only one cursor is ever visible. */
.dl-email {
  flex: 1; min-width: 0;
  user-select: text; -webkit-user-select: text; cursor: text !important;
  background: none; border: none; outline: none;
  font-family: var(--font); font-size: 17px; font-weight: 400;
  letter-spacing: -.3px; color: var(--label); caret-color: var(--blue);
}
.dl-email::placeholder { color: var(--label-3); }

.dl-btn {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  font-family: var(--font); font-size: 14px; font-weight: 600;
  letter-spacing: -.2px; color: #0C1B0F;
  padding: 11px 17px; border-radius: 999px; border: none;
  background: #E8F3E9;
  transition: transform .18s var(--spring), opacity .18s, background .18s;
}
.dl-btn:hover { transform: translateY(-1px); background: #fff; }
.dl-btn:active { transform: translateY(0); }
.dl-btn:disabled { opacity: .55; transform: none; }

/* The button says what is happening while it happens, in the width it already
   had: a label that changes length mid-press moves the field beside it. */
.dl-btn.going .dl-btn-t { opacity: .7; }

/* ── the small print ──
   Under the bar, where the homepage puts its questions, and positioned off the
   middle of the screen rather than off the island: the island never changes
   mode on this page (there is nothing here to type a query into), so its height
   is fixed and an offset from centre cannot drift the way it would at `/`. */
.dl-fine {
  position: absolute; left: 50%; top: calc(50% + 62px); transform: translateX(-50%);
  z-index: 8; white-space: nowrap;
  font-family: var(--font); font-size: 11.5px; font-weight: 500;
  letter-spacing: .2px; color: var(--label-3); pointer-events: none;
  transition: opacity .8s ease .9s;
}
/* It arrives with everything else the glass brings, on the same delay ladder
   site.css sets for the greeting, the rail and the honest line. */
body:not(.calm) .dl-fine { opacity: 0; }

@media (max-width: 820px) {
  body.dl .island { width: 92vw; }
  body.dl .island .i-head { padding: 11px 11px 11px 16px; }
  .dl-email { font-size: 15px; }
  .dl-btn { padding: 10px 14px; font-size: 13px; }
  /* "Download for Mac" and an address will not share 390px. The mark is the
     button on a phone, and the sentence under the bar already says macOS. */
  .dl-btn-t { display: none; }
  .dl-fine { font-size: 10.5px; white-space: normal; text-align: center; width: 92vw; }
}