/* ============================================================
   SHARED DOCUMENT STYLES
   Common CSS for all SFCG document pages (Prospectus,
   Business Plan, Pledge variants). Document-specific styles
   are kept inline in each HTML file.
   ============================================================ */

/* === RESET & BASE (scoped to .page-wrapper to avoid breaking site header/footer) === */
:root {
    --primary: #198754;
    --primary-dark: #146c43;
    --accent-gold: #c9a84c;
    --sidebar-bg: #fdf8e8;
    --bg-white: #ffffff;
    --text-dark: #1e1e1e;
    --text-body: #333333;
    --text-muted: #6c757d;
    --border-light: #e0e0e0;
    --grey-placeholder: #d5d5d5;
    --strength-green: #198754;
    --weakness-amber: #e8910c;
    --opportunity-blue: #0d6efd;
    --threat-red: #dc3545;
}

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

.page-wrapper {
    font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--text-body);
    line-height: 1.7;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

/* === PAGE / PRINT SETUP === */
/* Named pages: full-bleed covers vs margined content */
@page {
    size: A4 portrait;
    margin: 18mm 16mm 20mm 16mm;
}

@page cover-page {
    size: A4 portrait;
    margin: 0;
}

@page back-cover-page {
    size: A4 portrait;
    margin: 0;
}

@media print {
    html, body {
        height: auto !important;
        overflow: visible !important;
        display: block !important;
        font-size: 10pt;
        line-height: 1.5;
        background: #fff;
        orphans: 3;
        widows: 3;
    }

    main {
        padding-top: 0 !important;
        display: block !important;
    }

    /* Hide site header/footer in print so only the document prints */
    [data-include="header.html"],
    [data-include="/header.html"],
    [data-include="footer.html"],
    [data-include="/footer.html"],
    .document-header {
        display: none !important;
    }

    .page-wrapper {
        max-width: none;
        margin: 0;
        box-shadow: none;
        overflow-x: hidden;
    }

    /* Front cover: full-bleed, own named page */
    .cover-page {
        page: cover-page;
        min-height: auto;
        height: 100vh;
        break-after: page;
        margin: 0;
        padding: 0;
        box-shadow: none;
    }

    /* Back cover: full-bleed, always starts on a new page.
       Parity (even/verso) is enforced by the two-pass mechanism
       in capture.ps1 via the .parity-fixer div. */
    .back-cover {
        page: back-cover-page;
        min-height: auto;
        height: 100vh;
        break-before: page;
        margin: 0;
        padding: 0;
        box-shadow: none;
    }

    /* Blank page after pledge form so the leaf can be torn out */
    .blank-page {
        break-before: page;
    }

    /* Parity fixer: hidden by default, activated by JS when ?parity=fix
       is in the URL. Inserts one blank page before the back cover so it
       lands on an even (verso) page. */
    .parity-fixer {
        display: none;
    }
    .parity-fixer.active {
        display: block;
        break-before: page;
        page: cover-page;
        height: 100vh;
        visibility: hidden;
    }

    /* Front matter: TOC always gets its own page */
    .toc-section {
        padding: 0;
        break-after: page;
    }

    /* By default, content sections flow naturally (no forced page break) */
    .content-section {
        /* no break-before - let content reflow */
    }

    /* Forced page breaks at major narrative transitions */
    .print-break-before {
        break-before: page;
    }

    /* Designated new-page sections (editorial choice, not a gap fix).
       Currently: S9 FAQ only. Curate this list deliberately. */
    .section--new-page {
        break-before: page;
    }

    .no-break {
        break-inside: avoid;
    }

    /* Section headings: the "SECTION N" label and the H2 title must
       stay together as a unit, and must not be stranded at the bottom
       of a page without the content that follows them. */
    .section-heading {
        break-inside: avoid;
        break-after: avoid;
        padding: 0;
    }

    .content-body h3 {
        break-after: avoid;
    }

    .page-break-before {
        break-before: page;
    }

    .key-figures-grid, table {
        break-inside: avoid;
    }

    .pull-quote, .sidebar-box, .faq-item, .notice-box {
        break-inside: avoid;
        clear: both;
    }

    .pledge-type-card, .swot-grid, .step-card, .invest-cta {
        break-inside: avoid;
        clear: both;
    }

    /* Tighten the green CTA box in print to save vertical space */
    .invest-cta {
        padding: 18px 24px;
        margin: 16px 0;
    }
    .invest-cta .cta-gold {
        margin: 6px 0 4px;
    }

    /* Cap the height of the closing photos in Section 11 so the
       disclaimer doesn't spill onto a page of its own */
    .print-photo img {
        max-height: 260px;
        object-fit: cover;
    }

    .step-list li {
        overflow: hidden;
    }

    /* Print-only images - hidden on screen, shown in print */
    .print-photo {
        break-inside: avoid;
        margin: 16px 0;
    }
    .print-photo img {
        width: 100%;
        height: auto;
        border-radius: 4px;
    }
    .print-photo .photo-caption {
        font-size: 8pt;
        color: #666;
        margin-top: 4px;
    }

    /* Float photos - wrap text around images */
    .float-photo {
        float: right;
        width: 35%;
        margin: 2px 0 8px 12px;
        clear: right;
        break-inside: avoid;
    }
    .float-photo.float-left {
        float: left;
        margin: 2px 12px 8px 0;
        clear: left;
    }
    .float-photo img {
        width: 100%;
        height: auto;
        border-radius: 3px;
    }
    .float-photo .photo-caption {
        font-size: 7pt;
        color: #888;
        margin-top: 2px;
        font-style: italic;
        line-height: 1.25;
    }

    .content-body {
        padding: 0 0 24px;
    }

    /* Pledge form - forced onto odd (recto) page so it prints on its own sheet */
    .pledge-form-page {
        break-before: recto;
    }
}

