/* ============================================================
   THE "SHARE TO STORY" CARD (26 September 2026) — story.js builds it.
   The picture, small, beside the three steps the Link sticker takes, the
   short address that is already copied, and one button. It rises from the
   foot like the Support panel and is drawn from the same parts: the page's
   ground and ink, Outfit for words, Geist Mono for the address, the
   login page's fill. It sits over the Support panel too (the thank-you
   step shares from inside it).
   ============================================================ */
.st-wrap{position:fixed; inset:0; z-index:300}
.st-wrap[hidden]{display:none}
.st-scrim{position:absolute; inset:0; background:rgb(0 0 0 / .46); opacity:0; transition:opacity .3s var(--easing)}
.st-wrap.is-on .st-scrim{opacity:1}
/* scoped to its wrapper (27 September 2026): the Start a campaign page's
   own main is also .st, and this card now opens there too */
.st-wrap .st{
  --st-ground:var(--ground);
  position:absolute; left:50%; bottom:0;
  width:min(100%, 52rem); max-height:calc(100dvh - 7.6rem); overflow-y:auto; overscroll-behavior:contain;
  box-sizing:border-box;
  padding:clamp(2.2rem, 5vw, 3.2rem) clamp(2.2rem, 5vw, 3.2rem) calc(clamp(2.2rem, 5vw, 3.2rem) + env(safe-area-inset-bottom, 0px));
  display:grid; grid-template-columns:auto minmax(0, 1fr); column-gap:clamp(1.8rem, 4vw, 2.8rem); align-items:start;
  border-radius:2.8rem 2.8rem 0 0;
  background:var(--st-ground); color:var(--ink);
  transform:translate(-50%, 100%); transition:transform .5s var(--power3-out);
  -webkit-font-smoothing:antialiased;
}
.st-wrap.is-on .st{transform:translate(-50%, 0)}
:root[data-world="black"] .st-wrap .st{--st-ground:#151515}

.st_x{
  position:absolute; right:1.2rem; top:1.2rem; width:4.4rem; height:4.4rem; padding:0; border:0; border-radius:50%;
  background:transparent; color:var(--ink); cursor:pointer; display:grid; place-items:center;
  -webkit-tap-highlight-color:transparent; transition:background var(--speed) var(--easing);
}
.st_x svg{width:1.6rem; height:1.6rem; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; fill:none}
.st_x:hover{background:color-mix(in srgb, var(--ink) 7%, var(--st-ground))}
.st_x:focus-visible{outline:2px solid var(--ink); outline-offset:2px}

/* the picture as it will stand in the story: 9 by 16, the site's corners */
.st_pic{
  grid-row:1 / span 2; width:clamp(9.6rem, 26vw, 13.6rem); aspect-ratio:9 / 16;
  border-radius:1.4rem; overflow:hidden;
  background:color-mix(in srgb, var(--ink) 10%, var(--st-ground));
}
.st_pic img{display:block; width:100%; height:100%; object-fit:cover}

.st_txt{min-width:0; padding-right:3.6rem}
.st_h{
  margin:0; font-family:var(--face); font-weight:600;
  font-size:clamp(2rem, 4.6vw, 2.6rem); line-height:1.1; letter-spacing:-0.02em; text-wrap:balance;
}
.st_steps{
  margin:1.4rem 0 0; padding:0; list-style:none; counter-reset:st;
  font-family:var(--face-ui); font-size:1.5rem; line-height:1.4;
}
.st_steps li{position:relative; padding-left:2.6rem; margin:0 0 .8rem; counter-increment:st}
.st_steps li::before{
  content:counter(st); position:absolute; left:0; top:.05em;
  width:1.8rem; height:1.8rem; border-radius:50%;
  display:grid; place-items:center;
  background:var(--ink); color:var(--st-ground);
  font-family:var(--face-data); font-size:1.05rem; line-height:1;
}
.st_steps b{font-weight:600}
.st_link{
  margin:1rem 0 0; padding:1rem 1.4rem; border-radius:1.2rem;
  background:color-mix(in srgb, var(--ink) 7%, var(--st-ground));
  font-family:var(--face-data); font-size:1.3rem; letter-spacing:.02em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.st_go,.st_save{grid-column:1 / -1}
.st_go{
  display:flex; align-items:center; justify-content:center; text-align:center;
  height:5.6rem; margin:2.2rem 0 0; padding:0 2rem; border:0; border-radius:999px;
  background:var(--ink); color:var(--st-ground); cursor:pointer;
  font-family:var(--face-ui); font-size:1.7rem; font-weight:600;
  -webkit-tap-highlight-color:transparent;
  transition:background var(--speed) var(--easing), transform var(--micro);
}
.st_go:hover{background:var(--cp-accent, #5E6160); color:#fff}
.st_go:active{transform:scale(.98)}
.st_go:focus-visible{outline:2px solid var(--ink); outline-offset:3px}
.st_save{
  justify-self:center; margin:1.2rem 0 0; padding:.4rem .8rem; border:0; background:none; cursor:pointer;
  font-family:var(--face-ui); font-size:1.4rem; font-weight:500; color:var(--soft);
  text-decoration:underline; text-underline-offset:.28em;
  text-decoration-color:color-mix(in srgb, var(--soft) 50%, transparent);
}
.st_save[hidden]{display:none}
.st_save:hover,.st_save:focus-visible{color:var(--ink); outline:none}
.st_say{
  grid-column:1 / -1; min-height:1.9rem; margin:1rem 0 0; text-align:center;
  font-family:var(--face-ui); font-size:1.35rem; line-height:1.4; color:var(--soft);
}

html.st-open{overflow:hidden}
html.st-open .cp-dock,html.st-open .mnf-demo{opacity:0; pointer-events:none}

@media (prefers-reduced-motion:reduce){ .st-wrap .st,.st-scrim{transition:none} }

/* THE PREVIEW holds one of three: the picture, the video while it is being
   made (the recording's own canvas, drawn live), or the finished video */
.st_pic{position:relative}
.st_pic img,.st_rec,.st_vid{position:absolute; inset:0; width:100%; height:100%; display:none; object-fit:cover}
.st_pic.is-photo img,.st_pic.is-rec .st_rec,.st_pic.is-video .st_vid{display:block}

/* VIDEO · PHOTO — only on a campaign or profile that has a video */
.st_mode{display:inline-flex; gap:.4rem; margin:1.2rem 0 0; padding:.4rem; border-radius:999px;
  background:color-mix(in srgb, var(--ink) 7%, var(--st-ground))}
.st_mode[hidden]{display:none}
.st_mode button{
  height:3.4rem; padding:0 1.6rem; border:0; border-radius:999px; background:transparent; color:var(--ink);
  font-family:var(--face-ui); font-size:1.4rem; font-weight:600; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  -webkit-tap-highlight-color:transparent; transition:background var(--speed) var(--easing), color var(--speed) var(--easing);
}
.st_mode button[aria-pressed="true"]{background:var(--ink); color:var(--st-ground)}
.st_mode button:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.st_go:disabled{opacity:.55; cursor:progress; background:var(--ink); color:var(--st-ground); transform:none}
.st_go{font-variant-numeric:tabular-nums}