/* ═══════════════════════════════════════════════════════════════════════════
   overlay.css — the /downloads/overlay/ page sheet (the download card).

   Page-local composition only; every colour is a haven token and gold is
   light, never ink. The live page's own <style> block (live_capture/pages/
   downloads_overlay.html) is the shape: one centred card, a filled download
   button with a version chip, a gate note under it, a feature grid that
   collapses to one column, small fine print with two links. haven.css loads
   AFTER this file, so the few rules that must beat the theme (the disabled
   state of a `.btn.go`) use the element id.
   ═══════════════════════════════════════════════════════════════════════════ */

.dl-shell { max-width: 820px; }
.dl-card .panel-b { padding: clamp(22px, 4vw, 36px) clamp(18px, 4vw, 32px); text-align: center; }

/* the download control and its gate note */
.dl-act { display: grid; justify-items: center; gap: 14px; }
.dl-btn { min-height: 52px; padding: 0 28px; font-size: 12px; }
.dl-version { margin-left: 2px; font: 700 11px/1 var(--data); letter-spacing: .12em; opacity: .8; }
/* download.js's three honest states: armed, or gated. Gated = the feed named
   no installer, so the control is inert rather than a link to nowhere. */
#dl-btn[aria-disabled="true"] { pointer-events: none; opacity: .45; box-shadow: none; transform: none; }
.dl-gate { margin: 0; color: var(--ember-ink); font-size: 13.5px; line-height: 1.5; }
.dl-gate[hidden] { display: none; }

/* the six features */
.dl-feats {
  list-style: none; margin: 30px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px;
  text-align: left;
}
.dl-feats li {
  background: rgba(6,5,6,.55); border: 1px solid var(--line); border-radius: var(--r);
  padding: 14px 16px; color: var(--t-sec); font-size: 13.5px; line-height: 1.5;
}
.dl-feats b {
  display: block; margin-bottom: 4px; color: var(--t-hi);
  font: 700 13px/1.3 var(--display); letter-spacing: .05em; text-transform: uppercase;
}

/* the fine print. Links are inline-block with padding so a 12px text link
   still clears the 22px target floor eyeball.py refuses. */
.dl-fine { margin: 26px auto 0; max-width: 62ch; color: var(--t-ter); font-size: 12px; line-height: 1.6; }
.dl-fine a {
  display: inline-block; padding: 6px 3px; color: var(--ember-ink);
  text-decoration: underline; text-underline-offset: 3px;
}
.dl-fine a:hover { color: var(--ember-core); }