/* /app/start, /app/invite/<code>, /beta/<code> (start.html + start.js). Loaded after heads-dash.css (tokens) and welcome.css
   (the frame: top bar, rail, stage, footer, inputs, options, presets, mini board); app-light.css (body.light) for light mode.
   Only what the account flow adds; every class carries st-. */
.st .wl-stage { max-width: 760px; }
.st .wl-h { font-size: clamp(32px, 3.6vw, 48px); }
.st .wl-input + .wl-k { margin-top: 26px; }
.st .wl-rail button:disabled { cursor: default; } .st .wl-rail button:disabled b { color: var(--ink3); }
.st-err { margin: 18px 0 0; padding: 11px 14px; border-radius: 10px; border: 1px solid color-mix(in srgb, #ff4d5e 45%, transparent); background: color-mix(in srgb, #ff4d5e 8%, transparent); color: var(--ink); font-size: 14px; max-width: 62ch; }
.st-cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; }
.st-cta a { text-decoration: none; }
.st ~ .wl-foot #wl-next { margin-left: auto; }
.st-join + .st-opts { margin-top: 30px; } .st-opts.is-one { grid-template-columns: minmax(0, 1fr); max-width: 420px; }

/* server-rendered pages (beta, private beta, a link that ended): one column, no rail, no footer */
.st.is-note { grid-template-columns: minmax(0, 1fr); padding-top: clamp(40px, 12vh, 120px); }
.st.is-note .wl-rail { display: none; }
.st-note { max-width: 620px; }
.st-note .wl-btn { text-decoration: none; }
.st.is-note + .wl-foot, body:has(.is-note) { padding-bottom: 40px; }

/* start or join */
.st-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.st-opts .wl-opt { text-align: left; color: var(--ink); font: inherit; }
.st-join { margin-top: 8px; } .st-join[hidden] { display: none; }
.st-inv { list-style: none; margin: 0; padding: 0; }
.st-inv li { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--ln); }
.st-inv li > span { flex: 1; min-width: 0; display: grid; gap: 2px; }
.st-inv b { font-size: 17px; letter-spacing: -.02em; } .st-inv em { font-style: normal; font-family: var(--hud); font-size: 11px; letter-spacing: .04em; color: var(--ink3); }
.st-none { margin-top: 4px; }

/* template + preview */
.st-tpl { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 14px; }
.st-pv { min-height: 150px; }
.st-pv .wl-pc { flex-basis: 170px; max-height: 260px; }
.st-pv .wl-pct { cursor: default; } .st-pv .wl-pct:hover { color: inherit; } .st-pv .wl-pch { cursor: default; }
.st-pv .wl-pks { background: color-mix(in srgb, currentColor 12%, transparent); }

