/* ==========================================================
   HAZZARDSMP STAFF APPLICATION PAGE
   Loads after nav.css / icons.css / light-theme.css.

   border-box for this page only, for the reason written at length in
   css/profile.css: the wrapper is a width:100% block with padding, so
   in the default content-box it hangs that padding out past the
   viewport and scrolls the page sideways.
   ========================================================== */

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

.apply-page [hidden] { display: none !important; }

.apply-page {
  --panel: rgba(22, 10, 38, .82);
  --line: rgba(216, 180, 254, .13);
  --text: #faf5ff;
  --muted: #c4b5d4;
  --blue: #c084fc;
  --blue-bright: #e879f9;
  --green: #50dfa0;
  --amber: #ffc46b;
  --rose: #ff8f99;
  --violet: #f8a5eb;
}

.apply-page {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding: 40px 24px 70px;
}

/* ---------- Gate: signed out ---------- */

.apply-gate {
  display: grid;
  place-items: center;
  min-height: 60vh;
}

.apply-gate-card {
  width: min(100%, 460px);
  padding: 40px 36px;
  text-align: center;

  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 22px;

  box-shadow: 0 28px 70px rgba(0, 0, 0, .45);
}

.apply-gate-icon {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: 0 auto 22px;

  border-radius: 18px;
  background: rgba(88, 101, 242, .16);
  border: 1px solid rgba(255, 124, 234, .4);
  color: var(--violet);
}

.apply-gate-icon .ic { width: 28px; height: 28px; }

.apply-gate-card h1 {
  margin: 0 0 12px;
  font-size: clamp(21px, 4vw, 26px);
  font-weight: 900;
  letter-spacing: -1px;
}

.apply-gate-card > p {
  margin: 0 0 24px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.75;
}

.gate-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;

  min-height: 48px;
  padding: 0 18px;

  border-radius: 11px;
  background: linear-gradient(120deg, #5865f2, #4752c4);
  border: 1px solid rgba(255, 124, 234, .55);
  color: #fff;

  font-size: 13px;
  font-weight: 800;

  transition: transform .2s cubic-bezier(.2, .8, .2, 1), filter .2s ease;
}

.gate-button img { border-radius: 6px; }

.gate-button:hover { transform: translateY(-2px); filter: brightness(1.08); }

.gate-note {
  margin: 22px 0 0;
  padding-top: 18px;

  border-top: 1px solid var(--line);

  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.65;
}

.gate-note strong { color: var(--text); }

/* ---------- Already applied / already staff ---------- */

.apply-state {
  display: grid;
  place-items: center;
  min-height: 60vh;
}

.apply-state-card {
  width: min(100%, 460px);
  padding: 40px 36px;
  text-align: center;

  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 22px;

  box-shadow: 0 28px 70px rgba(0, 0, 0, .45);
}

.apply-state-icon {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: 0 auto 22px;

  border-radius: 18px;
  background: rgba(255, 196, 107, .13);
  border: 1px solid rgba(255, 196, 107, .36);
  color: var(--amber);
}

.apply-state-icon .ic { width: 28px; height: 28px; }

.apply-state-icon.ok {
  background: rgba(80, 223, 160, .13);
  border-color: rgba(80, 223, 160, .34);
  color: var(--green);
}

.apply-state-icon.no {
  background: rgba(255, 143, 153, .12);
  border-color: rgba(255, 143, 153, .32);
  color: var(--rose);
}

.apply-state-card h1 {
  margin: 0 0 12px;
  font-size: clamp(21px, 4vw, 26px);
  font-weight: 900;
  letter-spacing: -1px;
}

.apply-state-card > p {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.75;
}

.state-meta {
  padding: 12px 14px;
  margin: 0 0 22px;

  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(20, 4, 20, .3);

  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.7;
}

.state-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

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

.apply-hero {
  padding: 26px;
  margin-bottom: 20px;

  background:
    linear-gradient(120deg, rgba(192, 132, 252, .07), transparent 55%),
    var(--panel);

  border: 1px solid var(--line);
  border-radius: 20px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  padding: 6px 12px;
  margin-bottom: 14px;

  border-radius: 999px;

  background: rgba(192, 132, 252, .12);
  border: 1px solid rgba(192, 132, 252, .3);
  color: var(--blue-bright);

  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.hero-badge .ic { width: 13px; height: 13px; }

.apply-hero h1 {
  margin: 0 0 10px;
  font-size: clamp(24px, 5vw, 32px);
  font-weight: 900;
  letter-spacing: -1.1px;
}

.apply-hero p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.75;
}

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

