/* ==========================================================================
   Apply page (/apply/)
   --------------------------------------------------------------------------
   Black page with a centred hero, then a white panel holding the two-step
   form (progress bar, stream cards, contact fields, file upload).
   Behaviour lives in assets/js/apply.js.

   Contents
     1. Page tokens
     2. Page and hero
     3. Panel and progress bar
     4. Steps
     5. Stream cards (step 1)
     6. Field groups (step 2)
     7. Upload tips and drop zone
     8. File list
     9. Actions and status
   ========================================================================== */


/* 1. Page tokens
   Colours that only this form uses. Brand colours come from main.css. */

.apply-page {
  --apply-grey-50: #f9f9f9;
  --apply-grey-100: #f0f0f0;
  --apply-grey-200: #e0e0e0;
  --apply-grey-400: #9ca3af;
  --apply-grey-500: #6b7280;
  --apply-grey-600: #4b5563;
  --apply-accent-tint: #fff0ec;
  --apply-info-bg: #eff6ff;
  --apply-info-line: #bfdbfe;
  --apply-info-text: #1e40af;
  --apply-info-soft: #3b82f6;
  --apply-error: #ef4444;
}


/* 2. Page and hero ------------------------------------------------------ */

.apply-page {
  background: var(--color-black);
  padding-bottom: clamp(3rem, 6vw, 4.5rem);
}

.apply-hero {
  padding-block: clamp(3.25rem, 7vw, 4.5rem) clamp(2.75rem, 6vw, 4rem);
  color: var(--color-white);
  text-align: center;
}

.apply-hero__badge {
  display: inline-block;
  margin-bottom: 1.4rem;
  padding: 0.35rem 0.9rem;
  border-radius: var(--radius-pill);
  background: rgb(249 16 11 / 0.18);
  font-size: 0.75rem;
}

.apply-hero__title {
  margin-bottom: 1.1rem;
  font-weight: 800;
}

.apply-hero__accent {
  color: var(--color-red-bright);
}

.apply-hero__promise {
  max-width: 34rem;
  margin: 0 auto;
  color: rgb(255 255 255 / 0.75);
  font-size: var(--text-lead);
  font-weight: 600;
  line-height: 1.6;
}


/* 3. Panel and progress bar --------------------------------------------- */

.apply-panel {
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-black);
}

.apply-progress {
  padding: 1.25rem var(--gutter);
  border-bottom: 1px solid var(--apply-grey-100);
  background: var(--apply-grey-50);
}

.apply-progress__list {
  display: flex;
  max-width: 640px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.apply-progress__step {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

/* The line that joins one dot to the next; it turns red once a step is done. */
.apply-progress__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 15px;
  left: calc(50% + 18px);
  right: calc(-50% + 18px);
  height: 2px;
  background: var(--apply-grey-200);
  transition: background-color 0.3s;
}

.apply-progress__step.is-done:not(:last-child)::after {
  background: var(--color-red);
}

.apply-progress__dot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--apply-grey-200);
  color: var(--apply-grey-500);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0;
  transition: background-color 0.3s, color 0.3s, box-shadow 0.3s, transform 0.3s;
}

.apply-progress__step.is-active .apply-progress__dot {
  background: var(--color-red);
  color: var(--color-white);
  box-shadow: 0 0 0 4px rgb(234 35 23 / 0.18);
  transform: scale(1.05);
}

/* A finished step shows a tick instead of its number. */
.apply-progress__step.is-done .apply-progress__dot {
  background: var(--color-black);
  color: transparent;
}

.apply-progress__step.is-done .apply-progress__dot::before {
  content: "";
  position: absolute;
  width: 11px;
  height: 6px;
  border-left: 2.5px solid var(--color-white);
  border-bottom: 2.5px solid var(--color-white);
  transform: rotate(-45deg) translateY(-2px);
}

.apply-progress__label {
  color: var(--apply-grey-400);
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}

