/* Sign-in screens (public/js/signin.js; docs/design.md › Profil): Masuk, Daftar, Verifikasi email, Atur ulang
   password, Amankan akun bisnis. One calm column (≤ --w-acct-out) in #acct-body, Hairline: 1 px borders, 16/500
   titles, muted 13 px leads, one black primary button per screen. Fields and buttons are 44 high with 16 px text
   (no iOS zoom). Loaded after components.css; every value comes from tokens.css. */

.si { display: grid; gap: var(--s-1h); max-inline-size: var(--w-acct-out); margin: var(--s-8) auto 0; }
.si-main { display: grid; gap: var(--s-1h); min-inline-size: 0; }
.si-h { text-align: center; }
.si-h:focus { outline: none; } /* the focus moved there for screen readers, not for a keyboard target */
.si-lead { justify-self: center; max-inline-size: 300px; color: var(--muted); font-size: var(--t-13); line-height: 20px; text-align: center; }
.si-addr { color: var(--ink); overflow-wrap: anywhere; }
.si-first { margin-block-start: var(--s-3h); }
.si-h3 { font: var(--w-medium) var(--t-14)/20px var(--sans); text-align: center; }

/* fields */
.si-form { --si-gap: var(--s-3); display: grid; gap: var(--si-gap); min-inline-size: 0; text-align: start; }
.si-f { display: grid; gap: var(--s-1h); min-inline-size: 0; }
.si-l { color: var(--ink); font: var(--w-medium) var(--t-13)/20px var(--sans); }
.si-lrow { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.si input:not([type="checkbox"], [type="radio"]) { block-size: var(--touch); font-size: var(--t-16); }
.si input:hover { border-color: var(--border-hover); }
.si input[aria-invalid="true"], .si-pw:has(input[aria-invalid="true"]) { border-color: var(--bad); }
.si-pw { display: flex; align-items: center; block-size: var(--touch); padding-inline-end: var(--s-1); border: var(--bw) solid var(--border-strong); border-radius: var(--r); background: var(--surface); }
.si-pw:hover { border-color: var(--border-hover); }
/* the focus ring of the other fields (components.css .acct input:focus-visible), drawn on the box around the eye */
.si-pw:has(input:focus-visible) { border-color: var(--focus); box-shadow: 0 0 0 var(--bw) var(--focus); }
.si-pw:has(input[aria-invalid="true"]:focus-visible) { border-color: var(--bad); }
.si .si-pw input { flex: 1; min-inline-size: 0; block-size: 100%; padding-inline: var(--s-3) var(--s-1); border: 0; background: transparent; }
.si .si-pw input:focus-visible { outline: none; box-shadow: none; }
.si .si-eye { inline-size: var(--h-md); block-size: var(--h-md); border-radius: 50%; }
.si-eye[aria-pressed="true"] { color: var(--ink); }
.si-hint { line-height: 18px; }
.si-aside { color: var(--muted); font-size: var(--t-12); line-height: 18px; text-decoration: none; }
.si-aside:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* buttons, the "atau" rule, status */
.si .btn.si-btn { block-size: var(--touch); }
.si-form .si-btn { margin-block-start: var(--s-1); }
.si-or { display: flex; align-items: center; gap: var(--s-3); margin-block: var(--s-3h) var(--s-1h); color: var(--muted); font-size: var(--t-12); line-height: 18px; }
.si-or::before, .si-or::after { content: ""; flex: 1; block-size: var(--bw); background: var(--border); }
.si-st { color: var(--muted); font-size: var(--t-13); line-height: 20px; text-align: center; }
.si-st:empty { margin-block-start: calc(-1 * var(--si-gap, 0px)); } /* stays in the page (a live region), takes no room */
.si-st.is-bad { color: var(--bad-ink); }
.si-alt { color: var(--muted); font-size: var(--t-13); line-height: 20px; text-align: center; }
.si-alt-a { color: var(--ink); font-weight: var(--w-medium); text-decoration: none; }
.si-alt-a:hover { text-decoration: underline; text-underline-offset: 3px; }
.si-note { text-align: center; }

/* Untuk vendor */
.si-vendor { display: grid; gap: var(--s-1h); margin-block-start: var(--s-6); padding-block-start: var(--s-6); border-block-start: var(--bw) solid var(--border); }
.si-vendor .btn { margin-block-start: var(--s-2); }

/* footers: the language + Privasi (Masuk), the privacy line (Daftar), the code's 15 minutes (Verifikasi) */
.si-foot { display: grid; justify-items: center; gap: var(--s-2); margin-block-start: var(--s-10); color: var(--muted); font-size: var(--t-13); line-height: 20px; text-align: center; }
.si-foot .lang-sw { color: var(--muted); }
.si-privacy { color: var(--muted); font-size: var(--t-12); line-height: 18px; text-underline-offset: 3px; }
.si-terms { font-size: var(--t-12); line-height: 18px; }
.si-terms a { color: var(--muted); text-underline-offset: 3px; }

/* Verifikasi: the mail mark, six digit boxes, the resend line */
.si-center { justify-items: stretch; }
.si-mark { display: grid; place-items: center; justify-self: center; inline-size: var(--h-xl); block-size: var(--h-xl); margin-block-end: var(--s-2); border-radius: 50%; background: var(--tint); color: var(--ink-2); }
.si-center .si-form { margin-block-start: var(--s-5); }
.si-code-f { display: grid; gap: var(--s-1h); }
.si-code { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-2); }
.si .si-d { block-size: calc(var(--h-xl) + var(--s-1)); padding: 0; text-align: center; font: var(--w-regular) var(--t-20)/1 var(--mono); font-variant-numeric: tabular-nums; caret-color: var(--ink); }
.si .si-d.is-on { border-color: var(--ink); }
.si .si-d[aria-invalid="true"] { border-color: var(--bad); }
.si-tip { margin-block-start: var(--s-3h); color: var(--muted); font-size: var(--t-13); line-height: 20px; text-align: center; }
.si-resend { font-weight: var(--w-medium); }
.si-resend:disabled { color: var(--muted); text-decoration-color: var(--border-strong); cursor: default; }
.si-other { justify-self: center; margin-block-start: var(--s-1); color: var(--muted); font-size: var(--t-13); line-height: 20px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-hover); }
.si-other:hover { color: var(--ink); }

/* Amankan akun: the Instagram that is connected */
.si-ok { display: flex; align-items: center; gap: var(--s-2); margin-block-end: var(--s-4); padding: var(--s-2) var(--s-3); border: var(--bw) solid var(--ok-bd); border-radius: var(--r-card); background: var(--ok-bg); color: var(--ok); font-size: var(--t-13); line-height: 20px; }
.si-secure .si-h, .si-secure .si-lead { justify-self: stretch; max-inline-size: none; text-align: start; }

/* touch: the small links get a 44 px hit area without growing their look (components.css does it for buttons) */
@media (max-width: 760px) {
  .si-aside, .si-alt-a, .si-other, .si-privacy, .si-terms a { position: relative; }
  .si-aside::after, .si-alt-a::after, .si-other::after, .si-privacy::after, .si-terms a::after {
    content: ""; position: absolute; inset-block: min(0px, calc((100% - var(--touch)) / 2)); inset-inline: min(0px, calc((100% - var(--touch)) / 2));
  }
}