/* Launch a coin (the reference's careers layout): a starfield hero with the capsule rocket lifting
   through the clouds, then the launch form beside a live preview of the coin's card, then what
   happens after launch. The form works locally; launching itself opens when launches open. */

.ln {
  background: var(--page);
  color: var(--text);
}
.ln-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-top: 148px;
  background: #000;
  text-align: center;
}
.ln-stars {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: #000 url(../assets/6154246d314fea2001bff264427e012d.png) center top / max(100%, 1100px) auto no-repeat;
  image-rendering: pixelated;
  pointer-events: none;
}
.ln-hero-in {
  display: grid;
  justify-items: center;
  gap: 24px;
}
.ln-title {
  display: flex;
  flex-direction: column;
  margin: 0;
  text-wrap: balance;
}
.ln-title-2 {
  color: var(--text-3);
}
.ln-lede {
  max-width: 600px;
  margin: 0;
  color: var(--text-2);
}
.ln-art {
  display: block;
  width: min(100%, 1100px);
  height: auto;
  margin: 8px auto 0;
  image-rendering: pixelated;
  pointer-events: none;
}
/* Wide screens: the rocket art stops at 1100px, so the cloud bank carries on past it to both edges.
   The home sky's seamless cloud strip sits behind the art at the same art-pixel size (2px, less on
   narrow screens), starting above its highest cloud tops so none is cut flat and ending on solid
   cloud. It is masked out behind the rocket, and the art's hard side edges fade into it. */
