/**
 * =============================================================================
 * 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;
    /* Light scrollbar so it doesn't read as a dark bar down the sidebar */
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) #fff;
}

.wizard-sidebar::-webkit-scrollbar {
    width: 8px;
}

.wizard-sidebar::-webkit-scrollbar-track {
    background: #fff;
    border-radius: 4px;
}

.wizard-sidebar::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 4px;
}

/* Sticky regulation state bar at bottom of page */
.regulation-state-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    /* Fixed height so the feedback pill (see .wizard-feedback-pill) can sit
       vertically centred on it. */
    min-height: 56px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    padding: var(--space-sm) 170px var(--space-sm) 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 */
/* Sidebar heading above the session name / step list */
.wizard-sidebar__heading {
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    margin: 0 0 var(--space-sm);
}

.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;
}

/* Every step that is NOT active is a filled grey circle. The active step
   is the odd one out: no fill, thick primary outline, primary text. */
.wizard-progress__number {
    position: absolute;
    left: -12px;
    width: 24px;
    height: 24px;
    background-color: var(--color-border);
    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);
}

.wizard-progress__item--active .wizard-progress__number {
    background-color: var(--color-background);
    border: 3px solid var(--color-primary);
    color: var(--color-primary);
    font-weight: 700;
}

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

.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-text-light);
}

/* Locked steps (logged-out visitors, steps after the free preview): dimmed
   label plus a small padlock after it. See wizard_step_page.html sidebar and
   WizardStepPage.PREVIEW_LAST_STEP in bp_cms/models.py. */
.wizard-progress__item--locked .wizard-progress__link {
    opacity: 0.6;
}

.wizard-progress__item--locked .wizard-progress__link:hover {
    opacity: 1;
}

.wizard-progress__lock {
    display: inline-block;
    vertical-align: middle;
    margin-left: 4px;
    color: var(--color-text-light);
}

/* Help panel: the one-line "Sign in to access the learning modules" note
   that replaces the Learn-more link list for logged-out visitors. */
.wizard-help__locked-note {
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-text-light);
}

.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;
}

/* Step 1: SRCM visual reference inside the help box */
.wizard-help__srcm {
    display: flex;
    gap: var(--space-md);
    align-items: flex-start;
}

@media (max-width: 640px) {
    .wizard-help__srcm {
        flex-direction: column;
    }
}

/* Thumbnail is a button so it is keyboard accessible */
.wizard-help__srcm-thumb {
    flex: 0 0 180px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    cursor: zoom-in;
    text-align: center;
}

.wizard-help__srcm-thumb img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.wizard-help__srcm-hint {
    display: block;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    padding: 4px 0;
}

/* Lightbox for the enlarged diagram */
.wizard-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
}

.wizard-lightbox__panel {
    position: relative;
    background: #fff;
    border-radius: var(--radius-md);
    padding: var(--space-md);
    max-width: 760px;
    width: 100%;
    max-height: 90vh;
    overflow: auto;
}

.wizard-lightbox__panel img {
    display: block;
    width: 100%;
    height: auto;
}

.wizard-lightbox__close {
    position: absolute;
    top: 8px;
    right: 12px;
    border: none;
    background: none;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    color: var(--color-text-muted);
}

/* 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);
    /* Neutral surface (was a blue/purple gradient) per content redesign. */
    background: var(--color-surface);
    border-radius: var(--radius-md);
    font-style: italic;
    color: var(--color-text-muted);
}

.wizard-context p {
    margin: 0;
}

/* Step 4: green variant for the "Why These Pathways Are Suggested" box */
.wizard-context--green {
    background: #ecfdf5;
    border: 1px solid #6ee7b7;
    font-style: normal;
    color: var(--color-text);
}

/* "View More" toggle under the results grids (beta shows top 3 by default). */
/* Short explainer under the "Explore Additional ..." toggle */
.results-view-more__hint {
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: var(--space-xs) auto 0;
    max-width: 520px;
}

.results-section__intro p {
    margin: 0 0 var(--space-sm);
}

