/* wgf-downloads.css - the Downloads window controls (wiki_download_ui.py, owner 2026-10-10:
   "it's not really clear these are download buttons").

   Every file is a client list button (Pet Journal row: petlist-buttonbackground.png, gold
   petlist-buttonselect.png on hover/focus) holding a preview of the file, its label, format
   and size, and the client's red arrow-down button (128-redbutton-arrowdown*.png) with the
   verb "Download". Sounds get the client red button (.wgf-btn-red) as Play/Stop.
   Client art only; no gradients, no navy. The verb, Play/Stop and the group captions print
   from data-l / data-cap so word-count gates never count UI chrome as page text.
   Linked from the block itself (wiki_download_ui.assets_html). Works at 360 px. */

.wgf-dlbox .wgf-dl-group + .wgf-dl-group { margin-top: var(--space-3, 12px); }
.wgf-dl-group__h {
  margin: 0;
  font-family: var(--font-game, "Friz Quadrata", Georgia, serif);
  font-size: var(--text-sm, 0.95rem);
  font-weight: 700;
  color: var(--wgf-gold-bright, #ffd100);
  text-shadow: var(--text-ink-outline, 0 1px 0 #000);
}
.wgf-dl-group__cap { margin: 2px 0 var(--space-2, 8px); color: var(--wgf-neutral-text, #9d9d9d); font-size: 0.85em; }
.wgf-dl-group__cap::before { content: attr(data-cap); }

/* the list: a grid of controls (beats .wgf-wiki-downloads in wgf-chrome.css by specificity) */
.wgf-dlbox .wgf-wiki-downloads.wgf-dl-list,
.wgf-wiki-downloads.wgf-dl-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2, 8px);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
}
.wgf-wiki-downloads > li.wgf-dl-item,
.wgf-wiki-downloads > li.wgf-dl-snd { min-width: 0; padding: 0; background: none; border: 0; }

/* ── one download control ─────────────────────────────────────────────────────────────── */
.wgf-wiki-downloads a.wgf-dl,
a.wgf-dl {
  display: flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  width: 100%;
  min-height: 52px;
  padding: 5px 6px 5px 8px;
  background: url(/assets/ui/petlist-buttonbackground.png) center / 100% 100% no-repeat;
  color: var(--wgf-text, #f4ecd8);
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.wgf-wiki-downloads a.wgf-dl:hover,
.wgf-wiki-downloads a.wgf-dl:focus-visible,
a.wgf-dl:hover,
a.wgf-dl:focus-visible {
  background:
    url(/assets/ui/petlist-buttonselect.png) center / 100% 100% no-repeat,
    url(/assets/ui/petlist-buttonbackground.png) center / 100% 100% no-repeat;
  text-decoration: none;
}
a.wgf-dl:focus-visible {
  outline: 2px solid var(--wgf-gold-bright, #ffd100);
  outline-offset: 2px;
  box-shadow: var(--focus-ring, none);
}
a.wgf-dl:active { transform: translateY(1px); }

/* preview: the file itself in the client's empty slot frame */
.wgf-dl__thumb {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: url(/assets/ui/professions-slot-frame.png) center / 100% 100% no-repeat;
}
.wgf-dl__thumb img { display: block; width: 34px; height: 34px; object-fit: cover; }
.wgf-dl__thumb--background,
.wgf-dl__thumb--render { width: 64px; }
.wgf-dl__thumb--background img,
.wgf-dl__thumb--render img { width: 58px; }

.wgf-dl__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.wgf-dl__what {
  font-family: var(--font-game, "Friz Quadrata", Georgia, serif);
  font-size: var(--text-sm, 0.95rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--wgf-gold-bright, #ffd100);
  text-shadow: var(--text-ink-outline, 0 1px 0 #000);
  overflow-wrap: anywhere;
}
.wgf-dl .wgf-dl__meta.wgf-wiki-fmt { margin: 0; font-size: 0.85em; color: var(--wgf-neutral-text, #9d9d9d); }

/* the client's red arrow-down button + the verb */
.wgf-dl__go {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--wgf-gold-bright, #ffd100);
  font-family: var(--font-game, "Friz Quadrata", Georgia, serif);
  font-size: var(--text-xs, 0.8rem);
  font-weight: 700;
  text-shadow: var(--text-ink-outline, 0 1px 0 #000);
}
.wgf-dl__go::before {
  content: "";
  width: 38px;
  height: 38px;
  background: url(/assets/ui/128-redbutton-arrowdown.png) center / 100% 100% no-repeat;
}
.wgf-dl__go::after { content: attr(data-l); }
a.wgf-dl:hover .wgf-dl__go::before,
a.wgf-dl:focus-visible .wgf-dl__go::before {
  background:
    url(/assets/ui/128-redbutton-arrowdown-highlight.png) center / 100% 100% no-repeat,
    url(/assets/ui/128-redbutton-arrowdown.png) center / 100% 100% no-repeat;
}
a.wgf-dl:active .wgf-dl__go::before {
  background: url(/assets/ui/128-redbutton-arrowdown-pressed.png) center / 100% 100% no-repeat;
}

/* ── sounds: one row per file, Play + its formats ─────────────────────────────────────── */
.wgf-wiki-downloads > li.wgf-dl-snd { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; }
.wgf-dl-snd + .wgf-dl-snd { padding-top: 6px; border-top: 1px solid var(--wgf-border-neutral-soft, rgba(183, 145, 47, 0.25)); }
.wgf-dl-snd__head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wgf-dl-snd__name { min-width: 0; color: var(--wgf-text, #f4ecd8); font-weight: 700; overflow-wrap: anywhere; }
.wgf-dl-snd__files {
  display: grid;
  gap: var(--space-2, 8px);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
}
.wgf-btn-red.wgf-dl__play { --wgf-btn-h: 44px; --wgf-btn-cap: 19px; flex: none; min-width: 88px; }
.wgf-dl__play::before { content: attr(data-l); }
.wgf-dl__play.is-playing::before { content: attr(data-l-on); }

@media (max-width: 420px) {
  .wgf-dl { gap: 8px; }
  .wgf-dl--compact .wgf-dl__go::after { content: none; }
}
@media (prefers-reduced-motion: reduce) { a.wgf-dl:active { transform: none; } }