/* Deus XT "Notify me" form. One component on index.html, download.html and
   notify.html, always on a dark box. Uses the site tokens (--orange, --ink,
   --paper, --text, --display) that both index.html and site.css define. */
.nf{--nf-line:#3A3A40;--nf-sub:#9C9CA3;--nf-bad:#FF7A5C;
  margin-top:10px;border-radius:22px;padding:clamp(18px,3vw,28px);background:#1C1C1F;color:#fff;
  box-shadow:inset 0 0 0 1.5px #2E2E33;min-width:0;font-family:var(--text)}
.nf-h{margin:0 0 16px;font:900 clamp(28px,3.4vw,40px)/.9 var(--display);font-stretch:75%;text-transform:uppercase;letter-spacing:-.005em}
.nf-grid{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:14px 18px;align-items:start}
.nf-pfs{margin:0;padding:0;border:0;min-width:0}
.nf-l{display:block;margin:0 0 8px;padding:0;font:800 10.5px/1.35 var(--text);letter-spacing:.07em;text-transform:uppercase;color:var(--nf-sub)}
.nf-pfrow{display:flex;gap:8px}
.nf-pf{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-width:0;height:48px;padding:0 20px;border:0;border-radius:999px;cursor:pointer;
  background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4);
  font:800 12px/1 var(--text);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  transition:background .2s var(--ease,ease),color .2s var(--ease,ease),box-shadow .2s var(--ease,ease)}