.results-section__intro p:last-child {
    margin-bottom: 0;
}

/* "Understanding Selection Alignment" explainer under each results heading */
.results-alignment-note {
    margin: var(--space-md) 0 var(--space-lg);
    padding: var(--space-sm) var(--space-md);
    border-left: 3px solid var(--color-primary);
    background: var(--color-surface);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    line-height: 1.6;
}

.results-alignment-note p {
    margin: 0 0 var(--space-xs);
}

.results-alignment-note p:last-child {
    margin-bottom: 0;
}

.results-alignment-note__title {
    font-weight: 600;
}

.results-view-more {
    display: block;
    margin: var(--space-lg) auto 0;
    padding: var(--space-sm) var(--space-xl);
    background: transparent;
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-full);
    color: var(--color-primary);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.results-view-more:hover {
    background-color: var(--color-primary);
    color: white;
}

/* "Your reasoning so far" rows and the lead-in lines above the Step 5
   tenet tiles. */
.why-matters__row {
    margin: 0 0 var(--space-xs) 0;
}

.tenet-lead {
    margin: 0 0 var(--space-sm) 0;
    font-weight: 500;
    color: var(--color-text);
}

.tenet-lead--muted {
    font-weight: 400;
    color: var(--color-text-muted);
    margin-bottom: var(--space-lg);
}

/* Multi-paragraph context (Step 3 "Why these Anchors?"): space the
   paragraphs and let the first line act as a small heading. */
.wizard-context p + p {
    margin-top: var(--space-sm);
}

.wizard-context p:first-child:not(:only-child) {
    font-weight: 600;
    font-style: normal;
    color: var(--color-text);
}

.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 */
/* Bullet list inside the Step 5 "Connecting Your Clinical Reasoning" box */
.why-matters__list {
    margin: var(--space-xs) 0 var(--space-sm);
    padding-left: 1.25rem;
    line-height: 1.6;
}

/* Step 3: note explaining the anchor alignment percentages */
.wizard-alignment-note {
    margin: var(--space-md) 0;
    font-size: 0.95rem;
    color: var(--color-text-muted);
    line-height: 1.6;
}

.wizard-alignment-note p {
    margin: 0;
}

.wizard-alignment-note__title {
    font-weight: 600;
    color: var(--color-text);
}

/* Small "i" info tooltip, shown on hover or keyboard focus */
.wizard-tooltip {
    position: relative;
    display: inline-block;
    margin-left: var(--space-xs);
    vertical-align: middle;
}

.wizard-tooltip__trigger {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid var(--color-primary);
    background: none;
    color: var(--color-primary);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    cursor: help;
    padding: 0;
}

.wizard-tooltip__text {
    display: none;
    position: absolute;
    left: 0;
    top: 24px;
    z-index: 20;
    width: 280px;
    padding: var(--space-sm) var(--space-md);
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text);
}

.wizard-tooltip:hover .wizard-tooltip__text,
.wizard-tooltip:focus-within .wizard-tooltip__text {
    display: block;
}

/* Instruction line above the option cards */
.wizard-instruction {
    font-weight: 500;
    margin: var(--space-md) 0 var(--space-sm);
}

.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);
}

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

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

/* Step 3: transition note shown after an anchor is selected */
.wizard-transition {
    margin: var(--space-md) 0;
    padding: var(--space-sm) var(--space-md);
    border-left: 3px solid var(--color-primary);
    background: var(--color-surface);
    border-radius: var(--radius-sm);
    line-height: 1.6;
}

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

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

/* -------------------------------------------------------------------------
   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);
}

/* Selected state: tint the whole card and add an outer ring so the
   selection reads at a glance, not just via the small check indicator. */
.selection-card--selected {
    border-color: var(--color-primary);
    background-color: rgba(74, 144, 164, 0.22);
    /* The inset layer tints the card even when it has an inline
       background-color (e.g. Step 4 pathway tiles). */
    box-shadow: inset 0 0 0 999px rgba(74, 144, 164, 0.18),
                0 0 0 4px rgba(74, 144, 164, 0.45),
                var(--shadow-lg);
    transform: translateY(-2px);
}

