/* ══════════════════════════════════════════════════════════════════════════════
   SG COURSE ENGINE — Premium Styles
   Covers: catalogue, course landing, focus mode, lesson/topic viewer, quiz
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── PAGE HERO WITH IMAGE (extends layout.css .page-hero) ────────────────── */

.page-hero--overlay {
    position: relative;
    overflow: hidden;
}

.page-hero--overlay .page-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.page-hero--overlay .page-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-hero--overlay .page-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(15, 74, 58, 0.85) 0%, rgba(10, 58, 45, 0.90) 100%);
    z-index: 1;
}

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

/* Constrain hero height on pages that use the overlay variant */
.page-hero--overlay {
    max-height: 400px;
}

@media (max-width: 768px) {
    .page-hero--overlay {
        max-height: 300px;
    }
}

/* ── COURSE CARDS (archive-sg_course.php) ─────────────────────────────────── */

.course-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cp-space-sm);
    justify-content: center;
    padding: var(--cp-space-md) 0;
}

.section-tight {
    padding: var(--cp-space-md) 0;
}

.course-card {
    background: var(--cp-bg-white);
    border-radius: var(--cp-border-radius-lg);
    overflow: hidden;
    box-shadow: var(--cp-shadow-md);
    transition: transform var(--cp-transition), box-shadow var(--cp-transition);
    display: flex;
    flex-direction: column;
}

.course-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--cp-shadow-lg);
}

.course-card__image {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--cp-gradient-hero);
}

.course-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--cp-transition);
}

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

.course-card__image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: rgba(255, 255, 255, 0.4);
}

.course-card__badge {
    position: absolute;
    top: var(--cp-space-md);
    left: var(--cp-space-md);
    padding: 4px 12px;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: rgba(255, 255, 255, 0.95);
    color: var(--cp-text);
    backdrop-filter: blur(8px);
}

.course-card__badge--beginner { color: var(--cp-success); }
.course-card__badge--intermediate { color: var(--cp-warning); }
.course-card__badge--advanced { color: var(--cp-danger); }

.course-card__content {
    padding: var(--cp-space-lg);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.course-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cp-space-md);
    margin-bottom: var(--cp-space-sm);
    font-size: 0.8rem;
    color: var(--cp-text-muted);
}

.course-card__meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.course-card__title {
    font-family: var(--cp-font-heading);
    font-size: 1.25rem;
    margin-bottom: var(--cp-space-sm);
    line-height: 1.3;
}

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

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

.course-card__excerpt {
    font-size: 0.9rem;
    color: var(--cp-text-muted);
    line-height: 1.6;
    margin-bottom: var(--cp-space-md);
    flex: 1;
}

.course-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--cp-space-md);
    border-top: 1px solid var(--cp-border);
    margin-top: auto;
}

.course-card__price {
    font-family: var(--cp-font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--cp-text);
}

.course-card__price--free {
    color: var(--cp-success);
}

/* Feature cards on catalogue (with images) */
.feature-card {
    text-align: center;
    padding: var(--cp-space-xl) var(--cp-space-lg);
    background: var(--cp-bg-white);
    border-radius: var(--cp-border-radius-lg);
    box-shadow: var(--cp-shadow);
    transition: transform var(--cp-transition), box-shadow var(--cp-transition);
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--cp-shadow-lg);
}

.feature-card--with-image {
    padding: 0;
    overflow: hidden;
    text-align: left;
}

.feature-card__image {
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.feature-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--cp-transition);
}

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

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

.feature-card__icon {
    margin-bottom: var(--cp-space-md);
}

.feature-card h3 {
    font-family: var(--cp-font-heading);
    margin-bottom: var(--cp-space-sm);
}

.feature-card p {
    color: var(--cp-text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
}

/* Empty state */
.empty-state {
    padding: var(--cp-space-3xl) var(--cp-space-lg);
}

.empty-state svg {
    margin-bottom: var(--cp-space-lg);
    opacity: 0.5;
}

.empty-state__image {
    width: 100%;
    max-width: 600px;
    height: 250px;
    object-fit: cover;
    border-radius: var(--cp-border-radius-lg);
    margin-bottom: var(--cp-space-xl);
    box-shadow: var(--cp-shadow-lg);
}

.empty-state h2 {
    font-family: var(--cp-font-heading);
    margin-bottom: var(--cp-space-sm);
}

.empty-state p {
    color: var(--cp-text-muted);
    max-width: 400px;
    margin: 0 auto;
}

/* Curriculum banner image — wider than text */
.curriculum-banner {
    border-radius: var(--cp-border-radius-lg);
    overflow: hidden;
    margin-bottom: var(--cp-space-xl);
    box-shadow: var(--cp-shadow-lg);
    max-height: 240px;
    margin-left: -40px;
    margin-right: -40px;
}

.curriculum-banner img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    display: block;
}

/* ── COURSE LANDING PAGE (single-sg_course.php) ──────────────────────────── */

.course-hero {
    position: relative;
    padding: calc(var(--cp-nav-height) + var(--cp-space-3xl)) 0 var(--cp-space-3xl);
    background: var(--cp-gradient-hero);
    color: var(--cp-text-light);
    overflow: hidden;
}

.course-hero__bg {
    position: absolute;
    inset: 0;
}

.course-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.course-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(15, 74, 58, 0.88) 0%, rgba(10, 58, 45, 0.92) 100%);
}

.course-hero__gradient {
    position: absolute;
    inset: 0;
    background: var(--cp-gradient-hero);
}

.course-hero__content {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--cp-space-xl);
    align-items: start;
}

.course-hero__text h1 {
    font-family: var(--cp-font-heading);
    font-size: 2.8rem;
    line-height: 1.15;
    margin-bottom: var(--cp-space-md);
    color: #ffffff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

.course-hero__sub {
    font-size: 1.2rem;
    opacity: 1;
    line-height: 1.6;
    margin-bottom: var(--cp-space-lg);
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.course-hero__meta {
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.course-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cp-space-md);
    align-items: center;
}

/* Course hero breadcrumb contrast */
.course-hero .breadcrumbs {
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.course-hero .breadcrumbs a {
    color: var(--cp-accent);
}

.course-meta-badge {
    padding: 4px 14px;
    border-radius: 100px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

.course-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
}

.course-hero__progress {
    max-width: 300px;
}

/* Course Action Card (sidebar CTA on landing page) */
.course-hero__action-card {
    position: relative;
    z-index: 2;
}

.course-action-card__image {
    border-radius: var(--cp-border-radius-lg) var(--cp-border-radius-lg) 0 0;
    overflow: hidden;
}

.course-action-card__image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.course-action-card__body {
    background: var(--cp-bg-white);
    border-radius: 0 0 var(--cp-border-radius-lg) var(--cp-border-radius-lg);
    padding: var(--cp-space-lg);
    box-shadow: var(--cp-shadow-xl);
    color: var(--cp-text);
}

.course-hero__action-card:not(:has(.course-action-card__image)) .course-action-card__body {
    border-radius: var(--cp-border-radius-lg);
}

.course-action-card__price {
    text-align: center;
    margin-bottom: var(--cp-space-lg);
}

.course-action-card__amount {
    font-family: var(--cp-font-heading);
    font-size: 2rem;
    font-weight: 700;
    color: var(--cp-text);
}

.course-action-card__amount--free {
    color: var(--cp-success);
}

.course-action-card__includes {
    list-style: none;
    padding: 0;
    margin: var(--cp-space-lg) 0 0;
    border-top: 1px solid var(--cp-border);
    padding-top: var(--cp-space-lg);
}

.course-action-card__includes li {
    display: flex;
    align-items: center;
    gap: var(--cp-space-sm);
    padding: var(--cp-space-sm) 0;
    font-size: 0.9rem;
    color: var(--cp-text-muted);
}

/* Course About — Split layout with photo sidebar */
.course-about-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: var(--cp-space-2xl);
    align-items: start;
}

.course-about__content {
    font-size: 1rem;
    line-height: 1.8;
}

.course-about__content h4 {
    font-family: var(--cp-font-heading);
    font-size: 1.2rem;
    margin-top: var(--cp-space-xl);
    margin-bottom: var(--cp-space-sm);
    color: var(--cp-primary-dark);
}

.course-about__content h4:first-child {
    margin-top: 0;
}

.course-about__sidebar {
    position: sticky;
    top: calc(var(--cp-nav-height) + var(--cp-space-lg));
}

.course-about__photo-card {
    border-radius: var(--cp-border-radius-lg);
    overflow: hidden;
    box-shadow: var(--cp-shadow-lg);
    margin-bottom: var(--cp-space-lg);
    background: var(--cp-bg-white);
}

.course-about__photo-card img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    object-position: top;
    display: block;
}

.course-about__photo-caption {
    padding: var(--cp-space-md) var(--cp-space-lg);
    text-align: center;
    border-top: 3px solid var(--cp-secondary);
}

.course-about__photo-caption strong {
    display: block;
    font-family: var(--cp-font-heading);
    font-size: 1.1rem;
    color: var(--cp-text);
}

.course-about__photo-caption span {
    display: block;
    font-size: 0.85rem;
    color: var(--cp-text-muted);
}

.course-about__highlights {
    display: flex;
    flex-direction: column;
    gap: var(--cp-space-md);
    margin-bottom: var(--cp-space-lg);
}

.course-about__highlight {
    display: flex;
    align-items: flex-start;
    gap: var(--cp-space-md);
    padding: var(--cp-space-md);
    background: var(--cp-bg-white);
    border-radius: var(--cp-border-radius);
    border: 1px solid var(--cp-border);
}

.course-about__highlight svg {
    flex-shrink: 0;
    margin-top: 2px;
}

.course-about__highlight strong {
    display: block;
    font-size: 0.9rem;
    color: var(--cp-text);
}

.course-about__highlight span {
    display: block;
    font-size: 0.8rem;
    color: var(--cp-text-muted);
}

@media (max-width: 1024px) {
    .course-about-layout {
        grid-template-columns: 1fr;
    }

    .course-about__sidebar {
        position: static;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--cp-space-lg);
    }

    .course-about__photo-card {
        grid-row: 1 / 3;
    }
}

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

/* Course Outcomes */
.course-outcomes {
    background: var(--cp-bg-white);
    border: 2px solid var(--cp-primary-light);
    border-radius: var(--cp-border-radius-lg);
    padding: var(--cp-space-xl);
}

.course-outcomes__title {
    display: flex;
    align-items: center;
    gap: var(--cp-space-sm);
    font-family: var(--cp-font-heading);
    font-size: 1.4rem;
    margin-bottom: var(--cp-space-lg);
}

.course-outcomes__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--cp-space-md);
}

.course-outcome-item {
    display: flex;
    align-items: flex-start;
    gap: var(--cp-space-sm);
    font-size: 0.95rem;
    line-height: 1.5;
}

.course-outcome-item svg {
    flex-shrink: 0;
    margin-top: 2px;
}

/* ── PREMIUM CURRICULUM MODULES ───────────────────────────────────────────── */

.curriculum-modules {
    display: flex;
    flex-direction: column;
    gap: var(--cp-space-md);
}

.curriculum-module {
    background: var(--cp-bg-white);
    border-radius: var(--cp-border-radius-lg);
    overflow: hidden;
    box-shadow: var(--cp-shadow-md);
    border: 1px solid var(--cp-border);
    transition: box-shadow var(--cp-transition);
}

.curriculum-module:hover {
    box-shadow: var(--cp-shadow-lg);
}

.curriculum-module__header {
    display: flex;
    align-items: center;
    gap: var(--cp-space-lg);
    width: 100%;
    padding: var(--cp-space-lg) var(--cp-space-xl);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background var(--cp-transition-fast);
}

.curriculum-module__header:hover {
    background: var(--cp-primary-light);
}

.curriculum-module__number {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--cp-gradient-hero);
    color: var(--cp-text-light);
    font-family: var(--cp-font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    flex-shrink: 0;
}

.curriculum-module__info {
    flex: 1;
}

.curriculum-module__title {
    font-family: var(--cp-font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--cp-text);
    margin: 0 0 2px;
}

.curriculum-module__meta {
    font-size: 0.8rem;
    color: var(--cp-text-muted);
}

.curriculum-module__icon {
    color: var(--cp-secondary);
    opacity: 0.5;
    flex-shrink: 0;
}

.curriculum-module__chevron {
    transition: transform var(--cp-transition);
    color: var(--cp-text-muted);
    flex-shrink: 0;
}

.curriculum-module__header[aria-expanded="true"] .curriculum-module__chevron {
    transform: rotate(180deg);
}

.curriculum-module__body {
    display: none;
    padding: 0 var(--cp-space-xl) var(--cp-space-lg);
}

.curriculum-module__body--open {
    display: block;
}

.curriculum-module__topics {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Topic cards inside modules */
.curriculum-topic-card {
    display: flex;
    align-items: center;
    gap: var(--cp-space-md);
    padding: var(--cp-space-md) var(--cp-space-lg);
    border-radius: var(--cp-border-radius);
    text-decoration: none;
    color: var(--cp-text);
    transition: background var(--cp-transition-fast), transform var(--cp-transition-fast);
    border: 1px solid transparent;
}

.curriculum-topic-card:hover {
    background: var(--cp-primary-light);
    border-color: rgba(26, 107, 84, 0.15);
    transform: translateX(4px);
}

.curriculum-topic-card__num {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--cp-bg-cream);
    color: var(--cp-primary);
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
    border: 1px solid var(--cp-border);
}

.curriculum-topic-card__title {
    flex: 1;
    font-size: 0.9rem;
    line-height: 1.4;
}

.curriculum-topic-card__arrow {
    color: var(--cp-text-muted);
    flex-shrink: 0;
    opacity: 0;
    transition: opacity var(--cp-transition-fast);
}

.curriculum-topic-card:hover .curriculum-topic-card__arrow {
    opacity: 1;
}

.curriculum-topic-card--quiz {
    background: rgba(200, 165, 92, 0.04);
    border: 1px solid rgba(200, 165, 92, 0.15);
}

.curriculum-topic-card--quiz:hover {
    background: rgba(200, 165, 92, 0.1);
}

.curriculum-badge {
    padding: 2px 8px;
    border-radius: 100px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.curriculum-badge--locked {
    background: var(--cp-bg-cream);
    color: var(--cp-text-muted);
    display: inline-flex;
    align-items: center;
}

.curriculum-badge--quiz {
    background: rgba(200, 165, 92, 0.15);
    color: var(--cp-secondary-hover);
}

.curriculum-topics {
    list-style: none;
    padding: 0;
    margin: var(--cp-space-sm) 0 0 var(--cp-space-lg);
}

.curriculum-topic {
    display: flex;
    align-items: center;
    gap: var(--cp-space-sm);
    padding: 6px 0;
    font-size: 0.9rem;
    color: var(--cp-text-muted);
}

.curriculum-topic--quiz {
    color: var(--cp-secondary-hover);
}

/* Instructor Card */
.instructor-card {
    display: flex;
    gap: var(--cp-space-xl);
    align-items: flex-start;
    background: var(--cp-bg-white);
    border-radius: var(--cp-border-radius-lg);
    padding: var(--cp-space-xl);
    box-shadow: var(--cp-shadow-md);
}

.instructor-card__photo img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--cp-primary);
}

.instructor-card__info p {
    color: var(--cp-text-muted);
    line-height: 1.7;
    margin-bottom: var(--cp-space-md);
}

.instructor-card__credentials {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cp-space-sm);
}

.credential-badge {
    padding: 4px 12px;
    border-radius: 100px;
    font-size: 0.8rem;
    font-weight: 600;
    background: var(--cp-primary-light);
    color: var(--cp-primary);
    border: 1px solid rgba(26, 107, 84, 0.2);
}

/* Progress Bar (reused everywhere) */
.progress-bar {
    height: 8px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 100px;
    overflow: hidden;
    flex: 1;
}

.progress-bar--sm {
    height: 6px;
}

.progress-bar__fill {
    height: 100%;
    background: var(--cp-gradient-gold);
    border-radius: 100px;
    transition: width 0.5s ease;
    min-width: 0;
}

.progress-bar__label {
    font-size: 0.8rem;
    color: var(--cp-text-muted);
    margin-top: 4px;
}

/* ── FOCUS MODE LAYOUT (lessons + topics) ────────────────────────────────── */

.focus-mode {
    padding-top: var(--cp-nav-height);
}

.focus-topbar {
    position: fixed;
    top: var(--cp-nav-height);
    left: 0;
    right: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--cp-space-sm) var(--cp-space-lg);
    background: var(--cp-bg-white);
    border-bottom: 1px solid var(--cp-border);
    height: 48px;
}

.focus-topbar__left {
    display: flex;
    align-items: center;
    gap: var(--cp-space-md);
}

.focus-topbar__toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--cp-space-sm);
    border-radius: var(--cp-border-radius);
    color: var(--cp-text);
    transition: background var(--cp-transition-fast);
}

.focus-topbar__toggle:hover {
    background: var(--cp-primary-light);
}

