/* sign-in · the mock-up's own <style> (platform/rethink/mockups/sign-in.html), copied unchanged
 * between the two marker lines and scoped to this page with :where(), which adds no specificity.
 * scripts/test-kit.mjs checks the copy against the mock-up. */
:where(.stage[data-page="sign-in"]){
/* ---- mock-up style begins ---- */
/* Sign-in: one calm column in the middle of the page. Signed out, so the top bar is the logo alone (as guest-join.html). */
.app.guest .ptabs,.app.guest .kav-wrap{display:none!important}
.app.guest #tb .brand{cursor:default}
.app.guest.phone .goldline{display:block}
.app.guest.phone #tb{display:flex;height:56px;padding:0 20px}
.app.guest.phone #tb .brand b{font-size:20px}

.app:not(.phone) .page{padding:56px 48px 64px}
.solo{width:100%;max-width:480px;margin:0 auto;display:flex;flex-direction:column;gap:24px}

/* greeting (as guest-join.html) */
.hello{display:flex;flex-direction:column;gap:10px}
.hello .t-display .gd{color:var(--gold)}
.hello .t-body{color:var(--body)}

/* fields inside the one section */
.form{padding:4px 24px 20px;display:flex;flex-direction:column;gap:18px}
.labrow{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:24px}
.labrow .btn-quiet{height:var(--button-height);margin:-10px -6px -10px 0;font-weight:400;font-size:14px}
.pwrow{display:flex;gap:8px}
.pwrow .btn{height:var(--button-height)}
.field .err{font-size:14px;color:var(--brick);display:flex;gap:6px;align-items:center}
.field .err .ico{width:16px;height:16px}
.input[aria-invalid="true"]{box-shadow:inset 0 0 0 1.5px var(--brick)}
.input[aria-invalid="true"]:focus{box-shadow:inset 0 0 0 1.5px var(--brick),0 0 0 4px rgba(154,59,46,.1)}
.input[readonly]{background:var(--band);box-shadow:inset 0 0 0 1px var(--control-line)}
/* the quiet second way sits on the floor's left edge, the navy button on its right */
.floor .btn-quiet{margin-left:-6px}

/* a sent link: what to do now */
.sent{padding:0 24px 20px;display:flex;flex-direction:column;gap:12px;max-width:52ch}
.sent p{font-size:15.5px;line-height:1.6;color:var(--body)}
.sent b{font-weight:500;color:var(--navy)}

/* the banner above the section: what just happened (gold) or what to do now (navy) */
.banner.navyw{background:var(--navy-wash)}
.banner.navyw .ico{color:var(--navy)}

/* help, privacy and terms: one quiet line under the section */
.foot{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:14px;color:var(--slate)}
.foot a{color:var(--slate);text-decoration:underline;text-decoration-color:rgba(10,34,68,.22);text-underline-offset:4px;min-height:44px;display:inline-flex;align-items:center}
@media (hover:hover) and (pointer:fine){.foot a:hover{color:var(--navy);text-decoration-color:var(--navy)}}

/* phone */
.app.phone .page{padding:28px 20px 32px}
.app.phone .hello .t-display{font-size:44px}
.app.phone .floor{flex-direction:column-reverse;align-items:stretch}
.app.phone .floor .end{margin-left:0;flex-direction:column}
.app.phone .floor .btn{width:100%}
.app.phone .floor .btn-quiet{margin-left:0}
@media (max-width:860px){.app:not(.phone) .page{padding:28px 16px 40px}.app:not(.phone) .hello .t-display{font-size:44px}}
/* ---- mock-up style ends ---- */
}