/* /launch/: a fair launch (pages/launch.jsx, components/launch/*; round 14).
 * The form in three numbered parts (Identity, Story, Launch) beside a live
 * preview of the token's card (spot.css .pep-tcard), which stays in view
 * while the form scrolls. The layout follows the room the page has (the
 * rail beside it takes 300 px or none), not the window's: two columns from
 * 760 px of page, one under it, where the preview folds above the button
 * instead. Once pressed, the steps the launch takes; once it landed, the
 * token and what to do with it. Then the rules in three points.
 *
 * Lime is the one press (the Launch button, Open its page) and the step
 * under way; a field's problem is amber words under it, never a box; a
 * finished step is a cream disc with its tick. Built from shell.css's tokens;
 * after spot.css, whose card it borrows, and before sendit.css. */

.pep-launch { display: grid; gap: 20px; min-width: 0; container: pep-launch / inline-size; }
.pep-launch-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.pep-launch-side { display: none; }

/* ------------------------------------------------------------- the form */

.pep-launch-form { display: grid; gap: 22px; min-width: 0; padding: 22px; }
.pep-launch-form .pep-notice { overflow-wrap: anywhere; }
/* The warning before starting over a launch that may still land, on its own line above its button. */
.pep-launch-warn { display: block; margin: 6px 0; }

.pep-lpart { display: grid; gap: 16px; min-width: 0; margin: 0; padding: 0; border: 0; }
.pep-lpart + .pep-lpart { padding-top: 22px; border-top: 1px solid var(--pep-line); }
/* Floated, the legend leaves the fieldset's border and is the grid's first row like any field. */
.pep-lpart-h {
  display: flex;
  float: left;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 0;
  color: var(--pep-text);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.pep-lpart-n {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--pep-brand-soft);
  color: var(--pep-brand);
  font-size: 12px;
  font-weight: 700;
}

.pep-lfield { display: grid; gap: 6px; min-width: 0; }
.pep-lfield-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pep-lfield-k { color: var(--pep-text); font-size: 14px; font-weight: 600; }
.pep-lfield-k .pep-faint { font-weight: 400; }
.pep-lfield-count { flex: none; color: var(--pep-text-3); font-size: 12px; }
.pep-lfield-count.pep-warn-text { color: var(--pep-warn); }
.pep-lfield-hint { color: var(--pep-text-3); font-size: 12px; line-height: 1.45; }
.pep-lfield-err { color: var(--pep-warn); font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }

.pep-launch-form .pep-launch-input {
  width: 100%;
  min-height: 46px;
  padding: 11px 14px;
  border: 1px solid transparent;
  border-radius: var(--pep-radius-sm);
  background: var(--pep-panel-2);
  color: var(--pep-text);
  font: inherit;
  font-size: 15px;
}
.pep-launch-form .pep-launch-input::placeholder { color: var(--pep-text-3); }
.pep-launch-form .pep-launch-input:focus { outline: none; border-color: var(--pep-line-strong); }
.pep-launch-form .pep-launch-input:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 1px; }
.pep-launch-form .pep-launch-input[aria-invalid="true"] { border-color: var(--pep-warn); }
.pep-launch-form .pep-launch-input:disabled { color: var(--pep-text-2); }
.pep-launch-form .pep-launch-desc { min-height: 96px; resize: vertical; line-height: 1.45; }

/* The ticker as it is shown everywhere: a $ before it, in capitals. */
.pep-launch-affix { position: relative; display: block; }
.pep-launch-affix-k {
  position: absolute;
  top: 50%;
  left: 14px;
  color: var(--pep-text-3);
  font-weight: 700;
  transform: translateY(-50%);
  pointer-events: none;
}
.pep-launch-form .pep-launch-affix .pep-launch-input { padding-left: 28px; font-weight: 700; letter-spacing: 0.03em; }