.apply-form { display: block; }

.apply-card {
  padding: 24px;
  margin: 0 0 18px;

  min-width: 0;

  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
}

.card-legend {
  display: flex;
  align-items: center;
  gap: 8px;

  padding: 0 8px;
  margin: 0 0 4px;

  color: var(--text);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.3px;
}

.card-legend .ic {
  width: 16px;
  height: 16px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.card-hint {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
}

.field { margin-bottom: 16px; min-width: 0; }
.field:last-child { margin-bottom: 0; }

.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.field label {
  display: block;
  margin-bottom: 8px;
  color: #f2dbf5;
  font-size: 12px;
  font-weight: 700;
}

.input-wrap {
  position: relative;
  min-width: 0;
}

.field-icon {
  position: absolute;
  top: 14px;
  left: 14px;

  width: 16px;
  height: 16px;

  color: #936f99;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;

  pointer-events: none;
  transition: color .2s ease;
}

.input-wrap input,
.input-wrap textarea {
  width: 100%;

  padding: 0 14px 0 42px;

  color: var(--text);
  background: #160a26;

  border: 1px solid rgba(203, 135, 220, .17);
  border-radius: 10px;

  font-family: inherit;
  font-size: 13px;

  transition: border-color .2s ease, box-shadow .2s ease;
}

.input-wrap input { height: 46px; }

.input-wrap textarea {
  min-height: 96px;
  padding: 12px 14px;

  line-height: 1.65;
  resize: vertical;
}

.textarea-wrap .field-icon { display: none; }

.input-wrap input:hover,
.input-wrap textarea:hover { border-color: rgba(192, 132, 252, .45); }

.input-wrap input:focus,
.input-wrap textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(192, 132, 252, .12);
}

.input-wrap:focus-within .field-icon { color: var(--blue); }

.field-note {
  margin: 7px 0 0;
  color: #87648b;
  font-size: 10.5px;
  text-align: right;
}

/* ---------- Submit ---------- */

.form-message {
  margin: 0 0 14px;
  color: var(--rose);
  font-size: 12px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.form-message:empty { display: none; }
.form-message.success { color: var(--green); }

.apply-actions {
  display: flex;
  justify-content: flex-end;
}

.submit-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;

  min-height: 44px;
  padding: 0 18px;

  border: 0;
  border-radius: 10px;

  background: linear-gradient(120deg, #f472b6, #a855f7);
  color: #14051f;

  font-size: 12px;
  font-weight: 800;

  cursor: pointer;

  transition: transform .2s cubic-bezier(.2, .8, .2, 1), filter .2s ease;
}

.submit-button .ic { width: 15px; height: 15px; }

.submit-button:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: brightness(1.05);
}

.submit-button:disabled {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
}

.ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  min-height: 40px;
  padding: 0 16px;

  border: 1px solid var(--line);
  border-radius: 10px;

  background: transparent;
  color: var(--muted);

  font-size: 12px;
  font-weight: 700;

  cursor: pointer;

  transition: color .2s ease, border-color .2s ease;
}

.ghost-button:hover {
  color: var(--blue);
  border-color: rgba(192, 132, 252, .4);
}

.apply-note {
  margin: 14px 0 0;
  color: #87648b;
  font-size: 11.5px;
  line-height: 1.6;
  text-align: right;
}

/* ---------- Light theme ---------- */

body.light-theme .apply-card,
body.light-theme .apply-gate-card,
body.light-theme .apply-state-card,
body.light-theme .apply-hero {
  --panel: rgba(255, 255, 255, .9);
  --line: rgba(62, 15, 70, .12);
  --text: #270b2c;
  --muted: #6e4a75;
}

