/* emit's own sign-in page (Stage C). Builds on tokens.css, topbar.css, wordmark.css and the send card's
   shared fields (.st-input, .st-go in sendbox.css), so its inputs and button are the same components
   as the home page's, not lookalikes. Inter is served from this site, never from Google. */
/* Inter comes from fonts.css, the one declaration every page shares (signin.html links it). */

/* sendbox.css locks the page to one screen for the home page; this page must scroll on a short phone */
html,body{ height:auto; min-height:100%; overflow-x:hidden; overflow-y:auto; }
body{ font-family:var(--ui); color:var(--text); background:var(--base); -webkit-font-smoothing:antialiased; margin:0; }
/* the top bar floats over the page and publishes its height; reserve it, as every other consumer does */
.si-wrap{ min-height:calc(100vh - var(--topbar-h)); display:flex; justify-content:center; align-items:flex-start;
  padding:calc(var(--topbar-h) + 12px) 16px 64px; box-sizing:border-box; }
.si-card{ width:100%; max-width:400px; background:var(--surface-card); border:1px solid var(--hairline); border-radius:18px;
  padding:26px 24px 22px; box-sizing:border-box; display:flex; flex-direction:column; gap:14px; }
.si-card form{ display:flex; flex-direction:column; gap:8px; margin:0; }
.si-lead{ margin:0; font:600 18px/1.35 var(--ui); letter-spacing:var(--t-tracking); color:var(--txt-bright); text-wrap:balance; }
.si-h{ margin:0; font:600 22px/1.25 var(--ui); letter-spacing:var(--t-title-ls); color:var(--txt-bright); }
.si-sub{ margin:0; font:400 14px/1.5 var(--ui); color:rgba(255,255,255,.62); }
.si-label{ margin-top:6px; font:500 12px var(--ui); color:rgba(255,255,255,.55); padding:0; }
.si-code{ font-size:20px; letter-spacing:.3em; text-align:center; font-variant-numeric:tabular-nums; }
.si-row{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.si-link{ background:none; border:0; padding:4px 0; color:#EF9A7A; font:500 13px var(--ui); cursor:pointer; }
.si-link[disabled]{ color:rgba(255,255,255,.3); cursor:default; }
.si-link:focus-visible, .si-chip:focus-visible, .si-claim a:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; border-radius:6px; }
.si-heard{ border:0; margin:4px 0 0; padding:0; min-width:0; }
.si-chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:8px; }
.si-chip{ border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.07); color:#fff; border-radius:999px;
  padding:6px 12px; font:500 13px var(--ui); cursor:pointer; }
.si-chip[aria-checked="true"]{ border-color:var(--blue); background:rgba(228,111,64,.18); }
.si-check{ display:flex; gap:10px; align-items:flex-start; font:400 13.5px/1.45 var(--ui); color:rgba(255,255,255,.75); cursor:pointer; margin-top:4px; }
.si-check input{ margin-top:2px; width:16px; height:16px; accent-color:var(--blue); flex:none; }
.si-claim{ margin:2px 0 0; font:400 13.5px/1.5 var(--ui); color:rgba(255,255,255,.62); }
.si-claim a{ color:#EF9A7A; text-decoration:none; font-weight:500; }
.si-claim.si-top{ padding:10px 12px; border:1px solid rgba(239,154,122,.35); border-radius:12px; background:rgba(228,111,64,.08); }
.si-note{ margin:0; font:400 12.5px var(--ui); color:rgba(255,255,255,.62); }
/* C4: what is signing in (a plugin, the helper or the phone opened this page) */
.si-app{ margin:0; padding:9px 12px; border:1px solid rgba(239,154,122,.35); border-radius:12px; background:rgba(228,111,64,.08);
  font:500 13.5px/1.45 var(--ui); color:rgba(255,255,255,.8); }
#stepApp{ display:flex; flex-direction:column; gap:8px; }
#stepApp[hidden]{ display:none; }
/* C5: the claim offer and the claim's return */
#stepOffer, #stepClaim{ display:flex; flex-direction:column; gap:12px; }
#stepOffer[hidden], #stepClaim[hidden], #claimForm[hidden], #claimRetry[hidden], #claimNotMine[hidden]{ display:none; }
#claimMsg:focus{ outline:none; }
/* text on the card at AA contrast or better: the error red and the link blue are lifted for this surface */
.si-msg{ margin:0; font:500 13.5px/1.45 var(--ui); color:#FF7A73; }
.si-lead:focus, .si-h:focus, #sentTo:focus, #doneMsg:focus, #continueBtn:focus:not(:focus-visible){ outline:none; }
/* Google and Apple: white buttons with the brands' own marks, as both brands' rules allow on a dark page */
.si-oauth{ display:flex; flex-direction:column; gap:8px; margin-top:4px; }
/* a hidden provider must really be gone: display:flex above would otherwise override the hidden attribute */
.si-oauth[hidden], .si-prov[hidden]{ display:none; }
#emailForm[hidden], .si-or[hidden]{ display:none; }   /* email taken off the page (EMIT_SIGNIN_PROVIDERS without it) */
.si-prov{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:11px 14px; border-radius:12px;
  border:1px solid #747775; background:#fff; color:#1F1F1F; font:600 15px var(--ui); cursor:pointer; }
.si-prov:hover{ background:#F2F2F2; }
.si-prov:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
.si-prov[disabled]{ opacity:.6; cursor:default; }
.si-or{ display:flex; align-items:center; gap:10px; margin:6px 0 0; font:500 12px var(--ui); color:rgba(255,255,255,.55); }
.si-or::before, .si-or::after{ content:""; flex:1; height:1px; background:rgba(255,255,255,.14); }
.si-ts{ display:flex; justify-content:center; min-height:0; }
/* account delete (block 1): the delete mode's head, its word and button, and the after page */
#delHead, #stepDelete, #stepDeleted{ display:flex; flex-direction:column; gap:12px; }
#delHead[hidden], #stepDelete[hidden], #stepDeleted[hidden], #delCounts[hidden], #delStays[hidden], #delLive[hidden],
#delProve[hidden]{ display:none; }
/* the sign-in page's own opening lines say nothing about a delete: the head stands in their place */
.si-deleting #stepEmail > .si-lead, .si-deleting #stepEmail > .si-sub{ display:none; }
.si-del{ margin:0; padding:0 0 0 18px; font:400 14px/1.5 var(--ui); color:rgba(255,255,255,.8); }
.si-del li + li{ margin-top:4px; }
.si-del--stays{ font-size:13.5px; color:rgba(255,255,255,.62); }
.si-warn{ margin:0; padding:9px 12px; border:1px solid rgba(255,122,115,.4); border-radius:12px; background:rgba(255,69,58,.08);
  font:500 13.5px/1.45 var(--ui); color:rgba(255,255,255,.85); }
.st-go.si-danger:not([disabled]){ background:var(--red); color:#fff; }
#delTitle:focus, #delDoneTitle:focus{ outline:none; }
.si-ts:empty{ display:none; }
@media (max-width:420px){ .si-card{ padding:22px 18px 18px; } }