/* Ava Monroe · application form (apply.html, apply-sent.html). Loaded after styles.css, which holds the tokens, bar and buttons. */

.page-apply .bar { position: static; }
.bar__close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm, 12px);
  color: var(--choc);
}
.bar__close:hover { background: var(--pink-2); }
.bar__close .icon { width: 24px; height: 24px; }

.progress { height: 4px; background: var(--pink-2); }
.progress__bar {
  display: block;
  height: 100%;
  background: var(--rasp);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 320ms var(--ease-out);
}

.qshell {
  max-width: 640px;
  min-height: calc(100svh - 72px);
  margin-inline: auto;
  padding: 28px var(--gutter) 96px;
}
.qform__count { margin: 0 0 18px; font-size: 14px; font-weight: 600; color: var(--choc-2); }
.qform:not(.is-stepped) .qform__count { display: none; }
/* Says up front that a tap moves on (single-choice steps only). Keeps its line on other steps so the question does not jump. */
.qform__tap { margin: -15px 0 18px; font-size: 14px; line-height: 1.4; color: var(--choc-2); }
.qform__tap.is-off { visibility: hidden; }
.qform__resume { margin: -6px 0 18px; font-size: 14.5px; color: var(--choc-2); }
.qform__resume button {
  /* 44px tall hit area around 14.5px text; the negative margin keeps the line where it was */
  padding: 15px 8px;
  margin: -15px -8px;
  border: 0;
  background: none;
  color: var(--rasp-deep);
  font: 600 14.5px/1 var(--text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

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

.step { min-width: 0; margin: 0 0 48px; padding: 0; border: 0; }
.qform.is-stepped .step { display: none; margin: 0; }
.qform.is-stepped .step.is-active { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .qform.is-stepped .step.is-active { animation: step-in 360ms var(--ease-out); }
  @keyframes step-in { from { transform: translateY(12px); } }
}

.step__q {
  float: left;
  width: 100%;
  margin: 0 0 22px;
  padding: 0;
  font: 600 clamp(1.9rem, 8vw, 2.75rem) / 1.02 var(--display);
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.step__q:focus { outline: none; }
.step__q label { cursor: text; }
.step > :not(legend) { clear: both; }
.step__hint { margin: -8px 0 20px; font-size: 16px; color: var(--choc-2); }

.opts { display: grid; gap: 10px; }
.opt { position: relative; display: block; }
.opt input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.opt span {
  display: flex;
  align-items: center;
  min-height: 60px;
  padding: 14px 18px 14px 54px;
  border: 1.5px solid var(--line, rgb(58 27 18 / 0.14));
  border-radius: var(--r-md, 16px);
  background: var(--milk);
  font: 600 17px/1.3 var(--text);
  position: relative;
  transition: border-color 160ms ease, background-color 160ms ease;
}
/* The ring itself carries the 3:1 contrast (on pink, milk and white); the card border can stay light. */
.opt span::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 50%;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  border: 2px solid var(--line-strong, rgb(58 27 18 / 0.5));
  border-radius: 50%;
  background: var(--white, #fff);
  transition: background-color 160ms ease, border-color 160ms ease;
}
.opt input[type="checkbox"] + span::before { border-radius: var(--r-xs, 8px); }
.opt span::after {
  content: "";
  position: absolute;
  left: 25px;
  top: 50%;
  width: 8px;
  height: 13px;
  margin-top: -9px;
  border-right: 2.5px solid var(--white, #fff);
  border-bottom: 2.5px solid var(--white, #fff);
  transform: rotate(45deg) scale(0);
  transition: transform 180ms var(--ease-out);
}
.opt:hover span { border-color: var(--rasp-line, rgb(200 32 58 / 0.5)); }
.opt input:checked + span { border-color: var(--rasp); background: var(--white, #fff); }
.opt input:checked + span::before { border-color: var(--rasp); background: var(--rasp); }
.opt input:checked + span::after { transform: rotate(45deg) scale(1); }
.opt input:focus-visible + span { outline: 3px solid var(--choc); outline-offset: 2px; }

/* Platforms: two columns with a tighter left edge, even tighter below 360px so Next stays on screen.
   One column only under 300px (a phone zoomed to 200%), where "Instagram" would not fit in half the width. */
@media (min-width: 300px) {
  .opts--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .opts--grid .opt span { padding-left: 46px; padding-right: 12px; }
  .opts--grid .opt span::before { left: 14px; }
  .opts--grid .opt span::after { left: 21px; }
}
@media (min-width: 300px) and (max-width: 359.98px) {
  .opts--grid { gap: 8px; }
  .opts--grid .opt span { padding: 12px 8px 12px 40px; font-size: 16px; }
  .opts--grid .opt span::before { left: 11px; }
  .opts--grid .opt span::after { left: 18px; }
}

.field { position: relative; }
.field input,
.field textarea {
  width: 100%;
  padding: 0 18px;
  border: 1.5px solid var(--line-strong, rgb(58 27 18 / 0.5));
  border-radius: var(--r-md, 16px);
  background: var(--milk);
  color: var(--choc);
  font: 400 20px/1.4 var(--text);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.field input { height: 62px; }
.field textarea { min-height: 150px; padding-block: 14px; resize: vertical; }
.field input:focus,
.field textarea:focus { outline: none; border-color: var(--rasp); box-shadow: 0 0 0 4px var(--rasp-glow, rgb(200 32 58 / 0.14)); }
.field--at input { padding-left: 42px; }
.field__at {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  font: 600 20px/1 var(--text);
  color: var(--choc-2);
}
.field__error { margin: 10px 0 0; font-size: 15px; font-weight: 600; color: var(--rasp-deep); }
.opts + .field__error,
.opt + .field__error { margin-top: 14px; }

/* Shown inside the time zone step when she picks "I'm not in the US". */
.step__note {
  margin: 16px 0 0;
  padding: 14px 16px;
  border: 1.5px solid var(--line, rgb(58 27 18 / 0.14));
  border-radius: var(--r-md, 16px);
  background: var(--milk);
  font-size: 15.5px;
  line-height: 1.5;
}
.step__note a { font-weight: 600; color: var(--rasp-deep); }

/* 18+ box: right above Send (last step only when stepped, always without JavaScript). */
.qform__adult { margin-top: 28px; }
.qform__adult[hidden] { display: none; }

@media (max-width: 600px) {
  .qform.is-stepped .qnav { margin-top: 16px; }
  .qform__adult { margin-top: 20px; }
  .field textarea { min-height: 112px; }
}

/* Short phone screens (the Instagram browser on most iPhones is about 664px tall):
   tighter spacing and cards so a six-answer question still fits on one screen. */
@media (max-width: 600px) and (max-height: 740px) {
  .qshell { padding-top: 16px; }
  .qform__count { margin-bottom: 14px; }
  .qform__tap { margin: -11px 0 14px; }
  .qform__resume { margin-bottom: 14px; }
  .step__q { margin-bottom: 16px; }
  .step__hint { margin: -6px 0 14px; }
  .opts { gap: 8px; }
  .opt span { min-height: 52px; padding-block: 11px; }
}

.qnav { display: flex; align-items: center; gap: 12px; margin-top: 32px; }
.qform:not(.is-stepped) .qnav__back,
.qform:not(.is-stepped) .qnav__next { display: none; }
.qnav .btn { margin-left: auto; min-width: 150px; border: 0; cursor: pointer; }
.qnav .btn[aria-disabled="true"] { opacity: 0.55; }
.qnav__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 56px;
  padding: 0 12px 0 4px;
  border: 0;
  background: none;
  color: var(--choc-2);
  font: 600 16px/1 var(--text);
  cursor: pointer;
}
.qnav__back:hover { color: var(--choc); }
.qnav__back .icon { width: 20px; height: 20px; }
.qnav [hidden] { display: none; }
/* 200% zoom on a phone: Back and Next stack instead of running off the screen */
@media (max-width: 299px) {
  .qnav { flex-wrap: wrap; }
  .qnav .btn { min-width: 0; }
}

.qform__error {
  margin: 20px 0 0;
  padding: 16px 18px;
  border: 1.5px solid var(--rasp);
  border-radius: var(--r-md, 16px);
  background: var(--white, #fff);
  font-size: 15.5px;
}
.qform__error a { display: inline-block; margin-top: 6px; font-weight: 600; color: var(--rasp-deep); }

.qdone { padding-top: 24px; }
.qdone__tick {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--rasp);
  color: var(--white, #fff);
}
.qdone__tick .icon { width: 30px; height: 30px; }
.qdone__title {
  margin: 24px 0 0;
  font: 600 clamp(2.2rem, 9vw, 3.25rem) / 1 var(--display);
  letter-spacing: -0.03em;
}
.qdone__title:focus { outline: none; }
.qdone p { max-width: 30em; margin: 16px 0 28px; font-size: 17.5px; color: var(--choc-2); }

@media (min-width: 900px) {
  /* the bar is 80px tall from 900px (16 + 44 + 16, plus the 4px progress line) */
  .qshell { min-height: calc(100svh - 80px); padding-top: 64px; }
}