/* P.step shell (app/steps.js): one page per step, the bull step bar, one filled button, no page scroll on a typical phone.
   Linked after /helper/helper.css so these rules win. Tokens only (app.css), so dark mode keeps working.
   3.5.8, the design foundation (DESIGN.md "Spacing" and "The step page"; Chandon, Oct 16: "we have made it so scroll is not necessary, and
   have over reached in making the spacing so bad in trying to make it no scroll that now we are no scroll with space to use. i believe there
   i a compromise of no scroll and better space usage with consideration to what device is being used to show plona"):
   - the gaps are app.css's height-fluid tokens (--v-top, --v-title, --v-field, --v-group, --v-foot): bigger on a tall phone, never under
     their floors on a short one;
   - on phones the button sits at the bottom of the screen, the same spot on every step (the footer is in the flow with margin-top:auto,
     and sticky with the page background, so a step that runs long still shows it);
   - the old shrink-to-fit rules for short screens (gaps of 4px, 12px text, 44px boxes) are gone. A short phone (an iPhone SE with Safari's
     bars, 320 wide) may scroll a little; the button stays on screen. */

/* the page: no header row (the step bar is the header), no bottom bar, no mock panel; #top stays so the offline and sync banners still show */
body[data-screen=step]{padding-bottom:0;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
html.plh-has-bar body[data-screen=step]{padding-bottom:0!important}
/* a focused field is never hidden under the button (WCAG 2.4.11): the page keeps the footer's height clear when it scrolls a field into view
   (steps.js keeps --stp-foot-h, the footer's height) */
html:has(body[data-screen=step]){scroll-padding-bottom:calc(var(--stp-foot-h,120px) + var(--s3))}
body[data-screen=step] #top{position:static;border:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;flex:none}
body[data-screen=step] #top .sh-in{display:none}
body[data-screen=step] #bar,body[data-screen=step] #mockhost{display:none!important}
body[data-screen=step] #main{flex:1 0 auto;display:flex;flex-direction:column}
/* the offline and sync banners shrink to one line here. The longer sentence stays for screen readers. Other screens keep the full banner. */
body[data-screen=step] #banner .sbanner{padding:0 10px 0 14px;font-size:14px;flex-wrap:nowrap}
body[data-screen=step] #banner .sbanner .in{min-height:44px;padding:0;flex-wrap:nowrap;gap:8px;justify-content:space-between}
body[data-screen=step] #banner .sbanner span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body[data-screen=step] #banner .sbanner .btn{flex:none;min-height:44px;margin:0}
body[data-screen=step] .toast{bottom:calc(var(--stp-foot-h,96px) + var(--s3))}   /* the footer's height already holds the bottom inset */
/* Ask Plona opens from the step bar: the panel sits on the bottom edge (there is no bottom bar here) */
body[data-screen=step] .plh-panel:not(.plh-kb){bottom:0;max-height:calc(100dvh - 12px)}
@media (min-width:700px){body[data-screen=step] .plh-panel:not(.plh-kb){bottom:16px}}

/* the step column: it fills the screen's height, so the footer can sit at the bottom */
.stp{flex:1 0 auto;display:flex;flex-direction:column;width:100%;max-width:560px;margin:0 auto}

.stp-row{display:flex;align-items:center;gap:6px;min-height:44px}
.stp-ic{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;cursor:pointer;color:var(--ink);font:700 14px 'Instrument Sans',sans-serif;padding:0}
/* the step bar's Back looks like every page's Back (Turo style, part2.css .stp-row .stp-back). PT5: it is alone on the top row; there is no
   Ask circle on step pages any more (Ask Plona lives in More) */

/* the step itself: a title of at most 2 lines and one decision. Under the step bar --v-top, under the title --v-title; a lead line sits
   with its title (8px under it) and the step's own content starts a group under it */
.stp-body{flex:none;padding:var(--v-top) 16px 0}
.stp-body h1{font-size:var(--h-step);margin:0 0 var(--v-title)}
.stp-body h1:focus{outline:0}
.stp-sub{margin:calc(var(--s2) - var(--v-title)) 0 var(--v-group)}
.stp-lead{font-size:16px;margin:calc(var(--s2) - var(--v-title)) 0 var(--v-group);overflow-wrap:anywhere}
.stp-body .field:last-child{margin-bottom:0}
.stp-ferr:not(:empty){margin-top:var(--s3)}
.stp-agree{margin-top:var(--v-group)}
.stp-agree a{color:var(--ot);font-weight:600;display:inline-block;padding:14px 0;margin:-14px 0} /* a 44px tall tap area, same line height */
.stp-links{display:flex;flex-wrap:wrap;align-items:center;gap:0 18px;margin:var(--s1) 0 0 -6px}
.stp-links+.okline{margin:0 0 var(--s1)}
.stp-for{margin:calc(var(--s2) - var(--v-title)) 0 var(--v-field)}
/* answers already saved with the account (name, how you heard): shown, not editable */
.stp-ro{padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--r-md);background:var(--card)}
.stp-ro+.stp-lead{margin-top:var(--v-field)}
.stp-val{font-weight:700;font-size:18px;line-height:1.3;margin-bottom:4px;overflow-wrap:anywhere}
/* a new group inside a step (sign-up: the mobile number, then how you heard): more room above it than between two fields; .near sits
   with the box above it (sign-up: Legal's texts box is about the number above, so it is 8px under it) */
