/* Sign in, the code, the terms step and invites, and the first run's choice beside its photo (D20, in the D15 look of
   design/DIRECTION.md, look v2 and the design pass of Nov 3, board 1). A phone gets the top row (the logo and the call
   button), the form and the foot row, no photo; from 1024 px the street photo is a narrower panel on the left and the
   form's column is centred in the rest. One white theme. */

/* ------------------------------------------------------------------ the frame */
.si { min-height: 100vh; min-height: 100dvh; background: var(--white); }
.si-main { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh;
  padding: calc(16px + env(safe-area-inset-top)) 24px calc(20px + env(safe-area-inset-bottom)); }
.si-col { display: flex; flex-direction: column; flex: 1; width: 100%; max-width: 400px; margin: 0 auto; }
.si-logo { display: block; height: 28px; width: auto; }

.si-body { display: flex; flex-direction: column; }
.si-h { margin: 0 0 8px; font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -.01em; text-wrap: balance; outline: none; }
.si-sub { margin: 0 0 24px; font-size: 16px; line-height: 24px; color: var(--steel); overflow-wrap: anywhere; }
.si-sub strong { color: var(--ink); font-weight: 600; }
.si-fine { margin: 16px 0 0; font-size: 14px; line-height: 20px; color: var(--steel); }
.si-foot { margin: 24px 0 0; font-size: 15px; line-height: 22px; color: var(--steel); }
.si-foot .link, .si-foot a { display: inline-flex; align-items: center; min-height: 44px; }
/* Join for a person with no account: its two ways out on one row (first run build review, Nov 3) */
.si-foot.jn-foot { display: flex; flex-wrap: wrap; gap: 0 24px; }
.si-sk .sk-row { height: 48px; margin: 0 0 12px; }
.si-body .notice { margin: 0 0 20px; }
.si-form .field { margin: 0; }
.si-go { min-height: 48px; margin-top: 16px; border-radius: 24px; font-size: 16px; }

/* ------------------------------------------------------------------ Google, Microsoft and Apple: one row of three tiles */
/* Each owner's logo unaltered over its name (the design pass, ruling 3), one height and width, one edge and one ink, so
   none is less prominent than another; at least 64 px tall. The Apple file carries its own padding, so it draws at 40 px
   with the padding taken back, to stand as tall as the others' 22. */
.si-providers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pbtn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 64px;
  padding: 8px 4px; border-radius: 8px; background: #FFFFFF; box-shadow: inset 0 0 0 1px #8A929B; color: #0E1116;
  font-size: 14px; line-height: 18px; font-weight: 600; text-align: center; text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.pbtn img { flex: none; display: block; width: 22px; height: 22px; }