.focus-topbar__course-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.9rem;
    color: var(--cp-text-muted);
    text-decoration: none;
}

.focus-topbar__course-link:hover {
    color: var(--cp-primary);
}

.focus-topbar__progress {
    display: flex;
    align-items: center;
    gap: var(--cp-space-sm);
    width: 250px;
    max-width: 30%;
    margin-right: var(--cp-space-lg);
}

.focus-topbar__pct {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--cp-text-muted);
    min-width: 32px;
    white-space: nowrap;
}

.focus-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    min-height: calc(100vh - var(--cp-nav-height) - 48px);
    margin-top: 48px;
    overflow: hidden;
    max-width: 100%;
    position: relative;
}

/* Sidebar background column — extends full height of content */
.focus-layout::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 300px;
    background: linear-gradient(180deg, var(--cp-bg-white) 0%, var(--cp-bg-cream) 100%);
    border-right: 1px solid var(--cp-border);
    z-index: 0;
}

/* ── PREMIUM SIDEBAR ─────────────────────────────────────────────────────── */
.focus-sidebar {
    position: sticky;
    top: calc(var(--cp-nav-height) + 48px);
    height: calc(100vh - var(--cp-nav-height) - 48px);
    overflow-y: auto;
    background: transparent; /* Background handled by ::before pseudo-element */
    border-right: none; /* Border handled by ::before */
    transition: transform var(--cp-transition);
    scrollbar-width: thin;
    scrollbar-color: var(--cp-border) transparent;
    z-index: 1;
}

.focus-sidebar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--cp-space-md) var(--cp-space-lg);
    border-bottom: 2px solid var(--cp-secondary);
    background: var(--cp-gradient-hero);
    color: var(--cp-text-light);
    position: relative;
    z-index: 2;
}

.focus-sidebar__header h3 {
    font-family: var(--cp-font-heading);
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    color: var(--cp-text-light);
}

.focus-sidebar__close {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--cp-text-muted);
}

.focus-sidebar__nav {
    padding: var(--cp-space-sm) 0;
}

.focus-nav-section {
    margin-bottom: var(--cp-space-sm);
}

.focus-nav-section__title {
    padding: var(--cp-space-md) var(--cp-space-lg) var(--cp-space-xs);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cp-secondary);
    border-top: 1px solid var(--cp-border);
    margin-top: var(--cp-space-sm);
}

.focus-nav-section:first-child .focus-nav-section__title {
    border-top: none;
    margin-top: 0;
}

.focus-nav-section__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.focus-nav-item {
    margin-bottom: 0;
}

.focus-nav-item__link {
    display: flex;
    align-items: center;
    gap: var(--cp-space-sm);
    padding: 10px var(--cp-space-lg);
    font-size: 0.85rem;
    color: var(--cp-text);
    text-decoration: none;
    transition: all var(--cp-transition-fast);
    font-weight: 600;
    border-left: 3px solid transparent;
}

.focus-nav-item__link:hover {
    background: var(--cp-primary-light);
    border-left-color: var(--cp-primary);
}

.focus-nav-item__link svg {
    color: var(--cp-secondary);
    flex-shrink: 0;
}

.focus-nav-item--active > .focus-nav-item__link,
.focus-nav-item--active-parent > .focus-nav-item__link {
    background: var(--cp-primary-light);
    color: var(--cp-primary);
    border-left: 3px solid var(--cp-primary);
}

.focus-nav-subtopics {
    list-style: none;
    padding: 0;
    margin: 0;
}

.focus-nav-subtopic a {
    display: flex;
    align-items: center;
    gap: var(--cp-space-sm);
    padding: 8px var(--cp-space-lg) 8px calc(var(--cp-space-lg) + 24px);
    font-size: 0.8rem;
    color: var(--cp-text-muted);
    text-decoration: none;
    transition: all var(--cp-transition-fast);
    border-left: 3px solid transparent;
}

.focus-nav-subtopic a:hover {
    background: var(--cp-primary-light);
    color: var(--cp-primary);
    border-left-color: rgba(26, 107, 84, 0.3);
}

.focus-nav-subtopic--active a {
    color: var(--cp-primary);
    font-weight: 600;
    background: rgba(26, 107, 84, 0.08);
    border-left-color: var(--cp-primary);
}

.focus-nav-subtopic--done a {
    color: var(--cp-success);
}

.focus-nav-subtopic__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 2px solid var(--cp-border);
    flex-shrink: 0;
    transition: all var(--cp-transition-fast);
}

.focus-nav-subtopic a:hover .focus-nav-subtopic__dot {
    border-color: var(--cp-primary);
}

.focus-nav-subtopic__dot--active {
    border-color: var(--cp-primary);
    background: var(--cp-primary);
    box-shadow: 0 0 6px rgba(26, 107, 84, 0.4);
}

/* Main content area */
.focus-content {
    padding: var(--cp-space-xl) var(--cp-space-2xl);
    max-width: 1000px;
    width: 100%;
}

/* Wide variant: hero fills column, content constrained inside .focus-inner */
.focus-content--wide {
    max-width: 100%;
    padding: 0;
    overflow: hidden;
    min-width: 0;
}

.focus-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--cp-space-xl) var(--cp-space-2xl);
}

/* Focus Mode Hero (lesson + topic pages) — fills content column */
.focus-hero {
    position: relative;
    overflow: hidden;
    margin-bottom: 0;
    min-height: 280px;
    display: flex;
    align-items: flex-end;
}

.focus-hero--tall {
    min-height: 360px;
}

.focus-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.focus-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.focus-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 74, 58, 0.2) 0%, rgba(10, 58, 45, 0.85) 70%, rgba(10, 58, 45, 0.95) 100%);
    z-index: 1;
}

.focus-hero__content {
    position: relative;
    z-index: 2;
    padding: var(--cp-space-xl) var(--cp-space-2xl);
    width: 100%;
    color: var(--cp-text-light);
}

.focus-hero__content h1 {
    font-family: var(--cp-font-heading);
    font-size: 1.8rem;
    line-height: 1.3;
    margin: 0 0 var(--cp-space-sm);
    color: var(--cp-text-light);
}

.focus-hero__badge {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 100px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: rgba(200, 165, 92, 0.3);
    border: 1px solid rgba(200, 165, 92, 0.5);
    color: var(--cp-accent);
    margin-bottom: var(--cp-space-sm);
}

.focus-hero__breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--cp-space-sm);
    font-size: 0.85rem;
    margin-bottom: var(--cp-space-sm);
    opacity: 0.8;
}

.focus-hero__breadcrumb a {
    color: var(--cp-accent);
    text-decoration: none;
}

.focus-hero__breadcrumb a:hover {
    text-decoration: underline;
}

.focus-hero__breadcrumb span {
    color: rgba(255, 255, 255, 0.5);
}

.focus-hero__meta {
    display: flex;
    align-items: center;
    gap: var(--cp-space-md);
    font-size: 0.85rem;
    opacity: 0.8;
}

.focus-hero__meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.focus-hero__completed {
    padding: 2px 10px;
    border-radius: 100px;
    background: rgba(5, 150, 105, 0.3);
    border: 1px solid rgba(5, 150, 105, 0.5);
    color: #a7f3d0;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Hero top row (breadcrumb + step counter) */
.focus-hero__top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cp-space-md);
    margin-bottom: var(--cp-space-sm);
}

.focus-hero__step-counter {
    padding: 4px 12px;
    border-radius: 100px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(200, 165, 92, 0.25);
    border: 1px solid rgba(200, 165, 92, 0.4);
    color: var(--cp-accent);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Step progress dots */
.focus-hero__steps {
    display: flex;
    gap: 6px;
    margin-top: var(--cp-space-md);
}

.focus-hero__step-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.4);
    transition: all var(--cp-transition);
}

.focus-hero__step-dot--active {
    background: var(--cp-accent);
    border-color: var(--cp-accent);
    box-shadow: 0 0 8px rgba(200, 165, 92, 0.6);
    transform: scale(1.2);
}

.focus-hero__step-dot--done {
    background: var(--cp-success);
    border-color: var(--cp-success);
}

/* ── PREMIUM CONTENT STYLING (entry-content inside focus mode) ───────────── */

/* Content section cards */
.focus-content .entry-content h2,
.focus-content .entry-content h3 {
    position: relative;
    padding-top: var(--cp-space-xl);
    margin-top: var(--cp-space-xl);
}

/* Gold decorative divider before h2 headings */
.focus-content .entry-content h2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--cp-gradient-gold);
    border-radius: 100px;
}

.focus-content .entry-content h2:first-child::before,
.focus-content .entry-content h2:first-child {
    padding-top: 0;
    margin-top: 0;
}

.focus-content .entry-content h2:first-child::before {
    display: none;
}

/* Workbook cover images — larger, framed, premium */
.focus-content .entry-content img {
    border-radius: var(--cp-border-radius-lg);
    box-shadow: var(--cp-shadow-lg);
    border: 4px solid var(--cp-bg-white);
    outline: 1px solid var(--cp-border);
    max-width: 340px;
    display: block !important;
    float: none !important;
    margin: var(--cp-space-xl) auto !important;
    transition: transform var(--cp-transition), box-shadow var(--cp-transition);
}

/* Allow alignleft/alignright to wrap text on desktop, stack on mobile */
@media (min-width: 769px) {
    .focus-content .entry-content .alignleft {
        float: left !important;
        display: inline !important;
        margin: 0 var(--cp-space-lg) var(--cp-space-md) 0 !important;
        max-width: 40%;
    }
    .focus-content .entry-content .alignright {
        float: right !important;
        display: inline !important;
        margin: 0 0 var(--cp-space-md) var(--cp-space-lg) !important;
        max-width: 40%;
    }
}
@media (max-width: 768px) {
    .focus-content .entry-content .alignleft,
    .focus-content .entry-content .alignright {
        float: none !important;
        display: block !important;
        margin: var(--cp-space-md) auto !important;
        max-width: 100%;
    }
}

.focus-content .entry-content img:hover {
    transform: scale(1.02);
    box-shadow: var(--cp-shadow-xl);
}

/* Clear floats from legacy LD content */
.focus-content .entry-content::after {
    content: '';
    display: table;
    clear: both;
}

/* Blockquotes — premium styling */
.focus-content .entry-content blockquote {
    background: linear-gradient(135deg, var(--cp-primary-light), rgba(200, 165, 92, 0.08));
    border-left: 4px solid var(--cp-secondary);
    border-radius: 0 var(--cp-border-radius-lg) var(--cp-border-radius-lg) 0;
    padding: var(--cp-space-lg) var(--cp-space-xl);
    margin: var(--cp-space-xl) 0;
    font-style: italic;
    font-size: 1.1rem;
    color: var(--cp-text);
    box-shadow: var(--cp-shadow);
}

/* Ordered lists in content — premium numbering */
.focus-content .entry-content ol {
    counter-reset: premium-list;
    list-style: none;
    padding-left: 0;
}

.focus-content .entry-content ol > li {
    counter-increment: premium-list;
    position: relative;
    padding-left: 48px;
    margin-bottom: var(--cp-space-md);
    line-height: 1.7;
}

.focus-content .entry-content ol > li::before {
    content: counter(premium-list);
    position: absolute;
    left: 0;
    top: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--cp-primary-light);
    color: var(--cp-primary);
    font-weight: 700;
    font-size: 0.85rem;
}

/* Unordered lists — custom bullets */
.focus-content .entry-content ul {
    list-style: none;
    padding-left: 0;
}

.focus-content .entry-content ul > li {
    position: relative;
    padding-left: 28px;
    margin-bottom: var(--cp-space-sm);
    line-height: 1.7;
}

.focus-content .entry-content ul > li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 10px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cp-gradient-gold);
}

/* Section wrapper cards for topic content */
.focus-content__body {
    margin-bottom: var(--cp-space-xl);
}

.focus-content__body .entry-content > h2 + *,
.focus-content__body .entry-content > h2 + * ~ *:not(h2):not(h3) {
    /* Content flows naturally under headings */
}

/* Gold section divider (standalone) */
.focus-gold-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--cp-space-md);
    margin: var(--cp-space-2xl) 0;
}

.focus-gold-divider::before,
.focus-gold-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--cp-gradient-gold);
    opacity: 0.5;
}

.focus-gold-divider__diamond {
    width: 8px;
    height: 8px;
    background: var(--cp-secondary);
    transform: rotate(45deg);
    flex-shrink: 0;
}

/* Premium resources section */
.focus-content__resources {
    margin: var(--cp-space-xl) 0;
    padding: var(--cp-space-xl);
    background: linear-gradient(135deg, var(--cp-bg-cream), rgba(200, 165, 92, 0.06));
    border-radius: var(--cp-border-radius-lg);
    border: 1px solid rgba(200, 165, 92, 0.2);
    box-shadow: var(--cp-shadow);
}

/* Premium Mark as Complete section */
.focus-content__complete {
    margin: var(--cp-space-2xl) 0;
    text-align: center;
    padding: var(--cp-space-2xl);
    background: linear-gradient(135deg, var(--cp-bg-cream), rgba(200, 165, 92, 0.05));
    border-radius: var(--cp-border-radius-xl);
    border: 1px solid var(--cp-border);
    box-shadow: var(--cp-shadow-md);
}

.focus-content__header {
    margin-bottom: var(--cp-space-xl);
}

.focus-content__header h1 {
    font-family: var(--cp-font-heading);
    font-size: 2rem;
    line-height: 1.3;
}

.focus-content__breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--cp-space-sm);
    font-size: 0.85rem;
    color: var(--cp-text-muted);
    margin-bottom: var(--cp-space-sm);
}

.focus-content__breadcrumb a {
    color: var(--cp-primary);
    text-decoration: none;
}

.focus-content__time {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
    color: var(--cp-text-muted);
    margin-top: var(--cp-space-sm);
}

/* Video player */
.focus-video {
    margin-bottom: var(--cp-space-xl);
}

.focus-video__wrapper {
    position: relative;
    padding-bottom: 56.25%;
    border-radius: var(--cp-border-radius-lg);
    overflow: hidden;
    background: #000;
    box-shadow: var(--cp-shadow-lg);
}

.focus-video__wrapper iframe,
.focus-video__wrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.focus-content__body {
    margin-bottom: var(--cp-space-xl);
}

/* Topic cards (listed in lesson view) */
.focus-content__topics {
    margin: var(--cp-space-xl) 0;
    padding-top: var(--cp-space-xl);
    border-top: 1px solid var(--cp-border);
}

.focus-content__topics h2 {
    font-family: var(--cp-font-heading);
    font-size: 1.3rem;
    margin-bottom: var(--cp-space-md);
}

.topic-cards {
    display: flex;
    flex-direction: column;
    gap: var(--cp-space-sm);
}

.topic-card {
    display: flex;
    align-items: center;
    gap: var(--cp-space-md);
    padding: var(--cp-space-md) var(--cp-space-lg);
    background: var(--cp-bg-white);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-border-radius);
    text-decoration: none;
    color: var(--cp-text);
    transition: border-color var(--cp-transition-fast), box-shadow var(--cp-transition-fast);
}

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

.topic-card--completed {
    border-color: var(--cp-success);
    background: rgba(5, 150, 105, 0.03);
}

.topic-card__number {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--cp-primary-light);
    color: var(--cp-primary);
    font-size: 0.85rem;
    font-weight: 700;
    flex-shrink: 0;
}

.topic-card--completed .topic-card__number {
    background: rgba(5, 150, 105, 0.1);
    color: var(--cp-success);
}

.topic-card__title {
    flex: 1;
    font-size: 0.95rem;
    font-weight: 500;
}

.topic-card__arrow,
.topic-card__check {
    flex-shrink: 0;
}

/* Resources */
.focus-content__resources {
    margin: var(--cp-space-xl) 0;
    padding: var(--cp-space-lg);
    background: var(--cp-bg-cream);
    border-radius: var(--cp-border-radius-lg);
}

.focus-content__resources h3 {
    font-size: 1rem;
    margin-bottom: var(--cp-space-md);
}

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

.resource-item {
    display: flex;
    align-items: center;
    gap: var(--cp-space-sm);
    padding: var(--cp-space-sm) 0;
    border-bottom: 1px solid var(--cp-border);
}

.resource-item:last-child {
    border-bottom: none;
}

.resource-item a {
    color: var(--cp-primary);
    text-decoration: none;
    font-weight: 500;
}

.resource-item a:hover {
    text-decoration: underline;
}

.resource-item__type {
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 100px;
    background: var(--cp-primary-light);
    color: var(--cp-primary);
    font-weight: 600;
}

/* Mark as Complete */
.focus-content__complete {
    margin: var(--cp-space-xl) 0;
    text-align: center;
    padding: var(--cp-space-xl);
    background: var(--cp-bg-cream);
    border-radius: var(--cp-border-radius-lg);
}

.complete-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--cp-space-sm);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--cp-success);
}

.complete-topic-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--cp-space-sm);
}

/* Bottom navigation — Premium nav tiles */
.focus-nav-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--cp-space-lg);
    margin-top: var(--cp-space-2xl);
    padding-top: var(--cp-space-2xl);
    position: relative;
}

