/* ── Smoking Cessation Pages ── */
.smoking-page {
    max-width: 800px;
    margin: 0 auto;
}

.smoking-header {
    text-align: center;
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid var(--border);
}
.smoking-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}
.smoking-badge {
    display: inline-block;
    background: linear-gradient(135deg, #188038, #34a853);
    color: #fff;
    padding: 0.35rem 1rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.smoking-meta {
    display: flex;
    gap: 1rem;
    align-items: center;
}
.smoking-date {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 500;
}
.smoking-week {
    font-size: 0.75rem;
    color: var(--accent);
    font-weight: 600;
    background: var(--tag-bg);
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
}
.smoking-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1.2;
    letter-spacing: -0.03em;
    margin: 0.75rem 0 0.5rem;
}
.smoking-theme {
    color: var(--text-tertiary);
    font-size: 0.9rem;
}
.smoking-actions {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
}
.btn-download, .btn-archive {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s;
}
.btn-download {
    background: var(--accent);
    color: #fff;
    border: none;
}
.btn-download:hover { background: var(--accent-dark); }
.btn-download:disabled { opacity: 0.6; cursor: wait; }
.btn-archive {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}
.btn-archive:hover { background: var(--border-light); color: var(--text); }

/* ── Introduction ── */
.smoking-intro {
    background: linear-gradient(135deg, #e8f5e9, #f1f8e9);
    border: 1px solid #c8e6c9;
    border-radius: var(--card-radius);
    padding: 1.5rem 2rem;
    margin-bottom: 2rem;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text);
}

/* ── Visual Aids ── */
.visual-aid {
    margin-bottom: 2.5rem;
}
.visual-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 1rem;
    text-align: center;
}
.visual-container {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    padding: 1.5rem;
    box-shadow: var(--card-shadow);
}

/* Timeline */
.timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    padding-left: 2rem;
}
.timeline::before {
    content: '';
    position: absolute;
    left: 0.6rem;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 2px;
    background: var(--border);
}
.timeline-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.75rem 0;
    position: relative;
}
.timeline-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-left: -1.65rem;
    margin-top: 0.2rem;
    z-index: 1;
    box-shadow: 0 0 0 3px #fff;
}
.timeline-label {
    font-size: 0.85rem;
    font-weight: 700;
}
.timeline-value {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Comparison */
.comparison-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}
.comparison-card {
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 1.25rem;
    text-align: center;
}
.comparison-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.4rem;
}
.comparison-value {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Statistics */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1.25rem;
}
.stat-card {
    text-align: center;
    padding: 1rem;
}
.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
}
.stat-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.25rem;
}
.stat-value {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.45;
}

/* Wheel */
.wheel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
}
.wheel-segment {
    padding: 1rem 1.25rem;
    background: var(--bg-secondary);
    border-radius: 8px;
}
.wheel-label {
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}
.wheel-value {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.45;
}

/* Checklist */
.checklist {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.checklist-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    border-radius: 8px;
}
.checklist-check {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0.1rem;
}
.checklist-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text);
}
.checklist-value {
    font-size: 0.82rem;
    color: var(--text-secondary);
}

/* ── Key Points ── */
.key-points {
    margin-bottom: 2.5rem;
}
.key-points h2 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 1.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--text);
}
.key-point {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    padding: 1.25rem 1.5rem;
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.2s;
}
.key-point:hover { box-shadow: var(--card-shadow-hover); }
.key-point-number {
    width: 32px;
    height: 32px;
    background: var(--accent);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    flex-shrink: 0;
}
.key-point-content h3 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.3rem;
}
.key-point-content p {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* ── Discussion Questions ── */
.discussion-questions {
    margin-bottom: 2.5rem;
}
.discussion-questions h2 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 1.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--text);
}
.questions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}
.question-card {
    background: #fff8e1;
    border: 1px solid #fff0b3;
    border-radius: var(--card-radius);
    padding: 1.25rem;
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}
.question-icon {
    background: #f9a825;
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 800;
    flex-shrink: 0;
}
.question-card p {
    font-size: 0.88rem;
    color: var(--text);
    line-height: 1.5;
}

