/* Etch a Verge Rune. The form is a series of irreversible decisions, so it is laid out as numbered
   steps rather than a dense panel: the numbers are real here, each one has to be settled before the
   next makes sense, and the permanent fields are marked in the form rather than in a dialog nobody
   reads. */

.et-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 22px 96px;
}

/* The form on the left, the consequence on the right, and the consequence STICKS. It used to sit
   above the fields, which meant that by the time somebody was typing the number that mattered the
   card telling them what that number does had scrolled off the top of the screen. */
.et-cols {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(330px, 400px);
  gap: 34px; align-items: start;
}
.et-cols .et-form { order: 1; }
.et-cols .et-card { order: 2; position: sticky; top: calc(var(--nav-h) + 18px); }

@media (max-width: 980px) {
  .et-cols { grid-template-columns: 1fr; gap: 26px; }
  /* Stacked, the card goes back on top: it is still the only reason anybody opened the page. */
  .et-cols .et-card { order: 0; position: static; }
  .et-cols .et-form { order: 1; }
}

/* --- header ------------------------------------------------------------------------------- */

.et-head { margin-bottom: 44px; }

.et-eyebrow {
  font-size: 11px;
  letter-spacing: .18em;
  font-weight: 700;
  color: var(--accent, #4fd1c5);
  margin: 0 0 10px;
}

.et-head h1 {
  font-size: clamp(30px, 5vw, 42px);
  line-height: 1.08;
  margin: 0 0 14px;
  text-wrap: balance;
}

.et-lede {
  font-size: 16px;
  line-height: 1.6;
  opacity: .82;
  max-width: 62ch;
  margin: 0 0 18px;
}

.et-status {
  display: inline-block;
  font-size: 12.5px;
  padding: 7px 12px;
  border-radius: 6px;
  border: 1px solid rgba(128, 128, 128, .3);
  opacity: .85;
}
.et-status.live { border-color: rgba(80, 200, 140, .5); }
.et-status.off  { border-color: rgba(220, 160, 60, .5); }

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

.et-form { display: flex; flex-direction: column; gap: 34px; }

.et-step {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 16px;
  align-items: start;
}

.et-num {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 700;
  margin: 4px 0 0;
  padding-top: 3px;
  opacity: .45;
  text-align: right;
}

.et-body { min-width: 0; }

.et-body h2 {
  font-size: 19px;
  margin: 0 0 8px;
  line-height: 1.25;
}

.et-say {
  font-size: 14.5px;
  line-height: 1.6;
  opacity: .78;
  margin: 0 0 16px;
  max-width: 60ch;
}

.et-note {
  font-size: 13px;
  line-height: 1.55;
  opacity: .65;
  margin: 10px 0 0;
  max-width: 58ch;
}

/* --- fields ------------------------------------------------------------------------------- */

.et-label {
  display: block;
  font-size: 12px;
  letter-spacing: .04em;
  font-weight: 600;
  margin: 14px 0 6px;
  opacity: .8;
}

.et-perm {
  font-size: 9.5px;
  letter-spacing: .1em;
  font-weight: 700;
  padding: 2px 5px;
  margin-left: 5px;
  border-radius: 3px;
  background: rgba(220, 120, 90, .16);
  color: #e0906f;
  vertical-align: 1px;
}

.et-opt {
  font-size: 10.5px;
  font-weight: 500;
  opacity: .55;
  margin-left: 5px;
  letter-spacing: 0;
}

.et-input {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 15px;
  padding: 10px 12px;
  border-radius: 7px;
  border: 1px solid rgba(128, 128, 128, .32);
  background: rgba(128, 128, 128, .07);
  color: inherit;
}
.et-input:focus {
  outline: 2px solid var(--accent, #4fd1c5);
  outline-offset: 1px;
  border-color: transparent;
}
.et-input.bad { border-color: rgba(220, 90, 90, .75); }

.et-ticker-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 21px;
  letter-spacing: .06em;
}

.et-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 520px) { .et-row { grid-template-columns: 1fr; } }

