/* The liya CLI download (cli-download.js): a Download button whose menu lists
   the published builds by OS, the visitor's own marked recommended, and the
   one-line installer under it. On the home hero and on /download. */
.dl { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.hero .dl { margin-top: 28px; }
.hero .dl .hero-actions { margin: 0; }
.hero .dl .he-alt { margin-top: 6px; }
.dl-row { display: inline-flex; gap: 10px; flex-wrap: wrap; justify-content: center; position: relative; }
.dl-wrap { position: relative; }
.dl-btn { cursor: pointer; }
.dl-btn svg { width: 10px; height: 10px; transition: transform 160ms; }
.dl-btn[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Pressed: diagonal stripes scroll across the button while the download
   starts (Factory's press, in our ink). */
.dl-btn.dl-going {
  background-color: var(--paper); color: var(--ink);
  background-image: repeating-linear-gradient(-45deg, rgba(17, 17, 17, 0.32) 0 1.5px, transparent 1.5px 6px);
  background-size: 8.5px 8.5px;
  outline: 1px solid var(--ink); outline-offset: 3px;
  animation: dl-stripes 600ms linear infinite;
}
@keyframes dl-stripes { to { background-position: 8.5px 0; } }

.dl-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 270px;
  background: var(--paper); border: 1px solid var(--line-2); border-radius: 4px;
  box-shadow: 0 14px 40px rgba(17, 17, 17, 0.14); padding: 4px 0; text-align: left;
  font: 500 11.5px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
}
.dl-menu[hidden] { display: none; }
.dl-group + .dl-group { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }
.dl-group b { display: block; padding: 9px 12px 6px; font-weight: 600; color: var(--ink); }
.dl-menu a {
  display: flex; justify-content: space-between; gap: 18px; padding: 9px 12px 9px 16px;
  color: var(--ink-2); text-decoration: none;
}
.dl-menu a:hover, .dl-menu a:focus-visible { background: var(--ground-2); color: var(--ink); outline: none; }
.dl-menu a .dl-rec { color: var(--signal-text); }
.dl-menu .dl-all { border-top: 1px solid var(--line); margin-top: 4px; color: var(--ink); }

.dl-cmd {
  display: inline-flex; align-items: center; gap: 12px; max-width: 100%;
  background: var(--ground-2); border: 1px solid var(--line); border-radius: 4px;
  padding: 8px 8px 8px 12px; font: 12.5px/1.2 var(--mono); color: var(--ink);
}
.dl-cmd code { white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
.dl-cmd code::-webkit-scrollbar { display: none; }
.dl-cmd code::before { content: "> "; color: var(--mute); }
.dl-copy {
  flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px;
  border: 0; border-radius: 3px; background: transparent; color: var(--mute); cursor: pointer;
}
.dl-copy:hover { color: var(--ink); background: var(--ground); }
.dl-copy svg { width: 15px; height: 15px; }
.dl-copy[data-done] { color: var(--ok-text); }

/* /download: every build, with its checksum. */
.dl-table { width: 100%; border-collapse: collapse; font: 13px/1.4 var(--sans); }
.dl-table th, .dl-table td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.dl-table th { font: 500 11px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); }
.dl-table code { font: 11.5px/1.4 var(--mono); color: var(--ink-2); word-break: break-all; }
.dl-cmds { display: grid; gap: 14px; justify-items: start; }
.dl-cmds p { margin: 0; color: var(--ink-2); }

@media (max-width: 560px) {
  .dl-menu { left: 50%; transform: translateX(-50%); }
  .dl-cmd { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .dl-btn.dl-going { animation: none; }
}