/* Homepage join card + enlist form helpers. Stamp 20260917jt */

#join .join-ranks,
.join-ranks {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  width: 100%;
  box-sizing: border-box;
  padding: 28px 28px;
  border-radius: 0;
  border: 1px solid #2a2a30;
  background: #1a1a1e;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.04);
}

#join .join-ranks-copy,
.join-ranks-copy {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
}

.join-ranks-logo {
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 0 12px;
  object-fit: contain;
  background: transparent;
  border: 0;
}

#join .join-ranks-copy h2,
.join-ranks-copy h2 {
  margin: 0;
  font-size: clamp(1.4rem, 2.5vw, 1.85rem);
  line-height: 1.05;
}

.join-ranks-sub {
  margin: 8px 0 18px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--mist-400, #8a8a90);
}

#join .join-ranks-actions,
.join-ranks-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 10px;
  flex: 0 0 220px;
  min-width: 200px;
}

#join .join-ranks-actions .btn,
.join-ranks-actions .btn {
  width: 100%;
  border-radius: 0;
  letter-spacing: 0;
  text-transform: none;
  font-family: var(--font-sans, 'Barlow', sans-serif);
}

#join .join-enlist-progress,
.join-enlist-progress {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.join-enlist-panel {
  max-width: 560px;
}

.join-enlist-compare {
  display: grid;
  gap: 10px;
  margin: 0 0 14px;
}
.join-enlist-fact {
  display: grid;
  grid-template-columns: minmax(8.5rem, 11.5rem) minmax(0, 1fr);
  gap: 8px 12px;
  align-items: center;
}
.join-enlist-fact-lbl {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  word-spacing: normal;
  text-transform: uppercase;
  color: #8a8a90;
}
.join-enlist-fact-val {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}
.join-enlist-fact.is-need .join-rank-chip {
  border-color: rgba(242, 169, 0, 0.55);
  background: rgba(242, 169, 0, 0.16);
}
.join-rank-dot { color: #6f6f76; font-weight: 600; }
.join-enlist-gate {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}
.join-enlist-remain {
  margin: 0 0 8px;
  font-size: 13px;
  color: #c8c8ce;
}
.wd-enlist-title,
#report-root h2.wd-enlist-title,
.wd-mod h2.wd-enlist-title {
  font-family: var(--font-sans, 'Barlow', sans-serif) !important;
  letter-spacing: normal !important;
  word-spacing: normal !important;
  text-transform: none !important;
  font-size: 1.45rem;
  line-height: 1.2;
  margin: 0 0 8px;
}
.wd-enlist-lead,
.wd-enlist-loyalty,
#report-root .mist,
#report-root .ok,
#report-root p,
#report-root .join-enlist-need,
#report-root .join-enlist-ok,
#report-root .join-enlist-hint,
#report-root .join-enlist-remain,
#report-root .join-enlist-fact-lbl,
#report-root .join-enlist-fact-val,
#report-root .join-rank-name {
  letter-spacing: normal !important;
  word-spacing: normal !important;
  font-family: var(--font-sans, 'Barlow', sans-serif) !important;
}
#report-root .caps,
#report-root .field .caps {
  letter-spacing: 0.04em !important;
  word-spacing: 0.12em !important;
  font-family: var(--font-sans, 'Barlow', sans-serif) !important;
}
.wd-enlist-loyalty {
  margin: 0 0 8px;
  max-width: 62ch;
  font-size: 14px;
  line-height: 1.5;
}
@media (max-width: 520px) {
  .join-enlist-fact {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}


.join-enlist-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
}

.join-rank-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 3px 8px;
  border: 1px solid rgba(242, 169, 0, 0.35);
  background: rgba(242, 169, 0, 0.1);
  color: #f2a900;
  font-family: var(--font-mono, 'JetBrains Mono', Consolas, monospace);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
}

.join-rank-name {
  font-size: 15px;
  font-weight: 600;
  color: #f3f3f5;
}

.join-enlist-meter {
  display: grid;
  gap: 6px;
  margin: 0 0 10px;
}

.join-enlist-meter-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: #c8c8ce;
}

.join-enlist-meter-top span:last-child {
  font-family: var(--font-mono, 'JetBrains Mono', Consolas, monospace);
  font-size: 12px;
  color: var(--mist-400, #8a8a90);
}

.join-enlist-bar {
  height: 10px;
  border: 1px solid #2a2a32;
  background: #121218;
  overflow: hidden;
}

.join-enlist-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #c48400, #f2a900);
}

.join-enlist-need,
.join-enlist-ok {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.4;
}

.join-enlist-ok { color: #86efac; }
.join-enlist-need { color: #d4d4da; }

.join-enlist-hint {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: #6f6f76;
}

#join-apply.is-disabled,
.btn.join-apply.is-disabled,
.btn.is-enlist-wait[disabled] {
  opacity: 1;
  filter: none;
  cursor: not-allowed;
  pointer-events: none;
  background: #3a3a44;
  border-color: #3a3a44;
  color: #9ca3af;
}

.wd-sup-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.wd-sup-card.is-enlist {
  min-height: 168px;
  border-color: rgba(232, 163, 60, 0.4);
  background: linear-gradient(180deg, rgba(232, 163, 60, 0.1), #16161c 55%);
}
.wd-sup-card.is-enlist:hover { border-color: #e8a33c; }
.wd-tkt-tag.is-enlist {
  background: rgba(134, 239, 172, 0.12);
  border-color: rgba(134, 239, 172, 0.4);
  color: #86efac;
}
.wd-enlist-discord {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 4px 0 10px;
}
.wd-enlist-snap {
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid #2a2a32;
  background: #121218;
}
.wd-enlist-snap .join-enlist-panel {
  max-width: none;
}
.wd-tkt-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}
.wd-tkt-filters .wd-mod-tab { cursor: pointer; }

@media (max-width: 820px) {
  #join .join-ranks,
  .join-ranks {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding: 20px 16px;
  }
  #join .join-ranks-actions,
  .join-ranks-actions {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
  }
  .wd-sup-cards { grid-template-columns: 1fr; }
}