/* ── readability pass: chrome, responsive drawer, modal/text tuning ── */
.topbar { border-bottom: none; }
/* Every clamp() below in this file follows the same rule, fixed after
 * a real regression: floor = the OLD flat desktop px value (never
 * smaller than what it used to be at any normal/laptop/desktop width —
 * the first pass here used the old value as a vw-scaled midpoint
 * instead of a floor, so text rendered smaller than before through the
 * entire 1024-1440px range, not just larger on huge screens like
 * intended). Ceiling = old value * 1.25, reached by ~2560px. */
.ticker {
  position: sticky; top: 50px; z-index: 29;
  padding: 10px 36px 9px; gap: 40px; font-size: clamp(16px, 0.36vw + 10.9px, 20px);
  background: var(--chrome-bg);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.ticker-label { color: rgba(255,255,255,0.82); font-weight: 600; }
.ticker-val   { font-size: clamp(16px, 0.36vw + 10.9px, 20px); font-weight: 700; margin-left: 7px; }
.ticker-up, .ticker-dn { font-size: clamp(16px, 0.36vw + 10.9px, 20px); margin-left: 6px; }
.ticker-pill {
  font-size: clamp(14px, 0.31vw + 9.5px, 18px); padding: 3px 12px; margin-left: 9px;
  background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.42);
}

.nav {
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior: contain;
}
.nav::-webkit-scrollbar { width: 0; height: 0; display: none; }

.nav-item        { font-size: clamp(15px, 0.34vw + 10.2px, 19px); }
.topbar-link     { font-size: clamp(15px, 0.34vw + 10.2px, 19px); padding: 8px 17px; }
.btn-wallet      { font-size: clamp(15px, 0.34vw + 10.2px, 19px); }
.sidebar-footer  { font-size: clamp(14px, 0.31vw + 9.5px, 18px); }
.footer-txt      { font-size: clamp(14px, 0.31vw + 9.5px, 18px); }

.label       { font-size: clamp(15px, 0.34vw + 10.2px, 19px); }
.field-hint  { font-size: clamp(13px, 0.29vw + 8.8px, 16px); color: rgba(255,255,255,0.68); }
.char        { font-size: clamp(13px, 0.29vw + 8.8px, 16px); color: rgba(255,255,255,0.6); }
.img-box .t1 { font-size: clamp(15px, 0.34vw + 10.2px, 19px); }
.img-box .t2 { font-size: clamp(13px, 0.29vw + 8.8px, 16px); color: rgba(255,255,255,0.62); }
.inp         { font-size: clamp(15px, 0.34vw + 10.2px, 19px); }
.tags-input, .tag-inp { font-size: clamp(15px, 0.34vw + 10.2px, 19px); }
.tags-count  { font-size: clamp(14px, 0.31vw + 9.5px, 18px); color: rgba(255,255,255,0.62); }
.tag-chip    { font-size: clamp(14px, 0.31vw + 9.5px, 18px); }
.tag-suggest { font-size: clamp(13px, 0.29vw + 8.8px, 16px); color: rgba(255,255,255,0.85); }
.tags-hint   { font-size: clamp(13px, 0.29vw + 8.8px, 16px); color: rgba(255,255,255,0.62); }
.meta-title  { font-size: clamp(13px, 0.29vw + 8.8px, 16px); color: rgba(255,255,255,0.82); }
.create-btn-sub { font-size: clamp(14px, 0.31vw + 9.5px, 18px); }

/* step-t/.step-n keep the same floor=old-value rule as everything else
 * above — the "don't wrap step 6" constraint is handled by .how-card's
 * own 1180px stacking breakpoint (below), not by capping step-t's
 * floor, so it doesn't have to be the one exception to the pattern. */
.step-t    { font-size: clamp(15px, 0.34vw + 10.2px, 19px); color: rgba(255,255,255,0.92); }
.step-n    { font-size: clamp(13px, 0.29vw + 8.8px, 16px); }

.modal p           { font-size: clamp(15px, 0.34vw + 10.2px, 19px); color: rgba(255,255,255,0.78); }
.modal-cancel      { font-size: clamp(15px, 0.34vw + 10.2px, 19px); }
.success-pkg span  { font-size: clamp(13px, 0.29vw + 8.8px, 16px); color: rgba(255,255,255,0.72); }
.copy-btn          { font-size: clamp(13px, 0.29vw + 8.8px, 16px); }
.success-btn       { font-size: clamp(15px, 0.34vw + 10.2px, 19px); }