.apply-progress__step.is-active .apply-progress__label,
.apply-progress__step.is-done .apply-progress__label {
  color: var(--color-black);
  font-weight: 700;
}


/* 4. Steps -------------------------------------------------------------- */

.apply-form {
  max-width: 860px;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3rem) var(--gutter) clamp(3rem, 7vw, 5rem);
}

/* A step fades up each time it is shown. */
.apply-step:not([hidden]) {
  animation: apply-fade-up 0.3s ease;
}

@keyframes apply-fade-up {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

.apply-step__heading {
  margin-bottom: 1.75rem;
}

.apply-step__title {
  margin-bottom: 0.5rem;
  font-size: var(--text-h4);
  font-weight: 800;
}

.apply-step__heading p {
  color: var(--apply-grey-600);
  line-height: 1.6;
}


/* 5. Stream cards (step 1) ---------------------------------------------- */

.stream-grid {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 641px) {
  .stream-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.stream-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 2rem 1.75rem;
  border: 2px solid var(--apply-grey-200);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.stream-card:hover,
.stream-card:focus-visible {
  border-color: var(--color-red);
  box-shadow: 0 8px 28px rgb(234 35 23 / 0.12);
  transform: translateY(-2px);
}

.stream-card__badge {
  margin-bottom: 1rem;
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-pill);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.stream-card__badge--mvp {
  background: #dbeafe;
  color: #1d4ed8;
}

.stream-card__badge--scale {
  background: #d1fae5;
  color: #065f46;
}

.stream-card__icon {
  margin-bottom: 0.9rem;
  font-size: 2.2rem;
  line-height: 1;
}

.stream-card__title {
  margin-bottom: 0.5rem;
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
}

.stream-card__text {
  color: var(--apply-grey-600);
  line-height: 1.6;
}

.stream-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin-top: 1.6rem;
  color: var(--apply-grey-400);
  font-size: 0.875rem;
  text-align: center;
}

.stream-hint svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}


/* 6. Field groups (step 2)
   The inputs themselves use .field / .field__input from main.css. */

.apply-group {
  min-width: 0;
  margin: 0;
  padding: 1.75rem 0 0;
  border: 0;
  border-top: 1px solid var(--apply-grey-100);
}

.apply-group:first-of-type {
  padding-top: 0;
  border-top: 0;
}

.apply-group + .apply-group {
  margin-top: 0.75rem;
}

.apply-group__title {
  float: left; /* lets the legend sit inside the fieldset like a normal block */
  width: 100%;
  margin-bottom: 1rem;
  padding: 0;
}

.apply-group__title + * {
  clear: both;
}

.apply-grid {
  display: grid;
  gap: 0 1rem;
}

@media (min-width: 641px) {
  .apply-grid {
    grid-template-columns: 1fr 1fr;
  }

  .apply-grid__full {
    grid-column: 1 / -1;
  }
}

.apply-req {
  margin-left: 2px;
  color: var(--color-red-text);
}

.field__label small {
  margin-left: 0.35rem;
  font-size: 0.875rem;
}

.field__input--invalid {
  border-color: var(--apply-error);
  box-shadow: 0 0 0 1px var(--apply-error);
}

/* A select styled like the other fields, with its own arrow. */
.apply-select {
  padding-right: 3rem;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.25rem center;
  cursor: pointer;
}

.apply-notes {
  margin-top: 1.5rem;
}


/* 7. Upload tips and drop zone ------------------------------------------ */

.upload-tips {
  padding: 1rem 1.1rem;
  border: 1px solid var(--apply-info-line);
  border-radius: var(--radius-sm);
  background: var(--apply-info-bg);
  color: var(--apply-info-text);
  line-height: 1.65;
}

.upload-tips__title {
  margin-bottom: 0.45rem;
  font-weight: 700;
}

.upload-tips__intro {
  margin-bottom: 0.85rem;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.6;
}

.upload-tips__list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.upload-tips__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.upload-tips__list li::before {
  content: "\2192"; /* right arrow */
  flex-shrink: 0;
  font-weight: 700;
  opacity: 0.7;
}