.et-check {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14.5px;
  cursor: pointer;
  user-select: none;
}
.et-check input { width: 16px; height: 16px; accent-color: var(--accent, #4fd1c5); }

.et-terms { margin-top: 16px; }

/* --- readouts ----------------------------------------------------------------------------- */

.et-readout {
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.7;
}
.et-readout:empty { display: none; }

.et-kv {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(128, 128, 128, .13);
}
.et-kv:last-child { border-bottom: 0; }
.et-kv span:first-child { opacity: .68; }
.et-kv span:last-child {
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-weight: 600;
}
.et-kv.lead span:last-child { font-size: 16px; }
.et-kv.warn span:last-child { color: #e0906f; }



.et-mini {
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 6px;
  border: 1px solid rgba(128, 128, 128, .4);
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.et-mini:hover { border-color: var(--accent, #4fd1c5); }



/* --- review and result -------------------------------------------------------------------- */

.et-review {
  border: 1px solid rgba(128, 128, 128, .25);
  border-radius: 9px;
  padding: 15px 17px;
  font-size: 13.5px;
  line-height: 1.6;
}

.et-btn {
  margin-top: 16px;
  font: inherit;
  font-size: 15px;
  font-weight: 650;
  padding: 12px 22px;
  border-radius: 8px;
  border: 0;
  cursor: pointer;
  background: var(--accent, #4fd1c5);
  color: #06201d;
}
.et-btn[disabled] { opacity: .4; cursor: not-allowed; }

.et-result {
  margin-top: 18px;
  border: 1px solid rgba(128, 128, 128, .25);
  border-radius: 9px;
  padding: 15px 17px;
  font-size: 13.5px;
}

.et-hex {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  line-height: 1.55;
  word-break: break-all;
  max-height: 130px;
  overflow-y: auto;
  padding: 9px 10px;
  margin-top: 9px;
  border-radius: 6px;
  background: rgba(128, 128, 128, .12);
}

.et-err {
  color: #e07070;
  font-size: 13.5px;
  margin-top: 10px;
}

.et-foot {
  margin-top: 60px;
  padding-top: 18px;
  border-top: 1px solid rgba(128, 128, 128, .18);
  font-size: 12.5px;
  opacity: .6;
  line-height: 1.6;
}

/* The share control. A slider and four presets writing one value, because the number this replaced
   could be typed larger than the supply, which produced a form that looked complete, took payment,
   and then got ignored by every indexer. */
.et-keep { display: flex; align-items: center; gap: 14px; }
.et-range { flex: 1; accent-color: var(--accent); height: 24px; }
.et-keep-out {
  font: 600 17px/1 ui-monospace, Menlo, monospace; color: var(--txt);
  min-width: 4.5ch; text-align: right; font-variant-numeric: tabular-nums;
}
.et-presets { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.et-symbol-input { width: 5ch; text-align: center; font-size: 22px; }
.et-note { margin: 8px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--muted); max-width: 56ch; }

/* The link out to the protocol page. It was inheriting a dim colour and reading as disabled text on
   this ground, which is the wrong signal for the one link that answers every question this page
   deliberately does not. */
.et-lede a, .et-foot a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.et-lede a:hover, .et-foot a:hover { color: var(--txt); }

/* ------------------------------------------------------------------------------------------------
   The coin card.

   This page was a form, and a form asks questions. The card answers one instead: here is the thing
   you are making. It sits above every field because it is the only reason anybody opened the page,
   and it updates on every keystroke so the name someone is typing is a coin they can already see.
   ------------------------------------------------------------------------------------------------ */

.et-card {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    radial-gradient(120% 140% at 12% 0%, #1b3a52 0%, transparent 62%),
    linear-gradient(180deg, #16202c, #121a24);
  padding: 30px 28px 24px;
  box-shadow: 0 18px 44px -28px #000;
}
.et-card-face {
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  padding-bottom: 22px; border-bottom: 1px solid var(--line);
}
.et-card-sym {
  font-size: 40px; line-height: 1; min-width: 0;
  filter: drop-shadow(0 2px 10px #4cc2f155);
}
.et-card-name {
  font: 700 clamp(30px, 7vw, 50px)/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: -1.5px; color: var(--txt);
  word-break: break-all;
}
.et-card-name.et-card-empty { color: #3d4a58; }

.et-card-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 20px 26px; margin: 22px 0 0;
}
.et-card-facts div { min-width: 0; }
.et-card-facts dt {
  font: 600 10px/1 ui-monospace, Menlo, monospace; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--muted);
}
.et-card-facts dd {
  margin: 8px 0 0; font: 600 17px/1.25 ui-monospace, Menlo, monospace;
  font-variant-numeric: tabular-nums; color: var(--txt); word-break: break-word;
}

/* --- step four, once a wallet is connected --------------------------------------------------- */

.et-addr {
  font: 13px/1.5 ui-monospace, Menlo, monospace; color: var(--accent);
  word-break: break-all;
}
.et-connect {
  margin: 4px 0 0; padding: 13px 24px; border-radius: 11px; border: 0; cursor: pointer;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #052436; font: 600 14.5px/1 inherit;
  transition: transform .12s cubic-bezier(.2,.8,.3,1), opacity .2s;
}
.et-connect:active { transform: scale(.97); }
.et-connect:disabled { opacity: .5; cursor: default; }

/* Links inside the small print. They were inheriting the muted colour and reading as dead text,
   which is wrong for the one link somebody without the wallet actually needs. */
.et-note a, .et-say a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.et-note a:hover, .et-say a:hover { color: var(--txt); }

/* The default currency sign is dimmed: it is a placeholder standing in for a choice nobody made,
   and showing it at full strength would read as a symbol that was picked. */
.et-card-sym-default { opacity: .38; }

/* A cap is the one field on this page that can quietly destroy a coin: it counts claims for the
   whole supply, and read as a per-person limit it caps the coin itself. One etcher set 5, which
   closed a 21,000 supply after 25 coins existed, permanently. So the consequence is spelled out in
   coins rather than left as arithmetic, and it takes a deliberate tick to go through with it. */
.et-hint { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
.et-alarm {
  margin: 12px 0 0; padding: 12px 14px; border-radius: 10px;
  border: 1px solid #7a3a2a; background: rgba(140, 60, 40, 0.14);
}
.et-alarm-head { margin: 0; font-size: 13px; font-weight: 600; color: #e0906f; }
.et-alarm-say { margin: 6px 0 10px; font-size: 12.5px; line-height: 1.55; color: var(--txt); }
.et-alarm .et-check { color: var(--txt); }


/* ============================================================================================
   The design-system pass. Layout and the pieces the system does not own; every colour, face and
   control comes from vg.css.
   ============================================================================================ */

.et-head {
  display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; justify-content: space-between;
  padding: 40px 0 20px;
}
.et-head-say { display: flex; flex-direction: column; gap: 12px; max-width: 62ch; }
.et-head-line { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* --- the card ---------------------------------------------------------------------------------- */

.et-card { display: flex; flex-direction: column; gap: 16px; }
.et-card-say { display: flex; flex-direction: column; gap: 6px; }
.et-say-line {
  margin: 0; font: 700 20px/1.3 var(--display); letter-spacing: -.02em; color: var(--txt);
}
.et-say-line b { font-weight: 700; }
.et-say-line b.hot { color: var(--accent); font-family: var(--mono); font-size: .92em; letter-spacing: -.03em; }
.et-say-line b.quiet { font: 400 14px/1.6 var(--sans); color: var(--muted); letter-spacing: 0; }

.et-card-verdicts { display: flex; flex-direction: column; gap: 9px; }
.et-verdict {
  margin: 0; display: flex; gap: 9px; align-items: flex-start;
  font-size: 12.5px; line-height: 1.55;
}
.et-verdict .mark { font: 700 11px/1.5 var(--mono); flex: none; }
.et-verdict.ok { color: var(--ok); }
.et-verdict.warn { color: var(--warn); }
.et-verdict.bad { color: var(--danger); }

.et-card-pay { display: flex; flex-direction: column; gap: 10px; padding-top: 15px; border-top: 1px solid var(--hair); }
.et-card-back { margin: 0; font-size: 11.5px; line-height: 1.55; color: var(--dim); }
.et-card-back b { color: var(--muted); font-weight: 500; }
.et-card-final {
  margin: 0; padding-top: 14px; border-top: 1px solid var(--hair);
  font: 700 11px/1.5 var(--mono); letter-spacing: .04em; color: var(--danger);
}

/* --- the guard ---------------------------------------------------------------------------------- */

.vg-label.bad-label { color: var(--danger); }

/* The multiplication, shown rather than described. The mistake IS the multiplication, so seeing
   5 x 5 = 25 beside a supply of 21,000 needs no sentence. */
.et-guard-sum { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; }
.et-guard-cell { display: flex; flex-direction: column; gap: 6px; }
.et-guard-cell.right { margin-left: auto; text-align: right; }
.et-guard-op { font: 700 15px/2.2 var(--mono); color: var(--dim); }
.et-guard-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.et-guard-acts .vg-small { margin: 0; }

@media (max-width: 640px) {
  .et-guard-cell.right { margin-left: 0; text-align: left; }
  .et-guard-acts .vg-btn { width: 100%; }
}

/* The name is stepped down by length rather than wrapped: a ticker broken mid-word reads as a
   different ticker, which is the one thing this card must never do. */
.et-card-name.is-long { font-size: 27px; }
.et-card-name.is-longer { font-size: 21px; letter-spacing: -.01em; }
.et-card-name { overflow-wrap: anywhere; }

/* --- the confirm step ---------------------------------------------------------------------------
   The decisive action used to sit at the bottom of the preview, under a summary, a hex dump and
   three paragraphs. Somebody pressing "Compose" watched their wallet derive a lock key, saw a wall
   of text, and reasonably concluded they had etched. They had not. So the decision is now the first
   thing in the preview and it says, in the largest type on the panel, that nothing has happened. */

.et-confirm {
  margin: 0 0 26px;
  border: 1px solid var(--accent);
  border-radius: var(--r-card, 12px);
  background: linear-gradient(180deg, rgba(76, 194, 241, .07), transparent 60%), var(--card);
}
.et-confirm-head { padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.et-confirm-say {
  margin: 0; font: 700 19px/1.2 var(--display); letter-spacing: -.02em; color: var(--txt);
}
.et-confirm-why { margin: 0; font-size: 13px; line-height: 1.6; color: var(--muted); max-width: 62ch; }
.et-confirm-price { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.et-confirm-price b {
  font: 700 24px/1 var(--mono); letter-spacing: -.02em; color: var(--txt);
  font-variant-numeric: tabular-nums; margin-right: 8px;
}
/* Full width, because this is the only thing on the panel anybody needs to press. */
.et-go { width: 100%; margin-top: 6px; padding: 14px 20px; font-size: 15px; }
.et-confirm .et-result { padding: 0 24px 22px; }
.et-confirm .et-result:empty { display: none; }

@media (max-width: 620px) {
  .et-confirm-head { padding: 18px 16px; }
  .et-confirm .et-result { padding: 0 16px 18px; }
}

/* --- the optional picture -----------------------------------------------------------------------
 *
 * Asked for here rather than only on the coin's own page, because almost nobody goes back. A coin
 * with a picture reads as a coin somebody meant, and the moment the person cares most about how
 * theirs looks is the moment they are naming it.
 *
 * It stays OPTIONAL in the strongest sense: nothing about the etching waits on it, nothing fails
 * without it, and the picture is uploaded after the coin exists rather than being part of it.
 */
.et-pic { display: flex; align-items: flex-start; gap: 14px; margin-top: 6px; }
.et-pic-slot {
  flex: none; width: 64px; height: 64px; border-radius: 14px; overflow: hidden;
  background: var(--bg2); border: 1px dashed var(--line2);
  display: grid; place-items: center; color: var(--dim); font-size: 20px;
}
.et-pic-slot.has-img { border-style: solid; border-color: var(--line); }
.et-pic-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.et-pic-say { flex: 1; min-width: 0; }
.et-pick {
  display: inline-block; cursor: pointer;
  background: var(--bg2); color: var(--txt); border: 1px solid var(--line2);
  border-radius: var(--r-ctl, 8px); padding: 8px 14px; font: 500 13px/1.2 var(--sans);
}
.et-pick:hover { border-color: var(--accent); color: var(--accent); }
.et-pic-drop {
  margin-left: 8px; background: none; border: 0; cursor: pointer; padding: 8px 4px;
  font: 400 12.5px/1.2 var(--sans); color: var(--muted); text-decoration: underline;
}
.et-pic-drop:hover { color: var(--danger); }
.et-pic-bad { color: var(--danger); }
.et-pic-ok { color: var(--ok); }