/* profile-tabs.css — Fix P (new-user polish round 2, 2026-10-06). EN + CN (byte-identical trees).
 *
 * Profile opens on a short Account tab. Account / Notifications / Voice & avatar are three views of #settings —
 * one form, one Save — so each block carries data-ptab and #settings[data-ptab-active] shows only its own.
 * Untagged blocks (the form grid wrapper, Save Settings) show on all three. */
#settings[data-ptab-active="account"] [data-ptab]:not([data-ptab~="account"]),
#settings[data-ptab-active="notifications"] [data-ptab]:not([data-ptab~="notifications"]),
#settings[data-ptab-active="voice"] [data-ptab]:not([data-ptab~="voice"]) {
  display: none !important;
}

/* The knowledge bar ("Your iSpirit knows a little about you — …") replaces the coverage ring. */
.profile-coverage { width: min(300px, 100%); }
.profile-coverage .cov-meta { flex: 1; min-width: 0; }
.profile-coverage .cov-meta h4 { font-size: 14px; line-height: 1.4; margin: 0 0 8px; }
.cov-bar {
  height: 8px; border-radius: 999px; overflow: hidden; margin: 0 0 10px;
  background: color-mix(in srgb, var(--accent-purple, #9479ff) 16%, transparent);
}
.cov-bar-fill {
  display: block; height: 100%; width: 4%; border-radius: inherit;
  background: var(--accent-purple, #9479ff); transition: width 0.4s ease;
}
#profileCoverageRing .cov-add {   /* id: beats styles.css button:not(…)×4 */
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: 0.85rem; font-weight: 600;
  color: var(--accent-purple, #9479ff); text-decoration: underline; text-underline-offset: 3px;
}
#profileCoverageRing .cov-add:hover, #profileCoverageRing .cov-add:focus-visible { color: var(--fg, #f8fafc); }
@media (prefers-reduced-motion: reduce) { .cov-bar-fill { transition: none; } }
/* Cozy: the gold accent is ~2.6:1 on cream — use the cozy link colours (same as cozy-theme.css `a`). */
[data-ux-mode="cozy"] #profileCoverageRing .cov-add {
  color: var(--cozy-rose, #A8475F); background: none; box-shadow: none; border: 0; padding: 0; min-height: 0;
}
[data-ux-mode="cozy"] #profileCoverageRing .cov-add:hover,
[data-ux-mode="cozy"] #profileCoverageRing .cov-add:focus-visible { color: var(--cozy-rose-dark, #8F3A4F); }