.upload-tips__list .upload-tips__logo {
  margin-top: 0.35rem;
  padding-top: 0.45rem;
  border-top: 1px solid var(--apply-info-line);
  font-weight: 600;
}

.upload-tips__list .upload-tips__logo::before {
  content: "🖼";
  font-size: 0.9rem;
  opacity: 1;
}

.upload-tips__privacy {
  margin-top: 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--apply-info-line);
  color: var(--apply-info-soft);
  font-size: 0.8125rem;
}

.dropzone {
  position: relative;
  margin-top: 1rem;
  padding: 2.25rem 2rem;
  border: 2px dashed var(--apply-grey-200);
  border-radius: var(--radius-sm);
  background: var(--apply-grey-50);
  text-align: center;
  transition: border-color 0.2s, background-color 0.2s;
}

.dropzone:hover,
.dropzone.is-dragover {
  border-color: var(--color-red);
  background: var(--apply-accent-tint);
}

.dropzone:focus-within {
  outline: 3px solid var(--color-red);
  outline-offset: 3px;
}

/* Invisible file input stretched over the whole zone. */
.dropzone__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.dropzone__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin: 0 auto 0.9rem;
  border-radius: 10px;
  background: var(--color-black);
}

.dropzone__icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--color-white);
  stroke-width: 1.8;
}

.dropzone__title {
  margin-bottom: 0.3rem;
  font-weight: 700;
}

.dropzone__text {
  color: var(--apply-grey-400);
}

.dropzone__text strong {
  color: var(--color-red-text);
}

.dropzone__formats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin: 0.9rem 0 0;
  padding: 0;
  list-style: none;
}

.dropzone__formats li {
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-pill);
  background: var(--apply-grey-100);
  color: var(--apply-grey-600);
  font-size: 0.75rem;
  font-weight: 500;
}


/* 8. File list ---------------------------------------------------------- */

.file-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.9rem 0 0;
  padding: 0;
  list-style: none;
}

.file-list:empty {
  display: none;
}

.file-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--apply-grey-200);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  animation: apply-fade-up 0.2s ease;
}

.file-item__icon {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 7px;
  background: var(--apply-accent-tint);
}

.file-item__icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--color-red);
  stroke-width: 2;
}

.file-item__info {
  flex: 1;
  min-width: 0;
}

.file-item__name {
  display: block;
  overflow: hidden;
  font-size: 0.875rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-item__size {
  display: block;
  color: var(--apply-grey-400);
  font-size: 0.75rem;
}

.file-item__remove {
  display: flex;
  align-items: center;
  padding: 3px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--apply-grey-400);
  cursor: pointer;
  transition: color 0.2s;
}

.file-item__remove:hover {
  color: var(--apply-error);
}

.file-item__remove svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}


/* 9. Actions and status ------------------------------------------------- */

.apply-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2.25rem;
}

.apply-actions .button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
}

/* "Back" is a quiet outlined button next to the red "Apply". */
.apply-actions__back {
  border: 1.5px solid var(--apply-grey-200);
  background: transparent;
  color: var(--apply-grey-600);
}

.apply-actions__back:hover {
  border-color: var(--color-black);
  background: transparent;
  box-shadow: none;
  color: var(--color-black);
}

.apply-actions__submit[disabled] {
  opacity: 0.7;
  cursor: wait;
  transform: none;
}

.apply-status {
  display: none;
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--apply-grey-200);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  line-height: 1.55;
}

.apply-status[data-state] {
  display: block;
}

.apply-status[data-state="pending"] {
  border-color: var(--apply-info-line);
  background: var(--apply-info-bg);
  color: #1d4ed8;
}

.apply-status[data-state="success"] {
  border-color: #a7f3d0;
  background: #ecfdf5;
  color: #065f46;
}

.apply-status[data-state="error"] {
  border-color: #fecaca;
  background: #fef2f2;
  color: #991b1b;
}