.nf-pf::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;box-shadow:inset 0 0 0 1.5px currentColor;transition:background .2s}
.nf-pf:hover{box-shadow:inset 0 0 0 1.5px #fff}
.nf-pf[aria-pressed="true"]{background:var(--orange);color:var(--ink);box-shadow:none}
.nf-pf[aria-pressed="true"]::before{background:var(--ink);box-shadow:none}
.nf-row{display:flex;gap:8px;min-width:0}
.nf-in{flex:1 1 auto;min-width:0;width:100%;height:48px;padding:0 20px;border:0;border-radius:999px;background:#0E0E10;color:#fff;
  box-shadow:inset 0 0 0 1.5px var(--nf-line);font:500 16px/1 var(--text);-webkit-appearance:none;appearance:none}
.nf-in::placeholder{color:#6E6E76}
.nf-in:hover{box-shadow:inset 0 0 0 1.5px #5E5E66}
.nf-in:focus{outline:none;box-shadow:inset 0 0 0 2px var(--orange)}
.nf-in[aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--nf-bad)}
.nf-go{flex:none;height:48px;padding:0 24px;border:0;border-radius:999px;cursor:pointer;background:var(--orange);color:var(--ink);
  font:800 12px/1 var(--text);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;transition:background .2s,transform .2s}
.nf-go:hover{background:var(--paper)}
.nf-go:active{transform:scale(.97)}
.nf-go[aria-busy="true"]{cursor:progress;background:#C9C9D1}
.nf :focus-visible{outline:2.5px solid var(--orange);outline-offset:3px}
.nf-in:focus-visible{outline:none}
.nf-err{display:flex;align-items:center;gap:8px;margin:8px 0 0;font-size:14px;line-height:1.35;color:var(--nf-bad)}
.nf [hidden]{display:none!important}
.nf-err::before,.nf-msg.is-err::before{content:"!";flex:none;display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--nf-bad);color:var(--ink);font:800 11px/1 var(--text)}
.nf-msg{margin:12px 0 0;font-size:14px;line-height:1.4}
.nf-msg:empty{display:none}
.nf-msg.is-err{display:flex;align-items:flex-start;gap:8px;color:var(--nf-bad)}
.nf-msg:focus{outline:none}
.nf-fine{margin:12px 0 0;font-size:13px;line-height:1.45;color:var(--nf-sub)}
.nf-fine a{color:#fff}
.nf-ts:empty{display:none}
.nf-ts{margin-top:12px}
.nf-hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.nf{position:relative}
/* success: the inputs go, the message stays where the live region already was */
.nf.is-done .nf-grid,.nf.is-done .nf-ts{display:none}
.nf.is-done .nf-msg{display:flex;align-items:center;gap:12px;margin:0;font:900 clamp(24px,3vw,34px)/1 var(--display);font-stretch:75%;text-transform:uppercase;color:#fff}
.nf.is-done .nf-msg::before{content:"";flex:none;width:14px;height:14px;border-radius:50%;background:var(--orange)}
@media (max-width:760px){
  .nf-grid{grid-template-columns:minmax(0,1fr)}
  .nf-row{flex-direction:column}
  .nf-go{width:100%}
}
@media (prefers-reduced-motion:reduce){.nf-pf,.nf-pf::before,.nf-go{transition:none}.nf-go:active{transform:none}}

/* the no-JavaScript reply page (rendered by the Worker) */
.nf-page{max-width:720px;margin:0 auto;padding:16px}
.nf-done{display:flex;flex-direction:column;gap:6px}
.nf-done .logo{display:inline-block;width:44px;margin-bottom:18px}
.nf-done .ph1{font-size:clamp(40px,8vw,72px)}
.nf-done p{margin:0 0 10px;font-size:17px;line-height:1.5;color:#E4E4E6}
.nf-done .nf-fine{font-size:14px}
.nf-done .pill{margin-top:8px}

/* "Checking…": the bot check is still running. Small, calm, still clickable
   (a submit waits for the token). */
.nf-go.is-checking{background:#3A3A40;color:#C9C9D1;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.nf-go.is-checking::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--orange);animation:nfPulse 1s ease-in-out infinite alternate}
.nf-go.is-checking:hover{background:#46464D}
@keyframes nfPulse{from{opacity:.35}to{opacity:1}}

/* ---------- the pop-up (assets/notify.js builds it) ---------- */
html.nf-lock,html.nf-lock body{overflow:hidden}
.nf-dlg{width:min(480px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);margin:auto;padding:0;border:0;border-radius:22px;
  background:transparent;color:#fff;overflow:auto;overscroll-behavior:contain}
.nf-dlg::backdrop{background:rgba(7,7,7,.72);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.nf-dlg .nf{margin:0;border-radius:inherit;box-shadow:inset 0 0 0 1.5px #2E2E33,0 24px 60px rgba(0,0,0,.5)}
.nf-dlg .nf-grid{grid-template-columns:minmax(0,1fr)}
.nf-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:0 0 16px}
.nf-top .nf-h{margin:0;padding-top:6px}
.nf-x{flex:none;display:grid;place-items:center;width:44px;height:44px;margin:-4px -6px 0 0;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3);transition:background .2s,box-shadow .2s}
.nf-x svg{width:16px;height:16px}
.nf-x:hover{background:#fff;color:#070707;box-shadow:none}
.nf-dlg.is-out,.nf-dlg.is-out::backdrop{pointer-events:none}
.nf-dlg[open]{animation:nfIn .22s cubic-bezier(.22,1,.36,1)}
.nf-dlg[open]::backdrop{animation:nfFade .22s ease-out}
.nf-dlg.is-out{animation:nfOut .2s ease-in forwards}
.nf-dlg.is-out::backdrop{animation:nfFade .2s ease-in reverse forwards}
@keyframes nfIn{from{opacity:0;transform:translateY(10px) scale(.98)}}
@keyframes nfOut{to{opacity:0;transform:translateY(10px) scale(.98)}}
@keyframes nfFade{from{opacity:0}}

/* phones: a bottom sheet that stays above the on-screen keyboard
   (--nf-kb and --nf-vh come from the visual viewport in notify.js) */
@media (max-width:640px){
  .nf-dlg{width:100%;max-width:100%;inset:auto 0 var(--nf-kb,0px) 0;margin:0;border-radius:24px 24px 0 0;
    max-height:calc(var(--nf-vh,100dvh) - 12px)}
  .nf-dlg .nf{padding:18px 16px calc(18px + env(safe-area-inset-bottom));box-shadow:inset 0 1.5px 0 #2E2E33}
  .nf-dlg .nf-h{font-size:30px}
  .nf-dlg[open]{animation:nfUp .28s cubic-bezier(.22,1,.36,1)}
  .nf-dlg.is-out{animation:nfDown .2s ease-in forwards}
  @keyframes nfUp{from{transform:translateY(100%)}}
  @keyframes nfDown{to{transform:translateY(100%)}}
}
@media (prefers-reduced-motion:reduce){
  .nf-dlg[open],.nf-dlg[open]::backdrop,.nf-dlg.is-out,.nf-dlg.is-out::backdrop,.nf-go.is-checking::before{animation:none}
  .nf-x{transition:none}
}