.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);
}

/* Beta feedback prompts at the end of the Builder results. */
.results-feedback {
    margin-top: var(--space-xl);
    display: grid;
    gap: var(--space-lg);
}

.results-feedback__block {
    padding: var(--space-lg);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    text-align: center;
}

.results-feedback__title {
    font-family: var(--font-heading);
    font-size: var(--font-size-lg);
    margin: 0 0 var(--space-sm) 0;
    color: var(--color-text);
}

.results-feedback__text {
    color: var(--color-text-muted);
    margin: 0 0 var(--space-sm) 0;
}

.results-feedback__link {
    display: inline-block;
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
}

.results-feedback__link:hover {
    text-decoration: underline;
}

.results-feedback__hint {
    margin: var(--space-sm) 0 0 0;
    font-size: var(--font-size-sm);
    font-style: italic;
    color: var(--color-text-muted);
}

/* =============================================================================
   MVP feedback placements (temporary, MVP testing only)
   =============================================================================
   - .home-evaluation__hint: small italic note under the homepage
     "Help Shape BrainPalette" evaluation CTA (home_page.html, section 6).
   - .wizard-feedback-pill: small link fixed to the bottom-right corner of
     every Builder step (wizard_step_page.html) so testers can give
     in-the-moment feedback without losing their place (opens in a new tab).
   Remove this section together with those template blocks after MVP testing. */

.home-evaluation__hint {
    font-size: var(--font-size-sm);
    font-style: italic;
    margin-top: var(--space-md);
}

.wizard-feedback-pill {
    position: fixed;
    /* Centred on the 56px regulation bar: (56 - 34) / 2 */
    bottom: 11px;
    right: 16px;
    height: 34px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    /* Above page content but well below modals (.info-modal is z-index 1000) */
    z-index: 500;
    padding: 0 14px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-decoration: none;
}

.wizard-feedback-pill:hover {
    text-decoration: underline;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
}

/* Guidance line beneath the "Your Reasoning Path" summary. */
.results-summary__note {
    margin: var(--space-md) 0 0 0;
    font-size: var(--font-size-sm);
    font-style: italic;
    color: var(--color-text-muted);
}

.results-summary__note p {
    margin: 0 0 var(--space-xs);
}

.results-summary__note p:last-child {
    margin-bottom: 0;
}

.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 */
/* Beta: recommendations stack as full-width rows (table-like), one per
   line, instead of the old multi-column tile grid. */
.results-grid {
    display: grid;
    grid-template-columns: 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 */
/* "Why this may fit" plain-language explanation line. */
.result-card__fit {
    margin: var(--space-sm) 0 0 0;
    font-size: var(--font-size-sm);
    color: var(--color-text);
    line-height: 1.5;
}

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

.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 */
/* Notes under the Session Structure grid */
.structure-note {
    margin-top: var(--space-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: 1.6;
}

.structure-note p,
.structure-reflection p {
    margin: 0 0 var(--space-xs);
}

.structure-reflection {
    margin-top: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border-left: 3px solid var(--color-primary);
    background: var(--color-surface);
    border-radius: var(--radius-sm);
    line-height: 1.6;
}

.structure-reflection__label {
    font-weight: 600;
}

.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__title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-xl);
    font-weight: 500;
    margin: 0 0 var(--space-xs);
}

.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 Guidance: three-stage layout */
.results-section__subtitle {
    font-style: italic;
    color: var(--color-text-muted);
    margin: calc(-1 * var(--space-sm)) 0 var(--space-sm);
}

.guidance-stages {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.guidance-stage__title {
    font-size: var(--font-size-base);
    font-weight: 600;
    letter-spacing: 0.02em;
    margin: 0 0 var(--space-xs);
}

.guidance-stage__lead {
    color: var(--color-text-muted);
    line-height: 1.6;
    margin: 0 0 var(--space-sm);
}

.guidance-important {
    padding: var(--space-sm) var(--space-md);
    background: #fff3e0;
    border-left: 3px solid var(--color-warning);
    border-radius: var(--radius-sm);
    line-height: 1.6;
}

.guidance-important p {
    margin: 0 0 var(--space-xs);
}

.guidance-important__label {
    font-weight: 600;
}

.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);
}