/* people: email + seat rows, contact rows */
.st-rows { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.st-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 32px; gap: 10px; align-items: center; }
.st-row .wl-input { width: 100%; padding: 11px 14px; font-size: 15px; }
.st-row .wl-input:disabled { opacity: .7; }
.st-row.is-contact { grid-template-columns: 74px minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, .8fr) 32px; }
.st-rk { font-family: var(--hud); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--cold); }
.st-row.is-bad .wl-input:not(:disabled) { border-color: color-mix(in srgb, #ff4d5e 70%, transparent); }
.st-x { width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; color: var(--ink3); font-size: 18px; line-height: 1; cursor: pointer; }
.st-x:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); }
.st-ok { font-style: normal; font-family: var(--hud); font-size: 10.5px; letter-spacing: .08em; color: var(--warm); }
.st-rerr { grid-column: 1 / -1; margin: -2px 0 0; font-size: 12.5px; color: #ff6b78; }
.light .st-rerr { color: #d42a40; }
.st-sent { grid-column: 1 / -1; }
.st-adds { display: flex; flex-wrap: wrap; gap: 8px; }
.st-adds .wl-btn { border-style: dashed; color: var(--ink2); }
.st-seats { margin-top: 22px; }

/* a link or code to copy */
.st-link { display: flex; align-items: center; gap: 8px; max-width: 620px; padding: 6px 6px 6px 14px; border-radius: 12px; border: 1px solid var(--ln2); background: color-mix(in srgb, var(--ink) 3%, transparent); }
.st-link code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 13px/1.4 var(--hud); color: var(--ink); }
.st-link .wl-btn { padding: 9px 13px; }

/* chat */
.st-how { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.st-how li { display: flex; align-items: baseline; gap: 12px; } .st-how p { margin: 0; font-size: 15.5px; }
.st-how span { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 500 11px/1 var(--hud); color: #0b0d07; background: var(--warm); }
.light .st-how span { background: var(--lime); }
.st-cta + .st-how { margin-top: 22px; }
.st-chatst + .wl-lead { margin-top: 16px; }   /* Add SiKick to Telegram, then the three steps */
.st-chatst { display: flex; align-items: center; gap: 10px; margin: 16px 0 0; font-family: var(--hud); font-size: 11.5px; letter-spacing: .04em; color: var(--ink3); }
.st-chatst::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ink3); animation: st-pulse 1.6s ease-in-out infinite; }
.st-chatst.is-on { color: var(--ink); } .st-chatst.is-on::before { background: var(--warm); box-shadow: 0 0 10px var(--warm); animation: none; }
@keyframes st-pulse { 50% { opacity: .3; } }
.st-soon { display: grid; gap: 4px; max-width: 560px; padding: 16px 18px; border-radius: 14px; border: 1px dashed var(--ln2); }
.st-soon b { font-size: 16px; font-weight: 500; } .st-soon span { font-size: 14px; color: var(--ink2); }

/* facts on the last step and the invite */
.st-facts li { grid-template-columns: 130px minmax(0, 1fr); }
.st-facts b { font-size: 15px; font-weight: 500; } .st-facts span { font-size: 12px; }

@media (prefers-reduced-motion: reduce) { .st-chatst::before { animation: none; } }
@media (max-width: 860px) {
  .st .wl-rail ol { grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); }
  .st-opts, .st-tpl { grid-template-columns: minmax(0, 1fr); }
  .st-tpl button { display: flex; align-items: baseline; gap: 10px; } .st-tpl em { display: inline !important; }
  .st-row { grid-template-columns: minmax(0, 1fr) 32px; } .st-row .wl-seg { grid-row: 2; grid-column: 1 / -1; }
  .st-row.is-contact { grid-template-columns: minmax(0, 1fr) 32px; } .st-row.is-contact .st-rk { grid-column: 1 / -1; } .st-row.is-contact .wl-input { grid-column: 1; }
  .st-row.is-contact .st-x, .st-row.is-contact .st-ok { grid-column: 2; grid-row: 2; }
  .st-facts li { grid-template-columns: minmax(0, 1fr); }
  .st-inv li { flex-wrap: wrap; }
  .st-cta .wl-btn.is-big { width: 100%; justify-content: center; }
}

