/* The Scent Studio (account page): one scale for text, boxes and colors across all seven tabs.
 *
 * Each tab was built separately, so page titles ranged from 25px to 44px, small labels from 7px to 10px, and cards had six
 * different corner radii and paddings. Everything here is scoped to #account-hub and loaded last, so it only lines the
 * tabs up; it adds no new colors. Colors come from the site's own tokens, so every palette and both modes still apply.
 */
#account-hub {
  --ac-eyebrow: .6875rem;                     /* 11px: small labels */
  --ac-page-title: clamp(1.75rem, 3vw, 2rem); /* 28-32px: the title at the top of a tab */
  --ac-section-title: 1.375rem;               /* 22px: a group of cards */
  --ac-card-title: 1.0625rem;                 /* 17px: the title of one card */
  --ac-body: .9375rem;                        /* 15px */
  --ac-small: .8125rem;                       /* 13px */
  --ac-card-radius: 18px;
  --ac-inner-radius: 14px;
  --ac-card-pad: 22px;
  --ac-gap: 16px;
  --ac-card-bg: var(--bg-card);
  --ac-card-line: var(--line);
}

/* --- Text ----------------------------------------------------------------------------------------------------------------- */
#account-hub .account-hub-body .eyebrow,
#account-hub .account-hub-body .pp-visibility h3 {
  font: 650 var(--ac-eyebrow)/1.3 var(--font-ui, Inter, system-ui, sans-serif);
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent-color, var(--muted));
}
#account-hub .account-hub-body .pp-visibility h3 { color: var(--muted); margin: 0 0 8px; }

/* Page title */
#account-hub .account-hub-body h2,
#account-hub .journey-hero h3 {
  font: 400 var(--ac-page-title)/1.12 var(--studio-serif, Georgia, serif); letter-spacing: -.015em; color: var(--ink);
}
#account-hub .account-hub-body h2 { margin: 6px 0 6px; }

/* Section title */
#account-hub .journey-next h3, #account-hub .journey-earned h3, #account-hub .medal-group-heading,
#account-hub .verification-about-card h3, #account-hub .verification-action-card h3 {
  font: 400 var(--ac-section-title)/1.2 var(--studio-serif, Georgia, serif); letter-spacing: -.01em; color: var(--ink);
}

/* Card title */
#account-hub .tl-card h3, #account-hub .pe-card-title, #account-hub .st-card h3, #account-hub .appearance-settings-link h3,
#account-hub .medal-card h3 {
  font: 650 var(--ac-card-title)/1.3 var(--font-ui, Inter, system-ui, sans-serif); letter-spacing: 0; color: var(--ink);
}

/* Body and helper text */
#account-hub :is(.st-card, .pe-card, .appearance-settings-link, .tl-card, .journey-goal, .verification-action-card, .verification-about-card) p { font-size: var(--ac-small); line-height: 1.5; color: var(--muted); }
#account-hub :is(.st-head, .tl-head, .medal-catalog-heading, .verification-heading, .pp-preview-bar) > div > p,
#account-hub .st-head p { font-size: var(--ac-body); line-height: 1.5; color: var(--muted); }

/* --- Boxes ---------------------------------------------------------------------------------------------------------------- */
#account-hub :is(.journey-stats, .tl-stats, .tl-empty, .pe-card, .pe-savebar, .medal-stat-strip, .medal-card, .verification-action-card,
  .verification-about-card, .appearance-settings-link, .st-card, .pp-visibility > section) {
  border: 1px solid var(--ac-card-line); border-radius: var(--ac-card-radius);
}
#account-hub :is(.pe-card, .verification-action-card, .verification-about-card, .appearance-settings-link, .st-card, .pp-visibility > section) { padding: var(--ac-card-pad); }
#account-hub :is(.journey-stats, .tl-stats, .medal-stat-strip, .appearance-settings-link, .pe-card, .st-card:not(.st-identity), .pp-visibility > section, .verification-action-card) { background: var(--ac-card-bg); }
#account-hub .journey-hero { border-radius: calc(var(--ac-card-radius) + 4px); }
/* Boxes inside a card */
#account-hub :is(.journey-goal, .journey-empty, .tl-card, .pe-medal-row, .medal-rung) { border-radius: var(--ac-inner-radius); }
#account-hub :is(.pe-input) { border-radius: 12px; }

/* --- Layout --------------------------------------------------------------------------------------------------------------- */
/* Settings: the heading comes first and its content lines up with every other tab (it sat inset inside a second card). */
#account-hub #account-settings-view { display: flex; flex-direction: column; gap: var(--ac-gap); }
#account-hub #account-settings-view > .st-settings { order: -1; padding: 0; border: 0; background: none; box-shadow: none; }
#account-hub .st-settings { display: grid; gap: var(--ac-gap); }
#account-hub .st-grid { gap: var(--ac-gap); }

@media (max-width: 640px) {
  #account-hub { --ac-card-pad: 18px; }
}