/* PROXIMA // Guided creator: compact layout, guide panel, animation */

/* compact chrome */
.px-onboard-shell .px-gate-header {
  min-height: 56px;
  padding: 10px clamp(14px, 4vw, 48px);
}
.px-onboard-shell .px-gate-main {
  padding-top: 14px;
}
.recruit-head {
  padding: 12px 16px;
  gap: 12px;
}
.recruit-head::before {
  height: 60px;
}
.recruit-head h2 {
  font-size: 21px;
  margin: 2px 0;
}
.recruit-head p {
  font-size: 12px;
  margin: 2px 0 0;
}
.recruit-count {
  font-size: 11px;
}
.recruit-count b {
  font-size: 22px;
}
.px-wizard-progress {
  margin: 8px 0 6px;
}
.px-wizard-progress-fill {
  transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.recruit-stepnav {
  gap: 4px;
  margin-bottom: 10px;
}
.recruit-stepnav .wizard-step {
  padding: 5px 6px;
  flex-direction: row;
  gap: 6px;
  font-size: 10px;
  min-height: 0;
}
.recruit-stepnav .wizard-step span {
  height: 18px;
  min-width: 18px;
  font-size: 10px;
}
.recruit-stepnav .wizard-step.passed span {
  font-size: 0;
}
.recruit-stepnav .wizard-step.passed span::after {
  content: '✓';
  font-size: 11px;
}
.recruit-grid {
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 8px;
}
.recruit-card {
  min-height: 0;
  padding: 10px 11px;
  gap: 4px;
}
.recruit-emblem {
  height: 52px;
}
.recruit-emblem svg {
  width: 56px;
  height: 52px;
}
.recruit-title {
  font-size: 14px;
}
.wizard-footer {
  margin-top: 12px;
  padding: 10px 0;
}
.recruit-stage .card {
  padding: 12px 14px;
}
.recruit-stage .px-level-choice,
.recruit-stage .statrow {
  padding-top: 6px;
  padding-bottom: 6px;
}

/* content + guide */
.cr-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 14px;
  align-items: start;
  max-width: 1500px;
  margin: 0 auto;
}
.cr-wrap.guide-folded {
  grid-template-columns: minmax(0, 1fr) auto;
}
.cr-main {
  min-width: 0;
}
.cr-guide {
  position: sticky;
  top: 12px;
  border: 1px solid hsl(calc(var(--th-h) + 2.7) calc(41.5% * var(--th-s)) calc(26% + var(--th-l)));
  background: hsl(calc(var(--th-bh) + -5) calc(27.3% * var(--th-bs)) 5% / 0.9);
  max-height: calc(100vh - 24px);
  overflow: auto;
}
.cr-guide.folded {
  border: none;
  background: none;
}
.cr-guide-toggle {
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid #ffffff14;
  color: hsl(calc(var(--th-h) + 0.7) calc(70% * var(--th-s)) calc(66% + var(--th-l)));
  font: 700 10px var(--head);
  letter-spacing: 0.12em;
  padding: 7px 10px;
  text-align: right;
  cursor: pointer;
}
.cr-guide.folded .cr-guide-toggle {
  writing-mode: vertical-rl;
  border: 1px solid #ffffff22;
  padding: 10px 6px;
}
.cr-guide-body {
  padding: 10px 14px 14px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #d6ddd9;
}
.cr-guide-kicker {
  font: 700 9px var(--head);
  letter-spacing: 0.14em;
  color: #9aa49f;
}
.cr-guide h3 {
  margin: 2px 0 6px;
  font: 700 17px var(--head);
  color: hsl(calc(var(--th-h) + 0.7) calc(80% * var(--th-s)) calc(70% + var(--th-l)));
}
.cr-guide p {
  margin: 0 0 8px;
}
.cr-guide-sec {
  border-top: 1px solid #ffffff14;
  padding-top: 8px;
  margin-top: 8px;
}
.cr-guide-sec > b {
  display: block;
  font: 700 9px var(--head);
  letter-spacing: 0.14em;
  color: #9aa49f;
  margin-bottom: 4px;
}
.cr-guide-sec ol,
.cr-guide-sec ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
}
.cr-mine dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  margin: 0;
}
.cr-mine dt {
  color: #9aa49f;
  font-size: 11px;
}
.cr-mine dd {
  margin: 0;
  font-weight: 600;
}
.cr-terms details {
  border-left: 2px solid #ffffff22;
  padding-left: 8px;
  margin-bottom: 4px;
}
.cr-terms summary {
  cursor: pointer;
  font-weight: 600;
}
.cr-terms p {
  margin: 2px 0 0;
  color: #b8c1bc;
}

