/* SE Growth Capacity Scorecard — Structural styles only.
   Typography, colors, spacing, and base elements inherit from the SE theme.
   All values reference SE theme tokens where possible.

   Theme token reference:
   Font sizes: --font-size-xs(12) sm(14) sx(~13) ms(~16) md(18) ml(~20) lg(22) lx(~25) xl(28) xxl(34) xxxl(42)
   Spacing:    --spacing-xxs xs(8) sx(~12) sm(16) ms(~20) md(24) ml(~32) lg(40) lx(~52) xl(64)
   Buttons:    --button-border-radius(2rem) --button-font-weight(500) --button-text-transform(uppercase)
   Borders:    --se-border-radius(2rem) --se-border-radius-sm(8px) --se-border-radius-md(1rem)
*/

.se-gcs-wrap {
	max-width: var(--breakpoint-ml);
	margin: 0 auto;
	padding: var(--spacing-lg) 0 var(--spacing-xl);
}
.se-gcs-wrap * { box-sizing: border-box; }

/* Header */
.se-gcs-header-band { display: flex; justify-content: space-between; align-items: center; padding-bottom: var(--spacing-md); border-bottom: 1px solid currentColor; opacity: 0.2; margin-bottom: var(--spacing-lg); }
.se-gcs-logo-lockup { display: flex; align-items: center; gap: var(--spacing-sm); }
.se-gcs-saving { display: inline-block; font-size: var(--font-size-xs); letter-spacing: 1px; margin-left: var(--spacing-xs); opacity: 0; transition: opacity 0.3s; }
.se-gcs-saving.show { opacity: 1; }

/* The landing view is theme block content, so it takes the entry's own width rather than
   the narrower reading measure the quiz and results use. */
#se-gcs-landing { max-width: none; padding-left: 0; padding-right: 0; }
/* Resume banner leads the landing, so it needs breathing room under the page header */
#se-gcs-landing > .se-gcs-resume-banner { margin-top: var(--spacing-md); }

/* Resume button — blue outline, sits beside the start buttons for returning visitors.
   Written in the theme's button tokens so it inverts to solid blue on hover like the rest. */
.se-gcs-btn-resume {
	--button-background: transparent;
	--button-background-hover: var(--se-blue);
	--button-color: var(--se-blue);
	--button-color-hover: var(--se-white);
	--button-border: 2px solid var(--se-blue);
	--arrow: var(--arrow-blue);
	margin-left: var(--spacing-xs);
}
.se-gcs-btn-resume:hover { --arrow: var(--arrow-blue-hover); }

/* Start card — uses the theme's .se-card shell, so only spacing is set here */
.se-gcs-start-card { padding: var(--spacing-lg); text-align: center; }
.se-gcs-start-card .se-gcs-form-intro { margin-left: auto; margin-right: auto; }
@media (max-width: 768px) { .se-gcs-start-card { padding: var(--spacing-md) var(--spacing-ms); } }

/* Entry form */
.se-gcs-form-wrap { margin-top: var(--spacing-xl); background: var(--se-white); border: 1px solid rgba(0,0,0,0.1); border-left: 4px solid var(--se-orange); padding: var(--spacing-lg) var(--spacing-lg); max-width: 640px; }
/* #start is the anchor target for landing-page CTAs; keep the form clear of sticky headers */
#start { scroll-margin-top: var(--spacing-xl); }
/* The contact form is the last quiz step, so it sits inside the step body rather than alone on the page */
#se-gcs-content-root .se-gcs-form-wrap { margin-top: var(--spacing-md); max-width: none; }
.se-gcs-form-group { margin-bottom: var(--spacing-sm); }
.se-gcs-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-sm); }
.se-gcs-form-row .se-gcs-form-group { margin-bottom: var(--spacing-sm); }
@media (max-width: 480px) { .se-gcs-form-row { grid-template-columns: 1fr; gap: 0; } }
.se-gcs-form-group label { display: block; font-weight: 600; margin-bottom: 6px; font-size: var(--font-size-sm); }
.se-gcs-form-group input { width: 100%; padding: var(--spacing-sx) var(--spacing-sm); font-size: var(--font-size-ms); font-family: inherit; border: 1px solid rgba(0,0,0,0.15); transition: border-color 0.2s; }
.se-gcs-form-group input:focus { outline: none; border-color: var(--se-blue); }
.se-gcs-form-group input.se-gcs-error { border-color: var(--se-orange); background: var(--se-rating-limiting-bg); }
.se-gcs-form-error-msg { font-size: var(--font-size-xs); color: var(--se-orange); font-weight: 600; margin-top: var(--spacing-xxs); }
.se-gcs-field-hint { display: block; font-size: var(--font-size-xs); color: rgba(0,0,0,0.5); margin-top: var(--spacing-xxs); }
.se-gcs-required-note { font-size: var(--font-size-sx); color: rgba(0,0,0,0.5); margin-bottom: var(--spacing-ms); }
.se-gcs-form-submit { margin-top: var(--spacing-sx); }
.se-gcs-privacy-note { font-size: var(--font-size-xs); color: var(--se-gray); opacity: 0.7; margin-top: var(--spacing-ms); line-height: 1.5; }
.se-gcs-consent-group { margin-top: var(--spacing-ms); }
.se-gcs-consent-label { display: flex; align-items: flex-start; gap: var(--spacing-xs); cursor: pointer; }
.se-gcs-consent-label input[type="checkbox"] { flex: 0 0 auto; margin-top: 0.2em; }
.se-gcs-consent-text { font-size: var(--font-size-xs); color: var(--se-gray); opacity: 0.7; line-height: 1.5; }
.se-gcs-consent-text a { text-decoration: underline; }