/* .step/.step-n/.step-t is shared by the "how to create" numbered guide
 * (index.html) and the deploying-progress checklist (deploying.html) —
 * same markup, same class names, but until now neither page ever
 * defined the actual circular-badge SHAPE for .step-n (only per-state
 * background/border/color in deploying.css) — every number rendered as
 * plain flat text with no badge at all, and the guide list in
 * particular read far denser/heavier than the reference design it's
 * meant to match. This is the missing base geometry both pages need. */
.step { display: flex; align-items: flex-start; gap: 14px; }
.step-n {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.4);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; color: #fff; margin-top: 1px;
}
.step-t { font-weight: 400; }

.balance-modal-icon {
  font-size: 30px; width: 52px; height: 52px; line-height: 52px; text-align: center;
  border-radius: 50%; background: rgba(255,193,7,0.12); margin-bottom: 14px;
}
.balance-rows { display: flex; flex-direction: column; gap: 8px; margin: 18px 0; }
.balance-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  background: rgba(255,255,255,0.06); border-radius: 10px; padding: 10px 14px;
}
.balance-row span   { font-size: 13px; color: rgba(255,255,255,0.65); }
.balance-row strong { font-size: 14px; color: #fff; font-weight: 700; }
.balance-addr-row {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.06); border-radius: 10px; padding: 10px 14px; margin-bottom: 6px;
}
.balance-addr-row span { font-size: 12px; color: rgba(255,255,255,0.72); font-family: monospace; }

/* ══════════════════════ RESPONSIVE ══════════════════════ */
html, body { overflow-x: clip; }
body.nav-open { overflow: hidden; }

.nav-toggle {
  display: none; width: 38px; height: 38px; flex-shrink: 0;
  background: none; border: 1px solid rgba(255,255,255,0.35);
  border-radius: 9px; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 0; margin-right: 4px;
}
.nav-toggle span {
  display: block; width: 17px; height: 2px; border-radius: 2px;
  background: #fff; transition: transform 0.2s, opacity 0.2s;
}
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.sidebar-backdrop {
  display: none; position: fixed; inset: 0; z-index: 39;
  background: rgba(0,0,0,0.55); opacity: 0; transition: opacity 0.25s;
}
.nav-only-mobile { display: none; }

/* .how-card's own breakpoint, separate from (and wider than) the other
 * two-column grids' 720px fold below: splitting video+steps 2-up keeps
 * squeezing the steps column narrower as the viewport shrinks, and by
 * ~1024px that column is too narrow for "Write a description — shown
 * in wallets and explorers" (step 6) and neighbors to fit one line —
 * confirmed by measurement, and confirmed the reference SuiTools site
 * has the exact same problem (worse, actually: 8 of 9 steps wrap there
 * at 1024px vs 3 here) with no better answer to copy. Stacking earlier
 * gives the steps list the full page width instead. */
@media (max-width: 1180px) {
  .how-card { grid-template-columns: 1fr; }
}

/* At this "narrow desktop" band (below where hero-title/hero-sub have
 * plenty of room, above the 720px tier that already drops the <br>)
 * the sidebar is still full-width but .page's available content width
 * is only ~700-770px — the hard-coded <br> forcing "sentence one /
 * sentence two" as exactly two lines pushes sentence two into a third
 * wrapped line at this width instead. Dropping the manual break here
 * too lets it reflow to whatever the text actually needs, same fix as
 * the 720px tier already does, just extended up to cover this band. */
@media (max-width: 1180px) {
  .hero-sub { font-size: 14px; }
  .hero-sub br { display: none; }
}

@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.26s ease;
    box-shadow: 0 0 40px rgba(0,0,0,0.5);
    z-index: 60;
  }
  body.nav-open .sidebar { transform: translateX(0); }
  body.nav-open .sidebar-backdrop { display: block; opacity: 1; }
  .main  { margin-left: 0; }
  .page  { padding: 26px 20px 70px; }
  .topbar, .ticker { padding-left: 20px; padding-right: 20px; }
}