body.light-theme .input-wrap input,
body.light-theme .input-wrap textarea { background: #fff; }

body.light-theme .state-meta { background: rgba(62, 15, 70, .03); }
body.light-theme .field label { color: #3e1d46; }

/* ---------- Responsive ---------- */

@media (max-width: 640px) {
  .apply-page { padding: 24px 15px 50px; }

  .apply-card { padding: 18px 15px; }

  .field-row { grid-template-columns: 1fr; }

  .apply-actions { flex-direction: column; }
  .apply-actions > * { width: 100%; }

  .apply-note { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ==========================================================
   Streamer recruitment

   The same offer the Discord bot posts from /staffappsetup. It is
   read before anything else on the page, so it is given room and a
   colour of its own rather than being another card in the stack.
   ========================================================== */

.streamer-post {
  padding: 26px;
  margin-bottom: 20px;

  background:
    linear-gradient(120deg, rgba(139, 92, 246, .1), transparent 60%),
    var(--panel);

  border: 1px solid rgba(139, 92, 246, .32);
  border-radius: 20px;
}

.streamer-title {
  display: flex;
  align-items: center;
  gap: 10px;

  margin: 0 0 10px;

  color: var(--text);
  font-size: clamp(19px, 4vw, 23px);
  font-weight: 900;
  letter-spacing: -.6px;
  text-transform: uppercase;
}

.streamer-title .ic {
  width: 20px;
  height: 20px;

  flex: 0 0 20px;

  fill: none;
  stroke: #a78bfa;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.streamer-lead {
  margin: 0 0 18px;

  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.streamer-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.streamer-card {
  min-width: 0;
  padding: 16px;

  border: 1px solid var(--line);
  border-radius: 14px;

  background: rgba(20, 4, 20, .3);
}

.streamer-card h3 {
  display: flex;
  align-items: center;
  gap: 8px;

  margin: 0 0 12px;

  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.streamer-card h3 .ic {
  width: 14px;
  height: 14px;

  fill: none;
  stroke: #a78bfa;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.streamer-card ul {
  margin: 0;
  padding: 0;

  list-style: none;
}

.streamer-card li {
  position: relative;

  margin-bottom: 9px;
  padding-left: 16px;

  min-width: 0;
  overflow-wrap: anywhere;

  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.65;
}

.streamer-card li:last-child { margin-bottom: 0; }

.streamer-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: #a78bfa;
}

.streamer-card code {
  padding: 2px 7px;

  border-radius: 6px;

  background: rgba(139, 92, 246, .14);
  border: 1px solid rgba(139, 92, 246, .28);

  color: #c4b5fd;

  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11.5px;
}

.streamer-note {
  display: flex;
  align-items: center;
  gap: 8px;

  margin: 16px 0 0;
  padding-top: 14px;

  border-top: 1px solid var(--line);

  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.6;
}

.streamer-note .ic {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.light-theme .streamer-card { background: rgba(62, 15, 70, .03); }

@media (max-width: 640px) {
  .streamer-post { padding: 18px 15px; }
}

/* ==========================================================
   Situation questions

   Six long-form boxes in their own fieldset, because this is the part
   of the form that decides the application and it should not look like
   an afterthought tacked onto the end of a list of quick fields.

   The intro is there to say out loud what the questions are actually
   reading, which is the process rather than the answer. Applicants who
   know that write better answers, and the ones who cannot be bothered
   to try have told you something useful before they submit.
   ========================================================== */

.scenario-set {
  margin-top: 26px;
  padding: 22px 20px 6px;

  border: 1px solid rgba(139, 92, 246, .28);
  border-radius: 18px;

  background:
    linear-gradient(140deg, rgba(139, 92, 246, .08), transparent 55%),
    rgba(20, 4, 20, .3);
}

.scenario-set legend {
  padding: 0 10px;

  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.scenario-intro {
  margin: 0 0 20px;

  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.65;
}

.scenario-set .field {
  margin-bottom: 20px;
}

.scenario-set label {
  color: var(--text);
  font-weight: 700;
  line-height: 1.55;
}

/*
   These are longer than the other answers by design - a scenario needs
   room to describe a sequence - so they start taller.
*/
.scenario-set textarea {
  min-height: 120px;
}

body.light-theme .scenario-set {
  background:
    linear-gradient(140deg, rgba(126, 34, 206, .05), transparent 55%),
    rgba(62, 15, 70, .02);
  border-color: rgba(126, 34, 206, .22);
}

@media (max-width: 640px) {
  .scenario-set {
    padding: 18px 14px 4px;
  }
}