/* ---------------------------------------------------------------------------
   Myriota Impact Fund - application form.
   Dark theme matching the approved Formfacade draft: full-screen hero, navy
   form surface, two-column short fields. Self-contained - no web fonts, no
   CDNs, no external requests of any kind.
--------------------------------------------------------------------------- */

:root {
  --bg:            #101f3d;
  --bg-deep:       #0b1730;
  --bg-nav:        #050d1c;
  --surface:       #1b2a47;
  --surface-hover: #223257;
  --line:          rgba(255, 255, 255, .14);
  --line-strong:   rgba(255, 255, 255, .30);

  --text:          #ffffff;
  --muted:         #b9c6d8;
  --req:           #ff5c5c;

  --brand:         #0077c8;
  --brand-hover:   #4099d6;
  --brand-soft:    rgba(0, 119, 200, .18);

  --danger:        #ff6b6b;
  --danger-soft:   rgba(255, 92, 92, .12);
  --success:       #4ade80;

  --radius-sm:     8px;

  --font: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont,
          "SF Pro Text", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", -apple-system,
          BlinkMacSystemFont, "SF Pro Display", Roboto, "Helvetica Neue", Arial, sans-serif;

  --nav-h: 64px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* Left as auto deliberately: the hero anchors are eased in JS so the timing
     matches the draft, and CSS smooth scrolling would fight the animation. */
  scroll-behavior: auto;
  background: var(--bg);
}
/**
 * Reduced motion: strip decorative movement, but keep feedback that carries
 * meaning. A blanket "animation: none" also stops the submit spinner, which
 * leaves an applicant with no sign their upload is progressing.
 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .spinner { animation: spin .7s linear infinite !important; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:focus-visible { outline: 2px solid var(--brand-hover); outline-offset: 2px; }

/* --- Fixed nav ------------------------------------------------------------ */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  padding: 0 clamp(16px, 5vw, 90px);
  z-index: 20;
  background: transparent;
  transition: background .25s ease, box-shadow .25s ease;
}
.nav.is-stuck {
  background: var(--bg-nav);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .07);
}
.nav__brand {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: .01em;
  color: #fff;
  text-decoration: none;
  /* The anchor holds either the wordmark as text or a logo image. Flex keeps
     the image on the text baseline and stops the inline gap under it. */
  display: inline-flex;
  align-items: center;
}
/* Sized from the schema's maxWidth, with height set inline from the image's own
   aspect ratio so the header does not reflow when it decodes. The cap here is
   for narrow screens, where the nav is tighter than the chosen width. */
.nav__logo {
  display: block;
  width: auto;
  max-width: min(46vw, 168px);
  height: auto;
}

/* --- Hero ----------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--nav-h) + 24px) 20px 96px;
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 78% 8%, rgba(0, 119, 200, .20) 0%, transparent 62%),
    radial-gradient(100% 70% at 8% 98%, rgba(0, 119, 200, .12) 0%, transparent 60%),
    linear-gradient(168deg, #16294c 0%, var(--bg) 55%, var(--bg-deep) 100%);
}

/* Faint orbital arcs - a nod to the satellite network, drawn in CSS only. */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 50%;
  pointer-events: none;
}
.hero::before { width: 1150px; height: 1150px; top: -560px; right: -300px; }
.hero::after  { width: 1500px; height: 1500px; bottom: -1050px; left: -380px; }

.hero__inner { position: relative; max-width: 860px; }

.hero h1 {
  font-family: var(--font-display);
  margin: 0 0 34px;
  font-size: clamp(32px, 5.6vw, 58px);
  line-height: 1.14;
  font-weight: 700;
  letter-spacing: -.02em;
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 30px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease;
}
.hero__cta:hover {
  background: rgba(255, 255, 255, .10);
  border-color: #fff;
  transform: translateY(-1px);
}
.hero__cta svg { transition: transform .18s ease; }
.hero__cta:hover svg { transform: translateY(2px); }

.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 34px;
  color: rgba(255, 255, 255, .75);
  line-height: 0;
  animation: nudge 2.4s ease-in-out infinite;
  transition: color .18s ease;
}
.hero__scroll:hover { color: #fff; }

/* Keeps the -50% centring while nudging on the Y axis. */
@keyframes nudge {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 10px); }
}

/* The global reduced-motion rule kills the animation, so pin the position. */
@media (prefers-reduced-motion: reduce) {
  .hero__scroll { transform: translate(-50%, 0); }
}

/* --- Form section --------------------------------------------------------- */

/* Top padding clears the 64px fixed nav at every viewport width. */
.shell {
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(88px, 9vw, 112px) 20px 88px;
}

