/* SOEI application modal · funnel stage.
   Reads the site's tokens (css/tokens.css) and bundle.css (.soei-btn, .soei-stamp, .sheet, .kicker, .h2).
   One blue element: the Submit button. Stamp = ink on paper (soei-stamp--ink, styles.css). */

.apply { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; }
.apply[hidden] { display: none; }
.apply__backdrop { position: absolute; inset: 0; background: rgba(20, 20, 20, .78); }

.apply__sheet {
  position: relative; z-index: 1;
  width: min(100%, 36rem); max-height: calc(100dvh - 32px); overflow: auto;
  background: var(--surface-100) !important; /* the site's .has-3d .sheet makes sheets transparent */
  color: var(--ink);
  border: var(--stroke-mark) solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink); /* ink, not blue: the Submit button is the modal's one blue */
  padding: var(--space-8) var(--space-6) var(--space-6) !important; /* the site zeroes .sheet padding on small screens */
  margin: 0 !important;
  transform: rotate(-.6deg);
  isolation: isolate;
  animation: apply-in .22s ease-out both;
}
/* the site's paper-grain overlay: keep it multiply even under an ink-themed page */
.apply__sheet::after { display: block !important; mix-blend-mode: multiply !important; opacity: .14 !important; }
@media (prefers-reduced-motion: reduce) { .apply__sheet { animation: none; transform: none; } }
@keyframes apply-in { from { transform: translateY(14px) rotate(-.6deg); opacity: 0; } to { transform: rotate(-.6deg); opacity: 1; } }

.apply__close {
  position: absolute; top: var(--space-2); right: var(--space-2);
  width: 40px; height: 40px; font: 28px/1 var(--font-mono); color: var(--ink);
  background: transparent; border: 0; cursor: pointer;
}
.apply__close:hover { color: var(--ink-muted); }
.apply__stamp { position: absolute; top: 28px; right: 56px; --stroke-tilt: -8deg; mix-blend-mode: multiply !important; opacity: 1; }

.apply__title { font-size: clamp(36px, 8vw, var(--fs-display-lg)); line-height: var(--lh-display-lg); max-width: 12ch; }
.apply__intro { font-family: var(--font-mono); font-size: var(--fs-body); line-height: var(--lh-body); margin: var(--space-3) 0 var(--space-6); color: var(--ink); }

.apply__field { display: block; margin-bottom: 20px; }
.apply__label { display: block; font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-body); line-height: var(--lh-body); margin-bottom: var(--space-2); }
.apply__label b { color: var(--ink-muted); font-weight: 400; }
.apply__input {
  display: block; width: 100%; box-sizing: border-box;
  font-family: var(--font-mono); font-size: 16px; line-height: 24px; color: var(--ink);
  background: var(--surface-000); border: var(--stroke-rule) solid var(--ink); border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-3);
}
.apply__input:focus-visible { outline: var(--stroke-mark) solid var(--focus); outline-offset: 2px; }
.apply__input[aria-invalid="true"] { border-style: dashed; }
.apply__select { appearance: none; -webkit-appearance: none; padding-right: var(--space-8);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='10'><path d='M1 1l7 7 7-7' fill='none' stroke='%23141414' stroke-width='2.5'/></svg>");
  background-repeat: no-repeat; background-position: right var(--space-3) center; }
.apply__textarea { resize: vertical; min-height: 88px; }

.apply__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.apply__error { font-family: var(--font-mono); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink);
  border: var(--stroke-rule) dashed var(--ink); padding: var(--space-2) var(--space-3); margin: 0 0 var(--space-4); }
.apply__error[hidden] { display: none; }

.apply__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-2); }
.apply__submit { font-size: 18px; padding: var(--space-3) var(--space-8); }
.apply__submit[disabled] { opacity: .7; }
.apply__fine { font-family: var(--font-mono); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-muted); max-width: 18rem; }

.apply__done[hidden] { display: none; }
.apply__done .soei-btn { margin-top: var(--space-4); }
.apply__done .soei-btn[hidden] { display: none; }

body.apply-open { overflow: hidden; }

@media (max-width: 480px) {
  .apply { padding: 12px; }
  .apply__sheet { padding: 32px 16px 20px !important; transform: none; }
  .apply__stamp { right: 60px; top: 14px; }
}