.newProfileFieldContainer {
  background:white;
  border-radius: 16px;
  padding:16px;
  margin:8px;
}

.communityHighlight {
	background: white;
	color:#3A3A3A;
    border-radius: 20px;
    margin:16px;
    padding:16px;
    max-width:500px;
    box-shadow: 0 4px 16px rgba(119,106,200,0.1);
}
.communityHighlight:hover {
	box-shadow: 0 6px 24px rgba(119,106,200,0.18);
}
.tabOption {
    padding: 8px 16px;
    margin-right: 2px;
    border-radius: 12px 12px 0 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: #f0eeff;
    bottom: -1px;
    color: var(--bia-accent);
    font-weight: 700;
    font-size: 0.9rem;
    white-space: nowrap;
    min-width: 80px;
    word-wrap: break-word;
    text-align: center;
    flex: 1;
    transition: background 0.2s ease, color 0.2s ease;
}
.newsContainer {
	padding-left: 16px;
	padding-right:16px;
}
.tabOption.selected {
    background: white;
    color: #1a1a2e;
    box-shadow: 0 -2px 0 0 var(--bia-accent) inset;
}
.tabOption:hover {
    background: #ece9ff;
    color: #5c55da;
}
.communityTag {
	padding: 8px;
	padding-bottom: 2px;
	padding-top: 2px;
    border-radius: 25px;
    display: inline-block;
}
.communityTag.emetophobia {
	background-color: var(--bia-accent);
	color:white;
}
.communityTag.socialAnxiety {
	background-color: #3B60E4;
	color:white;
}
.communityTag.separationAnxiety {
	background-color: #7765E3;
	color:white;
}
.communityTag.schoolPerformanceAnxiety {
	background-color: #36558F;
	color:white;
}
.communityTag.agoraphobia {
	background-color: #2A4494;
	color:white;
}

.communityTag.contaminationOCD {
	background-color: #5E4AE3;
	color:white;
}

.communityTag.schoolPhobia {
	background-color: #1B264F;
	color:white;
}

.communityTag.panic {
	background-color: #7D53DE;
	color:white;
}


.profileIconOption {
	width:65px;height:65px;
	text-align: center;
	padding-top: 8px;
	display:inline-block;
	border-radius: 65px;
	cursor: pointer;
}
.profileIconOption:hover {
	background:var(--bia-accent);
}
.usernameOption {
	background: #e3deff;
	border-radius: 8px;
	padding:2px;
	padding-left:4px;
	padding-right:4px;
	margin:2px;
	display: inline-block;
	cursor: pointer;
}
.usernameOption.selected {
	background:var(--bia-accent);
	color:white;
}
.usernameOption:hover {
	background:var(--bia-accent);
	color:white;
}

.profileIconOption.selected {
	background:var(--bia-accent);
}

.rightProfileContainer {
	width:100%;
	text-align:right;
	padding-right: 16px;
	padding-top: 16px;
}
.leftProfileContainer {
	width:100%;
	text-align:left;
	padding-left: 16px;
	padding-top: 16px;
}
.postReaction {
	display: inline-block;
	padding:8px;
	padding-top: 12px;
	margin-right:4px;
	border-radius: 50%;
	width:55px;
	height:55px;
	text-align: center;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.15s ease;
}
.postReaction.reacted {
	background:var(--bia-accent);
}
.postReaction:hover {
	background: #ede9ff;
	transform: scale(1.08);
}
.postReactions {
	text-align: right;
	margin-top:16px;
	margin-bottom:8px;
}
.horizontalCommunityPostContainer {
	overflow-x: auto;
    white-space: nowrap;
	height:370px;
	vertical-align: middle;
}
.postReactionCount.withCount {
	height: 24px;
	width:24px;
	border-radius: 24px;
	background: #e3deff;
	position: relative;
	margin:-24px;
	top:10px;
	right:10px;
	float:right;
}
.postReactionCount.withCount.reacted {
	background: var(--bia-accent);
	color:white;
}
.postCommentBtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 55px;
	height: 55px;
	border-radius: 50%;
	color: var(--bia-accent);
	cursor: pointer;
	transition: background 0.2s ease, transform 0.15s ease;
}
.postCommentBtn:hover {
	background: #ede9ff;
	transform: scale(1.08);
}
.postCommentIcon {
	display: block;
}
.postActions {
	display: flex;
	align-items: center;
	margin-top: 16px;
	margin-bottom: 8px;
}
.postActions .postReactions {
	margin: 0 0 0 auto;
}
.postWrapper {
	white-space: normal;
	width:100%;
	text-align: center;
	margin-bottom:8px;
}
.postWrapper.inline {
	margin-right: 8px;
	margin-left: 8px;
	display: inline-block;
	width:auto;
	vertical-align: middle;
}
.post {
	width:100%;
	text-align: left;
	background:white;
	border-radius: 20px;
	padding:16px;
}
.postLeft {
	vertical-align: middle;
	margin-right: 8px;
}
.postRight {
	margin-left: 40px;
	margin-top: 8px;
	display: inline-block;
	vertical-align: top;
}
.postImageContainer {
	width:100px;
	height:100px;
	background:#e3deff;
	border-radius: 100px;
	display: inline-block;
}
.postContainerOuter {
	width:100%;
	max-width: 900px;
	min-width: 300px;
}
.postContainer {
	width:98%;
	text-align: left;
	background:white;
	border-radius: 20px;
	padding-top:16px;
	padding-left: 32px;
	padding-right:32px;
	margin-bottom: 12px;
	display: inline-block;
	box-shadow: 0 2px 12px rgba(119,106,200,0.07);
}
.postAuthor {

}
.postContent {
	
}

.createPostContainer {
	margin-top: 8px;
	margin-bottom: 8px;
}

.quickPost {
	cursor: pointer;
	background: white;
	border-radius: 20px;
	padding-right:16px;
	margin: 8px;
	display: inline-block;
	height:88px;
	box-shadow: 0 2px 10px rgba(119,106,200,0.08);
	transition: background 0.2s ease, box-shadow 0.2s ease;
}
.quickPost:hover {
	background: #f0eeff;
	color: #1a1a2e;
	box-shadow: 0 4px 16px rgba(119,106,200,0.16);
}
.quickPostLeft {
	vertical-align:middle;
	display:inline-block;height:88px;background:var(--bia-accent);border-radius:20px 0px 0px 20px;width:32px;
}

.quickPostContainer {
	margin-top: 8px;
}

@media only screen and (max-width: 768px) {
	.postLeft {
		display: block;
		width: 100%;
	}
	.postRight {
		margin-left: 0px;
		display: block;
		text-align: center;
	}

	.postContainer {
		padding-top:8px;
		padding-left: 16px;
		padding-right:16px;
		margin-right: 4px;
		margin-left: 4px;
	}
	.newsContainer {
		padding:8px;
	}
}
/* Q+A tab notification dot: small accent marker on the tab when one of the user's questions has a
   newly published answer. Cleared once the community page is viewed. */
.qaNotificationDot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--bia-accent);
	margin-left: 6px;
	vertical-align: middle;
}

.qaInline {
	text-align: left;
	margin-top: 8px;
}
.qaInlineEmpty {
	color: var(--bia-muted);
}
/* The feed card leads with the question, so expanding it is a secondary action: a text control
   rather than the full-width purple button the card used to carry. 24px min target. */
.qaExpandBtn {
	display: inline-block;
	background: none;
	border: none;
	padding: 6px 0;
	min-height: 24px;
	margin-top: 6px;
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--bia-link);
	cursor: pointer;
}
.qaExpandBtn:hover {
	text-decoration: underline;
}

/* ----- Community groups (accountability circles) ----- */
.groupGrid {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 12px;
}
.groupTile {
	background: #ffffff;
	border: 1px solid rgba(119,106,200,0.18);
	border-radius: 14px;
	padding: 16px;
	width: 240px;
	box-sizing: border-box;
	transition: box-shadow 0.15s ease;
}
.groupTile:hover {
	box-shadow: 0 4px 14px rgba(119,106,200,0.18);
}
.groupTileName {
	font-weight: 700;
	color: #1a1a2e;
	margin-bottom: 4px;
}
.groupTileDesc {
	color: #4a4a5e;
	font-size: 0.9em;
	margin-bottom: 10px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}