/* === SCREEN WRAPPER === */
/* Background for the document area so the gap below the fixed header is visible */
main:has(.page-wrapper) {
    background: #f0f0f0;
}

.document-header {
    position: sticky;
    top: 100px;
    z-index: 900;
    background: #f0f0f0;
    padding: 16px 0 12px;
    max-width: 240mm;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.document-title-group {
    min-width: 0;
}

.document-title {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 700;
    color: #198754;
}

.document-version {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 400;
}

.version-history-link {
    color: var(--text-muted);
    text-decoration: underline;
}

.version-history-link:hover {
    color: var(--primary);
}

/* === VERSION HISTORY SECTION === */
.version-history {
    max-width: 240mm;
    margin: 24px auto 0;
    padding: 0;
}

.version-history-toggle {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    cursor: pointer;
    padding: 12px 0;
}

.version-history-toggle:hover {
    color: var(--primary-dark);
}

.version-entry {
    padding: 16px 0;
    border-bottom: 1px solid var(--border-light);
}

.version-entry:last-child {
    border-bottom: none;
}

.version-entry h3 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0 0 8px;
}

.version-entry ul {
    margin: 0 0 0 20px;
    padding: 0;
    font-size: 0.9rem;
    color: var(--text-body);
}

.version-entry li {
    margin-bottom: 4px;
}

@media print {
    .document-header,
    .version-history {
        display: none !important;
    }
}

.page-wrapper {
    max-width: 210mm;
    margin: 0 auto 40px;
    background: var(--bg-white);
    box-shadow: 0 2px 24px rgba(0, 0, 0, 0.1);
}

/* === FRONT COVER (Full-page hero photo) === */
.cover-page {
    aspect-ratio: 210 / 297;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    container-type: inline-size;
}

.cover-hero {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    overflow: hidden;
}

.cover-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cover-overlay {
    position: relative;
    z-index: 2;
    background: rgba(255, 255, 255, 0.88);
    padding: 3% 4%;
    backdrop-filter: blur(2px);
}

.cover-logo {
    margin-bottom: 1.5cqw;
}

.cover-logo img {
    height: clamp(36px, 6cqw, 48px);
    width: auto;
}

.cover-title-row {
    display: flex;
    align-items: center;
    gap: 2cqw;
    margin-bottom: 0.75cqw;
}

.cover-title-row h1 {
    margin-bottom: 0;
}

.cover-title-row .cover-logo {
    margin-bottom: 0;
    flex-shrink: 0;
}