/* Subtitle line under the "How It Works" heading. */
.wizard-steps__subheading {
    text-align: center;
    color: var(--color-text-muted);
    margin: calc(-1 * var(--space-lg)) 0 var(--space-xl);
}

/* Longer intro paragraph variant: constrained width and readable line height */
.wizard-steps__subheading--long {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.7;
}

/* Orientation cards on the Builder landing page, shown above the step
   timeline. Two side-by-side cards on desktop, stacked on phones. */
.wizard-orientation {
    max-width: 700px;
    margin: 0 auto var(--space-xl);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}

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

.wizard-orientation__card {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: var(--space-lg);
    background-color: var(--color-surface);
    line-height: 1.6;
}

.wizard-orientation__title {
    font-size: var(--font-size-base);
    font-weight: 600;
    margin: 0 0 var(--space-sm);
}

.wizard-orientation__card p {
    margin: 0 0 var(--space-sm);
    color: var(--color-text-muted);
}

.wizard-orientation__note {
    font-size: var(--font-size-sm);
    font-style: italic;
}

.wizard-timeline__title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--space-xs);
    /* Step verbs (Regulate, Observe, ...) display uppercase per design. */
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.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);
    font-weight: 500;
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;   /* blocks sit flush against each other */
}

/* "Explore. Connect. Integrate." as three square-cornered colour blocks,
   one palette colour each: coral, sage, amber. White text on all three.
   Square on purpose so they do not read as buttons. */
.learn-index__word {
    display: inline-block;
    padding: 6px 18px;
    color: #fff;
}

.learn-index__word--1 { background: var(--color-primary); }
.learn-index__word--2 { background: var(--color-secondary-dark); }
.learn-index__word--3 { background: var(--color-warning); }

/* "About the learning" prose section between the header and module cards.
   Narrower than the module grid for a comfortable reading measure. */
.learn-index__about {
    max-width: 680px;
    margin: 0 auto var(--space-2xl);
}

.learn-index__about p {
    color: var(--color-text);
    line-height: 1.7;
    margin-bottom: var(--space-md);
}

.learn-index__modules {
    display: grid;
    gap: var(--space-lg);
}

/* Each card carries an accent colour (`--card-accent`) used for its
   background tint, title, CTA pill and hover border. Text stays in the
   default dark colours so the lighter accents (amber, blue) stay readable. The colour is picked by card position with
   :nth-child below, so the module registry in bp_core/views.py needs no
   colour field. Order: M1 coral, M2 sage, M3 amber, Knowledge Commons blue. */
.learn-module-card {
    --card-accent: var(--color-primary);
    display: block;
    /* 18% accent mixed into white: a clear tint per card. */
    background: color-mix(in srgb, var(--card-accent) 18%, var(--color-surface));
    border: 1px solid color-mix(in srgb, var(--card-accent) 40%, 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:nth-child(2) { --card-accent: var(--color-secondary-dark); }
.learn-module-card:nth-child(3) { --card-accent: var(--color-warning); }
.learn-module-card:nth-child(4) { --card-accent: var(--color-info); }

.learn-module-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--card-accent);
}

.learn-module-card__title {
    font-family: var(--font-heading);
    font-size: var(--font-size-xl);
    /* Accent darkened with the brown so it stays readable as text. */
    color: color-mix(in srgb, var(--card-accent) 55%, var(--color-accent));
    margin: 0 0 var(--space-sm) 0;
}

/* Short lead line between the module title and its longer description. */
.learn-module-card__tagline {
    color: var(--color-text);
    font-weight: 500;
    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;
}

/* Solid pill in the card's accent colour. */
.learn-module-card__cta {
    display: inline-block;
    background: var(--card-accent);
    color: #fff;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: var(--radius-full);
}

.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;
}

/* Step badge for the learning-path cards (LEARN / REASON / BUILD).
   min-width keeps short labels circular; longer words widen the badge
   into a pill instead of being cropped by a fixed 40px circle. */
.fw-card--numbered .fw-card__step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 var(--space-md);
    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);
    }
}

/* ============================================================================
   INTRO STEPPER ("What is BrainPalette?") -- MVP preview
   ============================================================================
   Four short cards shown until the visitor dismisses it (30-day cookie).
   Markup in templates/base.html (show_welcome_modal). Builds on .info-modal
   for the fixed overlay/centering, then overrides its size caps: the card is
   wide (760px), capped at the viewport height, and laid out as a column
   (header / scrollable body / fixed footer) so the buttons never scroll away.
   ============================================================================ */
.welcome-modal {
    z-index: 2000;
}

.welcome-modal__backdrop {
    background-color: rgba(61, 61, 61, 0.6);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

/* Override .info-modal__content (max-width 480px / max-height 80vh) */
.welcome-modal__content {
    max-width: 760px;
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

/* --- Header: slim beige band, brand left, dots centre, close right ------ */
.welcome-modal__header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 20px 14px 24px;
    background: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border);
}

.welcome-modal__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
}

.welcome-modal__logo {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    object-fit: cover;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.welcome-modal__eyebrow {
    color: var(--color-primary);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Progress dots; the active one is a longer coral pill */
.welcome-modal__dots {
    display: flex;
    gap: 8px;
}

.welcome-modal__dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: none;
    border-radius: var(--radius-full);
    background: var(--color-border);
    cursor: pointer;
    transition: width 0.2s ease, background-color 0.2s ease;
}

.welcome-modal__dot:hover {
    background: var(--color-primary-light);
}

.welcome-modal__dot--active {
    width: 28px;
    background: var(--color-primary);
}

.welcome-modal__close {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-text-light);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.welcome-modal__close:hover {
    background: white;
    color: var(--color-text);
}

/* --- Body: the active card ----------------------------------------------- */
.welcome-modal__body {
    flex: 1 1 auto;
    min-height: 0;          /* lets the flex child shrink and scroll */
    overflow-y: auto;
    padding: 32px 40px 28px;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text);
}

/* Same minimum height for every card so the modal does not jump in size
   when stepping through. */
.welcome-card {
    min-height: 380px;   /* tallest card (the three tiles) sets the height */
}

.welcome-modal__body p {
    margin: 0 0 14px;
}

.welcome-modal__body a {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

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

.welcome-modal__title {
    margin: 0 0 6px;
    font-family: var(--font-family-heading);
    font-size: 1.85rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-accent);
}

/* Short serif-free lead line under the title */
.welcome-card__lead {
    font-size: 1.1rem;
    color: var(--color-primary-dark);
    margin-bottom: 18px !important;
}

.welcome-card__label {
    margin: 18px 0 8px !important;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-light);
}

/* Card 1: "Made for" chips */
.welcome-chips {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
}

.welcome-chips__item {
    padding: 6px 14px;
    border-radius: var(--radius-full);
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    font-size: 0.9rem;
    font-weight: 600;
}

.welcome-card__footnote {
    font-size: 0.8rem;
    color: var(--color-text-light);
    margin: 22px 0 0 !important;
}

/* Card 2: six numbered circles on one connecting line */
.welcome-flow {
    list-style: none;
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    margin: 8px 0 24px;
    padding: 0;
}

/* The line runs behind the circles, from the first centre to the last */
.welcome-flow::before {
    content: "";
    position: absolute;
    top: 22px;
    left: calc(100% / 12);
    right: calc(100% / 12);
    height: 2px;
    background: var(--color-border);
}

.welcome-flow__step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.welcome-flow__num {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: white;
    font-family: var(--font-family-heading);
    font-size: 1.1rem;
    font-weight: 600;
    box-shadow: 0 0 0 4px white;   /* gap between circle and the line */
}

.welcome-flow__label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-accent);
}

/* Card 3: three tiles side by side */
.welcome-doors {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 4px;
}

