/* Applications (/apply/). Built from the tokens in styles.css :root. */

/* --- Arriving ------------------------------------------------------------
   Content here comes from the API a moment after the page, so instead of
   popping in it rises into place, one item after another (the delay is set
   per item by applications.js). Transform and opacity only, so it stays on
   the GPU and never makes the page reflow. */

@keyframes app-in {
  from { opacity: 0; transform: translateY(10px) }
  to   { opacity: 1; transform: none }
}

.app-in { animation: app-in .42s var(--ease, cubic-bezier(.2, .7, .2, 1)) both }

@media (prefers-reduced-motion: reduce) {
  .app-in { animation: none }
}

/* Holds the space while the forms load, so the footer does not jump. */
.app-cards:empty { min-height: 220px }

/* --- The cards ----------------------------------------------------------- */

.app-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px }

.app-card {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 24px 26px;
  background: var(--surface);
  border-radius: var(--round);
  box-shadow: var(--bevel);
}

.app-card h2 { margin: 0; font-size: 26px }
.app-card .app-team { margin: 0; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim) }
.app-card p { margin: 0; color: var(--muted) }
.app-card .post-actions { margin-top: 6px; align-items: center }
.app-card .app-state { font-size: 13.5px; color: var(--dim) }

/* --- Status badges (the ticket ones, plus the application states) -------- */

.status-pending, .status-review { background: rgba(217, 176, 106, .15); color: var(--warn) }
.status-accepted { background: rgba(127, 201, 162, .15); color: var(--good) }
.status-denied { background: rgba(226, 121, 106, .15); color: var(--danger) }
.status-withdrawn { background: rgba(255, 255, 255, .07); color: var(--dim) }

.button.danger { color: var(--danger) }
.button.danger:hover { background: rgba(226, 121, 106, .14) }

/* --- The form ------------------------------------------------------------ */

.app-intro p { margin: 0 0 12px; color: var(--muted); line-height: 1.75; max-width: 75ch }
.app-intro p:last-child { margin-bottom: 0 }
.app-intro .app-team { margin: 0 0 14px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim) }

.app-section { margin-top: 18px }
.app-section-title { margin: 0 0 18px; font-size: 22px }

.app-question { display: grid; gap: 8px; margin-bottom: 26px }
.app-question:last-child { margin-bottom: 0 }

.app-question > label {
  display: flex;
  gap: 12px;
  font-family: RevainBody, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  text-transform: none;
  letter-spacing: 0;
}

.app-number { flex: none; min-width: 1.6em; font-family: RevainUI, sans-serif; color: var(--dim) }

.app-scenario {
  margin: 0;
  padding: 14px 18px;
  background: var(--ink);
  border-radius: var(--round-sm);
  box-shadow: inset 0 0 0 1px var(--line-soft);
  color: var(--muted);
  line-height: 1.7;
}

.app-scenario strong { display: block; margin-bottom: 4px; font-family: RevainUI, sans-serif; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); font-weight: 400 }

.app-question .hint { font-size: 13px; color: var(--dim); margin: 0 }
.app-question .count { font-size: 12.5px; color: var(--dim); text-align: right; margin: 0 }
.app-question .count.short { color: var(--warn) }
.app-question .count.ok { color: var(--good) }
.app-question .error { margin: 0; font-size: 13px; color: var(--danger) }
.app-question.invalid input,
.app-question.invalid textarea { box-shadow: inset 0 0 0 1px var(--danger) }
.app-question textarea { min-height: 130px }
.app-question textarea.big { min-height: 320px }

.app-confirm { display: grid; gap: 4px; margin-bottom: 10px }
.app-confirm .tick { font-size: 15px; padding: 9px 10px }
.app-outro { margin: 16px 0 0; line-height: 1.7; max-width: 75ch }
.app-draft { margin: 12px 0 0 }
.app-motto { margin: 22px 0 0; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--dim) }
#e-confirm { margin: 0; font-size: 13px; color: var(--danger) }

/* --- One application ------------------------------------------------------ */

.app-decision {
  margin: 18px 0 4px;
  padding: 16px 20px;
  background: var(--ink);
  border-radius: var(--round-sm);
  box-shadow: inset 0 0 0 1px var(--line-soft);
}

.app-decision strong { display: block; margin-bottom: 6px; font-family: RevainUI, sans-serif; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); font-weight: 400 }
.app-decision p { margin: 0; color: var(--muted); line-height: 1.7; white-space: pre-wrap }

.app-answers-section { margin-top: 26px }
.app-answers-section h3 { margin: 0 0 14px; font-size: 18px; color: var(--muted) }
.app-answer { margin: 0 0 20px }
.app-answer dt { margin: 0 0 6px; color: var(--text); line-height: 1.55 }
.app-answer dd { margin: 0; color: var(--muted); line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere }
.app-answer .app-scenario { margin-bottom: 8px }

.app-applicant { display: grid; gap: 4px; margin-bottom: 16px; font-size: 14px; color: var(--muted) }
.app-applicant span { overflow-wrap: anywhere }

@media (max-width: 640px) {
  .app-card, .app-intro, .app-section { padding: 20px }
  .app-question > label { font-size: 15px }
}