.groupTileMeta {
	font-size: 0.8em;
	color: var(--bia-accent);
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.groupTileJoined {
	margin-top: 8px;
	display: inline-block;
	font-size: 0.78em;
	font-weight: 700;
	color: #237355;
	background: #e3f9f3;
	border-radius: 10px;
	padding: 2px 10px;
}
.groupConsentNotice {
	background: #ede9ff;
	border-radius: 12px;
	padding: 12px 16px;
	margin: 12px 0;
}
.groupConsentNotice p {
	margin: 6px 0 0 0;
	font-size: 0.9em;
	color: #4a4a5e;
}
.groupGoalLine {
	margin-top: 8px;
	font-weight: 700;
	color: var(--bia-accent);
}
.groupPendingNote {
	margin-top: 8px;
	color: #4a4a5e;
	font-style: italic;
}
.groupHeroNumber {
	font-size: 2.6em;
	font-weight: 800;
	color: var(--bia-accent);
	line-height: 1.1;
}
.groupHeroLabel {
	color: #4a4a5e;
	margin-bottom: 10px;
}
.groupWindowProgress {
	color: #1a1a2e;
	font-weight: 600;
}
.groupRecognition {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 6px;
}
.groupRecognitionName {
	background: #e3f9f3;
	color: #237355;
	border-radius: 12px;
	padding: 4px 12px;
	font-weight: 600;
	font-size: 0.9em;
}
.groupRoster {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 8px;
}
.groupRosterMember {
	display: flex;
	align-items: center;
	gap: 6px;
	background: #ffffff;
	border: 1px solid rgba(119,106,200,0.15);
	border-radius: 20px;
	padding: 4px 12px 4px 4px;
}
.groupRosterIcon img {
	border-radius: 50%;
	display: block;
}
.groupRosterName {
	font-size: 0.9em;
	font-weight: 600;
	color: #1a1a2e;
}
.groupRosterAchieved {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #237355;
	display: inline-block;
}
.groupRosterNote {
	margin-top: 8px;
	font-size: 0.85em;
	color: #4a4a5e;
}
.groupBadgeDot {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: linear-gradient(108.07deg, #E3DEFF -5.2%, #c8bdf6 103.39%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
}
.standardButton.secondary {
	background: #ede9ff;
	color: var(--bia-accent);
}

/* =====================================================================
   COMMUNITY REDESIGN
   A clean, celebratory hub experience. Scoped under .communityRedesign so
   the rest of the site is untouched. Uses the site font (Inter Tight) with
   the redesign palette, soft gradient cards, generous radii, and pill
   controls. No uppercase, emoji, or border-left accents per house style.
   ===================================================================== */
/* Constrain the gradient .journeyContainer panel to the same width as the centered content
   column (.communityRedesign, max 680px) so the gradient doesn't sprawl past the content on
   wide screens. */
.journeyContainer.communityPanel {
	max-width: 680px;
	margin-left: auto;
	margin-right: auto;
}
/* The main community hub uses a clean white panel instead of the gradient, to keep the page
   feeling light. A soft shadow keeps it defined against the page background. */
.journeyContainer.communityHubPanel {
	background: #fff;
	box-shadow: 0 10px 30px rgba(53,44,99,0.06);
}

.communityRedesign {
	--cInk: #28253c;
	--cInkSoft: #3a3652;
	--cMuted: #5a5670;
	--cMuted2: #6b6880;
	--cFaint: #605c73;
	--cPurple: #6c5fc0; /* was #7a6cd6 (4.2-4.3:1 as text/with white text, under AA); #6c5fc0 passes */
	--cPurpleDeep: #6354c4;
	--cMint: #2e9173;
	--cMintBright: #4fb99a;
	--cCardShadow: 0 6px 22px rgba(53,44,99,0.07);
	--cCardShadowLg: 0 10px 30px rgba(53,44,99,0.10);
	--cLine: #ece8f2;
	--cOuterRadius: 26px;
	/* Accountability-groups dark panels: a deep green-to-purple gradient (replaces the old
	   flat dark purple). Still dark enough for white text and the light decorative accents. */
	--gGradient: linear-gradient(145deg, #167a64 0%, #3f3f96 55%, #5b46b4 100%);
	/* Light purple-to-green accent used on the hub Groups card, the Ask-a-question panels, and
	   the survey "more from the community" badges. */
	--gAccentLight: linear-gradient(150deg, #e3dcfb, #d3efe2);
	max-width: 680px;
	margin: 0 auto;
	/* No top padding: the sticky sub-header (or first element) rests flush against the top of the
	   rounded .journeyContainer panel. */
	padding: 0 16px 48px;
	color: var(--cInk);
	text-align: left;
}
.communityRedesign *,
.communityRedesign *::before,
.communityRedesign *::after {
	box-sizing: border-box;
}

/* ---- shared primitives ---- */
.cBtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: none;
	background: var(--cPurple);
	color: #fff;
	font-weight: 700;
	font-size: 1rem;
	padding: 14px 24px;
	border-radius: 15px;
	cursor: pointer;
	box-shadow: 0 8px 20px -6px rgba(122,108,214,0.6);
	transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.cBtn:hover { box-shadow: 0 10px 26px -6px rgba(122,108,214,0.75); }
.cBtn:active { transform: scale(0.98); }
.cBtn.full { width: 100%; }
.cBtn.disabled { opacity: 0.45; box-shadow: none; }
.cBtn.ghost {
	background: rgba(255,255,255,0.6);
	color: var(--cPurpleDeep);
	border: 1.5px solid rgba(122,108,214,0.4);
	box-shadow: none;
}
.cBtn.ghost:hover { background: rgba(255,255,255,0.85); }
.cCardLink { text-decoration: none; color: inherit; display: block; }

/* ---- hub ---- */
/* The title itself uses the site-wide .phaseTitle pattern (centered, 50px);
   only the supporting subtitle is styled here, centered to match. */
.cHubHero { text-align: center; }
.cHubSub {
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--cMuted);
	line-height: 1.45;
	margin: 0 auto;
	max-width: 460px;
}

.cProfileNudge {
	margin-top: 18px;
	border-radius: 20px;
	padding: 17px;
	background: linear-gradient(150deg, #ded5fb, #cfeede);
	display: flex;
	align-items: center;
	gap: 14px;
}
.cProfileNudge .cNudgeIcon {
	width: 46px; height: 46px; border-radius: 14px;
	background: rgba(255,255,255,0.6);
	display: flex; align-items: center; justify-content: center; flex: none;
}
.cProfileNudge .cNudgeText { flex: 1; min-width: 0; }
.cProfileNudge .cNudgeTitle { font-weight: 700; font-size: 1rem; color: var(--cInk); }
.cProfileNudge .cNudgeSub { font-weight: 500; font-size: 0.8rem; color: #4a4660; margin-top: 2px; }
.cProfileNudge .cBtn { padding: 10px 16px; font-size: 0.85rem; border-radius: 13px; flex: none; }

.cProfileStrip {
	margin-top: 18px;
	border-radius: 18px;
	padding: 14px 16px;
	background: #fff;
	box-shadow: var(--cCardShadow);
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: inherit;
	transition: transform 0.12s ease, box-shadow 0.2s ease;
}
.cProfileStrip:hover { transform: translateY(-2px); box-shadow: var(--cCardShadowLg); }
.cProfileStrip .cStripName { font-weight: 700; font-size: 0.98rem; color: var(--cInk); }
.cProfileStrip .cStripLink {
	font-weight: 600; font-size: 0.8rem; color: var(--cFaint);
	margin-top: 2px; display: inline-flex; align-items: center; gap: 5px;
}

.cCardGrid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-top: 20px;
}
.cNavCard {
	position: relative;
	overflow: hidden;
	border-radius: 22px;
	padding: 18px;
	min-height: 138px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	cursor: pointer;
	text-decoration: none;
	color: inherit;
	transition: transform 0.12s ease, box-shadow 0.2s ease;
}
.cNavCard:hover { transform: translateY(-3px); box-shadow: var(--cCardShadowLg); }
.cNavCard:active { transform: scale(0.98); }
.cNavCard.purple { background: linear-gradient(150deg, #ded5fb, #e8e2fb); }
.cNavCard.blue   { background: linear-gradient(150deg, #d3e6f0, #dceef5); }
.cNavCard.mint   { background: linear-gradient(150deg, #cfeede, #dbf3e8); }
.cNavCard.navy   { background: var(--gGradient); }
/* Light purple-to-green Groups card for the community hub (the dark gradient stays on the
   group pages themselves). Uses the standard light-card text/icon treatment. */
.cNavCard.groups { background: var(--gAccentLight); }
.cNavCard.groups .cNavMeta { color: #5a44b8; }
.cNavCard .cNavIcon {
	width: 42px; height: 42px; border-radius: 13px;
	background: rgba(255,255,255,0.55);
	display: flex; align-items: center; justify-content: center;
}
.cNavCard.navy .cNavIcon { background: rgba(255,255,255,0.14); }
.cNavCard .cNavTitle { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.3px; color: var(--cInk); }
.cNavCard .cNavMeta { font-size: 0.78rem; font-weight: 600; margin-top: 3px; color: var(--cPurpleDeep); }
.cNavCard.blue .cNavMeta { color: #2f6ca8; }
.cNavCard.mint .cNavMeta { color: var(--cMint); }
.cNavCard.navy .cNavTitle { color: #fff; }
.cNavCard.navy .cNavMeta { color: #cfc6f5; }
.cSoonBadge {
	position: absolute; top: 13px; right: 13px;
	font-size: 0.58rem; font-weight: 700; letter-spacing: 0.4px;
	color: #cfc6f5; background: rgba(255,255,255,0.16);
	padding: 4px 8px; border-radius: 7px;
}

.cTeaser {
	margin-top: 16px;
	border-radius: 22px;
	padding: 18px;
	background: #fff;
	box-shadow: var(--cCardShadow);
	cursor: pointer;
	transition: transform 0.12s ease, box-shadow 0.2s ease;
}
.cTeaser:hover { transform: translateY(-2px); box-shadow: var(--cCardShadowLg); }
.cTeaserHead {
	display: flex; align-items: center; justify-content: space-between;
	margin-bottom: 8px;
}
.cTeaserKicker { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.4px; color: var(--cPurpleDeep); }
.cTeaserCount { font-size: 0.72rem; font-weight: 600; color: var(--cFaint); }
.cTeaserBody { font-size: 1rem; font-weight: 600; color: var(--cInk); line-height: 1.35; }
.cTeaserCta { font-size: 0.82rem; font-weight: 700; color: var(--cPurpleDeep); margin-top: 11px; display: inline-flex; align-items: center; gap: 5px; }

/* ---- hub feed peek ---- */
.cHubFeed { margin-top: 22px; }
.cHubFeedCta { cursor: pointer; margin-top: 14px; }
.cHubFeedCta:hover { color: var(--cInk); }

/* ---- sub-view shell ---- */
.cView { animation: cPush 0.28s ease; }
@keyframes cPush { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: translateX(0); } }
.cSubHeader {
	position: sticky;
	top: 0;
	z-index: 6;
	margin: 0 -16px 4px;
	padding: 16px 16px 12px;
	background: rgba(255,255,255,0.9);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid #f0eef5;
	/* Round the top corners to sit cleanly inside the rounded .journeyContainer panel. */
	border-radius: var(--cOuterRadius) var(--cOuterRadius) 0 0;
	display: flex;
	align-items: center;
	gap: 12px;
}
.cBackBtn {
	width: 38px; height: 38px; border-radius: 50%;
	border: none; background: #f3f1fa; cursor: pointer; flex: none;
	display: flex; align-items: center; justify-content: center;
	transition: background 0.2s ease, transform 0.12s ease;
}
.cBackBtn:hover { background: #ece9fb; }
.cBackBtn:active { transform: scale(0.92); }
.cSubTitle { font-size: 1.2rem; font-weight: 800; letter-spacing: -0.4px; color: var(--cInk); }
.cViewBody { padding: 14px 0 8px; }

/* ---- feed ---- */
.cShareBtn { width: 100%; padding: 15px; font-size: 1rem; border-radius: 16px; }
.cChipRow {
	display: flex; gap: 8px; margin: 16px 0 14px;
	overflow-x: auto; padding-bottom: 2px;
}
.cChipRow::-webkit-scrollbar { height: 0; }
.cChip {
	flex: none;
	border: 1.5px solid var(--cLine);
	background: #fff;
	color: var(--cMuted);
	font-weight: 600; font-size: 0.85rem;
	padding: 9px 15px; border-radius: 13px;
	cursor: pointer; white-space: nowrap;
	transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.cChip:hover { border-color: var(--cPurple); color: var(--cPurpleDeep); }
.cChip.selected { background: #ede9fb; border-color: #ede9fb; color: var(--cPurpleDeep); }

/* ---- empty / helper states ---- */
.cEmptyNote { text-align: center; color: var(--cFaint); font-weight: 500; padding: 24px 8px; }
.cPanel {
	border-radius: 22px;
	padding: 22px;
	background: linear-gradient(150deg, #ede9fb, #def0e7);
	text-align: center;
}
.cPanel h3 { font-size: 1.2rem; font-weight: 800; letter-spacing: -0.3px; color: var(--cInk); margin: 0; }
.cPanel p { font-size: 0.85rem; font-weight: 500; color: var(--cMuted); line-height: 1.5; margin: 9px 0 16px; }

/* ---- card surface used by feed/qa/stories ---- */
.communityRedesign .postContainer,
.cSurface {
	display: block;
	width: 100%;
	background: #fff;
	border-radius: 22px;
	padding: 17px;
	margin: 0 0 13px;
	box-shadow: var(--cCardShadow);
	box-sizing: border-box;
}
.communityRedesign .postContainerOuter { max-width: none; min-width: 0; }
.communityRedesign .postWrapper { margin-bottom: 0; }
.communityRedesign .postFeedList { display: flex; flex-direction: column; gap: 13px; margin-top: 4px; }

/* feed post internals (restyled, ids/markup preserved) */
.communityRedesign .postTopRow { display: flex; align-items: center; gap: 11px; }
.communityRedesign .postTopRow .postIdentity { flex: 1; min-width: 0; }
.communityRedesign .postTime { font-size: 0.78rem; font-weight: 500; color: var(--cFaint); margin-top: 1px; display: block; }
.communityRedesign .postBody {
	font-size: 0.98rem; font-weight: 500; color: var(--cInkSoft);
	line-height: 1.5; margin-top: 12px;
}
/* The post title. h3 is the level the feed actually uses (it sits under the section's h2);
   h4 is kept because post.html defaults to it when no level is passed. Both are sized
   here so a batch can never render at the browser's default heading size. */
.communityRedesign .postBody h3,
.communityRedesign .postBody h4 { font-size: 1rem; font-weight: 600; color: var(--cInk); margin: 0; line-height: 1.4; }
.communityRedesign .postReactions {
	display: flex; gap: 8px; flex-wrap: wrap;
	margin: 15px 0 0; text-align: left;
}
.communityRedesign .postReaction {
	width: auto; height: auto; border-radius: 14px;
	padding: 8px 12px; margin: 0;
	display: inline-flex; align-items: center; gap: 6px;
	background: #f5f3fb;
}
.communityRedesign .postReaction:hover { background: #ede9fb; transform: translateY(-1px); }
.communityRedesign .postReaction.reacted { background: #ede9fb; }
.communityRedesign .postReaction img { height: 20px; width: 20px; display: block; }
.communityRedesign .postReaction .postReactionCount {
	position: static; float: none; margin: 0; top: 0; right: 0;
	height: auto; width: auto; border-radius: 0; background: none;
	font-size: 0.82rem; font-weight: 700; color: var(--cMuted2); line-height: 1;
}
.communityRedesign .postReaction .postReactionCount.withCount { background: none; }
.communityRedesign .postReaction.reacted .postReactionCount,
.communityRedesign .postReaction .postReactionCount.reacted { background: none; color: var(--cPurpleDeep); }

/* pill-style phobia tag inside redesign */
.communityRedesign .communityTag {
	font-size: 0.72rem; font-weight: 600;
	padding: 5px 11px; border-radius: 9px;
	color: #fff; vertical-align: middle;
}

/* ---- Q+A ---- */
.cSearchBar {
	display: flex; align-items: center; gap: 10px;
	background: #fff; border-radius: 16px; padding: 13px 16px;
	box-shadow: var(--cCardShadow); margin-bottom: 8px;
}
.cSearchBar input {
	border: none; outline: none; flex: 1; background: none;
	font-size: 0.95rem; font-weight: 500; color: var(--cInkSoft);
}
.cSearchBar .searchButton {
	border: none; background: none; cursor: pointer; color: var(--cFaint);
	display: flex; align-items: center; padding: 0;
}
.cSectionTitle { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.3px; color: var(--cInk); margin: 22px 0 12px; }
.communityRedesign .questionCard {
	display: block !important;
	background: #fff !important;
	border-radius: 20px !important;
	padding: 17px !important;
	margin: 0 0 11px !important;
	min-width: 0 !important; max-width: none !important; min-height: 0 !important;
	box-shadow: var(--cCardShadow);
	transition: transform 0.12s ease, box-shadow 0.2s ease;
}
.communityRedesign .questionCard:hover { transform: translateY(-2px); box-shadow: var(--cCardShadowLg); }
.communityRedesign .questionCardTitle h4 { font-size: 1rem; font-weight: 700; color: var(--cInk); line-height: 1.35; margin: 0 0 10px; }
.communityRedesign .questionCard .navSeperator { color: var(--cFaint); }
.communityRedesign .questionCard .qaCardMetaRow {
	display: flex; align-items: center; gap: 8px; margin-top: 10px;
	color: var(--cFaint); font-size: 0.8rem; font-weight: 500;
}

/* ---- Stories / survey ---- */
.communityRedesign .communityHighlight {
	margin: 0 0 16px; padding: 22px; max-width: none;
	border-radius: 24px; box-shadow: var(--cCardShadow);
}
.communityRedesign .communityHighlight h3 { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.3px; color: var(--cInk); margin: 0 0 12px; }
.communityRedesign .communityHighlight hr { border: none; border-top: 1px solid var(--cLine); margin: 12px 0; }

/* purple-to-green accent panel (Ask a question, etc.) */
.cAccentPanel { background: var(--gAccentLight); box-shadow: 0 4px 16px rgba(53,44,99,0.05); }

/* survey "more from the community" cards */
.cMoreList { display: flex; flex-direction: column; gap: 11px; }
.cMoreCard {
	display: flex; align-items: center; gap: 13px;
	border-radius: 20px; padding: 15px 16px; background: #fff;
	box-shadow: var(--cCardShadow); cursor: pointer;
	transition: transform 0.12s ease, box-shadow 0.2s ease;
}
.cMoreCard:hover { transform: translateY(-2px); box-shadow: var(--cCardShadowLg); }
.cMoreCard:active { transform: scale(0.99); }
.cMoreBadge {
	width: 46px; height: 46px; border-radius: 14px; flex: none;
	display: flex; align-items: center; justify-content: center;
	background: var(--gAccentLight); color: #5a44b8;
	font-size: 0.95rem; font-weight: 800;
}
.cMoreBadge svg { color: #5a44b8; }
.cMoreBody { flex: 1; min-width: 0; }
.cMoreQ { font-size: 0.92rem; font-weight: 700; color: var(--cInk); line-height: 1.3; }
.cMoreMeta { font-size: 0.78rem; font-weight: 500; color: var(--cFaint); margin-top: 3px; }
/* Center the survey submit / next buttons under the answer options. */
.communityRedesign .communityHighlight #surveySubmitButton,
.communityRedesign .communityHighlight #surveyNextButton {
	display: block;
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
}

/* Cue under the survey submit. Always occupies its line so toggling it (visibility, set in
   s_surveyInput) never shifts the button below it. */
.cSurveyHint {
	text-align: center;
	font-size: 0.82rem;
	color: var(--cFaint, #57556b);
	margin: 8px 0 0;
	min-height: 1.2em;
}

/* ---- create-post (quickpost) sheet styling kept simple ---- */
.communityRedesign .createPostContainer { margin: 0; }
/* The group discussion composer sits between the section heading and the posts, so unlike the
   feed's copy (flush under the view header) it needs room below it. */
.communityRedesign .gDiscussionCompose { margin: 0 0 20px; }
.communityRedesign .authorPostContainer {
	margin-top: 14px; background: #fff; border-radius: 20px;
	padding: 16px; box-shadow: var(--cCardShadow); text-align: left;
}
.communityRedesign .quickPost {
	display: flex; align-items: stretch; width: 100%;
	margin: 0 0 10px; border-radius: 16px; height: auto;
	box-shadow: none; border: 1.5px solid var(--cLine); overflow: hidden;
}
.communityRedesign .quickPost:hover { background: #f6f4fd; border-color: var(--cPurple); box-shadow: none; }
.communityRedesign .quickPostLeft { width: 10px; height: auto; border-radius: 0; background: var(--cPurple); }
.communityRedesign .quickPost .quickPostLeft img { display: none; }
.communityRedesign .quickPost > div:last-child {
	display: flex !important; align-items: center; width: auto !important;
	height: auto !important; padding: 14px 16px; margin-left: 0 !important;
}

/* ---- profile create/edit ---- */
.communityRedesign .newProfileFieldContainer {
	background: #fff; border-radius: 20px; padding: 18px; margin: 0 0 14px;
	box-shadow: var(--cCardShadow);
}
.communityRedesign .newProfileFieldContainer h4 { font-size: 0.95rem; font-weight: 700; color: var(--cInk); margin: 0 0 6px; }
.communityRedesign .profileIconOption {
	width: 58px; height: 58px; border-radius: 50%;
	border: 3px solid transparent; padding: 0;
	display: inline-flex; align-items: center; justify-content: center;
	transition: transform 0.12s ease;
}
.communityRedesign .profileIconOption img { border-radius: 50%; width: 46px; height: 46px; }
.communityRedesign .profileIconOption:hover { background: #f3f0fc; transform: scale(1.04); }
.communityRedesign .profileIconOption.selected { background: #f3f0fc; border-color: var(--cPurple); }
.communityRedesign .usernameOption {
	background: #f5f3fb; color: var(--cInkSoft); border-radius: 11px;
	padding: 8px 13px; margin: 3px; font-weight: 600; font-size: 0.85rem;
	border: 1.5px solid transparent;
}
.communityRedesign .usernameOption:hover { background: #ede9fb; color: var(--cPurpleDeep); }
.communityRedesign .usernameOption.selected { background: #ede9fb; border-color: var(--cPurple); color: var(--cPurpleDeep); }
.cProfileHeader {
	border-radius: 26px; padding: 24px; text-align: center;
	background: linear-gradient(150deg, #ded5fb, #cfeede); margin-bottom: 16px;
}
.cProfileAvatar {
	width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 12px;
	display: flex; align-items: center; justify-content: center;
	background: #fff; box-shadow: 0 8px 22px rgba(40,30,90,0.18); overflow: hidden;
}
.cProfileAvatar img { width: 84px; height: 84px; border-radius: 50%; display: block; }
.cProfileName { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.4px; color: var(--cInk); }

/* ---- groups directory ---- */
.communityRedesign .groupGrid { gap: 14px; }
.communityRedesign .groupTile {
	width: 100%; border: none; border-radius: 20px; padding: 18px;
	background: #fff; box-shadow: var(--cCardShadow);
	transition: transform 0.12s ease, box-shadow 0.2s ease;
}
.communityRedesign .groupTile:hover { transform: translateY(-2px); box-shadow: var(--cCardShadowLg); }
.communityRedesign .groupTileName { font-size: 1rem; }

/* page intro banner reused on profile/groups/about */
.cIntro {
	border-radius: 26px;
	padding: 24px 22px;
	background: linear-gradient(140deg, #ded5fb, #cfeede);
	margin-bottom: 18px;
}
.cIntro.dark { background: var(--gGradient); }
.cIntroTitle { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.6px; color: var(--cInk); margin: 0; line-height: 1.1; }
.cIntro.dark .cIntroTitle { color: #fff; }
.cIntroSub { font-size: 0.95rem; font-weight: 500; color: var(--cMuted); line-height: 1.45; margin: 8px 0 0; }
.cIntro.dark .cIntroSub { color: #d6cffb; }
/* Short muted intro line shown under the sub-header on standalone community pages. */
.cViewIntro { color: var(--cMuted); font-size: 0.95rem; font-weight: 500; line-height: 1.5; margin: 14px 0 6px; }

/* ---- Q&A pages rendered in the community look (organic + in-shell) ---- */
.communityRedesign .qaSearchRow { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; }
.communityRedesign .qaSearchRow .cSearchBar { flex: 1; margin-bottom: 0; }
.qaQuestionCard {
	background: #fff; border-radius: 24px; padding: 24px;
	box-shadow: var(--cCardShadow); margin-bottom: 16px;
}
.qaQuestionCard h1 { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.5px; color: var(--cInk); line-height: 1.2; margin: 0 0 10px; }
.qaQuestionCard .qaQuestionText { color: var(--cMuted); line-height: 1.55; margin: 0 0 8px; }
.qaMetaRow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.qaAnswerList { display: flex; flex-direction: column; gap: 13px; }
.qaAnswer {
	position: relative;
	background: #fff; border-radius: 20px; padding: 18px;
	box-shadow: var(--cCardShadow);
}
.qaAnswer.accepted { background: linear-gradient(150deg, #f1fbf7, #ffffff); }
.qaAnswerHead { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }
.qaAnswer .answer p { color: var(--cInkSoft); line-height: 1.55; margin: 0 0 10px; }
.qaAcceptedPill {
	display: inline-flex; align-items: center; gap: 6px;
	background: #e3f9f3; color: #237355;
	font-size: 0.72rem; font-weight: 700;
	padding: 5px 11px; border-radius: 9px;
}
/* vote control + meta chips, restyled within the community look */
.communityRedesign .answerOptionContainer {
	display: inline-flex; align-items: center; gap: 4px;
	color: var(--cMuted2); font-size: 0.82rem; font-weight: 600;
	vertical-align: middle; margin-right: 6px;
}
.communityRedesign .answerOptionContainer svg { width: 28px; height: 28px; cursor: pointer; color: var(--cFaint); }
.communityRedesign .answerOptionContainer svg:hover { color: var(--cPurple); }
.communityRedesign .answerOptionContainer .qTag,
.communityRedesign .answerOptionContainer.qTag {
	background: #f0eef6; color: var(--cMuted); border-radius: 9px;
	padding: 4px 11px; font-size: 0.72rem;
}
.communityRedesign .qaTagChip {
	background: #f0eef6; color: var(--cMuted); border-radius: 9px;
	padding: 4px 11px; font-size: 0.72rem; font-weight: 600;
}
/* phobia / tag filter pills */
.communityRedesign .resourceFilter {
	display: inline-flex; align-items: center;
	border: 1.5px solid var(--cLine); background: #fff; color: var(--cMuted);
	border-radius: 13px; padding: 8px 14px; margin: 0 8px 8px 0;
	font-weight: 600; font-size: 0.85rem; cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.communityRedesign .resourceFilter:hover { border-color: var(--cPurple); color: var(--cPurpleDeep); background: #f6f4fd; }

/* conversion nudge shown on every Q&A page */
.qaNudge {
	border-radius: 24px;
	padding: 24px;
	background: linear-gradient(150deg, #ded5fb, #cfeede);
	margin: 16px 0;
}
.qaNudgeKicker { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.4px; color: var(--cPurpleDeep); }
.qaNudgeTitle { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.4px; color: var(--cInk); margin: 8px 0 0; line-height: 1.15; }
.qaNudgeBody { font-size: 0.95rem; font-weight: 500; color: #4a4660; line-height: 1.5; margin: 9px 0 16px; max-width: 520px; }
.qaNudgeActions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

@media only screen and (max-width: 480px) {
	.communityRedesign { padding: 0 14px 40px; }
	.cNavCard { min-height: 124px; padding: 16px; }
	.qaQuestionCard { padding: 20px; }
	.qaQuestionCard h1 { font-size: 1.4rem; }
}

/* Community group create: goal-type toggle */
.groupTypeToggle {
	display: inline-flex;
	gap: 6px;
	margin-top: 6px;
}
.groupTypeOption {
	padding: 8px 16px;
	border-radius: 12px;
	background: #f0eeff;
	color: var(--bia-accent);
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}
.groupTypeOption.selected {
	background: var(--bia-accent);
	color: #ffffff;
}
.groupCohortHelp {
	font-size: 0.85em;
	color: #4a4a5e;
	margin: 4px 0 8px 0;
}

/* =====================================================================
   ACCOUNTABILITY GROUPS (community redesign)
   ===================================================================== */
@keyframes gSheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes gScrim { from { opacity: 0; } to { opacity: 1; } }
@keyframes gPop { 0% { transform: scale(0.6); opacity: 0; } 60% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }

/* dark intro / hero panel */
.gPanel {
	position: relative;
	overflow: hidden;
	border-radius: 22px;
	padding: 20px 22px;
	background: var(--gGradient);
}
.gPanel::after {
	content: "";
	position: absolute;
	right: -28px; top: -28px;
	width: 120px; height: 120px;
	border-radius: 50%;
	background: rgba(122,108,214,0.3);
}
.gPanel > * { position: relative; }
.gPanelTitle { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.3px; color: #fff; }
.gPanelSub { font-size: 0.85rem; font-weight: 500; color: #d6cffb; line-height: 1.45; margin-top: 5px; max-width: 280px; }
.gPanelKicker {
	display: inline-block; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.5px;
	color: #cfc6f5; background: rgba(255,255,255,0.13); padding: 5px 10px; border-radius: 8px;
}

/* invite-link button (dashed) */
.gInviteBtn {
	width: 100%; margin-top: 13px;
	border: 1.5px dashed #c7bff0; background: #faf9fd;
	border-radius: 16px; padding: 14px 16px; cursor: pointer;
	display: flex; align-items: center; gap: 12px; text-align: left;
	transition: background 0.2s ease, border-color 0.2s ease;
}
.gInviteBtn:hover { background: #f3f0fc; border-color: var(--cPurple); }
.gInviteIcon {
	width: 38px; height: 38px; border-radius: 11px; background: #ede9fb;
	display: flex; align-items: center; justify-content: center; flex: none;
}
.gInviteTitle { font-size: 0.92rem; font-weight: 700; color: var(--cInk); }
.gInviteSub { font-size: 0.78rem; font-weight: 500; color: #605c73; margin-top: 1px; }
.gInviteOpen { margin-top: 10px; display: none; }
.gInviteOpen.show { display: block; }

/* section headers */
.gSecHead { display: flex; align-items: baseline; justify-content: space-between; margin: 24px 0 12px; }
.gSecHead h3, .gSecTitle { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.3px; color: var(--cInk); margin: 0; }
.gSecCount { font-size: 0.8rem; font-weight: 600; color: #605c73; }

/* directory group cards */
.gList { display: flex; flex-direction: column; gap: 12px; }
.gCard {
	display: block; border-radius: 22px; padding: 17px; background: #fff;
	box-shadow: var(--cCardShadow); text-decoration: none; color: inherit;
	transition: transform 0.12s ease, box-shadow 0.2s ease;
}
.gCard:hover { transform: translateY(-2px); box-shadow: var(--cCardShadowLg); }
.gCardTop { display: flex; align-items: flex-start; gap: 13px; }
.gCardIcon {
	width: 46px; height: 46px; border-radius: 14px; flex: none;
	display: flex; align-items: center; justify-content: center;
	background: #ede9fb; color: var(--cPurpleDeep);
}
.gCardBody { flex: 1; min-width: 0; }
.gCardTitle { font-size: 1rem; font-weight: 700; color: var(--cInk); }
.gCardGoal { font-size: 0.8rem; font-weight: 500; color: #6b6880; margin-top: 2px; line-height: 1.4; }
.gCardFoot { display: flex; align-items: center; justify-content: space-between; margin-top: 13px; }
.gCardMembers { font-size: 0.78rem; font-weight: 600; color: #605c73; }
.gViewLink { display: inline-flex; align-items: center; gap: 5px; font-size: 0.82rem; font-weight: 700; color: var(--cPurpleDeep); }
.gStatusPill {
	font-size: 0.72rem; font-weight: 700; padding: 4px 10px; border-radius: 8px;
	background: #e3f9f3; color: #237355;
}
.gStatusPill.pending { background: #fdf3e3; color: #b07d1e; }
.gEmpty {
	border-radius: 20px; padding: 26px 20px; text-align: center;
	background: #faf9fd; border: 1.5px solid #efedf5;
	color: #6b6880; font-weight: 500; font-size: 0.9rem; line-height: 1.5;
}

/* detail: share button in the sub-header */
.cSubHeader .gShareBtn {
	margin-left: auto; width: 38px; height: 38px; border-radius: 50%;
	border: none; background: #ede9fb; cursor: pointer; flex: none;
	display: flex; align-items: center; justify-content: center;
	transition: background 0.2s ease, transform 0.12s ease;
}
.cSubHeader .gShareBtn:hover { background: #e3def9; }
.cSubHeader .gShareBtn:active { transform: scale(0.92); }

/* detail hero */
.gHero { margin-top: 16px; }
.gHeroTitle { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.5px; color: var(--cInk); margin: 0; line-height: 1.15; }
.gHeroDesc { font-size: 0.92rem; font-weight: 500; color: var(--cMuted); line-height: 1.5; margin: 8px 0 0; }
.gGoalPill {
	display: inline-flex; align-items: center; gap: 7px; margin-top: 13px;
	background: #ede9fb; padding: 8px 13px; border-radius: 11px;
	font-size: 0.85rem; font-weight: 700; color: var(--cPurpleDeep);
}

/* created banner */
.gCreatedBanner {
	display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
	border-radius: 16px; padding: 14px 16px;
	background: linear-gradient(135deg, #cfeede, #d3e6f0);
	animation: gPop 0.4s ease;
}
.gCreatedIcon { width: 36px; height: 36px; border-radius: 50%; background: #4fb99a; display: flex; align-items: center; justify-content: center; flex: none; }

/* aggregate dark progress card */
.gAggCard {
	position: relative; overflow: hidden; border-radius: 22px; padding: 20px;
	margin-top: 18px; background: var(--gGradient);
}
.gAggCard::after {
	content: ""; position: absolute; right: -30px; bottom: -34px;
	width: 130px; height: 130px; border-radius: 50%; background: rgba(122,108,214,0.28);
}
.gAggInner { position: relative; display: flex; align-items: center; gap: 18px; }
.gRing { position: relative; flex: none; }
.gRing .gRingPct {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	font-size: 1.25rem; font-weight: 800; color: #fff; line-height: 1;
}
.gAggKicker { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.4px; color: #cfc6f5; }
.gAggHeadline { font-size: 1.2rem; font-weight: 800; letter-spacing: -0.2px; color: #fff; margin-top: 4px; line-height: 1.2; }
.gAggSub { font-size: 0.8rem; font-weight: 500; color: #d6cffb; margin-top: 4px; }

/* your progress */
.gYouMet {
	position: relative; overflow: hidden; border-radius: 22px; padding: 21px 20px; margin-top: 13px;
	background: linear-gradient(135deg, #6d5ce0 0%, #8a5cd6 44%, #3fc4a6 100%);
	box-shadow: 0 16px 32px -12px rgba(109,92,224,0.6);
	display: flex; align-items: center; gap: 14px;
}
.gYouMetIcon { width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,0.22); display: flex; align-items: center; justify-content: center; flex: none; animation: gPop 0.45s ease; }
.gYouMetTitle { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.2px; color: #fff; }
.gYouMetSub { font-size: 0.82rem; font-weight: 600; color: rgba(255,255,255,0.9); margin-top: 3px; }
.gYouCard { border-radius: 22px; padding: 20px; background: #fff; box-shadow: var(--cCardShadow); margin-top: 13px; }
.gYouCardHead { display: flex; align-items: baseline; justify-content: space-between; }
.gYouCardTitle { font-size: 0.95rem; font-weight: 700; color: var(--cInk); }
.gYouCardVal { font-size: 0.9rem; font-weight: 700; color: var(--cPurpleDeep); }
.gBar { height: 12px; border-radius: 7px; background: #f0eef6; overflow: hidden; margin-top: 11px; }
.gBar > span { display: block; height: 100%; border-radius: 7px; background: linear-gradient(90deg, #7a6cd6, #9a86e8); }

/* member rows */
.gMemberList { display: flex; flex-direction: column; gap: 9px; }
.gMemberRow {
	display: flex; align-items: center; gap: 12px;
	background: #fff; border-radius: 16px; padding: 12px 14px;
	box-shadow: 0 4px 14px rgba(40,30,90,0.05);
}
.gMemberRow.met { background: linear-gradient(120deg, #f4f1fe 0%, #eaf7f2 100%); border: 1.5px solid #ddd5f7; box-shadow: none; }
.gMemberAvatarWrap { position: relative; flex: none; }
.gMemberAvatar {
	width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
	display: flex; align-items: center; justify-content: center; background: #ede9ff;
}
.gMemberAvatar img { width: 40px; height: 40px; display: block; border-radius: 50%; }
.gMetCheck {
	position: absolute; bottom: -2px; right: -2px; width: 19px; height: 19px; border-radius: 50%;
	background: linear-gradient(135deg, #3fc9a8, #2e9173); border: 2px solid #f4f1fe;
	display: flex; align-items: center; justify-content: center;
}
.gMemberName { font-size: 0.9rem; font-weight: 700; color: var(--cInk); }
.gMemberMeta { font-size: 0.78rem; font-weight: 600; color: #605c73; }
.gMemberMeta.met { color: #2e9173; }
.gMemberYou { font-size: 0.8rem; font-weight: 600; color: var(--cPurpleDeep); }
.gCountPill { font-size: 0.72rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, #7a6cd6, #3fc4a6); padding: 4px 10px; border-radius: 8px; }

/* leave */
.gLeaveBtn {
	width: 100%; margin-top: 22px; border: 1.5px solid #e6b6af; background: #fff;
	color: #c0392b; font-size: 0.92rem; font-weight: 700; padding: 14px; border-radius: 14px; cursor: pointer;
	transition: background 0.2s ease;
}
.gLeaveBtn:hover { background: #fdf6f5; }
.gLeaveNote { font-size: 0.74rem; font-weight: 500; color: #6b6880; text-align: center; margin-top: 9px; }

/* join consent */
.gConsent { border-radius: 16px; padding: 14px 16px; background: #ede9fb; margin: 14px 0; }
.gConsent strong { color: var(--cInk); font-weight: 700; }
.gConsent p { margin: 6px 0 0; font-size: 0.85rem; color: var(--cMuted); line-height: 1.5; }

/* create form */
.gFormCard { border-radius: 20px; padding: 18px; background: #fff; box-shadow: var(--cCardShadow); margin-top: 14px; }
.gFormCard:first-of-type { margin-top: 0; }
.gLabel { display: block; font-size: 0.88rem; font-weight: 700; color: var(--cInk); }
.gLabel.spaced { margin-top: 16px; }
.communityRedesign .gInput,
.communityRedesign .gSelect,
.communityRedesign .gTextarea {
	width: 100%; margin-top: 9px; border: 1.5px solid #e7e3f3; border-radius: 13px;
	padding: 13px; font-size: 0.95rem; font-weight: 600; color: var(--cInkSoft);
	font-family: inherit; outline: none; background: #faf9fd; box-sizing: border-box;
}
.communityRedesign .gTextarea { min-height: 76px; font-weight: 500; resize: none; }
/* Native selects ignore the page font and render the OS dropdown chrome, which looks off against
   the rest of the form. Drop the native appearance and supply our own caret. */
.communityRedesign .gSelect {
	-webkit-appearance: none; -moz-appearance: none; appearance: none;
	cursor: pointer; padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%237a7493' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 13px center;
}
.communityRedesign .gInput:focus,
.communityRedesign .gSelect:focus,
.communityRedesign .gTextarea:focus { border-color: var(--cPurple); }
.gSubTitle2 { font-size: 1rem; font-weight: 800; letter-spacing: -0.2px; color: var(--cInk); margin: 22px 0 11px; }

/* goal-type radio cards */
.gTypeCards { display: flex; flex-direction: column; gap: 10px; }
.gTypeCard {
	display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
	border: 2px solid var(--cLine); background: #fff; border-radius: 18px; padding: 15px; cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.gTypeCard:hover { border-color: #d8d0f3; }
.gTypeCard.selected { border-color: var(--cPurple); background: #f6f4fd; }
.gTypeIcon { width: 42px; height: 42px; border-radius: 12px; background: #ede9fb; color: var(--cPurpleDeep); display: flex; align-items: center; justify-content: center; flex: none; }
.gTypeBody { flex: 1; }
.gTypeTitle { font-size: 0.92rem; font-weight: 700; color: var(--cInk); }
.gTypeDesc { font-size: 0.78rem; font-weight: 500; color: #6b6880; margin-top: 2px; }
.gRadio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #d8d2ea; flex: none; display: flex; align-items: center; justify-content: center; }
.gTypeCard.selected .gRadio { border-color: var(--cPurple); }
.gTypeCard.selected .gRadio::after { content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--cPurple); }

/* end-goal picker: "Bia reports progress" note + recommended/search goal chips */
.gReportNote {
	display: flex; align-items: flex-start; gap: 8px;
	margin-top: 8px; padding: 11px 13px; background: #eafaf4; border-radius: 12px;
}
.gReportNote span { font-size: 0.8rem; font-weight: 500; color: #2e7d68; line-height: 1.45; }
.gGoalRecLabel { font-size: 0.8rem; font-weight: 700; color: var(--cMuted2); margin-top: 16px; }
.gGoalList { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.gGoalList:empty { margin-top: 0; }
.gGoalChip {
	display: inline-flex; align-items: center; gap: 7px;
	border: 1.5px solid var(--cLine); background: #fff; color: var(--cInkSoft);
	border-radius: 13px; padding: 10px 14px; font-size: 0.88rem; font-weight: 600; cursor: pointer;
	text-align: left; transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.gGoalChip:hover { border-color: var(--cPurple); background: #f6f4fd; }
.gGoalChip.selected { border-color: var(--cPurple); background: #ede9fb; color: var(--cPurpleDeep); }
.gGoalCheck { display: none; color: var(--cPurpleDeep); flex: none; }
.gGoalChip.selected .gGoalCheck { display: inline-flex; }
.gGoalEmpty { font-size: 0.85rem; font-weight: 500; color: var(--cFaint); margin-top: 10px; }

/* counter stepper */
.gStepper { display: flex; align-items: center; gap: 14px; margin-top: 13px; }
.gStepBtn {
	width: 42px; height: 42px; border-radius: 12px; border: 1.5px solid #e7e3f3; background: #faf9fd;
	cursor: pointer; display: flex; align-items: center; justify-content: center; flex: none; color: var(--cMuted);
	transition: background 0.15s ease, transform 0.1s ease;
}
.gStepBtn:hover { background: #f1eef9; }
.gStepBtn:active { transform: scale(0.92); }
.gStepVal { flex: 1; text-align: center; }
.gStepNum { font-size: 1.9rem; font-weight: 800; color: var(--cInk); line-height: 1; }
.gStepUnit { font-size: 0.72rem; font-weight: 600; color: #605c73; margin-top: 3px; }
.gWindowToggle { display: flex; background: #ece8f3; border-radius: 13px; padding: 4px; gap: 2px; margin-top: 16px; }
.gWindowToggle button {
	flex: 1; border: none; cursor: pointer; font-size: 0.85rem; font-weight: 700;
	color: var(--cMuted); background: none; padding: 9px 0; border-radius: 10px;
	transition: background 0.15s ease, color 0.15s ease;
}
.gWindowToggle button.selected { color: var(--cPurpleDeep); background: #fff; box-shadow: 0 2px 6px rgba(53,44,99,0.1); }

/* optional-settings collapsible */
.gAdvancedToggle {
	display: flex; align-items: center; justify-content: space-between; width: 100%;
	margin-top: 16px; padding: 14px 16px;
	border: 1.5px solid var(--cLine); background: #fff; border-radius: 14px; cursor: pointer;
	font-size: 0.9rem; font-weight: 700; color: var(--cInkSoft);
	transition: background 0.2s ease, border-color 0.2s ease;
}
.gAdvancedToggle:hover { background: #faf9fd; border-color: #d8d0f3; }
.gAdvancedToggle svg { color: var(--cFaint); transition: transform 0.2s ease; }
.gAdvancedToggle.open svg { transform: rotate(180deg); }
.gCreateFootNote { font-size: 0.78rem; font-weight: 500; color: var(--cFaint); line-height: 1.5; margin: 10px 0 0; }

/* preview + note */
.gPreview { border-radius: 20px; padding: 18px; background: linear-gradient(150deg, #ede9fb, #def0e7); margin-top: 16px; }
.gPreviewKicker { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.4px; color: #6b6880; }
.gPreviewInner { border-radius: 16px; padding: 15px; background: #fff; margin-top: 11px; box-shadow: 0 4px 14px rgba(40,30,90,0.06); }
.gPreviewTitle { font-size: 1rem; font-weight: 700; color: var(--cInk); }
.gPreviewDesc { font-size: 0.8rem; font-weight: 500; color: #6b6880; margin-top: 3px; line-height: 1.4; }
.gNote { display: flex; gap: 10px; margin-top: 16px; padding: 14px; background: #fdf6ec; border-radius: 14px; }
.gNote svg { flex: none; margin-top: 1px; }
.gNote span { font-size: 0.8rem; font-weight: 500; color: #8a6d2e; line-height: 1.45; }

/* share sheet */
.gScrim { position: fixed; inset: 0; background: rgba(28,24,46,0.5); z-index: 60; animation: gScrim 0.25s ease; }
.gSheet {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 61;
	background: #fff; border-radius: 28px 28px 0 0; padding: 22px 20px 26px;
	max-width: 680px; margin: 0 auto;
	animation: gSheetUp 0.3s cubic-bezier(0.2,0.9,0.3,1);
}
.gSheetGrab { width: 40px; height: 4px; border-radius: 2px; background: #e5e2ee; margin: 0 auto 16px; }
.gSheetTitle { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.3px; color: var(--cInk); margin: 0 0 4px; }
.gSheetSub { font-size: 0.85rem; font-weight: 500; color: #6b6880; margin: 0 0 16px; }
.gLinkRow {
	display: flex; align-items: center; gap: 10px; background: #faf9fd;
	border: 1.5px solid #e7e3f3; border-radius: 14px; padding: 13px 15px;
}
.gLinkRow input { flex: 1; border: none; outline: none; background: none; font-size: 0.85rem; font-weight: 600; color: var(--cMuted); text-overflow: ellipsis; }

@media only screen and (max-width: 480px) {
	.gHeroTitle { font-size: 1.35rem; }
	.gPanel { padding: 18px; }
}

/* ===================== Recovery Stories ===================== */
/* Gallery (sg*), builder (sb*), wrapped player (sw*). */

@keyframes sStoryFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sStoryRise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sStoryPop { 0% { transform: scale(0.6); opacity: 0; } 60% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } }
@keyframes sStoryGlow { 0%,100% { transform: scale(1); opacity: 0.45; } 50% { transform: scale(1.15); opacity: 0.75; } }
@keyframes sStorySheet { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes sStoryScrim { from { opacity: 0; } to { opacity: 1; } }

/* ---- Gallery ---- */
.sgHero { display: block; position: relative; overflow: hidden; border-radius: 24px; padding: 22px;
	margin-top: 14px; cursor: pointer; text-decoration: none;
	background: linear-gradient(135deg,#2c2746 0%,#6d5ce0 55%,#3fc4a6 130%); }
.sgHero:active { transform: scale(0.99); }
.sgHeroGlow { position: absolute; right: -24px; top: -30px; width: 130px; height: 130px; border-radius: 50%;
	background: rgba(255,255,255,0.14); animation: sStoryGlow 5s ease-in-out infinite; }
.sgHeroInner { position: relative; }
.sgHeroKicker { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.5px; color: rgba(255,255,255,0.85); }
.sgHeroTitle { font-size: 1.5rem; font-weight: 800; color: #fff; margin: 8px 0 6px; line-height: 1.12; letter-spacing: -0.4px; }
.sgHeroSub { font-size: 0.86rem; color: rgba(255,255,255,0.9); line-height: 1.45; max-width: 260px; }
.sgHeroBtn { display: inline-flex; align-items: center; gap: 8px; margin-top: 15px; background: #fff;
	color: #4b3f8a; font-weight: 700; font-size: 0.86rem; padding: 10px 16px; border-radius: 12px; }

.sgSecTitle { font-size: 1.1rem; font-weight: 700; color: #28253c; margin: 26px 0 12px; }
.sgSecHead { display: flex; align-items: baseline; justify-content: space-between; margin: 26px 0 13px; }
.sgSecCount { font-size: 0.8rem; font-weight: 600; color: #605c73; }

.sgMine { border-radius: 22px; padding: 16px; background: linear-gradient(135deg,#6d5ce0,#3fc4a6); }
.sgMineTop { display: flex; align-items: center; gap: 14px; cursor: pointer; }
.sgMinePlay { width: 50px; height: 50px; border-radius: 16px; background: rgba(255,255,255,0.92);
	display: flex; align-items: center; justify-content: center; flex: none; color: #6d5ce0; }
.sgMineText { flex: 1; min-width: 0; }
.sgMineName { font-size: 1.02rem; font-weight: 800; color: #fff; }
.sgMineTeaser { font-size: 0.8rem; font-weight: 600; color: rgba(255,255,255,0.85); margin-top: 2px; }
.sgMineActions { display: flex; gap: 8px; margin-top: 14px; }
.sgMineBtn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	border: none; background: rgba(255,255,255,0.22); color: #fff; font-weight: 700; font-size: 0.8rem;
	padding: 10px 8px; border-radius: 12px; cursor: pointer; }
.sgMineBtn:active { transform: scale(0.97); }
.sgMineBtn svg { flex: none; }

.sgGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.sgCard { position: relative; overflow: hidden; border-radius: 22px; padding: 16px; min-height: 188px;
	display: flex; flex-direction: column; justify-content: space-between; text-decoration: none; cursor: pointer; }
.sgCard:active { transform: scale(0.97); }
.sgCardGlow { position: absolute; right: -18px; bottom: -22px; width: 90px; height: 90px; border-radius: 50%;
	background: rgba(255,255,255,0.13); }
.sgCardHead { position: relative; display: flex; align-items: center; gap: 9px; }
.sgCardAvatar { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; background: rgba(255,255,255,0.92); flex: none; }
.sgCardAvatar img { display: block; margin: 2px; border-radius: 50%; }
.sgCardUser { font-size: 0.82rem; font-weight: 700; color: #fff; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sgCardBody { position: relative; }
.sgCardQuote { font-size: 1.18rem; font-weight: 800; color: #fff; line-height: 1.12; letter-spacing: -0.3px; }
.sgCardWatch { display: flex; align-items: center; gap: 5px; font-size: 0.72rem; font-weight: 700; color: #fff; margin-top: 11px; }
.sgGrad0 { background: linear-gradient(150deg,#6d5ce0,#3fc4a6); }
.sgGrad1 { background: linear-gradient(150deg,#c2503c,#e8896f); }
.sgGrad2 { background: linear-gradient(150deg,#8a5cd6,#c86fd0); }
.sgGrad3 { background: linear-gradient(150deg,#1f8f74,#3fc4a6); }
.sgGrad4 { background: linear-gradient(150deg,#4b3f8a,#6d5ce0); }
.sgGrad5 { background: linear-gradient(150deg,#3a3170,#8a5cd6); }
.sgEmpty { padding: 20px; text-align: center; color: #6b6880; background: #f7f5fc; border-radius: 16px; font-size: 0.9rem; }

/* ---- Builder ---- */
#storyBuilder { animation: sStoryFade 0.3s ease; }
.sbHead { display: flex; align-items: center; gap: 12px; padding: 10px 0 2px; }
.sbBack { width: 36px; height: 36px; border-radius: 50%; border: none; background: #f3f1fa; flex: none;
	display: flex; align-items: center; justify-content: center; cursor: pointer; }
.sbProgress { flex: 1; height: 7px; border-radius: 4px; background: #ece8f3; overflow: hidden; }
.sbProgressFill { height: 100%; border-radius: 4px; background: linear-gradient(90deg,#7a6cd6,#3fc4a6);
	transition: width 0.35s cubic-bezier(0.2,0.9,0.3,1); }
.sbCounter { font-size: 0.78rem; font-weight: 700; color: #605c73; flex: none; }
.sbBody { padding: 20px 2px 8px; animation: sStoryFade 0.3s ease; }
.sbKicker { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.4px; color: #7a6cd6; }
.sbTitle { font-size: 1.45rem; font-weight: 800; color: #28253c; margin: 8px 0 0; line-height: 1.16; letter-spacing: -0.4px; }
.sbSub { font-size: 0.88rem; color: #6b6880; margin: 9px 0 0; line-height: 1.45; }

.sbSlider { margin-top: 24px; text-align: center; }
.sbSliderVal { font-size: 3.4rem; font-weight: 800; color: #6354c4; line-height: 1; letter-spacing: -1.5px; }
.sbSliderUnit { font-size: 0.88rem; font-weight: 600; color: #605c73; margin-top: 4px; }
.sbRange { width: 100%; margin-top: 22px; height: 8px; cursor: pointer; accent-color: #7a6cd6; }
.sbMarks { display: flex; justify-content: space-between; gap: 6px; margin-top: 10px; }
.sbMark { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.sbMarkTick { width: 1.5px; height: 7px; background: #d4cfe2; }
.sbMark span:last-child { font-size: 0.68rem; font-weight: 600; color: #605c73; text-align: center; line-height: 1.25; }
.sbInsight { margin-top: 22px; border-radius: 16px; padding: 16px; text-align: left;
	background: linear-gradient(150deg,#ede9fb,#def0e7); font-size: 0.88rem; font-weight: 600; color: #4b3f8a; line-height: 1.5; }

.sbChips { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.sbChip { display: flex; align-items: center; gap: 13px; text-align: left; cursor: pointer;
	border: 2px solid #efedf5; background: #fff; border-radius: 15px; padding: 15px 16px; }
.sbChip:active { transform: scale(0.98); }
.sbChip span:first-child { flex: 1; font-size: 0.97rem; font-weight: 700; color: #28253c; }
.sbChip.selected { border-color: #7a6cd6; background: #f6f3fe; }
.sbChipCheck { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #d4cfe2; flex: none;
	display: flex; align-items: center; justify-content: center; color: transparent; }
.sbChip.selected .sbChipCheck { border-color: #7a6cd6; background: #7a6cd6; color: #fff; }

.sbFoot { padding: 18px 0 4px; }
.sbSkip { display: block; width: 100%; border: none; background: none; color: #605c73; font-size: 0.84rem;
	font-weight: 600; padding: 0 0 12px; cursor: pointer; text-align: center; }
.sbContinue { width: 100%; border: none; background: #6c5fc0; color: #fff; font-size: 1rem; font-weight: 700;
	padding: 16px; border-radius: 16px; cursor: pointer; box-shadow: 0 8px 20px -6px rgba(122,108,214,0.5); }
.sbContinue:active { transform: scale(0.98); }
.sbContinue.disabled { background: #c9c4dd; box-shadow: none; pointer-events: none; }

/* ---- Wrapped player ---- */
.swOverlay { position: fixed; inset: 0; z-index: 9000; }
.swCard { position: absolute; inset: 0; overflow: hidden; }
.swGlowA { position: absolute; right: -50px; top: 60px; width: 200px; height: 200px; border-radius: 50%;
	background: rgba(255,255,255,0.1); animation: sStoryGlow 6s ease-in-out infinite; }
.swGlowB { position: absolute; left: -40px; bottom: 120px; width: 150px; height: 150px; border-radius: 50%; background: rgba(255,255,255,0.08); }
.swSegs { position: absolute; top: 14px; left: 14px; right: 14px; display: flex; gap: 4px; z-index: 6; }
.swSeg { flex: 1; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.3); overflow: hidden; }
.swSegFill { height: 100%; border-radius: 2px; background: #fff; transition: width 0.3s ease; }
.swClose { position: absolute; top: 26px; right: 16px; width: 34px; height: 34px; border-radius: 50%; border: none;
	background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 7; }
.swTap { position: absolute; top: 0; bottom: 0; z-index: 4; cursor: pointer; }
.swTapPrev { left: 0; width: 32%; }
.swTapNext { right: 0; width: 68%; }
.swStage { position: absolute; inset: 0; padding: 60px 28px 40px; display: flex; flex-direction: column; z-index: 5; pointer-events: none; }
/* Center the slide content horizontally so it doesn't pin to the left edge on wide screens; text
   inside stays left-aligned. margin:auto absorbs both axes in this flex column (still vertically
   centered). */
.swBlock { margin: auto; width: 100%; max-width: 560px; }
.swMark { width: 56px; height: 56px; border-radius: 16px; background: rgba(255,255,255,0.92);
	display: flex; align-items: center; justify-content: center; animation: sStoryPop 0.5s ease; }
.swCoverKicker { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.6px; color: rgba(255,255,255,0.8); margin-top: 22px; animation: sStoryRise 0.5s ease both; animation-delay: 0.1s; }
.swCoverTitle { font-size: 2.7rem; font-weight: 800; color: #fff; line-height: 1.02; letter-spacing: -1px; margin-top: 10px; animation: sStoryRise 0.5s ease both; animation-delay: 0.2s; }
.swCoverSub { font-size: 0.95rem; color: rgba(255,255,255,0.88); margin-top: 16px; line-height: 1.5; animation: sStoryRise 0.5s ease both; animation-delay: 0.35s; }
.swHint { font-size: 0.8rem; font-weight: 600; color: rgba(255,255,255,0.7); margin-top: 26px; animation: sStoryFade 0.5s ease both; animation-delay: 0.6s; }
.swKicker { font-size: 1rem; font-weight: 600; color: rgba(255,255,255,0.85); line-height: 1.4; animation: sStoryRise 0.5s ease both; }
.swList { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }
.swListItem { display: flex; align-items: baseline; gap: 12px; animation: sStoryRise 0.5s ease both; }
.swDot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.9); flex: none; transform: translateY(-3px); }
.swListText { font-size: 1.5rem; font-weight: 800; color: #fff; line-height: 1.12; letter-spacing: -0.4px; }
.swEquiv { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
.swEquivItem { display: flex; align-items: center; gap: 14px; animation: sStoryRise 0.5s ease both; }
.swEquivIcon { width: 38px; height: 38px; border-radius: 11px; background: rgba(255,255,255,0.18); color: #fff;
	flex: none; display: flex; align-items: center; justify-content: center; }
.swEquivIcon svg { width: 22px; height: 22px; }
.swEquivText { font-size: 1.18rem; font-weight: 700; color: #fff; line-height: 1.2; }
.swBig { font-size: 5.4rem; font-weight: 800; color: #fff; line-height: 0.9; letter-spacing: -2.5px; margin: 10px 0 6px;
	animation: sStoryPop 0.6s ease both; animation-delay: 0.1s; }
.swBigUnit { font-size: 1.4rem; font-weight: 800; color: #fff; animation: sStoryRise 0.5s ease both; animation-delay: 0.2s; }
.swSub { font-size: 0.95rem; color: rgba(255,255,255,0.9); margin-top: 20px; line-height: 1.55; animation: sStoryRise 0.5s ease both; animation-delay: 0.4s; }
/* "Brave steps" moon slide: a starry sky behind a glowing moon, with the giant-leap line. */
.swMoonSky { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.swStar { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; opacity: 0.8;
	box-shadow: 0 0 6px 1px rgba(255,255,255,0.6); animation: swTwinkle 3.5s ease-in-out infinite; }
.swStar.s1 { top: 12%; left: 18%; animation-delay: 0s; }
.swStar.s2 { top: 20%; left: 78%; width: 2px; height: 2px; animation-delay: 0.6s; }
.swStar.s3 { top: 34%; left: 30%; width: 2px; height: 2px; animation-delay: 1.2s; }
.swStar.s4 { top: 16%; left: 55%; animation-delay: 1.8s; }
.swStar.s5 { top: 44%; left: 84%; width: 2px; height: 2px; animation-delay: 0.9s; }
.swStar.s6 { top: 9%; left: 40%; width: 2px; height: 2px; animation-delay: 2.4s; }
@keyframes swTwinkle { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.95; } }
.swMoonBlock { position: relative; z-index: 1; }
.swMoonDisc { position: relative; width: 104px; height: 104px; border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #fdfcf4 0%, #e7e3d2 45%, #b9b4a0 100%);
	box-shadow: 0 0 50px 8px rgba(231,227,210,0.4), inset -10px -10px 26px rgba(120,114,96,0.45);
	margin-bottom: 24px; animation: sStoryPop 0.6s ease both; }
.swCrater { position: absolute; border-radius: 50%; background: rgba(120,114,96,0.32); box-shadow: inset 1px 1px 2px rgba(90,84,68,0.4); }
.swCrater.c1 { width: 22px; height: 22px; top: 24px; left: 22px; }
.swCrater.c2 { width: 14px; height: 14px; top: 58px; left: 56px; }
.swCrater.c3 { width: 10px; height: 10px; top: 30px; left: 64px; }
.swMoonLine { font-size: 1.35rem; font-weight: 800; color: #fff; line-height: 1.25; letter-spacing: -0.3px;
	margin-top: 22px; animation: sStoryRise 0.5s ease both; animation-delay: 0.4s; }
.swQuoteMark { font-size: 4.5rem; font-weight: 800; color: rgba(255,255,255,0.35); line-height: 0.5; animation: sStoryPop 0.5s ease both; }
.swQuote { font-size: 2rem; font-weight: 800; color: #fff; line-height: 1.18; letter-spacing: -0.4px; margin-top: 14px; animation: sStoryRise 0.55s ease both; animation-delay: 0.12s; }
.swCloseTitle { font-size: 2.2rem; font-weight: 800; color: #fff; line-height: 1.1; letter-spacing: -0.6px; margin-top: 18px; animation: sStoryRise 0.5s ease both; animation-delay: 0.12s; }
.swCloseSub { font-size: 1rem; color: rgba(255,255,255,0.92); margin-top: 14px; line-height: 1.55; animation: sStoryRise 0.5s ease both; animation-delay: 0.3s; }
.swBlockInteractive { pointer-events: auto; }
.swCloseBtns { display: flex; flex-direction: column; gap: 10px; margin-top: 26px; animation: sStoryRise 0.5s ease both; animation-delay: 0.45s; }
.swBtnSolid { width: 100%; border: none; background: #fff; color: #2c2746; font-size: 0.98rem; font-weight: 700;
	padding: 15px; border-radius: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 9px; text-decoration: none; }
.swBtnSolid:active { transform: scale(0.98); }
.swBtnGhost { width: 100%; border: 1.5px solid rgba(255,255,255,0.5); background: transparent; color: #fff;
	font-size: 0.92rem; font-weight: 700; padding: 13px; border-radius: 15px; cursor: pointer; text-align: center; text-decoration: none; display: block; box-sizing: border-box; }
.swBtnGhost:active { transform: scale(0.98); }

/* ---- "Tap to continue" affordance (bottom-right of each story slide) ---- */
.swNextHint { position: absolute; right: 18px; bottom: 20px; z-index: 6; pointer-events: none;
	display: flex; align-items: center; gap: 5px; font-size: 0.82rem; font-weight: 700;
	color: rgba(255,255,255,0.8); animation: swNextPulse 2.2s ease-in-out infinite; }
.swNextHint svg { animation: swNextArrow 1.4s ease-in-out infinite; }
@keyframes swNextPulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@keyframes swNextArrow { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }

/* ---- "Generating your story" interstitial ---- */
.swGenCard { position: absolute; inset: 0; overflow: hidden; display: flex; align-items: center; justify-content: center;
	background: linear-gradient(160deg,#2c2746 0%,#4b3f8a 70%,#6d5ce0 130%); }
.swGenInner { position: relative; z-index: 1; text-align: center; padding: 0 30px; }
.swGenOrb { position: relative; width: 120px; height: 120px; margin: 0 auto 30px; }
.swGenCore { position: absolute; inset: 40px; border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #ffffff 0%, #cbbef5 100%);
	box-shadow: 0 0 40px 8px rgba(255,255,255,0.45); animation: swGenPulse 1.8s ease-in-out infinite; }
.swGenRing { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255,255,255,0.4);
	animation: swGenExpand 2.4s ease-out infinite; }
.swGenRing.r2 { animation-delay: 0.8s; }
.swGenRing.r3 { animation-delay: 1.6s; }
@keyframes swGenExpand { 0% { transform: scale(0.4); opacity: 0.85; } 100% { transform: scale(1.1); opacity: 0; } }
@keyframes swGenPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
.swGenTitle { font-size: 1.5rem; font-weight: 800; color: #fff; letter-spacing: -0.4px; }
.swGenLine { font-size: 0.95rem; font-weight: 600; color: rgba(255,255,255,0.82); margin-top: 12px; min-height: 1.3em; }
.swGenLine.swGenLineIn { animation: sStoryRise 0.4s ease both; }

/* ---- Share sheet ---- */
.swShareScrim { position: fixed; inset: 0; background: rgba(28,24,46,0.55); z-index: 9500; animation: sStoryScrim 0.25s ease; }
.swShareSheet { position: fixed; left: 0; right: 0; bottom: 0; background: #fff; border-radius: 28px 28px 0 0;
	padding: 22px 20px calc(26px + env(safe-area-inset-bottom)); z-index: 9600; animation: sStorySheet 0.3s cubic-bezier(0.2,0.9,0.3,1);
	max-width: 560px; margin: 0 auto; }
.swSheetHandle { width: 40px; height: 4px; border-radius: 2px; background: #e5e2ee; margin: 0 auto 16px; }
.swSheetTitle { font-size: 1.25rem; font-weight: 800; color: #28253c; margin: 0 0 4px; }
.swSheetSub { font-size: 0.8rem; color: #6b6880; margin: 0 0 16px; }
.swLinkRow { display: flex; align-items: center; gap: 10px; background: #faf9fd; border: 1.5px solid #e7e3f3;
	border-radius: 14px; padding: 13px 15px; }
.swLinkRow svg { flex: none; }
.swLinkText { flex: 1; font-size: 0.82rem; font-weight: 600; color: #5a5670; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.swCopyBtn { width: 100%; margin-top: 14px; border: none; background: #7a6cd6; color: #fff; font-size: 0.97rem;
	font-weight: 700; padding: 15px; border-radius: 15px; cursor: pointer; }
.swCopyBtn:active { transform: scale(0.98); }
.swCopyBtn.copied { background: #4fb99a; }

/* ---- Public landing fallback ---- */
.swLanding { padding: 24px 0; }
.swLandingCard { background: #f7f5fc; border-radius: 22px; padding: 26px; text-align: center; }
.swLandingTitle { font-size: 1.3rem; font-weight: 800; color: #28253c; }
.swLandingSub { font-size: 0.9rem; color: #6b6880; margin-top: 8px; line-height: 1.5; }
.swLandingLink { display: inline-block; margin-top: 14px; color: #6354c4; font-weight: 700; font-size: 0.9rem; }

@media only screen and (max-width: 480px) {
	.swStage { padding: 56px 22px 34px; }
	.swCoverTitle { font-size: 2.3rem; }
	.swBig { font-size: 4.4rem; }
	.swListText { font-size: 1.3rem; }
	.swCloseTitle { font-size: 1.9rem; }
}

/* ===================== Recovery Stories v2: one scene ===================== */
/* Deck + mountain + sky (.claude/specs/community-stories-v2.md). Later rules here override the v1
   rules above. Every new animation is switched off under reduced motion at the end of this block. */

@keyframes swFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes swDotIn { 0% { transform: scale(0); opacity: 0; } 70% { transform: scale(1.25); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes swFlagIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes swFanIn { from { opacity: 0; transform: translateY(120px) scale(0.8); } to { opacity: 1; transform: none; } }
@keyframes swArcIn { from { stroke-dashoffset: var(--full); } }
@keyframes swSunGlow { 0%, 100% { box-shadow: 0 0 60px 24px rgba(255,208,138,0.45); } 50% { box-shadow: 0 0 80px 34px rgba(255,208,138,0.6); } }
@keyframes swFloatUp { 0% { opacity: 0; transform: translate(0, 0) scale(0.6); } 12% { opacity: 1; transform: translate(0, -20px) scale(1.1); } 100% { opacity: 0; transform: translate(var(--drift), -260px) scale(0.9); } }
@keyframes swFloatFade { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }
@keyframes swReactPop { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes sgLineIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sbCollect { 0% { transform: rotateY(0deg); } 50% { transform: rotateY(90deg) scale(1.04); } 100% { transform: rotateY(0deg); } }
@keyframes sbChipPop { 0% { transform: scale(1); } 45% { transform: scale(1.03); } 100% { transform: scale(1); } }

/* ---- The mountain (shared: slides, builder, gallery, closing) ---- */
.swMtn { display: block; width: 100%; height: auto; overflow: visible; }
.swMtnClimb .swMtnDot { transform-box: fill-box; transform-origin: center; animation: swDotIn 0.5s cubic-bezier(0.34, 1.4, 0.64, 1) both; }
.swMtnClimb .swMtnFlag { animation: swFlagIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }

/* ---- Player scene: persistent sky behind every slide ---- */
.swCard { background: #0f1026; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.swOverlay { touch-action: pinch-zoom; }
.swScene { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.swSky { position: absolute; inset: 0; transition: opacity 1.2s ease; }
.swSkyNight { background: linear-gradient(180deg, #0f1026 0%, #1f1a3e 55%, #2c2654 100%); }
.swSkyDawn { background: linear-gradient(180deg, #1d1a44 0%, #3a2f74 50%, #6a4d9e 80%, #b56f95 100%); opacity: 0; }
.swSkyRise { background: linear-gradient(180deg, #1d1a4a 0%, #3f3588 45%, #6e52a8 70%, #d98c80 86%, #ffcf8a 100%); opacity: 0; }
.swSStars { position: absolute; inset: 0; transition: opacity 1.2s ease; }
.swSStar { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff;
	box-shadow: 0 0 5px 1px rgba(255,255,255,0.55); animation: swTwinkle 3.5s ease-in-out infinite; }
.swSStar.big { width: 3px; height: 3px; }
.swSun { position: absolute; left: 68%; bottom: 13%; width: 96px; height: 96px; border-radius: 50%; opacity: 0;
	background: radial-gradient(circle at 50% 45%, #fff6dc 0%, #ffe0a6 45%, #ffc47a 100%);
	transform: translate(-50%, 80%); transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 1.2s ease;
	animation: swSunGlow 4s ease-in-out infinite; }
.swRidge { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 18%; }
.swHost { position: absolute; inset: 0; z-index: 1; }
.swGlowA, .swGlowB { display: none; }
.swGenCard .swGlowA, .swGenCard .swGlowB { display: block; }

.swStage { padding: 70px 28px 104px; }
.swWho { position: absolute; top: 28px; left: 16px; right: 110px; z-index: 6; font-size: 0.82rem; font-weight: 700;
	color: rgba(255,255,255,0.92); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.swWhoCount { font-weight: 600; color: rgba(255,255,255,0.7); margin-left: 8px; }
.swPauseBtn { position: absolute; top: 26px; right: 58px; width: 34px; height: 34px; border-radius: 50%; border: none;
	background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 7; }
.swPauseBtn:focus-visible, .swClose:focus-visible, .swReactBtn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
/* Pausing stops the clock and the ambient sky only: entrance animations must still finish, or a
   slide reached while paused would stay at its invisible first frame. */
.swPaused .swSStar, .swPaused .swSun { animation-play-state: paused; }
.swHasReacts .swNextHint { bottom: 84px; }

/* ---- Per-slide visuals ---- */
.swVis { margin-top: 18px; animation: sStoryRise 0.5s ease both; animation-delay: 0.25s; }
.swVisCap { font-size: 0.8rem; font-weight: 600; color: rgba(255,255,255,0.78); margin-top: 8px; }
.swClock { position: relative; width: 104px; height: 104px; }
.swClockTrack { fill: none; stroke: rgba(255,255,255,0.18); stroke-width: 9; }
.swClockArc { fill: none; stroke: #ffc49a; stroke-width: 9; stroke-linecap: round; animation: swArcIn 1.4s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: 0.3s; }
.swClockPct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; font-weight: 800; color: #fff; }
.swYears { display: flex; flex-wrap: wrap; gap: 5px; max-width: 300px; }
.swYear { width: 16px; height: 16px; border-radius: 4px; background: rgba(255,255,255,0.85); animation: swDotIn 0.35s ease both; }
.swWeek { display: flex; flex-wrap: wrap; gap: 7px; max-width: 300px; }
.swMiss { width: 18px; height: 18px; border-radius: 50%; border: 2px dashed rgba(255,255,255,0.75); animation: swDotIn 0.35s ease both; }
.swStatic .swClockArc, .swStatic .swYear, .swStatic .swMiss { animation: none; }

/* ---- Deck slide: a fan of collected cards ---- */
.swFan { position: relative; height: 220px; margin: 22px 0 8px; display: flex; justify-content: center; }
.swFanCard { position: absolute; top: 10px; width: 128px; height: 176px; border-radius: 16px; background: #fff; overflow: hidden;
	border: none; padding: 0; margin: 0; font: inherit; text-align: left; cursor: pointer; pointer-events: auto;
	translate: var(--dx) var(--dy); rotate: var(--rot); scale: 1;
	transition: translate 0.35s cubic-bezier(0.22, 1, 0.36, 1), rotate 0.35s cubic-bezier(0.22, 1, 0.36, 1), scale 0.35s cubic-bezier(0.22, 1, 0.36, 1), filter 0.25s ease;
	box-shadow: 0 14px 30px -12px rgba(10,6,30,0.6); display: flex; flex-direction: column; transform-origin: 50% 110%;
	animation: swFanIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
.swFanCard:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
/* Lifted: straightened, pulled forward and up out of the fan; the rest step back. */
.swFanCard.lifted { translate: 0 -18px; rotate: 0deg; scale: 1.45; z-index: 60 !important;
	box-shadow: 0 24px 50px -16px rgba(10,6,30,0.75); }
/* Dim with a filter, not opacity: the fan-in animation's `both` fill holds opacity at 1. */
.swFan.hasLift .swFanCard:not(.lifted) { filter: brightness(0.55); translate: var(--fx) calc(var(--dy) + 14px); }
.swFanHint { text-align: center; font-size: 0.78rem; font-weight: 600; color: rgba(255,255,255,0.75); margin: 2px 0 12px; }
@media only screen and (min-width: 700px) {
	.swFan { height: 290px; }
	.swFanCard { width: 168px; height: 232px; }
	.swFanCard .swCardBand { height: 36px; }
	.swFanCard .swCardText { font-size: 0.98rem; padding: 12px 14px; }
	.swFanCard .swCardQuote { font-size: 1.15rem; }
	.swFanCard .swCardWho { font-size: 0.78rem; }
	.swFanCard.lifted { scale: 1.3; }
}
.swCardBand { display: flex; align-items: center; height: 30px; padding: 0 10px; flex: none; }
.swCardText { padding: 10px 11px; font-size: 0.8rem; font-weight: 700; color: #28253c; line-height: 1.28; }
.swDeckCount { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.swBigSm { font-size: 3.6rem; letter-spacing: -1.5px; margin: 0; }
/* Cards are <button>s, which do not stretch flex children like a div did: size them explicitly. */
.swCardBand { gap: 6px; width: 100%; box-sizing: border-box; }
.swFanCard .swCardText, .sbCard .swCardText { display: block; width: 100%; box-sizing: border-box; }
.swCardWho { font-size: 0.68rem; font-weight: 700; color: #fff; white-space: nowrap; }
.swCardQuote { font-size: 0.95rem; font-weight: 800; line-height: 1.22; }

/* ---- Climb slide: the /win/go mountain with their steps ---- */
.swClimbRow { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.swMtnWrap { max-width: 300px; margin: 8px auto 0; }
.swStepsList { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.swStepChip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px;
	background: rgba(255,255,255,0.14); color: #fff; font-size: 0.76rem; font-weight: 700; animation: sStoryRise 0.4s ease both; }
.swStepChip svg { color: #7fe0bd; flex: none; }
.swCloseMtn { width: 150px; animation: sStoryPop 0.6s ease both; }

/* ---- Timed reactions ---- */
.swReacts { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 8; display: flex; gap: 8px;
	padding: 6px; border-radius: 999px; background: rgba(15,12,40,0.45); pointer-events: auto; }
.swReactBtn { width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(255,255,255,0.12); cursor: pointer;
	display: flex; align-items: center; justify-content: center; padding: 0; }
.swReactBtn svg { width: 24px; height: 24px; }
.swReactBtn:hover { background: rgba(255,255,255,0.22); }
.swReactBtn.swReactPop { animation: swReactPop 0.35s ease; }
.swJoinReact { display: inline-block; padding: 10px 16px; border-radius: 999px; color: #fff; font-size: 0.86rem; font-weight: 700; text-decoration: underline; }
.swFloats { position: absolute; left: 0; right: 0; bottom: 70px; height: 300px; z-index: 7; pointer-events: none; overflow: hidden; }
.swFloat { position: absolute; bottom: 0; width: 30px; height: 30px; margin-left: -15px; animation: swFloatUp 2.8s ease-out forwards;
	filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3)); }
.swFloat.mine { width: 38px; height: 38px; margin-left: -19px; }
.swFloat svg { width: 100%; height: 100%; }

/* ---- Share sheet: image ---- */
.swImgArea { margin-top: 16px; padding-top: 14px; border-top: 1.5px solid #efedf5; text-align: center; }
.swImgBtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1.5px solid #d9d4ee; background: #fff;
	color: #4b3f8a; font-size: 0.92rem; font-weight: 700; padding: 12px 16px; border-radius: 14px; cursor: pointer; text-decoration: none; }
.swImgPreview { display: block; width: 150px; height: auto; margin: 0 auto 12px; border-radius: 14px; box-shadow: 0 10px 24px -12px rgba(40,30,90,0.5); }
.swImgBtns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* ---- Builder: live visuals, mountain, the deck ---- */
.sbVis { margin: 20px auto 0; display: flex; flex-direction: column; align-items: center; padding: 16px; border-radius: 16px;
	background: linear-gradient(170deg, #221d44, #3f3588); }
.sbVis .swVisCap { color: rgba(255,255,255,0.85); }
.sbMtn { max-width: 260px; margin: 18px auto 0; padding: 12px 12px 4px; border-radius: 18px; background: linear-gradient(180deg, #f3f0fd, #e6f5ee); }
.sbChip.selected { animation: sbChipPop 0.3s ease; }
.sbDeckHead { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.sbDeckStack { position: relative; width: 34px; height: 42px; flex: none; }
.sbDeckStack span { position: absolute; inset: 0; border-radius: 7px; background: #fff; border: 2px solid #c9c1ec; }
.sbDeckStack span:nth-child(1) { transform: rotate(-9deg); }
.sbDeckStack span:nth-child(2) { transform: rotate(5deg); border-color: #b3a9e4; }
.sbDeckStack span:nth-child(3) { background: #6354c4; border-color: #6354c4; }
.sbDeckCount { font-size: 0.95rem; font-weight: 800; color: #4b3f8a; }
.sbSuitTitle { font-size: 0.86rem; font-weight: 700; color: #4a4660; margin: 20px 0 9px; }
.sbDeck { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.sbCard { position: relative; display: flex; flex-direction: column; text-align: left; cursor: pointer; padding: 0; overflow: hidden;
	min-height: 112px; border-radius: 14px; border: 2px solid #ece9f5; background: #fff; }
.sbCard .swCardBand { height: 26px; }
.sbCard .swCardText { font-size: 0.84rem; }
.sbCard:active { transform: scale(0.97); }
.sbCard.collected { border-color: #6354c4; box-shadow: 0 8px 18px -10px rgba(99,84,196,0.6); animation: sbCollect 0.45s ease; }
.sbCardCheck { position: absolute; top: 5px; right: 6px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.85);
	display: flex; align-items: center; justify-content: center; color: transparent; }
.sbCard.collected .sbCardCheck { background: #fff; border-color: #fff; color: #4b3f8a; }

/* ---- Gallery: mini scenes ---- */
.sgCard { min-height: 238px; justify-content: flex-start; background: #1f1a3e; }
.sgCardGlow { display: none; }
.sgCardSky { position: absolute; inset: 0; background: linear-gradient(180deg, #0f1026 0%, #2c2654 100%); }
.sgSky-dawn .sgCardSky { background: linear-gradient(180deg, #1d1a44 0%, #3a2f74 55%, #8a5ca8 100%); }
.sgSky-rise .sgCardSky { background: linear-gradient(180deg, #1d1a4a 0%, #463a92 50%, #b87890 85%, #f2b37c 100%); }
.sgCardMtn { position: absolute; left: 8%; right: 8%; bottom: 30px; }
.sgCardBody { margin-top: 12px; }
.sgCardQuote { font-size: 1.05rem; min-height: 2.3em; }
.sgCardQuote.sgLineIn { animation: sgLineIn 0.45s ease both; }
.sgCardWatch { position: absolute; left: 14px; bottom: 10px; margin: 0; padding: 3px 9px; border-radius: 999px; background: rgba(15,12,40,0.55); }
.sgNew { margin-left: auto; flex: none; font-size: 0.68rem; font-weight: 800; color: #28253c; background: #ffd08a; padding: 2px 8px; border-radius: 999px; }
[data-story-ring].seen .sgNew { display: none; }
/* Seen vs unseen is carried by ring THICKNESS as well as color, and by the "New" pill on cards. */
.sgRing { box-sizing: border-box; padding: 3px; background: linear-gradient(135deg, #ffd08a, #b28cff 55%, #3fc4a6); }
[data-story-ring].seen .sgRing { padding: 1.5px; background: rgba(255,255,255,0.45); }
.sgCardAvatar.sgRing img { margin: 0; width: 100%; height: 100%; border-radius: 50%; background: #fff; }
.sgMine { position: relative; overflow: hidden; }
.sgMineMtn { position: absolute; right: -10px; top: -6px; width: 150px; opacity: 0.35; pointer-events: none; }
.sgMineTop, .sgMineActions { position: relative; }

/* ---- Community hub: story rings ---- */
.cStoryRing { margin-top: 18px; }
.cStoryRingHead { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.cStoryRingTitle { font-size: 1rem; font-weight: 700; color: #28253c; margin: 0; }
.cStoryRingAll { font-size: 0.84rem; font-weight: 700; color: #5a4bb8; }
.cStoryRingRow { display: flex; gap: 14px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: none; }
.cStoryRingRow::-webkit-scrollbar { display: none; }
.cStoryRingItem { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 66px; flex: none; text-decoration: none; }
.cStoryRingAvatar { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.cStoryRingItem.seen .cStoryRingAvatar { background: #cfcadf; }
.cStoryRingAvatar img { display: block; width: 100%; height: 100%; border-radius: 50%; background: #fff; border: 2px solid #fff; box-sizing: border-box; }
.cStoryRingName { font-size: 0.7rem; font-weight: 600; color: #4a4660; max-width: 66px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media only screen and (max-width: 480px) {
	.swStage { padding: 64px 22px 98px; }
	.swFan { height: 196px; }
	.swFanCard { width: 112px; height: 156px; }
	.swBigSm { font-size: 3rem; }
	.sbDeck { grid-template-columns: 1fr 1fr; }
}
@media only screen and (max-height: 700px) {
	.swMtnWrap { max-width: 220px; }
	.swStepsList { display: none; }
}

/* ---- Stories v2 polish: You too, share a card, sort, cover preview, deck-first ---- */
.swFanCard.shared { box-shadow: 0 0 0 3px #ffd08a, 0 14px 30px -12px rgba(10,6,30,0.6); }
.swYouToo { position: absolute; left: 9px; bottom: 9px; font-size: 0.66rem; font-weight: 800; color: #28253c;
	background: #ffd08a; padding: 2px 8px; border-radius: 999px; }
.swSharedLine { margin-top: 8px; font-size: 1rem; font-weight: 700; color: #ffd08a; animation: sStoryRise 0.5s ease both; animation-delay: 1.2s; }
.swCardShareBtn { pointer-events: auto; display: inline-flex; align-items: center; gap: 7px; border: none; cursor: pointer;
	background: #fff; color: #2c2746; font-size: 0.84rem; font-weight: 700; padding: 8px 14px; border-radius: 999px; }
.swCardShareBtn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.swImgPreviewSquare { width: 200px; }
.swCoverMeta { display: flex; align-items: center; gap: 12px; margin-top: 22px; animation: sStoryRise 0.5s ease both; animation-delay: 0.45s; }
.swCoverMtn { display: block; width: 84px; flex: none; }
.swCoverStack { position: relative; width: 28px; height: 36px; flex: none; }
.swCoverStack span { position: absolute; inset: 0; border-radius: 6px; background: #fff; border: 2px solid rgba(255,255,255,0.6); }
.swCoverStack span:nth-child(1) { transform: rotate(-10deg); opacity: 0.6; }
.swCoverStack span:nth-child(2) { transform: rotate(6deg); opacity: 0.8; }
.swCoverStack span:nth-child(3) { background: #6354c4; }
.swCoverMetaText { font-size: 0.95rem; font-weight: 700; color: rgba(255,255,255,0.92); }
.sgSort { display: flex; gap: 6px; margin: -2px 0 12px; }
.sgSort[hidden] { display: none; }
.sgSortBtn { border: 1.5px solid #d9d4ee; background: #fff; color: #4b3f8a; font-size: 0.8rem; font-weight: 700;
	padding: 6px 12px; border-radius: 999px; cursor: pointer; min-height: 32px; }
.sgSortBtn[aria-pressed="true"] { background: #4b3f8a; border-color: #4b3f8a; color: #fff; }
.sbShared { margin-top: 18px; }
.sbShared .sbCard { cursor: default; animation: sStoryRise 0.4s ease both; }
.sbContinueLink { display: block; box-sizing: border-box; text-align: center; text-decoration: none; }
.sbSkipAfter { padding: 14px 0 0; }

/* ---- Reduced motion: the app setting (html[data-a11y-motion=reduce], .swReduced) and the OS ---- */
.swReduced .swSky, .swReduced .swSStars, .swReduced .swSun { transition: none; }
.swReduced *, .swReduced .swSStar, .swReduced .swSun { animation: none !important; }
.swReduced .swFloat { animation: swFloatFade 2s ease forwards !important; }
.swReduced .swFanCard, html[data-a11y-motion="reduce"] .swFanCard { transition: none; }
html[data-a11y-motion="reduce"] .swSky, html[data-a11y-motion="reduce"] .swSStars, html[data-a11y-motion="reduce"] .swSun { transition: none; }
html[data-a11y-motion="reduce"] .swCard *, html[data-a11y-motion="reduce"] .sgCard *, html[data-a11y-motion="reduce"] #storyBuilder * { animation: none !important; }
html[data-a11y-motion="reduce"] .swFloat { animation: swFloatFade 2s ease forwards !important; }
@media (prefers-reduced-motion: reduce) {
	.swSky, .swSStars, .swSun { transition: none; }
	.swCard *, .sgCard *, #storyBuilder *, .sgHeroGlow { animation: none !important; }
	.swFloat { animation: swFloatFade 2s ease forwards !important; }
	.swFanCard { transition: none; }
}

/* Moderated text posts: details body + embedded comments + comment composer, matching the
   community redesign (scoped to .communityRedesign so the redesign tokens apply). */
/* A first-step note: a text post left from /win/go for people about to take their first
   exposure, marked so it reads as one in the feed. */
.postNoteBadge {
	display: inline-block; margin-bottom: 6px;
	font-size: 0.72rem; font-weight: 700;
	padding: 4px 10px; border-radius: 9px;
	background: #dff3ea; color: #1f7050;
}
.communityRedesign .postDetails {
	font-size: 0.88rem;
	color: var(--cMuted);
	line-height: 1.5;
	margin-top: 8px;
	white-space: pre-wrap;
}
.communityRedesign .postComments {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 18px;
}
.communityRedesign .postComment {
	background: #f4f2fc;
	border-radius: 14px;
	padding: 9px 13px;
	font-size: 0.85rem;
	color: var(--cInk);
	line-height: 1.45;
}
.communityRedesign .postCommentAuthor {
	font-weight: 700;
	color: var(--cPurpleDeep);
	margin-right: 6px;
}
.communityRedesign .postCommentCompose {
	margin-top: 16px;
}
.communityRedesign .postCommentBtn {
	width: auto; height: auto; border-radius: 14px;
	padding: 8px 12px;
	background: #f5f3fb;
	color: var(--cPurpleDeep);
}
.communityRedesign .postCommentBtn:hover { background: #ede9fb; transform: translateY(-1px); }
.communityRedesign .postCommentBtn .postCommentIcon { height: 20px; width: 20px; }
.communityRedesign .postActions {
	margin-top: 15px;
	margin-bottom: 0;
}
.communityRedesign .postActions .postReactions {
	margin: 0 0 0 auto;
}
.communityRedesign .postCommentCompose .cBtn {
	margin-top: 8px;
}
/* Reassuring "how we moderate" note (group create). Calm green, supportive, not a warning. */
.communityRedesign .gSafetyNote {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	background: #e9f7f1;
	border-radius: 14px;
	padding: 13px 15px;
	margin-top: 12px;
}
.communityRedesign .gSafetyNote svg { flex: none; margin-top: 1px; }
.communityRedesign .gSafetyNote span {
	font-size: 0.8rem;
	font-weight: 500;
	color: #2e6f5c;
	line-height: 1.45;
}