.welcome-doors__tile {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 18px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface-alt);
    color: var(--color-text);
    text-decoration: none !important;
    font-weight: 400 !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.welcome-doors__tile:hover {
    transform: translateY(-2px);
    border-color: var(--color-primary);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
    color: var(--color-text) !important;
}

.welcome-doors__kicker {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.welcome-doors__title {
    font-family: var(--font-family-heading);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-accent);
}

.welcome-doors__text {
    flex: 1 1 auto;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--color-text-light);
}

.welcome-doors__cta {
    margin-top: 10px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-primary);
}

/* Card 4: letter-style note */
.welcome-card--note p {
    max-width: 58ch;
}

.welcome-modal__signoff {
    margin-top: 18px !important;
}

.welcome-modal__signature {
    display: block;
    margin-top: 2px;
    font-family: var(--font-family-heading);
    font-style: italic;
    font-size: 1.5rem;
    color: var(--color-accent);
}

.welcome-card__status {
    font-size: 0.9rem;
    color: var(--color-text-light);
    border-top: 1px solid var(--color-border);
    padding-top: 14px;
    margin: 18px 0 0 !important;
}

/* --- Footer: Back | count | Skip  Next ----------------------------------- */
.welcome-modal__nav {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 24px;
    border-top: 1px solid var(--color-border);
    background: white;
}

.welcome-modal__nav-btn {
    padding: 10px 20px;
    white-space: nowrap;
}

.welcome-modal__count {
    font-size: 0.8rem;
    color: var(--color-text-light);
    font-variant-numeric: tabular-nums;
}

/* Skip (and "Just browse for now") sit right before the primary button */
.welcome-modal__skip {
    margin-left: auto;
    border: none;
    background: none;
    color: var(--color-text-light);
    font-size: 0.9rem;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.welcome-modal__skip:hover {
    color: var(--color-text);
}

/* --- Phones --------------------------------------------------------------- */
@media (max-width: 640px) {
    .welcome-modal__content { max-height: calc(100vh - 16px); }
    .welcome-modal__header  { padding: 12px 12px 12px 16px; }
    .welcome-modal__eyebrow { display: none; }
    .welcome-modal__body    { padding: 22px 20px 20px; }
    .welcome-modal__title   { font-size: 1.5rem; }
    .welcome-card           { min-height: 0; }

    /* Flow: 3 x 2 grid, no connecting line */
    .welcome-flow          { grid-template-columns: repeat(3, 1fr); row-gap: 18px; }
    .welcome-flow::before  { display: none; }

    /* Doors stack */
    .welcome-doors         { grid-template-columns: 1fr; }

    .welcome-modal__nav     { padding: 12px 16px; flex-wrap: wrap; }
    .welcome-modal__count   { display: none; }
}

/* Nav: "What is BrainPalette?" is a <button> styled like the other nav links */
.nav-link--intro {
    border: none;
    background: none;
    padding: 0;
    font-family: inherit;
    font-size: 0.8rem;   /* same as .nav-link above (font: inherit would override it) */
    cursor: pointer;
}

/* Generic text-link styled <button> (used by the hero's intro link) */
.link-button {
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.link-button:hover {
    color: var(--color-primary-dark);
}

/* Hero "Read this first": an outlined, two-line pill with a book icon.
   Deliberately NOT a filled button so it does not compete with the two
   primary CTAs above it. Opens the intro stepper (base.html). */
.hero__intro-link {
    flex: 0 0 100%;      /* own line under the two buttons in .hero__cta */
    text-align: center;
    margin: 4px 0 0;
}

.hero__intro-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 22px 11px 16px;
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-full);
    background: white;
    color: var(--color-accent);
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.hero__intro-btn:hover {
    background: var(--color-surface-alt);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.hero__intro-icon {
    color: var(--color-primary);
}

.hero__intro-text {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-primary-dark);
}

/* Home page, Builder section: "steps 1 and 2 are open to everyone" hint */
.home-builder__hint {
    margin-top: 12px;
    font-size: 0.9rem;
    opacity: 0.85;
}