/* register.html — layered on styles.css, reusing its tokens rather than
   redefining them, so the signup and the landing cannot drift apart. */

.is-hidden { display: none !important; }

.reg {
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 64px) 20px 96px;
}
.reg h1 {
  font-family: var(--font-display);
  font-size: clamp(34px, 5.4vw, 56px);
  line-height: 1.02;
  letter-spacing: -.03em;
  margin: 10px 0 0;
}
.reg-lede {
  color: var(--dim);
  font-size: 16.5px;
  line-height: 1.62;
  margin: 20px 0 0;
  max-width: 62ch;
}
.reg-lede em { color: var(--text); font-style: normal; }

.reg-status { min-height: 20px; margin: 22px 0 0; font-family: var(--font-mono); font-size: 13px; color: var(--dim); }
.reg-status.err  { color: #ff8a7a; }
.reg-status.warn { color: var(--human); }

/* ---------- steps ---------- */
.rstep {
  margin-top: 22px;
  padding: 24px 24px 26px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--line-2);
  border-radius: 14px;
  background: var(--surface);
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.rstep header { display: flex; align-items: center; gap: 12px; }
.rstep h2 { font-family: var(--font-display); font-size: 19px; font-weight: 550; letter-spacing: -.012em; margin: 0; }
.rstep > p { color: var(--dim); font-size: 14.5px; line-height: 1.6; margin: 12px 0 18px; max-width: 66ch; }

.rnum {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 12.5px; color: var(--faint);
  border: 1px solid var(--line-2);
}

/* State is carried on the step itself, so the whole card reflects progress —
   at a glance you can see which transaction you are actually in. */
.rstep[data-state="busy"]  { border-left-color: var(--human); }
.rstep[data-state="busy"] .rnum  { color: var(--human); border-color: var(--human); }
.rstep[data-state="done"]  { border-left-color: var(--signal); background: var(--surface-2); }
.rstep[data-state="done"] .rnum  { color: var(--signal); border-color: var(--signal); }
.rstep[data-state="error"] { border-left-color: #ff8a7a; }
.rstep[data-state="error"] .rnum { color: #ff8a7a; border-color: #ff8a7a; }

/* ---------- key/value readouts ---------- */
.kv { margin: 18px 0 0; display: grid; gap: 9px; }
.kv > div { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
.kv dt {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint); min-width: 92px;
}
.kv dd { margin: 0; font-size: 13.5px; color: var(--text); word-break: break-all; }
.kv dd.ok   { color: var(--signal); }
.kv dd.warn { color: var(--human); }

/* ---------- tiers ---------- */
.tier-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: 12px; }
.tier {
  display: flex; flex-direction: column; gap: 7px; text-align: left;
  padding: 16px 16px 15px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--bg-2); color: var(--text); cursor: pointer;
  font: inherit; transition: border-color .2s, background .2s, transform .2s var(--ease);
}
.tier:hover { border-color: var(--signal-lo); transform: translateY(-2px); }
.tier.is-sel { border-color: var(--signal); background: var(--surface-2); }
.tier-name { font-family: var(--font-display); font-size: 16px; font-weight: 550; }
.tier-fee { font-family: var(--font-display); font-size: 23px; letter-spacing: -.02em; }
.tier-fee em { font-style: normal; font-size: 12px; color: var(--faint); margin-left: 4px; }
.tier-caps { font-size: 11.5px; color: var(--dim); line-height: 1.5; }
.fee-note { font-size: 12.5px; color: var(--faint); margin: 14px 0 16px; min-height: 17px; }

/* ---------- the not-deployed notice ---------- */
.notice {
  margin-top: 18px; padding: 18px 20px;
  border: 1px solid rgba(255,179,71,.28); border-radius: 12px;
  background: rgba(255,179,71,.055);
}
.notice h3 { font-family: var(--font-display); font-size: 15.5px; margin: 0 0 8px; color: var(--human); }
.notice p { color: var(--dim); font-size: 14px; line-height: 1.6; margin: 0 0 8px; }
.notice p:last-child { margin-bottom: 0; }
.notice a { color: var(--signal); }

/* ---------- output ---------- */
.snippet-lede { color: var(--dim); font-size: 14px; margin: 20px 0 10px; }
.snippet-wrap { position: relative; }
.snippet-wrap pre {
  margin: 0; padding: 18px 20px; overflow-x: auto;
  border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2);
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.75; color: var(--text);
}
.next { margin-top: 26px; }
.next h3 { font-family: var(--font-display); font-size: 15px; margin: 0 0 10px; }
.next ul { margin: 0; padding-left: 18px; color: var(--dim); font-size: 14px; line-height: 1.75; }
.next strong { color: var(--text); font-weight: 600; }
.next a { color: var(--signal); }

.reg-foot {
  margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--line);
  color: var(--faint); font-size: 13px; line-height: 1.65;
}

@media (max-width: 560px) {
  .rstep { padding: 20px 18px 22px; }
  .kv dt { min-width: 0; }
}


/* ---------- manual (no-wallet) mode ---------- */
.manual { border-left-color: var(--line-2); }
.mf { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; }
.mf label {
  display: flex; flex-direction: column; gap: 6px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--faint);
}
.mf input, .mf select {
  font-family: var(--font-mono); font-size: 13px; color: var(--text);
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 9px;
  padding: 9px 11px; text-transform: none; letter-spacing: 0;
}
.mf input:focus, .mf select:focus { outline: none; border-color: var(--signal); }
.manual .snippet-wrap pre { max-height: 460px; overflow: auto; font-size: 12px; }