/* ==========================================================================
   Download gate — lead-capture modal
   Triggered when any [data-dl] download button is clicked.
   Uses design system tokens from styles.css; no hard-coded colours.
   ========================================================================== */

/* Overlay */
.dl-overlay{
  position:fixed;inset:0;z-index:9000;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.55);backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;
  transition:opacity var(--dur) var(--ease);
}
.dl-overlay.open{opacity:1;pointer-events:auto}

/* Dialog */
.dl-dialog{
  background:var(--surface);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
  width:min(480px, calc(100vw - 32px));
  padding:var(--s-8) var(--s-8) var(--s-6);
  position:relative;
  transform:translateY(10px);
  transition:transform var(--dur) var(--ease);
}
.dl-overlay.open .dl-dialog{transform:translateY(0)}

/* Close button */
.dl-close{
  position:absolute;top:var(--s-4);right:var(--s-4);
  background:none;border:none;cursor:pointer;
  color:var(--muted);font-size:22px;line-height:1;
  padding:4px 8px;border-radius:var(--r-sm);
  transition:color var(--dur);
}
.dl-close:hover{color:var(--ink)}

/* Header */
.dl-dialog h2{
  font-family:var(--display);font-size:var(--fs-h3);
  margin:0 0 var(--s-2);color:var(--ink);line-height:var(--lh-snug);
}
.dl-dialog .dl-sub{
  font-size:var(--fs-sm);color:var(--muted);margin:0 0 var(--s-6);
}
.dl-platform-badge{
  display:inline-block;font-family:var(--mono);font-size:11px;
  padding:2px 10px;border-radius:var(--r-pill);
  border:1px solid var(--line);color:var(--muted);
  vertical-align:middle;margin-left:6px;
}

/* Form layout */
.dl-form{display:flex;flex-direction:column;gap:var(--s-4)}

.dl-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
@media(max-width:420px){.dl-row{grid-template-columns:1fr}}

.dl-field{display:flex;flex-direction:column;gap:var(--s-1)}
.dl-field label{
  font-family:var(--mono);font-size:12px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
}
.dl-field input{
  appearance:none;
  background:var(--bg);
  border:1.5px solid var(--line);
  border-radius:var(--r-sm);
  color:var(--ink);
  font-family:var(--sans);font-size:var(--fs-base);
  padding:9px 12px;
  transition:border-color var(--dur);
  width:100%;box-sizing:border-box;
}
.dl-field input:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);
}
.dl-field input.error{border-color:var(--accent)}
.dl-field select{
  appearance:none;
  background:var(--bg);
  border:1.5px solid var(--line);
  border-radius:var(--r-sm);
  color:var(--ink);
  font-family:var(--sans);font-size:var(--fs-base);
  padding:9px 12px;
  transition:border-color var(--dur);
  width:100%;box-sizing:border-box;
}
.dl-field select:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);
}
.dl-field select.error{border-color:var(--accent)}
.dl-field .field-err{font-size:12.5px;color:var(--accent-text);display:none}
.dl-field input.error + .field-err,
.dl-field select.error + .field-err{display:block}

/* Privacy note */
.dl-privacy{
  font-size:12.5px;color:var(--muted);
  border-top:1px solid var(--line);
  padding-top:var(--s-3);
  margin-top:var(--s-2);
}
.dl-privacy a{color:var(--accent-text);text-decoration:underline}

/* Submit */
.dl-submit{
  width:100%;padding:13px;font-size:var(--fs-base);font-weight:700;
}

/* States */
.dl-sending .dl-submit{opacity:.6;pointer-events:none}
.dl-err-banner{
  background:var(--accent-soft);border:1px solid var(--line);
  color:var(--accent-text);border-radius:var(--r-sm);
  padding:10px var(--s-4);font-size:var(--fs-sm);
  display:none;
}
.dl-state-error .dl-err-banner{display:block}

/* Success pane */
.dl-success{
  display:none;text-align:center;padding:var(--s-6) 0 var(--s-4);
}
.dl-success svg{color:var(--accent);margin-bottom:var(--s-4)}
.dl-success h3{font-family:var(--display);font-size:var(--fs-h3);margin:0 0 var(--s-3)}
.dl-success p{color:var(--muted);font-size:var(--fs-sm);max-width:34ch;margin:0 auto}
.dl-state-done .dl-form-pane{display:none}
.dl-state-done .dl-success{display:block}

@media(prefers-color-scheme:dark){
  .dl-overlay{background:rgba(0,0,0,.7)}
}
:root[data-theme="dark"] .dl-overlay{background:rgba(0,0,0,.7)}

/* Disabled download buttons — shown before the live date */
.btn.is-disabled,
span.btn.is-disabled{
  opacity:.45;
  cursor:not-allowed;
  pointer-events:none;
  user-select:none;
}
/* Inline disabled text links */
span.is-disabled{
  opacity:.5;
  cursor:not-allowed;
  pointer-events:none;
}