@media (max-width: 720px) {
  /* every two-column grid actually folds to one column — previously
     only min-height was set here (a leftover from a rule that never
     got its grid-template-columns added), so at this width every one
     of these stayed a cramped, fixed two-column grid instead of
     stacking: form fields half-width and truncated, card grids
     overlapping. */
  .form-row, .sec-grid, .soc-grid, .comm-grid, .trust-grid, .how-card {
    grid-template-columns: 1fr;
  }
  .form-row[style*="align-items:stretch"] > .form-group > .img-box,
  .form-row textarea { min-height: 130px; }

  .topbar-center     { display: none; }
  .nav-only-mobile   { display: flex; }
  .topbar { padding-left: 14px; padding-right: 14px; gap: 8px; }
  .btn-wallet { font-size: 14px; padding: 7px 13px; }

  .ticker { flex-wrap: wrap; gap: 6px 20px; font-size: 14px; padding: 8px 14px 10px; }
  /* Left as plain inline text (not flex) so it wraps at word boundaries
     like normal text when space is tight — a flex layout here turns
     each span into one atomic, unbreakable unit, which overflows the
     viewport instead of wrapping on any page with less width to spare
     (e.g. the guide pages' .gbar-ticker, where the logo/wordmark also
     share the row). Only the pill stays a single unbreakable unit. */
  .ticker-pill { white-space: nowrap; display: inline-block; }
  .ticker-val, .ticker-up, .ticker-dn { font-size: 14px; }
  .ticker-pill { font-size: 12px; }

  /* the fluid clamp()s on these floor at the OLD DESKTOP size (see
   * home.css/global.css/footer.css) — that's deliberate for anything
   * above this breakpoint, but mobile needs its own explicitly smaller
   * sizes back, same values this had before going fluid. */
  .hero-title { font-size: 26px; }
  .hero-sub   { font-size: 14px; margin-bottom: 24px; }
  .hero-sub br { display: none; }
  .sec-h { font-size: 26px; }
  .community h2, #community-footer h2 { font-size: 26px; }
  .card { padding: 18px; border-radius: 13px; margin-bottom: 32px; }

  .create-btn { width: 100%; padding: 14px 20px; }
  .modal { padding: 22px; }
  .success-modal { padding: 24px 20px; }

  [id] { scroll-margin-top: 150px; }
}

@media (max-width: 420px) {
  .sidebar { width: 84vw; min-width: 0; }
  .page    { padding: 20px 14px 60px; }
  .card    { padding: 15px; }
  .wm-side { font-size: 24px; }
  .wm-logo-side { width: 36px; height: 36px; }
  .wm-sub  { font-size: 17px; }
  .ticker  { font-size: 13px; }
  .hero-title { font-size: 23px; }
  .sec-h { font-size: 23px; }
  .community h2, #community-footer h2 { font-size: 23px; }
}

@media (hover: none) {
  .create-btn:hover { transform: none; }
}

/* ── form validation: toast + inline error states ── */
#form-card .form-group,
#form-card .img-box { scroll-margin-top: 160px; }

.form-toast {
  position: fixed; top: 18px; left: 50%; transform: translateX(-50%) translateY(-14px);
  display: flex; align-items: center; gap: 9px;
  background: #fff; color: #7a1f1f;
  border: 1px solid rgba(255,128,128,0.5); border-left: 4px solid var(--danger);
  border-radius: 10px; padding: 13px 20px; font-size: 14px; font-weight: 600;
  box-shadow: 0 10px 30px rgba(0,0,0,0.28);
  z-index: 999; opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.form-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.form-toast .ft-icon { font-size: 16px; line-height: 1; }

#form-card .inp.field-error,
#form-card .tags-input.field-error {
  border-color: var(--danger) !important;
  background: rgba(255,77,77,0.06) !important;
}
#form-card .inp.field-error:focus {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 3px rgba(255,77,77,0.18);
}
#form-card .img-box.field-error {
  border-color: var(--danger) !important;
  background: rgba(255,77,77,0.06) !important;
}
#form-card .img-box:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

@media (max-width: 480px) {
  .form-toast { left: 12px; right: 12px; transform: translateY(-14px); width: auto; }
  .form-toast.show { transform: translateY(0); }
}