/* ============================================================================
   report.css — LOCKED shared design system for Integral BioStrategy
   strategy-report pages. Served at /strategy-reports/_assets/report.css and
   linked (absolute path) by every report page + the template generator.

   Source of truth for ALL report chrome and content components. To change how
   reports look, change THIS file once — never re-inline per page (that drift is
   what caused the rail/subscribe overlap bug). Brand colors are inherited from
   the global /styles.css :root; this file never redefines them.

   Canonical baseline = the Founder report (when-biology-crosses-categories).
   The "extended components" block at the end adds optional, reusable classes
   (tables, callout, source drawers, takeaways) that the canonical page does not
   use — so adding them here cannot change the canonical page's rendering.
   ========================================================================== */

/* ---- Sections + reading column -------------------------------------------- */
.section { padding: 3.0rem 0; }
.section h2 { font-size: 1.8rem; line-height: 1.25; margin: 0 0 1rem; color: var(--navy); }
.lead-col { max-width: 720px; margin: 0 auto; }
.lead-col p { margin: 0 0 1rem; line-height: 1.7; }
.report-author { font-size: 0.92rem; color: var(--slate); margin-top: 0.35rem; }

/* ---- Source markers: bracketed editorial blue (NOT legacy coral) ---------- */
.enref { font-size: 0.7em; font-weight: 600; line-height: 0; }
.enref a { text-decoration: none; color: var(--editorial-blue, #2F6FAE); }
.enref a::before { content: "["; }
.enref a::after { content: "]"; }

/* ---- Trial / program names: bold + editorial blue evidence anchors -------- */
.trial-ref { color: var(--editorial-blue, #2F6FAE); font-weight: 700; text-decoration: none; }

/* ---- Narrative In brief (canonical convention) ---------------------------- */
.in-brief { max-width: 720px; margin: 2.2rem auto 0; padding: 1.4rem 1.6rem;
    background: var(--editorial-blue-wash, #E8F1FA); border-left: 3px solid var(--editorial-blue, #2F6FAE); border-radius: 4px; }
.in-brief .ib-title { font-size: 0.78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--editorial-blue, #2F6FAE); font-weight: 700; margin: 0 0 0.55rem; }
.in-brief p { margin: 0; line-height: 1.65; }

/* ---- Figures: full-width on desktop; horizontal scroll on narrow screens -- */
.report-figure { max-width: 1040px; margin: 2.2rem auto; }
.rfig-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--cream-dark); border-radius: 6px; background: #fff; }
.rfig-scroll svg { display: block; width: 100%; height: auto; min-width: 680px; }
.report-figure.scorecard .rfig-scroll svg { min-width: 900px; }
.fig-srcnote { font-size: 0.84rem; color: var(--slate); font-style: italic; margin: 0.5rem auto 0; max-width: 720px; }

/* ---- Lists + references --------------------------------------------------- */
.plain-list { max-width: 720px; margin: 1.1rem auto; padding-left: 1.2rem; }
.plain-list li { margin: 0.55rem 0; line-height: 1.6; }
.ref-list { max-width: 720px; margin: 1rem auto 0; }
.ref-list .ref { font-size: 0.9rem; line-height: 1.5; margin: 0.5rem 0; padding-left: 2.2em; text-indent: -2.2em; }
.ref-list .rn { font-weight: 700; color: var(--editorial-blue, #2F6FAE); }
.report-cta { max-width: 720px; margin: 0 auto; text-align: center; }

/* ---- Article utility band (author / metadata / actions) ------------------- */
.article-utility { background: var(--cream); border-top: 1px solid rgba(47,111,174,0.22); border-bottom: 1px solid rgba(47,111,174,0.22); }
.au-inner { max-width: 720px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.85rem 1.6rem; padding: 1.05rem 0; }
.au-metas { display: flex; flex-wrap: wrap; align-items: center; }
.au-meta { font-size: 0.68rem; letter-spacing: .11em; text-transform: uppercase; color: var(--slate); font-weight: 600; white-space: nowrap; }
.au-meta + .au-meta { margin-left: 0.95rem; padding-left: 0.95rem; border-left: 1px solid rgba(47,111,174,0.28); }
.au-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.au-btn { display: inline-flex; align-items: center; gap: 0.45rem; font: inherit; font-size: 0.71rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; line-height: 1; cursor: pointer; padding: 0.55rem 0.95rem; border-radius: 999px; border: 1px solid rgba(47,111,174,0.32); background: #fff; color: var(--navy); text-decoration: none; transition: border-color .15s ease, color .15s ease, background-color .15s ease; }
.au-btn:hover { border-color: var(--editorial-blue, #2F6FAE); color: var(--editorial-blue, #2F6FAE); background: var(--editorial-blue-wash, #E8F1FA); }
.au-btn--primary { border-color: var(--editorial-blue, #2F6FAE); background: var(--editorial-blue, #2F6FAE); color: #fff; }
.au-btn--primary:hover { background: #27608f; border-color: #27608f; color: #fff; }
.au-left { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; }
.au-byline { font-size: 0.9rem; font-weight: 700; color: var(--navy); }
.report-disclaimer { max-width: 720px; margin: 1rem auto 0; font-size: 0.82rem; line-height: 1.5; color: var(--slate); }

/* ---- Reading progress bar — styled globally in styles.css (one source: --progress-fill).
   Do NOT redefine the fill here; report.css loads after styles.css and would override the
   metallic gradient (this is exactly what caused the reports' bar to drift). ---- */

/* ---- Contents drawer (mobile/tablet) -------------------------------------- */
.report-toc { max-width: 720px; margin: 0 auto; border-top: 1px solid rgba(47,111,174,0.16); }
.report-toc summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.55rem; padding: 0.8rem 0; font-size: 0.7rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--editorial-blue, #2F6FAE); }
.report-toc summary::-webkit-details-marker { display: none; }
.report-toc summary .toc-mark { margin-left: auto; font-size: 1.05rem; line-height: 1; }
.report-toc[open] summary .toc-mark::after { content: "\2013"; }
.report-toc:not([open]) summary .toc-mark::after { content: "+"; }
.report-toc ol { columns: 2; column-gap: 1.8rem; margin: 0.4rem 0 1rem; padding-left: 1.1rem; }
.report-toc li { margin: 0.34rem 0; font-size: 0.84rem; line-height: 1.4; break-inside: avoid; }
@media (max-width: 768px) { .report-toc ol { columns: 1; } }

/* ---- Desktop contents rail (drawer is the mobile/tablet fallback) --------- */
.report-rail { display: none; }
@media (min-width: 1300px) {
    .report-rail { display: block; position: fixed; top: 132px; left: clamp(1.5rem, 3vw, 3rem); width: 188px; max-height: calc(100vh - 200px); overflow-y: auto; z-index: 50; padding: 0.95rem 1rem 1.05rem; background: rgba(246,249,252,0.95); border: 1px solid rgba(47,111,174,0.16); border-left: 2px solid rgba(47,111,174,0.45); border-radius: 10px; box-shadow: 0 2px 16px rgba(12,25,41,0.05); opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .3s ease, transform .3s ease; }
    .report-rail.is-visible { opacity: 1; transform: none; pointer-events: auto; }
    .report-rail .rail-title { font-size: 0.6rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--editorial-blue, #2F6FAE); margin: 0 0 0.7rem; padding-left: 0.55rem; }
    .report-rail ol { list-style: none; margin: 0; padding: 0; }
    .report-rail a { display: block; padding: 0.3rem 0.55rem; border-left: 2px solid transparent; margin-left: -1px; font-size: 0.77rem; line-height: 1.3; color: var(--slate); text-decoration: none; transition: color .15s ease, border-color .15s ease, background-color .15s ease; }
    .report-rail a:hover { color: var(--editorial-blue, #2F6FAE); border-left-color: var(--editorial-blue, #2F6FAE); background: rgba(47,111,174,0.06); }
    .report-rail a.is-active { color: var(--editorial-blue, #2F6FAE); font-weight: 600; border-left-color: var(--editorial-blue, #2F6FAE); background: rgba(47,111,174,0.08); }
    .report-toc { display: none; }
}
@media (prefers-reduced-motion: reduce) { .report-rail, .report-rail a { transition: none; } .report-rail { transform: none; } }
@media print { .reading-progress, .article-utility, .report-rail { display: none; } }

/* ---- Figure expand / lightbox --------------------------------------------- */
.report-figure { position: relative; }
.fig-expand { position: absolute; top: 8px; right: 8px; z-index: 2; display: inline-flex; align-items: center; gap: 0.35rem; font: inherit; font-size: 0.62rem; letter-spacing: .07em; text-transform: uppercase; font-weight: 700; color: var(--editorial-blue, #2F6FAE); background: #fff; border: 1px solid rgba(47,111,174,0.32); border-radius: 999px; padding: 0.3rem 0.6rem; cursor: pointer; opacity: 1; transition: opacity .15s ease, background-color .15s ease, color .15s ease; }
.report-figure:hover .fig-expand, .fig-expand:focus-visible { opacity: 1; }
.fig-expand:hover { background: var(--editorial-blue, #2F6FAE); color: #fff; }
.report-figure .rfig-scroll { cursor: zoom-in; }
.fig-lightbox { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 2vh 2vw; background: rgba(12,25,41,0.80); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.fig-lightbox.is-open { display: flex; }
.fig-lightbox__surface { position: relative; background: var(--surface, #fff); border: 1px solid var(--cream-dark, #DCE6F0); border-top: 3px solid var(--editorial-blue, #2F6FAE); border-radius: 8px; box-shadow: 0 24px 60px rgba(12,25,41,0.45); width: min(96vw, 1400px); max-width: 96vw; max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; }
.fig-lightbox__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.5rem 0.6rem 0.5rem 1rem; border-bottom: 1px solid var(--cream-dark, #DCE6F0); background: var(--cream, #F6F9FC); flex: 0 0 auto; }
.fig-lightbox__label { font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.66rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--editorial-blue, #2F6FAE); }
.fig-lightbox__close { font: inherit; font-size: 1.2rem; line-height: 1; cursor: pointer; color: var(--navy, #0C1929); background: #fff; border: 1px solid rgba(47,111,174,0.32); border-radius: 999px; width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; }
.fig-lightbox__close:hover { background: var(--editorial-blue, #2F6FAE); color: #fff; border-color: var(--editorial-blue, #2F6FAE); }
.fig-lightbox__scroll { flex: 1 1 auto; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; padding: 16px; }
.fig-lightbox__scroll svg { display: block; width: 100%; height: auto; min-width: 1100px; max-width: none; }
.fig-lightbox--scorecard .fig-lightbox__scroll svg { min-width: 1320px; }
@media print { .fig-expand, .fig-lightbox { display: none !important; } }

/* ---- Premium editorial hero (LOCKED — see CLAUDE.md "Report hero system").
   A real <img> layer (object-fit:cover) stays bright and full-bleed; a LOCALIZED
   left gradient sits only behind the title; the image is clipped inside the hero
   (overflow:hidden) and never bleeds into the body. No fixed/sticky/pinned or
   background-attachment behavior. Do NOT alter without explicit approval. ---- */
.page-hero { position: relative; overflow: hidden; background-color: var(--navy); isolation: isolate; }
.page-hero .hero-bg {
    position: absolute; inset: 0; z-index: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center center;
    display: block;
}
.page-hero .hero-shade {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg,
        rgba(8,18,40,0.90) 0%,
        rgba(8,18,40,0.74) 24%,
        rgba(8,18,40,0.34) 44%,
        rgba(8,18,40,0.00) 60%);
}
.page-hero > .container { position: relative; z-index: 2; }
.page-hero .hero-copy { max-width: 640px; margin: 0; }
@media (min-width: 769px) {
    .page-hero { min-height: 72vh; padding-top: 10rem; padding-bottom: 4.5rem; }
}
@media (max-width: 768px) {
    .page-hero { min-height: 60vh; }
    .page-hero .hero-shade {
        background: linear-gradient(180deg,
            rgba(8,18,40,0.82) 0%,
            rgba(8,18,40,0.58) 45%,
            rgba(8,18,40,0.80) 100%);
    }
}

/* ============================================================================
   EXTENDED, OPTIONAL COMPONENTS — reusable classes for future reports. The
   canonical (Founder) page does not use any of these selectors, so they cannot
   change its rendering; they are here so the generator/new reports can use data
   tables, a callout, drawer-style sources, or a takeaways list without
   re-inventing CSS. Brand-aligned (editorial blue, cool hairlines).
   ========================================================================== */

/* Data tables */
.rpt-table-wrap { overflow-x: auto; margin: 1.5rem 0 0; border: 1px solid var(--cream-dark, #DCE6F0); border-top: 2px solid var(--editorial-blue, #2F6FAE); border-radius: 8px; background: var(--surface, #fff); box-shadow: 0 1px 3px rgba(12,25,41,0.04); padding: 0.25rem 1rem; }
.rpt-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; min-width: 540px; }
.rpt-table th, .rpt-table td { border-bottom: 1px solid var(--cream-dark, #DCE6F0); padding: 0.55rem 0.8rem; text-align: left; vertical-align: top; }
.rpt-table th { font-weight: 600; color: var(--navy); border-bottom: 2px solid #C7D6E6; }
.rpt-table--trials th:first-child, .rpt-table--trials td:first-child { width: 32%; white-space: nowrap; }
@media (max-width: 768px) { .rpt-table--trials th:first-child, .rpt-table--trials td:first-child { white-space: normal; } }

/* (.callout retired 2026-06 — pull-quotes use the single global .pullquote component) */

/* Takeaways list (alias of plain-list styling) */
.takeaways-list { max-width: 720px; margin: 1.1rem auto; padding-left: 1.2rem; }
.takeaways-list li { margin: 0.55rem 0; line-height: 1.6; }

/* Source drawers (collapsible, categorized references) */
.sources details { border-bottom: 1px solid var(--cream-dark, #DCE6F0); }
.sources summary { cursor: pointer; padding: 0.85rem 0; font-weight: 600; color: var(--navy); list-style: none; }
.sources summary::-webkit-details-marker { display: none; }
.sources summary::after { content: "+"; float: right; color: var(--slate); font-weight: 400; }
.sources details[open] summary::after { content: "\2013"; }
.sources ol { margin: 0; padding: 0 0 1rem 2.4rem; }
.sources li { margin: 0.7rem 0; font-size: 0.9rem; line-height: 1.5; }
.sources li a { word-break: break-word; }
.src-tag { font-size: 0.85em; color: var(--slate); font-weight: 600; }
.src-tag::after { content: " \00b7 "; font-weight: 400; }
.src-note { color: var(--slate); }

/* Suggested-citation block (Integral BioStrategy Research) */
.cite-block { border: 1px solid var(--cream-dark, #DCE6F0); border-left: 3px solid var(--editorial-blue, #2F6FAE); border-radius: 6px; background: var(--surface, #fff); padding: 0.85rem 1.1rem; }
.cite-block .cite-k { display: block; font-size: 0.64rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--editorial-blue, #2F6FAE); margin-bottom: 0.35rem; }
.cite-block p { margin: 0; font-size: 0.84rem; line-height: 1.5; color: var(--ink, #233044); word-break: break-word; }
.cite-block .cite-doi { color: var(--slate); }

/* Integrated read (∫ synthesis box) — shared with the insights' gradient style. */
.integrated-read { display: flex; align-items: stretch; gap: 1.1rem; margin: 2.2rem 0; padding: 1.15rem 1.35rem; background: linear-gradient(180deg, var(--editorial-blue-wash, #E8F1FA) 0%, #FBFAF6 100%); border: 1px solid rgba(47,111,174,0.20); border-radius: 10px; box-shadow: 0 1px 12px rgba(47,111,174,0.06); }
.integrated-read .ir-mark { flex: 0 0 30px; align-self: stretch; background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 134'><text x='15' y='99' text-anchor='middle' font-size='104' fill='%232F6FAE' font-family='Cambria Math,Times New Roman,serif'>∫</text></svg>") no-repeat center / contain; filter: drop-shadow(0 0 5px rgba(47,111,174,0.35)); }
.integrated-read .ir-text { font-size: 1rem; line-height: 1.6; color: var(--ink, #233044); }
.integrated-read .ir-text > strong:first-child { color: var(--navy, #0C1929); font-family: 'Inter', system-ui, sans-serif; }

/* ============================================================================
   REPORT-1 COMPONENTS (Metabolism as Platform Medicine) — promoted from that
   page's inline <style>. ONLY selectors not already defined above and not part
   of the shared chrome (those live in global styles.css). Skipped as duplicates:
   .article-utility/.au-*, .report-toc*, .report-rail*, .in-brief*, .page-hero*,
   .footer-sub*, .section/.section h2, .lead-col, .enref*, .trial-ref, .callout,
   .rpt-table*, .sources*, .cite-block*, .plain-list*, .report-cta/.report-author/
   .report-disclaimer, the .fig-lightbox* and .fig-expand* lightbox. The page-level
   --lf-* recolors are omitted: global body already renders on --cream (#F6F9FC,
   == report-1's --lf-bg), and the figure caption refinements are inlined as hex
   below so this block is self-contained and changes nothing on the Founder report
   (which uses none of these selectors).
   ============================================================================ */

/* Sub-headings + section markers */
.section h3 { font-size: 1.2rem; margin: 1.8rem 0 0.4rem; color: var(--lf-heading, #0C1929); }
.section .eyebrow { color: var(--editorial-blue, #2F6FAE); font-size: 0.9rem;
    letter-spacing: 0.16em; font-weight: 700; margin-bottom: 1.2rem;
    display: inline-flex; align-items: center; gap: 0.7rem; }
.section .eyebrow::before { content: ""; width: 1.6rem; height: 2px;
    background: var(--editorial-blue, #2F6FAE); flex: 0 0 auto; }
main section[id] { scroll-margin-top: 88px; }

/* Legacy image-based figure (img figureN_blue.svg) + its framed card.
   Distinct from .report-figure (inline-SVG). Caption/title colors inlined
   (== report-1's --lf-muted #566378 / --lf-caption #5B6675). */
.figure { max-width: 720px; margin: 3rem auto 0.4rem; position: relative; }
.figure img { cursor: zoom-in; }
.fig-title { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #566378; margin-bottom: 0.9rem; }
.fig-caption { font-size: 0.9rem; color: #5B6675; margin-top: 0.9rem; font-style: italic; }
.figure--framed {
    background: var(--surface, #fff);
    border: 1px solid var(--cream-dark, #DCE6F0);
    border-top: 2px solid var(--editorial-blue, #2F6FAE);
    border-radius: 10px;
    padding: 1.5rem 1.6rem 1.3rem;
    box-shadow: 0 1px 3px rgba(12, 25, 41, 0.05);
    margin-bottom: 0.6rem;
}

/* Trial-name links (non-underlined) + in-practice lead-in */
.in-practice { color: var(--editorial-blue, #2F6FAE); }
a.trial-ref { text-decoration: none; border-bottom: none; }
a.trial-ref:hover { background: transparent; }

/* Stakeholder decision deck (presentation layer; canonical .md keeps the prose) */
.actor-deck { max-width: 720px; margin: 1.2rem auto 0; display: flex; flex-direction: column; gap: 0.6rem; }
.actor-card { display: flex; align-items: stretch; border: 1px solid var(--cream-dark, #DCE6F0);
    border-radius: 10px; background: var(--surface, #fff); overflow: hidden; box-shadow: 0 1px 2px rgba(12,25,41,0.05); }
.actor-icon { flex: 0 0 58px; display: flex; align-items: center; justify-content: center; background: var(--editorial-blue-wash, #E8F1FA); }
.actor-icon svg { width: 31px; height: 31px; }
.actor-body { flex: 1; padding: 0; display: flex; flex-direction: column; }
.actor-role { font-weight: 700; color: var(--navy, #0C1929); }
.actor-body p { margin: 0; line-height: 1.5; font-size: 0.9rem; color: var(--ink, #233044); }
.actor-body > p:not(.actor-move) { padding: 0.6rem 0.95rem 0.5rem; }
.actor-move { padding: 0.55rem 0.95rem; background: var(--editorial-blue-wash, #E8F1FA); border-top: 1px solid rgba(47,111,174,0.18); }
@media (max-width: 600px) {
    .actor-deck-card { flex-direction: column; }
    .actor-card { flex-direction: column; }
    .actor-icon { flex: 0 0 auto; border-bottom: 1px solid var(--cream-dark, #DCE6F0); padding: 0.55rem 0; }
}
/* NOTE: .companion-essay / .ce-* (report 1's footer cross-link cards) were UNSTYLED
   in the original (no rule in its inline <style> or in report.css) — left unstyled
   here too, to preserve parity. Flagged for a future styling pass if desired. */