/* The picture: the token's face as it will be, and the button that picks it (the file input fills the button). */
.pep-launch-image { display: flex; align-items: center; gap: 14px; min-width: 0; }
.pep-launch-image > .pep-avatar,
.pep-launch-preview { width: 64px; height: 64px; font-size: 20px; }
.pep-launch-image-do { display: grid; gap: 6px; min-width: 0; }
.pep-launch-image-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.pep-launch-pick { position: relative; overflow: hidden; }
.pep-launch-pick:focus-within { outline: 2px solid var(--pep-brand); outline-offset: 2px; }
.pep-launch-file { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.pep-launch-buy { gap: 8px; }

/* The cost as a receipt that ends on its total: dollars first, the ETH beside them. */
.pep-launch-cost { display: grid; gap: 8px; margin: 0; padding: 14px 16px; border-radius: var(--pep-radius-sm); background: var(--pep-panel-2); }
.pep-launch-cost > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  color: var(--pep-text-2);
  font-size: 14px;
}
.pep-launch-cost dd { margin: 0; color: var(--pep-text); overflow-wrap: anywhere; text-align: right; }
.pep-launch-cost .pep-launch-total { padding-top: 10px; border-top: 1px solid var(--pep-line); color: var(--pep-text); font-weight: 700; }
.pep-launch-cost .pep-launch-total dd { font-size: 18px; }

/* The preview, folded above the button where there is no room beside the form. */
.pep-launch-peek { border-radius: var(--pep-radius-sm); background: var(--pep-panel-2); }
.pep-launch-peek > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 46px;
  padding: 0 16px;
  color: var(--pep-text);
  font-size: 14px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.pep-launch-peek > summary::-webkit-details-marker { display: none; }
.pep-launch-peek > summary::after { content: "+"; color: var(--pep-text-2); font-size: 20px; font-weight: 400; }
.pep-launch-peek[open] > summary::after { content: "\2212"; }
.pep-launch-peek > summary:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 2px; border-radius: var(--pep-radius-sm); }
.pep-launch-peek .pep-lprev { padding: 0 12px 12px; }
.pep-launch-peek .pep-lprev-card { background: var(--pep-panel); }

/* The press: what it launches and what it costs, and why it cannot yet. */
.pep-launch-send { display: grid; gap: 8px; }
.pep-launch-form .pep-launch-go { flex-wrap: wrap; gap: 0; min-height: 54px; padding: 8px 20px; font-size: 16px; font-weight: 700; line-height: 1.25; text-align: center; white-space: pre-wrap; }
.pep-launch-why { margin: 0; color: var(--pep-text-3); font-size: 13px; line-height: 1.45; text-align: center; }
.pep-launch-why-bad { color: var(--pep-text-2); }

/* -------------------------------------------------------------- the steps */

/* An empty live region takes no row of the form's grid. */
.pep-launch-live:empty { position: absolute; }
.pep-lsteps { display: grid; margin: 0; padding: 0; list-style: none; }
.pep-lstep { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 0 0 16px; }
.pep-lstep:last-child { padding-bottom: 0; }
/* The thread between two marks. */
.pep-lstep:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 32px;
  bottom: 4px;
  left: 13px;
  width: 2px;
  border-radius: 1px;
  background: var(--pep-line-strong);
}
.pep-lstep-done:not(:last-child)::after { background: var(--pep-text-3); }
.pep-lstep-mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--pep-panel-2);
  box-shadow: inset 0 0 0 1px var(--pep-line-strong);
  color: var(--pep-text-3);
  font-size: 13px;
  font-weight: 700;
}
.pep-lstep-done .pep-lstep-mark { background: var(--pep-text); box-shadow: none; color: var(--pep-brand-ink); }
.pep-lstep-now .pep-lstep-mark { background: var(--pep-brand); box-shadow: 0 0 0 4px var(--pep-brand-soft); color: var(--pep-brand-ink); }
.pep-lstep-late .pep-lstep-mark { background: var(--pep-warn); box-shadow: none; color: var(--pep-brand-ink); }
.pep-lstep-text { display: grid; gap: 2px; min-width: 0; padding-top: 4px; }
.pep-lstep-text b { color: var(--pep-text); font-size: 14px; }
.pep-lstep-todo .pep-lstep-text b { color: var(--pep-text-3); font-weight: 600; }
.pep-lstep-note { color: var(--pep-text-2); font-size: 13px; line-height: 1.45; }
@media (prefers-reduced-motion: no-preference) {
  .pep-lstep-now .pep-lstep-mark { animation: pep-lstep-beat 1.6s ease-in-out infinite; }
  @keyframes pep-lstep-beat { 50% { box-shadow: 0 0 0 7px var(--pep-brand-soft); } }
}

