/* ==========================================================================
   ParaPrep, Account / settings page (Brief 32)
   Layered on styles.css (tokens + .card/.btn) + dashboard.css (app shell) +
   auth.css (.field/.banner/.pw-* form bits). Page-specific only.
   ========================================================================== */

.account-main { max-width: 720px; }

.account-card { padding: 1.4rem 1.5rem; margin-bottom: .4rem; }
.account-card .btn { display: inline-block; }

/* Selects inside a .field already get spacing from the field wrapper. */
.account-card select.search-box { margin-bottom: 0; }
.account-card .field:last-of-type { margin-bottom: 1.1rem; }

/* Read-only value (email) */
.readonly-value {
  font-weight: 600; color: var(--ink); margin: .1rem 0 0;
  word-break: break-all;
}

.account-rule { border: 0; border-top: 1px solid var(--line); margin: 1.4rem 0; }

/* "Send a reset link" inline action */
.reset-row { font-size: .85rem; color: var(--muted); margin: .9rem 0 0; }
.linkish {
  background: none; border: 0; color: var(--teal-dark); font-weight: 700;
  cursor: pointer; font-size: .85rem; padding: 0; text-decoration: underline;
}
.linkish:hover { color: var(--teal); }
.linkish:disabled { color: var(--muted); cursor: default; text-decoration: none; }

/* Subscription */
.sub-line { font-size: .95rem; margin: 0 0 .3rem; }
.account-card .plan-badge.free { background: var(--teal-soft); color: var(--teal-dark); }

/* Danger zone */
.danger-head { color: var(--red); }
.danger-card { border-color: #f3c9c2; background: #fffaf9; }
.danger-card h4 { margin: 0 0 .4rem; font-size: 1rem; color: var(--red); }
.danger-card p { color: var(--muted); font-size: .9rem; margin: 0 0 .8rem; }
.danger-card code { background: rgba(0, 0, 0, .06); padding: .05rem .35rem; border-radius: 4px; }

.btn.danger { background: var(--red); color: #fff; }
.btn.danger:hover { background: #8f2c24; }

/* Disabled buttons: dim, and don't darken on hover. (Disabled .btn here are
   always primary teal or .danger red; the secondary link is a .linkish.) */
.btn:disabled { opacity: .55; cursor: default; }
.btn:disabled:hover { background: var(--teal); }
.btn.danger:disabled:hover { background: var(--red); }

/* Keyboard focus visibility (matches dashboard.css) */
.account-card .btn:focus-visible,
.account-card input:focus-visible,
.account-card select:focus-visible,
.linkish:focus-visible {
  outline: 2px solid var(--teal-dark); outline-offset: 2px;
}