/* The download page. Two columns, one per client.
 *
 * They are independent because the clients are: the desktop is on 0.9.x and
 * the phone on 0.4.x, and a release may carry a build for one and not the
 * other. Each column has its own current version, its own history and its own
 * notes, and neither has to wait for the other.
 */

.dl-head { padding: 3rem 1.25rem 1rem; }
.dl-head h1 { font-size: clamp(2rem, 4.6vw, 2.9rem); letter-spacing: -.03em; margin: 0 0 .6rem; }
.dl-head p { color: var(--muted); max-width: 56ch; }
.dl-head a { color: var(--accent); }

.dl-columns {
  display: grid; gap: 1.5rem; padding: 1rem 1.25rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  align-items: start;
}

.plat {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); padding: 1.4rem 1.5rem;
}
.plat-head h2 { margin: 0 0 .2rem; font-size: 1.25rem; letter-spacing: -.01em; }
.plat-head p { margin: 0 0 1.2rem; font-size: .9rem; }

.plat-version { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; margin: 0 0 .8rem; }
.plat-version b { font-size: 1.5rem; letter-spacing: -.02em; }
.plat-version a { color: var(--accent); font-size: .85rem; }
.plat-get { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin: 0; }
.plat-get .linkish {
  background: none; border: 0; padding: 0; font: inherit; font-size: .88rem;
  color: var(--muted); text-decoration: underline; cursor: pointer;
}
.plat-get .linkish:hover { color: var(--accent); }

.plat-notes { margin-top: 1.4rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.plat-notes h3 {
  font-size: .76rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--muted); margin: 0 0 .5rem;
}
.plat-notes ul, .plat-old ul { padding-left: 1.1rem; margin: .4rem 0; }
.plat-notes li, .plat-old li { margin-bottom: .3rem; }
.plat-notes p, .plat-notes li, .plat-old p, .plat-old li { font-size: .92rem; color: var(--muted); }
.plat-notes strong, .plat-old strong { color: var(--ink); }
.plat code { background: var(--bg); border: 1px solid var(--line); padding: .05rem .3rem; border-radius: 5px; font-size: .88em; }

.plat-history { margin-top: 1.2rem; border-top: 1px solid var(--line); padding-top: .9rem; }
.plat-history > summary { cursor: pointer; font-size: .9rem; color: var(--muted); }
.plat-history > summary:hover { color: var(--ink); }
.plat-old { padding: 1rem 0 .2rem; border-bottom: 1px solid var(--line); }
.plat-old:last-child { border-bottom: 0; }
.plat-old .plat-version b { font-size: 1.05rem; }
.plat-none { color: var(--muted); font-style: italic; margin: 0; }

/* --- the instructions, as a dialog --------------------------------------- */

.dl-dialog {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg); color: var(--ink);
  padding: 0; max-width: min(38rem, calc(100vw - 2rem));
}
.dl-dialog::backdrop { background: rgba(12, 13, 30, .55); backdrop-filter: blur(2px); }
.dl-dialog-inner { padding: 1.5rem 1.75rem; }
.dl-dialog h3 { margin: 0 0 .9rem; font-size: 1.15rem; }
.dl-dialog h4 {
  margin: 1.4rem 0 .4rem; font-size: .76rem; text-transform: uppercase;
  letter-spacing: .09em; color: var(--muted);
}
.dl-dialog p { color: var(--muted); font-size: .93rem; margin: 0 0 .7rem; }
.dl-dialog pre {
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: .7rem .9rem; overflow-x: auto; margin: 0 0 .7rem; font-size: .88rem;
}
.dl-dialog pre code { background: none; border: 0; padding: 0; }
.dl-dialog .digest {
  display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .74rem; color: var(--muted); word-break: break-all;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 8px; padding: .6rem .7rem;
}
.dl-dialog-close { margin: 1.4rem 0 0; }

/* Until the script has claimed them, the dialogs are ordinary blocks — so
   with no JavaScript the instructions are on the page rather than nowhere.
   `display: none` on a closed <dialog> is exactly the wrong default here. */
html:not(.dl-ready) .dl-dialog {
  display: block; position: static; margin: 1.2rem 0 0; width: 100%;
}
html:not(.dl-ready) .dl-dialog-close, html:not(.dl-ready) .plat-get .linkish { display: none; }

.dl-foot { padding: 0 1.25rem 4rem; }
.dl-foot a { color: var(--accent); }

/* One release describing both clients: its notes belong under the columns,
   once, rather than printed twice side by side. */
.dl-shared { padding: 1rem 1.25rem 2rem; }
.dl-shared h2 { font-size: 1.25rem; letter-spacing: -.015em; margin: 0 0 .2rem; }
.dl-shared > .quiet { margin: 0 0 1rem; }
.dl-shared-body { max-width: 60ch; }
.dl-shared-body p, .dl-shared-body li { color: var(--muted); font-size: .95rem; }
.dl-shared-body strong { color: var(--ink); }
.dl-shared-body ul { padding-left: 1.1rem; }
.dl-shared-body li { margin-bottom: .5rem; }
.dl-shared-body a { color: var(--accent); }
.dl-shared-body code { background: var(--panel); border: 1px solid var(--line); padding: .05rem .3rem; border-radius: 5px; font-size: .88em; }