.ln-clouds {
  display: none;
}
@media (min-width: 1101px) {
  .ln-art {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 15%, #000 85%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 15%, #000 85%, transparent 100%);
  }
  /* 1px of art is 2px here. Two banks, each shifted along the strip so low clouds about as tall as
     the art's own edge clouds meet it, with the strip's tall clouds further out */
  .ln-clouds {
    display: block;
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    bottom: 0;
    height: 460px;
    pointer-events: none;
  }
  .ln-clouds::before,
  .ln-clouds::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url(../assets/69e80313b2bf7cd3b9208f5b889ec7b2.png) 0 -570px / 6400px 1832px repeat-x;
    image-rendering: pixelated;
  }
  .ln-clouds::before {
    background-position: calc(50% - 2784px) -570px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(50% - 660px), transparent calc(50% - 460px));
    mask-image: linear-gradient(90deg, #000 calc(50% - 660px), transparent calc(50% - 460px));
  }
  .ln-clouds::after {
    background-position: calc(50% - 856px) -570px;
    -webkit-mask-image: linear-gradient(90deg, transparent calc(50% + 460px), #000 calc(50% + 660px));
    mask-image: linear-gradient(90deg, transparent calc(50% + 460px), #000 calc(50% + 660px));
  }
}

/* Form and preview */
.ln-main {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 32px;
  padding-block: 64px 48px;
}
.ln-form {
  position: relative;
  z-index: 45;
  flex: 999 1 560px;
  min-width: 0;
  display: grid;
  gap: 20px;
}
.ln-step {
  position: relative;
  padding: 12px;
}
.ln-step > .pframe {
  color: var(--surface-2);
}
.ln-step-in {
  display: grid;
  gap: 16px;
  padding: 24px;
  background: var(--surface);
}
.ln-step-head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ln-step-head h2 {
  margin: 0;
}
.ln-step-n {
  color: var(--accent);
}
.ln-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
@media (min-width: 640px) {
  .ln-row { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}
.ln-field {
  display: grid;
  gap: 8px;
}
.ln-field > span:first-child {
  color: var(--text-3);
  text-transform: uppercase;
}
.ln-input {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 0;
  background: var(--page);
  color: #fff;
  font: inherit;
  clip-path: var(--px-notch);
  box-sizing: border-box;
}
.ln-input::placeholder {
  color: var(--stone-500);
}
.ln-input:focus {
  outline: 0;
  box-shadow: inset 0 0 0 2px var(--accent);
}
textarea.ln-input {
  min-height: 96px;
  resize: vertical;
}
.ln-hint {
  margin: 0;
  color: var(--text-3);
}
.ln-hint.is-err {
  color: var(--copper-400);
}
.ln-file {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ln-file-face {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  flex: none;
  overflow: hidden;
  background: var(--page);
  clip-path: var(--px-notch);
}
.ln-file-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ln-pick {
  position: relative;
  cursor: pointer;
}
.ln-pick-in {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.ln-pick:focus-within .pbtn-bracket {
  opacity: 1;
}
.ln-kinds {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}
@media (min-width: 720px) {
  .ln-kinds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.ln-kind {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 16px;
  background: var(--page);
  cursor: pointer;
  clip-path: var(--px-notch);
}
.ln-kind input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ln-kind b {
  font-weight: 400;
  color: #fff;
}
.ln-kind span {
  color: var(--text-2);
}
.ln-kind.is-on {
  box-shadow: inset 0 0 0 2px var(--accent);
}
.ln-kind:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.ln-ideas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ln-idea {
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  background: var(--surface-2);
  color: var(--text-2);
  font: inherit;
  text-align: left;
  cursor: pointer;
  clip-path: var(--px-notch);
}
.ln-idea:hover {
  color: #fff;
}
.ln-split {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* creator, fuel, vault */
  gap: 1px;
  background: var(--surface-2);
}
.ln-split div {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  background: var(--page);
}
.ln-split span {
  color: var(--text-3);
  text-transform: uppercase;
}
.ln-split b {
  font-weight: 400;
  color: #fff;
}
.ln-go {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}
.ln-go .pbtn[aria-disabled="true"] {
  cursor: not-allowed;
}
.ln-go p {
  margin: 0;
  color: var(--text-3);
}

/* Preview */
.ln-side {
  flex: 1 1 340px;
  max-width: 440px;
  display: grid;
  gap: 12px;
}
.ln-side-label {
  margin: 0;
  color: var(--text-3);
  text-transform: uppercase;
}
.ln-avatar {
  width: 28px;
  height: 28px;
  flex: none;
  object-fit: cover;
  clip-path: var(--px-notch);
}

/* What happens next */
.ln-next {
  padding-block: 32px 96px;
}
.ln-next h2 {
  margin: 0 0 24px;
}
.ln-steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 900px) {
  .ln-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.ln-steps li {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 18px;
  background: var(--surface);
  color: var(--text-2);
}
.ln-steps li b {
  font-weight: 400;
  color: #fff;
}
.ln-steps .ln-when {
  color: var(--accent);
  text-transform: uppercase;
}

/* odd ideas: the same chips, labelled */
.ln-ideas--odd {
  align-items: center;
}
.ln-ideas--odd > .t-cap-sm {
  color: var(--text-3);
  text-transform: uppercase;
}
/* how the planner reads the mission: a live preview card */
.ln-reader {
  display: grid;
  gap: 12px;
  padding: 16px;
  background: var(--page);
  clip-path: var(--px-notch);
}
.ln-reader-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 0;
  color: #fff;
  text-transform: uppercase;
}
.ln-reader-tag {
  margin-left: auto;
  padding: 1px 6px;
  background: var(--surface-2);
  color: var(--text-3);
}
.ln-reader-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px 20px;
  margin: 0;
}
@media (min-width: 720px) {
  .ln-reader-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ln-reader-wide { grid-column: 1 / -1; }
}
.ln-reader-grid dt {
  color: var(--text-3);
  text-transform: uppercase;
}
.ln-reader-grid dd {
  margin: 4px 0 0;
  color: #fff;
}
.ln-reader-steps,
.ln-reader-cut ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 18px;
  color: var(--text-2);
}
.ln-reader-cut dd {
  color: var(--copper-300);
}
.ln-reader-use {
  justify-self: start;
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  background: var(--accent);
  color: #fff;
  text-transform: uppercase;
  cursor: pointer;
  clip-path: var(--px-notch);
}
/* the look: colour swatches and world themes */
.ln-swatches,
.ln-themes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}
.ln-swatches legend,
.ln-themes legend {
  width: 100%;
  margin-bottom: 8px;
  color: var(--text-3);
  text-transform: uppercase;
}
.ln-swatch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 12px 0 8px;
  background: var(--page);
  color: var(--text-2);
  cursor: pointer;
  clip-path: var(--px-notch);
}
.ln-swatch i {
  width: 16px;
  height: 16px;
}
.ln-swatch input,
.ln-theme input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ln-swatch.is-on,
.ln-theme.is-on {
  box-shadow: inset 0 0 0 2px var(--accent);
  color: #fff;
}
.ln-swatch:focus-within,
.ln-theme:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.ln-themes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 560px) {
  .ln-themes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .ln-themes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.ln-theme {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  background: var(--page);
  cursor: pointer;
  clip-path: var(--px-notch);
}
.ln-theme b {
  font-weight: 400;
  color: #fff;
}
.ln-theme span {
  color: var(--text-2);
}
.ln-lm {
  display: grid;
  gap: 4px;
  margin: 12px 0 0;
  color: var(--text-2);
}
.ln-lm b {
  font-weight: 400;
  color: var(--copper-400);
  text-transform: uppercase;
}