/* Aster downloads: the page layout of every product page on downloads.getaster.now. It loads after
   Aster UI's stylesheet and the Lamplight theme, which style the elements (tabs, sections, buttons)
   and own the colours; this sheet only places things, in Aster UI's tokens.
   It sits in Aster UI's `app` layer, so it wins over the elements' own rules: selectors stay off
   their parts unless a rule is meant to adjust one. */
@font-face { font-family: Geist; src: url("fonts/Geist-VariableFont_wght.ttf") format("truetype"); font-weight: 100 900; font-display: optional; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/IBMPlexMono-Regular.ttf") format("truetype"); font-weight: 400; font-display: optional; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/IBMPlexMono-Medium.ttf") format("truetype"); font-weight: 500; font-display: optional; }

/* Aster UI's button class on a link: the element is drawn for <button>, so a link also needs the
   underline and the link colour removed. In the elements' layer, so each variant still sets its colour. */
@layer aster.elements {
  a.aster-button { color: var(--aster-text); text-decoration: none; }
}

@layer app {
:root {
  /* The docs' type over Lamplight: Geist for reading, at a reading size. */
  --aster-font-ui: Geist, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --aster-font-size: 15px;
  --aster-line: 1.6;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --accent-line: oklch(from var(--aster-accent) l c h / .32);
}

/* The glow is one viewport tall at the top of the page and scrolls away; the page colour under it is the
   root's and covers the whole page, so there is no seam below the first screen. */
html { height: auto; min-height: 100%; background: var(--aster-page); }
body {
  height: auto;
  min-height: 100vh;
  background-repeat: no-repeat;
  background-size: 100% 100vh;
  padding: 0;
}
.wrap { max-width: 820px; margin: 0 auto; padding-block: 28px 0; padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px)); display: grid; gap: 40px; }
.wrap > * { min-width: 0; }
a:not(.aster-button) { color: var(--aster-accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:not(.aster-button):hover { color: var(--aster-accent-hi); text-decoration-thickness: 2px; }
code, .mono { font-family: var(--mono); font-size: .88em; }
h2 { margin: 0 0 14px; font-size: 18px; line-height: 1.3; letter-spacing: -.012em; font-weight: 620; }

/* Header: the docs header's markup and brand rules (aster-ui/docs-brand.css, which maps the docs tokens to Aster UI's). */
.ref-head nav { margin-left: auto; display: flex; gap: 18px; font-size: 14px; font-weight: 500; }
.ref-head nav a { display: inline-block; padding-block: 12px; }

/* Product and release line */
.product { padding-top: 12px; }
.product h1 { margin: 0; font-size: 44px; line-height: 1.05; letter-spacing: -.035em; font-weight: 700; }
.product .lede { margin: 12px 0 0; color: var(--aster-text-2); font-size: 18px; line-height: 1.5; letter-spacing: -.005em; }
.release { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-top: 22px; font-size: 14px; color: var(--aster-text-2); font-variant-numeric: tabular-nums; }
.release b { color: var(--aster-text); font-weight: 600; margin-left: 3px; }
.release .expires b { color: var(--aster-caution); }
.chip { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--aster-caution); background: oklch(from var(--aster-caution) l c h / .1); border: 1px solid oklch(from var(--aster-caution) l c h / .35); }
.requirements { margin: 14px 0 0; font-size: 14px; color: var(--aster-text-2); }
.whats-new { font-weight: 550; }
.note { margin: 20px 0 0; padding: 12px 16px; border-radius: var(--aster-r-card); background: oklch(from var(--aster-caution) l c h / .1); border: 1px solid oklch(from var(--aster-caution) l c h / .35); font-size: 14px; line-height: 1.55; color: var(--aster-text); }

/* Agent card: the prompt in an Aster UI section, with the instruction and the copy button always in view */
.agent { position: relative; background: var(--aster-surface); border: 1px solid var(--accent-line); border-radius: var(--aster-r-pop); padding: 10px 24px 22px; box-shadow: var(--aster-e1); }
.agent > aster-section > .aster-section-head { border-bottom: 0; padding-right: 56px; }
.agent > aster-section > .aster-section-head button { font-size: 19px; font-weight: 620; letter-spacing: -.012em; }
.agent > aster-section:not(:defined) > h2 { margin: 12px 0; font-size: 19px; }
.agent-prompt { margin: 0 0 6px; padding: 18px 20px; border-radius: var(--aster-r-card); background: var(--aster-pane); }
.agent-prompt p { margin: 0; font-size: 14px; line-height: 1.55; }
.agent-prompt .u { font-family: var(--mono); font-size: .86em; color: var(--aster-text-2); overflow-wrap: anywhere; }
.agent > .copy { position: absolute; top: 23px; right: 18px; }
.agent-lede { margin: 8px 0 0; font-size: 14.5px; color: var(--aster-text-2); }

/* Agreement: a card over the masked downloads (the script sets data-locked). Aster UI's dialog is modal only, so
   this takes its surface tokens instead; the rest of the page stays readable. Ticking the box lifts the mask. */
.gate { position: relative; }
.gated { display: grid; gap: 40px; }
.gated > * { min-width: 0; }
.agree {
  position: absolute; z-index: 2; top: 28px; left: 50%; width: min(460px, 100%); box-sizing: border-box; translate: -50% 0;
  padding: var(--aster-pad, 16px) 22px 18px; background: var(--aster-surface); border-radius: var(--aster-r-dialog);
  box-shadow: var(--aster-e3); opacity: 0; visibility: hidden; pointer-events: none;
}
:root[data-locked] .agree { opacity: 1; visibility: visible; pointer-events: auto; }
.agree h2 { margin: 0 0 10px; font-size: 17px; }
.agree .aster-check { align-items: flex-start; gap: 10px; font-size: 14.5px; color: var(--aster-text-2); }
.agree .aster-check input { flex: none; margin-top: 4px; }
.agree .aster-check + .aster-check { margin-top: 10px; }
.agree .aster-check input:focus-visible { outline: 2px solid var(--aster-accent); outline-offset: 2px; }
:root[data-locked] .gated > * { filter: blur(6px); opacity: .45; pointer-events: none; user-select: none; }
@media (prefers-reduced-motion: no-preference) {
  .gated > * { transition: filter var(--aster-t-morph) var(--aster-ease), opacity var(--aster-t-morph) var(--aster-ease); }
  .agree { transition: opacity var(--aster-t-morph) var(--aster-ease), visibility 0s var(--aster-t-morph); }
  :root[data-locked] .agree { transition-delay: 0s; }
}

/* Elements and markup that wait for the script: without it, every panel shows under its own heading, every
   section is open, and the copy buttons are left out because nothing could copy. */
aster-button:not(:defined) { display: none; }
.copy-face { display: inline-flex; align-items: center; gap: 6px; }
aster-section:not(:defined) { display: block; }
.panel-title { margin-top: 28px; }
.panel:first-child > .panel-title { margin-top: 0; }

/* Tabs: Aster UI's strip on the page's rule */
aster-tabs > .aster-tabs-strip { border-bottom: 1px solid var(--aster-rule); margin-bottom: 8px; }
.term[data-shell="powershell"] pre .cmd::before { content: "PS> "; }
.method { margin: 18px 0 8px; font-size: 14px; font-weight: 600; }
.method:first-of-type { margin-top: 0; }
.method .os { width: 18px; height: 18px; vertical-align: -3px; margin-right: 8px; }
.panel-lede { margin: 0 0 16px; color: var(--aster-text-2); font-size: 14.5px; }

/* File table: rows share one column grid so labels, sizes, checksums and buttons line up */
.files {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; column-gap: 24px;
  background: var(--aster-surface); border-radius: var(--aster-r-pop); overflow: hidden; box-shadow: var(--aster-e1);
}
.row { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; padding: 16px 18px 16px 20px; }
.row + .row { border-top: 1px solid var(--aster-rule-2); }
.row.yours { background: var(--aster-accent-soft); }
.row.secondary { background: var(--aster-sunk); }
.plat { min-width: 0; display: flex; align-items: center; gap: 14px; }
.plat > div { min-width: 0; }
.os { flex: none; width: 22px; height: 22px; fill: currentColor; color: var(--aster-text-2); }
.os path { fill: currentColor; }
.os.stroke, .os.stroke path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.os.stroke path[stroke="none"] { stroke: none; }
.row.yours .os { color: var(--aster-accent); }
.plat strong { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; font-weight: 600; font-size: 15.5px; letter-spacing: -.005em; }
.plat .mono { display: block; margin-top: 2px; color: var(--aster-text-2); font-size: 12.5px; overflow-wrap: anywhere; }
.plat em { display: none; font-style: normal; font-size: 12px; font-weight: 600; color: var(--aster-accent); padding: 1px 8px; border-radius: 999px; background: var(--aster-accent-soft); border: 1px solid var(--accent-line); }
.row.yours .plat em { display: inline-block; }
.size { justify-self: end; font-size: 14px; color: var(--aster-text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sum { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hash { font-size: 12.5px; color: var(--aster-text-2); white-space: nowrap; }
.hash .k { font-size: 12px; color: var(--aster-text-3); }
.hash.pending { color: var(--aster-text-3); font-size: 13px; }
.dl { justify-content: center; }
.after { margin: 14px 0 0; font-size: 14px; color: var(--aster-text-2); }

/* Commands */
.steps { display: grid; gap: 24px; margin-top: 36px; }
.steps > * { min-width: 0; }
.term { position: relative; }
.term > aster-button { position: absolute; top: 6px; right: 6px; z-index: 1; }
pre {
  margin: 0; background: var(--aster-pane); border-radius: var(--aster-r-card); box-shadow: var(--aster-well);
  padding: 15px 104px 15px 18px; overflow-x: auto; font: 13px/1.75 var(--mono); color: var(--aster-text);
}
pre code { font-size: inherit; }
pre .cmd::before { content: "$ "; color: var(--aster-text-3); user-select: none; -webkit-user-select: none; }
pre .c { color: var(--aster-text-2); }

/* Verify: a card under the file table; the signature check is a collapsed Aster UI section inside it */
.verify { margin-top: 24px; padding: 16px 20px 6px; background: var(--aster-surface); border-radius: var(--aster-r-pop); box-shadow: var(--aster-e1); }
.verify > h2 { margin-bottom: 8px; font-size: 16px; }
.verify p { margin: 0 0 12px; color: var(--aster-text-2); font-size: 14px; }
.verify .term { margin-bottom: 16px; }
.signature > .aster-section-head { border-bottom: 0; padding-inline: 0; }
.signature > .aster-section-head button { font-size: 14px; }
.signature:not(:defined) > h3 { margin: 10px 0; font-size: 14px; }
.links { display: flex; flex-wrap: wrap; gap: 8px; }
.links .aster-button { font: 13px var(--mono); }

/* Releases: one Aster UI section each, the current one open */
.releases { display: grid; gap: 10px; }
.rel { padding: 0 20px; background: var(--aster-surface); border-radius: var(--aster-r-pop); box-shadow: var(--aster-e1); }
.rel > .aster-section-head { border-bottom: 0; }
.rel > .aster-section-head button { font-size: 15.5px; font-variant-numeric: tabular-nums; }
.rel:not(:defined) > h3 { margin: 14px 0 4px; font-size: 15.5px; }
.rel .meta { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--aster-text-2); font-variant-numeric: tabular-nums; }
.rel:not(:defined) .meta { margin-bottom: 8px; }
.rel .meta .gone { color: var(--aster-caution); }
.rel :is(p, ul, ol) { margin: 0 0 12px; font-size: 14.5px; }
.rel :is(ul, ol) { padding-left: 22px; }
.rel li + li { margin-top: 4px; }
.rel h4 { margin: 18px 0 6px; font-size: 14px; font-weight: 620; }
.rel .aster-section-inner > :first-child { margin-top: 2px; }
.rel .aster-section-inner > :last-child { margin-bottom: 16px; }
.rel .rel-files { color: var(--aster-text-2); }
.rel .meta .current { font-size: 12px; font-weight: 600; color: var(--aster-accent); padding: 1px 8px; border-radius: 999px; background: var(--aster-accent-soft); border: 1px solid var(--accent-line); }

/* Previous releases without notes */
.history { width: 100%; border-collapse: collapse; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.history :is(th, td) { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--aster-rule-2); white-space: nowrap; }
.history :is(th, td):first-child { padding-left: 0; }
.history th { font-size: 13px; color: var(--aster-text-2); font-weight: 600; border-bottom-color: var(--aster-rule); }
.history td:first-child { font-weight: 600; }
.history .current { margin-left: 8px; font-size: 12px; font-weight: 600; color: var(--aster-accent); padding: 1px 8px; border-radius: 999px; background: var(--aster-accent-soft); border: 1px solid var(--accent-line); }
.history .gone { color: var(--aster-text-3); }
.table-scroll { overflow-x: auto; }

/* What's inside */
.inside { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); column-gap: 32px; margin: 0; padding: 0; list-style: none; font-size: 14.5px; border-top: 1px solid var(--aster-rule); }
.inside li { display: grid; gap: 1px; padding: 12px 0; border-bottom: 1px solid var(--aster-rule); }
.inside a { font-weight: 550; justify-self: start; }
.inside li span { color: var(--aster-text-2); font-size: 13.5px; }
.build { margin: 16px 0 0; font-size: 13px; color: var(--aster-text-3); }

/* Site footer (template/footer.html) */
.site-foot { margin-top: 16px; border-top: 1px solid var(--aster-rule); padding-block: 22px 40px; font-size: 13.5px; color: var(--aster-text-2); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; justify-content: space-between; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 0 20px; }
.site-foot a:not(.aster-button) { color: var(--aster-text-2); text-decoration: none; padding-block: 8px; }
.site-foot a:not(.aster-button):hover { color: var(--aster-text); text-decoration: underline; }

@media (max-width: 640px) {
  .wrap, .gated { gap: 32px; padding-top: 16px; }
  .gated { padding-top: 0; }
  .agree { top: 12px; width: 100%; }
  .product { padding-top: 4px; }
  .product h1 { font-size: 34px; }
  .product .lede { font-size: 16.5px; }
  .release { gap: 6px 16px; }
  .agent { padding: 6px 16px 16px; }
  .agent > .copy { top: 19px; right: 10px; }
  .agent-prompt { padding: 14px 16px; }
  .agent-prompt p { font-size: 15px; }
  .files { display: block; }
  .row { display: grid; grid-template-columns: 1fr auto; gap: 10px 12px; padding: 16px; }
  .plat { grid-column: 1; grid-row: 1; align-items: flex-start; }
  .plat .os { margin-top: 1px; }
  .size { grid-column: 2; grid-row: 1; align-self: start; padding-top: 1px; }
  .sum { grid-column: 1 / -1; grid-row: 2; padding-left: 36px; min-height: 44px; }
  .dl { grid-column: 1 / -1; width: 100%; }
  .term { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .term > aster-button { position: static; justify-self: end; order: -1; }
  pre { padding: 13px 14px; }
  .verify { padding: 14px 16px 4px; }
  .rel { padding: 0 16px; }
  .site-foot a:not(.aster-button) { display: inline-block; padding-block: 12px; }
}
}

/* Header sizing for this page. Outside the layer: docs-brand.css is unlayered and would win inside it. */
/* The docs header sizes the sub-label to its own 13px line, so the divider is a short stub below the wordmark's centre.
   Here the label is as tall as the mark: the divider spans the header text and the label sits on its middle. */
.brand-sub { align-self: stretch; display: flex; align-items: center; margin-left: 6px; }
@media (max-width: 440px) { .brand-sub { display: none; } }
@media (max-width: 640px) {
  .ref-head { height: 64px; padding-inline: max(16px, env(safe-area-inset-left, 0px)); gap: 12px; }
}