/* Gold divider above nav */
.focus-nav-bottom::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--cp-gradient-gold);
    border-radius: 100px;
}

.focus-nav-btn {
    display: flex;
    align-items: center;
    gap: var(--cp-space-md);
    padding: var(--cp-space-lg) var(--cp-space-xl);
    background: var(--cp-bg-white);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-border-radius-lg);
    text-decoration: none;
    color: var(--cp-text);
    transition: all var(--cp-transition);
    box-shadow: var(--cp-shadow);
    position: relative;
    overflow: hidden;
}

.focus-nav-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--cp-gradient-gold);
    opacity: 0;
    transition: opacity var(--cp-transition);
}

.focus-nav-btn:hover {
    border-color: var(--cp-primary);
    box-shadow: var(--cp-shadow-lg);
    transform: translateY(-2px);
}

.focus-nav-btn:hover::after {
    opacity: 1;
}

.focus-nav-btn svg {
    color: var(--cp-primary);
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    padding: 8px;
    border-radius: 50%;
    background: var(--cp-primary-light);
    transition: background var(--cp-transition), color var(--cp-transition);
}

.focus-nav-btn:hover svg {
    background: var(--cp-primary);
    color: var(--cp-text-light);
}

.focus-nav-btn--prev {
    text-align: left;
}

.focus-nav-btn--next {
    text-align: right;
    flex-direction: row-reverse;
}

.focus-nav-btn__label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cp-secondary);
    font-weight: 700;
    margin-bottom: 4px;
}

.focus-nav-btn__title {
    display: block;
    font-family: var(--cp-font-heading);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.3;
    color: var(--cp-text);
}

/* ── QUIZ INTERFACE (single-sg_quiz.php) ─────────────────────────────────── */

.quiz-container {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--cp-space-xl) var(--cp-space-lg);
    margin-top: 48px;
}

.quiz-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--cp-space-xl);
    margin-bottom: var(--cp-space-xl);
}

.quiz-header__info h1 {
    font-family: var(--cp-font-heading);
    font-size: 2rem;
    margin-bottom: var(--cp-space-sm);
}

.quiz-header__desc {
    color: var(--cp-text-muted);
}

.quiz-header__stats {
    display: flex;
    gap: var(--cp-space-lg);
}

.quiz-stat {
    text-align: center;
    padding: var(--cp-space-md) var(--cp-space-lg);
    background: var(--cp-bg-cream);
    border-radius: var(--cp-border-radius);
    min-width: 80px;
}

.quiz-stat__value {
    display: block;
    font-family: var(--cp-font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--cp-primary);
}

.quiz-stat__label {
    display: block;
    font-size: 0.75rem;
    color: var(--cp-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Quiz Start Screen */
.quiz-start__card {
    text-align: center;
    padding: var(--cp-space-2xl) var(--cp-space-xl);
    background: var(--cp-bg-white);
    border-radius: var(--cp-border-radius-lg);
    box-shadow: var(--cp-shadow-md);
    overflow: hidden;
}

.quiz-start__image {
    max-width: 320px;
    margin: 0 auto var(--cp-space-lg);
    border-radius: var(--cp-border-radius-lg);
    overflow: hidden;
    box-shadow: var(--cp-shadow);
}

.quiz-start__image img {
    width: 100%;
    height: auto;
    display: block;
}

.quiz-start__card h2 {
    font-family: var(--cp-font-heading);
    margin: var(--cp-space-md) 0;
}

.quiz-start__rules {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--cp-space-xl);
    display: inline-flex;
    flex-direction: column;
    gap: var(--cp-space-sm);
    text-align: left;
}

.quiz-start__rules li {
    display: flex;
    align-items: center;
    gap: var(--cp-space-sm);
    font-size: 0.95rem;
    color: var(--cp-text-muted);
}

.quiz-start__rules li::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cp-primary);
    flex-shrink: 0;
}

/* Timer */
.quiz-timer {
    display: flex;
    align-items: center;
    gap: var(--cp-space-sm);
    justify-content: flex-end;
    font-size: 1.1rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    margin-bottom: var(--cp-space-md);
    color: var(--cp-text);
}

.quiz-timer.quiz-timer--warning {
    color: var(--cp-warning);
    animation: pulse 1s infinite;
}

.quiz-timer.quiz-timer--danger {
    color: var(--cp-danger);
    animation: pulse 0.5s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Quiz Progress */
.quiz-progress {
    display: flex;
    align-items: center;
    gap: var(--cp-space-md);
    margin-bottom: var(--cp-space-xl);
}

.quiz-progress__label {
    font-size: 0.85rem;
    color: var(--cp-text-muted);
    white-space: nowrap;
}

/* Question Card */
.quiz-question__card {
    background: var(--cp-bg-white);
    border-radius: var(--cp-border-radius-lg);
    padding: var(--cp-space-xl);
    box-shadow: var(--cp-shadow-md);
    margin-bottom: var(--cp-space-lg);
}

.quiz-question__number {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--cp-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--cp-space-md);
}

.quiz-question__points {
    padding: 2px 10px;
    border-radius: 100px;
    background: var(--cp-accent-light);
    color: var(--cp-secondary-hover);
    font-weight: 600;
}

.quiz-question__title {
    font-family: var(--cp-font-heading);
    font-size: 1.35rem;
    line-height: 1.4;
    margin-bottom: var(--cp-space-lg);
}

.quiz-question__context {
    padding: var(--cp-space-md);
    background: var(--cp-bg-cream);
    border-radius: var(--cp-border-radius);
    margin-bottom: var(--cp-space-lg);
    font-size: 0.9rem;
}

/* Options */
.quiz-options {
    display: flex;
    flex-direction: column;
    gap: var(--cp-space-sm);
}

.quiz-option {
    display: flex;
    align-items: center;
    gap: var(--cp-space-md);
    padding: var(--cp-space-md) var(--cp-space-lg);
    border: 2px solid var(--cp-border);
    border-radius: var(--cp-border-radius);
    cursor: pointer;
    transition: border-color var(--cp-transition-fast), background var(--cp-transition-fast);
}

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

.quiz-option__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.quiz-option__indicator {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--cp-border);
    flex-shrink: 0;
    position: relative;
    transition: border-color var(--cp-transition-fast), background var(--cp-transition-fast);
}

input[type="checkbox"] ~ .quiz-option__indicator {
    border-radius: 4px;
}

.quiz-option__input:checked ~ .quiz-option__indicator {
    border-color: var(--cp-primary);
    background: var(--cp-primary);
}

.quiz-option__input:checked ~ .quiz-option__indicator::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}

input[type="checkbox"]:checked ~ .quiz-option__indicator::after {
    width: 10px;
    height: 6px;
    border-radius: 0;
    background: none;
    border-left: 2px solid white;
    border-bottom: 2px solid white;
    transform: translate(-50%, -60%) rotate(-45deg);
}

.quiz-option.quiz-option--selected {
    border-color: var(--cp-primary);
    background: var(--cp-primary-light);
}

.quiz-option.quiz-option--correct {
    border-color: var(--cp-success);
    background: rgba(5, 150, 105, 0.06);
}

.quiz-option.quiz-option--incorrect {
    border-color: var(--cp-danger);
    background: rgba(220, 38, 38, 0.06);
}

.quiz-option__text {
    font-size: 0.95rem;
    line-height: 1.5;
    flex: 1;
}

/* Explanation */
.quiz-explanation {
    display: flex;
    align-items: flex-start;
    gap: var(--cp-space-sm);
    margin-top: var(--cp-space-lg);
    padding: var(--cp-space-md);
    background: var(--cp-primary-light);
    border-radius: var(--cp-border-radius);
    border-left: 3px solid var(--cp-primary);
}

.quiz-explanation svg {
    flex-shrink: 0;
    margin-top: 2px;
}

.quiz-explanation p {
    font-size: 0.9rem;
    color: var(--cp-text);
    margin: 0;
}

/* Question Actions */
.quiz-question__actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Results Screen */
.quiz-results__card {
    text-align: center;
    padding: var(--cp-space-2xl) var(--cp-space-xl);
    background: var(--cp-bg-white);
    border-radius: var(--cp-border-radius-lg);
    box-shadow: var(--cp-shadow-lg);
}

.quiz-results__icon {
    margin-bottom: var(--cp-space-md);
    position: relative;
}

.quiz-results__accent-img {
    width: 120px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--cp-border-radius);
    opacity: 0.15;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
}

.quiz-results__icon svg {
    position: relative;
    z-index: 1;
}

.quiz-results__card h2 {
    font-family: var(--cp-font-heading);
    font-size: 1.8rem;
    margin-bottom: var(--cp-space-sm);
}

.quiz-results__card > p {
    color: var(--cp-text-muted);
    margin-bottom: var(--cp-space-xl);
}

/* Score Ring */
.quiz-score-ring {
    position: relative;
    width: 140px;
    height: 140px;
    margin: 0 auto var(--cp-space-xl);
}

.quiz-score-ring__svg {
    width: 100%;
    height: 100%;
}

.quiz-score-ring__value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--cp-font-heading);
    font-size: 2rem;
    font-weight: 700;
    color: var(--cp-primary);
}

.quiz-results__stats {
    display: flex;
    justify-content: center;
    gap: var(--cp-space-xl);
    margin-bottom: var(--cp-space-xl);
    font-size: 0.9rem;
    color: var(--cp-text-muted);
}

.quiz-results__actions {
    display: flex;
    justify-content: center;
    gap: var(--cp-space-md);
    flex-wrap: wrap;
}

/* Dark section */
.section-dark {
    background: var(--cp-gradient-hero);
    padding: var(--cp-space-2xl) 0;
}

.text-light {
    color: var(--cp-text-light) !important;
}

.text-light-muted {
    color: var(--cp-text-on-dark) !important;
    opacity: 0.85;
}

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .course-hero__content {
        grid-template-columns: 1fr;
    }

    .course-hero__action-card {
        max-width: 400px;
    }

    .course-outcomes__grid {
        grid-template-columns: 1fr;
    }

    .instructor-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

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

    .quiz-header {
        flex-direction: column;
    }
}

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

    .focus-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 300px;
        z-index: 100;
        transform: translateX(-100%);
        height: 100vh;
        padding-top: var(--cp-nav-height);
    }

    .focus-sidebar.focus-sidebar--open {
        transform: translateX(0);
        box-shadow: var(--cp-shadow-xl);
    }

    .focus-sidebar__close {
        display: block;
    }

    /* Focus content */
    .focus-content {
        padding: var(--cp-space-md);
    }

    .focus-inner {
        padding: var(--cp-space-lg) var(--cp-space-md);
        max-width: 100%;
    }

    /* Focus layout: hide pseudo-column on mobile */
    .focus-layout {
        grid-template-columns: 1fr;
    }

    .focus-layout::before {
        display: none;
    }

    /* Focus hero */
    .focus-hero {
        min-height: 220px;
    }

    .focus-hero--tall {
        min-height: 260px;
    }

    .focus-hero__content {
        padding: var(--cp-space-lg);
    }

    .focus-hero__content h1 {
        font-size: 1.3rem;
    }

    .focus-hero__top-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--cp-space-sm);
    }

    /* Step dots: hide if too many, show progress bar instead */
    .focus-hero__steps {
        flex-wrap: wrap;
        max-height: 24px;
        overflow: hidden;
    }

    /* Workbook images fill viewport on mobile */
    .focus-content .entry-content img {
        max-width: 100%;
    }

    .focus-content__header h1 {
        font-size: 1.5rem;
    }

    /* Course hero */
    .course-hero__content {
        grid-template-columns: 1fr;
    }

    .course-hero__text h1 {
        font-size: 1.6rem;
    }

    .course-hero__action-card {
        max-width: 100%;
    }

    /* Course about layout */
    .course-about-layout {
        grid-template-columns: 1fr !important;
        gap: var(--cp-space-lg) !important;
    }

    .course-about__sidebar {
        grid-template-columns: 1fr;
    }

    .course-about__photo-card img {
        height: 200px;
    }

    /* Course outcomes */
    .course-outcomes {
        padding: var(--cp-space-lg);
    }

    .course-outcomes__grid {
        grid-template-columns: 1fr;
    }

    /* Curriculum modules */
    .curriculum-module__header {
        padding: var(--cp-space-md);
        gap: var(--cp-space-md);
    }

    .curriculum-module__number {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .curriculum-module__title {
        font-size: 0.95rem;
    }

    .curriculum-module__icon {
        display: none;
    }

    .curriculum-module__body {
        padding: 0 var(--cp-space-md) var(--cp-space-md);
    }

    /* Instructor card */
    .instructor-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: var(--cp-space-lg);
    }

    .instructor-card__photo img {
        width: 120px;
        height: 120px;
    }

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

    /* Quiz */
    .quiz-container {
        padding: var(--cp-space-lg) var(--cp-space-md);
    }

    .quiz-header {
        flex-direction: column;
    }

    .quiz-question__card {
        padding: var(--cp-space-lg);
    }

    .quiz-question__title {
        font-size: 1.15rem;
    }

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

    .quiz-stat {
        padding: var(--cp-space-sm) var(--cp-space-md);
        min-width: 60px;
    }

    .quiz-stat__value {
        font-size: 1.2rem;
    }

    /* Quiz options: bigger touch targets */
    .quiz-option {
        padding: var(--cp-space-md);
        min-height: 48px;
    }

    /* Nav tiles */
    .focus-nav-bottom {
        grid-template-columns: 1fr;
    }

    .focus-nav-btn {
        padding: var(--cp-space-md) var(--cp-space-lg);
    }

    .focus-nav-btn--next {
        flex-direction: row-reverse;
    }

    .focus-nav-btn svg {
        width: 32px;
        height: 32px;
        padding: 6px;
    }

    /* Grid overrides */
    .grid-3 {
        grid-template-columns: 1fr;
    }

    /* Feature cards */
    .feature-card--with-image .feature-card__body {
        padding: var(--cp-space-md);
    }

    /* Course cards */
    .course-card__content {
        padding: var(--cp-space-md);
    }

    /* Progress bar in topbar */
    .focus-topbar__progress {
        width: auto;
        max-width: 40%;
    }

    /* Curriculum banner */
    .curriculum-banner {
        margin-left: 0;
        margin-right: 0;
    }
}

/* Sidebar overlay for mobile */
.focus-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99;
}

.focus-overlay--visible {
    display: block;
}

/* ── INTERACTIVE WORKBOOK ──────────────────────────────────────────── */

.workbook-section {
    margin-top: var(--cp-space-2xl);
    padding-top: var(--cp-space-xl);
}

/* ── QW-4 (discoverability): Journey button in focus topbar ─────── */
.focus-topbar__journey {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 9999px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    transition: all 0.2s ease;
    margin-right: var(--cp-space-sm);
}
.focus-topbar__journey:hover {
    background: rgba(94,206,123,0.2);
    border-color: #5ece7b;
    color: #5ece7b;
    transform: translateY(-1px);
}
@media (max-width: 640px) {
    .focus-topbar__journey-label { display: none; }
    .focus-topbar__journey { padding: 6px 8px; }
}

/* ── P3-1: Coach page base styles (no inline styles) ───────────── */
.coach-page {
    padding-top: 0;
    background: #faf8f5;
    min-height: 100vh;
    padding-bottom: 80px;
}
.coach-page--viewer {
    padding-top: 0;
}
.coach-page--error {
    padding: calc(var(--cp-nav-height, 80px) + 60px) 20px;
}
.coach-container--wide {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.coach-back-link {
    color: var(--cp-primary);
    text-decoration: none;
    font-weight: 600;
}

/* Coach hero text styles (renders inside deal-hero pattern with background image) */
.coach-page .deal-hero { margin-bottom: 48px; }
.coach-hero__back {
    color: #5ece7b;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
    transition: opacity 0.2s;
}
.coach-hero__back:hover { opacity: 0.8; }
.coach-hero__top {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 40px;
    align-items: end;
}
@media (max-width: 768px) {
    .coach-hero__top { grid-template-columns: 1fr; gap: 24px; }
}
.coach-hero__label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #5ece7b;
    margin-bottom: 8px;
}
.coach-hero__title {
    font-family: Georgia, serif;
    font-size: 2.4rem;
    color: #fff;
    margin: 0 0 12px;
    line-height: 1.15;
}
.coach-hero__desc {
    font-size: 1.05rem;
    color: rgba(255,255,255,0.8);
    max-width: 540px;
    margin: 0;
}
.coach-hero__email {
    font-size: 1rem;
    color: rgba(255,255,255,0.75);
    margin: 0 0 12px;
}
.coach-hero__stats-row {
    display: flex;
    gap: 20px;
}
.coach-hero__stat {
    text-align: center;
    padding: 12px 16px;
    background: rgba(255,255,255,0.1);
    border-radius: 12px;
    min-width: 72px;
}
.coach-hero__stat-num {
    display: block;
    font-family: Georgia, serif;
    font-size: 1.6rem;
    font-weight: 800;
    color: #5ece7b;
    line-height: 1;
    margin-bottom: 4px;
}
.coach-hero__stat-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.6);
}
@media (max-width: 480px) {
    .coach-hero__stats-row { flex-wrap: wrap; }
    .coach-hero__stat { flex: 1; min-width: 60px; }
}