/* Floating back-to-top, revealed once the hero is behind you. */
.toplink {
  position: fixed;
  right: clamp(16px, 3vw, 34px);
  bottom: clamp(16px, 3vw, 34px);
  z-index: 30;

  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: rgba(11, 23, 48, .82);
  backdrop-filter: blur(6px);
  color: #fff;
  text-decoration: none;

  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s,
              background .18s ease, border-color .18s ease;
}
.toplink.is-shown { opacity: 1; visibility: visible; transform: translateY(0); }
.toplink:hover { background: var(--brand); border-color: var(--brand); }
.toplink svg { transition: transform .18s ease; }
.toplink:hover svg { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  .toplink { transform: none; }
}

.shell > h2 {
  font-family: var(--font-display);
  margin: 0 0 12px;
  font-size: clamp(23px, 3.4vw, 30px);
  font-weight: 700;
  letter-spacing: -.01em;
}

.card__lede {
  margin: 0 0 40px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 15px;
}
.card__lede strong { color: var(--text); }

/* Short text fields sit two-up on wider screens, matching the draft. */
#applicationForm {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 22px;
}
#applicationForm > * { grid-column: 1 / -1; }
@media (min-width: 720px) {
  #applicationForm > .field--half { grid-column: span 1; }
}

.field { margin: 0 0 28px; min-width: 0; }
fieldset.field { padding: 0; border: 0; }

.field > label:not(.drop),
.field legend {
  display: block;
  padding: 0;
  margin-bottom: 8px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--text);
}

.req { color: var(--req); margin-left: 3px; }

.help {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--muted);
}
.help ul { margin: 8px 0 0; padding-left: 20px; }
.help li { margin-bottom: 5px; }

