/* ===========================================================================
   MCRUSH PE — account security surfaces (build 1109)
   The second step at sign-in, two-step setup, recovery codes, and the page on
   which a new user chooses their own password. Themed from the same tokens as
   the rest of the app, so it follows Pearl / Mono / Onyx / Abyss / Lucid.
   =========================================================================== */

/* ---- the second step, shown in place of the sign-in form ---------------- */
#loginTwofa{width:100%}
.tf-card{display:flex;flex-direction:column;gap:12px}
.tf-head{display:flex;align-items:flex-start;gap:10px}
.tf-head .tf-ico{display:inline-grid;place-items:center;width:32px;height:32px;flex:0 0 auto;border-radius:9px;
  border:1px solid color-mix(in srgb,var(--blue) 40%,var(--line));color:var(--blue);
  background:color-mix(in srgb,var(--blue) 10%,transparent)}
.tf-head b{display:block;font-size:14.5px;line-height:1.3}
.tf-head span{display:block;font-size:12.5px;line-height:1.45;color:var(--muted);margin-top:2px}
.tf-nowrap{white-space:nowrap}
.tf-code{width:100%;text-align:center;font-size:22px;font-weight:700;letter-spacing:.34em;
  padding:12px 10px;font-variant-numeric:tabular-nums}
.tf-code::placeholder{letter-spacing:.34em;opacity:.35}
.tf-err{min-height:18px;font-size:12.5px;line-height:1.45;color:var(--red,#c0392b)}
.tf-warn{margin:0;font-size:12.5px;line-height:1.45;color:var(--amber,#b45309)}
.tf-alt{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center}
.tf-link{border:0;background:none;padding:0;font:inherit;font-size:12.5px;font-weight:600;
  color:var(--blue);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.tf-link:disabled{opacity:.45;cursor:default}

/* ---- status pills ------------------------------------------------------- */
.tf-status{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tf-status .tf-sub{font-size:12px;color:var(--muted)}
.tf-pill{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:999px;
  font-size:12px;font-weight:700;border:1px solid var(--line)}
.tf-pill.on{color:var(--green,#1e8e54);border-color:color-mix(in srgb,var(--green,#1e8e54) 40%,var(--line));
  background:color-mix(in srgb,var(--green,#1e8e54) 10%,transparent)}
.tf-pill.off{color:var(--muted)}

/* ---- choosing a second factor ------------------------------------------ */
.tf-choose{display:grid;gap:10px;margin-top:14px}
.tf-opt{display:block;width:100%;text-align:left;padding:13px 15px;border:1px solid var(--line);
  border-radius:12px;background:var(--card);color:var(--ink);font:inherit;cursor:pointer}
.tf-opt:hover{border-color:color-mix(in srgb,var(--blue) 50%,var(--line));
  background:color-mix(in srgb,var(--blue) 6%,var(--card))}
.tf-opt b{display:block;font-size:13.5px}
.tf-opt span{display:block;font-size:12px;line-height:1.45;color:var(--muted);margin-top:3px}

/* ---- the setup key and its otpauth link -------------------------------- */
.tf-key{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:11px 13px;border:1px solid var(--line);
  border-radius:10px;background:color-mix(in srgb,var(--ink) 4%,var(--card))}
.tf-key small{font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.tf-key code{flex:1 1 220px;font-size:14.5px;font-weight:700;letter-spacing:.06em;word-break:break-all}
.tf-uri{margin:10px 0 0;font-size:12.5px}
.tf-uri a{font-weight:600}
.tf-uri span{color:var(--muted);margin-left:6px}

/* ---- recovery codes ----------------------------------------------------- */
.tf-codes{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;
  padding:14px;border:1px dashed color-mix(in srgb,var(--blue) 40%,var(--line));border-radius:12px;
  background:color-mix(in srgb,var(--ink) 4%,var(--card))}
.tf-codes code{font-size:14px;font-weight:700;letter-spacing:.08em;text-align:center;
  padding:5px 0;border-radius:6px;background:var(--card);border:1px solid var(--line)}

/* ---- administrator controls inside the user editor --------------------- */
.tf-admin-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 0 2px}
.tf-admin-row select{min-width:230px}
.tf-linkout:empty{display:none}
.tf-linkmsg{margin:10px 0 6px;font-size:12.5px;line-height:1.45;color:var(--muted)}
.tf-linkbox{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--line);
  border-radius:10px;background:color-mix(in srgb,var(--ink) 4%,var(--card))}
.tf-linkbox code{flex:1;font-size:11.5px;word-break:break-all;line-height:1.4}

/* ---- the page where a new user chooses their own password -------------- */
.tf-setup-screen{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;
  padding:24px 16px;overflow-y:auto;background:var(--bg,#0e1116)}
.tf-setup-card{width:min(440px,100%);padding:30px 28px 26px;border:1px solid var(--line);border-radius:16px;
  background:var(--card);color:var(--ink);box-shadow:0 24px 60px rgba(0,0,0,.28)}
.tf-setup-kicker{display:block;font-size:10.5px;font-weight:800;letter-spacing:.14em;color:var(--blue);margin-bottom:8px}
.tf-setup-card h2{margin:0 0 8px;font-size:21px;line-height:1.25}
.tf-setup-card p{margin:0 0 18px;font-size:13px;line-height:1.55;color:var(--muted)}
.tf-setup-card .field{margin-bottom:12px}
.tf-setup-card .field label{display:block;font-size:11.5px;font-weight:700;color:var(--muted);margin-bottom:4px}
.tf-setup-card .field input{width:100%}
.tf-hint{margin:2px 0 16px!important;font-size:11.5px!important;line-height:1.5!important}
.tf-setup-card .tf-err{margin-top:10px;text-align:center}

@media (max-width:520px){
  .tf-code{font-size:19px;letter-spacing:.26em}
  .tf-setup-card{padding:24px 20px 22px}
  .tf-admin-row select{min-width:0;width:100%}
}

/* build 1232 — sign-in alerts */
.sa-list{display:flex;flex-direction:column;gap:6px}
.tf-opt.sa-row{display:flex;gap:11px;align-items:flex-start;cursor:pointer;padding:11px 13px}
.tf-opt.sa-row input{margin-top:3px;flex:0 0 auto;accent-color:var(--blue)}
.tf-opt.sa-row>span{display:block;margin:0}
.sa-log{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;max-height:190px;overflow:auto}
.sa-log li{font-size:12.5px;border-left:2px solid var(--line);padding:2px 0 2px 9px}
.sa-log li span{display:block;font-size:11.5px;color:var(--muted);margin-top:1px}
/* build 1233 — the account dialogs' button row (two-step verification, sign-in alerts) drawn like the app's buttons,
   with thumb-sized targets; before this they fell back to plain system buttons */
#mcModal .mc-acts{display:flex;flex-wrap:wrap;gap:8px}
#mcModal .mc-acts button{min-height:44px;padding:10px 16px;border-radius:11px;border:1px solid var(--line);
  background:var(--soft,transparent);color:var(--ink);font:inherit;font-size:13.5px;font-weight:700;cursor:pointer}
#mcModal .mc-acts button.primary{background:var(--blue);border-color:var(--blue);color:#fff}
#mcModal .mc-acts button:disabled{opacity:.55;cursor:default}