/* ── Action Steps ── */
.action-steps {
    margin-bottom: 2rem;
}
.action-steps h2 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 1.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--text);
}
.steps-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.step-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    padding: 1rem 1.25rem;
    box-shadow: var(--card-shadow);
}
.step-checkbox {
    width: 22px;
    height: 22px;
    border: 2px solid var(--accent-green);
    border-radius: 6px;
    flex-shrink: 0;
    margin-top: 0.1rem;
}
.step-item p {
    font-size: 0.9rem;
    color: var(--text);
    line-height: 1.5;
}

/* ── Footer Nav ── */
.smoking-footer-nav {
    display: flex;
    justify-content: space-between;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
    margin-top: 1rem;
}
.smoking-footer-nav a {
    color: var(--accent);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
}
.smoking-footer-nav a:hover { text-decoration: underline; }

/* ── Archive ── */
.smoking-archive-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.smoking-archive-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    padding: 1rem 1.25rem;
    text-decoration: none;
    color: var(--text);
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.15s;
}
.smoking-archive-item:hover { box-shadow: var(--card-shadow-hover); }
.smoking-archive-week {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent);
    background: var(--tag-bg);
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    white-space: nowrap;
}
.smoking-archive-info { flex: 1; }
.smoking-archive-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.2rem;
}
.smoking-archive-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
    color: var(--text-tertiary);
}
.smoking-archive-theme { font-weight: 500; }
.smoking-archive-arrow { color: var(--text-tertiary); flex-shrink: 0; }

/* ── Responsive ── */
@media (max-width: 600px) {
    .smoking-title { font-size: 1.4rem; }
    .smoking-header-top { flex-direction: column; gap: 0.5rem; }
    .questions-grid { grid-template-columns: 1fr; }
    .comparison-grid { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .key-point { flex-direction: column; gap: 0.5rem; }
    .smoking-actions { flex-direction: column; align-items: center; }
}

/* ── Print / PDF styles ── */
@media print {
    header, footer, .smoking-actions, .smoking-footer-nav, .nav-sidebar { display: none !important; }
    .smoking-page { max-width: 100%; }
    .key-point, .question-card, .step-item { break-inside: avoid; }
}

/* ── Real-World Scenarios ── */
.scenarios {
    margin-bottom: 2.5rem;
}
.scenarios h2 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--text);
}
.scenarios-subtitle {
    font-size: 0.82rem;
    color: var(--text-tertiary);
    margin-bottom: 1.25rem;
}
.scenarios-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.scenario-card {
    display: flex;
    gap: 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    padding: 1.25rem 1.5rem;
    box-shadow: var(--card-shadow);
}
.scenario-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
    color: #2e7d32;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 700;
    flex-shrink: 0;
}
.scenario-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.3rem;
}
.scenario-situation {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 0.5rem;
}
.scenario-reflection {
    font-size: 0.85rem;
    color: var(--accent);
    font-weight: 500;
    font-style: italic;
}

/* ── Process Flow Visual ── */
.process-flow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}
.process-step {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    max-width: 500px;
    padding: 0.75rem 0;
}
.process-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    flex-shrink: 0;
}
.process-content {
    flex: 1;
}
.process-label {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.15rem;
}
.process-value {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.45;
}
.process-arrow {
    display: flex;
    justify-content: center;
    padding: 0;
    margin-left: 4px;
}

/* ── Motivation Section ── */
.motivation-section {
    margin-bottom: 2rem;
    background: linear-gradient(135deg, #ede7f6, #e8eaf6);
    border: 1px solid #d1c4e9;
    border-radius: var(--card-radius);
    padding: 1.5rem 2rem;
}
.motivation-section h2 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #5e35b1;
    margin-bottom: 1.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #b39ddb;
}
.motivation-affirmation {
    text-align: center;
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #d1c4e9;
}
.motivation-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #7e57c2;
    margin-bottom: 0.5rem;
}
.affirmation-text {
    font-size: 1.15rem;
    font-weight: 600;
    color: #4527a0;
    line-height: 1.5;
    font-style: italic;
}
.motivation-quote {
    position: relative;
    padding: 1rem 1.25rem 1rem 2.5rem;
    margin-bottom: 1rem;
    background: rgba(255,255,255,0.5);
    border-radius: 8px;
}
.quote-icon {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
}
.motivation-quote p {
    font-size: 0.9rem;
    color: var(--text);
    line-height: 1.6;
    font-style: italic;
}
.motivation-fact {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(255,255,255,0.5);
    border-radius: 8px;
}
.fact-icon {
    flex-shrink: 0;
    margin-top: 0.1rem;
}
.motivation-fact p {
    font-size: 0.88rem;
    color: var(--text);
    line-height: 1.5;
}