/* animation: only when the phase changes */
@keyframes cr-in-next {
  from {
    opacity: 0;
    transform: translateX(28px);
  }
}
@keyframes cr-in-prev {
  from {
    opacity: 0;
    transform: translateX(-28px);
  }
}
@keyframes cr-rise {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
}
@keyframes cr-title {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes cr-pop {
  40% {
    transform: scale(1.04);
  }
}
.cr-enter .recruit-head h2 {
  animation: cr-title 0.6s cubic-bezier(0.3, 0.7, 0.2, 1) both;
}
.cr-next .recruit-stage {
  animation: cr-in-next 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.cr-prev .recruit-stage {
  animation: cr-in-prev 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.cr-enter .recruit-stage .recruit-grid > *,
.cr-enter .recruit-stage .px-level-choice,
.cr-enter .recruit-stage .card > *:not(h3),
.cr-first .recruit-stepnav > *,
.cr-enter .cr-guide-sec {
  animation: cr-rise 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--cr-i, 0) * 35ms + 80ms);
}
.cr-first .recruit-head {
  animation: cr-rise 0.5s ease-out both;
}
.recruit-card.cr-pop {
  animation: cr-pop 0.35s ease-out;
}
.recruit-stepnav .wizard-step.current span {
  box-shadow: 0 0 0 0 currentColor;
  animation: cr-ping 2s ease-out infinite;
}
@keyframes cr-ping {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 60%, transparent);
  }
  70%,
  100% {
    box-shadow: 0 0 0 7px transparent;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cr-wrap *,
  .px-wizard-progress-fill {
    animation: none !important;
    transition: none !important;
  }
}
@media (max-width: 1000px) {
  .cr-wrap,
  .cr-wrap.guide-folded {
    grid-template-columns: 1fr;
  }
  .cr-guide {
    position: static;
    max-height: none;
    order: -1;
  }
  .cr-guide.folded .cr-guide-toggle {
    writing-mode: horizontal-tb;
  }
}