/* P3-3: Health dots + badges */
.coach-health-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.coach-health-dot--green  { background: #5ece7b; }
.coach-health-dot--yellow { background: #f0ad4e; }
.coach-health-dot--red    { background: #dc2626; }
.coach-health-dot--card {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 14px;
    height: 14px;
    border: 3px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.coach-health-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 9999px;
    background: rgba(255,255,255,0.12);
}
.coach-health-badge__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.health--green .coach-health-badge__dot  { background: #5ece7b; }
.health--yellow .coach-health-badge__dot { background: #f0ad4e; }
.health--red .coach-health-badge__dot    { background: #dc2626; }
.coach-health-badge--inline {
    padding: 2px 8px;
    font-size: 0.72rem;
    background: transparent;
}

/* P3-4: Cohort summary stats */
.coach-cohort-stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}
@media (max-width: 640px) {
    .coach-cohort-stats { grid-template-columns: repeat(3, 1fr); }
}
.coach-cohort-stats__item {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 14px;
    padding: 20px 12px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.coach-cohort-stats__num {
    display: block;
    font-family: Georgia, serif;
    font-size: 2rem;
    font-weight: 800;
    color: var(--cp-primary);
    line-height: 1;
    margin-bottom: 6px;
}
.coach-cohort-stats__label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cp-text-muted);
}
.coach-cohort-stats__item--green .coach-cohort-stats__num { color: #5ece7b; }
.coach-cohort-stats__item--red .coach-cohort-stats__num   { color: #dc2626; }

/* P3-2: Search/Filter/Sort toolbar */
.coach-toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.coach-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 2px solid var(--cp-border);
    border-radius: 9999px;
    padding: 8px 16px;
    flex: 1;
    min-width: 200px;
    max-width: 360px;
    transition: border-color 0.2s;
}
.coach-search:focus-within {
    border-color: var(--cp-primary);
}
.coach-search svg { color: var(--cp-text-muted); flex-shrink: 0; }
.coach-search__input {
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--cp-text);
    width: 100%;
    outline: none;
}
.coach-filters {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.coach-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    background: #fff;
    border: 1px solid var(--cp-border);
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--cp-text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}
.coach-filter-pill:hover { border-color: var(--cp-primary); color: var(--cp-primary); }
.coach-filter-pill--active {
    background: var(--cp-primary);
    border-color: var(--cp-primary);
    color: #fff;
}
.coach-filter-pill--active .coach-health-dot { background: #fff; }
.coach-sort {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}
.coach-sort__label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--cp-text-muted);
}
.coach-sort__select {
    padding: 7px 12px;
    border: 1px solid var(--cp-border);
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--cp-text);
    background: #fff;
    cursor: pointer;
}
@media (max-width: 768px) {
    .coach-toolbar { flex-direction: column; align-items: stretch; }
    .coach-search { max-width: none; }
    .coach-sort { margin-left: 0; }
}

/* Coach empty state */
.coach-empty {
    text-align: center;
    padding: 80px 20px;
    background: #fff;
    border-radius: 16px;
    color: var(--cp-text-muted);
}
.coach-empty svg { color: var(--cp-primary); opacity: 0.4; margin-bottom: 16px; }
.coach-empty h3 { font-family: Georgia, serif; color: var(--cp-heading); margin: 0 0 8px; }
.coach-empty p { margin: 0; }

/* No results message */
.coach-no-results {
    text-align: center;
    padding: 40px 20px;
    font-size: 0.95rem;
    color: var(--cp-text-muted);
    font-style: italic;
}

/* Student card — avatar needs relative for health dot */
.coach-student-card__avatar {
    position: relative;
}

/* ── Emails Tab (Mode B) ────────────────────────────────────────── */
.coach-emails-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}
.coach-email-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.coach-email-card {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 16px;
    padding: 20px 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transition: all 0.2s ease;
}
.coach-email-card:hover {
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
.coach-email-card--draft {
    border-left: 4px solid #b48c3c;
}
.coach-email-card--sent {
    border-left: 4px solid #5ece7b;
}
.coach-email-card__header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.coach-email-card__status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #7c5c2e;
    background: rgba(180,140,60,0.12);
}
.coach-email-card__status-badge--sent {
    color: #1a5c3a;
    background: rgba(94,206,123,0.12);
}
.coach-email-card__date {
    font-size: 0.78rem;
    color: var(--cp-text-muted);
}
.coach-email-card__send-btn {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.coach-email-card__subject {
    margin: 0 0 10px;
    font-family: Georgia, serif;
    font-size: 1.1rem;
    color: var(--cp-heading);
}
.coach-email-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 12px;
}
.coach-email-card__chip {
    display: inline-block;
    padding: 3px 10px;
    background: rgba(39,125,76,0.06);
    color: var(--cp-primary);
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 600;
}
.coach-email-card__body {
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--cp-text);
    white-space: pre-wrap;
    max-height: 300px;
    overflow-y: auto;
    padding: 16px;
    background: #fafbfc;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.04);
}

/* ── P4-11: Progress Over Time ──────────────────────────────────── */
.progress-card {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.progress-card__header {
    margin-bottom: 20px;
}
.progress-card__header h3 {
    margin: 0 0 6px;
    font-family: Georgia, serif;
    font-size: 1.2rem;
    color: var(--cp-heading);
}
.progress-card__meta {
    font-size: 0.88rem;
    color: var(--cp-text);
}
.progress-card__dates {
    display: block;
    font-size: 0.78rem;
    color: var(--cp-text-muted);
    margin-top: 4px;
}
.progress-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--cp-text-muted);
    font-style: italic;
}
.progress-empty__hint {
    font-size: 0.9rem;
    color: var(--cp-text-muted);
    font-style: italic;
    margin: 0;
}

/* Radar chart */
.progress-radar {
    max-width: 440px;
    margin: 0 auto;
}
.progress-radar svg {
    width: 100%;
    height: auto;
    display: block;
}
.progress-radar__legend {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 12px;
    font-size: 0.8rem;
    color: var(--cp-text-muted);
}
.progress-radar__legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.progress-radar__swatch {
    display: inline-block;
    width: 14px;
    height: 4px;
    border-radius: 2px;
    background: var(--cp-primary);
}
.progress-radar__swatch--prev {
    background: #b48c3c;
    border-top: 1px dashed #b48c3c;
}

/* Wheel comparison (horizontal bars) */
.progress-wheel-compare {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.progress-spoke {
    display: grid;
    grid-template-columns: 100px 1fr 50px 40px;
    gap: 10px;
    align-items: center;
}
@media (max-width: 480px) {
    .progress-spoke { grid-template-columns: 70px 1fr 40px 32px; }
}
.progress-spoke__label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--cp-text);
    text-align: right;
}
.progress-spoke__bars {
    position: relative;
    height: 24px;
    background: #f5f5f3;
    border-radius: 6px;
    overflow: hidden;
}
.progress-spoke__bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 6px;
    transition: width 0.6s ease;
}
.progress-spoke__bar--prev {
    background: rgba(180,140,60,0.3);
    z-index: 1;
}
.progress-spoke__bar--curr {
    background: linear-gradient(90deg, var(--cp-primary), #5ece7b);
    z-index: 2;
    height: 60%;
    top: 20%;
    border-radius: 4px;
}
.progress-spoke__score {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--cp-text);
    text-align: center;
}
.progress-delta {
    font-size: 0.75rem;
    font-weight: 800;
    text-align: center;
    border-radius: 6px;
    padding: 2px 6px;
}
.progress-delta--up   { color: #1a5c3a; background: rgba(94,206,123,0.15); }
.progress-delta--down { color: #dc2626; background: rgba(220,38,38,0.1); }
.progress-delta--same { color: var(--cp-text-muted); background: rgba(0,0,0,0.04); }

/* Ikigai evolution timeline */
.progress-ikigai-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    padding-left: 24px;
}
.progress-ikigai-timeline::before {
    content: '';
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 9px;
    width: 3px;
    background: var(--cp-border);
    border-radius: 2px;
}
.progress-ik-node {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 0;
    position: relative;
}
.progress-ik-node__date {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--cp-text-muted);
    min-width: 50px;
    text-align: right;
    position: relative;
    left: -24px;
}
.progress-ik-node__dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--cp-border);
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px var(--cp-border);
    flex-shrink: 0;
    position: relative;
    left: -14px;
    z-index: 1;
}
.progress-ik-node--partial .progress-ik-node__dot {
    background: var(--cp-primary);
    box-shadow: 0 0 0 2px var(--cp-primary);
}
.progress-ik-node--ikigai .progress-ik-node__dot {
    background: #5ece7b;
    box-shadow: 0 0 0 2px #5ece7b, 0 0 8px rgba(94,206,123,0.4);
}
.progress-ik-node--empty .progress-ik-node__dot {
    background: #e5e5e0;
}
.progress-ik-node__label {
    font-size: 0.9rem;
    color: var(--cp-text);
    font-weight: 600;
    position: relative;
    left: -14px;
}
.progress-ik-node__label small {
    display: block;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--cp-text-muted);
    margin-top: 2px;
}
.progress-ik-node--ikigai .progress-ik-node__label {
    color: #5ece7b;
    font-weight: 800;
}

/* Assessment timeline */
.progress-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.progress-timeline__item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}
.progress-timeline__item:last-child { border-bottom: none; }
.progress-timeline__date {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--cp-primary);
    min-width: 90px;
}
.progress-timeline__trigger {
    font-size: 0.85rem;
    color: var(--cp-text);
}

/* ── Mode B Tabs (Course / Sessions) ───────────────────────────── */
.coach-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 32px;
    border-bottom: 2px solid var(--cp-border);
    padding-bottom: 0;
}
.coach-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--cp-text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: -2px;
}
.coach-tab:hover {
    color: var(--cp-primary);
}
.coach-tab--active {
    color: var(--cp-primary);
    border-bottom-color: var(--cp-primary);
}
.coach-tab__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 9999px;
    background: #5ece7b;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
}
.coach-tab-panel {
    display: none;
}
.coach-tab-panel--active {
    display: block;
}
@media (max-width: 480px) {
    .coach-tab { padding: 10px 16px; font-size: 0.85rem; }
}

/* ── P4-7: Email Outbox ────────────────────────────────────────── */
.coach-outbox {
    margin-bottom: 40px;
}
.coach-outbox .journey-module__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    border: none;
    padding: 0;
}
.coach-outbox-card {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.06);
    border-left: 4px solid #b48c3c;
    border-radius: 12px;
    margin-bottom: 8px;
    transition: all 0.2s ease;
}
.coach-outbox-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.coach-outbox-card--sent {
    border-left-color: #5ece7b;
    opacity: 0.7;
}
.coach-outbox-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: linear-gradient(135deg, #b48c3c, #7c5c2e);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.coach-outbox-card__icon--sent {
    background: linear-gradient(135deg, #5ece7b, #2d6b4a);
}
.coach-outbox-card__body {
    min-width: 0;
}
.coach-outbox-card__body strong {
    display: block;
    font-size: 0.95rem;
    color: var(--cp-heading);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.coach-outbox-card__to {
    font-size: 0.8rem;
    color: var(--cp-text-muted);
    margin-right: 8px;
}
.coach-outbox-card__date {
    font-size: 0.75rem;
    color: var(--cp-text-muted);
}
.coach-outbox-card__actions {
    flex-shrink: 0;
}
.coach-outbox-send-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
}
.coach-outbox-card__status {
    font-size: 0.75rem;
    font-weight: 700;
    color: #5ece7b;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ── P4-5: Email Compose Modal ──────────────────────────────────── */
.compose-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.compose-overlay--visible {
    display: flex;
}
.compose-modal {
    background: #fff;
    border-radius: 20px;
    width: 100%;
    max-width: 720px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 24px 64px rgba(0,0,0,0.25);
}
.compose-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 28px;
    border-bottom: 1px solid var(--cp-border);
}
.compose-modal__header h3 {
    margin: 0;
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--cp-heading);
}
.compose-modal__close {
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(0,0,0,0.05);
    border-radius: 50%;
    cursor: pointer;
    color: var(--cp-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.compose-modal__close:hover { background: rgba(0,0,0,0.1); transform: rotate(90deg); }
.compose-modal__body {
    padding: 24px 28px;
}
.compose-row {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 12px;
    margin-bottom: 16px;
}
@media (max-width: 640px) { .compose-row { grid-template-columns: 1fr; } }
.compose-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.compose-field span {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cp-text-muted);
}
.compose-field--wide { grid-column: span 1; }
.compose-field--full { margin-bottom: 16px; }
.compose-input {
    border: 2px solid var(--cp-border);
    border-radius: 10px;
    padding: 10px 14px;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--cp-text);
    background: #fafbfc;
    transition: border-color 0.2s;
    width: 100%;
    box-sizing: border-box;
}
.compose-input:focus { outline: none; border-color: var(--cp-primary); background: #fff; }
.compose-textarea { resize: vertical; min-height: 60px; line-height: 1.5; }
.compose-textarea--preview { min-height: 200px; font-size: 0.95rem; }

/* Compose preview tabs (Preview / Edit Raw) */
.compose-preview__tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
}
.compose-preview__tab {
    padding: 6px 14px;
    border: 1px solid var(--cp-border);
    border-radius: 8px 8px 0 0;
    background: #f5f5f3;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--cp-text-muted);
    cursor: pointer;
    border-bottom: none;
}
.compose-preview__tab--active {
    background: #fff;
    color: var(--cp-primary);
    border-color: var(--cp-primary);
}
.compose-preview__formatted {
    padding: 20px;
    background: #fff;
    border: 2px solid var(--cp-border);
    border-radius: 0 10px 10px 10px;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--cp-text);
    min-height: 200px;
    max-height: 400px;
    overflow-y: auto;
}
.compose-preview__formatted strong {
    color: var(--cp-primary);
    font-weight: 700;
}

/* Compose pills */
.compose-pills-section { margin-bottom: 16px; }
.compose-pills-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cp-heading);
    margin-bottom: 12px;
}
.compose-pills-group {
    margin-bottom: 12px;
}
.compose-pills-group__title {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cp-text-muted);
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.compose-pills-group__items {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.compose-pill {
    display: inline-block;
    padding: 7px 14px;
    background: #fff;
    border: 1px solid var(--cp-border);
    border-radius: 9999px;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--cp-text);
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}
.compose-pill:hover { border-color: var(--cp-primary); color: var(--cp-primary); }
.compose-pill--active {
    background: var(--cp-primary);
    border-color: var(--cp-primary);
    color: #fff;
}
.compose-pill--active:hover {
    background: #2d6b4a;
    color: #fff;
}

/* Generate / Loading / Preview */
.compose-actions { margin: 16px 0; }
.compose-generate-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.compose-loading {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 24px;
    justify-content: center;
    color: var(--cp-text-muted);
    font-style: italic;
}
.compose-preview { margin-top: 16px; }
.compose-amend {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    margin: 12px 0;
}
.compose-amend .compose-field--full { flex: 1; margin: 0; }
.compose-approve { margin-top: 16px; text-align: right; }
.compose-error {
    padding: 12px 16px;
    background: #fef2f2;
    border: 1px solid #dc2626;
    border-radius: 10px;
    color: #dc2626;
    font-size: 0.9rem;
    margin-top: 12px;
}
.compose-success {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 24px;
    background: linear-gradient(135deg, #f0faf4, #e8f5ee);
    border-radius: 14px;
    font-weight: 600;
    color: var(--cp-heading);
    margin-top: 16px;
}

/* P4-3: AI prep insights (inline in session card) */
.session-prep-insights {
    margin-top: 16px;
    padding: 20px;
    background: linear-gradient(135deg, #faf8f5, #f5f0eb);
    border-radius: 14px;
    border-left: 4px solid #b48c3c;
}
.session-prep-insights h4 {
    margin: 0 0 12px;
    font-size: 0.9rem;
    font-weight: 700;
    color: #7c5c2e;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.session-prep-insights__body {
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--cp-text);
}
.session-prep-insights__body strong {
    color: var(--cp-primary);
}

/* Prep button variant */
.coach-session-card__btn--prep {
    background: #b48c3c;
}
.coach-session-card__btn--prep:hover {
    background: #7c5c2e;
}

/* Inline spinner for buttons */
.spinner-inline {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-inline 0.6s linear infinite;
    vertical-align: middle;
    margin-right: 6px;
}
@keyframes spin-inline {
    to { transform: rotate(360deg); }
}

/* ── P4-2: Coaching Sessions ────────────────────────────────────── */
.coach-sessions {
    margin-top: 48px;
    margin-bottom: 48px;
}
.coach-sessions__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}
.coach-sessions__header .journey-module__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    border: none;
    padding: 0;
}
.coach-sessions__new-btn {
    flex-shrink: 0;
}
.coach-sessions__sub-title {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cp-text-muted);
    margin: 24px 0 12px;
}
.coach-sessions__empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--cp-text-muted);
    font-style: italic;
}

