/**
 * Overlay shown while a "Download All" ZIP is being built.
 *
 * These rules used to be a 20-property inline style.cssText string built in
 * JavaScript, so nothing could theme them and prefers-reduced-motion and
 * prefers-colour-scheme had nowhere to apply.
 *
 * WHY IT IS ON TOKENS NOW
 * -----------------------
 * Moving out of JavaScript fixed where the rules lived and not what they said:
 * the card was still #1a1a1a with #fff on it and the error state still #58151c,
 * so this was the one surface on the site that stayed dark while the rest of
 * the page was light, and the one the contrast checker could not see -- it
 * measures tokens, and there were none here to measure.
 *
 * Every colour below now comes from the theme's palette, which means this panel
 * follows the OS scheme like everything else and is covered by
 * tests/test-contrast.php without a line of its own in it.
 *
 * The scrim is the deliberate exception. It is dark in both schemes because it
 * is not a surface -- it is the page being pushed back, and a pale scrim in
 * light mode reads as a rendering glitch rather than as a modal.
 */

.am-download-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--am-gap, 1rem);
  background: rgb(0 0 0 / .55);
}

.am-download-overlay__card {
  max-width: 26rem;
  padding: var(--am-gap-lg, 1.5rem) var(--am-gap-xl, 2.5rem);
  border: 1px solid var(--am-border, #E2E5EA);
  border-radius: var(--am-radius-lg, 1rem);
  background: var(--am-surface, #FFFFFF);
  color: var(--am-text, #1F2530);
  text-align: center;
  box-shadow: var(--am-shadow-lg, 0 12px 40px rgb(16 24 40 / .12));
}

/* The same 8%-danger-over-surface tint the "important" callout uses, so a
   failed download looks like every other thing that went wrong here. */
.am-download-overlay__card.is-error {
  border-color: color-mix(in oklab, var(--am-danger, #ED1C24) 30%, transparent);
  background: color-mix(in oklab, var(--am-danger, #ED1C24) 8%, var(--am-surface, #FFFFFF));
}

.am-download-overlay__title {
  margin: 0;
  font-size: var(--am-text-lg, 1.0625rem);
  font-weight: 600;
}

.am-download-overlay__card.is-error .am-download-overlay__title {
  color: var(--am-danger-ink, #C0101D);
}

/* Muted through the token rather than through opacity. Fading text is how a
   measured colour quietly stops being the colour that is on screen. */
.am-download-overlay__hint {
  margin: var(--am-gap-sm, .625rem) 0 0;
  font-size: var(--am-text-sm, .875rem);
  color: var(--am-text-muted, #5E6673);
}

.am-download-overlay__card .btn {
  margin-top: var(--am-gap-sm, .625rem);
}