.stp-body .grp{margin-top:var(--v-group)}
.stp-body .near{margin-top:calc(var(--s2) - var(--v-field))}
/* the step's one elastic box (a note box, class stp-el): steps.js grows it into the height left over above the button on a taller phone */
.stp-body .stp-el{resize:none}

/* password with Show inside the box */
.stp-pw{position:relative}
.stp-pw input{padding-right:76px}
.stp-show{position:absolute;right:2px;top:50%;transform:translateY(-50%);min-height:44px;padding:0 12px}

/* one decision: big stacked choices (role) or a 2-column grid of short ones (how you heard). Boxed choices are 12px or more apart. */
.stp-pick{border:0;margin:0;padding:0;min-width:0;display:grid;gap:var(--v-field)}
.stp-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--v-field) var(--s2)}
.stp-opt{position:relative;display:block}
.stp-opt input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}
.stp-opt span{position:relative;display:flex;flex-direction:column;justify-content:center;gap:3px;min-height:72px;padding:12px 14px 12px 48px;border:1.5px solid var(--field);border-radius:var(--r-md);background:var(--card);font-weight:700;font-size:17px;line-height:1.3}
.stp-opt span:before{content:'';position:absolute;left:14px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;border:2px solid var(--field);background:var(--card);box-sizing:border-box}
.stp-opt small{font-weight:400;font-size:14px;line-height:1.35;color:var(--sub)}
.stp-opt input:checked+span{border-color:var(--ob);background:var(--tint);box-shadow:inset 0 0 0 1px var(--ob)}
.stp-opt input:checked+span:before{border:6px solid var(--ob);background:var(--card)}
.stp-opt input:checked+span small{color:var(--ink)}
.stp-opt input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px}
.stp-opt:hover span{border-color:var(--ink)}
.stp-pick.bad .stp-opt span{border-color:var(--bad)}
.stp-grid .stp-opt span{min-height:52px;padding:8px 8px 8px 38px;font-size:15px;font-weight:600}
.stp-grid .stp-opt span:before{left:10px;width:20px;height:20px;margin-top:-10px}
.stp-grid .stp-opt input:checked+span:before{border-width:5px}
.stp-where{margin-top:var(--v-group)}

/* the one filled button. On phones it sits at the bottom of the screen (margin-top:auto takes the height left over), the same spot on every
   step; sticky, with the page's own background, so a step that runs long (large text, zoom, an iPhone SE in Safari) still shows it. The
   fade over it (the page background) shows only while more of the step is below the screen (steps.js sets .stuck). */
.stp-foot{flex:none;padding:var(--v-foot) 16px calc(var(--s3) + env(safe-area-inset-bottom))}
.stp>.stp-foot{margin-top:auto;position:sticky;bottom:0;z-index:5;background:var(--bg)}
.stp>.stp-foot:before{content:'';position:absolute;left:0;right:0;top:calc(var(--s4) * -1);height:var(--s4);background:linear-gradient(to bottom,transparent,var(--bg));pointer-events:none;opacity:0;transition:opacity .15s ease-out}
.stp>.stp-foot.stuck:before{opacity:1}   /* steps.js: only while more of the step is below the screen (it never covers a page that fits) */
.stp-foot .btn{width:100%}
/* 3.4.3 (item 6a): a confirm box opened from the step's button (the payout box, Plona's password check) keeps its two buttons side by side
   at 390 px: the full-width rule above and payouts.css's 8px gap between stacked buttons stop at the box (part2.css .confirm>.row) */