/* Session form */
.coach-session-form {
    background: #fff;
    border: 1px solid var(--cp-border);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
.coach-session-form__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}
@media (max-width: 768px) {
    .coach-session-form__grid { grid-template-columns: repeat(2, 1fr); }
}
.coach-session-form__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.coach-session-form__field span {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cp-text-muted);
}
.coach-session-form__field--full {
    margin-bottom: 16px;
}
.coach-input {
    border: 2px solid var(--cp-border);
    border-radius: 10px;
    padding: 10px 14px;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--cp-text);
    background: #fafbfc;
    transition: border-color 0.2s;
    box-sizing: border-box;
    width: 100%;
}
.coach-input:focus {
    outline: none;
    border-color: var(--cp-primary);
    background: #fff;
}
.coach-textarea { resize: vertical; min-height: 70px; line-height: 1.5; }
.coach-session-form__actions {
    display: flex;
    gap: 10px;
}

/* Session cards */
.coach-session-card {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 16px;
    align-items: start;
    padding: 18px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.06);
    border-left: 5px solid var(--cp-primary);
    border-radius: 14px;
    margin-bottom: 12px;
    transition: all 0.2s ease;
}
.coach-session-card:hover {
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
.coach-session-card--upcoming { border-left-color: #5ece7b; }
.coach-session-card--completed { border-left-color: var(--cp-primary); opacity: 0.85; }
.coach-session-card--cancelled { border-left-color: var(--cp-text-muted); opacity: 0.6; }
.coach-session-card--no_show { border-left-color: #dc2626; opacity: 0.7; }

.coach-session-card__date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--cp-primary), #2d6b4a);
    color: #fff;
    border-radius: 12px;
    padding: 10px 8px;
    min-width: 56px;
}
.coach-session-card__day {
    font-family: Georgia, serif;
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
}
.coach-session-card__month {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 2px;
}
.coach-session-card__body {
    min-width: 0;
}
.coach-session-card__type {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cp-primary);
    background: rgba(39,125,76,0.08);
    padding: 2px 8px;
    border-radius: 4px;
    margin-right: 8px;
}
.coach-session-card__status {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 4px;
}
.coach-session-card__status--completed { color: #5ece7b; background: rgba(94,206,123,0.1); }
.coach-session-card__status--cancelled { color: var(--cp-text-muted); background: rgba(0,0,0,0.05); }
.coach-session-card__status--no_show   { color: #dc2626; background: rgba(220,38,38,0.08); }
.coach-session-card__notes {
    margin: 8px 0 0;
    font-size: 0.88rem;
    color: var(--cp-text);
    line-height: 1.5;
}
.coach-session-card__actions-text {
    margin: 6px 0 0;
    font-size: 0.82rem;
    color: var(--cp-text-muted);
}
.coach-session-card__btn {
    padding: 8px 16px;
    background: var(--cp-primary);
    color: #fff;
    border: none;
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.coach-session-card__btn:hover { background: #2d6b4a; }

/* Outcome form (inline) */
.session-outcome-form {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--cp-border);
    grid-column: 1 / -1;
}
.session-outcome-form h4 {
    margin: 0 0 12px;
    font-size: 1rem;
    color: var(--cp-heading);
}
.session-outcome-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}
.session-outcome-form label span {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cp-text-muted);
}
.session-outcome-form__btns {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

/* AI Session Prep panel (inserted after .coach-session-card) */
.session-prep-panel {
    margin: -4px 0 16px;
    padding: 24px 28px;
    background: #fdf8ed;
    border: 1px solid #e8dcc0;
    border-left: 5px solid #c9a84c;
    border-radius: 0 0 14px 14px;
    font-size: 0.92rem;
    line-height: 1.75;
    color: var(--cp-text, #333);
}
.session-prep-panel__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e8dcc0;
}
.session-prep-panel__icon { font-size: 20px; }
.session-prep-panel__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--cp-heading, #1e3a2f);
}
.session-prep-panel__close {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 22px;
    color: #999;
    line-height: 1;
    padding: 4px;
}
.session-prep-panel__close:hover { color: #333; }
.session-prep-panel__content h3,
.session-prep-panel__content h4 {
    margin: 24px 0 8px;
    font-family: inherit;
    font-style: normal;
    font-variant: normal;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--cp-primary, #1e3a2f);
    border-bottom: 1px solid #e8dcc0;
    padding-bottom: 6px;
}
.session-prep-panel__content h3:first-child,
.session-prep-panel__content h4:first-child {
    margin-top: 0;
}
.session-prep-panel__content h4 {
    border-bottom: none;
    padding-bottom: 0;
    color: var(--cp-heading, #1e3a2f);
}
.session-prep-panel__content li {
    margin-left: 20px;
    margin-bottom: 4px;
    list-style: disc;
}
.session-prep-panel__content strong {
    color: var(--cp-heading, #1e3a2f);
}
.session-prep-panel__content p {
    margin: 0 0 8px;
}
.session-prep-panel__tokens {
    margin: 16px 0 0;
    font-size: 0.72rem;
    color: #999;
}

/* Email CTA */
.coach-email-cta {
    margin-top: 32px;
    text-align: center;
}
.coach-email-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* ── CS-1: Coach Dashboard (student picker) ────────────────────── */
.coach-students-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
}
.coach-student-card {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    align-items: center;
    gap: 20px;
    padding: 22px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.06);
    border-left: 5px solid var(--cp-primary);
    border-radius: 16px;
    text-decoration: none;
    color: var(--cp-text);
    transition: all 0.25s ease;
}
.coach-student-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.12);
    border-left-color: #5ece7b;
}
.coach-student-card__avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cp-primary), #2d6b4a);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Georgia, serif;
    font-size: 1.6rem;
    font-weight: 800;
    flex-shrink: 0;
}
.coach-student-card__body { min-width: 0; }
.coach-student-card__body h3 {
    margin: 0 0 4px;
    font-size: 1.1rem;
    color: var(--cp-heading);
    font-family: Georgia, serif;
    font-weight: 700;
}
.coach-student-card__email {
    margin: 0 0 8px;
    font-size: 0.82rem;
    color: var(--cp-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.coach-student-card__stats {
    font-size: 0.85rem;
    color: var(--cp-text);
}
.coach-student-card__stats strong {
    color: var(--cp-primary);
    font-weight: 700;
}
.coach-student-card__sep {
    color: var(--cp-text-muted);
    margin: 0 6px;
}
.coach-student-card__last {
    margin: 6px 0 0;
    font-size: 0.75rem;
    color: var(--cp-text-muted);
    font-style: italic;
}
.coach-student-card__cta {
    color: var(--cp-primary);
    transition: transform 0.2s ease;
}
.coach-student-card:hover .coach-student-card__cta {
    transform: translateX(3px);
}

/* Journal readonly meta */
.journal-section--readonly .journal-textarea,
.journal-section--readonly .journal-input {
    background: #fafbfc !important;
    cursor: default;
}
.journal-editor__header-readonly {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(180,140,60,0.15);
    color: #7c5c2e;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ── CS-1: Coach view banner ───────────────────────────────────── */
.coach-view-banner {
    display: flex;
    align-items: center;
    gap: var(--cp-space-md);
    padding: var(--cp-space-md) var(--cp-space-lg);
    background: linear-gradient(135deg, #b48c3c, #7c5c2e);
    color: #fff;
    border-radius: 14px;
    margin-bottom: var(--cp-space-lg);
    box-shadow: 0 6px 20px rgba(124,92,46,0.25);
}
.coach-view-banner__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255,255,255,0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.coach-view-banner__text {
    flex: 1;
    min-width: 0;
}
.coach-view-banner__label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(255,255,255,0.7);
    margin-bottom: 2px;
}
.coach-view-banner__text p {
    margin: 0;
    font-size: 0.95rem;
    color: #fff;
}
.coach-view-banner__back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 14px;
    background: rgba(0,0,0,0.18);
    color: #fff !important;
    border-radius: 9999px;
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
    flex-shrink: 0;
    transition: all 0.2s ease;
}
.coach-view-banner__back:hover {
    background: rgba(0,0,0,0.3);
    transform: translateX(-2px);
}
@media (max-width: 768px) {
    .coach-view-banner {
        flex-direction: column;
        text-align: center;
    }
    .coach-view-banner__back { width: 100%; justify-content: center; }
}

/* ── CS-3: Coach notes per activity ─────────────────────────────── */
.coach-note {
    margin-top: var(--cp-space-md);
    padding: var(--cp-space-sm) var(--cp-space-md);
    border-radius: 10px;
    transition: all 0.2s ease;
}
.coach-note--has-content {
    background: linear-gradient(135deg, #fef9f0, #fdf3e3);
    border-left: 3px solid #b48c3c;
}
.coach-note--empty {
    background: transparent;
    border: 1px dashed rgba(0,0,0,0.1);
}
.coach-note--empty:focus-within {
    background: #faf8f5;
    border-color: var(--cp-primary);
}
.coach-note__header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    font-size: 0.8rem;
    color: #7c5c2e;
}
.coach-note__header strong { font-weight: 700; }
.coach-note__date { color: #b48c3c; margin-left: auto; font-size: 0.72rem; }
.coach-note__body {
    font-size: 0.9rem;
    color: var(--cp-text);
    line-height: 1.5;
    margin: 0;
}
.coach-note__textarea {
    width: 100%;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 8px;
    padding: 8px 12px;
    font-family: inherit;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--cp-text);
    background: rgba(255,255,255,0.7);
    resize: vertical;
    box-sizing: border-box;
    transition: all 0.2s ease;
}
.coach-note__textarea:focus {
    outline: none;
    border-color: #b48c3c;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(180,140,60,0.1);
}
.coach-note__actions {
    display: flex;
    gap: 8px;
    margin-top: 6px;
    justify-content: flex-end;
}
.coach-note__save-btn {
    padding: 6px 14px;
    background: #b48c3c;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}
.coach-note__save-btn:hover { background: #7c5c2e; }
.coach-note__delete-btn {
    padding: 6px 14px;
    background: transparent;
    color: var(--cp-text-muted);
    border: 1px solid var(--cp-border);
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}
.coach-note__delete-btn:hover { color: #dc2626; border-color: #dc2626; }

/* Student view: smaller, read-only badge */
.workbook-section:not(.workbook-section--readonly) .coach-note--has-content .coach-note__textarea,
.workbook-section:not(.workbook-section--readonly) .coach-note--has-content .coach-note__actions {
    display: none;
}

/* ── QW-1: Resume — focused activity pulse ──────────────────────── */
.workbook-activity--focused {
    animation: wb-focus-pulse 2.4s ease-out;
}
@keyframes wb-focus-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(94,206,123,0.6); }
    20%  { box-shadow: 0 0 0 8px rgba(94,206,123,0.18); }
    100% { box-shadow: 0 0 0 0 rgba(94,206,123,0); }
}

/* ── QW-2: Per-section progress bar ─────────────────────────────── */
.workbook-section-progress {
    display: flex;
    align-items: center;
    gap: var(--cp-space-md);
    margin: -8px 0 var(--cp-space-lg);
    padding: 0 4px;
}
.workbook-section-progress__track {
    flex: 1;
    height: 6px;
    background: rgba(0,0,0,0.06);
    border-radius: 3px;
    overflow: hidden;
}
.workbook-section-progress__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--cp-primary), #5ece7b);
    border-radius: 3px;
    transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.workbook-section-progress__label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--cp-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
}
.workbook-section-progress--complete .workbook-section-progress__label {
    color: var(--cp-success, #5ece7b);
}

/* ── QW-3: Encouragement toast ──────────────────────────────────── */
.wb-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translate(-50%, 20px);
    z-index: 9999;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    background: linear-gradient(135deg, #1a3a2a, #2d6b4a);
    color: #fff;
    border-radius: 9999px;
    font-size: 0.95rem;
    font-weight: 600;
    box-shadow: 0 12px 32px rgba(26,58,42,0.35), 0 0 0 4px rgba(94,206,123,0.18);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.wb-toast--visible {
    opacity: 1;
    transform: translate(-50%, 0);
}
.wb-toast svg {
    color: #5ece7b;
    flex-shrink: 0;
}

/* ── QW-5: Read mode toolbar ────────────────────────────────────── */
.workbook-toolbar {
    display: flex;
    justify-content: flex-end;
    gap: var(--cp-space-sm);
    margin-bottom: var(--cp-space-md);
}
.workbook-toolbar__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #fff;
    border: 1px solid var(--cp-border);
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--cp-text);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}
.workbook-toolbar__btn:hover {
    background: var(--cp-primary);
    color: #fff;
    border-color: var(--cp-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(39,125,76,0.2);
}
.workbook-toolbar__btn .wb-toolbar-label-read { display: none; }
.workbook-section--read-mode .wb-toolbar-label-edit { display: none; }
.workbook-section--read-mode .wb-toolbar-label-read { display: inline; }
.workbook-section--read-mode .workbook-toolbar__btn[aria-pressed="true"] {
    background: var(--cp-primary);
    color: #fff;
    border-color: var(--cp-primary);
}

/* Read mode: hide instructions, hide save status, hide buttons; focus on the answers */
.workbook-section--read-mode .workbook-activity__instruction,
.workbook-section--read-mode .workbook-activity__save-status,
.workbook-section--read-mode .workbook-activity__type-badge,
.workbook-section--read-mode .workbook-reflection-prompt,
.workbook-section--read-mode .workbook-textarea__footer,
.workbook-section--read-mode .workbook-callout,
.workbook-section--read-mode .workbook-section-progress {
    display: none !important;
}
.workbook-section--read-mode .workbook-textarea {
    border: none;
    background: transparent;
    padding: 0;
    box-shadow: none;
    pointer-events: none;
    color: var(--cp-text);
    font-style: italic;
    min-height: auto;
    resize: none;
}
.workbook-section--read-mode .workbook-textarea:empty::before {
    content: '— left blank —';
    color: var(--cp-text-muted);
    opacity: 0.5;
}
.workbook-section--read-mode .workbook-rating__dot {
    pointer-events: none;
    cursor: default;
}
.workbook-section--read-mode .workbook-rating__dot:not(.workbook-rating__dot--active):not(.workbook-rating__dot--current) {
    opacity: 0.3;
}
.workbook-section--read-mode .workbook-pill {
    pointer-events: none;
    cursor: default;
}
.workbook-section--read-mode .workbook-pill:not(.workbook-pill--selected) {
    opacity: 0.25;
}

/* Print: nuke all chrome */
@media print {
    .focus-topbar,
    .focus-sidebar,
    .focus-nav-bottom,
    .focus-content__complete,
    .workbook-toolbar,
    .workbook-section-progress,
    .workbook-callout,
    .site-footer,
    .site-header,
    .focus-content--wide::before,
    .workbook-activity__save-status,
    .workbook-activity__type-badge,
    .workbook-reflection-prompt,
    .back-to-top,
    .mobile-sticky-cta {
        display: none !important;
    }
    .focus-layout {
        grid-template-columns: 1fr !important;
    }
    .workbook-section,
    .workbook-activity,
    .workbook-section-header,
    .workbook-cover {
        break-inside: avoid;
        page-break-inside: avoid;
    }
    .workbook-cover {
        background: #1a3a2a !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .workbook-textarea {
        border: none !important;
        background: transparent !important;
        font-style: italic;
    }
    body, .focus-content {
        background: #fff !important;
    }
}

/* ── QW-4: Course Journey Map page ──────────────────────────────── */
.journey-page {
    background: linear-gradient(180deg, #faf8f5 0%, #fff 200px);
    min-height: 100vh;
    padding-bottom: 80px;
}
.journey-hero {
    padding: 120px 0 60px;
    background: linear-gradient(135deg, #1a3a2a, #2d6b4a);
    color: #fff;
    margin-bottom: 60px;
}
.journey-hero__inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 60px;
    align-items: center;
}
@media (max-width: 768px) {
    .journey-hero { padding: 100px 0 40px; }
    .journey-hero__inner { grid-template-columns: 1fr; gap: 32px; text-align: center; }
}
.journey-hero__label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #5ece7b;
    margin-bottom: 12px;
}
.journey-hero h1 {
    font-family: Georgia, serif;
    font-size: 2.6rem;
    color: #fff;
    margin: 0 0 16px;
    line-height: 1.15;
}
.journey-hero p {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.8);
    max-width: 540px;
    margin: 0;
}
.journey-hero__stats {
    display: flex;
    align-items: center;
    gap: 32px;
}
.journey-hero__ring {
    position: relative;
    flex-shrink: 0;
}
.journey-ring__bg { stroke: rgba(255,255,255,0.18); }
.journey-ring__fill {
    stroke: #5ece7b;
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    transition: stroke-dasharray 0.8s ease;
}
.journey-hero__pct {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Georgia, serif;
    font-size: 1.6rem;
    font-weight: 800;
    color: #fff;
}
.journey-hero__numbers {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.95rem;
    color: rgba(255,255,255,0.8);
}
.journey-hero__numbers strong {
    color: #5ece7b;
    font-size: 1.4rem;
    font-weight: 800;
    display: inline-block;
    min-width: 28px;
    margin-right: 4px;
}

.journey-modules {
    margin-top: 0;
}
.journey-module {
    margin-bottom: 56px;
}
.journey-module__title {
    font-family: Georgia, serif;
    font-size: 1.5rem;
    color: #1a3a2a;
    margin: 0 0 24px;
    padding-bottom: 12px;
    border-bottom: 2px solid rgba(39,125,76,0.15);
}
.journey-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}
.journey-card {
    display: grid;
    grid-template-columns: 60px 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.06);
    border-left: 5px solid var(--cp-border);
    border-radius: 16px;
    text-decoration: none;
    color: var(--cp-text);
    transition: all 0.25s ease;
}
.journey-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.1);
}
.journey-card--complete  { border-left-color: #5ece7b; background: linear-gradient(135deg, #f0faf4, #ffffff); }
.journey-card--in-progress { border-left-color: var(--cp-primary); }
.journey-card--todo      { border-left-color: rgba(0,0,0,0.08); }

.journey-card__ring {
    position: relative;
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.journey-card__ring-bg { stroke: rgba(0,0,0,0.08); }
.journey-card__ring-fill {
    stroke: var(--cp-primary);
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    transition: stroke-dasharray 0.6s ease;
}
.journey-card--complete .journey-card__ring-fill { stroke: #5ece7b; }
.journey-card__pct {
    position: absolute;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--cp-primary);
}
.journey-card__check {
    position: absolute;
    color: #5ece7b;
}
.journey-card__body {
    min-width: 0;
}
.journey-card__type {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cp-primary);
    background: rgba(39,125,76,0.08);
    padding: 2px 8px;
    border-radius: 4px;
    margin-bottom: 4px;
}
.journey-card__body h3 {
    margin: 0 0 4px;
    font-size: 1rem;
    color: var(--cp-heading);
    font-weight: 700;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.journey-card__meta {
    margin: 0;
    font-size: 0.8rem;
    color: var(--cp-text-muted);
}
.journey-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cp-primary);
    transition: transform 0.2s ease;
}
.journey-card:hover .journey-card__cta {
    transform: translateX(3px);
}
.journey-card--complete .journey-card__cta { color: #5ece7b; }

/* ── PC-1: Practice CTA callout card ────────────────────────────── */
.workbook-callout {
    display: flex;
    align-items: center;
    gap: var(--cp-space-md);
    padding: var(--cp-space-lg) var(--cp-space-xl);
    margin: 0 0 var(--cp-space-lg);
    background: linear-gradient(135deg, #faf8f5, #f5f0eb);
    border: 1px solid rgba(0,0,0,0.06);
    border-left: 4px solid var(--cp-primary);
    border-radius: 16px;
    transition: all 0.25s ease;
}
.workbook-callout:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.workbook-callout__icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--cp-primary), #2d6b4a);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(39,125,76,0.25);
}
.workbook-callout__body {
    flex: 1;
    min-width: 0;
}
.workbook-callout__label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--cp-primary);
    margin-bottom: 4px;
}
.workbook-callout__body h4 {
    margin: 0 0 4px;
    font-size: 1.05rem;
    color: var(--cp-heading);
    font-family: Georgia, serif;
    font-weight: 700;
}
.workbook-callout__body p {
    margin: 0;
    font-size: 0.88rem;
    color: var(--cp-text);
    line-height: 1.5;
}
.workbook-callout__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: var(--cp-primary);
    color: #fff !important;
    border-radius: 9999px;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    flex-shrink: 0;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(39,125,76,0.3);
}
.workbook-callout__cta:hover {
    background: #2d6b4a;
    transform: translateX(3px);
}
@media (max-width: 768px) {
    .workbook-callout {
        flex-direction: column;
        text-align: center;
        padding: var(--cp-space-lg);
    }
    .workbook-callout__icon {
        margin: 0 auto;
    }
    .workbook-callout__cta {
        width: 100%;
        justify-content: center;
    }
}

/* ── Cover Card ──────────────────────────────────────────────── */
.workbook-cover {
    display: flex;
    align-items: center;
    gap: var(--cp-space-lg);
    background: linear-gradient(135deg, #1a3a2a, #2d6b4a);
    color: #fff;
    border-radius: 20px;
    padding: var(--cp-space-xl) var(--cp-space-xl);
    margin-bottom: var(--cp-space-xl);
    position: relative;
    overflow: hidden;
}
.workbook-cover::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(255,255,255,0.03);
    pointer-events: none;
}
.workbook-cover__badge {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.workbook-cover__content {
    flex: 1;
    min-width: 0;
}
.workbook-cover__label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255,255,255,0.6);
}
.workbook-cover__title {
    margin: 4px 0 8px;
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
}
.workbook-cover__meta {
    display: flex;
    gap: var(--cp-space-md);
    flex-wrap: wrap;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.7);
}
.workbook-cover__meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.workbook-cover__meta svg { stroke: rgba(255,255,255,0.5); }
.workbook-cover__progress {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* Progress ring */
.workbook-progress-ring {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.workbook-progress-ring__bg {
    stroke: rgba(255,255,255,0.15);
}
.workbook-progress-ring__fill {
    stroke: #5ece7b;
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    transition: stroke-dasharray 0.6s ease;
}
.workbook-progress-ring__text {
    position: absolute;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
}
.workbook-progress-label {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.6);
    white-space: nowrap;
}

/* ── Intro with Ilana's photo (large, side-by-side) ──────── */
.workbook-intro {
    display: flex;
    gap: var(--cp-space-xl);
    background: linear-gradient(135deg, #faf8f5, #f5f0eb);
    border-radius: 20px;
    padding: var(--cp-space-xl);
    margin-bottom: var(--cp-space-lg);
    border: 1px solid rgba(0,0,0,0.05);
    align-items: center;
}
.workbook-intro__photo {
    flex-shrink: 0;
}
.workbook-intro__photo img {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top;
    border: 3px solid var(--cp-primary);
    box-shadow: 0 4px 16px rgba(39,125,76,0.15);
}
.workbook-intro__text {
    flex: 1;
    min-width: 0;
}
.workbook-intro__label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--cp-primary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
}
.workbook-intro__text p {
    margin: 0 0 var(--cp-space-sm);
    font-style: italic;
    color: var(--cp-text);
    line-height: 1.7;
    font-size: 1.02rem;
}
.workbook-intro__signature {
    display: block;
    font-family: Georgia, serif;
    font-style: italic;
    color: var(--cp-primary);
    font-size: 1rem;
}

/* ── Download option ───────────────────────────────────────── */
.workbook-download {
    display: flex;
    align-items: center;
    gap: var(--cp-space-sm);
    padding: var(--cp-space-sm) var(--cp-space-md);
    background: #f8f9fa;
    border-radius: 10px;
    margin-bottom: var(--cp-space-xl);
    font-size: 0.85rem;
    color: var(--cp-text-muted);
}
.workbook-download a {
    color: var(--cp-primary);
    font-weight: 600;
    text-decoration: none;
}
.workbook-download a:hover { text-decoration: underline; }

/* ── Section Headers (dramatic premium banner) ─────────── */
.workbook-section-header {
    display: flex;
    align-items: center;
    gap: var(--cp-space-xl);
    padding: var(--cp-space-2xl) var(--cp-space-2xl);
    margin: var(--cp-space-2xl) 0 var(--cp-space-xl);
    background: linear-gradient(135deg, #1a3a2a 0%, #2d6b4a 60%, #277d4c 100%);
    border-radius: 24px;
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(39,125,76,0.2);
}
.workbook-section-header::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 70%);
    pointer-events: none;
}
.workbook-section-header::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: 30%;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(94,206,123,0.1) 0%, transparent 70%);
    pointer-events: none;
}
.workbook-section-header:first-of-type {
    margin-top: var(--cp-space-lg);
}
.workbook-section-header__badge {
    position: relative;
    width: 88px;
    height: 88px;
    flex-shrink: 0;
    z-index: 1;
}
.workbook-section-header__icon {
    width: 88px;
    height: 88px;
    border-radius: 22px;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255,255,255,0.25);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.workbook-section-header__icon svg {
    width: 40px;
    height: 40px;
}
.workbook-section-header__num {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #5ece7b;
    color: #1a3a2a;
    font-weight: 800;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #1a3a2a;
    z-index: 2;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.workbook-section-header__text {
    flex: 1;
    min-width: 0;
    z-index: 1;
}
.workbook-section-header__label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(255,255,255,0.65);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin-bottom: 8px;
}
.workbook-section-header__text h3 {
    margin: 0 0 8px;
    font-size: 1.85rem;
    color: #fff;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
}
.workbook-section-header__text p {
    margin: 0;
    font-size: 1rem;
    color: rgba(255,255,255,0.75);
    font-style: italic;
    line-height: 1.5;
}

/* Progress bar (footer version) */
.workbook-progress-bar {
    height: 6px;
    background: var(--cp-border);
    border-radius: 3px;
    overflow: hidden;
}
.workbook-progress-bar--lg {
    height: 8px;
    border-radius: 4px;
}
.workbook-progress-bar__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--cp-primary), #5ece7b);
    border-radius: inherit;
    transition: width 0.4s ease;
}

/* Activity cards */
.workbook-activities {
    display: flex;
    flex-direction: column;
    gap: var(--cp-space-lg);
}
.workbook-activity {
    background: #fff;
    border: 1px solid var(--cp-border);
    border-radius: 16px;
    padding: var(--cp-space-lg);
    transition: border-color 0.3s, box-shadow 0.3s;
}
.workbook-activity:hover {
    border-color: var(--cp-primary);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.workbook-activity--answered {
    border-left: 4px solid var(--cp-success);
}

/* Activity header */
.workbook-activity__header {
    display: flex;
    align-items: center;
    gap: var(--cp-space-md);
    margin-bottom: var(--cp-space-md);
}
.workbook-activity__number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--cp-primary);
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.workbook-activity--answered .workbook-activity__number {
    background: var(--cp-success);
}
.workbook-activity__meta {
    display: flex;
    align-items: center;
    gap: var(--cp-space-sm);
    flex: 1;
    flex-wrap: wrap;
}
.workbook-activity__type-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 10px;
    border-radius: 20px;
}
.workbook-activity__type-badge--text_prompt {
    color: #2d6b4a;
    background: rgba(39, 125, 76, 0.08);
}
.workbook-activity__type-badge--reflection {
    color: #7c5c2e;
    background: rgba(180, 140, 60, 0.1);
}
.workbook-activity__type-badge--rating_scale {
    color: #5c2d7c;
    background: rgba(140, 60, 180, 0.08);
}
.workbook-activity__type-badge--checklist {
    color: #2d5c7c;
    background: rgba(60, 140, 180, 0.08);
}
.workbook-activity__type-badge--fill_blank {
    color: #7c2d5c;
    background: rgba(180, 60, 140, 0.08);
}

