/* The panel /assets/download-prompt.js shows after a Download click. Self-contained: it uses the site's tokens
   where a page defines them (index.html, site.css, account.css) and the same values as fallbacks. */

.dlp {
  position: relative;
  margin: 18px 0 0;
  max-width: 520px;
  padding: 20px 22px 18px;
  text-align: left;
  color: var(--text, #F2F3F5);
  background: var(--surface, #0E121A);
  border: 1px solid var(--line-2, rgba(185,197,217,.18));
  border-radius: var(--radius, 18px);
  box-shadow: 0 18px 50px -24px rgba(0,0,0,.8);
  font: 400 15px/1.55 "DM Sans", system-ui, -apple-system, sans-serif;
}
@media (prefers-reduced-motion: no-preference) {
  .dlp { animation: dlp-in .35s cubic-bezier(.22,1,.36,1); }
  @keyframes dlp-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}
/* The landing page pauses its motion while the tab is hidden; the panel must never be left stuck half-faded. */
.paused .dlp { animation: none !important; }
/* The centered final call to action keeps the panel under its button. */
.final .dlp { margin-left: auto; margin-right: auto; }

/* Buttons in the header or the sticky bar: a card in the corner instead. */
.dlp.dlp-float {
  position: fixed; z-index: 60; right: 24px; bottom: 24px; margin: 0; width: min(420px, calc(100vw - 32px));
}
@media (max-width: 600px) {
  .dlp.dlp-float { left: 16px; right: 16px; bottom: 16px; width: auto; }
}

.dlp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dlp-title {
  margin: 0; font: 400 20px/1.25 "Space Grotesk", system-ui, sans-serif; letter-spacing: -.01em; color: var(--text, #F2F3F5);
  max-width: none;
}
/* The heading takes focus only programmatically, so screen readers land on it; it isn't a control. */
.dlp-title:focus, .dlp-title:focus-visible { outline: none; }
.dlp-close {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: -6px -8px 0 0;
  padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--sub, #B9C5D9); font: 400 22px/1 system-ui, sans-serif; cursor: pointer;
}
.dlp-close:hover { color: var(--text, #F2F3F5); background: rgba(242,243,245,.06); }

.dlp-lead { margin: 8px 0 0; color: var(--sub, #B9C5D9); }
.dlp-steps { margin: 10px 0 0; padding: 0 0 0 1.4em; color: var(--sub, #B9C5D9); }
.dlp-steps li { margin: 2px 0; padding-left: 2px; }
.dlp-steps li::marker { color: var(--ice, #A7BCFF); }

.dlp-form { margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line, rgba(185,197,217,.11)); }
.dlp-ask { margin: 0 0 10px; color: var(--text, #F2F3F5); font-weight: 500; }
.dlp-row { display: flex; flex-wrap: wrap; gap: 8px; }
.dlp-input {
  flex: 1 1 200px; min-width: 0; min-height: 44px; padding: 10px 16px; border-radius: 999px;
  border: 1px solid rgba(185,197,217,.3); background: rgba(9,12,18,.62); color: var(--text, #F2F3F5);
  font: 400 15px/1.2 "DM Sans", system-ui, sans-serif;
}
.dlp-input::placeholder { color: var(--faint, #7D8AA3); }
.dlp-input:focus-visible { outline: 2px solid var(--ice, #A7BCFF); outline-offset: 2px; }
.dlp-input[aria-invalid="true"] { border-color: #F2A58E; }
/* Both buttons the same size and weight: saying no is as easy as saying yes. */
.dlp-btn {
  flex: 0 0 auto; min-height: 44px; padding: 10px 18px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(185,197,217,.3); background: transparent; color: var(--text, #F2F3F5);
  font: 500 14.5px/1.2 "DM Sans", system-ui, sans-serif; white-space: nowrap;
}
.dlp-btn:hover { border-color: rgba(185,197,217,.55); background: rgba(242,243,245,.04); }
.dlp-btn:focus-visible, .dlp-close:focus-visible { outline: 2px solid var(--ice, #A7BCFF); outline-offset: 3px; }
.dlp-btn:disabled { opacity: .6; cursor: default; }
/* Phones: the field on its own line, then the two buttons side by side, the same width. */
@media (max-width: 480px) {
  .dlp { padding: 18px 16px 16px; }
  .dlp-input { flex: 1 1 100%; }
  .dlp-row .dlp-btn { flex: 1 1 0; }
}

.dlp-fine { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--faint, #7D8AA3); }
.dlp-fine a, .dlp-lead a { color: var(--ice, #A7BCFF); text-underline-offset: 3px; }
.dlp-status { margin: 8px 0 0; min-height: 0; font-size: 14px; color: var(--sub, #B9C5D9); }
.dlp-status:empty { display: none; }
.dlp-status.dlp-ok { color: var(--text, #F2F3F5); }

.dlp-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }