/* =============================================================================
   SSB DESIGN SYSTEM — section_schemes.css
   =============================================================================
   Two-layer CSS design system for public site sections.
   Layer 1: Site layout (container, spacing, grid) — reads --site-* and --space-* vars
   Layer 2: Colour schemes (6 schemes × 5 variable groups) — reads --section-*, --card-*, etc.

   Templates use ssb-* classes that read from both layers.
   One model field change (e.g. container_width: "wide") affects all 17 section templates.
   ============================================================================= */


/* =============================================================================
   LAYER 1: SITE LAYOUT COMPONENTS
   Theme-controlled, scheme-independent
   ============================================================================= */

.ssb-container {
    max-width: var(--site-container-width, 80rem);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--site-container-padding-x, 1rem);
    padding-right: var(--site-container-padding-x, 1rem);
}

/* Content width modifiers */
.ssb-content-full { width: 100%; }
.ssb-content-prose { max-width: var(--content-prose, 65ch); }
.ssb-content-medium { max-width: var(--content-medium, 48rem); }
.ssb-content-narrow { max-width: var(--content-narrow, 36rem); }
.ssb-content-center { margin-left: auto; margin-right: auto; }

/* Section vertical spacing */
.ssb-section-spacing {
    padding-top: var(--space-section, 4rem);
    padding-bottom: var(--space-section, 4rem);
}
@media (min-width: 1024px) {
    .ssb-section-spacing {
        padding-top: var(--space-section-lg, 6rem);
        padding-bottom: var(--space-section-lg, 6rem);
    }
}

/* Header internal spacing */
.ssb-header-gap > * + * { margin-top: var(--header-gap, 1rem); }

/* Structural spacing between regions */
.ssb-header-to-content { margin-top: var(--header-to-content, 2.5rem); }
.ssb-content-to-footer { margin-top: var(--content-to-footer, 4rem); }

/* Grid gap utilities */
.ssb-gap-sm { gap: var(--grid-gap-sm, 1rem); }
.ssb-gap-md { gap: var(--grid-gap-md, 1.5rem); }
.ssb-gap-lg { gap: var(--grid-gap-lg, 2.5rem); }
.ssb-gap-lg-responsive {
    gap: var(--grid-gap-lg, 2.5rem);
}
@media (min-width: 1024px) {
    .ssb-gap-lg-responsive {
        gap: var(--grid-gap-xl, 4rem);
    }
}

/* Responsive grid system */
.ssb-grid { display: grid; }
.ssb-grid-2,
.ssb-grid-3,
.ssb-grid-4,
.ssb-grid-5 { grid-template-columns: 1fr; }

@media (min-width: 640px) {
    .ssb-grid-2 { grid-template-columns: repeat(2, 1fr); }
    .ssb-grid-3 { grid-template-columns: repeat(2, 1fr); }
    .ssb-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .ssb-grid-5 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .ssb-grid-3 { grid-template-columns: repeat(3, 1fr); }
    .ssb-grid-4 { grid-template-columns: repeat(4, 1fr); }
    .ssb-grid-5 { grid-template-columns: repeat(5, 1fr); }
}


/* =============================================================================
   LAYER 2: COLOUR SCHEME DEFINITIONS
   6 schemes × 5 variable groups
   ============================================================================= */

/* ----- Group 1: Section ----- */
/* 8 vars: bg, heading, subheading, eyebrow, text, text-muted, border, divider */

