:root {
  --application-label: 17px;
  --application-small: 14px;
  --application-title: 58px;
  --application-heading: 29px;
  --application-gap: 28px;
  --application-section-gap: 44px;
  --application-field-height: 48px;
  --application-radius: 8px;
  --application-line: #d4dbe2;
  --application-soft: #f5f7fa;
  --application-selected: #edf5ff;
  --application-error: #b42318;
  --application-focus: 3px;
  --application-choice-gap: 8px;
  --application-choice-padding: 12px;
  --application-input-padding: 14px;
}
.application-layout {
  max-width: var(--wide);
  margin-inline: auto;
  padding-block: var(--s6) var(--section);
}
.application-panel {
  padding: var(--s12);
  background: var(--surface);
}
.application-intro :is(h1, h2) {
  font-size: var(--application-title);
  letter-spacing: -0.055em;
  line-height: 1.06;
  margin-bottom: var(--application-gap);
}
.application-intro > p:not(.eyebrow) {
  color: var(--muted);
  font-size: var(--application-label);
  line-height: 1.65;
}
.application-intro > a {
  display: inline-block;
  margin-top: var(--application-input-padding);
  font-size: var(--application-small);
}
.application-body {
  margin-top: var(--application-section-gap);
}
.application-preview {
  font-size: var(--application-small);
  border: 1px solid var(--application-line);
  background: var(--application-soft);
  border-radius: var(--application-radius);
  padding: var(--application-input-padding);
  margin-bottom: var(--application-gap);
}
.application-preview strong {
  display: block;
  margin-bottom: var(--application-choice-gap);
}
.application-required {
  font-size: var(--application-small);
  color: var(--muted);
  margin-bottom: var(--application-gap);
}
#mfa-application .application-group {
  border: 0;
  padding: 0;
  margin: 0 0 var(--application-section-gap);
}
.application-group > h2 {
  font-size: var(--application-heading);
  margin-bottom: var(--application-gap);
  font-weight: 400;
}
.application-field {
  margin-bottom: var(--application-gap);
}
.application-field > label,
.application-field legend {
  font-size: var(--application-label);
  font-weight: 400;
  color: var(--ink);
  display: block;
  line-height: 1.5;
  margin-bottom: var(--application-choice-gap);
}
#mfa-application fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.application-field input:not([type="radio"], [type="checkbox"]),
.application-field select,
.application-field textarea {
  width: 100%;
  min-height: var(--application-field-height);
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--application-line);
  border-radius: var(--application-radius);
  padding: var(--application-input-padding);
  box-shadow: none;
}
.application-field textarea {
  resize: vertical;
}
.application-field input::placeholder {
  color: var(--muted);
  opacity: 1;
}
.application-choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--application-choice-gap);
}
.application-choice {
  position: relative;
  cursor: pointer;
  font-weight: 400;
}
.application-choice > input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.application-choice > span {
  min-height: var(--application-field-height);
  display: flex;
  align-items: center;
  gap: var(--application-choice-gap);
  padding: var(--application-choice-padding) var(--application-input-padding);
  border: 1px solid var(--application-line);
  border-radius: var(--application-radius);
  font-size: var(--application-small);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.5;
}
.application-choice > input:checked + span {
  border-color: var(--accent);
  background: var(--application-selected);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.application-skills .application-choice > input:checked + span::before {
  content: "✓";
  color: var(--accent);
}
.application-choice > input:focus-visible + span,
.application-field :is(input, textarea, select):focus-visible {
  outline: var(--application-focus) solid var(--accent);
  outline-offset: var(--application-focus);
}
.application-field .field-hint,
.conditional-hint {
  font-size: var(--application-small);
  color: var(--muted);
  line-height: 1.6;
  margin-top: var(--application-choice-gap);
}
.is-enhanced .conditional-hint {
  display: none;
}
#mfa-application [hidden] {
  display: none !important;
}
.application-field .field-error {
  font-size: var(--application-small);
  color: var(--application-error);
  line-height: 1.5;
  margin-top: var(--application-choice-gap);
}
.field-error:empty,
#form-error:empty {
  display: none;
}
#form-error:not(:empty) {
  border-left: var(--application-focus) solid var(--application-error);
  padding: var(--application-input-padding);
  color: var(--application-error);
  margin-bottom: var(--application-gap);
}
#form-error a {
  color: inherit;
}
.application-field
  [aria-invalid="true"]:not([type="radio"], [type="checkbox"]) {
  border-color: var(--application-error);
}
.application-optional {
  border-block: 1px solid var(--application-line);
  margin-block: var(--application-section-gap);
  padding-block: var(--application-gap);
}
.application-optional > summary {
  font-size: var(--application-heading);
  cursor: pointer;
}
.application-optional > summary span {
  display: block;
  font-size: var(--application-small);
  color: var(--muted);
  margin-top: var(--application-choice-gap);
}
.application-optional[open] > summary {
  margin-bottom: var(--application-gap);
}
.application-field .application-consent {
  display: flex;
  align-items: flex-start;
  gap: var(--application-input-padding);
  cursor: pointer;
  font-size: var(--application-small);
  font-weight: 400;
}
.application-consent input {
  flex: 0 0 auto;
  width: var(--application-label);
  height: var(--application-label);
  accent-color: var(--accent);
  margin-top: var(--application-choice-gap);
}
.application-consent {
  min-height: var(--application-field-height);
}
.application-submit {
  margin-top: var(--application-gap);
}
@media (max-width: 640px) {
  :root {
    --application-title: 42px;
    --application-heading: 26px;
    --application-section-gap: 32px;
    --application-gap: 24px;
  }
  .application-layout {
    width: 100%;
  }
  .application-choices:not(.application-skills) {
    flex-direction: column;
  }
  .application-choice {
    max-width: 100%;
  }
  .application-submit .button {
    width: 100%;
  }
}

