/* MB MEDIA — Built for MOHAMAD BASSEM MEFTAH — mftahbassem@gmail.com */
/* ============================================================
   account.css — account page layout on top of tts.css (vl-*).
   Uses ONLY --mb-* design tokens. No hardcoded colors / sizes.
   Exactly ONE coral per page: defined by .vl-btn--cta (guest send).
   ============================================================ */

.acc-shell {
  max-inline-size: 560px;
  margin-inline: auto;
}

/* ---- auth card ---- */
.acc-card .vl-card__title { margin-block-end: var(--mb-s-2); }

/* consent block, visually separated from the email field */
.acc-consent { margin-block-start: var(--mb-s-1); }
.acc-consent-note {
  font-size: var(--mb-t-xs);
  color: var(--mb-fg-subtle);
  margin-block-start: var(--mb-s-1);
  margin-block-end: var(--mb-s-4);
}
.acc-privacy {
  display: inline-block;
  margin-block-start: var(--mb-s-4);
  font-size: var(--mb-t-sm);
}

/* ---- member panel ---- */
.acc-member__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mb-s-3);
  margin-block-end: var(--mb-s-4);
}
.acc-member__email {
  font-family: var(--mb-font-en);
  font-size: var(--mb-t-base);
  color: var(--mb-fg);
  overflow-wrap: anywhere;
}
.acc-plan-badge {
  padding: var(--mb-badge-pad);
  border: 1px solid var(--mb-border-strong);
  border-radius: var(--mb-badge-radius);
  font-family: var(--mb-font-mono);
  font-size: var(--mb-badge-size);
  color: var(--mb-accent);
  background: var(--mb-bg-sunken);
}
.acc-saved {
  font-size: var(--mb-t-xs);
  color: var(--mb-success);
  margin-block-start: var(--mb-s-1);
}
.acc-member__buttons { justify-content: flex-start; }
.acc-danger-zone {
  margin-block-start: var(--mb-s-6);
  padding-block-start: var(--mb-s-4);
  border-block-start: 1px solid var(--mb-border);
}
.acc-delete { color: var(--mb-danger); border-color: var(--mb-danger); }
.acc-delete:hover { background: color-mix(in srgb, var(--mb-danger) 14%, transparent); color: var(--mb-danger); }
.acc-delete-desc {
  font-size: var(--mb-t-xs);
  color: var(--mb-fg-subtle);
  margin-block-start: var(--mb-s-2);
}

/* ---- quota block ---- */
.acc-quota { margin-block-start: var(--mb-s-5); }
.acc-quota__invite { margin-block-end: var(--mb-s-4); }
.acc-quota-err { color: var(--mb-fg-muted); font-size: var(--mb-t-sm); }

.acc-quota__list { display: grid; gap: var(--mb-s-4); }
.acc-quota-row__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--mb-s-3);
  margin-block-end: var(--mb-s-2);
}
.acc-quota-row__label { font-size: var(--mb-t-sm); font-weight: var(--mb-w-medium); color: var(--mb-fg-muted); }
.acc-quota-row__num { font-family: var(--mb-font-mono); font-size: var(--mb-t-sm); color: var(--mb-fg); }
.acc-quota-bar {
  block-size: var(--mb-progress-h);
  inline-size: 100%;
  background: var(--mb-bg-sunken);
  border: 1px solid var(--mb-border);
  border-radius: var(--mb-r-full);
  overflow: hidden;
}
.acc-quota-bar__fill {
  display: block;
  block-size: 100%;
  inline-size: 0%;
  border-radius: var(--mb-r-full);
  background: var(--mb-accent);
  transition: inline-size var(--mb-dur-base) var(--mb-ease);
}
.acc-quota-row.is-warn .acc-quota-bar__fill { background: var(--mb-warning); }
.acc-quota-row.is-warn .acc-quota-row__num { color: var(--mb-warning); }
.acc-quota-row__note { font-size: var(--mb-t-xs); color: var(--mb-warning); margin-block-start: var(--mb-s-1); }