/* Finish: NDA Form 1, the Network Decentralization Authority's application for membership.
   A 1960s government form photocopied in green ink onto long buff paper, with a tear-off member card.
   From brand/mockups/finish.html. Everything is scoped to .doc-finish. */
.doc-finish {
  --paper: #ece6d2; --form: #24493b; --form-2: #4d6d5f; --typed: #23253a; --stamp: #6b4fc4; --red: #a8432c;
  --label: 600 10px/1.15 "Archivo Narrow", sans-serif;
  --typed-font: 400 17px/1.3 "Courier Prime", monospace;
  background: #cfcdc2 radial-gradient(120% 90% at 70% 10%, #d9d7cc, #bdbbaf);
  color: var(--form); font: 400 14px/1.45 "Archivo Narrow", sans-serif; padding: 64px 16px 90px;
}

/* Scaled down to fit narrow windows (paper.js fitPage sets --s). */
/* A4 wide and longer than A4: Part IV needed the room */
.doc-finish .fit { position: relative; max-width: 794px; margin: 0 auto; height: calc(1290px * var(--s, 1)); }
.doc-finish .sheet { position: absolute; left: 50%; top: 0; width: 794px; height: 1290px; transform-origin: 50% 0;
  transform: translateX(-50%) scale(var(--s, 1)) rotate(-.35deg);
  filter: drop-shadow(0 1px 0 rgb(0 0 0 / .08)) drop-shadow(6px 10px 14px rgb(0 0 0 / .22)); }