.application-choice > input[type="radio"]:checked + span::before {
  content: "✓";
  color: var(--accent);
}
.application-files {
  margin-top: var(--application-choice-gap);
}
.application-files > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--application-choice-gap);
  border-bottom: 1px solid var(--application-line);
  font-size: var(--application-small);
}
.application-files span {
  overflow-wrap: anywhere;
}
.application-files button {
  flex-shrink: 0;
  background: transparent;
  border: 0;
  color: var(--accent);
  min-height: var(--application-field-height);
  padding-inline: var(--application-choice-padding);
  font: inherit;
  cursor: pointer;
}
.application-files > p {
  color: var(--muted);
  font-size: var(--application-small);
  margin-top: var(--application-choice-gap);
}

.application-consent a,
.application-intro > a {
  color: var(--accent);
}
.application-consent > span {
  color: var(--ink);
}
.application-consent a:hover,
.application-consent a:focus-visible {
  text-decoration: underline;
}

/* One relevant question, or a small related group, per wizard step. */
:root {
  --wizard-title: clamp(30px, 4vw, 42px);
  --wizard-heading: clamp(24px, 3vw, 30px);
  --wizard-stage-min: 240px;
  --wizard-progress-height: 4px;
}
.application-layout:has(.is-wizard) .application-intro :is(h1, h2) {
  font-size: var(--wizard-title);
  margin-bottom: var(--s2);
}
.application-layout:has(.is-wizard) .application-intro .eyebrow {
  display: none;
}
.application-layout:has(.is-wizard) .application-intro > a {
  margin-top: var(--s2);
}
.application-layout:has(.is-wizard) .application-body {
  margin-top: var(--s6);
}
.application-layout:has(.is-wizard) .application-preview {
  margin-bottom: var(--s5);
  padding: var(--s3) var(--s4);
  font-size: var(--tiny);
}
.application-progress {
  margin-bottom: var(--s7);
  scroll-margin-top: calc(var(--header) + var(--s4));
}
.application-progress p {
  color: var(--muted);
  font-size: var(--tiny);
  margin: 0 0 var(--s2);
}
.application-progress progress {
  appearance: none;
  display: block;
  width: 100%;
  height: var(--wizard-progress-height);
  border: 0;
  background: var(--line);
  accent-color: var(--accent);
}
.application-progress progress::-webkit-progress-bar {
  background: var(--line);
}
.application-progress progress::-webkit-progress-value {
  background: var(--accent);
}
.application-progress progress::-moz-progress-bar {
  background: var(--accent);
}
.application-stage {
  min-height: var(--wizard-stage-min);
}
.application-step-title {
  font-size: var(--wizard-heading);
  line-height: var(--button-leading);
  letter-spacing: var(--tracking-title);
  font-weight: 400;
  margin: 0 0 var(--s6);
}
.application-step-title:focus {
  outline: none;
}
.application-step-intro {
  color: var(--muted);
  font-size: var(--small);
  margin: calc(-1 * var(--s4)) 0 var(--s6);
}
.application-step-question .application-field:first-of-type > label,
.application-step-question .application-field:first-of-type legend {
  position: absolute;
  width: var(--rule);
  height: var(--rule);
  padding: 0;
  margin: calc(-1 * var(--rule));
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.application-step[data-step-key="goal"] .application-choices {
  flex-direction: column;
}
.application-wizard-controls {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s4);
  margin-top: var(--s6);
}
.application-next {
  margin-left: auto;
}
.application-back {
  min-height: var(--control);
  padding: var(--s3) var(--s4);
  color: var(--muted);
  font: inherit;
  font-size: var(--small);
  border: var(--rule) solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  cursor: pointer;
}
.application-back:hover {
  color: var(--ink);
  border-color: var(--muted);
}
.application-back:focus-visible {
  outline: var(--focus-width) solid var(--accent);
  outline-offset: var(--s1);
}
.application-wizard-controls .application-submit {
  margin-top: 0;
  margin-left: auto;
  max-width: var(--copy);
}
.application-step input[type="date"] {
  min-width: 0;
  cursor: pointer;
}
.application-step input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  padding: var(--s2);
}
@media (max-width: 640px) {
  .application-wizard-controls .application-submit {
    flex: 1;
  }
  .application-step[data-step-key="contact"] .application-field {
    margin-bottom: var(--s5);
  }
  .application-stage {
    min-height: 0;
  }
}
:root {
  --calendar-width: 364px;
  --calendar-cell: 44px;
  --calendar-gap: 2px;
  --calendar-title: 17px;
}
.application-calendar {
  width: min(100%, var(--calendar-width));
  padding: var(--s3);
  border: var(--rule) solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}