.cover-overlay h1 {
    font-size: clamp(1.5rem, 5.6cqw, 2.8rem);
    font-weight: 800;
    color: var(--text-dark);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 0.75cqw;
}

.cover-overlay .cover-subtitle {
    font-size: clamp(0.85rem, 2.7cqw, 1.35rem);
    font-weight: 400;
    color: var(--primary);
    letter-spacing: 0.01em;
    margin-bottom: 1.75cqw;
}

.cover-overlay .cover-org {
    font-size: clamp(0.7rem, 1.9cqw, 0.95rem);
    color: var(--text-muted);
    margin-bottom: 0.5cqw;
}

.cover-overlay .cover-version {
    font-size: clamp(0.6rem, 1.6cqw, 0.8rem);
    color: #999;
    margin-top: 1cqw;
}

.cover-overlay .cover-offer-label {
    font-size: 1.0rem;
    font-weight: 600;
    color: var(--accent-gold);
    letter-spacing: 0.02em;
    margin-bottom: 10px;
}

.cover-overlay .cover-standard-mark {
    display: inline-block;
    margin-top: 12px;
    background: rgba(0, 0, 0, 0.04);
    border: 1px dashed #ccc;
    border-radius: 4px;
    padding: 8px 16px;
    font-size: 0.72rem;
    color: var(--text-muted);
}

/* === TABLE OF CONTENTS === */
.toc-section {
    padding: 48px;
}

.toc-section h2 {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--primary);
}

.toc-list {
    list-style: none;
    margin-top: 20px;
}

.toc-list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 9px 0;
    border-bottom: 1px solid #eee;
    font-size: 0.95rem;
}

.toc-list .toc-num {
    font-weight: 700;
    color: var(--primary);
    margin-right: 10px;
    min-width: 24px;
}

.toc-list .toc-title {
    flex: 1;
}

.toc-list .toc-page {
    font-weight: 600;
    color: var(--text-muted);
    margin-left: 12px;
    font-size: 0.85rem;
}

.toc-list li.toc-appendix {
    padding-left: 20px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* === SECTION HEADINGS === */
.section-heading {
    margin: 0 0 28px 0;
    padding: 0 48px;
}

.section-heading h2 {
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--primary);
    padding-bottom: 10px;
    border-bottom: 2px solid var(--primary);
    line-height: 1.25;
}

.section-heading .section-number {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: block;
    margin-bottom: 4px;
}

/* === CONTENT BODY === */
.content-body {
    padding: 0 48px 48px;
}

.content-body p {
    margin-bottom: 14px;
    font-size: 0.95rem;
    color: var(--text-body);
}

.content-body h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--primary-dark);
    margin: 28px 0 10px;
}

.content-body h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary);
    margin: 20px 0 8px;
}

.content-body ul, .content-body ol {
    margin: 0 0 14px 22px;
    font-size: 0.95rem;
}

.content-body li {
    margin-bottom: 5px;
}

/* === PHOTO INLINE === */
.photo-inline {
    border-radius: 6px;
    margin: 24px 0;
    overflow: hidden;
}

.photo-inline img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    border-radius: 6px;
}

.photo-inline .photo-caption {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-style: italic;
    margin-top: 6px;
    text-align: center;
}

/* === KEY FIGURES GRID === */
.key-figures-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 24px 0;
}

.key-figure-card {
    border: 2px solid var(--primary);
    border-radius: 8px;
    padding: 22px 18px;
    text-align: center;
    background: var(--bg-white);
}

.key-figure-card .figure-number {
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1.1;
    margin-bottom: 4px;
}

.key-figure-card .figure-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* === STAT CALLOUT === */
.stat-callout {
    text-align: center;
    padding: 28px 20px;
    margin: 24px 0;
}

.stat-callout .stat-number {
    font-size: 4.5rem;
    font-weight: 900;
    color: var(--primary);
    line-height: 1;
    letter-spacing: -0.03em;
}

.stat-callout .stat-caption {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-top: 6px;
}

/* === PULL QUOTE === */
.pull-quote {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: #ffffff;
    padding: 30px 34px;
    margin: 28px 0;
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.5;
    border-radius: 6px;
    position: relative;
}