/* stronger overrides for the onboarding shell */
.px-onboard-shell .recruit-stepnav {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 4px;
}
.px-onboard-shell .recruit-stepnav .wizard-step {
  min-height: 0;
  padding: 5px 4px;
  justify-content: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.px-onboard-shell .recruit-grid {
  grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));
  gap: 8px;
  margin: 10px 0 12px;
}
.px-onboard-shell .recruit-card {
  min-height: 0;
  padding: 9px 10px;
  gap: 3px;
}
.px-onboard-shell .recruit-emblem {
  height: 44px;
}
.px-onboard-shell .recruit-emblem svg,
.px-onboard-shell .recruit-emblem img {
  width: 46px;
  height: 44px;
}
.px-onboard-shell .recruit-card .recruit-title {
  font-size: 13px;
}
.px-onboard-shell .recruit-card .recruit-meta,
.px-onboard-shell .recruit-card .recruit-note {
  font-size: 9.5px;
}
.px-onboard-shell .recruit-info {
  padding: 8px 12px;
  font-size: 12px;
}
@media (max-width: 700px) {
  .px-onboard-shell .recruit-stepnav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Faction step: list on the left, details on the right */
.cr-faction {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.9fr);
  gap: 12px;
  align-items: start;
  margin-top: 10px;
}
.cr-flist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 6px;
}
.cr-fcard {
  display: flex;
  gap: 9px;
  align-items: center;
  text-align: left;
  padding: 7px 9px;
  border: 1px solid #ffffff1c;
  border-left: 3px solid hsl(calc(var(--th-h) + 0) calc(60% * var(--th-s)) calc(50% + var(--th-l)));
  background: hsl(calc(var(--th-bh) + 0) calc(25% * var(--th-bs)) 8%);
  color: #dfe6e2;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    background 0.15s ease;
}
.cr-fcard:hover,
.cr-fcard:focus-visible {
  transform: translateX(2px);
  background: hsl(calc(var(--th-bh) + 0) calc(30% * var(--th-bs)) 12%);
}
.cr-fcard.selected {
  outline: 1px solid hsl(calc(var(--th-h) + 0) calc(70% * var(--th-s)) calc(62% + var(--th-l)));
  background: hsl(calc(var(--th-bh) + 0) calc(35% * var(--th-bs)) 14%);
}
.cr-fcard img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  flex: none;
}
.cr-fcard b {
  display: block;
  font: 700 12px var(--head);
}
.cr-fcard small {
  display: block;
  font-size: 10px;
  color: #a3aca7;
  line-height: 1.3;
}
.cr-fside {
  position: sticky;
  top: 12px;
}
.cr-fpanel {
  border: 1px solid hsl(calc(var(--th-h) + 0) calc(50% * var(--th-s)) calc(35% + var(--th-l)));
  border-top: 3px solid hsl(calc(var(--th-h) + 0) calc(70% * var(--th-s)) calc(58% + var(--th-l)));
  background: radial-gradient(
      circle at 85% 0,
      hsl(calc(var(--th-h) + 0) calc(50% * var(--th-s)) calc(25% + var(--th-l)) / 0.35),
      transparent 55%
    ),
    #0d1110;
  padding: 12px 14px;
  font-size: 12.5px;
  line-height: 1.5;
  animation: cr-rise 0.25s ease-out;
}
.cr-fpanel-head {
  display: flex;
  gap: 12px;
  align-items: center;
}
.cr-fpanel-head img {
  width: 58px;
  height: 58px;
  object-fit: contain;
}
.cr-fpanel-head small {
  font: 700 9px var(--head);
  letter-spacing: 0.14em;
  color: #9aa49f;
}
.cr-fpanel-head h3 {
  margin: 0;
  font: 700 19px var(--head);
  color: hsl(calc(var(--th-h) + 0) calc(75% * var(--th-s)) calc(70% + var(--th-l)));
}
.cr-fpanel-head p {
  margin: 0;
  font-size: 11px;
  color: #a3aca7;
}
.cr-fdesc {
  margin: 10px 0 6px;
}
.cr-fsec {
  border-top: 1px solid #ffffff14;
  padding-top: 7px;
  margin-top: 7px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.cr-fsec > b {
  flex-basis: 100%;
  font: 700 9px var(--head);
  letter-spacing: 0.14em;
  color: #9aa49f;
}
.cr-fchip {
  border: 1px solid #ffffff26;
  padding: 1px 7px;
  font-size: 11px;
}
.cr-fchip.ally {
  border-color: #6fcf8c88;
  color: #9fe0b2;
}
.cr-fchip.rival {
  border-color: #e56a5288;
  color: #f0a597;
}
.cr-fstats {
  display: flex;
  gap: 12px;
  flex-basis: 100%;
}
.cr-fstats strong {
  font: 700 16px var(--head);
  color: hsl(calc(var(--th-h) + 0) calc(75% * var(--th-s)) calc(70% + var(--th-l)));
}
.cr-fcaps {
  flex-basis: 100%;
  color: #ffd25a;
  font-size: 11.5px;
}
.cr-fmuted {
  flex-basis: 100%;
  color: #8f9893;
  font-size: 11px;
  margin: 6px 0 0;
}
@media (max-width: 1100px) {
  .cr-faction {
    grid-template-columns: 1fr;
  }
  .cr-fside {
    position: static;
    order: -1;
  }
}
.cr-fmotto {
  margin: 10px 0 0;
  font: 700 11px var(--head);
  letter-spacing: 0.08em;
  color: hsl(calc(var(--th-h) + 0) calc(75% * var(--th-s)) calc(70% + var(--th-l)));
}
/* Species step: cards + species file */
.cr-species {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.75fr);
  margin-top: 0;
}
.cr-species-main {
  min-width: 0;
}
.cr-species .recruit-grid {
  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
}
.cr-sp-sigil svg {
  width: 58px;
  height: 58px;
  stroke: hsl(calc(var(--th-h) + 0) calc(65% * var(--th-s)) calc(62% + var(--th-l)));
  fill: none;
}
.cr-chipimg {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  margin-right: 4px;
}