.application-calendar:focus {
  outline: var(--focus-width) solid var(--accent);
  outline-offset: var(--s1);
}
.application-calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s2);
  font-size: var(--calendar-title);
}
.application-calendar button {
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  min-height: var(--calendar-cell);
}
.application-calendar-header button {
  width: var(--calendar-cell);
  font-size: var(--h3);
}
.application-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--calendar-gap);
  text-align: center;
  font-size: var(--small);
}
.application-calendar-grid > span {
  color: var(--muted);
  line-height: var(--calendar-cell);
  font-size: var(--tiny);
}
.application-calendar button:hover:not(:disabled) {
  background: var(--surface);
}
.application-calendar button:disabled {
  color: var(--muted);
  opacity: 0.35;
  cursor: default;
}
.application-calendar button[aria-current="date"] {
  box-shadow: inset 0 0 0 var(--rule) var(--accent);
}
.application-calendar button[aria-pressed="true"],
.application-calendar button[aria-pressed="true"]:hover {
  background: var(--accent);
  color: var(--paper);
}
.application-calendar button:focus-visible {
  outline: var(--focus-width) solid var(--accent);
  outline-offset: var(--calendar-gap);
}
.application-date-selection {
  color: var(--muted);
  font-size: var(--small);
  margin-top: var(--s3);
}
.application-date-selection:empty {
  display: none;
}
@media (max-width: 380px) {
  .application-calendar {
    padding: var(--s1);
  }
}

.application-field-intro {
  color: var(--muted);
  font-size: var(--small);
  line-height: var(--leading);
  margin: 0 0 var(--s4);
}

.application-submit .button:disabled,
.application-next:disabled {
  background: var(--application-line);
  border-color: var(--application-line);
  color: var(--muted);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

:root {
  --application-overview-width: 320px;
}
.application-overview {
  display: none;
}
@media (min-width: 1100px) {
  .application-body:has(.is-wizard):has(.application-overview:not([hidden])) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--application-overview-width);
    gap: var(--s10);
    align-items: start;
  }
  .application-overview {
    display: block;
    position: sticky;
    top: var(--s10);
    max-height: calc(100vh - var(--s10) * 2);
    overflow-y: auto;
    border-left: var(--rule) solid var(--application-line);
    padding-left: var(--s6);
    overflow-wrap: anywhere;
  }
  .application-overview h2 {
    font-size: var(--application-heading);
    font-weight: 400;
    line-height: var(--leading);
    margin-bottom: var(--s3);
  }
  .application-overview p,
  .application-overview dt {
    font-size: var(--application-small);
    color: var(--muted);
  }
  .application-overview dt {
    margin-top: var(--s5);
  }
  .application-overview dd {
    margin: var(--s1) 0 0;
    font-size: var(--small);
    white-space: pre-wrap;
  }
}

.application-overview:focus-visible {
  outline: var(--application-focus) solid var(--accent);
  outline-offset: var(--application-focus);
}

.application-overview[hidden] {
  display: none;
}

.application-overview .application-profile {
  color: var(--ink);
  font-size: var(--small);
  line-height: var(--leading);
  margin-block: var(--s5);
}

.application-overview h3 {
  color: var(--ink);
  font-size: var(--application-label);
  font-weight: 600;
  margin: var(--s6) 0 var(--s3);
}
.application-overview h3 + dl dt:first-child {
  margin-top: 0;
}
.application-overview h3 + .application-profile {
  margin-top: 0;
}

@media (max-width: 700px) {
  .application-panel {
    padding: var(--s6);
  }
}