/**
 * =============================================================================
 * BrainPalette Main Stylesheet
 * =============================================================================
 * This is the main CSS file for the BrainPalette application.
 *
 * Organization:
 *   1. CSS Variables (custom properties for theming)
 *   2. Reset & Base Styles
 *   3. Typography
 *   4. Layout
 *   5. Components (buttons, cards, forms)
 *   6. Wizard-specific styles
 *   7. Utilities
 *
 * This file provides a minimal foundation. Full styling will be
 * implemented in Phase 2.4 (Base Templates) and Phase 5.1 (UI Polish).
 * =============================================================================
 */


/* =============================================================================
   1. CSS Variables
   =============================================================================
   Define colors, spacing, and other values as CSS custom properties.
   This makes theming and consistency easier to maintain.
*/

:root {
    /* =================================================================
       Theme: Warm Therapy Aesthetic
       Based on psychology clinic reference design
       ================================================================= */

    /* Brand Colors - Warm therapy palette */
    --color-primary: #C97B63;       /* Coral/terracotta - primary accent */
    --color-primary-dark: #B56A53;  /* Darker coral for hover states */
    --color-primary-light: #E8A090; /* Lighter coral for subtle accents */
    --color-secondary: #A8C4B8;     /* Sage green - secondary accent */
    --color-secondary-dark: #8FB0A3;/* Darker sage for hover */
    --color-accent: #4A3728;        /* Dark brown - strong accent */

    /* Neutral Colors - Warm cream base */
    --color-text: #3D3D3D;          /* Main text - warm dark gray */
    --color-text-light: #6B6B6B;    /* Secondary text */
    --color-text-muted: #8B8B8B;    /* Muted text */
    --color-background: #FAF7F2;    /* Warm cream page background */
    --color-surface: #FFFFFF;       /* Card/panel backgrounds */
    --color-surface-alt: #F5F0E8;   /* Alternate surface - beige */
    --color-border: #E5DED4;        /* Warm border color */
    --color-border-light: #EDE8E0;  /* Lighter border */

    /* Feedback Colors */
    --color-success: #7DB87D;       /* Muted green */
    --color-warning: #E8B86D;       /* Warm amber */
    --color-error: #D47B7B;         /* Muted red */
    --color-info: #7BA3C9;          /* Muted blue */

    /* Spacing Scale */
    --space-xs: 0.25rem;   /* 4px */
    --space-sm: 0.5rem;    /* 8px */
    --space-md: 1rem;      /* 16px */
    --space-lg: 1.5rem;    /* 24px */
    --space-xl: 2rem;      /* 32px */
    --space-2xl: 3rem;     /* 48px */
    --space-3xl: 4rem;     /* 64px */

    /* Typography - Serif headings, clean sans-serif body */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-family-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-size-sm: 0.875rem;  /* 14px */
    --font-size-base: 1rem;    /* 16px */
    --font-size-lg: 1.125rem;  /* 18px */
    --font-size-xl: 1.5rem;    /* 24px */
    --font-size-2xl: 2rem;     /* 32px */
    --font-size-3xl: 2.5rem;   /* 40px */
    --font-size-4xl: 3rem;     /* 48px */

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;     /* Fully rounded (pills, circles) */

    /* Shadows - Softer, warmer shadows */
    --shadow-sm: 0 1px 2px rgba(74, 55, 40, 0.05);
    --shadow-md: 0 4px 12px rgba(74, 55, 40, 0.08);
    --shadow-lg: 0 8px 24px rgba(74, 55, 40, 0.12);

    /* Decorative elements */
    --decoration-line: #A8C4B8;     /* Vertical accent lines */
    --decoration-grid: #A8C4B8;     /* Grid pattern color */
}


/* =============================================================================
   2. Reset & Base Styles
   =============================================================================
   Normalize browser defaults and set base styles.
*/

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    line-height: 1.5;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    color: var(--color-text);
    background-color: var(--color-background);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}


/* =============================================================================
   3. Typography
   =============================================================================
   Serif fonts for headings create warmth and professionalism.
   Sans-serif body text ensures readability.
*/

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-heading);
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: var(--space-md);
    color: var(--color-text);
}

h1 {
    font-size: var(--font-size-4xl);
    font-weight: 400;
    letter-spacing: -0.02em;
}
h2 {
    font-size: var(--font-size-3xl);
    font-weight: 400;
}
h3 {
    font-size: var(--font-size-2xl);
}
h4 {
    font-size: var(--font-size-xl);
}

p {
    margin-bottom: var(--space-md);
    line-height: 1.7;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--color-primary-dark);
}

/* Subtitle text style - used for taglines */
.subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-text-light);
    font-weight: 400;
    line-height: 1.6;
}


/* =============================================================================
   4. Layout
   =============================================================================
*/

/* Header - Clean horizontal navigation */
header {
    background-color: var(--color-surface);
    color: var(--color-text);
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--color-border-light);
}

/* Nav container with three sections: brand, main links, auth */
header nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    gap: var(--space-lg);
    flex-wrap: wrap;
}

/* Center the nav when it wraps to multiple lines */
@media (max-width: 1100px) {
    header nav {
        justify-content: center;
        gap: var(--space-md);
    }

    .nav-main {
        order: 3;
        width: 100%;
        justify-content: center;
        padding-top: var(--space-sm);
        border-top: 1px solid var(--color-border-light);
        margin-top: var(--space-sm);
    }
}

/* Main navigation links - centered */
.nav-main {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

.nav-main a {
    color: var(--color-text);
    font-weight: 500;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--space-xs) 0;
    position: relative;
    transition: color 0.2s ease;
}

/* Grouped intervention links with bounding box */
.nav-group {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid var(--color-border-light, #e5e5e5);
    border-radius: 6px;
    padding: 0.375rem 0.75rem;
    margin: 0 var(--space-xs);
}

.nav-group a {
    padding: 0 !important;
}

.nav-group__divider {
    width: 1px;
    height: 14px;
    background: var(--color-border, #ccc);
}

/* Staff-only link styling */
.nav-staff-link {
    opacity: 0.7;
    font-size: 0.75rem !important;
}

.nav-main a:hover {
    color: var(--color-primary);
    text-decoration: none;
}

.nav-main a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-primary);
    transition: width 0.2s ease;
}

.nav-main a:hover::after {
    width: 100%;
}

/* -------------------------------------------------------------------------
   Active nav tab — clearly highlighted so the current page is obvious.
   Top-level links (Home / About / Learn / News) become a filled coral pill
   with white text. The grouped "Build Intervention" gets its whole box
   highlighted instead (it can't take a pill because its <a> has no padding).
   ------------------------------------------------------------------------- */

/* Filled pill for the direct top-level nav links. */
.nav-main > a.active {
    color: #fff;
    background-color: var(--color-primary);
    font-weight: 600;
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-sm);
}

/* Keep the pill solid on hover (don't fade to plain text). */
.nav-main > a.active:hover {
    color: #fff;
    background-color: var(--color-primary-dark);
}

/* The underline accent is redundant under the pill — hide it. */
.nav-main > a.active::after {
    display: none;
}

/* Highlight the grouped "Build Intervention" box when its link is active. */
.nav-group:has(a.active) {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.nav-group:has(a.active) a {
    color: #fff;
}

/* Brand logo and text */
.nav-brand {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    text-decoration: none;
}

.nav-brand__logo {
    height: 32px;
    width: auto;
}

.nav-brand__text {
    font-weight: 600;
    font-size: 1rem;
}

/* Social links in nav */
.nav-social {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.nav-social__link {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-light);
    transition: color 0.15s ease;
}

.nav-social__link:hover {
    color: var(--color-primary);
}

.nav-social__icon {
    width: 20px;
    height: 20px;
}

/* Right side nav container (social + auth) */
.nav-right {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

/* Admin button - appears for staff users */
.btn--admin {
    background-color: var(--color-primary);
    color: white;
    border: none;
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.btn--admin:hover {
    background-color: var(--color-primary-dark);
    color: white;
}

/* Small button variant */
.btn--small {
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-size-sm);
}

/* Nav auth links container */
.nav-auth {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

/* Nav link (login/logout) */
.nav-link {
    color: var(--color-text);
    font-size: 0.8rem;
    text-decoration: none;
}

.nav-link:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

/* Sign Up button in nav */
.nav-link--primary {
    background: var(--color-primary, #1976d2);
    color: white !important;
    padding: 0.375rem 0.75rem;
    border-radius: 4px;
    font-size: 0.8rem;
}

.nav-link--primary:hover {
    background: var(--color-primary-dark, #1565c0);
    text-decoration: none;
}

/* Main content area */
main {
    flex: 1;
    padding: var(--space-xl) var(--space-lg);
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

/* Footer */
footer {
    background-color: var(--color-surface);
    padding: var(--space-lg);
    text-align: center;
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
}

/* Site-wide footer (base.html). Content from "Main Webpage.pdf". */
.site-footer {
    background-color: var(--color-surface-alt);
    border-top: 1px solid var(--color-border);
    padding: var(--space-2xl) var(--space-xl);
    text-align: center;
    color: var(--color-text-light);
}

.site-footer__inner {
    max-width: 760px;
    margin: 0 auto;
}

.site-footer__tagline {
    font-size: var(--font-size-base);
    line-height: 1.7;
    margin-bottom: var(--space-lg);
}

.site-footer__copyright {
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: var(--space-sm);
}

.site-footer__credits {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}


/* =============================================================================
   5. Components
   =============================================================================
*/

/* -------------------------------------------------------------------------
   5.1 Buttons
   ------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-xl);
    border-radius: var(--radius-full);
    font-weight: 500;
    font-size: var(--font-size-base);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.btn:hover {
    text-decoration: none;
}

/* Primary button - filled */
.btn--primary,
.btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

.btn--primary:hover,
.btn-primary:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: white;
}

/* Secondary button - subtle */
.btn--secondary {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}

.btn--secondary:hover {
    background-color: var(--color-border);
    color: var(--color-text);
}

/* Outline button - bordered */
.btn--outline {
    background-color: transparent;
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.btn--outline:hover {
    background-color: var(--color-primary);
    color: white;
}

/* Large button */
.btn--large {
    padding: var(--space-md) var(--space-xl);
    font-size: var(--font-size-lg);
}

/* Disabled button */
.btn--disabled,
.btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* External link icon in buttons */
.btn__external-icon {
    opacity: 0.7;
}

/* -------------------------------------------------------------------------
   5.2 Rich Text Content
   ------------------------------------------------------------------------- */

.rich-text h2 {
    margin-top: var(--space-xl);
}

.rich-text h3 {
    margin-top: var(--space-lg);
}

.rich-text ul,
.rich-text ol {
    margin-left: var(--space-lg);
    margin-bottom: var(--space-md);
}

.rich-text li {
    margin-bottom: var(--space-sm);
}

.rich-text blockquote {
    border-left: 4px solid var(--color-primary);
    padding-left: var(--space-md);
    margin: var(--space-lg) 0;
    color: var(--color-text-light);
    font-style: italic;
}

/* -------------------------------------------------------------------------
   5.3 Block Headings
   ------------------------------------------------------------------------- */

.block-heading {
    margin-top: var(--space-xl);
    margin-bottom: var(--space-md);
}

.block-heading--h2 {
    font-size: var(--font-size-xl);
    color: var(--color-primary);
}

.block-heading--h3 {
    font-size: var(--font-size-lg);
}

.block-heading--h4 {
    font-size: var(--font-size-base);
    font-weight: 600;
}


/* =============================================================================
   6. Wizard Styles (Phase 2)
   =============================================================================
   Styles for the intervention wizard including progress indicator,
   selection cards, and results display.
*/

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

.container--narrow {
    max-width: 800px;
}

/* -------------------------------------------------------------------------
   6.1 Hero Section - Split Layout (text left, image right)
   ------------------------------------------------------------------------- */

.hero {
    background-color: var(--color-surface-alt);
    padding: var(--space-3xl) var(--space-xl);
    position: relative;
    overflow: hidden;
}

.hero__container {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: center;
}

.hero__content {
    position: relative;
    z-index: 2;
}

/* Centered variant, used for the headline/subtitle that sits directly
   under the hero logo in the stacked layout. The negative top margin
   cancels most of the container's 3xl grid gap so the text sits closer
   to the logo (effective gap: space-xl) without touching the spacing
   between the other hero rows. */
.hero__content--center {
    text-align: center;
    margin-top: calc(var(--space-xl) - var(--space-3xl));
}

/* Stacked hero variant: images row on top, text content below.
   Overrides the default 2-column grid so the container flows vertically. */
.hero__container--stacked {
    grid-template-columns: 1fr;
}

/* Top row that holds the hero brand logo, centered.
   Width 35% keeps the logo the same size it had when it shared a
   70%-wide two-column row with the (since removed) toolkit photo. */
.hero__images {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    width: 35%;
    margin: 0 auto;
}

/* On narrow screens, let the logo use more of the width. */
@media (max-width: 768px) {
    .hero__images {
        width: 70%;
    }
}

.hero__title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-4xl);
    font-weight: 400;
    color: var(--color-text);
    margin-bottom: var(--space-md);
    line-height: 1.1;
}

.hero__subtitle {
    font-size: var(--font-size-xl);
    color: var(--color-text-light);
    margin-bottom: var(--space-lg);
    font-weight: 400;
    line-height: 1.5;
}

.hero__description {
    font-size: var(--font-size-base);
    color: var(--color-text-light);
    margin-bottom: var(--space-xl);
    line-height: 1.7;
    max-width: 500px;
}

.hero__cta {
    margin-top: var(--space-lg);
}

/* Center the CTA horizontally (used in the stacked hero between the
   images and the text below). */
.hero__cta--center {
    display: flex;
    justify-content: center;
}

/* Spacing between buttons when the hero CTA holds more than one
   (the Learn + Build an Intervention pair). Wraps on narrow screens. */
.hero__cta--group {
    gap: var(--space-md);
    flex-wrap: wrap;
}

/* Framed box around the hero CTA buttons. The "TOOLKIT" label sits on the
   top border line; its background matches the hero surface so it visually
   breaks the line (fieldset/legend look). fit-content keeps the frame
   hugging the buttons instead of spanning the whole hero width. */
.hero__toolkit-frame {
    position: relative;
    width: fit-content;
    margin: var(--space-lg) auto 0;
    padding: var(--space-xl) var(--space-xl) var(--space-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

/* The frame's padding provides the spacing, so drop the CTA's own
   top margin when it sits inside the frame. */
.hero__toolkit-frame .hero__cta {
    margin-top: 0;
}

.hero__toolkit-frame-label {
    position: absolute;
    top: -0.75em;
    left: 50%;
    transform: translateX(-50%);
    padding: 0 var(--space-sm);
    background-color: var(--color-surface-alt);
    font-size: var(--font-size-sm);
    letter-spacing: 0.12em;
    color: var(--color-text-light);
}

/* Hero image container with decorative elements */
.hero__image-container {
    position: relative;
}

.hero__image {
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    position: relative;
    z-index: 2;
}

/* Decorative vertical lines on left side */
.hero__decoration-lines {
    position: absolute;
    left: -60px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 8px;
    height: 200px;
}

.hero__decoration-lines span {
    width: 2px;
    height: 100%;
    background-color: var(--decoration-line);
    opacity: 0.6;
}

/* Decorative grid pattern */
.hero__decoration-grid {
    position: absolute;
    right: -20px;
    top: -20px;
    width: 120px;
    height: 150px;
    background-image:
        linear-gradient(var(--decoration-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--decoration-grid) 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.5;
    z-index: 1;
}

/* Decorative circles */
.hero__decoration-circle {
    position: absolute;
    border-radius: 50%;
    border: 3px solid var(--color-primary);
    opacity: 0.6;
}

.hero__decoration-circle--large {
    width: 80px;
    height: 80px;
    bottom: 40px;
    left: -40px;
}

.hero__decoration-circle--small {
    width: 40px;
    height: 40px;
    top: 20px;
    right: 60px;
    background-color: var(--color-primary-light);
    border: none;
    opacity: 0.4;
}

/* Legacy support: Hero with full background image */
.hero--with-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    min-height: 500px;
    display: flex;
    align-items: center;
}

.hero--with-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, rgba(245, 240, 232, 0.95) 0%, rgba(245, 240, 232, 0.7) 50%, transparent 100%);
    z-index: 1;
}

.hero--with-image .hero__content {
    position: relative;
    z-index: 2;
    max-width: 600px;
    padding-left: var(--space-xl);
}

/* -------------------------------------------------------------------------
   6.2 Page Header
   ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   6.1.2 Feature Section - Second home page section
   ------------------------------------------------------------------------- */

.feature-section {
    background-color: var(--color-surface);
    padding: var(--space-3xl) var(--space-xl);
}

.feature-section__container {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: center;
}

.feature-section--reversed .feature-section__container {
    direction: rtl;
}

.feature-section--reversed .feature-section__content,
.feature-section--reversed .feature-section__image-container {
    direction: ltr;
}

.feature-section__content {
    max-width: 560px;
}

.feature-section__title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-3xl);
    font-weight: 400;
    color: var(--color-text);
    margin-bottom: var(--space-lg);
    line-height: 1.2;
}

.feature-section__text {
    font-size: var(--font-size-base);
    color: var(--color-text-light);
    line-height: 1.8;
    margin-bottom: var(--space-md);
}

.feature-section__text:last-of-type {
    margin-bottom: var(--space-xl);
}

.feature-section__image {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
}

.feature-section__image-container {
    position: relative;
}

/* Decorative bar chart element */
.feature-section__decoration-bars {
    position: absolute;
    bottom: -20px;
    left: 20px;
    display: flex;
    gap: 6px;
    align-items: flex-end;
}

.feature-section__decoration-bars span {
    width: 16px;
    background-color: var(--color-secondary);
    border-radius: 4px 4px 0 0;
}

.feature-section__decoration-bars span:nth-child(1) { height: 40px; }
.feature-section__decoration-bars span:nth-child(2) { height: 60px; }
.feature-section__decoration-bars span:nth-child(3) { height: 80px; }
.feature-section__decoration-bars span:nth-child(4) { height: 55px; opacity: 0.7; }

/* -------------------------------------------------------------------------
   6.1.3 Quotes Section - Testimonials
   ------------------------------------------------------------------------- */

.quotes-section {
    background-color: var(--color-surface-alt);
    padding: var(--space-3xl) var(--space-xl);
}

.quotes-section__container {
    max-width: 1000px;
    margin: 0 auto;
}

.quotes-section__title {
    text-align: center;
    font-family: var(--font-family-heading);
    font-size: var(--font-size-2xl);
    font-weight: 400;
    margin-bottom: var(--space-2xl);
    color: var(--color-text);
}

.quotes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-xl);
}

.quote-card {
    background-color: var(--color-surface);
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    position: relative;
    box-shadow: var(--shadow-sm);
}

.quote-card::before {
    content: '"';
    font-family: var(--font-family-heading);
    font-size: 4rem;
    color: var(--color-primary-light);
    position: absolute;
    top: var(--space-md);
    left: var(--space-lg);
    line-height: 1;
    opacity: 0.5;
}

.quote-card__text {
    font-size: var(--font-size-lg);
    font-style: italic;
    color: var(--color-text);
    line-height: 1.6;
    padding-left: var(--space-lg);
    margin: 0;
}

.quote-card__author {
    margin-top: var(--space-lg);
    padding-left: var(--space-lg);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* -------------------------------------------------------------------------
   6.2 Page Header
   ------------------------------------------------------------------------- */

.page-header {
    background-color: var(--color-surface);
    padding: var(--space-xl) 0;
    margin-bottom: var(--space-xl);
}

.page-header--compact {
    padding: var(--space-lg) 0 var(--space-md);
    margin-bottom: var(--space-md);
}

.page-header__title {
    margin-bottom: var(--space-md);
}

.page-header--compact .page-header__title {
    margin-bottom: var(--space-sm);
    font-size: var(--font-size-2xl);
}

.page-header__intro {
    max-width: 700px;
    color: var(--color-text-light);
}

.page-header--compact .page-header__intro {
    margin-bottom: var(--space-md);
}

/* Steps List - compact horizontal list of wizard steps */
.steps-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-lg);
    list-style: none;
    padding: 0;
    margin: var(--space-md) 0;
    border-top: 1px solid var(--color-border-light);
    border-bottom: 1px solid var(--color-border-light);
    padding: var(--space-md) 0;
}

.steps-list__item {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.steps-list__number {
    width: 24px;
    height: 24px;
    background-color: var(--color-primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    font-weight: 600;
    flex-shrink: 0;
}

.steps-list__title {
    font-size: var(--font-size-sm);
    color: var(--color-text);
}

@media (max-width: 600px) {
    .steps-list {
        flex-direction: column;
        gap: var(--space-sm);
    }
}

/* -------------------------------------------------------------------------
   6.3 Wizard Layout
   ------------------------------------------------------------------------- */

.wizard-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--space-xl);
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-lg);
}

@media (max-width: 768px) {
    .wizard-layout {
        grid-template-columns: 1fr;
    }
}

/* Wizard sidebar */
.wizard-sidebar {
    background-color: var(--color-surface);
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    position: sticky;
    top: var(--space-lg);
    max-height: calc(100vh - var(--space-lg) * 2);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Sticky regulation state bar at bottom of page */
.regulation-state-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-primary);
    padding: var(--space-md) var(--space-xl);
    z-index: 100;
    text-align: center;
    box-shadow: 0 -4px 16px rgba(201, 123, 99, 0.3);
    overflow: hidden;
}

.regulation-state-bar::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.3) 50%,
        transparent 100%
    );
    animation: shine 3s ease-in-out infinite;
}

@keyframes shine {
    0% {
        left: -100%;
    }
    50%, 100% {
        left: 100%;
    }
}

.regulation-state-bar__text {
    font-size: var(--font-size-base);
    color: white;
    margin: 0;
    line-height: 1.4;
}

.regulation-state-bar__text strong {
    color: white;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.regulation-state-bar__text a {
    color: white;
    font-weight: 600;
    margin-left: var(--space-sm);
    background: var(--color-secondary);
    padding: 4px 12px;
    border-radius: 4px;
    text-decoration: none;
    transition: background 0.2s ease;
}

.regulation-state-bar__text a:hover {
    background: var(--color-secondary-dark);
}

/* Processing Overlay for Results Generation */
.processing-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.processing-overlay__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
}

.processing-overlay__content {
    position: relative;
    background: white;
    border-radius: var(--radius-lg);
    padding: var(--space-xl) var(--space-xxl);
    text-align: center;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.processing-overlay__images {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto var(--space-lg);
}

.processing-overlay__image {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.3s, transform 0.3s;
    color: var(--color-primary);
}

.processing-overlay__image.active {
    opacity: 1;
    transform: scale(1);
}

.processing-overlay__title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 var(--space-sm) 0;
}

.processing-overlay__message {
    font-size: 1rem;
    color: var(--color-text-light);
    margin: 0 0 var(--space-lg) 0;
}

.processing-overlay__progress {
    height: 8px;
    background: var(--color-border);
    border-radius: 4px;
    overflow: hidden;
}

.processing-overlay__progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary), #7c4dff);
    border-radius: 4px;
    transition: width 0.1s ease-out;
}

/* Session name at top of sidebar */
.wizard-sidebar__session-name {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-border);
}

/* Session code in sidebar */
.wizard-sidebar__session {
    margin-top: var(--space-lg);
    padding: var(--space-md);
    background-color: var(--color-surface);
    border-radius: var(--radius-sm);
    text-align: center;
}

.wizard-sidebar__session-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    margin-bottom: var(--space-xs);
}

.wizard-sidebar__session-code {
    font-size: var(--font-size-lg);
    font-weight: 600;
    font-family: monospace;
    color: var(--color-primary);
}

.wizard-sidebar__session-hint {
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
    margin-top: var(--space-xs);
}

/* Start Over button in sidebar */
.wizard-sidebar__reset {
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
}

.wizard-reset-btn {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    background-color: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

.wizard-reset-btn:hover {
    background-color: var(--color-error);
    border-color: var(--color-error);
    color: white;
}

/* Wizard main content */
.wizard-main {
    padding: var(--space-md);
}

/* -------------------------------------------------------------------------
   6.4 Wizard Progress Indicator
   ------------------------------------------------------------------------- */

.wizard-progress__list {
    list-style: none;
}

.wizard-progress__item {
    position: relative;
    padding-left: var(--space-xl);
    padding-bottom: var(--space-lg);
    border-left: 2px solid var(--color-border);
}

.wizard-progress__item:last-child {
    padding-bottom: 0;
    border-left: none;
}

.wizard-progress__number {
    position: absolute;
    left: -12px;
    width: 24px;
    height: 24px;
    background-color: var(--color-background);
    border: 2px solid var(--color-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-light);
}

.wizard-progress__item--active .wizard-progress__number {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

.wizard-progress__item--completed .wizard-progress__number {
    background-color: var(--color-success);
    border-color: var(--color-success);
    color: white;
}

.wizard-progress__item--completed .wizard-progress__number svg {
    width: 14px;
    height: 14px;
}

.wizard-progress__link {
    display: block;
    color: var(--color-text-light);
    text-decoration: none;
}

.wizard-progress__item--active .wizard-progress__link {
    color: var(--color-primary);
    font-weight: 600;
}

.wizard-progress__item--completed .wizard-progress__link {
    color: var(--color-success);
}

.wizard-progress__label {
    display: block;
    font-size: var(--font-size-sm);
}

.wizard-progress__icon {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    margin-bottom: var(--space-xs);
}

.wizard-progress__selections {
    list-style: none;
    margin: var(--space-xs) 0 0 calc(28px + var(--space-sm));
    padding: 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
}

.wizard-progress__selections li {
    padding: 2px 0;
}

.wizard-progress__tag {
    display: inline-block;
    margin: var(--space-xs) 0 0 calc(28px + var(--space-sm));
    padding: 2px 8px;
    font-size: var(--font-size-xs);
    color: #2e7d32;
    background: #e8f5e9;
    border-radius: var(--radius-sm);
}

/* Hint to remind users they can update regulation state */
.wizard-progress__hint {
    display: inline-block;
    margin: var(--space-xs) 0 0 calc(28px + var(--space-sm));
    padding: 2px 8px;
    font-size: var(--font-size-xs);
    color: var(--color-primary);
    text-decoration: none;
    border-radius: var(--radius-sm);
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(74, 144, 164, 0.15) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: shimmer-hint 3s ease-in-out infinite;
}

.wizard-progress__hint:hover {
    background: rgba(74, 144, 164, 0.2);
    animation: none;
}

@keyframes shimmer-hint {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* -------------------------------------------------------------------------
   6.5 Wizard Step Header
   ------------------------------------------------------------------------- */

.wizard-step-header {
    position: sticky;
    top: 0;
    background-color: var(--color-background);
    margin-bottom: var(--space-xl);
    padding: var(--space-md) 0;
    z-index: 10;
}

.wizard-step-header__badge {
    display: inline-block;
    background-color: var(--color-primary);
    color: white;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: 500;
    margin-bottom: var(--space-sm);
}

.wizard-step-header__title-row {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.wizard-step-header__icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    object-fit: cover;
    flex-shrink: 0;
}

.wizard-step-header__title {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--space-md);
}

.wizard-step-header__title-row .wizard-step-header__title {
    margin-bottom: 0;
}

.wizard-step-header__intro {
    color: var(--color-text-light);
}

/* Intro text for informational steps (Step 5). Rendered outside the sticky
   header so the longer text scrolls away instead of staying pinned and
   blocking the content below. */
.wizard-step-intro {
    color: var(--color-text-light);
    margin-bottom: var(--space-lg);
}

.wizard-step-header__tag {
    display: inline-block;
    margin-top: var(--space-sm);
    padding: 4px 12px;
    font-size: var(--font-size-sm);
    color: #2e7d32;
    background: #e8f5e9;
    border-radius: var(--radius-sm);
}

/* -------------------------------------------------------------------------
   6.6 Wizard Help (Collapsible)
   ------------------------------------------------------------------------- */

.wizard-help {
    margin-bottom: var(--space-xl);
    background-color: var(--color-surface);
    border-radius: var(--radius-md);
}

.wizard-help__toggle {
    padding: var(--space-md);
    cursor: pointer;
    font-weight: 500;
    color: var(--color-primary);
}

.wizard-help__content {
    padding: 0 var(--space-md) var(--space-md);
    color: var(--color-text-light);
}

/* V4.1: Structured help sections */
.wizard-help__section {
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-border);
}

.wizard-help__section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.wizard-help__section-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-primary);
    margin: 0 0 var(--space-xs) 0;
}

.wizard-help__section-content {
    font-size: 0.95rem;
    line-height: 1.6;
}

.wizard-help__section-content p {
    margin: 0 0 var(--space-xs) 0;
}

.wizard-help__section-content p:last-child {
    margin-bottom: 0;
}

.wizard-help__section--important {
    background: #fff3e0;
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--color-warning);
    border-bottom: none;
}

/* V4.1: Learn more links section */
.wizard-help__section--links {
    background: var(--color-surface);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    border-bottom: none;
}

.wizard-help__links {
    list-style: none;
    padding: 0;
    margin: var(--space-xs) 0 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.wizard-help__link {
    color: var(--color-primary);
    text-decoration: none;
    font-size: 0.9rem;
    display: inline-block;
    padding: var(--space-xs) 0;
    transition: color 0.2s ease;
}

.wizard-help__link:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

/* V4.1: Context and mapping text */
.wizard-context {
    margin-bottom: var(--space-lg);
    padding: var(--space-sm) var(--space-md);
    background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
    border-radius: var(--radius-md);
    font-style: italic;
    color: var(--color-text-muted);
}

.wizard-context p {
    margin: 0;
}

.wizard-mapping {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
    padding: var(--space-md) var(--space-lg);
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-radius: var(--radius-md);
    border: 1px solid #f59e0b;
    font-size: 0.95rem;
}

.wizard-mapping__icon {
    flex-shrink: 0;
    color: #b45309;
}

.wizard-mapping__content p {
    margin: 0 0 var(--space-xs) 0;
}

.wizard-mapping__content p:last-child {
    margin-bottom: 0;
}

.wizard-mapping__content p strong {
    color: #92400e;
}

/* V5.0: Anchor suggestion summary banner (Step 3) */
.wizard-mapping--anchors {
    background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
    border-color: #8b5cf6;
}

.wizard-mapping--anchors .wizard-mapping__icon {
    color: #6d28d9;
}

.wizard-mapping--anchors .wizard-mapping__content p strong {
    color: #5b21b6;
}

.wizard-mapping__section {
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px dashed rgba(139, 92, 246, 0.3);
}

.wizard-mapping__label {
    font-weight: 600;
    color: #5b21b6;
    margin-bottom: var(--space-xs) !important;
    font-size: 0.85rem;
}

.wizard-mapping__tags {
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
    margin-bottom: var(--space-xs);
}

.wizard-mapping__tag {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 2px 10px;
    border-radius: 12px;
    background: white;
    color: #5b21b6;
    border: 1px solid #c4b5fd;
}

.wizard-mapping__tag--regulation {
    background: #fef3c7;
    color: #92400e;
    border-color: #f59e0b;
}

.wizard-mapping__reason {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-bottom: var(--space-xs);
    flex-wrap: wrap;
}

.wizard-mapping__observation {
    font-weight: 500;
    color: #374151;
    font-size: 0.9rem;
}

.wizard-mapping__arrow {
    color: #9ca3af;
    font-weight: bold;
}

.anchor-tag--secondary {
    opacity: 0.8;
}

/* V5.0: Mechanism suggestion summary banner (Step 4) */
.wizard-mapping--mechanisms {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border-color: #10b981;
}

.wizard-mapping--mechanisms .wizard-mapping__icon {
    color: #047857;
}

.wizard-mapping--mechanisms .wizard-mapping__content p strong {
    color: #065f46;
}

.wizard-mapping--mechanisms .wizard-mapping__section {
    border-top-color: rgba(16, 185, 129, 0.3);
}

.wizard-mapping--mechanisms .wizard-mapping__label {
    color: #065f46;
}

.mechanism-tag {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mechanism-tag--primary {
    background: #065f46;
    color: white;
}

.mechanism-tag--secondary {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #10b981;
}

/* V5.0: Refinement explanation banner (Step 6) */
.wizard-mapping--refine {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-color: #f59e0b;
}

.wizard-mapping--refine .wizard-mapping__icon {
    color: #b45309;
}

.wizard-mapping--refine .wizard-mapping__content p strong {
    color: #92400e;
}

.wizard-mapping--refine .wizard-mapping__section {
    border-top-color: rgba(245, 158, 11, 0.3);
}

.wizard-mapping--refine .wizard-mapping__label {
    color: #92400e;
}

.wizard-mapping__note {
    margin-top: var(--space-sm) !important;
    font-size: 0.85rem;
    color: #78350f;
}

.refine-terms {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.refine-term {
    display: flex;
    gap: var(--space-sm);
    align-items: baseline;
    font-size: 0.9rem;
    padding: var(--space-xs) 0;
    border-bottom: 1px dotted rgba(245, 158, 11, 0.3);
}

.refine-term:last-child {
    border-bottom: none;
}

.refine-term__name {
    font-weight: 600;
    color: #92400e;
    min-width: 120px;
    flex-shrink: 0;
}

.refine-term__def {
    color: #78350f;
}

@media (max-width: 600px) {
    .refine-term {
        flex-direction: column;
        gap: 2px;
    }

    .refine-term__name {
        min-width: auto;
    }
}

/* V4.1: Helper text at bottom */
.wizard-helper {
    text-align: center;
    color: var(--color-text-muted);
    font-style: italic;
    margin: var(--space-lg) 0;
    padding: var(--space-sm);
    background: var(--color-surface);
    border-radius: var(--radius-sm);
}

/* -------------------------------------------------------------------------
   6.6.5 Step 5 Tenets - Why This Matters + Tenet Tiles
   ------------------------------------------------------------------------- */

/* Why This Matters Box */
.why-matters {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.why-matters__header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.why-matters__icon {
    color: var(--color-warning);
}

.why-matters__title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    color: var(--color-text);
}

.why-matters__content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
}

@media (max-width: 768px) {
    .why-matters__content {
        grid-template-columns: 1fr;
    }
}

.why-matters__label {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin: 0 0 var(--space-sm) 0;
}

.why-matters__pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.why-matters__pill {
    display: inline-block;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 500;
    border: 1px solid;
}

.why-matters__pill--anchor {
    background: #e8f4fd;
    border-color: #90caf9;
    color: #1565c0;
}

.why-matters__pill--mechanism {
    background: #f3e5f5;
    border-color: #ce93d8;
    color: #7b1fa2;
}

.why-matters__pill--regulation {
    background: #e8f5e9;
    border-color: #a5d6a7;
    color: #2e7d32;
}

.why-matters__suggestions {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.why-matters__suggestion {
    margin: 0;
    font-size: 0.95rem;
    color: var(--color-text);
    line-height: 1.5;
}

/* Tenet Tiles - 2x2 Grid */
.tenet-tiles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

@media (max-width: 768px) {
    .tenet-tiles {
        grid-template-columns: 1fr;
    }
}

.tenet-tile {
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
}

.tenet-tile:hover {
    box-shadow: var(--shadow-md);
}

.tenet-tile__main {
    display: flex;
    gap: var(--space-md);
    padding: var(--space-lg);
    flex: 1;
}

.tenet-tile__icon-wrap {
    flex-shrink: 0;
}

.tenet-tile__icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tenet-tile__img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

/* Icon colors per tenet */
.tenet-tile[data-key="symbolic_communication"] .tenet-tile__icon {
    background: #ede7f6;
}
.tenet-tile[data-key="symbolic_communication"] .tenet-tile__title {
    color: #7c4dff;
}

.tenet-tile[data-key="creativity_healing"] .tenet-tile__icon {
    background: #e8f5e9;
}
.tenet-tile[data-key="creativity_healing"] .tenet-tile__title {
    color: #43a047;
}

.tenet-tile[data-key="materials_methods"] .tenet-tile__icon {
    background: #fff3e0;
}
.tenet-tile[data-key="materials_methods"] .tenet-tile__title {
    color: #ef6c00;
}

.tenet-tile[data-key="relational_context"] .tenet-tile__icon {
    background: #e0f7fa;
}
.tenet-tile[data-key="relational_context"] .tenet-tile__title {
    color: #00897b;
}

.tenet-tile__body {
    flex: 1;
}

.tenet-tile__title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 var(--space-xs) 0;
}

.tenet-tile__star {
    margin-left: var(--space-xs);
}

.tenet-tile__description {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    margin: 0 0 var(--space-sm) 0;
    line-height: 1.5;
}

.tenet-tile__learn-more {
    background: none;
    border: none;
    padding: 0;
    color: var(--color-primary);
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.tenet-tile__learn-more:hover {
    text-decoration: underline;
}

.tenet-tile__details {
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--color-border);
    font-size: 0.9rem;
    color: var(--color-text-muted);
    line-height: 1.6;
}

.tenet-tile__details h4 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text);
    margin: var(--space-sm) 0 var(--space-xs) 0;
}

.tenet-tile__details p {
    margin: 0 0 var(--space-sm) 0;
}

/* Micro Reflection section */
.tenet-tile__reflection {
    display: flex;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
}

.tenet-tile__reflection-icon {
    flex-shrink: 0;
    color: var(--color-text-muted);
}

.tenet-tile__reflection-content {
    font-size: 0.9rem;
    line-height: 1.5;
}

.tenet-tile__reflection-label {
    font-weight: 600;
    color: var(--color-primary);
    display: block;
    margin-bottom: 2px;
}

.tenet-tile__reflection-text {
    color: var(--color-text-muted);
}

/* Refine Your Intervention Section (bottom of Step 5) */
.refine-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-md) var(--space-lg);
    margin-bottom: var(--space-xl);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
}

.refine-section__header {
    flex-shrink: 0;
}

.refine-section__label {
    font-weight: 600;
    color: var(--color-text);
}

.refine-section__options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    flex: 1;
}

.refine-option {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    cursor: pointer;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: white;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.refine-option:hover {
    border-color: var(--color-primary-light);
    background: var(--color-primary-bg);
}

.refine-option input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary);
}

.refine-option__icon {
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
}

.refine-option__text {
    display: flex;
    flex-direction: column;
    font-size: 0.9rem;
    line-height: 1.3;
}

.refine-option__text strong {
    color: var(--color-text);
}

.refine-option__text small {
    color: var(--color-text-muted);
    font-size: 0.8rem;
}

@media (max-width: 768px) {
    .refine-section {
        flex-direction: column;
        align-items: flex-start;
    }

    .refine-section__options {
        width: 100%;
    }

    .refine-option {
        width: 100%;
    }
}

/* -------------------------------------------------------------------------
   6.7 Selection Cards
   ------------------------------------------------------------------------- */

.selection-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}

.selection-card {
    position: relative;
    display: block;
    background-color: var(--color-background);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    padding-bottom: calc(var(--space-lg) + 28px);
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.1s;
}

.selection-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
}

.selection-card--selected {
    border-color: var(--color-primary);
    background-color: rgba(74, 144, 164, 0.05);
}

.selection-card__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Card image - visual context at top of selection card */
.selection-card__image {
    margin: calc(-1 * var(--space-lg));
    margin-bottom: var(--space-md);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    overflow: hidden;
    height: 120px;
}

.selection-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.selection-card:hover .selection-card__image img {
    transform: scale(1.05);
}

.selection-card__content {
    padding-right: var(--space-xl);
}

.selection-card__title {
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-sm);
    color: var(--color-text);
}

.selection-card__top-match {
    display: inline-block;
    color: rgb(234, 179, 8);
    font-size: 1.2em;
    margin-left: var(--space-xs);
    vertical-align: middle;
    cursor: help;
}

.selection-card__description {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    margin-bottom: var(--space-md);
}

/* V4.1: Why description - 1-line explanation */
.selection-card__why {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    font-style: italic;
    margin: 0;
    padding-top: var(--space-xs);
    border-top: 1px dashed var(--color-border);
}

/* V5.0: Anchor tags on observation cards - shows connection to Step 3 */
.selection-card__anchors {
    display: flex;
    gap: var(--space-xs);
    margin-top: var(--space-sm);
    flex-wrap: wrap;
}

.anchor-tag {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* V4.1: Suggested marker */
.selection-card__suggested {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 500;
    color: #b45309;
    background: #fef3c7;
    padding: 2px 8px;
    border-radius: 12px;
    margin-left: var(--space-xs);
}

/* V4.1: Suggested card styling */
.selection-card--suggested {
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}

.selection-card--suggested:hover {
    border-color: #d97706;
}

.selection-card__score {
    margin-top: var(--space-sm);
}

.selection-card__score-bar {
    height: 6px;
    background-color: var(--color-border);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: var(--space-xs);
}

.selection-card__score-fill {
    height: 100%;
    background-color: var(--color-primary);
    transition: width 0.3s ease;
}

.selection-card__score-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

.selection-card__actions {
    position: absolute;
    bottom: var(--space-md);
    right: var(--space-lg);
}

.selection-card__learn-btn {
    font-size: 0.85rem;
    color: var(--color-primary);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
}

.selection-card__learn-btn:hover {
    color: var(--color-primary-dark, #3a7a8a);
}

/* Score-based background shading - green indicates recommended choices */
/* Higher score = more green = better recommendation */
.selection-card__score-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgb(72, 187, 120);
    opacity: calc(var(--score, 0) / 100 * 0.25);
    border-radius: var(--radius-lg);
    pointer-events: none;
}

/* Ensure content appears above the background */
.selection-card__content,
.selection-card__indicator {
    position: relative;
    z-index: 1;
}

.selection-card__indicator {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    width: 28px;
    height: 28px;
    border: 2px solid var(--color-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    transition: all 0.2s;
}

.selection-card--selected .selection-card__indicator {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

.selection-card__indicator svg {
    width: 16px;
    height: 16px;
}

/* Header with title and info button */
.selection-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-sm);
}

.selection-card__header .selection-card__title {
    flex: 1;
}

/* Info button */
.selection-card__info-btn {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--color-text-light);
    border-radius: 50%;
    transition: all 0.2s;
}

.selection-card__info-btn:hover {
    color: var(--color-primary);
    background-color: var(--color-primary-light);
}

/* Info Modal */
.info-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.info-modal__backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
}

.info-modal__content {
    position: relative;
    background: white;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    max-width: 480px;
    width: 100%;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.info-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-primary);
    color: white;
}

.info-modal__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.info-modal__close {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
}

.info-modal__close:hover {
    opacity: 1;
}

.info-modal__close svg {
    width: 18px;
    height: 18px;
}

.info-modal__body {
    padding: 12px 16px;
    font-size: 0.85rem;
    line-height: 1.35;
    overflow-y: auto;
    color: var(--color-text);
}

.info-modal__body h1,
.info-modal__body h2,
.info-modal__body h3,
.info-modal__body h4,
.info-modal__body h5,
.info-modal__body h6 {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    margin: 12px 0 8px 0 !important;
    line-height: 1.3 !important;
}

.info-modal__body h1:first-child,
.info-modal__body h2:first-child,
.info-modal__body h3:first-child,
.info-modal__body h4:first-child {
    margin-top: 0 !important;
}

.info-modal__body p {
    margin: 0 0 6px 0 !important;
    font-size: 0.85rem !important;
    line-height: 1.3 !important;
}

.info-modal__body p:last-child {
    margin-bottom: 0 !important;
}

.info-modal__body ul,
.info-modal__body ol {
    margin: 0 0 6px 0 !important;
    padding-left: 1em !important;
}

.info-modal__body li {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
    font-size: 0.85rem !important;
}

.info-modal__body strong {
    color: var(--color-primary);
}

.info-modal__body em {
    font-style: italic;
    color: var(--color-text-light);
}

/* Modal sections for structured content */
.info-modal__section {
    padding: 0.5rem 0.75rem;
    background: var(--color-surface);
    border-radius: 6px;
    margin-bottom: 0.5rem;
}

.info-modal__section:last-child {
    margin-bottom: 0;
}

.info-modal__section h4 {
    margin: 0 0 0.25rem 0;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.info-modal__body .info-modal__section p {
    margin: 0 !important;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--color-text);
}

/* Warning section for contraindications */
.info-modal__section--warning {
    background: #fef3c7;
    border-left: 4px solid #f59e0b;
}

.info-modal__section--warning h4 {
    color: #b45309;
}

/* Modal transitions */
.backdrop-enter { transition: opacity 0.2s ease; }
.backdrop-enter-start { opacity: 0; }
.backdrop-enter-end { opacity: 1; }
.backdrop-leave { transition: opacity 0.15s ease; }
.backdrop-leave-start { opacity: 1; }
.backdrop-leave-end { opacity: 0; }

.modal-enter { transition: opacity 0.2s ease, transform 0.2s ease; }
.modal-enter-start { opacity: 0; transform: scale(0.95) translateY(10px); }
.modal-enter-end { opacity: 1; transform: scale(1) translateY(0); }
.modal-leave { transition: opacity 0.15s ease, transform 0.15s ease; }
.modal-leave-start { opacity: 1; transform: scale(1) translateY(0); }
.modal-leave-end { opacity: 0; transform: scale(0.95) translateY(10px); }

[x-cloak] {
    display: none !important;
}

/* -------------------------------------------------------------------------
   6.8 Wizard Navigation
   ------------------------------------------------------------------------- */

.wizard-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-md);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border);
    position: relative;
}

.wizard-loading {
    display: none;
    text-align: center;
    padding: var(--space-md);
}

.wizard-loading--active {
    display: block;
}

.wizard-loading__spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* -------------------------------------------------------------------------
   6.9 Wizard Summary
   ------------------------------------------------------------------------- */

.wizard-summary {
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border);
}

.wizard-summary__title {
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-light);
    margin-bottom: var(--space-md);
}

.wizard-summary__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.wizard-summary__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.wizard-summary__label {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

.wizard-summary__step {
    width: 18px;
    height: 18px;
    background-color: var(--color-success);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
}

.wizard-summary__value {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.wizard-summary__tag {
    display: inline-block;
    background-color: var(--color-primary);
    color: white;
    padding: 2px var(--space-sm);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
}

.wizard-summary__clear {
    display: block;
    margin-top: var(--space-md);
    font-size: var(--font-size-sm);
    color: var(--color-error);
}

/* -------------------------------------------------------------------------
   6.10 Results Page
   ------------------------------------------------------------------------- */

.results-layout {
    max-width: 1000px;
    margin: 0 auto;
}

/* Results page within wizard layout */
.results-main .results-header {
    margin-bottom: var(--space-lg);
}

.results-main .results-content {
    margin-bottom: var(--space-lg);
}

.results-header {
    background-color: var(--color-surface);
    padding: var(--space-xl);
    margin-bottom: var(--space-xl);
    border-radius: var(--radius-lg);
}

.results-header__title {
    color: var(--color-primary);
}

.results-summary {
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border);
}

.results-summary__title {
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-light);
    margin-bottom: var(--space-md);
}

.results-summary__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg);
}

.results-summary__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.results-summary__item dt {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

.results-summary__item dd {
    font-weight: 500;
    text-transform: capitalize;
}

/* Clickable selection items - link back to edit */
.results-summary__item--clickable {
    text-decoration: none;
    color: inherit;
    padding: var(--space-sm);
    margin: calc(-1 * var(--space-sm));
    border-radius: var(--radius-md);
    transition: background-color 0.2s;
}

.results-summary__item--clickable:hover {
    background-color: rgba(74, 144, 164, 0.1);
}

.results-summary__item--clickable:hover .results-summary__edit {
    opacity: 1;
}

.results-summary__edit {
    opacity: 0.3;
    margin-left: var(--space-xs);
    font-size: var(--font-size-sm);
    transition: opacity 0.2s;
}

/* Results sections */
.results-section {
    margin-bottom: var(--space-2xl);
}

.results-section__title {
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
}

.results-section__intro {
    color: var(--color-text-light);
    margin-bottom: var(--space-lg);
}

.results-section__empty {
    color: var(--color-text-light);
    font-style: italic;
}

/* Results grid */
.results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-md);
}

/* V5.0: Top Intervention Recommendations (Pathway Cards) */
.results-section--pathways {
    margin-bottom: var(--space-xl);
}

.results-section__help-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

.results-section__help-btn:hover {
    background: var(--color-surface);
    color: var(--color-primary);
}

.pathway-cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.pathway-card {
    display: flex;
    gap: var(--space-md);
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    transition: box-shadow 0.2s, border-color 0.2s;
}

.pathway-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.pathway-card--rank-1 {
    border-color: #10b981;
    background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%);
}

.pathway-card--rank-2 {
    border-color: #3b82f6;
    background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%);
}

.pathway-card--rank-3 {
    border-color: #f59e0b;
    background: linear-gradient(135deg, #fffbeb 0%, #ffffff 100%);
}

.pathway-card__rank {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 700;
    font-size: 1rem;
    color: white;
}

.pathway-card--rank-1 .pathway-card__rank { background: #10b981; }
.pathway-card--rank-2 .pathway-card__rank { background: #3b82f6; }
.pathway-card--rank-3 .pathway-card__rank { background: #f59e0b; }

.pathway-card__content {
    flex: 1;
    min-width: 0;
}

.pathway-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-md);
    margin-bottom: var(--space-sm);
}

.pathway-card__title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.pathway-card__badge {
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 10px;
    background: #d1fae5;
    color: #065f46;
}

.pathway-card__score {
    text-align: right;
    flex-shrink: 0;
}

.pathway-card__score-value {
    font-size: 1.5rem;
    font-weight: 700;
    display: block;
}

.pathway-card__score-value--high { color: #059669; }
.pathway-card__score-value--medium { color: #2563eb; }
.pathway-card__score-value--low { color: #d97706; }

.pathway-card__score-label {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    display: block;
    margin-bottom: 4px;
}

.pathway-card__score-bar {
    width: 80px;
    height: 6px;
    background: #e5e7eb;
    border-radius: 3px;
    overflow: hidden;
}

.pathway-card__score-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.pathway-card__score-fill--high { background: #10b981; }
.pathway-card__score-fill--medium { background: #3b82f6; }
.pathway-card__score-fill--low { background: #f59e0b; }

.pathway-card__description {
    font-size: 0.95rem;
    color: var(--color-text);
    margin: 0 0 var(--space-xs) 0;
}

.pathway-card__clinical {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    font-style: italic;
    margin: 0 0 var(--space-sm) 0;
}

.pathway-card__why-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: var(--color-primary);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 4px 0;
}

.pathway-card__why-toggle:hover {
    text-decoration: underline;
}

.pathway-card__why-toggle svg {
    transition: transform 0.2s;
}

.pathway-card__why-toggle svg.rotated {
    transform: rotate(180deg);
}

.pathway-card__why-content {
    margin-top: var(--space-sm);
    padding: var(--space-sm);
    background: var(--color-surface);
    border-radius: var(--radius-sm);
}

.pathway-card__why-list {
    margin: 0;
    padding-left: var(--space-md);
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.pathway-card__why-list li {
    margin-bottom: var(--space-xs);
}

.pathway-card__why-list li:last-child {
    margin-bottom: 0;
}

.pathway-explanation {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: #fefce8;
    border: 1px solid #fde68a;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    color: #92400e;
}

.pathway-explanation svg {
    flex-shrink: 0;
    color: #f59e0b;
}

.pathway-explanation p {
    margin: 0;
}

@media (max-width: 600px) {
    .pathway-card {
        flex-direction: column;
    }

    .pathway-card__header {
        flex-direction: column;
    }

    .pathway-card__score {
        text-align: left;
    }

    .pathway-card__score-bar {
        width: 100%;
    }
}

/* Result cards */
.result-card {
    position: relative;
    background-color: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    overflow: hidden;
}

/* Score-based green background - opacity tied to fit score (0-100 percentage) */
.result-card__score-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgb(72, 187, 120);
    opacity: calc(var(--score, 0) / 100 * 0.3);
    pointer-events: none;
}

/* Ensure content appears above the background */
.result-card__header,
.result-card__score {
    position: relative;
    z-index: 1;
}

/* Gold star for top match */
.result-card__top-match {
    color: rgb(234, 179, 8);
    font-size: 1.1em;
    margin-left: var(--space-xs);
    cursor: help;
}

.result-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.result-card__title {
    font-size: var(--font-size-base);
    margin: 0;
}

.result-card__badge {
    font-size: 10px;
    padding: 2px var(--space-sm);
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background-color: var(--color-surface);
    color: var(--color-text-light);
}

.result-card__badge--full-studio {
    background-color: #e8f5e9;
    color: #2e7d32;
}

.result-card__badge--limited {
    background-color: #fff3e0;
    color: #ef6c00;
}

.result-card__badge--home-basics {
    background-color: #e3f2fd;
    color: #1565c0;
}

.result-card__score {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.result-card__score-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

.result-card__score-value {
    font-weight: 600;
    color: var(--color-primary);
}

.result-card__score-bar {
    height: 4px;
    background-color: var(--color-border);
    border-radius: 2px;
    margin-top: var(--space-sm);
}

.result-card__score-fill {
    height: 100%;
    background-color: var(--color-primary);
    border-radius: 2px;
}

/* Result card info button */
.result-card__info-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.75rem;
    padding: 0.5rem 0.875rem;
    background: var(--color-primary);
    border: none;
    border-radius: 6px;
    color: white;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
    z-index: 1;
}

.result-card__info-btn:hover {
    background: var(--color-primary-dark, #4a5568);
    transform: translateY(-1px);
}

.result-card__info-btn:active {
    transform: translateY(0);
}

.result-card__info-btn svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

/* V5.0: Why suggested section in result cards */
.result-card__why {
    margin-top: var(--space-sm);
    padding: var(--space-sm);
    background-color: rgba(var(--color-primary-rgb, 0, 0, 0), 0.05);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
}

.result-card__why-label {
    display: block;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: var(--space-xs);
}

.result-card__why-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.result-card__why-item {
    padding: var(--space-xs) 0;
    border-bottom: 1px solid var(--color-border);
    line-height: 1.4;
}

.result-card__why-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.result-card__why-item strong {
    color: var(--color-primary);
}

/*
 * "Look for" note: in-session observation guidance shown directly on each
 * material/method tile (below the "why suggested" reasons, not in the modal).
 * Kept small and muted so it reads as a supporting hint, not a primary action.
 */
.result-card__look-for {
    margin-top: var(--space-sm);
    font-size: var(--font-size-sm);
    line-height: 1.4;
    color: var(--color-text-muted, #5c5c5c);
}

.result-card__look-for-label {
    color: var(--color-primary);
}

/* V5.0: Refinements section */
.results-section--refinements {
    background-color: var(--color-bg-alt, #f9f7f5);
}

.refinements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-md);
}

.refinement-card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}

.refinement-card--top {
    border-color: var(--color-primary);
    border-width: 2px;
}

.refinement-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.refinement-card__title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin: 0;
}

.refinement-card__badge {
    background-color: var(--color-primary);
    color: white;
    font-size: var(--font-size-xs);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

.refinement-card__meaning {
    color: var(--color-text);
    margin-bottom: var(--space-sm);
    line-height: 1.5;
}

.refinement-card__language {
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-sm);
    padding: var(--space-sm);
    background-color: var(--color-bg-alt, #f5f5f5);
    border-radius: var(--radius-sm);
}

.refinement-card__why {
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--color-border);
}

.refinement-card__why-label {
    display: block;
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    margin-bottom: var(--space-xs);
}

.refinement-card__why-list {
    list-style: disc;
    padding-left: var(--space-md);
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

.refinement-card__why-list li {
    margin-bottom: var(--space-xs);
}

/* Structure grid - all items in one row */
.structure-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
}

.structure-item {
    flex: 1 1 150px;
    background-color: var(--color-surface);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    text-align: center;
}

.structure-item__icon {
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
}

.structure-item__label {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    margin-bottom: var(--space-xs);
}

.structure-item__value {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
}

.structure-item__description {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

.structure-item__depth-bar {
    height: 6px;
    background-color: var(--color-border);
    border-radius: 3px;
    margin-top: var(--space-md);
}

.structure-item__depth-fill {
    height: 100%;
    background-color: var(--color-primary);
    border-radius: 3px;
}

/* Results details (collapsible) */
.results-details {
    margin-top: var(--space-xl);
    background-color: var(--color-surface);
    border-radius: var(--radius-md);
}

.results-details__toggle {
    padding: var(--space-md);
    cursor: pointer;
    font-weight: 500;
}

.results-details__content {
    padding: var(--space-md);
}

.rank-section {
    margin-bottom: var(--space-lg);
}

.rank-bars {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.rank-bar {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.rank-bar__label {
    width: 100px;
    font-size: var(--font-size-sm);
    text-transform: capitalize;
}

.rank-bar__track {
    flex: 1;
    height: 8px;
    background-color: var(--color-border);
    border-radius: 4px;
}

.rank-bar__fill {
    height: 100%;
    background-color: var(--color-primary);
    border-radius: 4px;
}

.rank-bar__value {
    width: 50px;
    text-align: right;
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

/* Results actions */
.results-actions {
    background-color: var(--color-surface);
    padding: var(--space-xl);
    margin-top: var(--space-xl);
    border-radius: var(--radius-lg);
}

.results-actions__buttons {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-wrap: wrap;
}

/* Session save info (retrieval code) */
.session-save-info {
    margin-top: var(--space-lg);
    padding: var(--space-md) var(--space-lg);
    background: linear-gradient(135deg, #e8f5e9 0%, #e3f2fd 100%);
    border-radius: var(--radius-md);
    text-align: center;
    border: 1px solid var(--color-border);
}

.session-save-info__text {
    margin: 0 0 var(--space-xs) 0;
    font-size: 1rem;
}

.session-save-info__code {
    font-family: monospace;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-primary);
    background: white;
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-sm);
    border: 2px solid var(--color-primary);
    margin-left: var(--space-sm);
    letter-spacing: 0.1em;
}

.session-save-info__hint {
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

/* Results incomplete */
.results-incomplete {
    text-align: center;
    padding: var(--space-2xl);
}

.results-incomplete__message {
    background-color: var(--color-surface);
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    max-width: 500px;
    margin: 0 auto;
}

/* -------------------------------------------------------------------------
   6.11 Educational Tip Block
   ------------------------------------------------------------------------- */

.educational-tip {
    display: flex;
    gap: var(--space-md);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-lg);
}

.educational-tip--info {
    background-color: #e3f2fd;
    border-left: 4px solid var(--color-info);
}

.educational-tip--tip {
    background-color: #e8f5e9;
    border-left: 4px solid var(--color-success);
}

.educational-tip--warning {
    background-color: #fff3e0;
    border-left: 4px solid var(--color-warning);
}

.educational-tip--clinical {
    background-color: #f3e5f5;
    border-left: 4px solid #9c27b0;
}

.educational-tip__icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

.educational-tip--info .educational-tip__icon { color: var(--color-info); }
.educational-tip--tip .educational-tip__icon { color: var(--color-success); }
.educational-tip--warning .educational-tip__icon { color: var(--color-warning); }
.educational-tip--clinical .educational-tip__icon { color: #9c27b0; }

.educational-tip__title {
    display: block;
    margin-bottom: var(--space-xs);
}

.educational-tip__text p:last-child {
    margin-bottom: 0;
}

/* -------------------------------------------------------------------------
   6.12 Info Card Block
   ------------------------------------------------------------------------- */

.info-card {
    display: block;
    background-color: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: box-shadow 0.2s, transform 0.2s;
}

.info-card--linked {
    text-decoration: none;
    color: inherit;
}

.info-card--linked:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    text-decoration: none;
}

.info-card__image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.info-card__body {
    padding: var(--space-lg);
}

.info-card__title {
    margin-bottom: var(--space-sm);
}

.info-card__description {
    color: var(--color-text-light);
    margin-bottom: var(--space-md);
}

.info-card__link-indicator {
    color: var(--color-primary);
    font-weight: 500;
}

/* -------------------------------------------------------------------------
   6.13 Article Styles
   ------------------------------------------------------------------------- */

.article-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-lg);
}

.article-card {
    background-color: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.article-card__image img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.article-card__body {
    padding: var(--space-lg);
}

.article-card__title a {
    color: var(--color-text);
    text-decoration: none;
}

.article-card__title a:hover {
    color: var(--color-primary);
}

.article-card__subtitle {
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-sm);
}

.article-card__date {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

/* Article header */
.article-header {
    margin-bottom: var(--space-xl);
}

.article-header__image img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

.article-breadcrumb {
    margin-bottom: var(--space-md);
}

.article-breadcrumb__list {
    display: flex;
    gap: var(--space-sm);
    list-style: none;
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

.article-breadcrumb__list li:not(:last-child)::after {
    content: '/';
    margin-left: var(--space-sm);
}

.article-header__title {
    margin-bottom: var(--space-md);
}

.article-header__subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-text-light);
    margin-bottom: var(--space-md);
}

.article-header__meta {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

/* Article body */
.article-body {
    padding: var(--space-xl) 0;
}

.article-block {
    margin-bottom: var(--space-lg);
}

/* Article footer */
.article-footer {
    padding-top: var(--space-xl);
    border-top: 1px solid var(--color-border);
}

.article-nav__back {
    display: inline-block;
    margin-bottom: var(--space-xl);
}

.related-articles__title {
    margin-bottom: var(--space-md);
}

.related-articles__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

/* -------------------------------------------------------------------------
   6.14 Step Preview Cards (Wizard Index)
   ------------------------------------------------------------------------- */

.step-preview-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}

.step-preview-card {
    background-color: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    text-align: center;
}

.step-preview-card__image {
    margin: calc(-1 * var(--space-lg));
    margin-bottom: var(--space-md);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    overflow: hidden;
}

.step-preview-card__image img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
}

.step-preview-card__number {
    width: 40px;
    height: 40px;
    background-color: var(--color-primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin: 0 auto var(--space-md);
}

.step-preview-card__title {
    margin-bottom: var(--space-sm);
}

.step-preview-card__description {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    margin: 0;
}

/* Wizard CTA section */
.wizard-cta {
    text-align: center;
    padding: var(--space-xl) 0;
}

/* Session action buttons */
.session-actions {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-wrap: wrap;
}

/* Session form (new session / retrieve session) */
.session-form {
    max-width: 400px;
    margin: 0 auto;
    padding: var(--space-lg);
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    text-align: left;
}

.session-form__title {
    margin: 0 0 var(--space-xs) 0;
    font-size: 1.2rem;
    color: var(--color-text);
}

.session-form__hint {
    margin: 0 0 var(--space-md) 0;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.session-form__field {
    margin-bottom: var(--space-md);
}

.session-form__input {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 1rem;
}

.session-form__input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(74, 144, 164, 0.1);
}

.session-form__input--code {
    font-family: monospace;
    font-size: 1.2rem;
    letter-spacing: 0.1em;
    text-align: center;
}

.session-form__actions {
    display: flex;
    gap: var(--space-sm);
    justify-content: flex-end;
}

/* Current session info display */
.current-session-info {
    margin-top: var(--space-lg);
    padding: var(--space-md);
    background: var(--color-surface);
    border-radius: var(--radius-md);
    display: inline-block;
}

.current-session-info__text {
    margin: 0;
    font-size: 0.95rem;
}

.current-session-info__code {
    font-family: monospace;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-primary);
    background: white;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
}

.current-session-info__hint {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-left: var(--space-xs);
}

/* -------------------------------------------------------------------------
   6.15 Navigation Cards (Home)
   ------------------------------------------------------------------------- */

.nav-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
}

.nav-card {
    display: block;
    background-color: white;
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s, transform 0.2s;
    overflow: hidden;
    border: 1px solid var(--color-border);
}

.nav-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
    text-decoration: none;
}

/* Nav card with image - horizontal layout */
.nav-card--with-image {
    display: flex;
    flex-direction: row;
    min-height: 200px;
}

.nav-card__image {
    flex: 0 0 50%;
    overflow: hidden;
}

.nav-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nav-card__content {
    flex: 1;
    padding: var(--space-xl);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.nav-card__title {
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
    font-size: var(--font-size-xl);
}

.nav-card__description {
    color: var(--color-text-light);
    font-size: var(--font-size-base);
    margin: 0;
}

/* Fallback when no image - center content */
.nav-card--with-image:not(:has(.nav-card__image)) .nav-card__content {
    padding: var(--space-2xl);
}

/* Home navigation section */
.home-navigation {
    padding: var(--space-2xl) 0;
    background-color: var(--color-surface);
}

.home-content {
    padding: var(--space-2xl) 0;
}

/* Back navigation */
.back-nav {
    padding: var(--space-xl) 0;
}


/* =============================================================================
   7. Utilities
   =============================================================================
*/

/* Hide visually but keep accessible to screen readers */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Text alignment */
.text-center { text-align: center; }
.text-right { text-align: right; }

/* Margin utilities */
.mt-md { margin-top: var(--space-md); }
.mb-md { margin-bottom: var(--space-md); }
.my-lg { margin-top: var(--space-lg); margin-bottom: var(--space-lg); }


/* =============================================================================
   8. Phase 5 Polish Styles
   =============================================================================
   UI polish additions for professional feel and better UX.
   Added: March 2026
*/

/* -------------------------------------------------------------------------
   8.1 Coming Soon Badge & Placeholders (Task 5.2, 5.3)
   Used for features not yet implemented - clearer than disabled buttons.
   ------------------------------------------------------------------------- */

/* Coming Soon badge - small inline indicator */
.coming-soon-badge {
    display: inline-block;
    padding: var(--space-xs) var(--space-sm);
    background-color: var(--color-surface);
    color: var(--color-text-light);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--radius-sm);
    border: 1px dashed var(--color-border);
}

/* Large version for hero/prominent placement */
.coming-soon-badge--large {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-sm);
}

/* Wrapper for button placeholder with coming soon badge */
.btn-coming-soon {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
}

/* Muted button style - looks like a button but clearly inactive */
.btn--muted {
    opacity: 0.6;
    cursor: default;
    pointer-events: none;
    filter: grayscale(30%);
}

/* Hero coming soon placeholder (Task 5.3) */
.hero__coming-soon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-lg);
}

.hero__coming-soon-text {
    font-size: var(--font-size-base);
    opacity: 0.8;
}

/* -------------------------------------------------------------------------
   8.2 Session Flash Messages / Tips (Task 5.1)
   Warning and info messages displayed to users.
   ------------------------------------------------------------------------- */

/* Tip component for flash messages */
.tip {
    display: flex;
    gap: var(--space-md);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-lg);
}

.tip--warning {
    background-color: #fff3e0;
    border-left: 4px solid var(--color-warning);
}

.tip--info {
    background-color: #e3f2fd;
    border-left: 4px solid var(--color-info);
}

.tip--success {
    background-color: #e8f5e9;
    border-left: 4px solid var(--color-success);
}

.tip__icon {
    flex-shrink: 0;
    font-size: var(--font-size-lg);
}

.tip__text {
    margin: 0;
    color: var(--color-text);
}

/* -------------------------------------------------------------------------
   8.3 Mobile Responsiveness (Task 5.4)
   Additional breakpoints for better mobile experience.
   ------------------------------------------------------------------------- */

/* Focus color for accessibility */
:root {
    --color-focus: #4A90D9;
    --min-touch-target: 44px;
}

/* Tablets - adjust grid columns */
@media (max-width: 1024px) {
    /* Reduce container padding on tablets */
    .container {
        padding: 0 var(--space-md);
    }

    /* Adjust selection cards for tablet */
    .selection-cards {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }

    /* Adjust results grid */
    .results-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }

    /* Structure grid - 2 columns on tablets */
    .structure-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Small screens / phones */
@media (max-width: 768px) {
    /* Already handled: wizard-layout becomes single column */

    /* Make wizard sidebar horizontal on mobile */
    .wizard-sidebar {
        position: static;
        padding: var(--space-md);
    }

    /* Results actions stack on mobile */
    .results-actions__buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .results-actions__buttons .btn {
        width: 100%;
    }

    /* Hero adjustments */
    .hero {
        padding: var(--space-xl) var(--space-md);
    }

    .hero__title {
        font-size: var(--font-size-2xl);
    }

    /* Reduce step preview cards */
    .step-preview-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-sm);
    }

    .step-preview-card {
        padding: var(--space-md);
    }

    .step-preview-card__image {
        margin: calc(-1 * var(--space-md));
        margin-bottom: var(--space-sm);
    }

    .step-preview-card__image img {
        height: 120px;
    }

    /* Navigation cards stack */
    .nav-cards {
        grid-template-columns: 1fr;
    }

    /* Nav cards with images stack vertically on mobile */
    .nav-card--with-image {
        flex-direction: column;
    }

    .nav-card__image {
        flex: 0 0 auto;
        height: 200px;
    }
}

/* Extra small screens (portrait phones) */
@media (max-width: 480px) {
    /* Increase base font for readability */
    html {
        font-size: 17px;
    }

    /* Increase touch target sizes */
    .btn {
        min-height: var(--min-touch-target);
        padding: var(--space-md) var(--space-lg);
    }

    .btn--large {
        padding: var(--space-md) var(--space-xl);
    }

    /* Selection cards - single column on phones */
    .selection-cards {
        grid-template-columns: 1fr;
    }

    /* Make selection cards taller for easier tapping */
    .selection-card {
        min-height: 80px;
        padding: var(--space-md);
    }

    /* Results grid - single column */
    .results-grid {
        grid-template-columns: 1fr;
    }

    /* Structure grid - single column on phones */
    .structure-grid {
        grid-template-columns: 1fr;
    }

    /* Step preview - single column */
    .step-preview-grid {
        grid-template-columns: 1fr;
    }

    /* Reduce header/section padding */
    .page-header,
    .results-header {
        padding: var(--space-lg);
    }

    /* Full-width buttons on mobile */
    .wizard-nav {
        flex-direction: column;
    }

    .wizard-nav .btn {
        width: 100%;
    }

    /* Adjust hero spacing */
    .hero {
        padding: var(--space-lg) var(--space-md);
    }

    .hero__title {
        font-size: 1.75rem;
    }

    .hero__subtitle {
        font-size: var(--font-size-base);
    }
}

/* -------------------------------------------------------------------------
   8.4 Accessibility Improvements (Task 5.5)
   Focus states, skip links, and screen reader helpers.
   ------------------------------------------------------------------------- */

/* Visible focus states for keyboard navigation */
:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
}

/* Remove default focus outline - we're using :focus-visible */
:focus:not(:focus-visible) {
    outline: none;
}

/* Button focus states */
.btn:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(74, 144, 217, 0.2);
}

/* Selection card focus state - important for keyboard users */
.selection-card:focus-within {
    border-color: var(--color-focus);
    box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.2);
}

.selection-card__input:focus-visible + .selection-card__content {
    /* Indicate focus on the card content when input is focused */
}

/* Skip to main content link - visible on focus for keyboard users */
.skip-link {
    position: absolute;
    top: -100px;
    left: var(--space-md);
    background: var(--color-primary);
    color: white;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    z-index: 1000;
    text-decoration: none;
    font-weight: 500;
}

.skip-link:focus {
    top: var(--space-md);
}

/* Screen reader only - visible when focused */
.sr-only-focusable:focus,
.sr-only-focusable:active {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
}

/* Details/summary expand indicator (Task 5.10) */
details summary {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    cursor: pointer;
    user-select: none;
}

details summary::after {
    content: '▸';
    font-size: var(--font-size-sm);
    transition: transform 0.2s ease;
    margin-left: auto;
}

details[open] summary::after {
    transform: rotate(90deg);
}

/* Ensure summary is focusable */
summary:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* -------------------------------------------------------------------------
   8.5 Loading States (Task 5.6, 5.7)
   Visual feedback during async operations.
   ------------------------------------------------------------------------- */

/* Loading state for buttons */
.btn--loading {
    position: relative;
    pointer-events: none;
    color: transparent;
}

.btn--loading::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Primary button loading - white spinner */
.btn--primary.btn--loading::after {
    border-color: rgba(255, 255, 255, 0.3);
    border-top-color: white;
}

/* Loading text helper */
.loading-text {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
}

/* HTMX loading indicator - hidden by default, shown during request */
.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
}

/* Hide button text during loading */
.htmx-request .btn-text {
    /* visibility: hidden; */
}

/* Small inline spinner */
.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.spinner--white {
    border-color: rgba(255, 255, 255, 0.3);
    border-top-color: white;
}

/* -------------------------------------------------------------------------
   8.6 Form Validation (Task 5.8)
   Visual feedback for form validation states.
   ------------------------------------------------------------------------- */

/* Validation hint message - positioned absolutely to prevent layout shift */
.validation-hint {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    font-size: var(--font-size-sm);
    color: var(--color-warning);
    margin-top: var(--space-sm);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.validation-hint::before {
    content: '⚠';
}

/* Selection counter for multi-select */
.selection-counter {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    margin-bottom: var(--space-md);
}

.selection-counter__count {
    font-weight: 600;
    color: var(--color-primary);
}

/* -------------------------------------------------------------------------
   8.7 Button Polish (Task 5.9)
   Enhanced hover, focus, and active states.
   ------------------------------------------------------------------------- */

/* Enhanced button transitions */
.btn {
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        background-color 0.15s ease,
        border-color 0.15s ease;
}

/* Subtle lift on hover */
.btn:hover:not(:disabled):not(.btn--disabled):not(.btn--muted) {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Pressed/active state */
.btn:active:not(:disabled):not(.btn--disabled):not(.btn--muted) {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

/* Primary button enhanced hover */
.btn--primary:hover:not(:disabled) {
    background-color: var(--color-primary-dark);
    box-shadow: 0 4px 12px rgba(74, 144, 164, 0.3);
}

/* -------------------------------------------------------------------------
   8.8 Typography Polish (Task 5.11)
   Refined typography for better readability.
   ------------------------------------------------------------------------- */

/* Font smoothing for crisper text */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Tighter heading spacing */
h1, h2, h3 {
    letter-spacing: -0.02em;
    line-height: 1.2;
}

h1 {
    letter-spacing: -0.03em;
}

/* Text truncation utility */
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Multi-line truncation (2 lines) */
.text-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* -------------------------------------------------------------------------
   8.9 Score Visualization (Task 5.12)
   Color-coded score badges for results.
   ------------------------------------------------------------------------- */

/* Score badge with color coding */
.score-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 var(--space-sm);
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: var(--font-size-sm);
}

/* High score (4-5) - green */
.score-badge--high {
    background-color: #e8f5e9;
    color: #2e7d32;
}

/* Medium score (2-3) - amber */
.score-badge--medium {
    background-color: #fff3e0;
    color: #ef6c00;
}

/* Low score (0-1) - gray */
.score-badge--low {
    background-color: var(--color-surface);
    color: var(--color-text-light);
}

/* Enhanced result card score display */
.result-card__score-value.score-badge {
    margin-left: auto;
}

/* -------------------------------------------------------------------------
   8.10 Additional Utility Classes
   Commonly needed utilities.
   ------------------------------------------------------------------------- */

/* Alpine.js x-cloak - hide elements until Alpine initializes */
[x-cloak] {
    display: none !important;
}

/* Display utilities */
.hidden {
    display: none !important;
}

.block {
    display: block;
}

.inline-block {
    display: inline-block;
}

.flex {
    display: flex;
}

.inline-flex {
    display: inline-flex;
}

/* Flex utilities */
.flex-col {
    flex-direction: column;
}

.items-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.gap-sm {
    gap: var(--space-sm);
}

.gap-md {
    gap: var(--space-md);
}

/* Width utilities */
.w-full {
    width: 100%;
}

/* Opacity utilities */
.opacity-50 {
    opacity: 0.5;
}

.opacity-75 {
    opacity: 0.75;
}


/* =============================================================================
   9. Login Page Styles
   =============================================================================
   Styles for the staff login page.
*/

.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    padding: var(--space-lg);
}

.login-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    width: 100%;
    max-width: 400px;
    box-shadow: var(--shadow-md);
}

.login-card h1 {
    margin-bottom: var(--space-xs);
    font-size: var(--font-size-xl);
    text-align: center;
}

.login-subtitle {
    color: var(--color-text-light);
    text-align: center;
    margin-bottom: var(--space-lg);
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.form-group label {
    font-weight: 500;
    font-size: var(--font-size-sm);
}

.form-input {
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-base);
    width: 100%;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(74, 144, 164, 0.2);
}

.btn--full-width {
    width: 100%;
}

.login-footer {
    margin-top: var(--space-lg);
    text-align: center;
    font-size: var(--font-size-sm);
}

.login-footer a {
    color: var(--color-primary);
}


/* =============================================================================
   10. Profile Dropdown Styles
   =============================================================================
   Styles for the profile dropdown in the header.
*/

.profile-dropdown {
    position: relative;
}

.profile-btn {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    color: var(--color-text);
    cursor: pointer;
    font-size: 0.8rem;
    transition: background 0.15s ease;
}

.profile-btn:hover {
    background: var(--color-border);
}

.profile-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: var(--color-primary);
    color: white;
    border-radius: 50%;
    font-weight: 600;
    font-size: 0.7rem;
}

.profile-name {
    font-weight: 500;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-caret {
    font-size: 0.75rem;
    transition: transform 0.15s ease;
}

.profile-caret.open {
    transform: rotate(180deg);
}

.profile-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: var(--space-xs);
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    min-width: 180px;
    z-index: 100;
    overflow: hidden;
}

.profile-menu-item {
    display: block;
    padding: var(--space-sm) var(--space-md);
    color: var(--color-text);
    text-decoration: none;
    font-size: var(--font-size-sm);
    transition: background 0.15s ease;
}

.profile-menu-item:hover {
    background: var(--color-surface);
    color: var(--color-primary);
}

.profile-menu-divider {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 0;
}

/* Hide dropdown content until Alpine.js initializes */
[x-cloak] {
    display: none !important;
}


/* =============================================================================
   11. Tutorial Page Styles
   =============================================================================
   Styles for the CMS tutorial page.
*/

.tutorial {
    max-width: 800px;
    margin: 0 auto;
}

.tutorial h1 {
    margin-bottom: var(--space-sm);
}

.tutorial__intro {
    font-size: var(--font-size-lg);
    color: var(--color-text-light);
    margin-bottom: var(--space-xl);
}

.tutorial__toc {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.tutorial__toc h2 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-md);
}

.tutorial__toc ol {
    margin-left: var(--space-lg);
}

.tutorial__toc li {
    margin-bottom: var(--space-xs);
}

.tutorial__toc a {
    color: var(--color-primary);
    text-decoration: none;
}

.tutorial__toc a:hover {
    text-decoration: underline;
}

.tutorial__section {
    margin-bottom: var(--space-2xl);
    padding-bottom: var(--space-xl);
    border-bottom: 1px solid var(--color-border);
}

.tutorial__section:last-of-type {
    border-bottom: none;
}

.tutorial__section h2 {
    color: var(--color-primary);
    margin-bottom: var(--space-md);
}

.tutorial__section h3 {
    margin-top: var(--space-lg);
    margin-bottom: var(--space-sm);
}

.tutorial__section p,
.tutorial__section ul,
.tutorial__section ol {
    margin-bottom: var(--space-md);
}

.tutorial__section ul,
.tutorial__section ol {
    margin-left: var(--space-lg);
}

.tutorial__section li {
    margin-bottom: var(--space-xs);
}

.tutorial__code {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    font-family: monospace;
    font-size: var(--font-size-sm);
    overflow-x: auto;
    white-space: pre;
}

.tutorial__table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--space-md);
}

.tutorial__table th,
.tutorial__table td {
    text-align: left;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-border);
}

.tutorial__table th {
    background: var(--color-surface);
    font-weight: 600;
}

.tutorial__table tr:nth-child(even) td {
    background: var(--color-surface);
}

.tutorial__footer {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    padding-top: var(--space-xl);
}

/* =========================================================================
   V4.1: Results Page Enhancements
   ========================================================================= */

/* Transition text before results */
.results-header__transition {
    margin-top: var(--space-lg);
    padding: var(--space-md);
    background: var(--color-surface);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-primary);
}

.results-header__transition p {
    margin: 0;
    color: var(--color-text-muted);
    font-style: italic;
}

/* Refinement notes section */
.results-section--refinements {
    background: linear-gradient(135deg, #f5f0ff 0%, #e8f4f8 100%);
    border: 1px solid var(--color-border);
}

.refinement-list {
    list-style: none;
    padding: 0;
    margin: var(--space-md) 0 0 0;
}

.refinement-list__item {
    padding: var(--space-sm) var(--space-md);
    background: white;
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-sm);
    border-left: 3px solid var(--color-accent);
}

.refinement-list__item strong {
    color: var(--color-primary);
}

/* Session reflection section */
.results-section--reflection {
    background: var(--color-surface);
    border: 1px dashed var(--color-border);
    padding: var(--space-lg);
}

.reflection-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-sm);
}

.reflection-header .results-section__title {
    margin-bottom: 0;
}

/* Reflection form */
.reflection-form {
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border);
}

.reflection-form__field {
    margin-bottom: var(--space-lg);
}

.reflection-form__label {
    display: block;
    font-weight: 600;
    margin-bottom: var(--space-sm);
    color: var(--color-text);
}

.reflection-form__label--small {
    font-weight: 500;
    font-size: 0.9rem;
}

.reflection-form__options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
}

.reflection-form__options--multi {
    gap: var(--space-sm);
}

.reflection-form__radio,
.reflection-form__checkbox {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    cursor: pointer;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    transition: background-color 0.2s;
}

.reflection-form__radio:hover,
.reflection-form__checkbox:hover {
    background: var(--color-surface-hover);
}

.reflection-form__radio input,
.reflection-form__checkbox input {
    accent-color: var(--color-primary);
}

.reflection-form__subfield {
    margin-top: var(--space-md);
    padding-left: var(--space-lg);
}

.reflection-form__textarea {
    width: 100%;
    padding: var(--space-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 1rem;
    resize: vertical;
}

.reflection-form__textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.1);
}

.reflection-form__actions {
    display: flex;
    justify-content: flex-end;
    padding-top: var(--space-md);
}

/* Actions hint */
.results-actions__hint {
    text-align: center;
    margin-bottom: var(--space-md);
    color: var(--color-text-muted);
    font-style: italic;
}

.results-actions__sidebar-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    margin-top: var(--space-md);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.results-actions__sidebar-hint svg {
    flex-shrink: 0;
    color: var(--color-primary);
}


/* =============================================================================
   SHARED RESULTS PAGE (PUBLIC)
   ============================================================================= */

.shared-results {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--space-lg);
}

.shared-results__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-border);
}

.shared-results__info {
    flex: 1;
}

.shared-results__name {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 var(--space-xs) 0;
}

.shared-results__date {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: 0;
}

.shared-results .results-header {
    margin-bottom: var(--space-xl);
}

.shared-results .results-content {
    margin-bottom: var(--space-xl);
}

.shared-results__footer {
    text-align: center;
    padding: var(--space-xl) 0;
    border-top: 1px solid var(--color-border);
    margin-top: var(--space-xl);
}

.shared-results__branding {
    color: var(--color-text-muted);
    margin-bottom: var(--space-sm);
}

.shared-results__code {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

/* Refinements display in selections */
.results-refinements {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px dashed var(--color-border);
}

.results-refinements h3 {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--space-sm);
}

.results-refinements ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.results-refinements li {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    margin-bottom: var(--space-xs);
}

/* Intervention Templates */
.intervention-templates {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.intervention-template {
    background: var(--color-surface-alt);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-primary);
    line-height: 1.6;
}

/* Clinical Analysis Grid */
.analysis-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
}

.analysis-column {
    background: var(--color-surface);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}

.analysis-column__title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-border);
}

.analysis-item {
    display: flex;
    justify-content: space-between;
    padding: var(--space-xs) 0;
}

.analysis-item__label {
    color: var(--color-text-light);
}

.analysis-item__value {
    font-weight: 500;
    color: var(--color-text);
}

/* Reflection Data Display */
.reflection-data {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}

.reflection-data__item {
    background: var(--color-surface);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}

.reflection-data__item--full {
    grid-column: 1 / -1;
}

.reflection-data__label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-light);
    margin-bottom: var(--space-xs);
}

.reflection-data__value {
    color: var(--color-text);
}

.reflection-data__text {
    color: var(--color-text);
    margin: 0;
    line-height: 1.6;
}

@media (max-width: 600px) {
    .analysis-grid,
    .reflection-data {
        grid-template-columns: 1fr;
    }
}


/* =============================================================================
   RESPONSIVE STYLES FOR REDESIGNED PAGES
   ============================================================================= */

/* Mobile Navigation - Hamburger Menu */
@media (max-width: 900px) {
    /* Hide main nav on mobile by default */
    .nav-main {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: var(--color-surface);
        flex-direction: column;
        padding: var(--space-lg);
        gap: var(--space-md);
        border-top: 1px solid var(--color-border-light);
        box-shadow: var(--shadow-md);
    }

    .nav-main.is-open {
        display: flex;
    }

    .nav-main a {
        padding: var(--space-md) 0;
        font-size: var(--font-size-base);
    }

    /* Hamburger button */
    .nav-hamburger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 30px;
        height: 30px;
        cursor: pointer;
        background: none;
        border: none;
        padding: 0;
    }

    .nav-hamburger span {
        display: block;
        width: 100%;
        height: 2px;
        background-color: var(--color-text);
        transition: transform 0.2s ease;
    }

    header nav {
        position: relative;
    }
}

@media (min-width: 901px) {
    .nav-hamburger {
        display: none;
    }
}

/* Hero Section - Mobile */
@media (max-width: 900px) {
    .hero {
        padding: var(--space-2xl) var(--space-lg);
    }

    .hero__container {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    .hero__content {
        text-align: center;
    }

    .hero__title {
        font-size: var(--font-size-3xl);
    }

    .hero__subtitle {
        font-size: var(--font-size-lg);
    }

    .hero__decoration-lines {
        display: none;
    }

    .hero__image-container {
        order: -1;
        max-width: 400px;
        margin: 0 auto;
    }

    .hero__decoration-grid {
        display: none;
    }
}

/* Feature Section - Mobile */
@media (max-width: 900px) {
    .feature-section {
        padding: var(--space-2xl) var(--space-lg);
    }

    .feature-section__container {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    .feature-section--reversed .feature-section__container {
        direction: ltr;
    }

    .feature-section__image-container {
        max-width: 400px;
        margin: 0 auto;
    }

    .feature-section__title {
        font-size: var(--font-size-2xl);
        text-align: center;
    }

    .feature-section__content {
        text-align: center;
        max-width: 100%;
    }

    .feature-section__cta {
        text-align: center;
    }

    .feature-section__decoration-bars {
        display: none;
    }
}

/* Quotes Section - Mobile */
@media (max-width: 700px) {
    .quotes-section {
        padding: var(--space-2xl) var(--space-lg);
    }

    .quotes-grid {
        grid-template-columns: 1fr;
    }

    .quote-card {
        padding: var(--space-lg);
    }

    .quote-card__text {
        font-size: var(--font-size-base);
    }
}

/* Feature Section Text Content */
.feature-section__text-content {
    font-size: var(--font-size-base);
    color: var(--color-text-light);
    line-height: 1.8;
}

.feature-section__text-content p {
    margin-bottom: var(--space-md);
}

.feature-section__text-content p:last-child {
    margin-bottom: var(--space-xl);
}


/* =============================================================================
   WIZARD LANDING PAGE
   =============================================================================
   Styles for the intervention wizard index/landing page.
   Clean, focused design with timeline and clear CTAs.
   ============================================================================= */

.wizard-landing {
    min-height: calc(100vh - 200px);
}

/* Hero Section */
.wizard-hero {
    background: linear-gradient(135deg, var(--color-surface-alt) 0%, var(--color-background) 100%);
    padding: var(--space-3xl) var(--space-lg);
    text-align: center;
    border-bottom: 1px solid var(--color-border);
}

.wizard-hero__content {
    max-width: 600px;
    margin: 0 auto;
}

.wizard-hero__title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 5vw, 2.75rem);
    font-weight: 500;
    color: var(--color-accent);
    margin-bottom: var(--space-sm);
    letter-spacing: -0.02em;
}

.wizard-hero__subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-text-light);
    margin-bottom: var(--space-xl);
    line-height: 1.6;
}

/* Alert Messages */
.wizard-alert {
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
    font-size: var(--font-size-sm);
}

.wizard-alert--warning {
    background-color: #FEF3CD;
    color: #856404;
    border: 1px solid #FFE69C;
}

/* Hero Buttons */
.wizard-hero__buttons {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    max-width: 320px;
    margin: 0 auto;
}

.wizard-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
    text-decoration: none;
}

.wizard-btn svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.wizard-btn--primary {
    background-color: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

.wizard-btn--primary:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(201, 123, 99, 0.3);
}

.wizard-btn--secondary {
    background-color: white;
    color: var(--color-text);
    border-color: var(--color-border);
}

.wizard-btn--secondary:hover {
    background-color: var(--color-surface-alt);
    border-color: var(--color-text-muted);
}

.wizard-btn--ghost {
    background: transparent;
    color: var(--color-text-light);
    border-color: transparent;
    padding: var(--space-sm) var(--space-md);
}

.wizard-btn--ghost:hover {
    color: var(--color-text);
    background-color: var(--color-surface-alt);
}

/* Inline Form - used for session name/code inputs on landing page */
.wizard-hero__actions .wizard-form {
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    max-width: 360px;
    margin: 0 auto;
    text-align: left;
}

.wizard-hero__actions .wizard-form h3 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin-bottom: var(--space-xs);
    color: var(--color-text);
}

.wizard-hero__actions .wizard-form p {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    margin-bottom: var(--space-md);
}

.wizard-hero__actions .wizard-form input[type="text"] {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    margin-bottom: var(--space-md);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wizard-hero__actions .wizard-form input[type="text"]:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(201, 123, 99, 0.15);
}

.wizard-hero__actions .wizard-form__buttons {
    display: flex;
    gap: var(--space-sm);
}

.wizard-hero__actions .wizard-form__buttons .wizard-btn {
    flex: 1;
}

/* Current Session Card - shown when user has an active session */
.wizard-current-session {
    margin-bottom: var(--space-md);
}

.wizard-current-session h3 {
    font-family: var(--font-heading);
    font-size: var(--font-size-md);
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: var(--space-sm);
}

.wizard-session-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--color-surface-alt);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}

.wizard-session-card__info {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}

.wizard-session-card__name {
    font-weight: 500;
    color: var(--color-text);
}

.wizard-session-card__code {
    font-family: var(--font-mono, monospace);
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    letter-spacing: 1px;
}

.wizard-btn--sm {
    padding: var(--space-xs) var(--space-md);
    font-size: var(--font-size-sm);
}

/* Divider with text */
.wizard-divider {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin: var(--space-lg) 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.wizard-divider::before,
.wizard-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

/* Steps Section */
.wizard-steps {
    padding: var(--space-2xl) var(--space-lg);
    background-color: var(--color-background);
}

.wizard-steps__heading {
    text-align: center;
    font-family: var(--font-heading);
    font-size: var(--font-size-xl);
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: var(--space-xl);
}

/* Timeline */
.wizard-timeline {
    max-width: 700px;
    margin: 0 auto;
    position: relative;
}

.wizard-timeline::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--color-primary-light), var(--color-secondary));
}

.wizard-timeline__item {
    display: flex;
    gap: var(--space-lg);
    padding-bottom: var(--space-lg);
    position: relative;
}

.wizard-timeline__item:last-child {
    padding-bottom: 0;
}

.wizard-timeline__marker {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    background: white;
    border: 3px solid var(--color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.wizard-timeline__number {
    font-weight: 600;
    font-size: var(--font-size-base);
    color: var(--color-primary);
}

.wizard-timeline__content {
    flex: 1;
    padding-top: var(--space-xs);
}

.wizard-timeline__title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--space-xs);
}

.wizard-timeline__desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    line-height: 1.5;
    margin: 0;
}

/* Info Cards Section */
.wizard-info {
    padding: var(--space-2xl) var(--space-lg);
    background-color: var(--color-surface);
    border-top: 1px solid var(--color-border);
}

.wizard-info__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    max-width: 900px;
    margin: 0 auto;
}

.wizard-info__card {
    text-align: center;
    padding: var(--space-lg);
}

.wizard-info__icon {
    width: 48px;
    height: 48px;
    margin: 0 auto var(--space-md);
    color: var(--color-primary);
}

.wizard-info__icon svg {
    width: 100%;
    height: 100%;
}

.wizard-info__card h3 {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--space-xs);
}

.wizard-info__card p {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    line-height: 1.5;
    margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .wizard-hero {
        padding: var(--space-xl) var(--space-md);
    }

    .wizard-info__grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .wizard-info__card {
        display: flex;
        align-items: center;
        text-align: left;
        gap: var(--space-md);
        padding: var(--space-md);
        background: var(--color-surface-alt);
        border-radius: var(--radius-md);
    }

    .wizard-info__icon {
        margin: 0;
        width: 40px;
        height: 40px;
        flex-shrink: 0;
    }

    .wizard-info__card h3 {
        margin-bottom: 2px;
    }
}

@media (max-width: 480px) {
    .wizard-timeline::before {
        left: 16px;
    }

    .wizard-timeline__marker {
        width: 34px;
        height: 34px;
    }

    .wizard-timeline__number {
        font-size: var(--font-size-sm);
    }
}


/* =============================================================================
   THEME VARIANTS
   =============================================================================
   Apply theme class to <body> to switch styles:
   - theme-simple: Clean, minimal decorations
   - theme-balanced: Default, moderate decorations (current)
   - theme-rich: More visual elements, subtle animations
   
   Usage: <body class="theme-simple"> or <body class="theme-rich">
   ============================================================================= */

/* -----------------------------------------------------------------------------
   THEME A: Simple & Clean
   Minimal decorations, more whitespace, subdued colors
   ----------------------------------------------------------------------------- */

body.theme-simple {
    --color-primary: #B8907A;
    --color-primary-dark: #A57D68;
    --color-primary-light: #D4B8A8;
    --color-secondary: #C5D4CC;
    --color-background: #FFFFFF;
    --color-surface: #FAFAFA;
    --color-surface-alt: #F5F5F5;
}

.theme-simple .hero__decoration-lines,
.theme-simple .hero__decoration-grid,
.theme-simple .hero__decoration-circle,
.theme-simple .feature-section__decoration-bars,
.theme-simple .about-profile__decoration {
    display: none;
}

.theme-simple .hero {
    background-color: var(--color-surface);
    padding: var(--space-2xl) var(--space-xl);
}

.theme-simple .hero__title {
    font-size: var(--font-size-3xl);
}

.theme-simple .feature-section {
    background-color: var(--color-background);
    border-top: 1px solid var(--color-border-light);
}

.theme-simple .quotes-section {
    background-color: var(--color-surface);
}

.theme-simple .quote-card {
    background-color: var(--color-background);
    box-shadow: none;
    border: 1px solid var(--color-border-light);
}

.theme-simple .quote-card::before {
    color: var(--color-border);
    opacity: 0.3;
}

.theme-simple .btn {
    border-radius: var(--radius-md);
    text-transform: none;
    letter-spacing: 0;
}

.theme-simple .nav-main a::after {
    display: none;
}

/* -----------------------------------------------------------------------------
   THEME B: Balanced (Default)
   Already defined in main styles - no overrides needed
   ----------------------------------------------------------------------------- */

body.theme-balanced {
    /* Uses default variables - no changes */
}

/* -----------------------------------------------------------------------------
   THEME C: Rich & Animated
   More visual elements, gradients, subtle animations
   ----------------------------------------------------------------------------- */

body.theme-rich {
    --color-primary: #C46B52;
    --color-primary-dark: #A85640;
    --color-primary-light: #E8A090;
    --color-secondary: #8FB5A3;
    --color-secondary-dark: #6D9A86;
    --color-accent: #3D2E24;
    --color-background: #FBF8F4;
    --color-surface-alt: #F2EBE0;
}

/* Animated decorative elements */
.theme-rich .hero__decoration-lines span {
    animation: pulse-line 3s ease-in-out infinite;
}

.theme-rich .hero__decoration-lines span:nth-child(2) {
    animation-delay: 0.5s;
}

.theme-rich .hero__decoration-lines span:nth-child(3) {
    animation-delay: 1s;
}

@keyframes pulse-line {
    0%, 100% { opacity: 0.4; transform: scaleY(1); }
    50% { opacity: 0.8; transform: scaleY(1.1); }
}

.theme-rich .hero__decoration-circle {
    animation: float 6s ease-in-out infinite;
}

.theme-rich .hero__decoration-circle--small {
    animation-delay: -3s;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* Gradient backgrounds */
.theme-rich .hero {
    background: linear-gradient(135deg, var(--color-surface-alt) 0%, var(--color-background) 100%);
}

.theme-rich .feature-section {
    background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-surface-alt) 100%);
}

.theme-rich .quotes-section {
    background: linear-gradient(135deg, var(--color-surface-alt) 0%, #E8DFD4 100%);
}

/* Enhanced cards with hover effects */
.theme-rich .quote-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.theme-rich .quote-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

/* Button animations */
.theme-rich .btn {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.theme-rich .btn--primary::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.4s ease, height 0.4s ease;
}

.theme-rich .btn--primary:hover::after {
    width: 300px;
    height: 300px;
}

.theme-rich .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(196, 107, 82, 0.3);
}

/* Navigation hover effects */
.theme-rich .nav-main a {
    transition: color 0.3s ease, transform 0.2s ease;
}

.theme-rich .nav-main a:hover {
    transform: translateY(-1px);
}

/* Hero image frame effect */
.theme-rich .hero__image {
    border: 3px solid var(--color-secondary);
    box-shadow: var(--shadow-lg);
}

/* Feature section bars animation */
.theme-rich .feature-section__decoration-bars span {
    animation: grow-bar 2s ease-out infinite;
}

.theme-rich .feature-section__decoration-bars span:nth-child(1) { animation-delay: 0s; }
.theme-rich .feature-section__decoration-bars span:nth-child(2) { animation-delay: 0.2s; }
.theme-rich .feature-section__decoration-bars span:nth-child(3) { animation-delay: 0.4s; }
.theme-rich .feature-section__decoration-bars span:nth-child(4) { animation-delay: 0.6s; }

@keyframes grow-bar {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(1.15); }
}

/* Additional decorative grid pattern */
.theme-rich .hero__decoration-grid {
    opacity: 0.7;
    background-size: 15px 15px;
}

/* Profile page enhancements */
.theme-rich .about-profile__image {
    border: 4px solid var(--color-secondary);
    transition: transform 0.3s ease;
}

.theme-rich .about-profile__image:hover {
    transform: scale(1.02);
}

/* News card hover */
.theme-rich .news-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.theme-rich .news-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}


/* =============================================================================
   THEME SWITCHER (Preview Mode)
   A small floating switcher for testing themes
   ============================================================================= */

.theme-switcher {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    box-shadow: var(--shadow-lg);
    z-index: 9999;
    font-size: var(--font-size-sm);
}

.theme-switcher__title {
    font-weight: 600;
    margin-bottom: var(--space-sm);
    color: var(--color-text);
}

.theme-switcher__options {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.theme-switcher__option {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    cursor: pointer;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    transition: background-color 0.2s ease;
}

.theme-switcher__option:hover {
    background-color: var(--color-surface-alt);
}

.theme-switcher__option input {
    margin: 0;
}


/* =============================================================================
   LEARN SECTION
   Styles for the e-learning module index and cards
   ============================================================================= */

.learn-index {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--space-2xl) var(--space-lg);
}

.learn-index__header {
    text-align: center;
    margin-bottom: var(--space-2xl);
}

.learn-index__header h1 {
    font-family: var(--font-heading);
    font-size: var(--font-size-3xl);
    color: var(--color-text);
    margin-bottom: var(--space-md);
}

.learn-index__intro {
    font-size: var(--font-size-lg);
    color: var(--color-text-muted);
    max-width: 600px;
    margin: 0 auto;
}

.learn-index__modules {
    display: grid;
    gap: var(--space-lg);
}

.learn-module-card {
    display: block;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.learn-module-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary);
}

.learn-module-card__title {
    font-family: var(--font-heading);
    font-size: var(--font-size-xl);
    color: var(--color-text);
    margin: 0 0 var(--space-sm) 0;
}

.learn-module-card__description {
    color: var(--color-text-muted);
    margin: 0 0 var(--space-md) 0;
    line-height: 1.6;
}

.learn-module-card__cta {
    color: var(--color-primary);
    font-weight: 500;
}

.learn-index__empty {
    text-align: center;
    color: var(--color-text-muted);
    padding: var(--space-2xl);
}

/* ==========================================================================
   HOME PAGE — MARKETING SECTIONS
   --------------------------------------------------------------------------
   Styles for the content sections on the public home page (templates/bp_cms/
   home_page.html). Built to match the existing warm-therapy design system:
   reuses the CSS variables (--color-*, --space-*, --font-*) defined in :root.

   Contents:
     1. .home-section      — generic centered content section + surface variants
     2. .process-flow      — "A → B → C" step chips (Sections 2 & 5)
     3. .framework-group   — labelled group of cards (Section 3)
     4. .fw-card           — framework / learning-path card + variants
   ========================================================================== */

/* 1. Generic content section ------------------------------------------------ */

.home-section {
    /* Default surface is white; padding matches .feature-section. */
    background-color: var(--color-surface);
    padding: var(--space-3xl) var(--space-xl);
}

/* Alternate cream surface, used to visually separate adjacent sections. */
.home-section--alt {
    background-color: var(--color-surface-alt);
}

/* Highlighted "feature" surface for the Builder call-to-action (Section 5).
   Uses the dark brown accent so the section stands out and the CTA pops. */
.home-section--feature {
    background-color: var(--color-accent);
}

/* Centered text column. Narrow by default for comfortable reading length. */
.home-section__inner {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

/* Wider variant for sections that hold card grids (Sections 3 & 4). */
.home-section__inner--wide {
    max-width: 1100px;
}

/* Small uppercase label above each section title (e.g. "Section 1 — ..."). */
.home-section__eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
}

.home-section__eyebrow--light {
    color: var(--color-primary-light);
}

/* Section headline — serif, matching .feature-section__title. */
.home-section__title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-3xl);
    font-weight: 400;
    color: var(--color-text);
    line-height: 1.2;
    margin-bottom: var(--space-lg);
}

.home-section__title--light {
    color: var(--color-surface);
}

/* Body paragraph. Left-aligned by default for multi-paragraph text blocks. */
.home-section__text {
    font-size: var(--font-size-lg);
    color: var(--color-text-light);
    line-height: 1.8;
    margin-bottom: var(--space-md);
    text-align: left;
}

/* Centered single paragraphs (used under process flows).
   Wide enough that the Builder-section subheader fits on one line. */
.home-section__text--center {
    text-align: center;
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}

.home-section__text--light {
    color: rgba(255, 255, 255, 0.85);
}

/* CTA wrapper centered below section content. */
.home-section__cta {
    margin-top: var(--space-2xl);
    text-align: center;
}

/* 2. Process flow ----------------------------------------------------------- */

/* Horizontal list of step "chips" separated by arrows. Wraps on small screens. */
.process-flow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    margin: var(--space-xl) auto;
}

.process-flow__step {
    /* Compact, uniform chips. Fixed width + centering keeps every chip the
       same size and lets longer labels (e.g. "Pathways of Change") wrap onto
       two lines instead of stretching into a long pill. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 104px;
    min-height: 52px;
    background-color: var(--color-surface);
    border: 2px solid var(--color-secondary);
    color: var(--color-text);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-md);
    font-weight: 500;
    font-size: var(--font-size-sm);
    line-height: 1.25;
}

.process-flow__arrow {
    color: var(--color-primary);
    font-size: var(--font-size-xl);
    font-weight: 600;
}

/* Light variant for use on the dark feature surface (Section 5). */
.process-flow--light .process-flow__step {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: var(--color-primary-light);
    color: var(--color-surface);
}

.process-flow--light .process-flow__arrow {
    color: var(--color-primary-light);
}

/* 3. Framework group -------------------------------------------------------- */

/* A labelled block of cards (e.g. "Regulation Pathways"). */
.framework-group {
    margin-top: var(--space-2xl);
    text-align: center;
}

.framework-group__title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-2xl);
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: var(--space-sm);
}

.framework-group__intro {
    font-size: var(--font-size-base);
    color: var(--color-text-light);
    line-height: 1.7;
    max-width: 680px;
    margin: 0 auto var(--space-xl);
}

/* 4. Framework / learning-path cards --------------------------------------- */

/* Responsive auto-fitting card grid (default). */
.fw-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-lg);
    text-align: left;
}

/* Fixed-column variants so card counts lay out predictably on desktop. */
.fw-card-grid--three { grid-template-columns: repeat(3, 1fr); }
.fw-card-grid--four  { grid-template-columns: repeat(4, 1fr); }

/* Individual card — white surface with soft shadow, matching .quote-card. */
.fw-card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-top: 4px solid var(--color-secondary);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.fw-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.fw-card__title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-xl);
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: var(--space-sm);
}

.fw-card__text {
    font-size: var(--font-size-base);
    color: var(--color-text-light);
    line-height: 1.6;
    margin: 0;
}

/* Small label / tag at the bottom of learning-path cards (e.g. "M1 Foundations"). */
.fw-card__tag {
    display: inline-block;
    margin-top: var(--space-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-muted);
}

/* Tag rendered as a link (the "Build" card's Launch Builder action). */
.fw-card__tag--link {
    color: var(--color-primary);
    text-decoration: none;
}

.fw-card__tag--link:hover {
    text-decoration: underline;
}

/* Numbered step badge for the learning-path cards (M1–M4). */
.fw-card--numbered .fw-card__step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background-color: var(--color-primary);
    color: white;
    font-weight: 600;
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-md);
}

/* Regulation Pathway color accents — map each element to a brand-adjacent hue
   via the colored top border, keeping the cards otherwise consistent. */
.fw-card--fire  { border-top-color: var(--color-primary); }   /* coral / activation */
.fw-card--earth { border-top-color: var(--color-warning); }   /* amber / grounding */
.fw-card--water { border-top-color: var(--color-info); }      /* blue / feeling */
.fw-card--air   { border-top-color: var(--color-secondary); } /* sage / perspective */

/* Responsive: collapse fixed-column grids on tablets and phones. */
@media (max-width: 900px) {
    .fw-card-grid--three,
    .fw-card-grid--four {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .fw-card-grid,
    .fw-card-grid--three,
    .fw-card-grid--four {
        grid-template-columns: 1fr;
    }

    .home-section__title {
        font-size: var(--font-size-2xl);
    }
}

/* =============================================================================
   Early Access Gate (MVP testing lock)
   =============================================================================
   Blocking password modal shown on every page while the site is in MVP
   testing. Markup lives in templates/base.html; it reuses the .info-modal
   shell above and adds these gate-specific pieces. Remove this section
   together with the modal when the gate is retired. */

/* Sit above everything else on the page (info-modal itself is z-index 1000) */
.access-gate {
    z-index: 2000;
}

/* Near-opaque backdrop so the page content is not readable behind the gate
   (the default .info-modal__backdrop is a light 50% dim) */
.access-gate__backdrop {
    background-color: rgba(61, 61, 61, 0.85);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.access-gate__body {
    padding: 20px;
    font-size: 0.95rem;
}

/* Password input + submit button stack */
.access-gate__form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 16px 0;
}

.access-gate__input {
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 1rem;
    font-family: inherit;
}

.access-gate__input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

.access-gate__error {
    color: #B3261E;
    font-size: 0.85rem;
    margin: 0 !important;
}

/* "Request access from Juliet King" line under the form */
.access-gate__request {
    color: var(--color-text-light);
    font-size: 0.85rem;
    border-top: 1px solid var(--color-border);
    padding-top: 12px;
    margin-bottom: 0 !important;
}

.access-gate__request a {
    color: var(--color-primary);
}