.pbtn span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pbtn:hover { text-decoration: none; background: #F6F7F8; }
.pbtn:active { background: #EDEDED; }
.pbtn-apple img { width: 40px; height: 40px; margin: -9px 0; }
.si-or { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--steel); font-size: 14px; line-height: 20px; }
.si-or::before, .si-or::after { content: ""; flex: 1; height: 1px; background: var(--concrete); }

/* ------------------------------------------------------------------ the code step */
.si-inbox { align-self: flex-start; min-height: 44px; margin: -8px 0 20px; padding: 0 16px; border-radius: 22px; font-size: 15px; }
.code-boxes { margin-top: 4px; }
.code-error { font-size: 15px; line-height: 22px; }
.code-again-now:not([disabled]) { display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  padding: 0 18px; border: 1px solid var(--ink); border-radius: 22px; color: var(--ink); font-weight: 600; text-decoration: none; }
.code-again-now:not([disabled]):hover { background: var(--mist); }

/* ------------------------------------------------------------------ terms */
.tm-box { margin: 0 0 4px; padding: 4px 16px; border: 1px solid var(--concrete); border-radius: var(--r-card); }
.tm-box .tm-row { margin: 0; padding: 10px 0; }
.tm-box .tm-row + .tm-row { border-top: 1px solid var(--concrete); }
.tm-sender { margin-top: 20px; }
/* the terms line, the server's words, directly above its button (terms.js) */
.tm-line { margin: 20px 0 12px; font-size: 15px; line-height: 22px; }
.tm-error:empty, .ob-foot .error:empty { margin: 0; }

/* ------------------------------------------------------------------ the first run's choice beside the panel */
.ob-lede { margin: -8px 0 20px; font-size: 16px; line-height: 24px; color: var(--steel); }
.ob-pick .choice { align-items: center; }
.ob-pick-main { display: flex; flex-direction: column; min-width: 0; }
.ob-pick-1 { font-weight: 600; }
.ob-pick-2 { margin-top: 2px; font-size: 14px; line-height: 20px; font-weight: 400; color: var(--steel); }
@media (min-width: 1024px) {
  .ob-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .ob-split .ob-card { align-self: center; margin: 48px auto; width: calc(100% - 64px); }

}

/* ------------------------------------------------------------------ Account: a linked sign in and its Remove */
.set-linked { display: flex; align-items: center; gap: 12px; flex: none; }
.set-linked .link { font-size: 15px; }

/* The code step's live regions are always in the page (signin.js codeEntry); empty, they take no room. */
.code-error:empty, .code-info:empty { margin: 0; }
/* Six code boxes keep 44 px on the narrowest phones: these screens' own frame, not the old .bare-page. */
@media (max-width: 359px) {
  .si-main { padding-left: 16px; padding-right: 16px; }
  .si-main .code-boxes { gap: 4px; }
}

/* ================================================================ look v2 (SPEC 7.1, 7.2, 7.4) and the design pass
   The view's root is .v2.v-si: the top row (.si-top: the logo, the call button), the column (.si-col: the screen's body,
   then the foot row), and from 1024 the street photo (.v-frp) as the left panel. The old classes the screens draw (.btn,
   .input, .field, .error, .notice, .link, the code boxes, the invite rows) take the v2 look here, under the view. */
.v2.v-si { background: var(--v-white); }
.v2.v-si .si-main { padding: calc(12px + env(safe-area-inset-top)) var(--v-gut) calc(16px + env(safe-area-inset-bottom)); }
.v2.v-si .si-col { max-width: 400px; }
/* the top row: the logo left, Call Roundhouse right (44 px, ui.callButton), across the form's side of the page */
.v2.v-si .si-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.v2.v-si .si-top .si-logo { height: 28px; margin: 0; }
.v2.v-si .si-top .v-call-btn { margin-right: -10px; }
/* the photo: none under 1024 (ruling 1) */
@media (max-width: 1023px) { .v2.v-si > .v-frp { display: none; } }
/* the body sits a little under the top row on a phone, less on a short one; the foot row closes the column */
.v2.v-si .si-body { margin-top: clamp(12px, 4vh, 48px); }
@media (min-width: 1024px) {
  /* the photo a narrower panel (about 42%, at most 620 px), stretched to the page's foot however tall the form is */
  .v2.v-si { display: grid; grid-template-columns: min(42vw, 620px) minmax(0, 1fr); }
  .v2.v-si > .v-frp { position: relative; top: auto; align-self: stretch; height: auto; min-height: 100vh; min-height: 100dvh; }
  .v2.v-si .si-main { padding: 24px 40px 20px; }
  .v2.v-si .si-top .v-call-btn { margin-right: -4px; }
  .v2.v-si .si-col { flex: 1; }
  .v2.v-si .si-body { margin: auto 0; padding: 24px 0; }
}

/* type */
.v2.v-si .si-h { margin: 0 0 10px; font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -.3px; }
.v2.v-si .si-sub { margin: 0 0 20px; font-size: 16px; line-height: 24px; font-weight: 500; color: var(--v-mute); }
.v2.v-si .si-sub strong { color: var(--v-ink); }
.v2.v-si .si-fine, .v2.v-si .si-foot { font-size: 14px; line-height: 21px; font-weight: 500; color: var(--v-mute); }
.v2.v-si .si-fine a, .v2.v-si .si-foot a, .v2.v-si .link { color: var(--v-ink); font-weight: 600; text-decoration: underline;
  text-decoration-color: var(--v-soft); text-underline-offset: 3px; background: none; border: 0; padding: 0; }
/* sign in itself: one task line over the form, the fine line centred under the tiles */
.v2.v-si.v-si-first .si-h { margin-bottom: 18px; }
.v2.v-si.v-si-first .si-fine { margin: 16px 0 0; text-align: center; }

/* the providers, "or", the field and the buttons */
.v2.v-si .pbtn { border-radius: var(--v-r-ctl); box-shadow: inset 0 0 0 1px var(--v-field); color: var(--v-ink); }
.v2.v-si .pbtn:hover { background: var(--v-fill); }
html.kbd .v2.v-si .pbtn:focus-visible { outline: 2px solid var(--v-ink); outline-offset: 2px; }
.v2.v-si .si-or { margin: 18px 0; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--v-mute); }
.v2.v-si .si-or::before, .v2.v-si .si-or::after { background: var(--v-hair-2); }
.v2.v-si .field { margin-top: 18px; }
.v2.v-si .si-form .field { margin-top: 0; }
.v2.v-si .field label { display: block; margin-bottom: 6px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--v-ink); }
.v2.v-si .input { width: 100%; min-height: 48px; padding: 0 14px; border: 0; border-radius: var(--v-r-ctl); background: var(--v-white);
  box-shadow: inset 0 0 0 1px var(--v-field); font-size: 16px; line-height: 22px; color: var(--v-ink); }
