/* =============================================================================
   download.html — the figures that make the download page a picture.

   On the Paper tokens every page loads from css/store.css:
     the plugin, live   Tangle's real rack rig (js/tangle.js TangleHero, the
                        same mount as the homepage hero: randomize shelf,
                        rack, MAIN OUTPUT meters, AUDIO HISTORY strip) in the
                        wood-cheeked case the plugin draws around a rack,
                        posed from the upper left; it is the plugin: click
                        anything (.wa-shot, css/lander.css)
     the download       the button and the note under it (.dl-get)
     the formats grid   a table of OS x format, its ticks drawn in as it
                        scrolls into view (.dl-fm), and the trial fortnight
                        (.dl-days)
     the laptop         js/wa-walkthrough.js scenes 1, 6, 7 and 8 looping
                        beside the four steps from the download to a DAW
                        (.dl-after), in the walkthrough's line-drawn style
   Every figure's BASE style is its finished frame; an animation only says where
   a part starts, so reduced motion and no JS leave a complete still picture.
   ========================================================================== */

/* ────────────── the stage card every figure sits in ────────────── */
.dl-stage {
  background: var(--surface); border: 1px solid var(--ink); border-radius: 3px;
  box-shadow: 3px 3px 0 var(--hairline2); padding: 12px 10px 4px;
}

/* ────────────── hero ────────────── */
.dl-hero { padding: 20px 0 6px; }

/* ────────────── the download (js/download.js mountDownload) ──────────────
   The note under the button: what the download needs before it starts, then
   what is coming down (.is-ok) or why it could not (.is-error). Two lines
   reserved, so the hero does not jump when the status replaces the note. */
.dl-get__note {
  margin: 0; min-height: 3.4em; max-width: 56ch;
  font-size: 11px; letter-spacing: 0.4px; line-height: 1.7; color: var(--inkMuted);
}
.dl-get__note.is-ok { color: var(--ink); }
.dl-get__note.is-error { color: var(--oxblood); }
.dl-get__note a { color: var(--oxblood); border-bottom: 1px solid var(--hairline); }
.dl-get__other { margin: 4px 0 0; font-size: 11px; letter-spacing: 0.4px; }
.dl-get__other[hidden] { display: none; }
.dl-get__other button {
  padding: 0; background: none; border: none; cursor: pointer;
  font: inherit; color: var(--oxblood); border-bottom: 1px solid var(--hairline);
}

/* ────────────── the plugin, live, in its case ──────────────
   .wa-shot / .wa-case / .wa-rig / .wa-shot__cap are css/lander.css's since
   2026-11-02, when the same shot became the homepage hero. */

@keyframes dl-draw { from { stroke-dashoffset: 1; } }
@keyframes dl-pop  { from { opacity: 0; transform: scale(.6); } }

/* ────────────── what the manager installs: the four notes ────────────── */
.dl-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 18px 0 8px; }
.dl-notes .gs-note { margin: 0; }
.dl-notes .gs-note ul { margin: 6px 0 0 18px; color: var(--inkMuted); }
.dl-notes .gs-note li { margin: 2px 0; }
.dl-notes .gs-note li a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--hairline); }
.dl-notes .gs-note li a:hover { color: var(--oxblood); }
@media (max-width: 760px) { .dl-notes { grid-template-columns: 1fr; } }

/* the trial fortnight: fourteen days, filled in one by one */
.dl-days { float: right; width: 92px; height: 44px; margin: 0 0 8px 16px; }
.dl-days rect { fill: var(--oxblood); transform-box: fill-box; transform-origin: center; }
.dl-days rect.last { fill: var(--ink); }
.dl-days text { font: 600 8px 'JetBrains Mono', 'JetBrains Mono Fallback', ui-monospace, monospace; fill: var(--inkMuted); letter-spacing: 1px; }
.dl-notes[data-play="1"] .dl-days rect { animation: dl-pop .25s ease-out var(--d, 0s) both; }

