/* Download page (flowjoe.app/download): lays out the download cards with the site's own tokens. */
.dl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 36px; }
.dl-card { position: relative; overflow: hidden; background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); padding: 28px; display: flex; flex-direction: column; gap: 16px; transition: border-color .35s ease, box-shadow .35s ease, transform .35s var(--ease-out); }
.dl-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; opacity: .85; background: linear-gradient(90deg, var(--cyan-400), transparent 70%); }
.dl-card.is-yours { border-color: rgba(254,115,12,.45); box-shadow: var(--glow-amber); }
.dl-card.is-yours::before { background: linear-gradient(90deg, var(--amber-400), transparent 70%); }
.dl-card__head { display: flex; align-items: center; gap: 12px; }
.dl-card__icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--glass-strong); border: 1px solid var(--glass-border-strong); color: var(--text-100); }
.dl-card__title { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-h3); color: var(--text-100); }
.dl-card__yours { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--amber-300); }
.dl-file { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--radius); background: rgba(10,14,20,.55); border: 1px solid var(--glass-border); }
.dl-file__name { color: var(--text-100); font-weight: 500; }
.dl-file__meta { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--text-400); letter-spacing: .02em; }
.dl-file .btn { margin-left: auto; }
.dl-soon { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--text-400); padding: 12px 16px; border: 1px dashed var(--glass-border-strong); border-radius: var(--radius); }
.dl-files { display: flex; flex-direction: column; gap: 16px; }
.dl-note { font-size: var(--fs-small); color: var(--text-300); }
.dl-help { display: grid; grid-template-columns: 1.35fr 1fr; gap: 22px; margin-top: 36px; }
.dl-panel { background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); padding: 28px; }
.dl-panel h3 { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-h3); color: var(--text-100); margin-bottom: 8px; }
.dl-panel p { color: var(--text-300); margin-bottom: 18px; }
.dl-steps { list-style: none; display: grid; gap: 14px; }
.dl-steps li { display: grid; grid-template-columns: 96px 1fr; gap: 14px; }
.dl-steps b { color: var(--text-100); font-weight: 500; }
.dl-steps span { color: var(--text-300); }
.dl-steps span strong { color: var(--text-100); font-weight: 500; }
.dl-code { font-family: var(--font-mono); font-size: var(--fs-mono); background: rgba(10,14,20,.6); border: 1px solid var(--glass-border); border-radius: 6px; padding: 2px 6px; color: var(--text-200); }
.dl-hash { display: block; margin-top: 8px; word-break: break-all; font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--text-400); }
.nav__links a[aria-current] { color: var(--text-100); }
@media (max-width: 960px) { .dl-grid, .dl-help { grid-template-columns: 1fr; } .dl-steps li { grid-template-columns: 1fr; gap: 2px; } }
.dl-panel p a { color: var(--amber-300); text-decoration: underline; text-underline-offset: 3px; }
.dl-code { white-space: nowrap; }
.dl-panel .dl-steps li { grid-template-columns: 112px 1fr; }
.dl-snip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; }
.dl-sum { border-top: 1px solid var(--glass-border); padding: 12px 0; }
.dl-sum__label { color: var(--text-100); margin-bottom: 6px; }
.dl-sum__row { display: flex; align-items: center; gap: 8px; }
.dl-sum__row .dl-hash { margin-top: 0; flex: 1; min-width: 0; }
.dl-hash--none { font-style: normal; }
.dl-copy { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--glass-border); background: var(--glass); color: var(--text-300); cursor: pointer; transition: color .2s ease, border-color .2s ease; }
.dl-copy:hover { color: var(--text-100); border-color: var(--glass-border-strong); }
.dl-copy.is-copied { color: var(--amber-300); border-color: rgba(254,115,12,.45); }
.dl-sum:first-of-type { border-top: 0; padding-top: 0; }
.dl-how { border-top: 1px solid var(--glass-border); padding-top: 12px; }
.dl-how summary { cursor: pointer; color: var(--text-100); }
.dl-how .dl-steps { margin-top: 14px; }
.dl-steps b { display: inline-flex; align-items: flex-start; gap: 8px; }
.dl-os { flex: none; display: inline-grid; place-items: center; width: 18px; height: 22px; color: var(--text-300); }
.dl-os svg { width: 15px; height: 15px; }

/* Previous versions (approved mockup _mockups/download-versions.html) */
.dl-whatsnew { color: var(--amber-300); }
.dl-versions { margin-top: 36px; padding: 8px 28px 20px; }
.dl-vrow { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr) minmax(0,1.6fr) 150px; gap: 16px; align-items: center; padding: 16px 0; border-top: 1px solid var(--glass-border); color: var(--text-300); }
.dl-vrow--head { border-top: 0; font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-400); }
.dl-vname { color: var(--text-100); font-weight: 500; display: inline-flex; gap: 10px; align-items: center; }
.dl-latest { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--amber-300); }
.dl-vrow a { color: var(--text-100); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--glass-border-strong); }
.dl-vrow a:hover { color: var(--amber-300); }
.dl-dot { color: var(--text-400); margin: 0 6px; }
.dl-vnotes { white-space: nowrap; justify-self: end; }
.dl-vfoot { margin: 14px 0 0; color: var(--text-400); font-size: var(--fs-small); }
.dl-vfoot a { color: var(--amber-300); }
@media (max-width: 760px) { .dl-vrow { grid-template-columns: 1fr 1fr; } .dl-vrow--head { display: none; } }