.doc-finish .paper { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(255 255 255 / .22), rgb(255 255 255 / 0) 40%, rgb(80 70 45 / .08)), var(--paper); }
.doc-finish .paper svg { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: multiply; }
/* the printed form gets the photocopy treatment; what the operator types stays crisp */
.doc-finish .print { position: relative; height: 100%; padding: 30px 40px 26px; display: flex; flex-direction: column; }
.doc-finish .ink { filter: url(#ink-nda-green); }
@media (prefers-contrast: more) { .doc-finish .ink { filter: none; } }

/* top matter */
.doc-finish .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; font: var(--label); letter-spacing: .06em; text-transform: uppercase; }
.doc-finish .top .r { text-align: right; }
.doc-finish .title { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; margin: 12px 0 8px; padding-bottom: 10px; border-bottom: 3px solid var(--form); }
.doc-finish .title svg { width: 78px; height: auto; }
.doc-finish h2 { margin: 0; font: 900 30px/1 "Libre Franklin", sans-serif; letter-spacing: -.01em; text-transform: uppercase; }
.doc-finish .title p { margin: 4px 0 0; font: 700 13px/1.2 "Libre Franklin"; letter-spacing: .16em; text-transform: uppercase; }
.doc-finish .congrats { margin: 8px 0 12px; font: 400 14.5px/1.45 "Archivo Narrow"; max-width: 70ch; }
.doc-finish .congrats b { font-weight: 700; }
.doc-finish .instr { font: var(--label); letter-spacing: .04em; text-transform: uppercase; margin: 0 0 6px; }

/* the boxed grid every government form has */
.doc-finish .grid { display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1.5px solid var(--form); border-left: 1.5px solid var(--form); }
.doc-finish .cell { position: relative; border-right: 1.5px solid var(--form); border-bottom: 1.5px solid var(--form); padding: 5px 8px 6px; min-height: 58px; }
.doc-finish .c6 { grid-column: span 6; } .doc-finish .c4 { grid-column: span 4; } .doc-finish .c2 { grid-column: span 2; }
.doc-finish .cell > label:not(.box), .doc-finish .cell > .lbl { display: block; font: var(--label); letter-spacing: .05em; text-transform: uppercase; }
.doc-finish .hint { font: 400 11px/1.3 "Archivo Narrow"; color: var(--form-2); letter-spacing: 0; text-transform: none; }
.doc-finish .shade { background: rgb(36 73 59 / .07); }
.doc-finish .sec { grid-column: span 6; border-right: 1.5px solid var(--form); border-bottom: 1.5px solid var(--form); background: var(--form); color: var(--paper);
  font: 700 11px/1 "Archivo Narrow"; letter-spacing: .16em; text-transform: uppercase; padding: 6px 8px 5px; }

/* typed entries */
.doc-finish input[type=text], .doc-finish input[type=date] {
  all: unset; display: block; width: 100%; margin-top: 6px; font: var(--typed-font); color: var(--typed); letter-spacing: .02em;
  border-bottom: 1px dotted rgb(36 73 59 / .35); padding: 2px 0 1px; }
.doc-finish input::placeholder { color: rgb(35 37 58 / .32); }
.doc-finish input:focus-visible { background: rgb(107 79 196 / .08); border-bottom-color: var(--stamp); }
.doc-finish .cell.bad { background: rgb(168 67 44 / .08); }
.doc-finish .err { display: none; margin-top: 3px; font: italic 600 12px/1.2 "Archivo Narrow"; color: var(--red); }
.doc-finish .cell.bad .err { display: block; }

/* "Is this an FID or an e-mail?" boxes, ticked for you as you type */

/* checkboxes: a printed square that gets a typed X */
.doc-finish .box { display: grid; grid-template-columns: 18px 1fr; gap: 9px; align-items: start; padding: 4px 0; cursor: var(--cursor-pen); font: 400 14px/1.35 "Archivo Narrow"; }
.doc-finish .box input { all: unset; width: 14px; height: 14px; margin-top: 1px; border: 1.5px solid var(--form); display: grid; place-content: center; cursor: var(--cursor-pen); }
.doc-finish .box input::after { content: "X"; font: 700 15px/1 "Courier Prime"; color: var(--typed); transform: translate(.5px, -1px) rotate(-4deg); opacity: 0; }
.doc-finish .box input:checked::after { opacity: 1; }
.doc-finish .box input:focus-visible { outline: 2px solid var(--stamp); outline-offset: 2px; }
.doc-finish .req { color: var(--red); font-weight: 700; }

/* signature and date: filled in for you, not typed. The signature is item 2 in ink, or "anon". */
.doc-finish .signed, .doc-finish .typed { display: block; margin-top: 6px; min-height: 1.6em; border-bottom: 1px dotted rgb(36 73 59 / .35); padding: 2px 0 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-finish .typed { font: var(--typed-font); color: var(--typed); letter-spacing: .02em; line-height: 1.6; }
.doc-finish .sig { font: 400 22px/1.6 "Homemade Apple", cursive !important; color: #1f2a6b !important; letter-spacing: 0 !important; }

/* for Authority use only */
.doc-finish .agency { min-height: 96px; }
.doc-finish .stamps { position: absolute; inset: 22px 8px 6px; pointer-events: none; }
.doc-finish .stamp { position: absolute; font: 800 20px/1 "Libre Franklin"; letter-spacing: .14em; text-transform: uppercase; color: var(--stamp); border: 3px solid currentColor; padding: 6px 10px 5px; border-radius: 4px;
  filter: url(#paper-stamp); opacity: 0; transform: scale(1.6) rotate(var(--r)); transition: opacity .15s, transform .22s cubic-bezier(.3, 1.6, .5, 1); mix-blend-mode: multiply; text-align: center; }
.doc-finish .stamp small { display: block; font: 700 10px/1.2 "Libre Franklin"; letter-spacing: .1em; margin-top: 3px; }
.doc-finish .stamp.on { opacity: .85; transform: scale(1) rotate(var(--r)); }
.doc-finish .stamp.recv { left: 4px; top: 4px; --r: -6deg; font-size: 15px; color: var(--form); }
.doc-finish .stamp.appr { right: 6px; top: 10px; --r: 7deg; }

.doc-finish .privacy { margin-top: 12px; padding-top: 7px; border-top: 1px solid var(--form); columns: 2; column-gap: 26px; font: 400 10.5px/1.4 "Archivo Narrow"; color: var(--form-2); }
.doc-finish .privacy p { margin: 0 0 6px; }
.doc-finish .privacy b { color: var(--form); text-transform: uppercase; letter-spacing: .06em; }

/* tear-off member card, pinned to the bottom of the page */
.doc-finish .tear { position: relative; margin: auto -40px 0; height: 14px; }
.doc-finish .tear::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; border-top: 2px dashed var(--form); opacity: .7; }
.doc-finish .tear span { position: absolute; left: 50%; top: 0; transform: translateX(-50%); background: var(--paper); padding: 0 10px; font: var(--label); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.doc-finish .tear i { position: absolute; left: 30px; top: -3px; font-style: normal; font-size: 16px; }
.doc-finish .cardwrap { display: grid; grid-template-columns: 330px 1fr; gap: 28px; align-items: center; margin-top: 14px; }
.doc-finish .card { position: relative; aspect-ratio: 3.37 / 2.125; border: 1.5px solid var(--form); padding: 10px 12px; background: rgb(255 255 255 / .18); display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; }
.doc-finish .card .ch { display: flex; justify-content: space-between; align-items: center; border-bottom: 1.5px solid var(--form); padding-bottom: 5px; }
.doc-finish .card .ch b { font: 900 11px/1.05 "Libre Franklin"; text-transform: uppercase; letter-spacing: .04em; }
.doc-finish .card .ch svg { width: 34px; }
.doc-finish .card dl { margin: 6px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-self: center; }
.doc-finish .card dt { font: var(--label); text-transform: uppercase; letter-spacing: .06em; padding-top: 3px; }
.doc-finish .card dd { margin: 0; font: 700 14px/1.2 "Courier Prime"; color: var(--typed); min-height: 1.2em; border-bottom: 1px dotted rgb(36 73 59 / .3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-finish .card .cf { display: flex; justify-content: space-between; align-items: end; font: var(--label); text-transform: uppercase; letter-spacing: .06em; }
.doc-finish .card .cf .sig { font-size: 13px !important; line-height: 1 !important; text-transform: none; }
.doc-finish .card .seal { position: absolute; right: 10px; bottom: 22px; width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--stamp); color: var(--stamp); display: grid; place-content: center; text-align: center;
  font: 800 7.5px/1.15 "Libre Franklin"; letter-spacing: .08em; text-transform: uppercase; transform: rotate(-12deg) scale(1.4); opacity: 0; filter: url(#paper-stamp); transition: opacity .2s .25s, transform .25s .25s cubic-bezier(.3, 1.6, .5, 1); mix-blend-mode: multiply; }
.doc-finish .card .seal::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 1px solid currentColor; }
.doc-finish .card.issued .seal { opacity: .85; transform: rotate(-12deg) scale(1); }
.doc-finish .cardnote { font: 400 13px/1.45 "Archivo Narrow"; }
.doc-finish .cardnote b { display: block; font: 800 12px/1.2 "Libre Franklin"; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 4px; }

/* On the desk, under the page: the controls that aren't part of the document */
.doc-finish .desk { max-width: 794px; margin: 30px auto 0; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.doc-finish button.submit { all: unset; cursor: pointer; font: 800 15px/1 "Libre Franklin"; letter-spacing: .12em; text-transform: uppercase; color: var(--paper); background: var(--form);
  padding: 13px 22px 12px; box-shadow: 3px 3px 0 rgb(28 28 26 / .5); transition: transform .08s, box-shadow .08s; }
.doc-finish button.submit:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 rgb(28 28 26 / .5); }
.doc-finish button.submit:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 rgb(28 28 26 / .5); }
.doc-finish button.submit:disabled { background: #b9b7ad; color: #57574f; box-shadow: none; cursor: default; transform: none; }
.doc-finish a.cast { display: inline-flex; gap: 9px; align-items: center; font: 800 14px/1 "Libre Franklin"; letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  color: #fff; background: #6a3cff; padding: 13px 18px 12px; box-shadow: 3px 3px 0 rgb(28 28 26 / .5); }
.doc-finish a.cast svg { width: 16px; height: 16px; }
.doc-finish button.plain { all: unset; cursor: pointer; font: 700 13px/1 "Archivo Narrow"; letter-spacing: .1em; text-transform: uppercase; color: var(--form); border: 1.5px solid var(--form); padding: 12px 14px 11px; }
.doc-finish :is(button, a):focus-visible { outline: 2px solid var(--stamp); outline-offset: 3px; }
/* greyed out until the form is approved */
.doc-finish .after[aria-disabled] { background: #b9b7ad; color: #77756c; box-shadow: none; border-color: #9a988f; cursor: not-allowed; }
.doc-finish button.revoke { margin-left: auto; color: var(--red); border-color: var(--red); }
.doc-finish button[hidden] { display: none; }   /* button.plain's all: unset would otherwise undo [hidden] */
/* filed: the form is locked to what was sent */
.doc-finish form.filed :is(input, .box) { cursor: default; }
.doc-finish form.filed input:focus-visible { background: none; }
.doc-finish .status { max-width: 794px; margin: 12px auto 0; min-height: 1.4em; font: 600 15px/1.3 "Archivo Narrow"; color: var(--red); }
.doc-finish .status.ok { color: var(--form); }

@media (max-width: 640px) { .doc-finish { padding: 32px 12px 60px; } }

/* Part IV, the server reimbursement */
.doc-finish .sec-r { float: right; letter-spacing: .12em; opacity: .8; }
.doc-finish .why { min-height: 0; display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; }
.doc-finish .why p { margin: 0; font: 400 13.5px/1.4 "Archivo Narrow"; }
.doc-finish .why .claim { padding-left: 14px; border-left: 1.5px solid var(--form); }
.doc-finish .why .claim .lbl { display: block; font: var(--label); letter-spacing: .05em; text-transform: uppercase; }