/* Resume banner */
.se-gcs-resume-banner { background: rgba(34,101,163,0.05); border: 1px solid var(--se-blue); padding: var(--spacing-sm) var(--spacing-ms); margin-bottom: var(--spacing-md); font-size: var(--font-size-sm); display: flex; justify-content: space-between; align-items: center; gap: var(--spacing-sm); border-radius: var(--se-border-radius-sm); }
.se-gcs-resume-actions { display: flex; gap: var(--spacing-xs); flex-shrink: 0; }
.se-gcs-btn-small { --button-padding: var(--spacing-xs) var(--spacing-sm); --button-font-size: var(--font-size-xs); }

/* Progress bar */
.se-gcs-progress-wrap { margin-bottom: var(--spacing-md); }
.se-gcs-progress-label { display: flex; justify-content: space-between; font-size: var(--font-size-xs); letter-spacing: 1px; text-transform: uppercase; font-weight: 600; margin-bottom: var(--spacing-sx); }
/* 13 segments: twelve categories + the closing contact step */
.se-gcs-progress-bar { display: grid; grid-template-columns: repeat(13, 1fr); gap: 4px; height: 6px; }
.se-gcs-progress-seg { background: rgba(0,0,0,0.08); transition: background 0.3s; }
.se-gcs-progress-seg.done { background: var(--se-blue); }
.se-gcs-progress-seg.current { background: var(--se-light-blue); }

/* Statement blocks */
.se-gcs-statement-block { padding: var(--spacing-md) 0; border-bottom: 1px solid rgba(0,0,0,0.08); }
.se-gcs-statement-block:first-of-type { border-top: 1px solid rgba(0,0,0,0.15); }
.se-gcs-statement-text { font-size: var(--font-size-ml); line-height: 1.55; margin-bottom: var(--spacing-ms); max-width: 780px; }
.se-gcs-rating-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-sx); max-width: 640px; }
.se-gcs-rating-option { display: flex; flex-direction: column; align-items: center; padding: var(--spacing-sm) var(--spacing-sx); background: var(--se-white); border: 1px solid rgba(0,0,0,0.1); cursor: pointer; transition: all 0.15s; text-align: center; border-radius: var(--se-border-radius-sm); }
.se-gcs-rating-option:hover { border-color: var(--se-blue); }
.se-gcs-rating-option.selected { border-color: var(--se-blue); background: var(--se-blue); color: var(--se-white); }
.se-gcs-rating-option.selected .se-gcs-rating-num,
.se-gcs-rating-option.selected .se-gcs-rating-label { color: var(--se-white); }
.se-gcs-rating-label { font-size: var(--font-size-sm); letter-spacing: 1px; text-transform: uppercase; font-weight: 600; }

