/* ==========================================================================
   Your reports — account.html only.

   Everything structural (cards, fields, buttons, badges, banners, empty
   states) comes from components.css; this file only lays out the pieces
   this page invented: the signed-in header row, the owner's report cards,
   the sign-in explainer and the preference toggles. The tracker's look
   lives in tracker.css, shared with report-detail.
   ========================================================================== */

/* ---- Signed-in header row ----------------------------------------------- */

.account-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: var(--rule-width) solid var(--rule);
}

.account-head__who {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-muted);
  overflow-wrap: anywhere; /* long addresses must not push past 375px */
}

.account-head__who strong {
  color: var(--text);
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
}

.account-section-title {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-2);
}

/* ---- The owner's report cards ------------------------------------------- */

.account-report-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.account-report {
  background: var(--bg-raised);
}

.account-report__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
  margin-bottom: var(--space-2);
}

.account-report__where {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

.account-report__when {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
}

.account-report__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
}

.account-report__body {
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-3);
}

.account-report__tracker {
  border-top: var(--rule-width) solid var(--rule);
  padding-top: var(--space-3);
}

.account-report__link {
  margin: var(--space-4) 0 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
}

/* ---- Sign-in / explainer card ------------------------------------------- */

.account-signin {
  background: var(--bg-raised);
}

.account-signin h2 {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-3);
}

.account-benefits {
  list-style: none;
  margin: var(--space-4) 0 var(--space-5);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.account-benefits li {
  position: relative;
  padding-left: var(--space-4);
}

.account-benefits li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

.account-signin__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: stretch;
}

.account-signin__field {
  margin-bottom: 0;
  flex: 1 1 220px;
}

.account-signin__privacy {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: var(--rule-width) solid var(--rule);
}

@media (min-width: 640px) {
  .account-signin__form {
    flex-direction: row;
    align-items: flex-end;
  }

  .account-signin__form .btn {
    min-height: 46px; /* sits level with the input */
    flex-shrink: 0;
  }
}

/* ---- Notification preferences ------------------------------------------- */

.account-prefs {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: var(--rule-width) solid var(--rule);
}

.account-prefs h2 {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-2);
}

.account-prefs__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-4) 0;
}

.pref-toggle {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  border: var(--border-width) solid var(--border);
  background: var(--bg-raised);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out);
}

.pref-toggle:hover {
  border-color: var(--border-strong);
}

.pref-toggle input {
  width: 19px;
  height: 19px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--accent);
}

.pref-toggle:has(input:focus-visible) {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.pref-toggle:has(input:disabled) {
  cursor: default;
  opacity: 0.65;
}

.pref-toggle__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pref-toggle__label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text);
}

.pref-toggle__help {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: var(--leading-normal);
}

@media (prefers-reduced-motion: reduce) {
  .pref-toggle {
    transition: none;
  }
}