.stp .stp-foot .confirm>.row>.btn{width:auto}
.stp .stp-foot .confirm>.row>.btn+.btn{margin-top:0}

/* phone keyboard open: the button follows the field instead of hiding behind the keyboard (the footer is not sticky while typing).
   3.5.8 review fix: only while a keyboard really covers the page (html.plh-kb-open, helper.js: the visual viewport shrank by more than
   120px while a field has the focus), not on every focus (body.typing), so a focus with no keyboard on the screen (a hardware keyboard, a
   narrow laptop window) never moves the button up and back. In the apps the keyboard shrinks the web view itself, so the sticky button
   already sits on the keyboard there. */
html.plh-kb-open body[data-screen=step] .stp{flex:none}
html.plh-kb-open body[data-screen=step] .stp>.stp-foot{position:static;margin-top:0}
html.plh-kb-open body[data-screen=step] .stp>.stp-foot:before{display:none}

/* laptops: a calm column, the button right under the question (still sticky, so a long step, or one with its errors showing, keeps it on
   screen) */
@media (min-width:700px) and (min-height:621px){
  .stp{flex:none;margin-top:4vh}
  .stp-body{padding-top:24px}
  .stp>.stp-foot{margin-top:0;padding-top:var(--s4)}
}

/* ===== round 3 (2026-10-09): the bull step bar and the one-page sign-up (r3prep/stepbar-signup BUILD-SPEC 3.2) =====
   The track, the dots, the bull and the label row are the TRIP BAR's own rules (.tb2-* in part2.css, K.tripBar in kit.js), which load
   before this file. These rules only space them for a page header and add the step motion. Do not copy any .tb2 rule here. */

/* ---------- 1. the bull step bar (page tops PT5, founder 2026-10-10: "takes up space and is more confusing then helpful") ----------
   Top to bottom: the round Back alone (.stp-row), the bar (.tb2.stb, the progressbar), its labels on their own row under it (.stb-lab: Start,
   "Step 3 of 8 · View all steps", the end word; outside the progressbar), then the step's h1. 3.5.8: the same sizes on every screen height
   (the bull's 21px over the track keeps its head under the Back circle at every size). */
.stp-top{flex:none;padding:2px 10px 0}
.stp-row{display:flex;align-items:center;gap:6px;min-height:44px}
/* trip bar spacing for a header: no "25%" labels under the dots, so the label row moves up; the bull's head may reach into the
   empty bottom of the Back row (its image is transparent there and it ignores taps) */
.tb2.stb{margin:0 6px}
.stb .tb2-in{padding-top:21px}
/* STEP BAR LOOK (founder 2026-10-10: "8 steps 9 dots, its not centered"): one dot per step (steps.js at(): the first dot at Start, the last
   at the finish, no end marks). The label row is a grid with two equal sides, so the middle line sits on the page's center whatever the
   side words are; it spans the bar (6px in), so "Start" sits under the first dot and the end word ends under the last. steps.js fitLab adds
   .nos when a side word would come within 8px of the middle line: both step aside together, nothing wraps. */
.stb-lab{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:0;margin:11px 6px 0;line-height:16px}
.stb-lab>span{white-space:nowrap}
.stb-lab .mid{overflow:hidden;text-overflow:ellipsis}
.stb-lab .stb-s{justify-self:start}
.stb-lab .stb-e{justify-self:end;text-align:right}
.stb-lab.nos .stb-s,.stb-lab.nos .stb-e{visibility:hidden}
@media (max-width:419px){.stb-lab .stb-s,.stb-lab .stb-e{font-size:12px}}
/* the bull stands on its dot (hooves on the ring). Step 1's dot is under the Back button's corner now, and standing on the dot keeps the
   bull's head below the Back circle at every size (21px over the track) */
.stb .tb2-bull{bottom:0}
/* the short Saved signal after an answer is saved (founder 2026-10-10: a short Saved, no "Don't worry" line): it swaps only "Step 3 of 8" */
.stb-lab .stb-n.saved{color:var(--good-d);font-weight:700}
/* "Step 5 of 7 · View all steps" on ONE line, centred between Start and the end word (founder 2026-10-10, later: "step 5 of 7 should be in
   line with each other ... view all steps"). It replaces the separate View all steps line (PT5). The link's tap area is 44px tall without
   taking that room (the clip is off so the whole area takes taps). */
