/* ============================================
   RewardSmart — Account pages shared chrome
   (website/account/*.html)
   Loaded alongside css/styles.css, which supplies
   the actual --brand/--gray-N/--font-N tokens used
   below — this file only adds account-page-specific
   layout, not a second palette.
   (Careful: an asterisk directly followed by a slash anywhere in this
   comment's prose closes it early. This block used to read
   "--gray-(asterisk)/--font-(asterisk)" with no space between them, which
   silently dropped every rule up to the next `{`, i.e. .acct-nav. No
   parser error, no visible sign beyond a nav bar with no flex layout.)
   ============================================ */

/* rs-account-page.js's RSAccountPage.init() toggles this class to switch
   between the signed-out prompt and signed-in content on every account
   page. Previously this rule only existed inside rs-cashback-data.js's
   ensureStyles(), which is itself only called from an onSignedIn callback
   — a chicken-and-egg gap that meant .hidden never applied for the exact
   signed-out state it's needed for (settings.html doesn't even load
   rs-cashback-data.js at all). Defined here instead, in a stylesheet every
   account page already loads unconditionally, so both states render
   correctly regardless of sign-in status. Found by the new Playwright
   website E2E suite (website/tests/) — the first automated check to
   actually render these pages in a real browser.
   Playwright caught this correctly: do not remove this rule without
   re-running that suite. */
.hidden {
  display: none !important;
}

.acct-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--gray-200, #E5E7EB);
  font-family: var(--font-primary, sans-serif);
}
.acct-nav-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 16px;
  color: var(--dark, #1C1B1F);
  text-decoration: none;
}
.acct-nav-logo img { border-radius: 6px; }
.acct-nav-back {
  /* --brand-dark, not --brand: see rs-account-nav.js's comment on the same
     contrast tradeoff for this new component's small link-style text. */
  color: var(--brand-dark, #1D4ED8);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.acct-nav-back:hover { text-decoration: underline; }

.acct-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 20px 64px;
  font-family: var(--font-primary, sans-serif);
  color: var(--dark, #1C1B1F);
}
.acct-title {
  font-family: var(--font-display, sans-serif);
  font-weight: 800;
  font-size: 22px;
  margin: 0 0 20px;
}

.acct-signedout {
  max-width: 420px;
  margin: 64px auto;
  padding: 0 20px;
  text-align: center;
}
.acct-signedout p {
  color: var(--gray-600, #4B5563);
  font-size: 14px;
  margin: 8px 0 20px;
}
.acct-signedout .btn { display: inline-flex; }

.acct-loading {
  text-align: center;
  padding: 48px 20px;
  color: var(--gray-500, #6B7280);
  font-size: 14px;
}

/* Mount target for Clerk's inline <UserProfile> on settings.html. Clerk
   renders its own internal chrome here; this just gives it room and a
   sane minimum height so the page doesn't jump while it loads. */
#rsUserProfile {
  min-height: 520px;
}