/* =====================================================================
   nielsdalgaard.com — /assets/gate.css

   The email step in front of the printable sheet, and the notice that
   says today's free print is spent.

   Built out of the palette in analyzer.css rather than its own colours,
   so it belongs to whichever tool it opens over. Nothing here is loaded
   on a page that has no print button.

   Deliberately not a full-screen takeover: the dialog sits over a
   dimmed page with the results still visible behind it. The reader is
   two seconds from what they asked for, and the page should keep
   saying so.
   ===================================================================== */

.ndg-veil{position:fixed;inset:0;z-index:200;display:flex;align-items:center;
  justify-content:center;padding:24px;
  background:rgba(6,6,7,.74);backdrop-filter:blur(3px)}
.ndg-veil[hidden]{display:none}

.ndg-box{width:100%;max-width:460px;background:linear-gradient(180deg,var(--panel),#111113);
  border:1px solid var(--line-strong);border-radius:16px;padding:30px 30px 26px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.95);position:relative}

.ndg-close{position:absolute;top:12px;right:14px;background:transparent;border:0;
  color:var(--muted2);font-size:22px;line-height:1;cursor:pointer;padding:6px 8px}
.ndg-close:hover{color:var(--cream)}

.ndg-k{font-family:'Oswald',sans-serif;font-size:10.5px;letter-spacing:2.8px;
  text-transform:uppercase;color:var(--pewter);margin-bottom:10px}
.ndg-box h2{font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.5px;font-size:22px;line-height:1.15;margin-bottom:12px;color:var(--cream)}
.ndg-box p{color:var(--muted);font-size:14.5px;line-height:1.6;margin-bottom:18px}
.ndg-box p b{color:var(--cream);font-weight:600}
/* The moment the free print comes back. Kept off a line break of its
   own so the date and the time are never split across two lines. */
.ndg-when{white-space:nowrap}

/* the form */
.ndg-field{display:block;width:100%;background:#0a0a0b;border:1px solid var(--line-strong);
  border-radius:10px;color:var(--cream);font-family:'Inter',system-ui,sans-serif;
  font-size:15px;padding:13px 15px;margin-bottom:14px}
.ndg-field:focus{outline:none;border-color:var(--pewter);
  box-shadow:0 0 0 3px rgba(185,180,170,.10)}
.ndg-field[aria-invalid="true"]{border-color:#c2603f}

.ndg-consent{display:flex;gap:10px;align-items:flex-start;margin-bottom:18px;
  font-size:12.5px;line-height:1.5;color:var(--muted2)}
.ndg-consent input{margin-top:3px;flex:none;accent-color:var(--pewter);width:15px;height:15px}
.ndg-consent a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.ndg-consent a:hover{color:var(--cream)}

.ndg-actions{display:flex;gap:10px;align-items:center}
.ndg-actions .btn{flex:1 1 auto;justify-content:center}

.ndg-note{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  font-size:11.5px;line-height:1.5;color:var(--muted2);margin-bottom:0}

.ndg-err{color:#e08a7a;font-size:13px;margin:-4px 0 14px;min-height:0}
.ndg-err[hidden]{display:none}

/* the spent-quota notice reuses the same box */
.ndg-count{font-family:'Oswald',sans-serif;font-size:44px;line-height:1;
  color:var(--pewter);margin-bottom:14px}

/* the offer, inside that same notice */
.ndg-offer{border:1px solid var(--line-strong);border-radius:12px;
  padding:18px 20px 16px;margin-bottom:18px;background:var(--panel2);position:relative}
.ndg-price{position:absolute;top:16px;right:20px;font-family:'Oswald',sans-serif;
  font-weight:600;font-size:17px;letter-spacing:.5px;color:var(--cream)}
.ndg-offer-t{font-family:'Oswald',sans-serif;font-weight:600;font-size:14px;
  letter-spacing:2px;text-transform:uppercase;color:var(--f-tonic);margin-bottom:8px}
.ndg-offer p{margin:0;font-size:13.5px;line-height:1.55;padding-right:70px}

/* the licence key: long, hyphenated, and read back character by
   character when it goes wrong */
.ndg-key{font-family:'Oswald',sans-serif;letter-spacing:1.5px;font-size:14px;
  text-transform:uppercase}
.ndg-key::placeholder{letter-spacing:1px;text-transform:none;color:var(--muted2)}

.ndg-busy{opacity:.6;pointer-events:none}

/* Never on paper: the dialog is closed before the print dialog opens,
   but a stylesheet is cheaper than trusting that. */
@media print{ .ndg-veil{display:none !important} }

@media (max-width:520px){
  .ndg-box{padding:26px 22px 22px}
  .ndg-box h2{font-size:19px}
}