/* Sign-in screen (study started 12 October 2026). Loaded by the shop since 13 October 2026 (the picks are at the top of signin-studies.js).
   The designs are listed in signin-studies.js. Every rule starts from .si-page, the study's own page.
   The heading is the shop's own .page-heading and the fields and buttons its own .field and .button.
   Made at 390px wide, checked at 320; the laptop is not designed. */
html.si-on #main>:not(.si-page){display:none!important}

/* The page's own space above and below, named here because the shop's .wrap sets all four sides again on a small phone
   and took the space above the heading away at 320px. */
.si-page.page-shell{padding-top:32px;padding-bottom:56px;min-height:0}

/* One narrow column, left edge on the page's own edge. */
.si-page .si-col{max-width:420px}
.si-page .page-heading{margin-bottom:24px}
.si-page .page-heading p{margin-top:10px;font-size:17px;line-height:1.45}
.si-page .si-to{font-weight:600;color:var(--ink);overflow-wrap:anywhere}

.si-page .si-form{display:grid;gap:12px;margin:0}
.si-page .si-field{gap:7px;font-size:15px;font-weight:600;color:var(--ink)}
.si-page .si-field input{font:400 17px/1.3 var(--sans);color:#000}
.si-page .si-field input::placeholder{color:var(--quiet);opacity:1}
.si-page .si-field input[aria-invalid="true"]{border-color:var(--danger)}
.si-page .si-wrong{font:400 14px/1.4 var(--sans);color:var(--danger)}
.si-page .si-code{font:600 22px/1.2 var(--sans);letter-spacing:.18em;font-variant-numeric:tabular-nums}
.si-page .si-code::placeholder{font-weight:400}
.si-page .si-hint{margin:-2px 0 0;font:400 14px/1.4 var(--sans);color:var(--muted)}
.si-page .button{min-height:50px;font-size:17px}

/* ---- Email and password (round two): two tabs, a password field with Show, Forgot password? ---- */
.si-page .si-tabs{display:grid;grid-template-columns:1fr 1fr;margin:0 0 20px;border-bottom:1px solid var(--line)}
.si-page .si-tabs button{min-height:48px;margin-bottom:-1px;padding:0;border-bottom:2px solid transparent;background:none;font:600 17px/1.2 var(--sans);color:var(--muted)}
.si-page .si-tabs button[aria-selected="true"]{border-bottom-color:var(--green);color:#000}
.si-page .si-pwlabel{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:15px;color:var(--ink)}
.si-page .si-show{min-height:24px;padding:0 0 0 12px;background:none;font:600 15px/1.3 var(--sans);color:var(--green)}
.si-k-password .page-heading{margin-bottom:18px}
/* Round three: one row of the same height under the password in both tabs (Forgot password?, or the rule), so the
   button under it does not move when the tab changes. */
.si-page .si-under{display:flex;align-items:center;height:40px;margin:-6px 0 0}
.si-page .si-under .si-forgot{min-height:40px;font-size:15px}
.si-page .si-rule{font:400 14px/1.4 var(--sans);color:var(--muted)}
.si-page .si-rule.is-ok{color:var(--green)}
.si-page .si-rule.is-ok::before{content:'✓ ';font-weight:700}
.si-page .si-caps{font:600 14px/1.4 var(--sans);color:var(--ink)}
.si-page .si-suggest{font:400 14px/1.4 var(--sans);color:var(--ink)}
.si-page .si-suggest .si-link{min-height:0;font-size:14px}
.si-page .button[disabled]{opacity:.7;cursor:default}

/* Google's button: white, the shop's outline, Google's own mark. */
.si-page .si-google,.si-page .si-email{gap:12px;border-color:var(--line-strong);background:#fff;color:#000}
.si-page .si-g{flex:none;width:18px;height:18px}
.si-page .si-mail{flex:none}

/* "or", between the two ways */
.si-page .si-or{display:flex;align-items:center;gap:14px;margin:20px 0;font:400 15px/1 var(--sans);color:var(--muted)}
.si-page .si-or::before,.si-page .si-or::after{content:'';flex:1;height:1px;background:var(--line)}

/* Two buttons: the two ways, one under the other; the field opens in place of the second. */
.si-page .si-ways{display:grid;gap:12px}
.si-page .si-ways .si-form{margin-top:12px}

/* Under the ways: who needs no account, and what the email is kept for. */
.si-page .si-new{margin:28px 0 0;padding-top:20px;border-top:1px solid var(--line);font:400 16px/1.5 var(--sans);color:var(--ink)}
.si-page .si-new a{font-weight:600;color:var(--green);white-space:nowrap}
.si-page .si-legal{margin:12px 0 0;font:400 14px/1.45 var(--sans);color:var(--muted)}
.si-page .si-legal a{color:inherit}

/* The second step's two plain presses, and the line that says a new code went out. */
.si-page .si-spam{margin:20px 0 0;font:400 16px/1.45 var(--sans);color:var(--ink)}
.si-page .si-again{display:flex;flex-wrap:wrap;gap:4px 24px;margin:2px 0 0}
.si-page .si-link{min-height:44px;padding:0;background:none;font:600 16px/1.3 var(--sans);color:var(--green);text-decoration:underline;text-underline-offset:4px}
.si-page .si-sent{margin:4px 0 0;font:400 15px/1.4 var(--sans);color:var(--muted)}

/* ---- The laptop (wider than 600px), round one, 13 October 2026: Email and password, arranged two ways. Measured at
   1366 by 657: the laptop page rules ask for one scroll and the main things in view. ---- */
@media(min-width:601px){
 .si-page.page-shell{padding-top:36px;padding-bottom:56px}
 .si-page .page-heading{display:block}
 .si-page .page-heading h1{font-size:42px}
 .si-page .page-heading p{max-width:none}
 /* Centred: the phone's column in the middle of the page. */
 .si-k-pc-centre .si-col{max-width:420px;margin:0 auto}
 .si-k-pc-centre.page-shell{padding-top:28px}
 .si-k-pc-centre .page-heading{margin-bottom:14px}
 .si-k-pc-centre .si-tabs{margin-bottom:16px}
 .si-k-pc-centre .si-or{margin:16px 0}
 /* Two columns: words on the left, the fields on the right. */
 .si-k-pc-split .si-col{display:grid;grid-template-columns:minmax(0,1fr) 420px;grid-template-areas:"a b" "c b";grid-template-rows:auto 1fr;column-gap:96px;align-items:start;max-width:980px;margin:0 auto}
 .si-k-pc-split .si-a{grid-area:a}
 .si-k-pc-split .si-b{grid-area:b}
 .si-k-pc-split .si-c{grid-area:c}
 .si-k-pc-split.page-shell{padding-top:56px}
 .si-k-pc-split .page-heading{margin-bottom:0}
 .si-k-pc-split .page-heading h1{font-size:46px}
 .si-k-pc-split .page-heading p{margin-top:14px;font-size:19px}
 .si-k-pc-split .si-new{margin-top:32px;padding-top:24px;max-width:440px}
 .si-k-pc-split .si-legal{max-width:440px}
}