input[type="text"], input[type="email"], input[type="tel"], textarea {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  font-size: 16px; /* 16px stops iOS zooming on focus */
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
textarea { min-height: 128px; resize: vertical; }

input::placeholder, textarea::placeholder { color: rgba(255, 255, 255, .35); }
input:hover, textarea:hover { border-color: var(--line-strong); }
input:focus, textarea:focus {
  outline: none;
  border-color: var(--brand-hover);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.counter { margin-top: 7px; font-size: 13px; color: var(--muted); text-align: right; }
.counter.is-over { color: var(--danger); font-weight: 600; }

/* --- Choice groups -------------------------------------------------------- */

.choices { display: grid; gap: 9px; }

.choice {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.choice:hover { background: var(--surface-hover); }
.choice input {
  accent-color: var(--brand-hover);
  width: 18px; height: 18px; margin: 0; flex: none;
}
.choice:has(input:checked) { border-color: var(--brand-hover); background: var(--surface-hover); }
.choice span { font-size: 15px; }

/**
 * The free-text alternative to the listed options.
 *
 * Indented under the option it belongs to and hung off a rule that continues
 * the option's left edge, so it reads as part of that choice rather than as a
 * loose extra question. The indent is deliberately small: at 320px the box
 * still has room for a term, which is all it is ever asked to hold.
 *
 * .is-active is put on by client.js when that option is the one selected. CSS
 * alone cannot express it, because :has() would have to name the last option in
 * the group and the number of options is the editor's to change.
 *
 * The transition matches .choice above, so the reduced-motion block at the top
 * of this file, which cuts every transition, covers this one too.
 */
.choice-other {
  display: grid;
  gap: 5px;
  min-width: 0;
  margin: -2px 0 0 13px;
  padding: 9px 0 4px 14px;
  border-left: 1px solid var(--line);
  transition: border-color .15s ease;
}
.choice-other.is-active { border-left-color: var(--brand-hover); }

.choice-other__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}
/* Slightly tighter than a standalone question's box, so it reads as a detail of
   the option rather than as a field of the same weight. Selected through the
   wrapper, not by the class alone: input[type="text"] above is the more
   specific selector and would otherwise keep its own padding. Text stays at the
   inherited 16px, since anything smaller makes iOS zoom the page on focus. */
.choice-other input[type="text"] { padding: 10px 12px; }

/* --- Sensitive-information notice (APP 3) --------------------------------- */

.notice {
  margin: 0 0 14px;
  padding: 14px 16px;
  border-left: 3px solid var(--brand-hover);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: rgba(0, 119, 200, .13);
  font-size: 14px;
  color: #dbe7f5;
}
.notice p { margin: 0; }
.notice p + p { margin-top: 8px; }
.notice strong { color: #fff; }

/* Eligibility stop, shown the moment "No" is chosen rather than at submit. */
.notice--stop {
  margin-top: 12px;
  border-left-color: var(--danger);
  background: var(--danger-soft);
  color: #ffd5d5;
}

/* --- File uploads --------------------------------------------------------- */

.drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 26px 18px;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .03);
  text-align: center;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.drop:hover, .drop.is-dragging { border-color: var(--brand-hover); background: var(--brand-soft); }
.drop__main { font-weight: 600; color: #80bbe3; font-size: 15px; }
.drop__sub { font-size: 13px; color: var(--muted); }
.drop input[type="file"] { display: none; }

.files { list-style: none; margin: 11px 0 0; padding: 0; display: grid; gap: 8px; }

.file {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 13px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 14px;
}
.file__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file__size, .file__state { color: var(--muted); font-size: 13px; flex: none; }
.file.is-done .file__state { color: var(--success); font-weight: 600; }
.file.is-error { border-color: var(--danger); background: var(--danger-soft); }
.file.is-error .file__state { color: var(--danger); font-weight: 600; }

.file__remove {
  flex: none;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.file__remove:hover { border-color: var(--danger); color: var(--danger); }

/* --- Consent + submit ----------------------------------------------------- */

.consent {
  display: flex;
  gap: 13px;
  align-items: center;
  padding: 17px 18px;
  margin: 12px 0 26px;
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.consent:has(input:checked) { border-color: var(--brand-hover); background: var(--surface-hover); }
.consent input { accent-color: var(--brand-hover); width: 19px; height: 19px; margin: 0; flex: none; }
.consent span { font-size: 14.5px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 15px 28px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: #fff;
  font: inherit;
  font-size: 16.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease;
}
.btn:hover:not(:disabled) { background: var(--brand-hover); }
.btn:disabled { background: #33445f; color: #97a6ba; cursor: not-allowed; }

.spinner {
  width: 17px; height: 17px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Errors --------------------------------------------------------------- */

.error {
  display: none;
  margin-top: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--danger);
}
.error.is-shown { display: block; }

/* Was an inline style attribute, which the page's own CSP (style-src 'self')
   blocks. Kept as a class so no 'unsafe-inline' is needed. */
.error--consent { margin-top: -18px; margin-bottom: 22px; }
.field.is-invalid input,
.field.is-invalid textarea,
.field.is-invalid .drop { border-color: var(--danger); }
.field.is-invalid .choice { border-color: rgba(255, 107, 107, .5); }

.alert {
  display: none;
  margin-bottom: 26px;
  padding: 15px 17px;
  border: 1px solid rgba(255, 107, 107, .45);
  border-radius: var(--radius-sm);
  background: var(--danger-soft);
  color: #ffc9c9;
  font-size: 15px;
}
.alert.is-shown { display: block; }

/* Sits directly under the submit button rather than at the top of the form. */
.alert--inline { margin: 18px 0 0; }

/* --- Submission progress -------------------------------------------------- */

.progress { margin-top: 16px; }

.progress__track {
  height: 8px;
  border-radius: 999px;
  background: var(--surface);
  overflow: hidden;
}

.progress__bar {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-hover) 100%);
  transition: width .3s ease;
}

.progress__label {
  margin: 9px 0 0;
  font-size: 13.5px;
  color: var(--muted);
  text-align: center;
}

/* Secondary button, used for the download-a-copy action on the receipt. */
.btn--ghost {
  width: auto;
  padding: 11px 22px;
  font-size: 15px;
  background: transparent;
  border: 1px solid var(--line-strong);
}
.btn--ghost:hover:not(:disabled) { background: rgba(255, 255, 255, .08); border-color: #fff; }

/* --- Success / closed ----------------------------------------------------- */

.done { display: none; text-align: center; padding: 24px 0 8px; }
.done.is-shown { display: block; }

.done__tick {
  width: 62px; height: 62px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--success);
  display: flex; align-items: center; justify-content: center;
  font-size: 31px;
}
.done h2 { font-family: var(--font-display); margin: 0 0 12px; font-size: 27px; font-weight: 700; }
.done p { margin: 0 auto 16px; max-width: 470px; color: var(--muted); }

.ref {
  display: inline-block;
  margin: 6px 0 20px;
  padding: 12px 24px;
  border: 1px dashed var(--brand-hover);
  border-radius: var(--radius-sm);
  background: var(--brand-soft);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: .05em;
  color: #fff;
}

/* --- Footer --------------------------------------------------------------- */

.foot {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.75;
}
.foot a, .done a, .help a { color: #80bbe3; }
.foot a:hover, .done a:hover, .help a:hover { color: #fff; }

/* Optional footer mark. width and height are set inline from the schema so the
   space is reserved before the image decodes and the footer text does not jump. */
.foot__logo {
  display: inline-block;
  margin-bottom: 14px;
  border-radius: 50%;
  object-fit: contain;
  max-width: 100%;
  height: auto;
}

/* Sits under the consent tick, above the submit button. */
.help--consent { margin: -14px 0 22px; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Honeypot - off-screen rather than display:none so bots still fill it. */
.hp { position: absolute; left: -9999px; top: -9999px; opacity: 0; }