/* ────────────── formats and requirements ────────────── */
.dl-fm {
  background: var(--surface); border: 1px solid var(--ink); border-radius: 3px;
  box-shadow: 3px 3px 0 var(--hairline2); padding: 16px 20px 14px; margin: 18px 0 22px;
}
.dl-fm table { width: 100%; border-collapse: collapse; }
.dl-fm th, .dl-fm td { border-top: 1px solid var(--hairline); padding: 12px 6px; vertical-align: middle; }
.dl-fm thead th {
  border-top: 0; padding: 0 6px 10px;
  font-family: 'JetBrains Mono', 'JetBrains Mono Fallback', ui-monospace, monospace;
  font-size: 10px; font-weight: 600; letter-spacing: 2px; color: var(--oxblood); text-transform: lowercase; text-align: center;
}
.dl-fm thead th:first-child, .dl-fm tbody th { text-align: left; padding-left: 0; }
.dl-fm tbody th {
  font-family: 'Inter Tight', 'Inter Tight Fallback', system-ui, sans-serif;
  font-weight: 700; font-size: 18px; letter-spacing: -.02em; color: var(--ink); line-height: 1.2;
}
.dl-fm tbody th small {
  display: block; margin-top: 3px;
  font-family: 'JetBrains Mono', 'JetBrains Mono Fallback', ui-monospace, monospace;
  font-size: 10.5px; font-weight: 500; letter-spacing: .4px; color: var(--inkMuted); text-transform: lowercase;
}
.dl-fm td { text-align: center; width: 19%; }
.dl-tick { width: 26px; height: 26px; display: inline-block; vertical-align: middle; }
.dl-tick circle { fill: var(--olive); transform-box: fill-box; transform-origin: center; }
.dl-tick path { fill: none; stroke: var(--bg); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.dl-no { font-family: 'JetBrains Mono', 'JetBrains Mono Fallback', ui-monospace, monospace; font-size: 14px; font-weight: 600; color: var(--inkFaint); }
.dl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dl-fm[data-play="1"] .dl-tick circle { animation: dl-pop .3s ease-out var(--d, 0s) both; }
.dl-fm[data-play="1"] .dl-tick path   { animation: dl-draw .35s ease calc(var(--d, 0s) + .15s) both; }
/* the three facts under the table, each with a glyph */
.dl-fm__foot { display: flex; flex-wrap: wrap; gap: 12px 30px; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--ink); }
.dl-fm__chip { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--ink); max-width: 30ch; line-height: 1.35; }
.dl-fm__chip svg { width: 40px; height: 28px; flex: 0 0 auto; }
.dl-fm__chip .ink { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dl-fm__chip .fill { fill: var(--surface2); stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
.dl-fm__chip .ox { fill: none; stroke: var(--oxblood); stroke-width: 2.4; stroke-linecap: round; }
.dl-fm__chip .ol { fill: var(--olive); }
@media (max-width: 560px) {
  .dl-fm { padding: 12px 12px 10px; }
  .dl-fm tbody th { font-size: 15px; }
  .dl-fm tbody th small { font-size: 9.5px; }
  .dl-tick { width: 22px; height: 22px; }
}

/* ────────────── from the download to your daw: the laptop loop + its steps ────────────── */
.dl-after {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 22px 34px; align-items: center; margin: 8px 0 14px;
}
@media (max-width: 820px) { .dl-after { grid-template-columns: 1fr; } }
.dl-steps { list-style: none; counter-reset: dl; margin: 0; padding: 0; }
.dl-steps li {
  counter-increment: dl; position: relative; padding: 0 0 20px 42px;
  font-size: 15px; color: var(--inkMuted); line-height: 1.5;
  opacity: .5; transition: opacity .3s ease;
}
.dl-steps li.on { opacity: 1; }
.dl-steps li::before {
  content: counter(dl, decimal-leading-zero);
  position: absolute; left: 0; top: 1px;
  font-family: 'JetBrains Mono', 'JetBrains Mono Fallback', ui-monospace, monospace;
  font-size: 11px; font-weight: 700; color: var(--oxblood); letter-spacing: 1px;
}
/* time left on the step showing; .run is set by the walkthrough with stepMs */
.dl-steps li::after {
  content: ""; position: absolute; left: 42px; right: 0; bottom: 9px; height: 2px;
  background: var(--oxblood); transform: scaleX(0); transform-origin: 0 50%;
}
.dl-steps li.run::after { animation: dl-run 5.2s linear forwards; }
@keyframes dl-run { to { transform: scaleX(1); } }
.dl-step-go { font: inherit; font-weight: 600; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.dl-step-go:hover { color: var(--oxblood); }
.dl-steps a { color: var(--oxblood); border-bottom: 1px solid var(--hairline); text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  .dl-fm *, .dl-days *, .dl-steps li::after { animation: none !important; transition: none !important; }
  .dl-steps li { opacity: 1; }
}