/* /beta/<code>: text left, the two heads (hero3d.js in loop mode) right; heads on top on phones */
.st.is-note .wl-stage:has(.bt-wrap) { max-width: none; }
.st.is-note:has(.bt-wrap) { padding-top: clamp(24px, 6vh, 64px); }
.bt-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 64px); align-items: center; min-height: calc(100vh - 170px); }
.bt-wrap .st-note { max-width: 560px; }
.bt-art { position: relative; height: min(70vh, 640px); }
.bt-art .stage { position: absolute; inset: 0; --e: 0; }
.bt-art #stage-cv { display: block; }
.bt-art .fig { position: absolute; font-family: var(--hud, "Geist Mono", ui-monospace, monospace); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; pointer-events: none; white-space: nowrap; opacity: calc(1 - var(--e) * 1.6); }
.bt-art .fig small { display: block; opacity: .6; letter-spacing: .1em; margin-top: 2px; }
.bt-art .fig.you { left: 6%; top: 10%; color: var(--warm, #c6ff3d); }
.bt-art .fig.kick { right: 6%; top: 14%; color: var(--cold, #c9ccd3); }
@media (max-width: 900px) {
  .bt-wrap { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 8px; }
  .bt-art { order: -1; height: 40vh; } .bt-art .fig { display: none; }
}

/* how you organise work (groups): presets, the editor per group, the project sidebar as a live preview */
.st-gp { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 18px; }
.st-gw { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 18px; align-items: start; }
.st-gw.is-done { grid-template-columns: minmax(0, 240px); }
.st-gl { display: grid; gap: 10px; }
.st-g { padding: 10px 12px 12px; border-radius: 12px; border: 1px solid var(--ln2); background: color-mix(in srgb, var(--ink) 2%, transparent); }
.st-g header { display: flex; align-items: center; gap: 8px; }
.st-gn { flex: 1; min-width: 0; height: 34px; padding: 0 8px; margin-left: -8px; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--ink); font: 500 15.5px/1 var(--sans); letter-spacing: -.01em; outline: none; }
.st-gn:hover { border-color: var(--ln2); } .st-gn:focus { border-color: color-mix(in srgb, var(--warm) 60%, transparent); } .st-gn::placeholder { color: var(--ink3); font-weight: 400; }
.st-g.is-off { border-style: dashed; background: none; } .st-g.is-off .st-gn { color: var(--ink3); text-decoration: line-through; text-decoration-color: var(--ln2); }
.st-sw { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 4px 6px; border: 0; border-radius: 999px; background: none; color: var(--ink3); font: 500 10.5px/1 var(--hud); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.st-sw i { position: relative; width: 28px; height: 16px; border-radius: 999px; background: var(--ln2); transition: background .2s ease; }
.st-sw i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--ink2); transition: transform .2s ease, background .2s ease; }
.st-sw[aria-checked="true"] { color: var(--ink2); } .st-sw[aria-checked="true"] i { background: color-mix(in srgb, var(--warm) 35%, transparent); } .st-sw[aria-checked="true"] i::after { transform: translateX(12px); background: var(--warm); }
.light .st-sw[aria-checked="true"] i { background: color-mix(in srgb, var(--lime) 55%, transparent); } .light .st-sw[aria-checked="true"] i::after { background: #3d5a00; }
.st-gi { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.st-gi li { display: inline-flex; align-items: center; gap: 2px; padding: 0 2px 0 10px; height: 28px; border-radius: 999px; border: 1px solid var(--ln2); font-size: 13px; }
.st-gi li button { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink3); font-size: 14px; line-height: 1; cursor: pointer; }
.st-gi li button:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); }
.st-gi li.st-ga { padding: 0; border-style: dashed; }
.st-ga input { width: 112px; height: 26px; padding: 0 10px; border: 0; border-radius: 999px; background: none; color: var(--ink); font: 400 13px/1 var(--sans); outline: none; }
.st-ga input::placeholder { color: var(--ink3); } .st-ga:focus-within { border-color: color-mix(in srgb, var(--warm) 60%, transparent); }
.st-gadd { margin-top: 10px; padding: 9px 14px; border-style: dashed; color: var(--ink2); font-size: 13px; }
/* the sidebar preview: section heads, numbered items with a progress ring (like a project's Priorities) */
.st-sb { position: sticky; top: 16px; display: grid; gap: 2px; padding: 12px 10px 14px; border-radius: 12px; border: 1px solid var(--ln2); background: color-mix(in srgb, var(--ink) 3%, transparent); }
.st-sbh { margin: 10px 4px 4px; font-family: var(--hud); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-sbh:first-child { margin-top: 0; }
.st-sbl, .st-sbi { display: flex; align-items: center; gap: 8px; min-height: 26px; padding: 0 6px; border-radius: 7px; font-size: 13px; color: var(--ink2); }
.st-sbl { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.st-sbl i { width: 12px; height: 12px; border-radius: 3px; border: 1.5px solid currentColor; opacity: .7; }
.st-sbi em { flex: none; width: 14px; font-style: normal; font: 500 10.5px/1 var(--hud); color: var(--ink3); text-align: center; }
.st-sbi b { flex: 1; min-width: 0; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-sbi svg { flex: none; width: 14px; height: 14px; fill: none; stroke: var(--ln2); stroke-width: 2; }
.st-sbe { padding: 2px 6px 4px 28px; font-size: 12px; color: var(--ink3); }
@media (max-width: 860px) {
  .st-gp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-gp em { display: block !important; } .st-gw { grid-template-columns: minmax(0, 1fr); } .st-sb { position: static; }
}