/* ── Responsive additions ── */
@media (max-width: 600px) {
    .scenario-card { flex-direction: column; gap: 0.5rem; }
    .process-step { max-width: 100%; }
}

/* ── Print additions ── */
@media print {
    .scenario-card, .motivation-section { break-inside: avoid; }
}

/* ── Chart.js Wrappers ── */
.chart-wrapper {
    max-width: 700px;
    margin: 0 auto;
    padding: 0.5rem;
}
.chart-doughnut-wrapper, .chart-radar-wrapper {
    max-width: 420px;
}

/* ── Wheel Diagram (SVG) ── */
.wheel-diagram {
    display: flex;
    justify-content: center;
    padding: 1rem 0;
}
.wheel-svg {
    width: 100%;
    max-width: 400px;
    height: auto;
}

/* ── Flowchart ── */
.flowchart-diagram {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 1rem 0;
}
.flow-node {
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 500;
    text-align: center;
    max-width: 320px;
    width: 100%;
    box-shadow: var(--card-shadow);
}
.flow-start {
    background: #e8f5e9;
    border: 2px solid #4caf50;
    color: #2e7d32;
    border-radius: 24px;
    font-weight: 600;
}
.flow-step {
    background: var(--surface);
    border: 2px solid var(--border);
    color: var(--text);
}
.flow-decision {
    background: #fff8e1;
    border: 2px solid #f9a825;
    color: #e65100;
    transform: rotate(0deg);
    border-radius: 4px;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    padding: 1.5rem 2rem;
    font-weight: 600;
}
.flow-end {
    background: #e3f2fd;
    border: 2px solid #1a73e8;
    color: #0d47a1;
    border-radius: 24px;
    font-weight: 600;
}
.flow-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
}
.flow-edge-label {
    font-size: 0.72rem;
    color: var(--text-tertiary);
    font-weight: 600;
    margin-bottom: -4px;
}

/* ── Responsive ── */
@media (max-width: 600px) {
    .chart-wrapper { padding: 0; }
    .chart-doughnut-wrapper, .chart-radar-wrapper { max-width: 300px; }
    .flow-node { max-width: 260px; font-size: 0.82rem; }
    .flow-decision { padding: 1.25rem 1.5rem; }
}

/* ── Print ── */
@media print {
    .chart-wrapper canvas { max-width: 100%; }
    .flowchart-diagram, .wheel-diagram { break-inside: avoid; }
}

/* ── LACDMH Branding ── */

/* Brand colors from LACDMH Identity Guidelines */
:root {
    --lacdmh-blue: #4299D6;
    --lacdmh-gold: #C9B44E;
    --lacdmh-red: #E8123A;
    --lacdmh-black: #000000;
}

/* ── Top Banner ── */
.lacdmh-banner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem 1.5rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    margin-bottom: 1.5rem;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}
.lacdmh-logo {
    height: 56px;
    width: auto;
    flex-shrink: 0;
}
.lacdmh-program {
    flex: 1;
}
.lacdmh-program-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--lacdmh-black);
    letter-spacing: 0.02em;
}
.lacdmh-program-type {
    font-size: 0.78rem;
    color: var(--text-tertiary);
    font-weight: 500;
    margin-top: 0.15rem;
}

/* ── Tagline Colors ── */
.lacdmh-tagline {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.lacdmh-hope { color: var(--lacdmh-blue); }
.lacdmh-recovery { color: var(--lacdmh-gold); }
.lacdmh-wellbeing { color: var(--lacdmh-red); }

/* ── Footer Attribution ── */
.lacdmh-footer {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: #f8f9fa;
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    margin-top: 2rem;
    margin-bottom: 1rem;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}
.lacdmh-footer-logo {
    height: 36px;
    width: auto;
    flex-shrink: 0;
}
.lacdmh-footer-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.lacdmh-footer-text > span:first-child {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text);
}

