/*  Orion site: the download page. Tokens, type, nav, buttons, icons
 *  and the footer come from base.css; this is only the page's own
 *  layout. The accent marks what you can act on (the primary button, a link
 *  under the pointer, focus) and the row the page picked for this computer.
 */

.dl, .band, .more { --section-tight: clamp(64px, 7vw, 112px); --measure: 36rem; --measure-sm: 30rem; }


/* ---------- the download ---------- */
.dl {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-7) var(--s-8); align-items: start;
  padding-block: calc(var(--nav-h) + clamp(var(--s-7), 6vw, var(--s-9))) var(--section-tight);
}
.dl__copy, .dl__branch { display: flex; flex-direction: column; gap: var(--s-6); }
.dl__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.dl__note { max-width: var(--measure); padding: var(--s-5); border-radius: var(--r); background: var(--panel); border: 1px solid var(--line); }
.dl__note .small { margin-top: var(--s-2); }

/* What a camera would print: the file, its size and date, what it runs on. */
.dl__facts {
  display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: var(--s-6); max-width: var(--measure); margin: 0;
  border-top: 1px solid var(--line); font-family: var(--mono); font-size: var(--fs-xs); line-height: 1.6;
}
.dl__facts div { display: contents; }
.dl__facts dt, .dl__facts dd { margin: 0; padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.dl__facts dt { color: var(--dim); }
.dl__facts dd { overflow-wrap: anywhere; }
.dl__facts [data-fact="sha"] dd { color: var(--dim); }
/* The one moment that moves on this page: the file's name, size, date and
 * hash arrive from GitHub after the page has drawn, so they fade in rather
 * than pop, which says they were just looked up. */
.dl__facts dt, .dl__facts dd { transition: opacity var(--dur-2) var(--ease-out); }
@starting-style { .dl__facts dt, .dl__facts dd { opacity: 0; } }

.dl__photo { margin-top: var(--s-7); }
.dl__photo img { width: 100%; border-radius: var(--r-lg); outline: 1px solid rgba(255, 255, 255, 0.1); outline-offset: -1px; }
.dl__photo .mono { margin-top: var(--s-3); }

/* ---------- the bands below ---------- */
.band { border-top: 1px solid var(--line); }
.band__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--s-6) var(--s-8); padding-block: var(--section-tight); }
.band__in--wide { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
.band__sub { margin-top: var(--s-4); max-width: var(--measure-sm); }
.band__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-3) var(--s-7); }

/* A real sequence, so numbered. */
.steps { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); counter-reset: step; }
.steps li { display: grid; grid-template-columns: var(--s-7) minmax(0, 1fr); column-gap: var(--s-4); padding: var(--s-5) 0; border-top: 1px solid var(--line); counter-increment: step; }
.steps li::before { content: counter(step); padding-top: 2px; font-family: var(--mono); font-size: var(--fs-xs); color: var(--dim); }
.steps .small { margin-top: var(--s-1); }
.cmd { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-3); padding: var(--s-1) var(--s-1) var(--s-1) var(--s-4); border-radius: var(--r); background: var(--panel); border: 1px solid var(--line); }
.cmd code { flex: 1 1 auto; min-width: 0; overflow-x: auto; white-space: nowrap; font-family: var(--mono); font-size: var(--fs-xs); }
.cmd .btn { flex: none; min-height: 36px; padding: 0 var(--s-3); font-size: var(--fs-sm); border-radius: var(--r-sm); }

.platforms { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.platforms li {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) minmax(0, 1.2fr) 140px; gap: var(--s-2) var(--s-6); align-items: baseline;
  min-height: 44px; padding: var(--s-5) 0; border-top: 1px solid var(--line);
}
.platforms .needs { font-family: var(--mono); font-size: var(--fs-xs); color: var(--dim); }
.platforms .status { font-size: var(--fs-md); color: var(--dim); }
.platforms .is-ready { color: var(--text); }
.platforms .btn { justify-self: start; padding: 0 var(--s-4); font-size: var(--fs-md); }
.dl__here { margin-left: var(--s-3); font-family: var(--mono); font-size: var(--fs-xs); font-weight: 400; color: var(--accent); }

.more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6) var(--s-8); padding-block: var(--section-tight); }
.more .small { margin-top: var(--s-2); }

@media (max-width: 900px) {
  .dl, .band__in, .more { grid-template-columns: minmax(0, 1fr); }
  .platforms li { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) { .dl__cta { flex-direction: column; } .dl__cta .btn { width: 100%; } }