/* Unanswered flash */
.se-gcs-statement-block.unanswered.flash .se-gcs-rating-row { animation: se-gcs-flash 0.6s ease-in-out; }
.se-gcs-statement-block.unanswered.flash .se-gcs-statement-text { color: var(--se-orange); }
@keyframes se-gcs-flash { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

/* Nav footer — buttons use theme .button class */
.se-gcs-nav-footer { margin-top: var(--spacing-lg); padding-top: var(--spacing-md); border-top: 1px solid rgba(0,0,0,0.15); display: flex; justify-content: space-between; align-items: center; gap: var(--spacing-md); }
.se-gcs-back:disabled { opacity: 0.3; cursor: not-allowed; }

/* Results — Score section */
.se-gcs-score-section { padding: var(--spacing-lg) 0; border-top: 1px solid rgba(0,0,0,0.15); border-bottom: 1px solid rgba(0,0,0,0.15); margin-bottom: var(--spacing-xl); }
.se-gcs-score-section:first-of-type { border-top: none; }
.se-gcs-score-number { font-weight: 700; font-size: var(--font-size-xxxl); line-height: 1; letter-spacing: -2px; margin-bottom: var(--spacing-xs); }
.se-gcs-score-number sub { font-size: var(--font-size-xl); font-weight: 400; opacity: 0.5; vertical-align: baseline; }

/* Gauge */
.se-gcs-gauge { position: relative; height: 56px; max-width: 720px; }
.se-gcs-gauge-track { position: absolute; top: 12px; left: 0; right: 0; height: 8px; display: flex; }
.se-gcs-gauge-segment { flex: 1; opacity: 0.3; }
.se-gcs-gauge-segment:nth-child(1), .se-gcs-gauge-segment:nth-child(2) { background: var(--se-phase-doer); }
.se-gcs-gauge-segment:nth-child(3), .se-gcs-gauge-segment:nth-child(4) { background: var(--se-phase-builder); }
.se-gcs-gauge-segment:nth-child(5), .se-gcs-gauge-segment:nth-child(6) { background: var(--se-phase-architect); }
.se-gcs-gauge-segment.active { opacity: 1; }
.se-gcs-gauge-marker { position: absolute; top: 2px; width: 2px; height: 28px; background: var(--se-orange); transform: translateX(-50%); }
.se-gcs-gauge-marker::before { content: ''; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid var(--se-orange); }
.se-gcs-gauge-labels { position: absolute; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-between; font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }

/* Category breakdown */
.se-gcs-category-list { display: flex; flex-direction: column; gap: 2px; }
.se-gcs-category-row { display: grid; grid-template-columns: 240px 1fr 180px; align-items: center; gap: var(--spacing-md); padding: var(--spacing-sm) 0; border-bottom: 1px solid rgba(0,0,0,0.06); }
.se-gcs-category-bar-wrap { position: relative; height: 10px; background: rgba(0,0,0,0.06); }
.se-gcs-category-bar { position: absolute; top: 0; left: 0; bottom: 0; }
.se-gcs-category-bar.strong { background: var(--se-green); }
.se-gcs-category-bar.developing { background: var(--se-blue); }
.se-gcs-category-bar.limiting { background: var(--se-orange); }
.se-gcs-category-right { display: flex; justify-content: flex-end; align-items: center; gap: var(--spacing-sm); }
.se-gcs-category-score { font-weight: 700; font-size: var(--font-size-sm); font-variant-numeric: tabular-nums; }
.se-gcs-of { opacity: 0.5; font-weight: 400; }
.se-gcs-rating-pill { display: inline-block; font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 3px 8px; border-radius: 2px; }
.se-gcs-rating-strong { background: var(--se-rating-strong-bg); color: var(--se-rating-strong-text); }
.se-gcs-rating-developing { background: var(--se-rating-developing-bg); color: var(--se-rating-developing-text); }
.se-gcs-rating-limiting { background: var(--se-rating-limiting-bg); color: var(--se-rating-limiting-text); }

/* Results — Narrative blocks (labels use theme .preheading class for typography) */
.se-gcs-narrative-block { margin-bottom: var(--spacing-md); }
.se-gcs-narrative-label { margin-bottom: var(--spacing-xxs); margin-top: 0; }
.se-gcs-narrative-body { font-size: var(--font-size-ms); line-height: 1.65; color: var(--se-gray); max-width: 720px; }

/* Priority cards */
.se-gcs-priorities-section { margin-top: var(--spacing-xl); }
.se-gcs-priority-card { padding: var(--spacing-ml) var(--spacing-lg); background: var(--se-white); border: 1px solid rgba(0,0,0,0.08); border-left: 4px solid var(--se-orange); margin-bottom: var(--spacing-ms); }
.se-gcs-priority-header { display: flex; align-items: baseline; gap: var(--spacing-sm); margin-bottom: var(--spacing-sm); flex-wrap: wrap; }
.se-gcs-priority-number { font-weight: 700; font-size: var(--font-size-xl); letter-spacing: -0.3px; color: var(--se-orange); }
.se-gcs-priority-title { font-weight: 700; font-size: var(--font-size-xl); letter-spacing: -0.3px; }
.se-gcs-priority-meta { display: flex; align-items: center; gap: var(--spacing-xs); }
.se-gcs-priority-score { font-size: var(--font-size-sm); color: var(--se-gray); font-weight: 600; font-variant-numeric: tabular-nums; }
.se-gcs-priority-headline { font-size: var(--font-size-ms); line-height: 1.6; font-style: italic; margin-bottom: var(--spacing-md); max-width: 760px; opacity: 0.7; }
.se-gcs-steps-label { margin-top: 0; margin-bottom: var(--spacing-sx); }
.se-gcs-tools-label { margin-top: 0; margin-bottom: var(--spacing-xs); }
.se-gcs-steps-list { list-style: none; margin-bottom: var(--spacing-md); padding: 0; }
.se-gcs-steps-list li { position: relative; padding: var(--spacing-xxs) 0 var(--spacing-xxs) var(--spacing-ms); font-size: var(--font-size-ms); line-height: 1.55; }
.se-gcs-steps-list li::before { content: ''; position: absolute; left: 0; top: 14px; width: 7px; height: 7px; border-radius: 50%; background: var(--se-blue); }

/* Phase banner — Option B: stacked card with accent border */
.se-gcs-phase-banner { padding: var(--spacing-ms) var(--spacing-md); margin-bottom: var(--spacing-md); border-left: 4px solid var(--se-blue); background: var(--se-alt, #FBFAF8); }
.se-gcs-phase-label { font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--se-gray); opacity: 0.5; margin-bottom: 6px; }
.se-gcs-phase-result-line { display: flex; align-items: baseline; gap: var(--spacing-sm); }
.se-gcs-phase-result { font-size: var(--font-size-xl); font-weight: 700; color: var(--se-blue); }
.se-gcs-phase-count { font-size: var(--font-size-sm); color: var(--se-gray); opacity: 0.4; }

/* Actions bar (Download PDF + Start Over) */
.se-gcs-actions-bar { display: flex; justify-content: space-between; align-items: center; margin-top: var(--spacing-xl); padding-top: var(--spacing-md); border-top: 1px solid rgba(0,0,0,0.08); }
.se-gcs-pdf-download { text-align: left; }
.se-gcs-restart-link { all: unset; cursor: pointer; font-family: inherit; font-size: var(--font-size-sm); color: var(--se-gray); opacity: 0.5; text-decoration: underline; transition: color 0.2s, opacity 0.2s; }
.se-gcs-restart-link:hover { color: var(--se-orange); opacity: 1; --button-border: none; text-decoration: underline; }

/* CTA */
.se-gcs-cta-section { margin-top: var(--spacing-xl); }
.se-gcs-cta-section .se-gcs-cta-button { margin-top: var(--spacing-md); }
.se-gcs-cta-reassurance { margin-top: var(--spacing-ms); font-size: var(--font-size-ms); max-width: 680px; line-height: 1.55; }

/* Highlight — inherits from theme's <hi> element.
   The plugin uses <hi> tags which get the organic marker effect
   from the theme's hi-highlight system. No custom highlight styles needed. */

/* Utility */
.se-gcs-loading { padding: var(--spacing-xl) var(--spacing-lg); text-align: center; opacity: 0.5; }
.se-gcs-error-box { background: var(--se-rating-limiting-bg); color: var(--se-rating-limiting-text); border-radius: var(--se-border-radius-sm); padding: var(--spacing-md); margin: var(--spacing-lg) 0; }

/* Responsive */
@media (max-width: 768px) {
	.se-gcs-wrap { padding: var(--spacing-md) var(--spacing-sm) var(--spacing-lg); }
	.se-gcs-category-row { grid-template-columns: 1fr; gap: var(--spacing-xs); }
	.se-gcs-form-wrap { padding: var(--spacing-md) var(--spacing-ms); }
	.se-gcs-nav-footer { flex-wrap: wrap; }
	.se-gcs-priority-card { padding: var(--spacing-md) var(--spacing-ms); }
	.se-gcs-phase-banner { padding: var(--spacing-sm) var(--spacing-ms); }
	.se-gcs-phase-result { font-size: var(--font-size-lg); }
	.se-gcs-score-number { font-size: var(--font-size-xxl); }
	.se-gcs-score-section { padding: var(--spacing-md) 0; }
	.se-gcs-gauge { max-width: 100%; }
	.se-gcs-priority-header { gap: var(--spacing-xs); }
	.se-gcs-priority-number { font-size: var(--font-size-lg); }
	.se-gcs-priority-title { font-size: var(--font-size-lg); }
	.se-gcs-resume-banner { flex-direction: column; align-items: flex-start; }
	.se-gcs-actions-bar { flex-wrap: wrap; gap: var(--spacing-sm); }
}