/* Omega Mega — the paper plane at the door (js/plane.js). "Let the games begin!" throws a paper plane across the screen; it lands
   in front of the reader and unfolds into a sheet of loose-leaf asking who they are. The sheet is a 460×596 drawing (js/sheet.js),
   and everything written on it is placed in the drawing's own units, --u = 1/460 of the sheet's width, so the fields stay on
   their ruled lines at any size. */
dialog.plane{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:16px;border:0;background:transparent;
  color:var(--bic);overflow:auto;overscroll-behavior:contain;--bic:#1d3d9c;--red:#c2333c;
  --hand:"Bradley Hand","Noteworthy","Marker Felt","Segoe Print","Ink Free",cursive}
dialog.plane[open]{display:grid}
dialog.plane::backdrop{background:rgba(6,6,12,.74)}
dialog.plane.flying::backdrop{animation:plane-dim .5s ease-out both}
@keyframes plane-dim{from{background:rgba(6,6,12,0)}}

/* the sheet: as big as fits, never wider than the drawing; never under ~300px wide either, so on a short landscape screen it
   scrolls instead of shrinking past reading. margin:auto centres it only while it fits, so the top never clips off-screen. */
.plane-sheet{position:relative;margin:auto;width:min(100%,max(300px,min(460px,calc((100dvh - 32px) * 460 / 596))));aspect-ratio:460/596;transform:rotate(1.1deg);
  filter:drop-shadow(0 18px 26px rgba(0,0,0,.55)) drop-shadow(0 2px 3px rgba(0,0,0,.4))}