.pull-quote::before {
    content: "\201C";
    font-size: 4rem;
    position: absolute;
    top: 6px;
    left: 12px;
    opacity: 0.2;
    font-family: Georgia, serif;
    line-height: 1;
}

.pull-quote .quote-attribution {
    display: block;
    margin-top: 10px;
    font-size: 0.85rem;
    font-weight: 400;
    opacity: 0.7;
}

/* === SIDEBAR BOX === */
.sidebar-box {
    background: var(--sidebar-bg);
    border-left: 5px solid var(--accent-gold);
    padding: 20px 24px;
    margin: 24px 0;
    border-radius: 0 6px 6px 0;
}

.sidebar-box .sidebar-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--accent-gold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}

.sidebar-box p {
    font-size: 0.9rem;
    margin-bottom: 6px;
    color: var(--text-body);
}

/* === NOTICE BOX === */
.notice-box {
    background: #fff8e6;
    border: 1px solid #f0d060;
    border-radius: 6px;
    padding: 18px 22px;
    margin: 22px 0;
    font-size: 0.88rem;
}

.notice-box strong {
    color: #856404;
}

/* === TWO COLUMN LAYOUT === */
.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    margin: 16px 0;
}

.two-col p {
    margin-bottom: 10px;
}

/* === STYLED TABLE === */
.styled-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 0.9rem;
}

.styled-table thead th {
    background: var(--bg-white);
    color: var(--primary);
    padding: 11px 14px;
    text-align: left;
    font-weight: 700;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 2px solid var(--primary);
}

.styled-table tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-light);
    vertical-align: top;
}

.styled-table tbody tr:nth-child(even) {
    background: #fafafa;
}

.styled-table .table-total td {
    font-weight: 700;
    border-top: 2px solid var(--primary);
    background: #f0faf4;
}

/* === FAQ ITEMS === */
.faq-item {
    padding: 16px 0;
    border-bottom: 1px solid var(--border-light);
}

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

.faq-item .faq-question {
    font-weight: 700;
    color: var(--primary);
    font-size: 0.97rem;
    margin-bottom: 6px;
}

.faq-item .faq-answer {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.6;
}

/* === STEP LIST === */
.step-list {
    list-style: none;
    margin: 22px 0;
    padding: 0;
    counter-reset: step-counter;
}

.step-list li {
    counter-increment: step-counter;
    padding: 14px 18px 14px 56px;
    position: relative;
    margin-bottom: 10px;
    background: #f8f9fa;
    border-radius: 6px;
    font-size: 0.93rem;
    border-left: 3px solid var(--primary);
}

.step-list li::before {
    content: counter(step-counter);
    position: absolute;
    left: 14px;
    top: 13px;
    background: var(--primary);
    color: #ffffff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
}

/* === INVEST / PLEDGE CTA === */
.invest-cta {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: #ffffff;
    padding: 36px;
    text-align: center;
    border-radius: 8px;
    margin: 28px 0;
}

.invest-cta h3 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 10px;
}

.invest-cta p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
}

.invest-cta .cta-gold {
    color: var(--accent-gold);
    font-size: 1.8rem;
    font-weight: 800;
    display: block;
    margin: 12px 0 6px;
}

/* === BACK COVER === */
.back-cover {
    aspect-ratio: 210 / 297;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    container-type: inline-size;
}