/* Reflection prompt encouragement */
.workbook-reflection-prompt {
    display: flex;
    align-items: center;
    gap: var(--cp-space-sm);
    padding: var(--cp-space-sm) var(--cp-space-md);
    background: linear-gradient(135deg, #fef9f0, #fdf3e3);
    border-radius: 10px;
    margin-bottom: var(--cp-space-sm);
    font-size: 0.8rem;
    font-style: italic;
    color: #7c5c2e;
}
.workbook-reflection-prompt svg { stroke: #b48c3c; flex-shrink: 0; }

/* Save status */
.workbook-activity__save-status {
    font-size: 0.8rem;
    margin-left: auto;
}
.workbook-activity__save-status .save-status--idle,
.workbook-activity__save-status .save-status--saving,
.workbook-activity__save-status .save-status--saved {
    display: none;
}
.workbook-activity__save-status[data-status="idle"] .save-status--idle { display: inline; color: var(--cp-text-muted); }
.workbook-activity__save-status[data-status="saving"] .save-status--saving { display: inline; color: var(--cp-secondary); }
.workbook-activity__save-status[data-status="saved"] .save-status--saved { display: inline-flex; align-items: center; gap: 4px; color: var(--cp-success); }

/* Title + instruction */
.workbook-activity__title {
    margin: 0 0 var(--cp-space-sm);
    font-size: 1.05rem;
    color: var(--cp-heading);
}
.workbook-activity__instruction {
    margin: 0 0 var(--cp-space-md);
    color: var(--cp-text);
    line-height: 1.6;
}

/* Textarea */
.workbook-textarea {
    width: 100%;
    border: 2px solid var(--cp-border);
    border-radius: 12px;
    padding: var(--cp-space-md);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--cp-text);
    background: #fafbfc;
    resize: vertical;
    min-height: 100px;
    transition: border-color 0.2s, background 0.2s;
}
.workbook-textarea:focus {
    outline: none;
    border-color: var(--cp-primary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(39, 125, 76, 0.1);
}
.workbook-textarea::placeholder {
    color: #aab;
}
.workbook-textarea__footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
}
.workbook-textarea__charcount {
    font-size: 0.75rem;
    color: var(--cp-text-muted);
}

/* Rating scale — premium horizontal slider with large touch targets */
.workbook-rating {
    background: linear-gradient(135deg, #f8faf9, #f0f7f3);
    border-radius: 18px;
    padding: var(--cp-space-lg) var(--cp-space-md);
    border: 1px solid var(--cp-border);
    max-width: 100%;
    box-sizing: border-box;
}
.workbook-activity__input { max-width: 100%; box-sizing: border-box; }
.workbook-rating__row {
    display: flex;
    align-items: center;
    gap: var(--cp-space-sm);
    margin-bottom: var(--cp-space-md);
}
.workbook-rating__endlabel {
    font-size: 0.7rem;
    color: var(--cp-text-muted);
    text-align: center;
    line-height: 1.2;
    flex-shrink: 0;
    min-width: 48px;
    font-weight: 600;
}
.workbook-rating__endlabel strong {
    display: block;
    font-size: 1.2rem;
    color: var(--cp-primary);
    margin-bottom: 2px;
    font-weight: 800;
}
.workbook-rating__track {
    flex: 1;
    min-width: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4px;
    position: relative;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}
.workbook-rating__dot {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid var(--cp-border);
    background: #fff;
    color: var(--cp-text-muted);
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.18s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    flex: 0 0 auto;
}
.workbook-rating__dot:hover {
    background: var(--cp-primary);
    border-color: var(--cp-primary);
    color: #fff;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(39,125,76,0.3);
}
.workbook-rating__dot--active {
    background: rgba(39,125,76,0.12);
    border-color: var(--cp-primary);
    color: var(--cp-primary);
}
.workbook-rating__dot--current,
.workbook-rating__dot--current:hover {
    background: linear-gradient(135deg, var(--cp-primary), #2d6b4a);
    border-color: var(--cp-primary);
    color: #fff;
    transform: scale(1.15);
    box-shadow: 0 6px 18px rgba(39,125,76,0.4);
}
.workbook-rating__feedback {
    text-align: center;
    font-size: 0.95rem;
    color: var(--cp-text-muted);
    padding-top: var(--cp-space-sm);
    border-top: 1px solid rgba(0,0,0,0.05);
}
.workbook-rating__feedback strong {
    color: var(--cp-primary);
    font-size: 1.15rem;
    margin-left: 6px;
}

/* Workbook diagrams (e.g. interactive Ikigai) */
.workbook-diagram,
.workbook-diagram--ikigai {
    margin: 0 0 var(--cp-space-xl) !important;
    padding: var(--cp-space-xl) var(--cp-space-lg) !important;
    background: linear-gradient(135deg, #faf8f5, #f5f0eb) !important;
    border-radius: 20px !important;
    border: 1px solid rgba(0,0,0,0.05) !important;
    text-align: center !important;
}
.workbook-diagram__title h4 {
    margin: 0;
    font-family: Georgia, serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--cp-primary);
    letter-spacing: 0.04em;
    line-height: 1;
}
.workbook-diagram__title p {
    margin: 6px 0 0;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--cp-text-muted);
}
.workbook-diagram__hint {
    margin: var(--cp-space-md) 0 var(--cp-space-sm);
    font-size: 0.8rem;
    color: var(--cp-primary);
    font-style: italic;
    opacity: 0.7;
}
.workbook-diagram__visual {
    max-width: 380px;
    margin: var(--cp-space-md) auto var(--cp-space-md);
}
.workbook-diagram__visual svg {
    width: 100%;
    height: auto;
    display: block;
}

/* ══════════════════════════════════════════════════════════════════
   JOURNAL TEMPLATES — Daily Planner & Daily Gratitude
   Multi-instance interactive forms with autosave
   ══════════════════════════════════════════════════════════════════ */

.journal-section {
    margin-top: var(--cp-space-2xl);
    padding-top: var(--cp-space-xl);
}

/* Header */
.journal-header {
    display: flex;
    align-items: center;
    gap: var(--cp-space-lg);
    background: linear-gradient(135deg, #1a3a2a, #2d6b4a);
    color: #fff;
    padding: var(--cp-space-xl) var(--cp-space-2xl);
    border-radius: 20px;
    margin-bottom: var(--cp-space-lg);
    box-shadow: 0 8px 32px rgba(26,58,42,0.2);
}
.journal-header__icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.journal-header__text {
    flex: 1;
    min-width: 0;
}
.journal-header__text h2 {
    margin: 0 0 4px;
    font-size: 1.5rem;
    color: #fff;
    font-family: Georgia, serif;
}
.journal-header__text p {
    margin: 0;
    color: rgba(255,255,255,0.75);
    font-size: 0.9rem;
}
.journal-new-btn {
    flex-shrink: 0;
    background: #5ece7b !important;
    color: #1a3a2a !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 14px rgba(94,206,123,0.4);
}
.journal-new-btn:hover {
    background: #fff !important;
    transform: translateY(-2px);
}

/* Past entries strip */
.journal-entries-strip {
    margin-bottom: var(--cp-space-lg);
}
.journal-strip__label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--cp-text-muted);
    margin-bottom: var(--cp-space-sm);
}
.journal-strip__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.journal-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 8px 16px;
    background: #fff;
    border: 2px solid var(--cp-border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    font-family: inherit;
    line-height: 1.2;
}
.journal-chip:hover {
    border-color: var(--cp-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.journal-chip__date {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--cp-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.journal-chip__title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cp-text);
}
.journal-chip--active {
    background: linear-gradient(135deg, var(--cp-primary), #2d6b4a);
    border-color: var(--cp-primary);
    box-shadow: 0 4px 14px rgba(39,125,76,0.3);
}
.journal-chip--active .journal-chip__date,
.journal-chip--active .journal-chip__title {
    color: #fff;
}

/* Empty state */
.journal-empty {
    text-align: center;
    padding: var(--cp-space-2xl) var(--cp-space-lg);
    background: linear-gradient(135deg, #faf8f5, #f5f0eb);
    border-radius: 20px;
    color: var(--cp-text-muted);
}
.journal-empty svg {
    color: var(--cp-primary);
    opacity: 0.5;
    margin-bottom: var(--cp-space-md);
}
.journal-empty h3 {
    margin: 0 0 var(--cp-space-sm);
    color: var(--cp-heading);
    font-family: Georgia, serif;
}
.journal-empty p {
    margin: 0;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}

/* Editor card */
.journal-editor {
    background: #fff;
    border: 1px solid var(--cp-border);
    border-radius: 20px;
    padding: var(--cp-space-xl);
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
.journal-editor__header {
    display: flex;
    align-items: flex-start;
    gap: var(--cp-space-md);
    padding-bottom: var(--cp-space-lg);
    margin-bottom: var(--cp-space-lg);
    border-bottom: 1px solid var(--cp-border);
    flex-wrap: wrap;
}
.journal-editor__header-fields {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--cp-space-md);
    flex: 1;
    min-width: 0;
}
.journal-editor__header-meta {
    display: flex;
    align-items: center;
    gap: var(--cp-space-sm);
}
.journal-save-status {
    font-size: 0.8rem;
    font-weight: 600;
}
.journal-save-status > span { display: none; }
.journal-save-status[data-status="idle"] .journal-save-status__idle { display: inline; color: var(--cp-text-muted); }
.journal-save-status[data-status="saving"] .journal-save-status__saving { display: inline; color: var(--cp-secondary, #b48c3c); }
.journal-save-status[data-status="saved"] .journal-save-status__saved { display: inline-flex; align-items: center; gap: 4px; color: var(--cp-success, #5ece7b); }

.journal-delete-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--cp-border);
    color: var(--cp-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
.journal-delete-btn:hover {
    background: #fef2f2;
    border-color: #dc2626;
    color: #dc2626;
}

/* Section blocks */
.journal-section-block {
    margin-bottom: var(--cp-space-xl);
}
.journal-section-block:last-child { margin-bottom: 0; }

.journal-section-head {
    display: flex;
    align-items: center;
    gap: var(--cp-space-sm);
    margin-bottom: var(--cp-space-md);
    padding-bottom: var(--cp-space-sm);
    border-bottom: 2px solid rgba(39,125,76,0.12);
}
.journal-section-head__icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--cp-primary), #2d6b4a);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.journal-section-head h4 {
    margin: 0;
    font-size: 1rem;
    color: var(--cp-heading);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.journal-section-fields {
    display: flex;
    flex-direction: column;
    gap: var(--cp-space-md);
}

/* Fields */
.journal-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.journal-field--check-text {
    flex-direction: row;
    align-items: center;
    gap: var(--cp-space-sm);
}
.journal-field__label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cp-text-muted);
}
.journal-input,
.journal-textarea {
    width: 100%;
    border: 2px solid var(--cp-border);
    border-radius: 10px;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 1rem;
    color: var(--cp-text);
    background: #fafbfc;
    transition: all 0.2s ease;
    box-sizing: border-box;
}
.journal-input:focus,
.journal-textarea:focus {
    outline: none;
    border-color: var(--cp-primary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(39,125,76,0.1);
}
.journal-input--inline {
    flex: 1;
}
.journal-textarea {
    resize: vertical;
    min-height: 70px;
    line-height: 1.5;
}

/* Checkbox */
.journal-checkbox-wrap {
    position: relative;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}
.journal-checkbox {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}
.journal-checkbox-box {
    width: 24px;
    height: 24px;
    border: 2px solid var(--cp-border);
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    background: #fff;
}
.journal-checkbox-box svg {
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s ease;
    color: #fff;
}
.journal-checkbox:checked + .journal-checkbox-box {
    background: var(--cp-primary);
    border-color: var(--cp-primary);
}
.journal-checkbox:checked + .journal-checkbox-box svg {
    opacity: 1;
    transform: scale(1);
}
.journal-field--check-text:has(.journal-checkbox:checked) .journal-input--inline {
    text-decoration: line-through;
    opacity: 0.6;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .journal-header {
        flex-direction: column;
        text-align: center;
        padding: var(--cp-space-lg);
    }
    .journal-new-btn {
        width: 100%;
    }
    .journal-editor {
        padding: var(--cp-space-lg);
    }
    .journal-editor__header-fields {
        grid-template-columns: 1fr;
    }
    .journal-editor__header-meta {
        width: 100%;
        justify-content: space-between;
    }
    .journal-input,
    .journal-textarea {
        font-size: 16px; /* prevent iOS zoom */
    }
}

/* ── Money Archetypes Showcase (topic 149) ─────────────────────── */
.focus-content .entry-content .archetype-intro {
    background: linear-gradient(135deg, #faf8f5, #f5f0eb);
    border-radius: 16px;
    padding: var(--cp-space-xl);
    margin-bottom: var(--cp-space-xl);
}
.focus-content .entry-content .archetype-intro::after {
    content: '';
    display: table;
    clear: both;
}
.focus-content .entry-content .archetype-intro h2 {
    margin-top: 0;
    color: var(--cp-primary);
    font-family: Georgia, serif;
}

.archetype-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--cp-space-lg);
    margin: var(--cp-space-lg) 0 var(--cp-space-2xl);
}
@media (max-width: 640px) {
    .archetype-grid { grid-template-columns: 1fr; }
}

.focus-content .entry-content .archetype-card {
    display: block;
    background: #fff;
    border: 1px solid var(--cp-border);
    border-left: 5px solid var(--cp-primary);
    border-radius: 16px;
    padding: var(--cp-space-lg);
    text-decoration: none;
    color: var(--cp-text);
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}
.focus-content .entry-content .archetype-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.12);
    border-left-width: 8px;
}
.focus-content .entry-content .archetype-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    opacity: 0.05;
    transform: translate(40%, -40%);
    background: var(--card-color, var(--cp-primary));
    pointer-events: none;
}
.focus-content .entry-content .archetype-card__icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--card-color, var(--cp-primary)), var(--card-color-dark, var(--cp-primary)));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--cp-space-md);
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}
.focus-content .entry-content .archetype-card h4 {
    margin: 0 0 var(--cp-space-sm);
    font-size: 1.25rem;
    font-family: Georgia, serif;
    font-weight: 700;
    color: var(--card-color-dark, var(--cp-heading));
}
.focus-content .entry-content .archetype-card p {
    margin: 0 0 var(--cp-space-md);
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--cp-text);
}
.focus-content .entry-content .archetype-card__cta {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--card-color-dark, var(--cp-primary));
    transition: transform 0.25s ease;
}
.focus-content .entry-content .archetype-card:hover .archetype-card__cta {
    transform: translateX(4px);
}

/* Per-archetype color theming */
.archetype-card--innocent  { --card-color: #5ece7b; --card-color-dark: #2d6b4a; border-left-color: #5ece7b; }
.archetype-card--victim    { --card-color: #7c5c2e; --card-color-dark: #54401e; border-left-color: #7c5c2e; }
.archetype-card--warrior   { --card-color: #b45c3c; --card-color-dark: #7c3d24; border-left-color: #b45c3c; }
.archetype-card--martyr    { --card-color: #b48c3c; --card-color-dark: #7c5c2e; border-left-color: #b48c3c; }
.archetype-card--fool      { --card-color: #5c2d7c; --card-color-dark: #3d1d54; border-left-color: #5c2d7c; }
.archetype-card--creator   { --card-color: #2d5c7c; --card-color-dark: #1d3d54; border-left-color: #2d5c7c; }
.archetype-card--tyrant    { --card-color: #7c2d4c; --card-color-dark: #54203a; border-left-color: #7c2d4c; }
.archetype-card--magician  { --card-color: #277d4c; --card-color-dark: #1a3a2a; border-left-color: #277d4c; box-shadow: 0 4px 16px rgba(39,125,76,0.15); }

/* Final CTA row */
.focus-content .entry-content .archetype-cta-row {
    text-align: center;
    background: linear-gradient(135deg, #1a3a2a, #2d6b4a);
    color: #fff;
    border-radius: 20px;
    padding: var(--cp-space-2xl) var(--cp-space-xl);
    margin: var(--cp-space-2xl) 0;
    box-shadow: 0 12px 36px rgba(26,58,42,0.25);
}
.focus-content .entry-content .archetype-cta-row h3 {
    margin: 0 0 var(--cp-space-sm);
    font-size: 1.6rem;
    font-family: Georgia, serif;
    color: #fff;
}
.focus-content .entry-content .archetype-cta-row p {
    color: rgba(255,255,255,0.9);
    margin-bottom: var(--cp-space-lg);
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
}
.focus-content .entry-content .archetype-cta-row .btn-cta {
    background: #5ece7b;
    color: #1a3a2a;
    font-weight: 700;
    box-shadow: 0 6px 20px rgba(94,206,123,0.4);
}
.focus-content .entry-content .archetype-cta-row .btn-cta:hover {
    background: #fff;
    transform: translateY(-2px);
}
.focus-content .entry-content .archetype-cta-row a {
    color: #5ece7b;
}

/* ── NC-2: Belief Flip Cards ────────────────────────────────────── */
.belief-flip-prompt {
    display: flex;
    align-items: center;
    gap: var(--cp-space-sm);
    padding: var(--cp-space-md);
    background: linear-gradient(135deg, #fef9f0, #fdf3e3);
    border-radius: 10px;
    font-size: 0.9rem;
    font-style: italic;
    color: #7c5c2e;
}
.belief-flip-prompt svg { stroke: #b48c3c; flex-shrink: 0; }

.belief-flip-deck {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--cp-space-lg);
}
.belief-flip-card {
    perspective: 1000px;
    min-height: 260px;
}
.belief-flip-card__inner {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 260px;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-style: preserve-3d;
}
.belief-flip-card--flipped .belief-flip-card__inner {
    transform: rotateY(180deg);
}
.belief-flip-card__front,
.belief-flip-card__back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    border-radius: 16px;
    padding: var(--cp-space-lg);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.belief-flip-card__front {
    background: linear-gradient(135deg, #7c2d4c, #54203a);
    color: #fff;
    box-shadow: 0 8px 28px rgba(124,45,76,0.25);
}
.belief-flip-card__front p {
    font-family: Georgia, serif;
    font-size: 1.1rem;
    line-height: 1.5;
    flex: 1;
    display: flex;
    align-items: center;
    margin: 0;
}
.belief-flip-card__back {
    background: linear-gradient(135deg, var(--cp-primary), #2d6b4a);
    color: #fff;
    transform: rotateY(180deg);
    box-shadow: 0 8px 28px rgba(39,125,76,0.25);
}
.belief-flip-card__label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    opacity: 0.65;
    margin-bottom: var(--cp-space-sm);
}
.belief-flip-card__btn {
    display: inline-block;
    padding: 8px 16px;
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 9999px;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    margin-top: var(--cp-space-sm);
}
.belief-flip-card__btn:hover {
    background: rgba(255,255,255,0.35);
}
.belief-flip-card__textarea {
    flex: 1;
    width: 100%;
    border: none;
    background: rgba(255,255,255,0.15);
    border-radius: 10px;
    padding: 10px;
    font-family: inherit;
    font-size: 1rem;
    color: #fff;
    line-height: 1.5;
    resize: none;
    box-sizing: border-box;
}
.belief-flip-card__textarea::placeholder {
    color: rgba(255,255,255,0.5);
}
.belief-flip-card__textarea:focus {
    outline: none;
    background: rgba(255,255,255,0.25);
}

/* ── NC-1: Timeline Visualization ───────────────────────────────── */
.timeline-diagram {
    margin: 0 0 var(--cp-space-xl);
    padding: var(--cp-space-lg);
    background: linear-gradient(135deg, #faf8f5, #f5f0eb);
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,0.05);
    overflow-x: auto;
}
.timeline-track {
    display: flex;
    align-items: flex-start;
    gap: 0;
    position: relative;
    min-width: fit-content;
    padding: var(--cp-space-md) 0;
}
/* Connecting line behind nodes */
.timeline-track::before {
    content: '';
    position: absolute;
    top: 28px;
    left: 32px;
    right: 32px;
    height: 3px;
    background: var(--cp-border);
    border-radius: 2px;
    z-index: 0;
}
.timeline-node {
    flex: 1;
    min-width: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 1;
}
.timeline-node__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--cp-border);
    color: var(--cp-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.timeline-node--complete .timeline-node__icon {
    background: linear-gradient(135deg, var(--cp-primary), #2d6b4a);
    border-color: var(--cp-primary);
    color: #fff;
    box-shadow: 0 6px 18px rgba(39,125,76,0.35);
    transform: scale(1.1);
}
.timeline-node__label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--cp-text-muted);
    text-align: center;
}
.timeline-node--complete .timeline-node__label {
    color: var(--cp-primary);
}
.timeline-node__check {
    margin-top: -4px;
}
@media (max-width: 640px) {
    .timeline-track {
        flex-direction: column;
        align-items: stretch;
        gap: var(--cp-space-md);
        padding: 0;
    }
    .timeline-track::before {
        top: 0;
        bottom: 0;
        left: 28px;
        right: auto;
        width: 3px;
        height: auto;
    }
    .timeline-node {
        flex-direction: row;
        gap: var(--cp-space-md);
        min-width: auto;
    }
    .timeline-node__icon { width: 44px; height: 44px; flex-shrink: 0; }
}

/* ── NC-3/NC-4: Compact diagram embeds ──────────────────────────── */
.workbook-diagram--wheel-compact,
.workbook-diagram--ikigai-compact {
    max-width: 380px !important;
    margin: 0 auto var(--cp-space-xl) !important;
    padding: var(--cp-space-lg) !important;
}
.workbook-diagram--wheel-compact .workbook-diagram__visual,
.workbook-diagram--ikigai-compact .workbook-diagram__visual {
    max-width: 280px;
    margin: 0 auto;
}
.workbook-diagram__edit-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--cp-space-md);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cp-primary);
    text-decoration: none;
    transition: transform 0.2s ease;
}
.workbook-diagram__edit-link:hover {
    transform: translateX(3px);
    text-decoration: underline;
}

/* ── Wheel of Life — sticky 2-column layout ─────────────────────── */

/* Desktop: break out of .focus-inner constraint and use 2-column grid */
@media (min-width: 1100px) {
    /* CRITICAL: position:sticky requires NO overflow:hidden on any ancestor.
       When the page contains a wheel, allow sticky to work all the way up. */
    .focus-layout:has(.workbook-section--has-wheel) {
        overflow: visible;
    }
    .focus-content--wide:has(.workbook-section--has-wheel) {
        overflow: visible;
    }
    /* Allow the workbook with a wheel to span wider than .focus-inner */
    .focus-inner:has(.workbook-section--has-wheel) {
        max-width: 1280px;
        overflow: visible;
    }
    .workbook-section--has-wheel {
        display: grid;
        grid-template-columns: 360px minmax(0, 1fr);
        gap: var(--cp-space-xl);
        align-items: start;
    }
    .workbook-sticky-diagram {
        position: sticky;
        top: calc(var(--cp-nav-height, 80px) + 16px);
        align-self: start;
    }
    .workbook-sticky-diagram .workbook-diagram--wheel {
        margin: 0 !important;
        padding: var(--cp-space-lg) !important;
    }
    .workbook-sticky-diagram .workbook-diagram__visual {
        max-width: 100%;
    }
    /* Compact the summary stats when in sticky mode */
    .workbook-sticky-diagram .wheel-summary {
        gap: 6px;
        max-width: 100%;
    }
    .workbook-sticky-diagram .wheel-summary__stat {
        padding: var(--cp-space-sm) 4px;
    }
    .workbook-sticky-diagram .wheel-summary__num {
        font-size: 1.2rem;
    }
    .workbook-sticky-diagram .wheel-summary__label {
        font-size: 0.6rem;
    }
    /* Activities column needs min-width:0 so children can shrink */
    .workbook-section--has-wheel .workbook-activities-wrap {
        min-width: 0;
    }
    /* Section headers, activity cards must not overflow */
    .workbook-section--has-wheel .workbook-section-header,
    .workbook-section--has-wheel .workbook-activity {
        min-width: 0;
        max-width: 100%;
    }
}

/* Mobile/tablet: stack normally */
@media (max-width: 1099px) {
    .workbook-sticky-diagram {
        margin-bottom: var(--cp-space-xl);
    }
}

.workbook-diagram--wheel .workbook-diagram__visual {
    max-width: 460px;
    position: relative;
}
.wheel-wedge {
    transition: d 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
    opacity: 0.85;
}
.wheel-wedge:hover { opacity: 1; }
.wheel-spoke-label {
    transition: fill 0.3s ease;
}
.wheel-spoke-label--scored {
    font-weight: 800;
}
/* Summary card */
.wheel-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--cp-space-md);
    max-width: 540px;
    margin: 0 auto var(--cp-space-md);
}
.wheel-summary__stat {
    background: #fff;
    border: 1px solid var(--cp-border);
    border-radius: 14px;
    padding: var(--cp-space-md) var(--cp-space-sm);
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.wheel-summary__num {
    display: block;
    font-family: Georgia, serif;
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--cp-primary);
    line-height: 1;
    margin-bottom: 4px;
}
.wheel-summary__label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cp-text-muted);
    font-weight: 600;
}
@media (max-width: 540px) {
    .wheel-summary { grid-template-columns: 1fr; }
}

/* SVG circles light up when their pill is selected */
.ik-circle {
    transition: fill-opacity 0.4s ease, stroke-width 0.4s ease;
}
.ik-circle--lit { fill-opacity: 0.55 !important; stroke-width: 3 !important; }
.ik-center { transition: all 0.5s ease; }
.ik-center--lit {
    fill: #2d6b4a !important;
    stroke-width: 5 !important;
    filter: drop-shadow(0 0 12px rgba(94,206,123,0.6));
}

/* Pill row containers */
.ikigai-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 0 auto var(--cp-space-md);
    max-width: 720px;
}
.ikigai-pills--inter {
    gap: 10px;
    margin-top: var(--cp-space-md);
}
.ikigai-pills--center {
    margin-bottom: var(--cp-space-lg);
}

/* Base pill */
.ikigai-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    background: #fff;
    border: 2px solid var(--cp-border);
    border-radius: 9999px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--cp-text);
    font-family: inherit;
    line-height: 1.2;
    transition: all 0.25s ease;
}
button.ikigai-pill { cursor: pointer; }
button.ikigai-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}