.scheme-default {
    --section-bg: #ffffff;
    --section-heading: #111827;
    --section-subheading: #6b7280;
    --section-eyebrow: var(--site-primary-color, #3b82f6);
    --section-text: #374151;
    --section-text-muted: #9ca3af;
    --section-border: #e5e7eb;
    --section-divider: #f3f4f6;
}

.scheme-light {
    --section-bg: #f9fafb;
    --section-heading: #111827;
    --section-subheading: #6b7280;
    --section-eyebrow: var(--site-primary-color, #3b82f6);
    --section-text: #374151;
    --section-text-muted: #9ca3af;
    --section-border: #e5e7eb;
    --section-divider: #e5e7eb;
}

.scheme-dark {
    --section-bg: #1f2937;
    --section-heading: #ffffff;
    --section-subheading: #d1d5db;
    --section-eyebrow: var(--site-tertiary-color, #8b5cf6);
    --section-text: #e5e7eb;
    --section-text-muted: #9ca3af;
    --section-border: #374151;
    --section-divider: #374151;
}

.scheme-primary {
    --section-bg: #eff6ff;
    --section-heading: #111827;
    --section-subheading: #6b7280;
    --section-eyebrow: var(--site-primary-color, #3b82f6);
    --section-text: #374151;
    --section-text-muted: #9ca3af;
    --section-border: #dbeafe;
    --section-divider: #dbeafe;
}

.scheme-primary-bold {
    --section-bg: var(--site-primary-color, #3b82f6);
    --section-heading: #ffffff;
    --section-subheading: rgba(255,255,255,0.85);
    --section-eyebrow: rgba(255,255,255,0.9);
    --section-text: rgba(255,255,255,0.9);
    --section-text-muted: rgba(255,255,255,0.7);
    --section-border: rgba(255,255,255,0.2);
    --section-divider: rgba(255,255,255,0.15);
}

.scheme-surface {
    --section-bg: #f3f4f6;
    --section-heading: #111827;
    --section-subheading: #6b7280;
    --section-eyebrow: var(--site-secondary-color, #374151);
    --section-text: #374151;
    --section-text-muted: #9ca3af;
    --section-border: #e5e7eb;
    --section-divider: #d1d5db;
}


/* ----- Group 2: Card ----- */
/* 13 vars per scheme */

.scheme-default, .scheme-light, .scheme-primary, .scheme-surface {
    --card-bg: #ffffff;
    --card-border: #e5e7eb;
    --card-shadow: 0 1px 3px rgba(0,0,0,0.1);
    --card-hover-shadow: 0 4px 12px rgba(0,0,0,0.1);
    --card-radius: 0.75rem;
    --card-heading: #111827;
    --card-text: #4b5563;
    --card-text-muted: #9ca3af;
    --card-link: var(--site-primary-color, #3b82f6);
    --card-divider: #f3f4f6;
    --card-badge-bg: #f3f4f6;
    --card-badge-text: #374151;
    --card-image-overlay: rgba(0,0,0,0.05);
}

.scheme-dark {
    --card-bg: rgba(255,255,255,0.08);
    --card-border: rgba(255,255,255,0.12);
    --card-shadow: 0 1px 3px rgba(0,0,0,0.3);
    --card-hover-shadow: 0 4px 12px rgba(0,0,0,0.4);
    --card-radius: 0.75rem;
    --card-heading: #ffffff;
    --card-text: #d1d5db;
    --card-text-muted: #9ca3af;
    --card-link: #93c5fd;
    --card-divider: rgba(255,255,255,0.1);
    --card-badge-bg: rgba(255,255,255,0.15);
    --card-badge-text: #e5e7eb;
    --card-image-overlay: rgba(0,0,0,0.2);
}

.scheme-primary-bold {
    --card-bg: rgba(255,255,255,0.12);
    --card-border: rgba(255,255,255,0.15);
    --card-shadow: 0 1px 3px rgba(0,0,0,0.2);
    --card-hover-shadow: 0 4px 12px rgba(0,0,0,0.3);
    --card-radius: 0.75rem;
    --card-heading: #ffffff;
    --card-text: rgba(255,255,255,0.9);
    --card-text-muted: rgba(255,255,255,0.7);
    --card-link: #ffffff;
    --card-divider: rgba(255,255,255,0.1);
    --card-badge-bg: rgba(255,255,255,0.2);
    --card-badge-text: #ffffff;
    --card-image-overlay: rgba(0,0,0,0.15);
}


/* ----- Group 3: Button ----- */
/* 3 roles × 2 styles × 4 props = ~24 vars per scheme */

/* Default / Light / Surface / Primary — brand buttons on light backgrounds */
.scheme-default, .scheme-light, .scheme-surface, .scheme-primary {
    /* Primary solid */
    --btn-primary-bg: var(--site-primary-color, #3b82f6);
    --btn-primary-text: #ffffff;
    --btn-primary-border: var(--site-primary-color, #3b82f6);
    --btn-primary-hover-bg: var(--site-primary-color, #3b82f6);
    /* Primary outline */
    --btn-primary-outline-bg: transparent;
    --btn-primary-outline-text: var(--site-primary-color, #3b82f6);
    --btn-primary-outline-border: var(--site-primary-color, #3b82f6);
    --btn-primary-outline-hover-bg: rgba(59,130,246,0.08);
    /* Secondary solid */
    --btn-secondary-bg: #1f2937;
    --btn-secondary-text: #ffffff;
    --btn-secondary-border: #1f2937;
    --btn-secondary-hover-bg: #111827;
    /* Secondary outline */
    --btn-secondary-outline-bg: transparent;
    --btn-secondary-outline-text: #1f2937;
    --btn-secondary-outline-border: #1f2937;
    --btn-secondary-outline-hover-bg: rgba(31,41,55,0.06);
    /* Accent solid */
    --btn-accent-bg: var(--site-tertiary-color, #8b5cf6);
    --btn-accent-text: #ffffff;
    --btn-accent-border: var(--site-tertiary-color, #8b5cf6);
    --btn-accent-hover-bg: var(--site-tertiary-color, #8b5cf6);
    /* Accent outline */
    --btn-accent-outline-bg: transparent;
    --btn-accent-outline-text: var(--site-tertiary-color, #8b5cf6);
    --btn-accent-outline-border: var(--site-tertiary-color, #8b5cf6);
    --btn-accent-outline-hover-bg: rgba(139,92,246,0.08);
}

/* Dark — inverted: primary = white bg, dark text */
.scheme-dark {
    --btn-primary-bg: #ffffff;
    --btn-primary-text: #1f2937;
    --btn-primary-border: #ffffff;
    --btn-primary-hover-bg: #f3f4f6;
    --btn-primary-outline-bg: transparent;
    --btn-primary-outline-text: #ffffff;
    --btn-primary-outline-border: rgba(255,255,255,0.5);
    --btn-primary-outline-hover-bg: rgba(255,255,255,0.1);
    --btn-secondary-bg: var(--site-primary-color, #3b82f6);
    --btn-secondary-text: #ffffff;
    --btn-secondary-border: var(--site-primary-color, #3b82f6);
    --btn-secondary-hover-bg: var(--site-primary-color, #3b82f6);
    --btn-secondary-outline-bg: transparent;
    --btn-secondary-outline-text: rgba(255,255,255,0.9);
    --btn-secondary-outline-border: rgba(255,255,255,0.3);
    --btn-secondary-outline-hover-bg: rgba(255,255,255,0.08);
    --btn-accent-bg: var(--site-tertiary-color, #8b5cf6);
    --btn-accent-text: #ffffff;
    --btn-accent-border: var(--site-tertiary-color, #8b5cf6);
    --btn-accent-hover-bg: var(--site-tertiary-color, #8b5cf6);
    --btn-accent-outline-bg: transparent;
    --btn-accent-outline-text: var(--site-tertiary-color, #8b5cf6);
    --btn-accent-outline-border: var(--site-tertiary-color, #8b5cf6);
    --btn-accent-outline-hover-bg: rgba(139,92,246,0.15);
}

/* Primary-bold — inverted: primary = white bg, brand text */
.scheme-primary-bold {
    --btn-primary-bg: #ffffff;
    --btn-primary-text: var(--site-primary-color, #3b82f6);
    --btn-primary-border: #ffffff;
    --btn-primary-hover-bg: #f3f4f6;
    --btn-primary-outline-bg: transparent;
    --btn-primary-outline-text: #ffffff;
    --btn-primary-outline-border: rgba(255,255,255,0.6);
    --btn-primary-outline-hover-bg: rgba(255,255,255,0.12);
    --btn-secondary-bg: rgba(255,255,255,0.18);
    --btn-secondary-text: #ffffff;
    --btn-secondary-border: rgba(255,255,255,0.18);
    --btn-secondary-hover-bg: rgba(255,255,255,0.25);
    --btn-secondary-outline-bg: transparent;
    --btn-secondary-outline-text: #ffffff;
    --btn-secondary-outline-border: rgba(255,255,255,0.35);
    --btn-secondary-outline-hover-bg: rgba(255,255,255,0.1);
    --btn-accent-bg: var(--site-tertiary-color, #8b5cf6);
    --btn-accent-text: #ffffff;
    --btn-accent-border: var(--site-tertiary-color, #8b5cf6);
    --btn-accent-hover-bg: var(--site-tertiary-color, #8b5cf6);
    --btn-accent-outline-bg: transparent;
    --btn-accent-outline-text: #ffffff;
    --btn-accent-outline-border: rgba(255,255,255,0.5);
    --btn-accent-outline-hover-bg: rgba(255,255,255,0.1);
}


/* ----- Group 4: Input ----- */
/* 10 vars per scheme */

.scheme-default, .scheme-light, .scheme-primary, .scheme-surface {
    --input-bg: #ffffff;
    --input-border: #d1d5db;
    --input-text: #111827;
    --input-placeholder: #9ca3af;
    --input-focus-ring: var(--site-primary-color, #3b82f6);
    --input-focus-ring-alpha: rgba(59,130,246,0.2);
    --input-label: #374151;
    --input-help: #6b7280;
    --input-error: #dc2626;
    --input-error-bg: #fef2f2;
}

.scheme-dark {
    --input-bg: rgba(255,255,255,0.08);
    --input-border: rgba(255,255,255,0.2);
    --input-text: #ffffff;
    --input-placeholder: rgba(255,255,255,0.5);
    --input-focus-ring: #93c5fd;
    --input-focus-ring-alpha: rgba(147,197,253,0.3);
    --input-label: #e5e7eb;
    --input-help: #9ca3af;
    --input-error: #fca5a5;
    --input-error-bg: rgba(220,38,38,0.15);
}

.scheme-primary-bold {
    --input-bg: rgba(255,255,255,0.12);
    --input-border: rgba(255,255,255,0.25);
    --input-text: #ffffff;
    --input-placeholder: rgba(255,255,255,0.5);
    --input-focus-ring: #ffffff;
    --input-focus-ring-alpha: rgba(255,255,255,0.3);
    --input-label: rgba(255,255,255,0.9);
    --input-help: rgba(255,255,255,0.7);
    --input-error: #fca5a5;
    --input-error-bg: rgba(220,38,38,0.2);
}


/* ----- Group 5: Link ----- */
/* 4 vars per scheme */

.scheme-default, .scheme-light, .scheme-primary, .scheme-surface {
    --link-color: var(--site-primary-color, #3b82f6);
    --link-hover: var(--site-primary-color, #3b82f6);
    --link-underline: currentColor;
    --link-visited: var(--site-primary-color, #3b82f6);
}

.scheme-dark {
    --link-color: #93c5fd;
    --link-hover: #bfdbfe;
    --link-underline: currentColor;
    --link-visited: #a5b4fc;
}

.scheme-primary-bold {
    --link-color: #ffffff;
    --link-hover: rgba(255,255,255,0.85);
    --link-underline: rgba(255,255,255,0.5);
    --link-visited: rgba(255,255,255,0.9);
}


/* ----- Group 9: Stat (for about.html stat numbers and labels) ----- */
.scheme-default, .scheme-light, .scheme-primary, .scheme-surface {
    --stat-value: var(--site-primary-color, #3b82f6);
    --stat-label: #6b7280;
}
.scheme-dark {
    --stat-value: var(--site-tertiary-color, #8b5cf6);
    --stat-label: #9ca3af;
}
.scheme-primary-bold {
    --stat-value: #ffffff;
    --stat-label: rgba(255,255,255,0.8);
}
.ssb-stat-value {
    color: var(--stat-value, var(--section-eyebrow));
}
.ssb-stat-label {
    color: var(--stat-label, var(--section-text-muted));
}


/* =============================================================================
   FUTURE GROUPS (document variable names now to prevent naming conflicts)
   Implement when the component is standardised.
   =============================================================================

   Group 6 — Filter (pills, tabs, category selectors):
     --filter-bg, --filter-text, --filter-active-bg, --filter-active-text,
     --filter-border, --filter-hover-bg

   Group 7 — Quote (blockquotes, decorative quotation marks):
     --quote-text, --quote-mark-color, --quote-border, --quote-bg, --quote-cite

   Group 8 — Icon (decorative and functional icons):
     --icon-color, --icon-muted, --icon-bg, --icon-border

   Group 10 — Overlay (image overlays, gradient fades, lightbox):
     --overlay-bg, --overlay-text, --overlay-opacity, --overlay-border
*/


/* =============================================================================
   COMPONENT CLASSES
   Reference both --space-* (Layer 1) and --card-*/--btn-*/--input-* (Layer 2)
   ============================================================================= */

/* ----- Card ----- */

.ssb-card {
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--card-border, #e5e7eb);
    border-radius: var(--card-radius, 0.75rem);
    box-shadow: var(--card-shadow, 0 1px 3px rgba(0,0,0,0.1));
    padding: var(--card-padding, 1.5rem);
    transition: box-shadow 0.2s ease;
    overflow: hidden;
}
.ssb-card:hover {
    box-shadow: var(--card-hover-shadow, 0 4px 12px rgba(0,0,0,0.1));
}

.ssb-card-image {
    margin: calc(-1 * var(--card-padding, 1.5rem));
    margin-bottom: var(--space-md, 1rem);
    overflow: hidden;
}
.ssb-card-image img {
    width: 100%;
    height: 12rem;
    object-fit: cover;
}
.ssb-card-image:first-child {
    margin-bottom: var(--space-md, 1rem);
    border-radius: var(--card-radius, 0.75rem) var(--card-radius, 0.75rem) 0 0;
}

.ssb-card-body {
    padding: var(--card-padding, 1.5rem);
}

.ssb-card-title {
    color: var(--card-heading, #111827);
    font-weight: 600;
    font-size: 1.25rem;
    margin-bottom: var(--space-sm, 0.5rem);
}

.ssb-card-text {
    color: var(--card-text, #4b5563);
}

.ssb-card-meta-text {
    color: var(--card-text-muted, #9ca3af);
    font-size: 0.875rem;
}

.ssb-card-link {
    color: var(--card-link, var(--site-primary-color, #3b82f6));
    text-decoration: none;
}
.ssb-card-link:hover {
    text-decoration: underline;
}

.ssb-card-image-only {
    background: var(--card-bg, #ffffff);
    border-radius: var(--card-radius, 0.75rem);
    overflow: hidden;
    box-shadow: var(--card-shadow, 0 1px 3px rgba(0,0,0,0.1));
}

.ssb-card-quote {
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--card-border, #e5e7eb);
    border-radius: var(--card-radius, 0.75rem);
    box-shadow: var(--card-shadow, 0 1px 3px rgba(0,0,0,0.1));
    padding: var(--card-padding, 1.5rem);
    transition: box-shadow 0.2s ease;
}
.ssb-card-quote:hover {
    box-shadow: var(--card-hover-shadow, 0 4px 12px rgba(0,0,0,0.1));
}

.ssb-card-horizontal {
    display: flex;
    flex-direction: column;
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--card-border, #e5e7eb);
    border-radius: var(--card-radius, 0.75rem);
    box-shadow: var(--card-shadow, 0 1px 3px rgba(0,0,0,0.1));
    padding: var(--card-padding, 1.5rem);
    overflow: hidden;
}
@media (min-width: 768px) {
    .ssb-card-horizontal {
        flex-direction: row;
        align-items: center;
        gap: var(--space-lg, 1.5rem);
    }
}

/* Badge */
.ssb-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    background: var(--card-badge-bg, #f3f4f6);
    color: var(--card-badge-text, #374151);
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 9999px;
}


/* ----- Button ----- */

.ssb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--btn-padding-y, 1rem) var(--btn-padding-x, 1.5rem);
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.5rem;
    border: 2px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.ssb-btn:hover { opacity: 0.9; }
.ssb-btn:focus-visible {
    outline: 2px solid var(--site-primary-color, #3b82f6);
    outline-offset: 2px;
}

.ssb-btn-sm {
    padding: var(--btn-padding-y-sm, 0.5rem) var(--btn-padding-x-sm, 1rem);
    font-size: 0.875rem;
}
.ssb-btn-lg {
    padding: var(--btn-padding-y-lg, 1rem) var(--btn-padding-x-lg, 2.5rem);
    font-size: 1.125rem;
}

/* Primary solid */
.ssb-btn-primary {
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border-color: var(--btn-primary-border);
}
.ssb-btn-primary:hover { background-color: var(--btn-primary-hover-bg); }

/* Primary outline */
.ssb-btn-primary-outline {
    background-color: var(--btn-primary-outline-bg, transparent);
    color: var(--btn-primary-outline-text);
    border-color: var(--btn-primary-outline-border);
}
.ssb-btn-primary-outline:hover { background-color: var(--btn-primary-outline-hover-bg); }

/* Secondary solid */
.ssb-btn-secondary {
    background-color: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    border-color: var(--btn-secondary-border);
}
.ssb-btn-secondary:hover { background-color: var(--btn-secondary-hover-bg); }

/* Secondary outline */
.ssb-btn-secondary-outline {
    background-color: var(--btn-secondary-outline-bg, transparent);
    color: var(--btn-secondary-outline-text);
    border-color: var(--btn-secondary-outline-border);
}
.ssb-btn-secondary-outline:hover { background-color: var(--btn-secondary-outline-hover-bg); }

/* Accent solid */
.ssb-btn-accent {
    background-color: var(--btn-accent-bg);
    color: var(--btn-accent-text);
    border-color: var(--btn-accent-border);
}
.ssb-btn-accent:hover { background-color: var(--btn-accent-hover-bg); }

/* Accent outline */
.ssb-btn-accent-outline {
    background-color: var(--btn-accent-outline-bg, transparent);
    color: var(--btn-accent-outline-text);
    border-color: var(--btn-accent-outline-border);
}
.ssb-btn-accent-outline:hover { background-color: var(--btn-accent-outline-hover-bg); }


/* ----- Input ----- */

.ssb-input {
    width: 100%;
    padding: var(--space-md, 1rem) var(--space-lg, 1.5rem);
    background-color: var(--input-bg, #ffffff);
    border: 1px solid var(--input-border, #d1d5db);
    border-radius: 0.5rem;
    color: var(--input-text, #111827);
    font-size: 1rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ssb-input::placeholder { color: var(--input-placeholder, #9ca3af); }
.ssb-input:focus {
    outline: none;
    border-color: var(--input-focus-ring, var(--site-primary-color, #3b82f6));
    box-shadow: 0 0 0 3px var(--input-focus-ring-alpha, rgba(59,130,246,0.2));
}

textarea.ssb-input { resize: vertical; }

.ssb-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--input-label, #374151);
    margin-bottom: var(--space-sm, 0.5rem);
}

.ssb-field-error {
    font-size: 0.875rem;
    color: var(--input-error, #dc2626);
    margin-top: var(--space-xs, 0.25rem);
}

.ssb-field-help {
    font-size: 0.75rem;
    color: var(--input-help, #6b7280);
    margin-top: var(--space-xs, 0.25rem);
}


/* ----- Prose ----- */

.ssb-prose {
    color: var(--section-text, #374151);
    line-height: 1.75;
}
.ssb-prose h2 {
    color: var(--section-heading, #111827);
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: 2em;
    margin-bottom: 0.75em;
}
.ssb-prose h3 {
    color: var(--section-heading, #111827);
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}
.ssb-prose p {
    margin-bottom: 1.25em;
}
.ssb-prose ul, .ssb-prose ol {
    padding-left: 1.5em;
    margin-bottom: 1.25em;
}
.ssb-prose li {
    margin-bottom: 0.5em;
}
.ssb-prose blockquote {
    border-left: 4px solid var(--section-border, #e5e7eb);
    padding-left: 1em;
    font-style: italic;
    color: var(--section-subheading, #6b7280);
    margin: 1.5em 0;
}
.ssb-prose a {
    color: var(--link-color, var(--site-primary-color, #3b82f6));
    text-decoration: underline;
}
.ssb-prose a:hover {
    color: var(--link-hover);
}
.ssb-prose strong {
    color: var(--section-heading, #111827);
    font-weight: 600;
}


/* ----- Section Text ----- */

.ssb-section-heading {
    color: var(--section-heading, #111827);
}
.ssb-section-subheading {
    color: var(--section-subheading, #6b7280);
}
.ssb-section-eyebrow {
    color: var(--section-eyebrow, var(--site-primary-color, #3b82f6));
}
.ssb-section-text {
    color: var(--section-text, #374151);
}
.ssb-section-text-muted {
    color: var(--section-text-muted, #9ca3af);
}


/* ----- Empty State ----- */

.ssb-empty-state {
    text-align: center;
    padding: var(--space-2xl, 4rem) var(--space-lg, 1.5rem);
}

.ssb-empty-state-text {
    color: var(--section-text-muted, #9ca3af);
    font-weight: 500;
}


/* ----- Interactive Form Elements (radio/checkbox option wrappers) ----- */

.ssb-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: var(--space-md, 0.75rem);
    border: 1px solid var(--input-border, #d1d5db);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.ssb-option:hover {
    border-color: var(--input-focus-ring, var(--site-primary-color, #3b82f6));
    background-color: var(--input-focus-ring-alpha, rgba(59,130,246,0.05));
}

.ssb-option-text {
    color: var(--input-label, #374151);
}

.ssb-required-mark {
    color: var(--input-error, #dc2626);
}

.ssb-radio,
.ssb-checkbox {
    accent-color: var(--input-focus-ring, var(--site-primary-color, #3b82f6));
}

/* NPS / selection button */
.ssb-select-btn {
    padding: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    border: 1px solid var(--input-border, #d1d5db);
    border-radius: 0.5rem;
    background-color: transparent;
    color: var(--input-text, #111827);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.ssb-select-btn:hover {
    border-color: var(--input-focus-ring, var(--site-primary-color, #3b82f6));
    background-color: var(--input-focus-ring-alpha, rgba(59,130,246,0.1));
}
.ssb-select-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--input-focus-ring-alpha, rgba(59,130,246,0.2));
}
.ssb-select-btn.active {
    background-color: var(--btn-primary-bg, var(--site-primary-color, #3b82f6));
    color: var(--btn-primary-text, #ffffff);
    border-color: var(--btn-primary-border, var(--site-primary-color, #3b82f6));
}

/* Rating star (unselected) */
.ssb-rating-star {
    color: var(--input-border, #d1d5db);
    transition: color 0.15s ease;
}
.ssb-rating-star:hover { color: #facc15; }
.ssb-rating-star:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--input-focus-ring-alpha, rgba(59,130,246,0.2));
    border-radius: 0.25rem;
}

/* Ranking item number badge */
.ssb-rank-number {
    color: var(--card-text-muted, #9ca3af);
    background-color: var(--card-badge-bg, #f3f4f6);
}