.back-cover-hero {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.back-cover-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.back-cover-overlay {
    position: relative;
    z-index: 2;
    background: rgba(25, 135, 84, 0.92);
    padding: 5% 6% 4.5%;
    color: #ffffff;
}

.back-cover-overlay h2 {
    font-size: clamp(1.4rem, 4cqw, 2rem);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 2cqw;
    line-height: 1.15;
    border: none;
}

.back-cover-overlay p {
    font-size: clamp(0.75rem, 1.8cqw, 0.9rem);
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 0.75cqw;
    line-height: 1.6;
}

.back-cover-overlay .back-small {
    font-size: clamp(0.65rem, 1.5cqw, 0.78rem);
    color: rgba(255, 255, 255, 0.55);
    margin-top: 2cqw;
}

.back-contact-table {
    width: auto;
}

.back-contact-table td {
    font-size: clamp(0.75rem, 1.8cqw, 0.9rem);
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    padding: 0.4cqw 0;
    vertical-align: middle;
}

.back-contact-table td:first-child {
    padding-right: 1.5cqw;
    white-space: nowrap;
}

/* === PRINT FILLER MARKER ===
   Elements with .print-filler are decorative layout accents added by the
   pdf-prospectus-layout skill to fill space and improve visual balance.
   They are not essential content. If they cause layout issues (overlaps,
   caption splits, bleeding into styled containers), they can be safely
   repositioned or removed without losing editorial content. */

/* === FLOAT PHOTO (on-screen) === */
.float-photo {
    float: right;
    width: 35%;
    margin: 4px 0 12px 16px;
    clear: right;
}
.float-photo.float-left {
    float: left;
    margin: 4px 16px 12px 0;
    clear: left;
}
.float-photo img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    display: block;
}
.float-photo .photo-caption {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-style: italic;
    margin-top: 4px;
    line-height: 1.3;
}

/* === SCREEN HELPERS === */
@media screen {
    .content-section + .content-section {
        border-top: 1px dashed #ddd;
    }

    .page-wrapper {
        padding-bottom: 0;
    }
}

/* === MOBILE RESPONSIVENESS === */
@media screen and (max-width: 768px) {
    /* Adjust document-header sticky position for smaller header */
    .document-header {
        top: 75px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 12px 16px;
    }

    /* Float photos: stack full-width on mobile instead of floating */
    .float-photo,
    .float-photo.float-left {
        float: none;
        width: 100%;
        margin: 12px 0;
        clear: both;
    }

    /* Two-column grid: stack to single column on mobile */
    .two-col {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Reduce content padding on mobile */
    .section-heading {
        padding: 0 20px;
    }

    .content-body {
        padding: 0 20px 28px;
    }

    .toc-section {
        padding: 28px 20px;
    }

    /* Key figures: single column on small screens */
    .key-figures-grid {
        grid-template-columns: 1fr;
    }

    /* SWOT grid: single column on small screens */
    .swot-grid {
        grid-template-columns: 1fr;
    }

    /* Profile cards: ensure they don't overflow */
    .profile-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .profile-name-line {
        flex-direction: column;
        align-items: center;
    }

    /* Stat callout: scale down slightly */
    .stat-callout .stat-number {
        font-size: 3rem;
    }

    /* Document title: scale down */
    .document-title {
        font-size: 1.4rem;
    }

    /* Tables: allow horizontal scroll */
    .styled-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Pull quote: reduce padding */
    .pull-quote {
        padding: 20px 24px;
        font-size: 1.05rem;
    }

    /* Invest CTA: reduce padding */
    .invest-cta {
        padding: 24px 20px;
    }
}


/* === SWOT GRID === */
.swot-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 24px 0;
}

.swot-card {
    padding: 20px 18px;
    border-radius: 8px;
    color: #ffffff;
}

.swot-card.strengths { background: var(--strength-green); }
.swot-card.weaknesses { background: var(--weakness-amber); }
.swot-card.opportunities { background: var(--opportunity-blue); }
.swot-card.threats { background: var(--threat-red); }

.swot-card h4 {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
    color: #ffffff;
}

.swot-card ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.swot-card li {
    font-size: 0.85rem;
    padding: 3px 0 3px 14px;
    position: relative;
    line-height: 1.45;
}

.swot-card li::before {
    content: "\2022";
    position: absolute;
    left: 0;
    opacity: 0.55;
}

/* === CHOICE GROUP === */
.choice-group {
    margin: 24px 0;
}

.choice-option {
    border: 2px solid var(--primary);
    border-radius: 8px;
    padding: 18px 22px;
    margin-bottom: 0;
    background: var(--bg-white);
}

.choice-option h4 {
    color: var(--primary);
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 6px 0;
}

.choice-option p {
    font-size: 0.9rem;
    margin-bottom: 0;
}

.choice-option.alternative {
    border-style: dotted;
    border-color: var(--text-muted);
    background: #fafafa;
}

.choice-option.alternative h4 {
    color: var(--text-muted);
}

.choice-or-label {
    text-align: center;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--weakness-amber);
    padding: 8px 0;
    letter-spacing: 0.06em;
}