.stb-lab.has-all .mid{overflow:visible}
/* 0217 polish (final gate: "the step label cut by 8 pixels"): View all steps' tap area (its padding, pulled back by a negative margin) reached
   8px past the end of the middle line, so the line measured 8px wider than its box although nothing was hidden. The line now owns those 8px
   (padding given back by a negative margin): the same place on screen at every size, and its box is as wide as what it shows. steps.js
   fitLab leaves the 8px out when it checks the side words. */
.stb-lab.has-all .mid{padding-right:8px;margin-right:-8px}
.stb-dot{color:var(--sub);font-weight:700;padding:0 2px}
.stb-all{display:inline-block;border:0;background:none;padding:14px 8px;margin:-14px -8px;font:600 13px/16px 'Instrument Sans',sans-serif;color:var(--ot);text-decoration:underline;text-underline-offset:2px;cursor:pointer;vertical-align:top}
.stb-all:focus-visible{outline:2px solid var(--ink);outline-offset:-10px;border-radius:6px}
/* the narrowest phones: the end words give their room to "Step 3 of 8"; with View all steps on the line, Start and the end word go before
   anything wraps (the dots and the bull still show both ends) */
@media (max-width:339px){.stb-lab>span:first-child,.stb-lab>span:last-child{font-size:12px}}
/* visibility, not display: the side words keep their grid room, so the middle line stays centered (fitLab does the same at any width) */
@media (max-width:359px){.stb-lab.has-all>span:first-child,.stb-lab.has-all>span:last-child{visibility:hidden}}

/* motion: Continue trots the bull forward, Back trots it back facing the way it goes (tb2go and tb2trot are part2.css keyframes;
   1.4s is the trip bar's own timing) */
.stb .tb2-bull.go img{animation:tb2trot .35s ease-in-out 4}
.stb .tb2-bull.go.rev img{animation:stbrev 1.4s ease-in-out both}
.stb .tb2-fill.go{animation:stbfill 1.4s cubic-bezier(.3,.7,.3,1) both}
@keyframes stbfill{from{width:var(--from)}to{width:var(--to)}}
@keyframes stbrev{0%{transform:scaleX(-1) translateY(0)}12%{transform:scaleX(-1) translateY(-3px)}25%{transform:scaleX(-1) translateY(0)}37%{transform:scaleX(-1) translateY(-3px)}50%{transform:scaleX(-1) translateY(0)}62%{transform:scaleX(-1) translateY(-3px)}75%,90%{transform:scaleX(-1) translateY(0)}100%{transform:scaleX(1) translateY(0)}}
/* part2.css already stops .tb2-bull.go; these stop the hop, the turn and the fill */
@media (prefers-reduced-motion:reduce){.stb .tb2-bull.go img,.stb .tb2-bull.go.rev img,.stb .tb2-fill.go{animation:none}}

/* ---------- 2. (3.5.8) the button's place: at the bottom of the screen on phones, right under the content on laptops (the .stp-foot rules
   above). Founder question 6 had put it right under the content on every screen; the research of Oct 16 and Chandon's "no scroll and better
   space usage" put it back in the thumb zone, the same spot on every step, with the leftover height in the fluid gaps. ---------- */

/* ---------- 3. fields with the label inside the box (sign-up page 1; any step page with 4 or more text fields) ---------- */
/* the boxes are --fi-h tall (48px on a short phone up to 56px on a tall one; 54px where svh is not known) and --v-field apart (12px or
   more). The label and the typed line move with the height: 23px and 7px down in a 54px box, 20px and 5px in a 48px one. */
