/* =============================================================
   ACCOUNT PAGE — /account/
   -------------------------------------------------------------
   Layout for the dashboard (results / tests / purchases lists)
   and the centered auth panels. Shared form + modal styles live
   in auth.css; design tokens in global.css.
   ============================================================= */

.account {
  padding: var(--space-lg) 0 var(--space-xl);
  /* Keep the footer from hugging the content on short states
     (e.g. the logged-out form). */
  min-height: 55vh;
}

/* --- Centered panels (config-needed, logged-out, recovery) --- */

.account__panel {
  max-width: 480px;
  margin:    var(--space-lg) auto;
}

.account__panel h1,
.account__heading {
  font-size:     var(--text-h2);
  margin-bottom: var(--space-sm);
}

.account__intro {
  color:         var(--color-text-muted);
  margin-bottom: var(--space-md);
}

/* Config-needed panel is a simple centered message. */
#account-config-needed {
  text-align: center;
  padding:    var(--space-xl) 0;
}

#account-config-needed p {
  color:         var(--color-text-muted);
  margin-bottom: var(--space-md);
}


/* --- Dashboard --- */

.account__header {
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  gap:             var(--space-md);
  flex-wrap:       wrap;
  margin-bottom:   var(--space-lg);
}

.account__email {
  color:     var(--color-text-muted);
  font-size: var(--text-small);
  margin:    0;
}

/* Quiet text-style sign-out button */
.account__signout {
  font-family:     var(--font-family);
  font-size:       var(--text-small);
  font-weight:     var(--font-weight-medium);
  color:           var(--color-text-muted);
  background:      transparent;
  border:          1px solid var(--color-border);
  border-radius:   var(--radius-md);
  padding:         8px var(--space-sm);
  cursor:          pointer;
  transition:      color var(--transition), border-color var(--transition);
}

.account__signout:hover {
  color:        var(--color-text);
  border-color: var(--color-text-muted);
}

.account__section {
  margin-bottom: var(--space-lg);
}

.account__section-heading {
  font-size:     var(--text-h3);
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--color-border);
}

.account__empty {
  color:     var(--color-text-muted);
  font-size: var(--text-body);
}

/* The button link under an empty-state message (e.g. "Take the
   free test"). The paragraph above already carries its own bottom
   margin, so the button only needs to sit inline-block below it. */
.account__empty-cta {
  display:    inline-block;
  margin-top: var(--space-xs);
}

/* --- Rows (shared by results / tests / purchases lists) --- */

.account__list {
  list-style:     none;
  display:        flex;
  flex-direction: column;
  gap:            var(--space-sm);
}

.account__row {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-md);
  background:      var(--color-surface);
  border:          1px solid var(--color-border);
  border-radius:   var(--radius-md);
  padding:         var(--space-sm) var(--space-md);
}

.account__row-main {
  display:        flex;
  flex-direction: column;
  gap:            2px;
  min-width:      0;   /* Lets long text truncate instead of overflowing */
}

.account__row-title {
  font-weight: var(--font-weight-semibold);
  font-size:   var(--text-body);
}

.account__row-sub {
  font-size: var(--text-small);
  color:     var(--color-text-muted);
}

/* Slightly smaller button that fits inside a row */
.account__row-action {
  padding:     10px 22px;
  font-size:   var(--text-small);
  flex-shrink: 0;
}

/* Status badge on purchase rows */
.account__badge {
  font-size:      var(--text-small);
  font-weight:    var(--font-weight-semibold);
  padding:        4px 12px;
  border-radius:  999px;
  background:     #EAF6EC;                  /* Soft success green */
  color:          var(--color-text);
  text-transform: capitalize;
  flex-shrink:    0;
}

.account__badge--muted {
  background: var(--color-border);
  color:      var(--color-text-muted);
}

@media (max-width: 520px) {
  .account__row {
    flex-direction: column;
    align-items:    stretch;
    text-align:     left;
  }
  .account__row-action {
    text-align: center;
  }
}


/* --- Dashboard tabs (Your results | Account management) --- */
/* The look comes from .auth-tabs in auth.css (same tabs as the
   login forms); only page-level spacing lives here. */

.account__tabs {
  margin-bottom: var(--space-lg);
}


/* --- Account management tab --- */

.account__password-form {
  max-width: 380px;
}

/* Green counterpart to .auth-form__error (auth.css) — confirms a
   completed action ("Password updated", "Results deleted"). */
.auth-form__success {
  font-size:     var(--text-small);
  color:         #1E6B34;                   /* Accessible green on the soft tint */
  background:    #EAF6EC;
  border-radius: var(--radius-sm);
  padding:       var(--space-xs) var(--space-sm);
  margin:        var(--space-sm) 0 0;
}

/* Destructive actions share one visual language: red outline
   buttons, and a tinted confirmation box that appears in place
   so nothing happens from a single stray click. */

.account__danger-text {
  color:         var(--color-text-muted);
  font-size:     var(--text-body);
  max-width:     640px;
  margin-bottom: var(--space-sm);
}

.account__danger-btn {
  font-family:   var(--font-family);
  font-size:     var(--text-small);
  font-weight:   var(--font-weight-semibold);
  color:         #B3261E;                   /* Same accessible red as .auth-form__error */
  background:    transparent;
  border:        1px solid #B3261E;
  border-radius: var(--radius-md);
  padding:       10px var(--space-sm);
  cursor:        pointer;
  transition:    background-color var(--transition), color var(--transition);
}

.account__danger-btn:hover {
  background: #FCEEED;
}

/* The final "yes, really" button is solid red — visually louder
   than the button that merely opens the confirmation. */
.account__danger-btn--solid {
  color:      #FFFFFF;
  background: #B3261E;
}

.account__danger-btn--solid:hover {
  background: #8F1E17;
}

.account__danger-btn:disabled {
  opacity: 0.5;
  cursor:  not-allowed;
}

/* The hidden attribute works via the browser's built-in
   "display: none" — which our "display: flex" below would silently
   out-rank. This rule keeps hidden winning, so the box only appears
   after its "Delete …" button is clicked. */
.account__danger-confirm[hidden] {
  display: none;
}

.account__danger-confirm {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            var(--space-sm);
  background:     #FCEEED;
  border:         1px solid #B3261E;
  border-radius:  var(--radius-md);
  padding:        var(--space-sm) var(--space-md);
  max-width:      480px;
}

.account__danger-confirm p {
  margin:    0;
  font-size: var(--text-small);
}

/* The type-DELETE-to-confirm input */
.account__danger-confirm .auth-form__input {
  width:      100%;
  max-width:  240px;
  background: #FFFFFF;
}

.account__danger-actions {
  display:     flex;
  align-items: center;
  gap:         var(--space-sm);
  flex-wrap:   wrap;
}

/* Quiet "never mind" next to the loud confirm button */
.account__danger-cancel {
  font-family:     var(--font-family);
  font-size:       var(--text-small);
  font-weight:     var(--font-weight-medium);
  color:           var(--color-text-muted);
  background:      transparent;
  border:          none;
  cursor:          pointer;
  text-decoration: underline;
}

.account__danger-cancel:hover {
  color: var(--color-text);
}