/* === SPREADSHEET TOOLTIP === */
.spreadsheet-tooltip {
    position: relative;
    border-bottom: 1px dotted var(--accent-gold);
    cursor: help;
}

.spreadsheet-tooltip .spreadsheet-tooltip-popup {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 240px;
    background: #fffcf0;
    border: 1px solid var(--border-light);
    border-left: 3px solid var(--accent-gold);
    border-radius: 6px;
    padding: 10px 14px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--text-body);
    z-index: 100;
    font-weight: 400;
    text-align: left;
    cursor: default;
    margin-bottom: 6px;
    white-space: normal;
}

.spreadsheet-tooltip:hover .spreadsheet-tooltip-popup {
    display: block;
}

/* === REFERENCE TABLE === */
.reference-table {
    font-size: 0.78rem;
    background: #fffde6;
}

.reference-table thead th {
    background: var(--accent-gold);
    color: #fff;
    font-size: 0.72rem;
}

.reference-table tbody td {
    padding: 5px 10px;
    font-size: 0.75rem;
}

.reference-table tbody td:first-child,
.reference-table tbody td:nth-child(3) {
    font-family: "Consolas", "Monaco", "Courier New", monospace;
    font-size: 0.72rem;
}

/* === ANNOTATION SYSTEM === */
.annotation-marker {
    position: relative;
    height: 0;
    overflow: visible;
    pointer-events: none;
}

.annotation-marker .annotation-icon {
    position: absolute;
    right: -72px;
    top: 2px;
    pointer-events: auto;
    width: 20px;
    height: 20px;
    background: var(--primary);
    color: #fff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    z-index: 20;
    line-height: 1;
    font-style: normal;
    opacity: 0.65;
    transition: opacity 0.2s;
}

.annotation-marker .annotation-icon:hover {
    opacity: 1;
}

.annotation-marker .annotation-icon:hover .annotation-popup {
    display: block;
}

.annotation-popup {
    display: none;
    position: absolute;
    left: 28px;
    top: -8px;
    width: 300px;
    background: #fff;
    border: 1px solid var(--border-light);
    border-left: 3px solid var(--primary);
    border-radius: 6px;
    padding: 14px 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--text-body);
    z-index: 100;
    font-weight: 400;
    text-align: left;
    cursor: default;
    pointer-events: auto;
}

.annotation-popup::after {
    content: '';
    position: absolute;
    left: -12px;
    top: 0;
    width: 12px;
    height: 100%;
}

.annotation-badge {
    display: inline-block;
    background: var(--primary);
    color: #fff;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 8px;
}

.annotation-line {
    display: block;
    margin-bottom: 6px;
}

.annotation-line:last-child {
    margin-bottom: 0;
}

.annotation-popup strong {
    color: var(--text-dark);
    font-size: 0.78rem;
}

/* === ACTION ICON SYSTEM === */
.action-marker {
    position: relative;
    height: 0;
    overflow: visible;
    pointer-events: none;
}

.action-marker .action-icon {
    position: absolute;
    right: -72px;
    top: 2px;
    pointer-events: auto;
    width: 20px;
    height: 20px;
    background: var(--weakness-amber);
    color: #fff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    z-index: 20;
    line-height: 1;
    font-style: normal;
    opacity: 0.75;
    transition: opacity 0.2s;
}

.action-marker .action-icon:hover {
    opacity: 1;
}

.action-marker .action-icon:hover .action-popup {
    display: block;
}

.action-popup {
    display: none;
    position: absolute;
    left: 28px;
    top: -8px;
    width: 300px;
    background: #fff;
    border: 1px solid var(--border-light);
    border-left: 3px solid var(--weakness-amber);
    border-radius: 6px;
    padding: 14px 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--text-body);
    z-index: 100;
    font-weight: 400;
    text-align: left;
    cursor: default;
    pointer-events: auto;
}

.action-popup::after {
    content: '';
    position: absolute;
    left: -12px;
    top: 0;
    width: 12px;
    height: 100%;
}

.action-number {
    display: inline-block;
    background: var(--weakness-amber);
    color: #fff;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 8px;
}

/* Side-by-side: when action icon follows annotation icon */
.annotation-marker + .action-marker .action-icon {
    right: -94px;
}

