/* Intro card spacing (the white card itself is styled by the shared .charitable-title-card rules). */
.charitable-site-analysis .charitable-title-card { margin-bottom: 16px; }
.charitable-site-analysis .charitable-title-card-content h2 { margin-top: 20px; }
.charitable-site-analysis-disclosure { color: #757781; max-width: 760px; }
.charitable-site-analysis-actions { margin-top: 23px; margin-bottom: 0; }

/* ---- Score hero (PLACEHOLDER preview - static until the score backend lands) ---- */
.charitable-sa-score {
	display: flex;
	gap: 28px;
	align-items: flex-start;
	flex-wrap: wrap;
	margin: 18px 0 22px;
	padding: 20px 22px;
	border: 1px solid #e6e6eb;
	border-radius: 6px;
	background: #fafafb;
}
.charitable-sa-ring {
	position: relative;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	flex: none;
	display: grid;
	place-items: center;
}
.charitable-sa-ring--est { background: conic-gradient(#dba617 0 48%, #edeef0 48% 100%); }
.charitable-sa-ring::before { content: ""; position: absolute; width: 90px; height: 90px; border-radius: 50%; background: #fafafb; }
.charitable-sa-ring-v { position: relative; text-align: center; }
.charitable-sa-ring-v b { display: block; font-size: 30px; font-weight: 800; line-height: 1; color: #1d2327; }
.charitable-sa-ring-v s { font-size: 11px; color: #757781; text-decoration: none; }
.charitable-sa-score-meta { flex: 1; min-width: 280px; }
.charitable-sa-score-title { margin: 2px 0 6px; font-size: 16px; }
.charitable-sa-estpill {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: #757781;
	background: #fff;
	border: 1px solid #e6e6eb;
	border-radius: 20px;
	padding: 2px 9px;
	vertical-align: middle;
	margin-left: 6px;
}
.charitable-sa-score-desc { color: #757781; margin: 0 0 14px; max-width: 560px; }
.charitable-sa-dims { display: flex; gap: 18px; flex-wrap: wrap; }
.charitable-sa-dim { flex: 1; min-width: 120px; }
.charitable-sa-dim-n { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #757781; }
.charitable-sa-dim-bar { display: block; height: 7px; background: #edeef0; border-radius: 4px; margin-top: 6px; overflow: hidden; }
.charitable-sa-dim-bar i { display: block; height: 100%; }
.charitable-sa-dim--locked .charitable-sa-dim-bar { background: transparent; border: 1px dashed #c7cace; }
.charitable-sa-dim--locked .charitable-sa-dim-n { color: #aeb1b6; }
.charitable-sa-dim-hint { display: block; font-size: 10.5px; font-weight: 600; color: #3f7539; margin-top: 4px; }

/* "?" help icon + hover/focus tooltip beside each scored-area label. */
.charitable-sa-tip {
	display: inline-flex; align-items: center; justify-content: center;
	width: 14px; height: 14px; margin-left: 5px;
	border-radius: 50%; background: #c3c4c7; color: #fff;
	font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: 0;
	text-transform: none; cursor: help; position: relative; vertical-align: middle;
}
.charitable-sa-tip:hover, .charitable-sa-tip:focus { background: #757781; outline: none; }
.charitable-sa-tip::after {
	content: attr( data-tip );
	position: absolute; bottom: calc( 100% + 8px ); left: 50%; transform: translateX( -50% );
	width: 210px;
	background: #1d2327; color: #fff;
	text-transform: none; letter-spacing: 0; text-align: left;
	font-size: 12px; font-weight: 400; line-height: 1.4;
	padding: 8px 10px; border-radius: 4px; white-space: normal;
	opacity: 0; visibility: hidden; transition: opacity .12s ease; z-index: 100; pointer-events: none;
}
.charitable-sa-tip::before {
	content: ''; position: absolute; bottom: calc( 100% + 2px ); left: 50%; transform: translateX( -50% );
	border: 6px solid transparent; border-top-color: #1d2327;
	opacity: 0; visibility: hidden; transition: opacity .12s ease; z-index: 100; pointer-events: none;
}
.charitable-sa-tip:hover::after, .charitable-sa-tip:focus::after,
.charitable-sa-tip:hover::before, .charitable-sa-tip:focus::before { opacity: 1; visibility: visible; }

/* ---- Charitable-branded green buttons (brand green #5AA152, hover #3f7539) instead of WP blue. ---- */
.charitable-site-analysis .button-primary {
	background: #5AA152;
	border-color: #5AA152;
	color: #fff;
	border-radius: 5px;
	box-shadow: none;
	text-shadow: none;
}
.charitable-site-analysis .button-primary:hover,
.charitable-site-analysis .button-primary:focus {
	background: #3f7539;
	border-color: #3f7539;
	color: #fff;
	box-shadow: none;
}
.charitable-site-analysis .button-primary:disabled,
.charitable-site-analysis .button-primary[disabled] {
	background: #a7cba2 !important;
	border-color: #a7cba2 !important;
	color: #fff !important;
}

/* Per-recommendation CTA: solid orange (matches the "More Information" addon buttons), right-aligned. */
.charitable-sa-rec .button {
	flex: none;
	margin-left: auto;
	white-space: nowrap;
	color: #fff;
	background: #f99d33;
	border-color: #f99d33;
	border-radius: 5px;
	box-shadow: none;
	text-shadow: none;
	text-transform: capitalize;
	font-weight: 700;
}
.charitable-sa-rec .button:hover,
.charitable-sa-rec .button:focus {
	color: #fff;
	background: #ef8f1c;
	border-color: #ef8f1c;
	box-shadow: none;
}

/* Results render inside a white card (matching the other report tabs) only once populated. */
#charitable-site-analysis-results:not(:empty) {
	margin-top: 0;
	max-width: 900px;
}

.charitable-sa-group { margin: 0 0 24px; }
.charitable-sa-group:last-child { margin-bottom: 0; }
.charitable-sa-group h3 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: #757781; }
.charitable-sa-rec { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid #e6e6eb; border-radius: 5px; margin: 0 0 10px; background: #fbfbfc; max-width: 820px; }
.charitable-sa-loading { display: flex; align-items: center; gap: 8px; padding: 26px 4px; color: #50575e; font-size: 14px; }
.charitable-sa-loading .spinner { float: none; margin: 0; }
.charitable-sa-rec-icon { flex: none; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
.charitable-sa-rec-icon img { max-width: 40px; max-height: 40px; width: auto; height: auto; display: block; }
.charitable-sa-rec-icon--fa .fa { font-size: 22px; line-height: 1; color: #5AA152; }
.charitable-sa-rec-main { flex: 0 1 auto; min-width: 0; max-width: 550px; }
.charitable-sa-rec strong { display: block; font-size: 14px; color: #1d2327; text-transform: capitalize; }
.charitable-sa-rec .charitable-sa-gain { display: inline-block; font-size: 11px; font-weight: 700; color: #3f7539; background: #eaf4e8; border-radius: 3px; padding: 1px 6px; margin-left: 6px; vertical-align: middle; text-transform: none; }
.charitable-sa-rec .charitable-sa-detail { color: #757781; margin: 4px 0 0; }
.charitable-sa-rec .charitable-sa-after { color: #9a9da3; font-style: italic; }
.charitable-sa-more { font-size: 13px; font-weight: 600; color: #3f7539; cursor: pointer; margin: 2px 0 0; display: inline-block; }
.charitable-sa-more:hover { text-decoration: underline; }

/* Recommended-plan box: branded green accent. */
.charitable-sa-plan { padding: 18px 20px; border: 1px solid #5AA152; border-radius: 5px; background: #f3f8f2; max-width: 820px; margin-top: 4px; }
.charitable-sa-plan strong { font-size: 15px; color: #1d2327; }
.charitable-sa-plan > div { color: #757781; margin: 6px 0 4px; }
.charitable-site-analysis .charitable-sa-plan .button-primary { background: #f99d33; border-color: #f99d33; color: #fff; text-shadow: none; text-transform: capitalize; font-weight: 700; }
.charitable-site-analysis .charitable-sa-plan .button-primary:hover,
.charitable-site-analysis .charitable-sa-plan .button-primary:focus { background: #ef8f1c; border-color: #ef8f1c; color: #fff; }

/* Band pill (complete score) and live-hero top margin reset. */
.charitable-sa-band { display: inline-block; font-size: 12px; font-weight: 700; border-radius: 20px; padding: 2px 10px; color: #fff; vertical-align: middle; margin-left: 6px; text-transform: capitalize; }
.charitable-sa-score--live { margin-top: 0; margin-bottom: 18px; max-width: 820px; }
/* Once a live report renders, replace the pre-run explainer with the results, keeping only the headline. */
.charitable-site-analysis.charitable-sa-has-results .charitable-title-card-content > *:not( h2 ) { display: none; }

/* ---- Intro: flat (no card chrome) so the sample reads as a preview, not a live panel. ---- */
.charitable-site-analysis .charitable-title-card.charitable-container {
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
}

/* Larger, more legible disclosure + consent copy. */
.charitable-site-analysis .charitable-site-analysis-disclosure { font-size: 14.5px; line-height: 1.6; }
.charitable-site-analysis .charitable-site-analysis-consent { display: flex; align-items: center; gap: 12px; max-width: 900px; }

/* ---- Sample ("Example data") hero: blur the illustrative score and overlay a clear label. ---- */
.charitable-sa-ring--sample { background: conic-gradient( #5AA152 0 72%, #edeef0 72% 100% ); }
.charitable-sa-sample { position: relative; margin: 4px 0 22px; max-width: 900px; }
.charitable-sa-sample .charitable-sa-score { margin: 0; filter: blur( 2.5px ); opacity: .7; user-select: none; }
.charitable-sa-sample-badge {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	z-index: 2;
	background: rgba( 29, 35, 39, .9 );
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 10px 22px;
	border-radius: 6px;
	white-space: nowrap;
	box-shadow: 0 2px 12px rgba( 0, 0, 0, .18 );
}

/* ---- Pre-run explainer: "what you get" value list + send/never-send privacy columns. ---- */
.charitable-site-analysis-intro { font-size: 14.5px; line-height: 1.6; max-width: 900px; color: #3c434a; font-style: normal; }
.charitable-sa-value { max-width: 900px; margin: 2px 0 22px; }
.charitable-sa-value-title { margin: 0 0 10px; font-size: 15px; color: #1d2327; }
.charitable-sa-value ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.charitable-sa-value li { position: relative; padding-left: 26px; font-size: 14px; line-height: 1.5; color: #3c434a; }
.charitable-sa-value li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: #5AA152; font-weight: 700; }
.charitable-sa-value li strong { color: #1d2327; }

/* ---- The four scored areas as color-coded icon cards. ---- */
.charitable-sa-area-cards { display: grid; grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); gap: 12px; max-width: 900px; margin: 0 0 22px; }
@media screen and ( max-width: 1100px ) { .charitable-sa-area-cards { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } }
.charitable-sa-area-card { flex: 1 1 190px; min-width: 180px; background: #fff; border: 1px solid #e6e6eb; border-radius: 8px; padding: 16px 16px 18px; }
.charitable-sa-area-card .charitable-sa-area-icon { display: block; width: 44px; height: 44px; border-radius: 50%; margin-bottom: 12px; text-align: center; font-size: 20px; line-height: 44px; }
.charitable-sa-area-name { display: block; font-weight: 700; font-size: 14px; color: #1d2327; margin-bottom: 4px; }
.charitable-sa-area-desc { display: block; font-size: 13px; line-height: 1.5; color: #646970; }
.charitable-sa-area--activation .charitable-sa-area-icon { color: #3f7539; background: #eaf4e8; }
.charitable-sa-area--health .charitable-sa-area-icon { color: #1e5f8f; background: #e6f0f8; }
.charitable-sa-area--growth .charitable-sa-area-icon { color: #a86a00; background: #fbf1da; }
.charitable-sa-area--optimization .charitable-sa-area-icon { color: #6438b0; background: #efe8f9; }

.charitable-sa-privacy-note { font-size: 13px; color: #757781; margin: 6px 0 4px; max-width: 900px; }
/* The container floats/blocks card links at 23px; force this one to flow inline at the note's own size. */
.charitable-site-analysis .charitable-sa-privacy-note a,
.charitable-site-analysis .charitable-sa-toggle-label a { display: inline !important; float: none !important; font-size: inherit !important; line-height: inherit !important; color: #2271b1; text-decoration: underline; }
.charitable-site-analysis .charitable-sa-privacy-note a:hover,
.charitable-site-analysis .charitable-sa-toggle-label a:hover { text-decoration: underline; }

/* ---- Usage-data toggle (switch built from a checkbox). ---- */
.charitable-sa-toggle { position: relative; display: inline-flex; flex: none; cursor: pointer; }
.charitable-sa-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.charitable-sa-toggle-track { position: relative; flex: none; width: 40px; height: 22px; background: #c3c4c7; border-radius: 22px; transition: background .15s ease; }
.charitable-sa-toggle-thumb { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba( 0, 0, 0, .25 ); transition: transform .15s ease; }
.charitable-sa-toggle input:checked + .charitable-sa-toggle-track { background: #5AA152; }
.charitable-sa-toggle input:checked + .charitable-sa-toggle-track .charitable-sa-toggle-thumb { transform: translateX( 18px ); }
.charitable-sa-toggle input:focus-visible + .charitable-sa-toggle-track { box-shadow: 0 0 0 2px rgba( 90, 161, 82, .4 ); }
.charitable-sa-toggle-label { font-size: 14px; color: #3c434a; line-height: 1.45; }
.charitable-sa-toggle-label strong { color: #1d2327; }

/* "Last analyzed X ago" note next to the Refresh link. */
.charitable-sa-refresh-row { margin: 16px 0 0; }
.charitable-sa-analyzed { color: #757781; font-size: 13px; }
.charitable-sa-refresh-wait { color: #8c8f94; font-size: 13px; font-style: italic; }