/* A focused achievement view, shown only when the user opens their harvest board. */
.collectionTabs { display: flex; gap: 25px; border-bottom: 1px solid #dce3ee; margin: 0 0 25px; }
.collectionTabs button { background: transparent; border: 0; border-bottom: 2px solid transparent; color: #637089; padding: 9px 2px 14px; min-height: 46px; font-size: 14px; }
.collectionTabs button[aria-selected=true] { color: #425a81; border-bottom-color: #6e7fa3; font-weight: 500; }
.growthIntro { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 30px; align-items: center; padding: 29px; background: #edf0f7; border-radius: 15px; margin-bottom: 26px; }
.growthRing { --growth-progress: 0%; width: 144px; height: 144px; border-radius: 50%; background: conic-gradient(#7585a8 var(--growth-progress),#dce2ee 0); padding: 7px; }
.growthRing > div { display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; width: 100%; height: 100%; background: #f8f9fc; }
.growthRing strong { font: 400 41px/1.3 Georgia,serif; color: #405577; }
.growthRing span { font-size: 12px; color: #62718b; }
.growthIntro .eyebrow { font-size: 10px; letter-spacing: 1.4px; }
.growthIntro h2 { font-size: 23px; font-weight: 400; color: #3d4e6c; line-height: 1.7; margin: 7px 0 10px; }
.growthIntro p { font-size: 14px; line-height: 1.95; color: #5c6b84; margin: 6px 0; }
.growthIntro .growthNext { font-size: 13px; color: #5e6e8b; }
.growthNumbers { display: flex; gap: 29px; margin-top: 20px; padding-top: 16px; border-top: 1px solid #d5ddeb; }
.growthNumbers strong { font: 400 23px/1.4 Georgia,serif; color: #445b7e; margin-right: 7px; }
.growthNumbers span { font-size: 12px; color: #60708b; }
.growthMilestones { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-bottom: 27px; }
.growthMilestone { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 16px; background: #fff; border: 1px solid #e1e6ef; border-radius: 12px; }
.growthMilestone > span { font-size: 23px; color: #78839b; }
.growthMilestone.earned { border-color: #cbd4e5; background: #f4f3f9; }
.growthMilestone.earned > span { color: #82759c; }
.growthMilestone > div { flex: 1; min-width: 0; }
.growthMilestone h3 { font-size: 13px; font-weight: 500; color: #4d607f; margin: 0 0 5px; line-height: 1.7; }
.growthMilestone p { font-size: 11px; color: #637089; margin: 0; line-height: 1.8; }
.growthMilestone > small { color: #637089; font-size: 11px; white-space: nowrap; }
.growthPanels { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 23px; }
.growthPanel { background: #fff; border: 1px solid #e1e6ef; border-radius: 14px; padding: 25px; min-width: 0; }
.growthPanel h2 { font: 500 16px/1.8 var(--ui-font); color: #435777; margin: 0 0 5px; }
.growthPanel > p { color: #637089; font-size: 12px; line-height: 1.9; margin: 0; }
.growthWeek { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 6px; margin: 18px 0 15px; }
.growthDay { display: flex; flex-direction: column; align-items: center; min-width: 0; gap: 8px; padding: 6px 1px; color: #62718b; font-size: 11px; background: transparent; border: 0; border-radius: 7px; }
.growthDay:hover, .growthDay:focus-visible { background: #f0f3f9; }
.growthDayCount { font-size: 12px; }
.growthBarTrack { display: flex; align-items: flex-end; justify-content: center; height: 90px; width: 100%; }
.growthBarTrack i { width: 17px; max-width: 70%; min-height: 1px; background: #a3aec8; border-radius: 5px 5px 2px 2px; }
.growthTopic { display: grid; grid-template-columns: 74px minmax(0,1fr) 43px; align-items: center; gap: 11px; width: 100%; min-height: 44px; text-align: left; background: transparent; color: #5e6e88; border: 0; padding: 7px 0; font-size: 12px; }
.growthTopic b { text-align: right; font-weight: 400; }
.growthTopic:hover { color: #3f597f; }
.growthTopicTrack { height: 5px; background: #eef1f7; border-radius: 4px; overflow: hidden; }
.growthTopicTrack i { display: block; height: 100%; background: #aaa3bf; border-radius: 4px; }
.growthFootnote { font-size: 12px; line-height: 1.9; color: #637089; margin: 15px 0 22px; }
.growthActions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 23px; }
.backendPreparation { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin-top: 23px; padding-top: 22px; border-top: 1px solid #dce3ed; }
.backendPreparation h3 { color: #4b5f80; font-size: 15px; font-weight: 500; margin: 0 0 6px; }
.backendPreparation p { color: #606e87; font-size: 13px; line-height: 1.9; margin: 0; max-width: 50em; }
.backendPreparation button { white-space: nowrap; min-height: 44px; }
@media(max-width:1100px) { .growthMilestones { grid-template-columns: 1fr; } .growthMilestone { padding: 15px 18px; } }
@media(max-width:780px) {
 .collectionTabs { gap: 26px; margin-bottom: 23px; }
 .collectionTabs button { font-size: 15px; }
 .growthIntro { grid-template-columns: 1fr; justify-items: center; padding: 24px; gap: 18px; }
 .growthIntro > div:last-child { width: 100%; }
 .growthIntro h2 { font-size: 22px; }
 .growthIntro p { font-size: 14px; }
 .growthRing { width: 139px; height: 139px; }
 .growthNumbers { gap: 22px; }
 .growthPanels { grid-template-columns: 1fr; gap: 18px; }
 .growthPanel { padding: 22px; }
 .growthMilestone h3 { font-size: 14px; }
 .growthMilestone p { font-size: 12px; }
 .growthWeek { gap: 3px; }
 .growthDay { min-height: 140px; }
 .growthPanel > p, .growthFootnote { font-size: 13px; }
 .growthActions button { flex: 1; min-height: 46px; }
 .backendPreparation { flex-direction: column; align-items: flex-start; gap: 12px; }
}