/* ── Override smoking badge to LACDMH blue ── */
.smoking-badge {
    background: linear-gradient(135deg, var(--lacdmh-blue), #5AACE0) !important;
}

/* ── Responsive ── */
@media (max-width: 600px) {
    .lacdmh-banner {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
        padding: 1rem;
    }
    .lacdmh-logo { height: 48px; }
    .lacdmh-footer { flex-direction: column; text-align: center; }
    .lacdmh-footer-logo { height: 28px; }
}

/* ── Print ── */
@media print {
    .lacdmh-banner, .lacdmh-footer {
        border: none;
        box-shadow: none;
        page-break-inside: avoid;
    }
}

/* ── Action Step structured format ── */
.step-text p { margin: 0; }
.step-timeframe {
    display: inline-block;
    margin-top: 0.35rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ig-teal, #0d9488);
    background: var(--ig-teal-light, #ccfbf1);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
}

/* ── PDF Compact Mode ── */
/* Applied via .pdf-rendering class during PDF generation */

.pdf-rendering {
    font-size: 13px;
}

/* Reduce section spacing */
.pdf-rendering .smoking-intro {
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    line-height: 1.5;
}

.pdf-rendering .key-points h2,
.pdf-rendering .scenarios h2,
.pdf-rendering .discussion-questions h2,
.pdf-rendering .action-steps h2 {
    font-size: 1rem;
    margin-bottom: 0.6rem;
    padding-bottom: 0.3rem;
}

/* Compact key points */
.pdf-rendering .key-point {
    padding: 0.6rem 0.8rem;
    margin-bottom: 0.5rem;
}
.pdf-rendering .key-point-number {
    width: 24px;
    height: 24px;
    font-size: 0.75rem;
}
.pdf-rendering .key-point-content h3 {
    font-size: 0.82rem;
    margin-bottom: 0.15rem;
}
.pdf-rendering .key-point-content p {
    font-size: 0.78rem;
    line-height: 1.45;
}

/* Compact scenarios */
.pdf-rendering .scenarios-subtitle {
    margin-bottom: 0.5rem;
    font-size: 0.72rem;
}
.pdf-rendering .scenario-card {
    padding: 0.6rem 0.8rem;
    margin-bottom: 0.4rem;
}
.pdf-rendering .scenario-avatar {
    width: 28px;
    height: 28px;
    font-size: 0.8rem;
}
.pdf-rendering .scenario-name {
    font-size: 0.78rem;
}
.pdf-rendering .scenario-situation {
    font-size: 0.75rem;
    line-height: 1.4;
    margin-bottom: 0.25rem;
}
.pdf-rendering .scenario-reflection {
    font-size: 0.72rem;
}

/* Compact questions */
.pdf-rendering .questions-grid {
    gap: 0.5rem;
}
.pdf-rendering .question-card {
    padding: 0.6rem 0.75rem;
}
.pdf-rendering .question-icon {
    width: 22px;
    height: 22px;
    font-size: 0.6rem;
}
.pdf-rendering .question-card p {
    font-size: 0.78rem;
    line-height: 1.4;
}

/* Compact action steps */
.pdf-rendering .step-item {
    padding: 0.5rem 0.75rem;
}
.pdf-rendering .step-checkbox {
    width: 16px;
    height: 16px;
}
.pdf-rendering .step-item p,
.pdf-rendering .step-text p {
    font-size: 0.78rem;
    line-height: 1.4;
}
.pdf-rendering .step-timeframe {
    font-size: 0.65rem;
    margin-top: 0.2rem;
}

/* Compact motivation */
.pdf-rendering .motivation-section {
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}
.pdf-rendering .motivation-section h2 {
    font-size: 1rem;
    margin-bottom: 0.6rem;
    padding-bottom: 0.3rem;
}
.pdf-rendering .motivation-affirmation {
    margin-bottom: 0.6rem;
    padding-bottom: 0.6rem;
}
.pdf-rendering .affirmation-text {
    font-size: 0.95rem;
}
.pdf-rendering .motivation-quote {
    padding: 0.5rem 0.75rem 0.5rem 2rem;
    margin-bottom: 0.5rem;
}
.pdf-rendering .motivation-quote p {
    font-size: 0.78rem;
}
.pdf-rendering .motivation-fact p {
    font-size: 0.78rem;
}

/* Compact infographic cards */
.pdf-rendering .ig-card {
    padding: 12px 16px;
    margin-bottom: 12px;
}
.pdf-rendering .ig-title {
    font-size: 0.95rem;
    margin-bottom: 2px;
}
.pdf-rendering .ig-subtitle {
    font-size: 0.7rem;
    margin-bottom: 10px;
}

/* Compact stat callouts */
.pdf-rendering .ig-stat-card {
    padding: 10px 8px;
}
.pdf-rendering .ig-stat-number {
    font-size: 1.8rem;
}
.pdf-rendering .ig-stat-label {
    font-size: 0.78rem;
}
.pdf-rendering .ig-stat-detail {
    font-size: 0.68rem;
}

/* Compact horizontal bars */
.pdf-rendering .ig-hbar-row {
    margin-bottom: 4px;
}
.pdf-rendering .ig-hbar-track {
    height: 24px;
}
.pdf-rendering .ig-hbar-highlight .ig-hbar-track {
    height: 28px;
}

/* Compact timeline */
.pdf-rendering .ig-timeline-item {
    padding: 0.4rem 0;
}

/* Compact visual section spacing */
.pdf-rendering .visual-aid {
    margin-bottom: 1rem;
}
.pdf-rendering .key-points,
.pdf-rendering .scenarios,
.pdf-rendering .discussion-questions,
.pdf-rendering .action-steps {
    margin-bottom: 1rem;
}

/* Compact LACDMH branding in PDF */
.pdf-rendering .lacdmh-footer {
    padding: 0.5rem 0.75rem;
    margin-top: 0.75rem;
}
.pdf-rendering .lacdmh-footer-logo {
    height: 24px;
}

/* Allow content to flow across pages instead of leaving gaps */
.pdf-rendering .ig-card,
.pdf-rendering .key-point,
.pdf-rendering .scenario-card,
.pdf-rendering .question-card,
.pdf-rendering .step-item,
.pdf-rendering .motivation-section {
    page-break-inside: auto;
}

/* Only avoid breaks on small critical elements */
.pdf-rendering .ig-stat-card,
.pdf-rendering .ig-hbar-row {
    page-break-inside: avoid;
}

/* ── Horizontal bars: danger/warning badge variant ── */
.ig-hbar-badge-danger {
    background: var(--ig-coral, #ef4444) !important;
    color: #fff !important;
}
.ig-hbar-fill-danger {
    background: linear-gradient(135deg, #dc2626, #f87171) !important;
}
.ig-hbar-highlight:has(.ig-hbar-badge-danger) .ig-hbar-fill {
    background: linear-gradient(135deg, #dc2626, #f87171);
}

/* ── Timeline line-wrap fix: proper spacing between line and text ── */
.ig-timeline-line-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 48px;
    flex-shrink: 0;
    margin-right: 12px;
}
.ig-timeline-line-wrap .ig-timeline-line {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    bottom: -24px;
    width: 3px;
    border-radius: 2px;
}
.ig-timeline-line-wrap .ig-timeline-marker {
    position: relative;
    left: auto;
    z-index: 1;
}

/* Override the parent timeline to use normal flow */
.ig-timeline {
    padding-left: 0;
}
.ig-timeline .ig-timeline-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}
.ig-timeline-content {
    padding-top: 8px;
    padding-left: 4px;
}

/* ── Enriched Key Discussion Points ── */
.key-point-body {
    margin-bottom: 0.6rem;
}

/* Data point callout */
.key-point-data {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    background: #f0fdfa;
    border-left: 3px solid #0d9488;
    border-radius: 0 6px 6px 0;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.6rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: #115e59;
    line-height: 1.45;
}

/* Facilitator talking points */
.key-point-talking {
    background: #fffbeb;
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
}
.talking-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #92400e;
    margin-bottom: 0.3rem;
}
.key-point-talking ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.key-point-talking li {
    font-size: 0.8rem;
    color: #78350f;
    line-height: 1.45;
    padding: 0.2rem 0;
    padding-left: 1rem;
    position: relative;
}
.key-point-talking li::before {
    content: "\25B8";
    position: absolute;
    left: 0;
    color: #d97706;
    font-size: 0.7rem;
}

/* Clinical note */
.key-point-clinical {
    font-size: 0.78rem;
    color: var(--text-secondary, #555);
    line-height: 1.45;
    font-style: italic;
    padding: 0.35rem 0;
}
.clinical-badge {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: #ede9fe;
    color: #6d28d9;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    margin-right: 0.35rem;
    font-style: normal;
}

/* PDF compact overrides for new elements */
.pdf-rendering .key-point-data {
    padding: 0.3rem 0.5rem;
    font-size: 0.72rem;
    margin-bottom: 0.4rem;
}
.pdf-rendering .key-point-talking {
    padding: 0.3rem 0.5rem;
    margin-bottom: 0.3rem;
}
.pdf-rendering .talking-label {
    font-size: 0.6rem;
    margin-bottom: 0.2rem;
}
.pdf-rendering .key-point-talking li {
    font-size: 0.7rem;
    padding: 0.1rem 0 0.1rem 0.8rem;
}
.pdf-rendering .key-point-clinical {
    font-size: 0.68rem;
    padding: 0.2rem 0;
}
.pdf-rendering .clinical-badge {
    font-size: 0.55rem;
}

/* ── Fix: horizontal bar badge positioning ── */
/* Badge must not take flex space — position it absolutely so all tracks are equal width */
.ig-hbar-row {
    position: relative;
}
.ig-hbar-badge {
    position: absolute;
    right: -4px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}
/* Push the value text left to make room for the badge */
.ig-hbar-highlight .ig-hbar-value {
    margin-right: 72px;
}
/* Non-highlighted rows don't need the margin */
.ig-hbar-row:not(.ig-hbar-highlight) .ig-hbar-value {
    margin-right: 0;
}

/* ── Program Banner (replaces LACDMH banner) ── */
.program-banner {
    padding: 12px 0;
    margin-bottom: 8px;
}
.program-info {
    text-align: left;
}
.program-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-muted, #64748b);
    letter-spacing: 0.5px;
}
.program-type {
    font-size: 0.8rem;
    color: var(--text-muted, #94a3b8);
}

/* ── Dual Download Buttons ── */
.btn-patient {
    background: #0d9488 !important;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn-patient:hover {
    background: #0f766e !important;
}
.btn-facilitator {
    background: #64748b !important;
}
.btn-facilitator:hover {
    background: #475569 !important;
}

/* ── Coping Skills Section ── */
.coping-skills {
    margin-top: 32px;
}
.coping-skills h2 {
    font-size: 1.3rem;
    margin-bottom: 4px;
}
.coping-subtitle {
    font-size: 0.85rem;
    color: var(--text-muted, #64748b);
    margin-bottom: 16px;
}
.coping-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 640px) {
    .coping-grid { grid-template-columns: 1fr; }
}
.coping-skill-card {
    display: flex;
    gap: 12px;
    padding: 14px;
    background: var(--bg-card, #f8fafc);
    border-radius: 10px;
    border: 1px solid var(--border-light, #e2e8f0);
}
.coping-skill-icon {
    font-size: 1.8rem;
    flex-shrink: 0;
    line-height: 1;
}
.coping-skill-content strong {
    display: block;
    font-size: 0.95rem;
    margin-bottom: 4px;
}
.coping-skill-content p {
    font-size: 0.85rem;
    color: var(--text-secondary, #475569);
    margin: 0 0 6px 0;
    line-height: 1.4;
}
.coping-skill-when {
    font-size: 0.75rem;
    color: var(--text-muted, #94a3b8);
    font-style: italic;
}

/* ── References Section ── */
.references-section {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--border-light, #e2e8f0);
}
.references-section h2 {
    font-size: 1.1rem;
    margin-bottom: 12px;
    color: var(--text-muted, #64748b);
}
.references-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.references-list li {
    font-size: 0.8rem;
    color: var(--text-secondary, #475569);
    padding: 6px 0;
    border-bottom: 1px solid var(--border-light, #f1f5f9);
    line-height: 1.5;
}
.references-list li:last-child {
    border-bottom: none;
}
.references-list a {
    color: var(--accent, #0d9488);
    text-decoration: none;
}
.references-list a:hover {
    text-decoration: underline;
}

/* ── Page Footer (replaces LACDMH footer) ── */
.smoking-page-footer {
    text-align: center;
    padding: 16px 0 8px;
    font-size: 0.75rem;
    color: var(--text-muted, #94a3b8);
    border-top: 1px solid var(--border-light, #e2e8f0);
    margin-top: 24px;
}

/* ── PDF rendering adjustments for new sections ── */
.pdf-rendering .coping-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.pdf-rendering .coping-skill-card {
    padding: 8px;
}
.pdf-rendering .coping-skill-icon {
    font-size: 1.4rem;
}
.pdf-rendering .references-section {
    margin-top: 16px;
    padding-top: 12px;
}
.pdf-rendering .references-list li {
    font-size: 0.7rem;
    padding: 3px 0;
}

/* ══════════════════════════════════════════════
   11. CLOCK COMPARISON
   ══════════════════════════════════════════════ */
.ig-clock-wrapper {
    padding: 8px 0;
}
.ig-clock-pair {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}
.ig-clock-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 160px;
    max-width: 220px;
}
.ig-clock-label {
    font-weight: 600;
    font-size: 0.9rem;
    text-align: center;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ig-clock-face {
    display: flex;
    justify-content: center;
}
.ig-clock-items {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}
.ig-clock-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    padding: 4px 8px;
    background: var(--bg-card, #f8fafc);
    border-radius: 6px;
}
.ig-clock-item-time {
    font-weight: 700;
    font-size: 0.85rem;
    min-width: 36px;
}
.ig-clock-arrow {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
@media (max-width: 480px) {
    .ig-clock-arrow svg { transform: rotate(90deg); }
}

/* ══════════════════════════════════════════════
   12. BODY DIAGRAM
   ══════════════════════════════════════════════ */
.ig-body-wrapper {
    padding: 8px 0;
}
.ig-body-diagram {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}
.ig-body-svg {
    flex-shrink: 0;
    width: 140px;
    height: 140px;
}
.ig-body-labels {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
.ig-body-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 0.85rem;
    line-height: 1.4;
}
.ig-body-label-emoji {
    font-size: 1.3rem;
    flex-shrink: 0;
    line-height: 1;
}
.ig-body-label strong {
    display: block;
    font-size: 0.88rem;
    margin-bottom: 2px;
}
.ig-body-label-detail {
    font-size: 0.78rem;
    color: var(--text-secondary, #64748b);
}
@media (max-width: 480px) {
    .ig-body-diagram { flex-direction: column; align-items: center; }
    .ig-body-svg { width: 100px; height: 100px; }
}

/* ══════════════════════════════════════════════
   13. MONEY JAR
   ══════════════════════════════════════════════ */
.ig-jar-wrapper {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 8px 0;
}
.ig-jar-visual {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
}
.ig-jar-svg {
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.08));
}
.ig-jar-milestones {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}
.ig-jar-milestone {
    padding: 10px 12px;
    background: var(--bg-card, #f8fafc);
    border-radius: 8px;
    border: 1px solid var(--border-light, #e2e8f0);
}
.ig-jar-milestone-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.ig-jar-emoji {
    font-size: 1.4rem;
    flex-shrink: 0;
}
.ig-jar-milestone-header strong {
    font-size: 0.9rem;
    display: block;
}
.ig-jar-saved {
    font-size: 0.82rem;
    color: var(--accent, #0d9488);
    font-weight: 600;
}
.ig-jar-reward {
    font-size: 0.8rem;
    color: var(--text-secondary, #64748b);
    font-style: italic;
    margin-left: 36px;
}
@media (max-width: 480px) {
    .ig-jar-wrapper { flex-direction: column; align-items: center; }
}

/* PDF rendering for new visual types */
.pdf-rendering .ig-clock-pair { gap: 4px; }
.pdf-rendering .ig-clock-face svg { width: 110px; height: 110px; }
.pdf-rendering .ig-body-svg { width: 100px; height: 100px; }
.pdf-rendering .ig-jar-svg { width: 100px; height: 140px; }

/* ══════════════════════════════════════════════
   RENDERED VISUAL IMAGES (children's book style)
   ══════════════════════════════════════════════ */
.ig-rendered {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.ig-rendered-img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    /* Removed max-height:280px + object-fit:cover — they were cropping the bottom of PNG visuals (numbers cut off, subtitles clipped). Show full image. */
}
.ig-rendered-caption {
    font-size: 0.85rem;
    font-style: italic;
    color: var(--text-muted, #64748b);
    text-align: center;
    padding: 8px 16px;
    margin: 0;
    background: var(--bg-card, #f8fafc);
    border-top: 1px solid var(--border-light, #e2e8f0);
}
.handout-visual-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10pt;
}
@media print {
    .ig-rendered { box-shadow: none; border: 1px solid #e2e8f0; }
}