/* BORYSU account pages -- only what style.css does not already provide.
 *
 * Everything shared (card, grid, label, input, .actions, button.primary,
 * .errors, .hint, .badge, header/nav/footer) stays in style.css; this file
 * adds the five things the account screens need on top of it: the narrow
 * auth column, consent checkbox rows, the verification code box, the resend
 * cooldown state and the danger zone. Colours come from the existing
 * variables so the two files cannot drift apart.
 */

/* ---- narrow single-column column for the sign-in style pages ---- */
.auth-card { max-width: 460px; margin-left: auto; margin-right: auto; }

.auth-form label { margin-top: 14px; }
.auth-form > label:first-child { margin-top: 0; }

/* The address being verified, shown as data rather than as a form field. */
.auth-email {
  margin: 0 0 14px; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: 6px;
  background: #f7f9fc; font-size: 14px; font-weight: 600;
  word-break: break-all;
}

/* A link row under the form: "already have an account?" and friends. */
.auth-alt { margin: 14px 0 0; font-size: 13px; color: var(--muted); }
.auth-alt a { color: var(--brand); }

/* ---- consent rows ---- */
/* style.css makes every input full width and every label bold and block;
   a checkbox row needs neither, so both are undone here. */
.consents { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.consent {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 13px; font-weight: 400; line-height: 1.5;
  margin: 0; cursor: pointer;
}
.consent input[type="checkbox"] {
  width: auto; margin: 3px 0 0; flex: 0 0 auto; cursor: pointer;
}
.consent span { flex: 1 1 auto; }
.consent a { color: var(--brand); }

/* ---- verification code ---- */
.code-input {
  font-size: 22px; letter-spacing: 8px; text-align: center;
  font-variant-numeric: tabular-nums; padding: 10px 12px;
}
.code-input::placeholder { letter-spacing: 8px; color: #c3ccd8; }

/* The resend button while its 60-second window is still running. */
.link-btn.cooldown,
.link-btn:disabled { opacity: .55; cursor: default; color: var(--muted); }
.link-btn.cooldown:hover, .link-btn:disabled:hover { background: none; }

/* ---- a success message, the counterpart of .errors ---- */
.notice {
  margin-top: 14px; padding: 10px 12px; border-radius: 6px;
  background: var(--ok-bg); color: var(--ok-ink);
  font-size: 13px; font-weight: 600;
}

/* ---- account sections ---- */
/* Each account card is one topic, so its body is ruled off from the heading
   the same way a form section is inside a card. */
.profile-summary {
  margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line);
}
.profile-summary .kv { margin: 0 0 6px; }
.profile-summary .kv .k { min-width: 120px; }
.profile-summary .hint { margin: 10px 0 0; }

/* An <a> standing in for a button in an .actions row. */
a.link-btn { display: inline-block; text-decoration: none; }

/* ---- danger zone ---- */
/* Deleting the account is separated from the settings above it by colour and
   by a rule, so it can never be reached by a stray click on the wrong card. */
.danger-zone {
  margin-top: 34px;
  border-color: var(--bad-ink);
  border-top-width: 3px;
}
.danger-zone h2 { color: var(--bad-ink); }

button.danger {
  background: var(--bad-bg); color: var(--bad-ink);
  border: 1px solid var(--bad-ink); border-radius: 7px;
  padding: 10px 20px; font-size: 14px; font-weight: 600; cursor: pointer;
}
button.danger:hover { background: var(--bad-ink); color: #fff; }
button.danger:disabled { opacity: .6; cursor: progress; }

/* The second, explicit confirmation step. */
.danger-confirm {
  margin-top: 16px; padding: 14px 16px; border-radius: 8px;
  background: var(--bad-bg); color: var(--bad-ink); font-size: 13px;
}
.danger-confirm p { margin: 0; }
.danger-confirm .actions { margin-top: 12px; }

@media (max-width: 720px) {
  .auth-card { max-width: none; }
  .profile-summary .kv .k { display: block; min-width: 0; }
}