.v2.v-si .input:focus { box-shadow: inset 0 0 0 2px var(--v-ink); }
.v2.v-si .input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--v-red); }
.v2.v-si .error, .v2.v-si .code-error { margin: 6px 0 0; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--v-red); }
.v2.v-si .notice { margin: 0 0 16px; padding: 0 0 0 12px; border-radius: 0; background: none; box-shadow: inset 2px 0 0 var(--v-red);
  font-size: 14px; line-height: 20px; font-weight: 600; color: var(--v-ink); }
.v2.v-si .help, .v2.v-si .code-info { font-size: 14px; line-height: 20px; color: var(--v-mute); }
.v2.v-si .btn { min-height: 48px; padding: 0 18px; border: 0; border-radius: var(--v-r-ctl); background: var(--v-white); color: var(--v-ink);
  box-shadow: inset 0 0 0 1px var(--v-hair-2); font-size: 16px; line-height: 22px; font-weight: 600; }
.v2.v-si .btn:hover { box-shadow: inset 0 0 0 1px var(--v-field); background: var(--v-white); }
.v2.v-si .btn-primary { background: var(--v-orange); color: var(--v-on-orange); box-shadow: none; }
.v2.v-si .btn-primary:hover { background: #DE4F17; box-shadow: none; }
.v2.v-si .btn-ink { background: var(--v-ink); color: var(--v-white); box-shadow: none; }
.v2.v-si .btn-ink:hover { background: #262B33; color: var(--v-white); box-shadow: none; }
.v2.v-si .btn[disabled], .v2.v-si .btn[aria-busy="true"] { opacity: .6; }
.v2.v-si .si-go { margin-top: 12px; border-radius: var(--v-r-ctl); }
.v2.v-si.v-si-first .input, .v2.v-si.v-si-first .si-go { min-height: 52px; }
.v2.v-si .si-inbox, .v2.v-si .si-again { border-radius: var(--v-r-ctl); }
html.kbd .v2.v-si .btn-primary:focus-visible { box-shadow: inset 0 0 0 2px var(--v-white); }

/* the six boxes (48 by 58, 56 by 64 at 1024, a gap after the third) */
.v2.v-si .code-boxes { gap: 8px; }
.v2.v-si .code-box { flex: 1 1 0; min-width: 44px; max-width: 48px; height: 58px; border: 0; border-radius: var(--v-r-ctl); box-shadow: inset 0 0 0 1px var(--v-field);
  font: 600 26px/1 var(--v-sans); color: var(--v-ink); text-align: center; }
.v2.v-si .code-box:nth-child(4) { margin-left: 8px; }
.v2.v-si .code-box:focus, .v2.v-si .code-box.filled { box-shadow: inset 0 0 0 2px var(--v-ink); }
.v2.v-si .code-box:disabled { background: var(--v-fill); }
@media (min-width: 1024px) { .v2.v-si .code-box { max-width: 56px; height: 64px; } }
@media (max-width: 359px) { .v2.v-si .si-main { padding-left: 16px; padding-right: 16px; } .v2.v-si .code-boxes { gap: 4px; } .v2.v-si .code-box:nth-child(4) { margin-left: 4px; } }

/* the terms step's tick and the invites: rows on hairlines, never cards (rule 1) */
.v2.v-si .join-card { padding: 16px 0; border: 0; border-top: 1px solid var(--v-hair); border-radius: 0; }
.v2.v-si .join-card:last-of-type { border-bottom: 1px solid var(--v-hair); }
.v2.v-si .tm-box { border: 0; border-block: 1px solid var(--v-hair); border-radius: 0; padding: 4px 0; background: none; }
/* Send a new code: plain mute words while it waits, a white button once it is the way on */
.v2.v-si .code-again[disabled] { color: var(--v-soft); font-weight: 500; text-decoration: none; }
.v2.v-si .code-again-now:not([disabled]) { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--v-r-ctl);
  box-shadow: inset 0 0 0 1px var(--v-hair-2); text-decoration: none; }
/* a new screen's heading takes focus for a screen reader, never with a ring */
html.kbd .v2 .si-h[tabindex="-1"]:focus-visible { outline: none; }
.v2.v-si .join-name { font-size: 17px; line-height: 24px; }
.v2.v-si .join-sub { color: var(--v-mute); }

/* ================================================================ one screen (first run build, Part S 1; the design pass)
   Sign in and the code step fit with no document scroll at 390 by 664 (Safari with its bars), 390 by 844, 1280 by 720,
   1440 by 789 and 1440 by 900, a failed provider sign in's note shown too (scripts/first_run_signin_browser.py measures
   each). */
.v2.v-si .si-fine { margin: 12px 0 0; font-size: 14px; line-height: 20px; }
.v2.v-si .code-entry + .si-fine { margin-top: 16px; }
/* the foot row: the terms, the privacy notice and (sign in and the code) the Nezam logo, as small links on one line */
.v2.v-si .si-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 20px;
  margin: auto 0 0; padding-top: 16px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--v-mute); }