/* Markers directly in page-wrapper (no content padding, e.g. before TOC) */
.page-wrapper > .annotation-marker .annotation-icon,
.page-wrapper > .action-marker .action-icon {
    right: -24px;
}
.page-wrapper > .annotation-marker + .action-marker .action-icon {
    right: -46px;
}

/* Markers inside extra-padded containers (e.g. pledge-type-card, sidebar-box) */
.pledge-type-card .annotation-marker .annotation-icon,
.pledge-type-card .action-marker .action-icon,
.sidebar-box .annotation-marker .annotation-icon,
.sidebar-box .action-marker .action-icon {
    right: -96px;
}
.pledge-type-card .annotation-marker + .action-marker .action-icon,
.sidebar-box .annotation-marker + .action-marker .action-icon {
    right: -118px;
}

/* Hide annotation/action icons on small screens where there's no margin */
@media screen and (max-width: 900px) {
    .annotation-marker,
    .action-marker {
        display: none;
    }
}

/* === COMMITTEE PROFILE CARDS === */
.profile-card {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 14px;
    background: var(--bg-white);
}

.profile-photo {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--bg-light);
    border: 2px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 1.6rem;
    overflow: hidden;
}

.profile-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-info {
    flex: 1;
    min-width: 0;
}

.profile-name-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 4px;
}

.profile-name {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-dark);
    margin: 0;
}

.profile-role {
    font-size: 0.82rem;
    color: var(--primary);
    font-weight: 600;
    margin: 0;
}

.profile-bio {
    font-size: 0.88rem;
    color: var(--text-body);
    margin: 0;
    line-height: 1.5;
    font-style: italic;
}

/* === PRINT: PROFILE CARDS (two-column grid) ===
   Must appear after the general .profile-card styles above
   so the print overrides take precedence in the cascade. */
@media print {
    .profile-cards-wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px 14px;
    }

    .profile-card {
        break-inside: avoid;
        display: block;
        text-align: left;
        padding: 10px 6px;
        margin-bottom: 0;
        border: none;
        border-bottom: 1px solid #e0e0e0;
        border-radius: 0;
        overflow: hidden;
        gap: 0;
    }

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

    /* Unwrap .profile-info so photo, name, and bio share the same flow context */
    .profile-info {
        display: contents;
    }

    .profile-photo {
        width: 48px;
        height: 48px;
        font-size: 18px;
        float: left;
        margin: 0 8px 4px 0;
        border: 1px solid var(--border-light);
    }

    .profile-name-line {
        display: block;
        text-align: left;
        margin-bottom: 1px;
    }

    .profile-name {
        font-size: 8pt;
        display: inline;
        margin: 0;
    }

    .profile-role {
        font-size: 7pt;
        display: inline;
        float: none;
        margin: 0;
    }

    .profile-role::before {
        content: " - ";
    }

    .profile-bio {
        font-size: 7.5pt;
        line-height: 1.4;
        margin: 3px 0 0 0;
        text-align: left;
        clear: left;
    }

    .profile-bio:empty {
        display: none;
    }
}

/* === PRINT: HIDE INTERACTIVE ELEMENTS === */
@media print {
    .annotation-marker,
    .action-marker {
        display: none !important;
    }
    .spreadsheet-tooltip {
        border-bottom: none;
        cursor: default;
    }
    .spreadsheet-tooltip .spreadsheet-tooltip-popup {
        display: none !important;
    }
    .reference-table {
        display: none !important;
    }
    .reference-section {
        display: none !important;
    }
}

/* === DOWNLOAD AS PDF BUTTON === */
.download-btn {
    display: inline-block;
    background: var(--primary);
    color: #fff;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
    flex-shrink: 0;
}

.download-btn:hover {
    background: var(--primary-dark);
    color: #fff;
}

/* === UNVERIFIED/ESTIMATED FACTS === */
.unverified {
    background-color: #ffeb3b;
    border-bottom: 2px dashed #e89a0c;
    padding: 1px 4px;
    border-radius: 2px;
}

@media print {
    .unverified {
        background-color: #fff3cd !important;
        border-bottom: 2px dashed #e89a0c !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}