/* --------------------------------------------------------------- landed */

.pep-launch-done { display: grid; gap: 18px; min-width: 0; }
.pep-launch-done-head { display: flex; align-items: center; gap: 16px; min-width: 0; }
.pep-launch-done-head > .pep-avatar,
.pep-launch-done-pic { width: 72px; height: 72px; font-size: 22px; }
.pep-launch-done-words { display: grid; gap: 2px; min-width: 0; }
.pep-launch-done-words .pep-sub { margin: 0; overflow-wrap: anywhere; }
.pep-launch-done-h { margin: 0; font-size: clamp(24px, 3vw, 32px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; overflow-wrap: anywhere; }
.pep-launch-done-h:focus { outline: none; }
.pep-launch-done-note { margin: 0; color: var(--pep-text-2); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.pep-launch-done-do { display: grid; gap: 10px; }
.pep-launch-done-do .pep-btn-primary { min-height: 52px; font-size: 16px; }
.pep-launch-done-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pep-launch-done-said { min-height: 1em; color: var(--pep-text-2); font-size: 13px; overflow-wrap: anywhere; }

/* -------------------------------------------------------------- preview */

.pep-lprev { display: grid; min-width: 0; }
.pep-lprev-card { gap: 14px; padding: 18px; }
.pep-lprev-card:hover { background: var(--pep-panel); }
.pep-lprev-card .pep-tcard-name { gap: 2px; font-size: 14px; }
.pep-lprev-card .pep-tcard-name b { font-size: 16px; }
.pep-lprev-ticker { color: var(--pep-text-2); font-weight: 600; }
.pep-lprev-new {
  align-self: start;
  padding: 3px 9px;
  border-radius: var(--pep-radius-pill);
  background: var(--pep-brand-soft);
  color: var(--pep-brand);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pep-lprev-figs { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pep-lprev-fig { display: grid; gap: 2px; min-width: 0; font-size: 12px; }
.pep-lprev-fig b { color: var(--pep-text); font-size: 15px; }
.pep-lprev-fig .pep-tcard-cap { font-size: 26px; letter-spacing: -0.02em; }
.pep-lprev-fig-end { justify-items: end; text-align: right; }
.pep-lprev-desc {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--pep-text-2);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.pep-lprev-by { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 12px; border-top: 1px solid var(--pep-line); font-size: 13px; }
.pep-lprev-by .pep-trader { min-width: 0; }

.pep-launch-side-note { margin: 0; color: var(--pep-text-3); font-size: 12px; line-height: 1.45; }

/* ------------------------------------------------- how a fair launch works */

.pep-launch-how { padding: 8px 0 0; }
.pep-launch-how ol { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 14px 0 18px; padding: 0; list-style: none; counter-reset: pep-how; }
.pep-launch-how li {
  position: relative;
  padding: 16px 0 16px 48px;
  border-top: 1px solid var(--pep-line);
  color: var(--pep-text-2);
  font-size: 14px;
  line-height: 1.5;
  counter-increment: pep-how;
}
.pep-launch-how li::before {
  content: counter(pep-how, decimal-leading-zero);
  position: absolute;
  top: 14px;
  left: 0;
  color: var(--pep-sage);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.pep-launch-how li b { display: block; margin-bottom: 4px; color: var(--pep-text); font-size: 15px; }

/* ------------------------------------------------------ room for two columns */

@container pep-launch (min-width: 760px) {
  .pep-launch-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; }
  .pep-launch-side { position: sticky; top: calc(var(--pep-top-h) + 16px); display: grid; gap: 12px; min-width: 0; }
  .pep-launch-peek { display: none; }
  .pep-launch-form { padding: 26px; }
  .pep-launch-how ol { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; }
  .pep-launch-how li { padding: 52px 0 16px; }
}
/* A narrow page sets the button's cost on a line of its own, under what it launches. */
@container pep-launch (max-width: 520px) {
  .pep-launch-form .pep-launch-go { flex-direction: column; }
  .pep-launch-go-dot { display: none; }
  .pep-launch-go-cost { font-size: 14px; font-weight: 600; }
}
@container pep-launch (max-width: 420px) {
  .pep-launch-form { padding: 18px 16px; }
}