.plane-fold{position:absolute;inset:0;container-type:inline-size;transform-origin:50% 40%}
.plane-fold > svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.plane-dart{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;transform-origin:50% 50%;visibility:hidden}
.plane-trail{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.plane-trail circle{fill:#f6f1e2;opacity:0}

/* what's written on it */
.plane-ink{--u:calc(100cqw / 460);position:absolute;inset:0;margin:0}
.plane-form,.plane-done{position:absolute;inset:0;margin:0}
.pn{position:absolute;left:calc(var(--x) * var(--u));top:calc(var(--t) * var(--u));margin:0;color:var(--bic);font:400 calc(var(--s,20) * var(--u))/1.05 var(--hand);
  letter-spacing:0;text-transform:none;transform:rotate(var(--r,0deg));transform-origin:0 0;white-space:nowrap}
.pn-boxes{display:flex;gap:calc(14 * var(--u))}
.pn-boxes span::before{content:"";display:inline-block;width:calc(15 * var(--u));height:calc(15 * var(--u));border:calc(1.8 * var(--u)) solid var(--bic);
  margin-right:calc(5 * var(--u));vertical-align:-10%;border-radius:2px 4px 1px 3px}
.pn-boxes .x::before{background:linear-gradient(45deg,transparent 42%,var(--bic) 42% 58%,transparent 58%),linear-gradient(-45deg,transparent 42%,var(--bic) 42% 58%,transparent 58%)}
.pn-err{color:var(--red);font-weight:700}
.pn-err:empty{clip-path:inset(50%)}                        /* not display:none, so the live region is always there to announce */
.pn-err:not(:empty) ~ .pn-ask{visibility:hidden}

.pr{position:absolute;left:calc(72 * var(--u));right:calc(26 * var(--u));top:calc((var(--y) - 56) * var(--u));height:calc(56 * var(--u));
  display:flex;align-items:flex-end;gap:calc(8 * var(--u))}
.pr label{font:700 calc(19 * var(--u))/1 var(--hand);color:var(--bic);opacity:.9;white-space:nowrap;transform:rotate(var(--r,-1.5deg));padding-bottom:calc(5 * var(--u))}
.pr input{flex:1;min-width:0;height:100%;margin:0;border:0;border-radius:0;background:transparent;color:var(--bic);font:max(16px,calc(21 * var(--u)))/1 var(--hand);
  padding:calc(22 * var(--u)) calc(4 * var(--u)) calc(4 * var(--u));outline:none;-webkit-appearance:none;appearance:none}
.pr input:focus{background:linear-gradient(transparent 80%,rgba(246,240,138,.6) 80%)}
.pr input:focus-visible{box-shadow:0 calc(2 * var(--u)) 0 var(--bic)}
.pr input[aria-invalid="true"]{background:linear-gradient(transparent 88%,rgba(194,51,60,.28) 88%)}
.pr input::placeholder{color:rgba(29,61,156,.6)}
.hp{position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;opacity:0}   /* the honeypot, label and all */

.pgo{position:absolute;left:50%;top:calc((var(--by) - 22) * var(--u));transform:translateX(-50%) rotate(-2deg);font:700 calc(21 * var(--u))/1 var(--hand);
  color:var(--bic);background:transparent;padding:calc(10 * var(--u)) calc(24 * var(--u));border:calc(2.4 * var(--u)) solid var(--bic);cursor:pointer;
  border-radius:255px 15px 225px 15px / 15px 225px 15px 255px;white-space:nowrap;min-height:44px}
.pgo:hover,.pgo:focus-visible{background:rgba(246,240,138,.6)}
.pgo:focus-visible{outline:2px dashed var(--bic);outline-offset:4px}
.pgo[disabled]{cursor:progress;opacity:.7}
/* the foot: the fine print (the list's own consent words, verbatim), then SEND, so the words come before the button both to
   the eye and to the keyboard. On a full-size sheet it's written on the paper under the handle line. A small sheet has no
   room for it at a size anyone can read, so there it hangs just below the paper on a dark card, cream words, SEND on a
   torn-off scrap; the dialog keeps room for it below (the @media mirrors the sheet's width: under 420px). */
.pfoot{position:absolute;left:calc(68 * var(--u));right:calc(34 * var(--u));top:calc(434 * var(--u));display:flex;flex-direction:column;align-items:center;
  gap:calc(8 * var(--u))}
.pfoot .pgo{position:static;transform:rotate(-2deg)}
.pfine{align-self:stretch;margin:0;font:max(10px,calc(11.5 * var(--u)))/1.28 ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:#33426b}
.pfine label{display:block;font-weight:600;cursor:pointer}
.pfine small{font-size:1em;font-weight:400;opacity:.8}
.pfine input{width:max(13px,calc(14 * var(--u)));height:max(13px,calc(14 * var(--u)));margin:0 4px 0 0;vertical-align:-2px;accent-color:var(--bic)}
.pfine a{color:inherit}
.pfine p{margin:2px 0 0}
@container (max-width:419.9px){
  .pfoot{left:0;right:0;top:calc(100% + 10px);gap:14px;padding:12px 12px 14px;border-radius:12px;background:rgba(6,6,12,.9)}   /* its own dark card, so the page behind never shows through the words */
  .pfine{font-size:12.5px;line-height:1.4;color:#f6f1e2}
  .pfine small{opacity:.88}
  .pfine p{margin-top:6px}
  .pfine input{width:16px;height:16px;vertical-align:-3px}
  .pfoot .pgo{font-size:18px;padding:10px 26px;border-width:2px;background:#f6f1e2;box-shadow:0 6px 14px rgba(0,0,0,.45)}
  .pfoot .pgo:hover,.pfoot .pgo:focus-visible{background:#f6f08a}
  .pfoot .pgo:focus-visible{outline-color:#f6f1e2}
}
@media (max-width:451px),(max-height:576px){dialog.plane{padding-bottom:250px}}

/* after it's sent */
.plane-done[hidden],.plane-form[hidden]{display:none}
.pdone-big{font-weight:700}
.pdone-go{top:calc((var(--by) - 22) * var(--u))}
.pdone-x{position:absolute;left:50%;transform:translateX(-50%);top:calc(var(--fy) * var(--u));font:max(11px,calc(13 * var(--u)))/1.3 ui-sans-serif,system-ui,sans-serif;color:#33426b;white-space:nowrap}
.pdone-x a{color:inherit}

/* nvm: a dark chip, so it reads over the sheet, the backdrop or the page behind */
.nvm{position:fixed;top:max(10px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));z-index:2;min-width:44px;min-height:44px;padding:0 16px;
  border:1px solid rgba(246,241,226,.28);border-radius:999px;background:rgba(6,6,12,.72);color:#f6f1e2;font:700 18px/1 var(--hand);white-space:nowrap;cursor:pointer;
  transition:opacity .3s}
.nvm:hover,.nvm:focus-visible{text-decoration:underline wavy}
.nvm:focus-visible{outline:2px solid #f6f1e2;outline-offset:2px}
.nvm[disabled]{cursor:not-allowed;opacity:.45;text-decoration:none}   /* while it's in the post */
.flying .nvm{opacity:0;transition:none}
dialog.plane.flying .plane-fold{visibility:hidden}
dialog.plane.flying .plane-dart{visibility:visible}

/* screen-reader-only words ("digits" is a phone number) */
.plane .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* the margin talking back as you write (js/margin.js): a tick by each line that's good, a sticky note under the e-mail
   finishing its domain or catching a typo, and SEND highlighted and wiggling once every line is good */
.pm-tick{position:absolute;left:calc(-36 * var(--u));bottom:calc(6 * var(--u));width:calc(22 * var(--u));height:calc(22 * var(--u));overflow:visible;pointer-events:none}
.pm-tick path{fill:none;stroke:var(--bic);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .3s ease-out}
.pr.ok .pm-tick path{stroke-dashoffset:0}
.pm-fix{position:absolute;right:0;top:calc(100% + 3 * var(--u));z-index:1;min-height:24px;margin:0;padding:calc(2 * var(--u)) calc(10 * var(--u));
  border:calc(1.6 * var(--u)) dashed var(--bic);border-radius:999px;background:rgba(246,240,138,.8);color:var(--bic);
  font:700 max(13px,calc(15 * var(--u)))/1.1 var(--hand);white-space:nowrap;cursor:pointer;transform:rotate(-1.5deg)}
.pm-fix[hidden]{display:none}
.pm-fix:hover,.pm-fix:focus-visible{background:#f6f08a}
.pm-fix:focus-visible{outline:2px dashed var(--bic);outline-offset:2px}
.pgo.ready:not([disabled]){background:rgba(246,240,138,.6);animation:pm-nudge 2.6s ease-in-out .3s 3}
@keyframes pm-nudge{0%,26%,100%{rotate:0deg;scale:1}6%{rotate:-3deg;scale:1.06}12%{rotate:3deg;scale:1.06}19%{rotate:-1.5deg;scale:1.03}}
@container (max-width:419.9px){.pfoot .pgo.ready:not([disabled]){background:#f6f08a}}

@media (prefers-reduced-motion:reduce){
  dialog.plane[open] .plane-sheet{animation:plane-fade .25s ease-out both}
  @keyframes plane-fade{from{opacity:0}}
  .pm-tick path{transition:none}
  .pgo.ready:not([disabled]){animation:none}
}
@media print{dialog.plane{display:none}}