/* Recon — Copyright (c) 2026 Tedd Tony */
/* The sign-in and account pages, on a server shared by many teams. */
body.acctpage { min-width: 0; }
.acct { max-width: 620px; margin: 0 auto; padding: 32px 16px 60px; }
.acct .pane { margin-top: 16px; }
.acct h2 { font: 800 17px var(--f-body); color: var(--t0); margin: 0 0 12px; }
.acct label { display: block; font: 700 12.5px var(--f-body); color: var(--t4); margin: 12px 0 5px; }
.acct input, .acct select {
  width: 100%; box-sizing: border-box; background: var(--soft); border: 1px solid var(--line);
  border-radius: 10px; padding: 11px 12px; color: var(--t0); font: 600 15px var(--f-body);
}
.acct input:focus, .acct select:focus { outline: 2px solid var(--red-ring); border-color: transparent; }
.acct .btn {
  width: auto; align-self: flex-start;
  display: inline-block; margin-top: 16px; padding: 11px 18px; border-radius: 999px; border: 0;
  background: var(--red); color: var(--on-red); font: 800 14px var(--f-body); cursor: pointer;
  text-decoration: none;
}
.acct .btn.ghost { background: transparent; color: var(--t1); border: 1px solid var(--btn); }
.acct .btn.small { margin-top: 0; padding: 7px 12px; font-size: 12.5px; }
.acct .btn:disabled { opacity: .5; cursor: default; }
.acct .msg { min-height: 1.4em; margin-top: 10px; font: 600 13.5px var(--f-body); color: var(--red-alert); }
.acct .msg.ok { color: var(--green-soft); }
.acct .tabs { display: flex; gap: 6px; margin-top: 18px; }
.acct .tabs button {
  flex: 1; padding: 10px; border-radius: 999px; border: 1px solid var(--btn); background: transparent;
  color: var(--t3); font: 800 13.5px var(--f-body); cursor: pointer;
}
.acct .tabs button.on { background: var(--soft2); color: var(--t0); border-color: transparent; }
.acct .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.acct .hint { font: 500 13px/1.55 var(--f-body); color: var(--t4); margin: 8px 0 0; }
.acct table { width: 100%; border-collapse: collapse; font: 600 14px var(--f-body); color: var(--t1); }
.acct td { padding: 9px 4px; border-top: 1px solid var(--line-row); vertical-align: middle; }
.acct td.r { text-align: right; white-space: nowrap; }
.acct td select { width: auto; padding: 6px 8px; font-size: 13px; }
.acct .join { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.acct .join .qr { background: #fff; padding: 10px; border-radius: 10px; line-height: 0; }
.acct .join .u { font: 600 13px var(--f-mono); color: var(--t1); word-break: break-all; flex: 1; min-width: 200px; }
.acct .links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
@media (max-width: 480px) { .acct .row2 { grid-template-columns: 1fr; } }

/* The signed-in chip, on the pages that load /js/account.js. */
.acctchip {
  position: fixed; top: 10px; right: 12px; z-index: 50; display: flex; gap: 8px; align-items: center;
  padding: 6px 12px; border-radius: 999px; background: var(--raised); box-shadow: var(--shadow);
  font: 700 12.5px var(--f-body); color: var(--t2); text-decoration: none;
}
.acctchip b { color: var(--t0); }