/* ---------------------------------------------------------------------------
   Application dialog

   Uses the native <dialog> element, so focus trapping, Escape to close and the
   inert background come from the browser rather than from script.
   --------------------------------------------------------------------------- */

.mi-apply {
  width: min(560px, calc(100vw - 32px));
  max-height: min(88vh, 760px);
  padding: 0;
  border: 1px solid var(--mi-border, #DCE7E0);
  border-radius: var(--mi-radius, 2px);
  background: #FFFFFF;
  color: var(--mi-ink, #1F2421);
  font-family: var(--mi-font, inherit);
  overflow: auto;
  overscroll-behavior: contain;
}

.mi-apply::backdrop {
  background: rgba(4, 77, 40, 0.44);
  backdrop-filter: blur(3px);
}

.mi-apply__panel {
  position: relative;
  padding: clamp(24px, 4vw, 40px);
}

.mi-apply__close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--mi-radius, 2px);
  background: none;
  color: var(--mi-mute, #5B6660);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}

.mi-apply__close:hover,
.mi-apply__close:focus-visible {
  background: var(--mi-olive, #E8F5EC);
  color: var(--mi-ink, #1F2421);
}

.mi-apply__title {
  margin: 6px 0 8px;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.12;
}

.mi-apply__lede { margin: 0 0 22px; }

.mi-apply__form .mi-field { margin-bottom: 16px; }

.mi-apply__error {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: var(--mi-radius, 2px);
  background: #FDE8E8;
  color: #8A1C1C;
  font-size: var(--mi-body, 1.125rem);
  line-height: 1.5;
}

.mi-apply__form .mi-btn { width: 100%; justify-content: center; }
.mi-apply__form .mi-btn[disabled] { opacity: .6; cursor: progress; }

.mi-apply .mi-formnote { margin-top: 14px; }

/* Success panel */
.mi-apply__done { text-align: center; padding: 12px 0 4px; }

.mi-apply__tick {
  width: 62px;
  height: 62px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--mi-olive, #E8F5EC);
  color: var(--mi-deep, #044D28);
  font-size: 30px;
  line-height: 1;
}

.mi-apply__done .mi-body { margin: 0 auto 22px; max-width: 34ch; }
.mi-apply__done .mi-btn { justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  .mi-apply__close { transition: none; }
}

/* File input: the browser's default control ignores the form's type scale,
   so it is given the same box as the text fields. */
.mi-apply__form input[type="file"] {
  width: 100%;
  padding: 12px;
  border: 1px dashed var(--mi-border, #DCE7E0);
  border-radius: var(--mi-radius, 2px);
  background: var(--mi-surface, #F4FAF6);
  font-family: inherit;
  font-size: var(--mi-body, 1.125rem);
  color: var(--mi-ink, #1F2421);
  cursor: pointer;
}

.mi-apply__form input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 8px 14px;
  border: 0;
  border-radius: var(--mi-radius, 2px);
  background: var(--mi-deep, #044D28);
  color: #FFFFFF;
  font-family: inherit;
  font-size: 1rem;
  cursor: pointer;
}

.mi-apply__form input[type="file"]:focus-visible {
  outline: 2px solid var(--mi-deep, #044D28);
  outline-offset: 2px;
}

.mi-apply__hint { margin: -8px 0 16px; }

/* Cover letter and its word counter. */
.mi-field--cover textarea {
  min-height: 160px;
  resize: vertical;
}

.mi-apply__count {
  margin: -8px 0 18px;
  font-variant-numeric: tabular-nums;
}

/* Turns red only once the limit is passed, so it reads as a budget rather
   than a warning while there is still room. */
.mi-apply__count.is-over {
  color: #8A1C1C;
  font-weight: 600;
}

/* Without JavaScript a <dialog> cannot be opened, and the Apply buttons
   no longer fall back to a mail link. Show the form inline instead, so
   the page still has a working way to apply. */
html:not(.mi-js) .mi-apply {
  display: block;
  position: static;
  width: min(560px, 100%);
  max-height: none;
  margin: 0 auto var(--mi-lg, 72px);
}

html:not(.mi-js) .mi-apply__close { display: none; }