/* Outer pill: dot + 2-line text */
.ikigai-pill__dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: all 0.25s ease;
}
.ikigai-pill__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.15;
    text-align: left;
}
.ikigai-pill__line1 {
    font-size: 0.7rem;
    font-weight: 500;
    opacity: 0.7;
    text-transform: none;
    letter-spacing: 0;
}
.ikigai-pill__line2 {
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

/* Outer pill colors — selected state */
.ikigai-pill--love .ikigai-pill__dot       { background: #277d4c; }
.ikigai-pill--love.ikigai-pill--active     {
    background: linear-gradient(135deg, #277d4c, #1a5c3a);
    color: #fff; border-color: #1a5c3a;
    box-shadow: 0 6px 18px rgba(39,125,76,0.35);
}
.ikigai-pill--love.ikigai-pill--active .ikigai-pill__dot { background: #fff; }

.ikigai-pill--goodat .ikigai-pill__dot     { background: #b48c3c; }
.ikigai-pill--goodat.ikigai-pill--active   {
    background: linear-gradient(135deg, #b48c3c, #7c5c2e);
    color: #fff; border-color: #7c5c2e;
    box-shadow: 0 6px 18px rgba(180,140,60,0.35);
}
.ikigai-pill--goodat.ikigai-pill--active .ikigai-pill__dot { background: #fff; }

.ikigai-pill--paid .ikigai-pill__dot       { background: #2d5c7c; }
.ikigai-pill--paid.ikigai-pill--active     {
    background: linear-gradient(135deg, #2d5c7c, #1d3d54);
    color: #fff; border-color: #1d3d54;
    box-shadow: 0 6px 18px rgba(45,92,124,0.35);
}
.ikigai-pill--paid.ikigai-pill--active .ikigai-pill__dot { background: #fff; }

.ikigai-pill--needs .ikigai-pill__dot      { background: #5c2d7c; }
.ikigai-pill--needs.ikigai-pill--active    {
    background: linear-gradient(135deg, #5c2d7c, #3d1d54);
    color: #fff; border-color: #3d1d54;
    box-shadow: 0 6px 18px rgba(92,45,124,0.35);
}
.ikigai-pill--needs.ikigai-pill--active .ikigai-pill__dot { background: #fff; }

/* Intersection pills (auto-light, smaller, dimmer when inactive) */
.ikigai-pill--inter {
    padding: 8px 18px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #b8b3a8;
    background: #f5f4f0;
    border-color: rgba(0,0,0,0.06);
    cursor: default;
    pointer-events: none;
}
.ikigai-pill--inter.ikigai-pill--active {
    background: linear-gradient(135deg, #1a3a2a, #2d6b4a);
    color: #fff;
    border-color: #5ece7b;
    box-shadow: 0 4px 14px rgba(39,125,76,0.35);
    transform: scale(1.05);
}

/* IKIGAI star (auto-lights when all 4 selected) */
.ikigai-pill--ikigai {
    padding: 14px 32px;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    color: #b8b3a8;
    background: #f5f4f0;
    border: 2px dashed rgba(0,0,0,0.12);
    cursor: default;
    pointer-events: none;
}
.ikigai-pill--ikigai.ikigai-pill--active {
    background: linear-gradient(135deg, #1a3a2a 0%, #277d4c 50%, #5ece7b 100%);
    color: #fff;
    border: 3px solid #5ece7b;
    border-style: solid;
    box-shadow: 0 8px 28px rgba(94,206,123,0.5), 0 0 0 4px rgba(94,206,123,0.15);
    transform: scale(1.08);
    text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* Reset button */
.ikigai-reset {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 auto var(--cp-space-lg);
    padding: 8px 18px;
    background: transparent;
    border: 1px solid var(--cp-border);
    border-radius: 9999px;
    font-size: 0.8rem;
    color: var(--cp-text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}
.ikigai-reset:hover {
    background: #fff;
    color: var(--cp-primary);
    border-color: var(--cp-primary);
}

/* IKIGAI celebration tooltip state */
.ikigai-tooltip--ikigai {
    background: linear-gradient(135deg, #1a3a2a, #277d4c) !important;
    border-color: #5ece7b !important;
    color: #fff !important;
    box-shadow: 0 12px 48px rgba(26,58,42,0.6), 0 0 0 4px rgba(94,206,123,0.25) !important;
}
.ikigai-tooltip--ikigai .ikigai-tooltip__icon {
    background: linear-gradient(135deg, #5ece7b, #277d4c) !important;
}
.ikigai-tooltip--ikigai .ikigai-tooltip__label,
.ikigai-tooltip--ikigai .ikigai-tooltip__title {
    color: #5ece7b !important;
}
.ikigai-tooltip--ikigai .ikigai-tooltip__desc {
    color: #fff !important;
}
.ikigai-tooltip--ikigai .ikigai-tooltip__close {
    color: rgba(255,255,255,0.7) !important;
}
.ikigai-tooltip--ikigai .ikigai-tooltip__close:hover {
    color: #fff !important;
}

/* Diagram visual gets position context */
.workbook-diagram--ikigai .workbook-diagram__visual {
    position: relative;
}

/* Tooltip popup — overlays the diagram area only (not the pills) */
.ikigai-tooltip {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    width: calc(100% + 40px);
    max-width: 440px;
    z-index: 20;
    text-align: left;
    background: #fff;
    border: 2px solid var(--cp-primary);
    border-radius: 18px;
    padding: var(--cp-space-lg) var(--cp-space-xl);
    padding-top: var(--cp-space-xl);
    box-shadow: 0 16px 48px rgba(0,0,0,0.25), 0 0 0 6px rgba(255,255,255,0.7);
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}
.ikigai-tooltip.ikigai-tooltip--visible {
    display: block;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
}
.ikigai-tooltip__inner {
    display: flex;
    align-items: flex-start;
    gap: var(--cp-space-md);
}
.ikigai-tooltip__close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(0,0,0,0.05);
    border-radius: 50%;
    cursor: pointer;
    color: var(--cp-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
.ikigai-tooltip__close:hover {
    background: rgba(0,0,0,0.1);
    color: var(--cp-text);
    transform: rotate(90deg);
}
.ikigai-tooltip__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--cp-primary), #2d6b4a);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ikigai-tooltip__body {
    flex: 1;
    min-width: 0;
}
.ikigai-tooltip__label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--cp-primary);
    margin-bottom: 4px;
}
.ikigai-tooltip__title {
    margin: 0 0 6px;
    font-size: 1.15rem;
    color: var(--cp-heading);
    font-weight: 700;
}
.ikigai-tooltip__desc {
    margin: 0;
    font-size: 0.9rem;
    color: var(--cp-text);
    line-height: 1.5;
}
.ikigai-tooltip__warning {
    margin-top: var(--cp-space-sm);
    padding: var(--cp-space-sm) var(--cp-space-md);
    background: linear-gradient(135deg, #fef9f0, #fdf3e3);
    border-left: 3px solid #b48c3c;
    border-radius: 8px;
    font-size: 0.85rem;
    font-style: italic;
    color: #7c5c2e;
    line-height: 1.5;
}

@media (max-width: 640px) {
    .workbook-diagram__visual {
        max-width: 280px;
    }
    .ikigai-tooltip {
        flex-direction: column;
        align-items: stretch;
    }
    .ikigai-tooltip__icon {
        margin: 0 auto;
    }
    .ikigai-tooltip__body {
        text-align: center;
    }
}

/* Pills wrapper + group titles */
.workbook-pills-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--cp-space-md);
}
.workbook-pills__group-title {
    margin: var(--cp-space-lg) 0 var(--cp-space-md);
    padding: var(--cp-space-sm) var(--cp-space-lg);
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--cp-primary), #2d6b4a);
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(39,125,76,0.2);
}
.workbook-pills-wrap > .workbook-pills__group-title:first-child {
    margin-top: 0;
}

/* Pills (selectable tag-style checklist) — premium pill shape */
.workbook-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 0;
}
.workbook-pill {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 12px 22px;
    background: #fff;
    border: 2px solid var(--cp-border);
    border-radius: 9999px;
    font-size: 1rem;
    font-weight: 500;
    color: var(--cp-text);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    line-height: 1.4;
    text-align: left;
    white-space: normal;
}
.workbook-pill:hover {
    border-color: var(--cp-primary);
    color: var(--cp-primary);
    background: rgba(39,125,76,0.05);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(39,125,76,0.12);
}
/* Hide check icon by default — only visible when selected */
.workbook-pill .workbook-pill__check {
    display: none;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    flex-shrink: 0;
}
.workbook-pill--selected {
    background: linear-gradient(135deg, var(--cp-primary), #2d6b4a);
    border-color: var(--cp-primary);
    color: #fff;
    box-shadow: 0 4px 14px rgba(39,125,76,0.35);
    padding-left: 18px;
}
.workbook-pill--selected:hover {
    background: linear-gradient(135deg, #2d6b4a, var(--cp-primary));
    color: #fff;
    transform: translateY(-1px);
}
.workbook-pill--selected .workbook-pill__check {
    display: inline-block;
}
.workbook-pills__count {
    text-align: right;
    font-size: 0.9rem;
    color: var(--cp-text-muted);
    margin-top: var(--cp-space-sm);
}
.workbook-pills__count-num {
    color: var(--cp-primary);
    font-weight: 700;
    font-size: 1rem;
}

/* Checklist (legacy block style — kept for back-compat) */
.workbook-checklist {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.workbook-checklist__item {
    display: flex;
    align-items: flex-start;
    gap: var(--cp-space-sm);
    padding: var(--cp-space-sm) var(--cp-space-md);
    border: 1px solid var(--cp-border);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.workbook-checklist__item:hover {
    background: #f8faf9;
    border-color: var(--cp-primary);
}
.workbook-checklist__item--checked {
    background: rgba(39, 125, 76, 0.04);
    border-color: var(--cp-success);
}
.workbook-checklist__item input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.workbook-checklist__box {
    width: 22px;
    height: 22px;
    border: 2px solid var(--cp-border);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
    transition: all 0.2s;
}
.workbook-checklist__box svg {
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s;
}
.workbook-checklist__item--checked .workbook-checklist__box {
    background: var(--cp-success);
    border-color: var(--cp-success);
}
.workbook-checklist__item--checked .workbook-checklist__box svg {
    opacity: 1;
    transform: scale(1);
    stroke: #fff;
}
.workbook-checklist__text {
    line-height: 1.5;
    color: var(--cp-text);
}
.workbook-checklist__item--checked .workbook-checklist__text {
    text-decoration: line-through;
    color: var(--cp-text-muted);
}
.workbook-checklist__progress {
    text-align: right;
    font-size: 0.8rem;
    color: var(--cp-text-muted);
    margin-top: 4px;
}

/* Footer */
.workbook-footer {
    margin-top: var(--cp-space-2xl);
}
.workbook-progress-footer {
    display: flex;
    flex-direction: column;
    gap: var(--cp-space-sm);
    padding: var(--cp-space-lg);
    background: #f8f9fa;
    border-radius: 16px;
}
.workbook-progress-footer__text {
    font-size: 0.85rem;
    color: var(--cp-text-muted);
    text-align: center;
}

/* Completion celebration card */
.workbook-complete-card {
    text-align: center;
    background: linear-gradient(135deg, #f0faf4, #e8f5ee);
    border: 2px solid var(--cp-success);
    border-radius: 20px;
    padding: var(--cp-space-2xl) var(--cp-space-xl);
}
.workbook-complete-card__icon {
    margin-bottom: var(--cp-space-md);
}
.workbook-complete-card h3 {
    margin: 0 0 var(--cp-space-sm);
    font-size: 1.3rem;
    color: var(--cp-heading);
}
.workbook-complete-card p {
    margin: 0;
    color: var(--cp-text);
    line-height: 1.6;
    max-width: 500px;
    margin: 0 auto;
}

/* ── Workbook Mobile ───────────────────────────────────────────────── */
@media (max-width: 768px) {
    .workbook-cover {
        flex-direction: column;
        text-align: center;
        padding: var(--cp-space-lg);
    }
    .workbook-cover__progress {
        flex-direction: row;
        gap: var(--cp-space-md);
    }
    .workbook-cover__meta {
        justify-content: center;
    }
    .workbook-intro {
        flex-direction: column;
        text-align: center;
        gap: var(--cp-space-md);
        padding: var(--cp-space-lg);
    }
    .workbook-intro__photo img {
        width: 100px;
        height: 100px;
    }
    .workbook-download {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }
    .workbook-section-header {
        flex-direction: column;
        text-align: center;
        padding: var(--cp-space-xl) var(--cp-space-lg);
        gap: var(--cp-space-md);
    }
    .workbook-section-header__badge {
        margin: 0 auto;
    }
    .workbook-section-header__text h3 {
        font-size: 1.5rem;
    }
    .workbook-activity {
        padding: var(--cp-space-md);
        border-radius: 12px;
    }
    .workbook-activity__header {
        flex-wrap: wrap;
    }
    .workbook-activity__save-status {
        margin-left: 0;
        width: 100%;
        text-align: right;
    }
    .workbook-rating__row {
        gap: var(--cp-space-sm);
    }
    .workbook-rating__endlabel {
        min-width: 50px;
        font-size: 0.7rem;
    }
    .workbook-rating__endlabel strong {
        font-size: 1.1rem;
    }
    .workbook-rating__track {
        padding: 6px 4px;
        gap: 0;
    }
    .workbook-rating__dot {
        width: 36px;
        height: 36px;
        font-size: 0.85rem;
    }
    .workbook-textarea {
        font-size: 16px; /* prevents iOS zoom */
    }
    .workbook-reflection-prompt {
        flex-direction: column;
        text-align: center;
    }
}