.fi{position:relative;margin-bottom:var(--v-field)}
.fi>label{position:absolute;left:13px;right:12px;top:calc(var(--fi-h) / 3 - 11px);font-size:13px;line-height:16px;font-weight:600;color:var(--sub);pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:1}
.fi>label .opt{font-weight:400}
.fi>input,.fi>select{display:block;min-height:var(--fi-h);height:var(--fi-h);padding:calc(var(--fi-h) / 2 - 4px) 12px calc(var(--fi-h) / 2 - 23px);line-height:24px}
.fi>select{-webkit-appearance:none;appearance:none;padding-right:40px;cursor:pointer;background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23141414' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center/18px}
.fi>select:invalid{color:var(--sub)}
.fi>select option{color:var(--ink)}
.fi:focus-within>label{color:var(--ot)}
.fi:has(.bad)>label{color:var(--bad)}
/* an error line sits 4px under its box, then the next box comes --v-field later */
.fi+.err,.stp-names .err{margin:calc(var(--s1) - var(--v-field)) 0 var(--v-field)}
.fi ::placeholder{color:var(--field)} /* #767676: 4.5:1 on white */
.stp-names{display:grid;grid-template-columns:minmax(0,1fr);column-gap:var(--s3)}
@media (min-width:520px){.stp-names{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
/* password: Show sits inside the box, centred on it (the old .stp-pw rule) */
.fi.stp-pw>input{padding-right:76px}
.fi.stp-pw .stp-show{position:absolute;right:2px;top:calc((var(--fi-h) - 44px) / 2);transform:none;min-height:44px;padding:0 12px;z-index:2}
/* the one agree box */
.stp-ok{padding:6px 0;font-size:15px;line-height:21px;align-items:center}
.stp-ok input{margin-top:0}
.stp-ok a{color:var(--ot);font-weight:600;text-decoration:underline}
/* 3.5.8 review fix (the rule book's floors): a box with its words is one tap target of 44px or more (the label's area covers the 24px box and
   the gap beside it, so a tap anywhere on the row ticks it), and each link in those words gets a 44px tall tap area without moving the line
   (padding with a negative margin), on top of the label's area */
.stp .check{position:relative}
.stp .check>label::before{content:'';position:absolute;inset:0}
.stp .check>label a{position:relative;z-index:1;display:inline-block;padding:14px 0;margin:-14px 0}
.stp-ok input.bad{outline:2px solid var(--bad);outline-offset:2px}
.stp-ok+.err{margin:0 0 var(--s1) 36px}
/* "Have an account? Log in" under the button */
.stp-alt{text-align:center;font-size:15px;line-height:20px;color:var(--sub);margin:var(--s2) 0 0}
.stp-alt a{color:var(--ink);font-weight:700;text-decoration:underline;display:inline-block;padding:12px 6px;margin:-12px -6px}
/* summary rows for "You made your account" */
.stp-ro dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:15px}
.stp-ro dt{color:var(--sub)}
.stp-ro dd{font-weight:600;overflow-wrap:anywhere}

/* ---------- 4. the legal sheet (Terms of Use, Privacy Policy): the page's text is fetched and shown here, no iframe ---------- */
.lgl{position:fixed;left:0;right:0;bottom:0;top:auto;margin:0;width:100%;max-width:none;height:92vh;height:92dvh;max-height:none;border:0;padding:0;border-radius:16px 16px 0 0;background:var(--card);color:var(--ink);box-shadow:0 -10px 30px rgba(0,0,0,.18);overflow:hidden}
.lgl[open]{display:flex;flex-direction:column}
.lgl::backdrop{background:rgba(20,16,12,.45)}
.lgl-grab{flex:none;width:40px;height:4px;border-radius:2px;background:var(--line);margin:8px auto 0}
.lgl-head{flex:none;display:flex;align-items:center;gap:8px;padding:2px 12px 8px 16px;border-bottom:1px solid var(--line)}
.lgl-head h2{flex:1;font-size:20px;min-width:0}
.lgl-head h2:focus{outline:0}
.lgl-done{min-height:44px;padding:0 16px;font-size:16px}
.lgl-body{flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;background:var(--bg);padding:14px 16px calc(24px + env(safe-area-inset-bottom))}
.lgl-body:focus-visible{outline:2px solid var(--ink);outline-offset:-3px}
.lgl-wait{padding:48px 0;text-align:center;color:var(--sub);font-size:15px}
/* the imported text: the legal page's look (its inline styles are dropped on import) */
.lgl-doc{max-width:680px;margin:0 auto;font-size:15px;line-height:1.55;color:var(--sub)}
.lgl-upd{font-size:13px;line-height:18px;margin:0 0 12px}
.lgl-doc .warn{background:var(--tint);border:1px solid var(--tint-line);border-radius:12px;padding:12px 14px;margin:0 0 4px;color:var(--ink)}
.lgl-doc h3{font:600 18px/1.3 'Clash Grotesk','Instrument Sans',sans-serif;color:var(--ink);margin:20px 0 6px}
.lgl-doc p{margin:0 0 8px}
.lgl-doc b{color:var(--ink)}
.lgl-doc a{color:var(--ot);font-weight:600;text-decoration:underline}
/* shown only when the text did not load (offline, or a server error): the page itself, in a new tab */
.lgl-fail{padding:40px 8px;text-align:center;color:var(--sub);font-size:15px;line-height:1.5}
.lgl-fail a{display:inline-block;margin-top:8px;padding:10px 6px;color:var(--ink);font-weight:700;text-decoration:underline}
html:has(.lgl[open]){overflow:hidden}
@media (min-width:700px){.lgl{top:0;bottom:0;margin:auto;width:min(680px,92vw);height:min(82vh,760px);border-radius:16px}.lgl-grab{display:none}.lgl-head{padding-top:8px}.lgl-body{padding:18px 24px 28px}}
@media (prefers-reduced-motion:no-preference){.lgl[open]{animation:lglup .2s ease-out}}
@keyframes lglup{from{transform:translateY(28px);opacity:.5}to{transform:none;opacity:1}}

/* ---------- 5. (3.5.8) short screens: the old "same content, tighter" rules are gone. The one short-screen rule left only hides
   decoration: under 600px tall (a phone on its side, an iPhone SE with Safari's bars) the big check circle over a finale's title steps aside
   (route.css .ap-big). Nothing a person reads, taps or types gets smaller. ---------- */

/* ---------- 6. View all steps (steps.js P.act.stepall, flows with allSteps): the sheet is dialog.was (walk.css) with .ps-sh (part2.css).
   One row per step: a green check on done steps with their line and Change, "You are here", steps ahead in grey and not links. The sheet
   scrolls inside itself when the list is longer than the screen (walk.css). ---------- */
.ps-all{list-style:none;margin:2px 0 12px;padding:0}
.ps-all li{border-top:1px solid var(--line)}
.ps-all li:first-child{border-top:0}
.ps-all a,.ps-all .nolink{display:flex;align-items:center;gap:12px;min-height:50px;padding:5px 2px;color:var(--ink);text-decoration:none}
.ps-all .dot{flex:none;width:26px;height:26px;border-radius:50%;border:2px solid var(--field);display:flex;align-items:center;justify-content:center;background:var(--card)}
.ps-all .dot svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ps-all .done .dot{background:var(--gf);border-color:var(--gf)}
.ps-all .now .dot{border-color:var(--orange);box-shadow:inset 0 0 0 3px var(--card),inset 0 0 0 9px var(--orange)}
.ps-all .m{flex:1;min-width:0}
.ps-all b{display:block;font-size:16px;line-height:1.3}
.ps-all .s{display:block;font-size:14px;color:var(--sub);line-height:1.35;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ps-all .later b,.ps-all .later .s{color:var(--sub)}
.ps-all .go{flex:none;font-size:14.5px;font-weight:700;color:var(--ot);text-decoration:underline}
.ps-all .go.done-t{color:var(--good-d);text-decoration:none}
.ps-all .now .go{color:var(--ink);text-decoration:none;font-weight:600;font-size:13px;background:var(--tint);border-radius:99px;padding:3px 9px}
.ps-all a:hover b{text-decoration:underline}
.ps-all a:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:8px}
.ps-leave{font-size:14px;line-height:1.4;color:var(--sub);margin:0 0 10px}
.ps-allsh .was-ok{display:flex;width:100%}

/* ---------- 7. the texts box (steps.js P.texts.box; Legal Agent 2026-10-10, section 1): Legal's words in full, a size smaller (13px, the
   floor for helper and legal lines), right under the mobile number, its own unchecked box (sign-up, Account settings, More then Text
   messages) ---------- */
.stp-tx{gap:10px;align-items:flex-start;min-height:0;padding:2px 0 6px;font-size:13px;line-height:17px;color:var(--sub);cursor:default}
.stp-tx input{margin-top:0}
.stp-tx label{cursor:pointer}
.stp-tx b{color:var(--ink);font-weight:700}
.stp-tx a{color:var(--ot);font-weight:600;text-decoration:underline}
.stp-tx+.err:not(:empty){margin:0 0 6px 34px}
/* sign-up page 1: the texts box ends with its own words (the next group's room follows) */
#j-txw .stp-tx{padding-bottom:0}
/* sign-up page 1 with the mobile number and the texts box (3.4.1): the names share a row from 360px wide */
@media (min-width:360px){#stp[data-flow=join] .stp-names{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}