/* Account confirmation. Loaded by the shop since 13 October 2026: see account-designs.js for the designs and the picks.
   Every rule starts from .si-page.ac-page, the page the preview draws; naming .si-page too keeps the Sign-in screen's
   own rules for the heading and the page's padding from overruling these.
   The measures are the shop's own: the empty-screen box (empty-studies.css) and the Sign-in screen's heading.
   Made at 390px wide, checked at 320; the laptop from 901px, measured at 1366 by 657. Only the shop's greens, black and white. */
.si-page.ac-page.page-shell{padding-top:32px;padding-bottom:56px;min-height:0}
.si-page.ac-page .ac-email{font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.si-page.ac-page .button{min-height:52px;width:100%;margin:0;font-size:17px}
.si-page.ac-page .ac-pic svg{display:block;width:100%;height:auto}
/* What the last press came to, when there is something to say. */
.si-page.ac-page .ac-note{margin:14px 0 0;font:400 15px/1.45 var(--sans);color:var(--ink)}
.si-page.ac-page .ac-note.ac-wrong{color:var(--danger)}
.si-page.ac-page .ac-note+.ac-quiet{margin-top:6px}
.si-page.ac-row .ac-note{text-align:center}
.si-page.ac-page .button[disabled]{opacity:.7;cursor:default}
/* The one quiet line. Its two presses are words in the sentence, underlined, in the sentence's own grey. */
.si-page.ac-page .ac-quiet{margin:16px 0 0;font:400 15px/1.5 var(--sans);color:var(--muted)}
/* 12px of padding above and below, taken back by the margin: a taller place to press, the line unmoved. */
.si-page.ac-page .ac-quiet button{padding:12px 0;margin:-12px 0;background:none;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:3px}
.si-page.ac-page .ac-quiet button:hover{color:var(--ink)}

/* ---- Dashed box: the shop's empty-screen box. On a phone the drawing, the words and the button, centred. ---- */
.si-page.ac-row .ac-box{padding:36px 19px 30px;border:1px dashed var(--line-strong);border-radius:16px;text-align:center}
.si-page.ac-row .ac-pic{width:118px;margin:0 auto 21px}
.si-page.ac-row h1{margin:0;font:600 26px/1.2 var(--serif);letter-spacing:0;color:var(--ink)}
.si-page.ac-row .ac-words p{margin:8px 0 0;font:400 16px/1.5 var(--sans);color:var(--muted)}
.si-page.ac-row .ac-do{margin-top:22px}
.si-page.ac-row .ac-quiet{text-align:center}

/* ---- Just the words: heading, sentence, button, quiet line, on the page's left edge. ---- */
.si-page.ac-plain .ac-col{max-width:420px}
.si-page.ac-plain .page-heading{display:block;margin-bottom:24px}
.si-page.ac-plain .page-heading p{max-width:none;margin-top:10px;font-size:17px;line-height:1.45}

/* ---- Drawing, no box: the same parts in the middle of the page with nothing round them. ---- */
.si-page.ac-centre .ac-col{max-width:420px;margin:0 auto;padding-top:12px;text-align:center}
.si-page.ac-centre .ac-pic{width:104px;margin:0 auto 20px}
.si-page.ac-centre h1{margin:0;font-size:32px;line-height:1.15}
.si-page.ac-centre .ac-line{margin:10px 0 0;font:400 17px/1.45 var(--sans);color:var(--muted)}
.si-page.ac-centre .ac-do{margin-top:24px}

/* ---- The page the emailed link opens (auth/action.html): its new-password form inside the same two designs. ---- */
.si-page.ac-link .av-form{margin:0;text-align:left}
.si-page.ac-link .av-pwrow{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.si-page.ac-link .av-form label{font:600 15px/1.4 var(--sans);color:var(--ink)}
.si-page.ac-link .av-link{min-height:24px;padding:0 0 0 12px;background:none;border:0;font:600 15px/1.3 var(--sans);color:var(--green);cursor:pointer}
.si-page.ac-link .av-form input{display:block;width:100%;min-height:50px;margin-top:7px;padding:10px 14px;border:1px solid var(--line-strong);border-radius:10px;background:#fff;font:400 17px/1.3 var(--sans);color:#000}
.si-page.ac-link .av-hint{margin:8px 0 16px;font:400 14px/1.4 var(--sans);color:var(--muted)}
.si-page.ac-link a.button{text-decoration:none}

/* ---- 601 to 900px: the phone's arrangement in a 460px column. Not arranged further. ---- */
@media(min-width:601px){
 .si-page.ac-page .ac-col{max-width:460px;margin:0 auto}
 .si-page.ac-plain .page-heading h1{font-size:42px}
}

/* ---- The laptop, from 901px. Measured at 1366 by 657: everything in view, one scroll. ---- */
@media(min-width:901px){
 /* The Sign-in screen's own page height, so the bar under the page does not jump when Create account leads here. */
 .si-page.ac-page.page-shell{padding-top:56px;min-height:562px}

 /* Dashed box: the empty screen's one row, drawing, words, button. */
 .si-page.ac-row .ac-col{max-width:1076px}
 .si-page.ac-row .ac-box{display:grid;grid-template-columns:88px minmax(0,1fr) 300px;align-items:center;gap:30px;padding:26px 34px;text-align:left}
 .si-page.ac-row .ac-pic{width:88px;margin:0}
 .si-page.ac-row .ac-words p{margin-top:5px;font-size:17px}
 .si-page.ac-row .ac-do{margin:0}
 .si-page.ac-row .ac-quiet,.si-page.ac-row .ac-note{padding-left:35px;text-align:left}
 .si-page.ac-row .ac-quiet{margin-top:14px}

 /* Just the words: the heading exactly where the Sign-in screen's two columns had it. */
 .si-page.ac-plain .ac-col{max-width:980px}
 .si-page.ac-plain .page-heading{max-width:720px;margin-bottom:28px}
 .si-page.ac-plain .page-heading h1{font-size:46px}
 .si-page.ac-plain .page-heading p{margin-top:14px;font-size:19px}
 .si-page.ac-plain .ac-do{width:300px}

 /* Drawing, no box. */
 .si-page.ac-centre .ac-col{max-width:720px;padding-top:20px}
 .si-page.ac-centre .ac-pic{width:96px}
 .si-page.ac-centre h1{font-size:40px}
 .si-page.ac-centre .ac-line{margin-top:12px;font-size:19px}
 .si-page.ac-centre .ac-do{width:300px;margin:26px auto 0}
}