/* Signing in without a password, and the account's security (signin.js, identity.js), loaded last.
   The code field is the one bold thing: the code drawn as a cell per character, the cell the next digit goes
   in lit in the sign-in page's gold, the caret blinking in it; a wrong code shakes the cells once and clears
   them, a right one turns them green as its step leaves. Everything else is the mockup's own: the sign-in
   card's type and buttons, Bisnis's white widget cards, Koneksi's lamp and switch, Lacak's dialog frame. */

/* ---------- The code field ---------- */
.code-field { --cell-h: 56px; --cell-gap: 8px; --cell-line: #d6dce5; --cell-ink: #172033; --cell-gold: #f5c66c; --cell-bad: #a53d3d; --cell-good: #1f9d68;
  display: grid; min-width: 0; gap: 8px; }
.code-box { position: relative; min-width: 0; }
.code-cells { display: grid; grid-template-columns: repeat(var(--cells), minmax(0, 1fr)); gap: var(--cell-gap); }
.code-cell { position: relative; display: grid; height: var(--cell-h); min-width: 0; place-items: center; border: 1px solid var(--cell-line); border-radius: 10px; background: #fff; color: var(--cell-ink); font-size: 24px; font-style: normal; font-weight: 650; font-variant-numeric: tabular-nums; line-height: 1; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease; }
.code-cell.is-filled { border-color: #9aa7b8; }
/* The one field lies over the cells, takes every key, paste and suggestion, and shows nothing of its own. */
.code-input { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 10px; background: transparent; color: transparent; caret-color: transparent; font-size: 16px; letter-spacing: 0; outline: none; cursor: text; -webkit-appearance: none; appearance: none; }
.code-input::selection { background: transparent; }
/* Its focus is the lit cell and the darker edges, not a ring round the whole field. */
.code-input:focus, .code-input:focus-visible { outline: none; }
.code-input:-webkit-autofill { -webkit-text-fill-color: transparent; transition: background-color 9999s; }
/* Focus: the cell the next digit goes in, lit gold, with the caret in it. */
.code-box:focus-within .code-cell { border-color: #b8c1ce; }
.code-box:focus-within .code-cell.is-filled { border-color: #8f9db3; }
.code-box:focus-within .code-cell.is-next { border-color: var(--cell-gold); box-shadow: 0 0 0 3px rgb(245 198 108 / 38%); }
.code-box:focus-within .code-cell.is-next:not(.is-filled)::after { content: ""; width: 2px; height: 26px; border-radius: 1px; background: var(--cell-ink); animation: code-caret 1.06s steps(1) infinite; }
@keyframes code-caret { 50% { opacity: 0; } }
.code-field.is-wrong .code-cell { border-color: var(--cell-bad); }
.code-field.is-wrong .code-box:focus-within .code-cell.is-next { border-color: var(--cell-bad); box-shadow: 0 0 0 3px rgb(165 61 61 / 16%); }
.code-field.is-busy .code-cell { background: #fafaf8; color: #687386; }
.code-field.is-busy .code-input { cursor: progress; }
.code-field.is-right .code-cell { border-color: var(--cell-good); background: #e3f3ea; color: #1f7a55; }
.code-error { margin-top: -2px; }
@media (max-width: 400px) { .code-field { --cell-h: 50px; --cell-gap: 6px; } .code-cell { font-size: 21px; } }

/* ---------- Sign-in additions ---------- */
.auth-titles .auth-lead-line { display: block; }
.auth-titles .auth-lead-line + .auth-lead-line { margin-top: 2px; }
.auth-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 8px; margin-top: -8px; }
.auth-links .auth-quiet { justify-self: auto; }
.auth-quiet:disabled { cursor: default; opacity: .5; text-decoration: none; }
.auth-quiet[aria-busy="true"] { opacity: .6; }

/* ---------- Two-step setup: the key as a QR code and as text ---------- */
.tsu { --tsu-ink: #172033; --tsu-muted: #687386; --tsu-line: #e5e3df; --tsu-soft: #f7f7f5;
  display: grid; min-width: 0; gap: 14px; }
.tsu-scan { margin: 0; color: var(--tsu-muted); font-size: 14px; line-height: 1.55; }
.tsu-pair { display: grid; grid-template-columns: 144px minmax(0, 1fr); align-items: center; gap: 18px; }
.tsu-qr { margin: 0; overflow: hidden; border: 1px solid var(--tsu-line); border-radius: 12px; background: #fff; padding: 6px; }
.tsu-qr .qr-code { display: block; width: 100%; height: auto; }
.tsu-key { display: grid; min-width: 0; justify-items: start; gap: 6px; }
.tsu-label { color: var(--tsu-muted); font-size: 12px; font-weight: 650; }
/* Codes and keys are typed by hand, character by character: a fixed-width face keeps 0 and O, 1 and I apart. */
.tsu-code, .rc-codes code { font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums slashed-zero; }
.tsu-code { max-width: 100%; border-radius: 8px; background: var(--tsu-soft); padding: 8px 10px; color: var(--tsu-ink); font-size: 15px; font-weight: 600; letter-spacing: .06em; overflow-wrap: anywhere; }

/* The recovery codes, shown this once: two columns of five on the soft ground, then Salin and Unduh. */
.rc { display: grid; min-width: 0; gap: 10px; }
.rc-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 0; border: 1px solid #e5e3df; border-radius: 12px; background: #f7f7f5; padding: 14px 16px; list-style: none; }
.rc-codes li { min-width: 0; }
.rc-codes code { color: #172033; font-size: 15px; font-weight: 600; letter-spacing: .05em; white-space: nowrap; }
.rc-actions { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 360px) { .rc-codes { grid-template-columns: minmax(0, 1fr); } }

/* Salin and Unduh: Link pelacakan's copy button, where no widget colours are set. */
.tsu .lk-copy-button, .rc .lk-copy-button { display: inline-flex; min-height: 36px; align-items: center; gap: 6px; border: 0; border-radius: 9px; background: #fff; box-shadow: 0 0 0 1px #e5e3df; padding: 0 14px; color: #18243a; font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; transition: background-color var(--m-hover, 120ms) ease, color var(--m-hover, 120ms) ease, box-shadow var(--m-hover, 120ms) ease; }
.tsu .lk-copy-button:hover, .rc .lk-copy-button:hover { background: #18243a; box-shadow: 0 0 0 1px #18243a; color: #fff; }
.tsu .lk-copy-button.is-copied, .rc .lk-copy-button.is-copied { background: #fff; box-shadow: 0 0 0 1px #9fd3b7; color: #1f7a55; }
.tsu .lk-copy-button .icon, .rc .lk-copy-button .icon { width: 14px; height: 14px; }
.tsu .lk-copy-button:focus-visible, .rc .lk-copy-button:focus-visible { outline: 3px solid rgb(47 98 164 / 30%); outline-offset: 2px; }
.auth-page .tsu-scan { font-size: 15px; }
@media (max-width: 420px) {
  .tsu-pair { grid-template-columns: 112px minmax(0, 1fr); gap: 14px; }
  .tsu-code { font-size: 13.5px; letter-spacing: .03em; }
}

/* ---------- Lacak's dialog holding a code ---------- */
.lk-dialog .code-field { --cell-h: 52px; }
.lk-dialog .code-cell { font-size: 22px; }
.lk-dialog .code-label { color: var(--lkd-muted); font-size: 11.5px; font-weight: 700; }
.lk-dialog .code-error { color: var(--lkd-red-ink); font-size: 12.5px; font-weight: 600; line-height: 1.45; }
.lk-dialog .code-field { --cell-bad: var(--lkd-red); }
.lk-dialog .lkd-lead { color: #46536a; font-size: 13px; }
.lk-dialog .lkd-lead b { color: var(--lkd-ink); font-weight: 700; overflow-wrap: anywhere; }
.lk-dialog .lkd-lead:focus { outline: none; }
.lkd-code-form, .lkd-email-form { display: grid; gap: 8px; margin: 0; }
.lkd-link { justify-self: start; min-height: 36px; margin: -8px 0 -4px -8px; border: 0; border-radius: 8px; background: transparent; padding: 0 8px; color: #2f62a4; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: background-color var(--m-hover) ease; }
.lkd-link:hover { background: #e6eef9; }
.lkd-link:disabled { cursor: default; opacity: .5; }
.lkd-link:focus-visible { outline: 3px solid rgb(47 98 164 / 30%); outline-offset: 1px; }
.lk-dialog .lkd-input input { width: 100%; min-height: 44px; border: 1px solid #d5d3cf; border-radius: 10px; background: #fff; padding: 0 12px; color: var(--lkd-ink); font: inherit; font-size: 14px; }
.lk-dialog .lkd-input input:focus { border-color: #8fa9cc; outline: none; box-shadow: 0 0 0 3px rgb(47 98 164 / 14%); }
.lk-dialog .lkd-input input[aria-invalid="true"] { border-color: var(--danger, #a53d3d); box-shadow: 0 0 0 3px rgb(165 61 61 / 12%); }
.lk-dialog .tsu-scan { color: #46536a; font-size: 13px; }
/* A busy action keeps its words, a small ring turning before them. */
.lkd-spin { width: 14px; height: 14px; flex: 0 0 14px; border: 2px solid rgb(255 255 255 / 35%); border-top-color: #fff; border-radius: 50%; animation: lw-spin .8s linear infinite; }
.lk-dialog .lkd-foot .lkd-action[aria-busy="true"] { cursor: progress; opacity: .85; }

/* ---------- Akun: the deletion request, last and quiet (account.css draws the page) ---------- */
.lk-danger-link { min-height: 36px; margin-left: -8px; border: 0; border-radius: 8px; background: transparent; padding: 0 8px; color: var(--w-bad); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: background-color var(--m-hover) ease; }
.lk-danger-link:hover { background: var(--w-bad-bg); }
.lk-requested { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--w-ink); font-size: 12.5px; font-weight: 650; }
.lk-requested .icon { width: 16px; height: 16px; color: var(--w-good); }
.lk-requested:focus { outline: none; }
@container (max-width: 520px) { .lk-danger-link { min-height: 44px; } }

@media (prefers-reduced-motion: reduce) {
  .code-cell { transition: none; }
  .code-box:focus-within .code-cell.is-next:not(.is-filled)::after { animation: none; }
}

.tsu-box { display: grid; grid-template-columns: minmax(0, 1fr) 160px; align-items: center; gap: 16px; }
.tsu-box .tsu-qr { width: 160px; box-sizing: border-box; }
@media (max-width: 420px) {
  .tsu-box { grid-template-columns: minmax(0, 1fr) 132px; gap: 10px; }
  .tsu-box .tsu-qr { width: 132px; }
}