.v2.v-si .si-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 20px; }
.v2.v-si .si-links a, .v2.v-si .si-links .v-credit a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px;
  line-height: 20px; font-weight: 500; color: var(--v-mute); text-decoration: underline; text-decoration-color: var(--v-soft);
  text-underline-offset: 3px; }
.v2.v-si .si-links .v-credit { margin: 0; }
.v2.v-si .si-links .v-credit a { text-decoration: none; }
@media (max-width: 1023px) {
  .v2.v-si .si-body .notice { margin-bottom: 12px; }
  .v2.v-si .si-inbox { margin-bottom: 12px; }
}
@media (min-width: 1024px) {
  .v2.v-si .si-links a, .v2.v-si .si-links .v-credit a { min-height: 32px; }
}
/* Join (Part S 2): the agreement line sits directly over its button, No thanks and the tips tick under it */
.v2.v-si .join-no { margin-top: 8px; }
.v2.v-si .jn-tick { margin: 12px 0 0; align-items: flex-start; font-size: 15px; line-height: 21px; font-weight: 500; color: var(--v-mute); }
.v2.v-si .jn-tick input { margin-top: 1px; }
.v2.v-si .jn-tick .help { display: block; font-size: 14px; line-height: 20px; }
.v2.v-si .join-card .tm-line { margin-top: 12px; }
.v2.v-si .join-confirm:empty { display: none; }
.v2.v-si .join-confirm .join-sub { margin: 0 0 8px; }
.v2.v-si .error:empty { margin: 0; }
/* S1b (SPEC 7.3): the Microsoft confirm's bar back to sign in sits on the column's own left edge (rule 1), no rule under it */
.v2.v-si .v-fbar { min-height: 44px; margin-bottom: 4px; padding: 0; border-bottom: 0; }