/* =============================================================================
   CYNAPSE -- Cyber Decision Engineering Framework (BOK)
   =============================================================================
   Presentation layer for the framework cover page and chapter pages. Built on
   the same cw-* tokens as the rest of the site (cynapse_worldclass.css), but
   deliberately reads as a reference/standards document rather than a blog or
   feed: fixed chapter numbering, a persistent chapter-navigator sidebar, a
   formal cover/citation block, and a single, calm reading column -- closer to
   how a documentation site (or a real standard like IEC 62443) presents
   itself than how Community/Knowledge Center content does.

   Used by: framework_home.html, framework_volume_viewer.html
   ========================================================================== */

.cw-fw-cover {
    padding: 54px 0 46px;
    color: #fff;
    background:
        linear-gradient(120deg, rgba(3, 25, 19, .98), rgba(21, 87, 67, .94)),
        radial-gradient(circle at 88% 10%, rgba(255, 255, 255, .07), transparent 30%);
}

.cw-fw-cover__inner { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }

.cw-fw-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .85);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.cw-fw-cover h1 {
    max-width: 900px;
    margin: 0;
    color: #fff;
    font-size: clamp(32px, 4.6vw, 54px);
    line-height: 1.12;
    font-weight: 800;
}

.cw-fw-cover p.cw-fw-lede {
    max-width: 740px;
    margin: 18px 0 0;
    color: rgba(255, 255, 255, .82);
    font-size: 16.5px;
    line-height: 1.85;
}

.cw-fw-cover__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin-top: 30px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .16);
}

.cw-fw-cover__meta div { display: grid; gap: 3px; }
.cw-fw-cover__meta span { font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.cw-fw-cover__meta strong { font-size: 15px; font-weight: 800; color: #fff; }

/* ---- Body layout: TOC list + citation/PDF sidebar ----------------------- */
.cw-fw-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 30px;
    align-items: start;
}

.cw-fw-toc { border-top: 1px solid var(--cw-line); }

.cw-fw-toc__item {
    display: flex;
    align-items: baseline;
    gap: 18px;
    padding: 22px 0;
    border-bottom: 1px solid var(--cw-line);
    text-decoration: none;
    color: inherit;
}

.cw-fw-toc__num {
    flex-shrink: 0;
    width: 44px;
    color: var(--cw-green);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .04em;
}

.cw-fw-toc__body h3 {
    margin: 0 0 6px;
    color: var(--cw-deep);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.35;
    transition: color .15s ease;
}

.cw-fw-toc__item:hover h3 { color: var(--cw-green); }

.cw-fw-toc__body p {
    margin: 0;
    color: var(--cw-muted);
    font-size: 13.5px;
    line-height: 1.7;
}

.cw-fw-toc__part {
    grid-column: 1 / -1;
    margin: 26px 0 4px;
    color: #7a9088;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

/* ---- Sidebar: citation card + PDF card ----------------------------------- */
.cw-fw-side { position: sticky; top: 110px; display: grid; gap: 16px; }
.cw-fw-side-card { padding: 20px; }

.cw-fw-side-card__eyebrow {
    color: #7a9088;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.cw-fw-cite {
    font-family: var(--cw-serif, Georgia, serif);
    font-size: 13px;
    line-height: 1.7;
    color: #33493f;
    background: var(--cw-paper);
    border-radius: 10px;
    padding: 12px 14px;
}

.cw-fw-side-card p.cw-fw-note {
    margin: 10px 0 0;
    color: var(--cw-muted);
    font-size: 12.5px;
    line-height: 1.6;
}

.cw-fw-pdf-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    border-radius: 10px;
    border: 1px dashed var(--cw-line);
    color: var(--cw-muted);
    background: var(--cw-paper);
    font-size: 13px;
    font-weight: 700;
    cursor: default;
}

/* ---- Chapter page: sticky chapter-navigator sidebar ---------------------- */
.cw-fw-chapter-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 30px;
    align-items: start;
}

.cw-fw-nav {
    position: sticky;
    top: 110px;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    padding-inline-end: 12px;
}

.cw-fw-nav__eyebrow {
    color: #7a9088;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.cw-fw-nav__item {
    display: flex;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--cw-muted);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
}

.cw-fw-nav__item:hover { background: var(--cw-paper); color: var(--cw-deep); }

.cw-fw-nav__item.is-active {
    background: var(--cw-paper);
    color: var(--cw-deep);
    border-inline-start: 3px solid var(--cw-green);
    padding-inline-start: 7px;
}

.cw-fw-nav__item span:first-child { flex-shrink: 0; color: #9fb0a7; }

.cw-fw-chapter {
    padding: clamp(24px, 3.4vw, 44px);
}

.cw-fw-chapter__eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--cw-green);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.cw-fw-chapter h1 {
    margin: 0 0 16px;
    color: var(--cw-deep);
    font-size: clamp(26px, 3.4vw, 40px);
    line-height: 1.2;
    font-weight: 800;
}

.cw-fw-chapter__intro {
    color: #33493f;
    font-size: 17px;
    line-height: 1.85;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--cw-line);
    margin-bottom: 28px;
}

.cw-fw-chapter__body {
    color: #273f35;
    font-size: 17px;
    line-height: 1.9;
}

.cw-fw-chapter__body p { margin: 0 0 1.2rem; }
.cw-fw-chapter__body h2,
.cw-fw-chapter__body h3,
.cw-fw-chapter__body h4 {
    color: var(--cw-deep);
    line-height: 1.28;
    margin: 1.9rem 0 .9rem;
    font-weight: 800;
}
.cw-fw-chapter__body ul,
.cw-fw-chapter__body ol { margin: .9rem 0 1.3rem; padding-inline-start: 1.4rem; }
.cw-fw-chapter__body li { margin: .32rem 0; }
.cw-fw-chapter__body blockquote {
    border-inline-start: 4px solid var(--cw-green);
    margin: 1.5rem 0;
    padding: .9rem 1.1rem;
    background: var(--cw-paper);
    color: #33493f;
    border-radius: 12px;
}

.cw-fw-gate {
    text-align: center;
    padding: clamp(30px, 4.5vw, 50px) clamp(18px, 3.6vw, 36px);
    border: 1px dashed rgba(21, 87, 67, .32);
    border-radius: 16px;
    background: var(--cw-paper);
}

.cw-fw-gate i.fa-lock {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(21, 87, 67, .10);
    color: var(--cw-green);
    font-size: 19px;
    margin-bottom: 16px;
}

.cw-fw-gate h2 { margin: 0 0 10px; font-size: 22px; font-weight: 800; color: var(--cw-deep); }
.cw-fw-gate p { max-width: 540px; margin: 0 auto; color: var(--cw-muted); font-size: 14px; line-height: 1.75; }
.cw-fw-gate__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 22px; }

.cw-fw-pager {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 34px;
    padding-top: 24px;
    border-top: 1px solid var(--cw-line);
}

.cw-fw-pager a {
    display: grid;
    gap: 4px;
    padding: 16px;
    border: 1px solid var(--cw-line);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
}

.cw-fw-pager a:hover { border-color: var(--cw-green); }
.cw-fw-pager span { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #7f9389; }
.cw-fw-pager strong { font-size: 14px; color: var(--cw-deep); font-weight: 800; }
.cw-fw-pager .cw-fw-pager--next { text-align: end; }

/* ---- Responsive ------------------------------------------------------------ */
@media (max-width: 980px) {
    .cw-fw-layout { grid-template-columns: 1fr; }
    .cw-fw-side { position: static; }
    .cw-fw-chapter-layout { grid-template-columns: 1fr; }
    .cw-fw-nav { position: static; max-height: none; }
}

@media (max-width: 680px) {
    .cw-fw-pager { grid-template-columns: 1fr; }
    .cw-fw-chapter__body { font-size: 15.5px; }
}

/* =============================================================================
   WAVE 55/56 -- CDE Framework Volume Library (real, full-length PDF Series)
   Used by: framework_home.html (unified Table of Contents), framework_volume_viewer.html
   Wave 56 note: the original card-grid listing (a separate /framework/library
   page) was replaced per product decision -- volumes now appear as rows in
   the SAME .cw-fw-toc list the old placeholder chapters used, directly on
   framework_home.html, so there is one page/one list instead of a page plus
   a separate catalog. Only the "coming soon" row modifier below is new;
   .cw-fw-toc / .cw-fw-toc__item themselves are the original, untouched rules
   further up this file.
   ========================================================================== */

.cw-fw-toc__item.is-coming-soon {
    opacity: .55;
    cursor: default;
}

.cw-fw-toc__item.is-coming-soon:hover h3 { color: var(--cw-deep); }

/* ---- Volume viewer: toolbar + canvas stage ------------------------------- */
.cw-fw-vol-viewer { margin-top: 10px; }

.cw-fw-vol-viewer__toolbar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    border: 1px solid var(--cw-line);
    border-radius: 12px 12px 0 0;
    background: var(--cw-paper);
    flex-wrap: wrap;
}

.cw-fw-vol-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--cw-line);
    background: #fff;
    color: var(--cw-deep);
    cursor: pointer;
}

.cw-fw-vol-nav-btn:disabled { opacity: .4; cursor: default; }
.cw-fw-vol-nav-btn:not(:disabled):hover { border-color: var(--cw-green); color: var(--cw-green); }

.cw-fw-vol-viewer__page-indicator {
    font-size: 13px;
    font-weight: 800;
    color: var(--cw-deep);
    min-width: 70px;
    text-align: center;
}

.cw-fw-vol-viewer__badge {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--cw-green);
}

/* ---- Wave 58: zoom controls ------------------------------------------- */
.cw-fw-vol-viewer__divider {
    width: 1px;
    height: 22px;
    background: var(--cw-line);
}

.cw-fw-vol-zoom-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cw-fw-vol-viewer__zoom-indicator {
    font-size: 12px;
    font-weight: 800;
    color: var(--cw-deep);
    min-width: 42px;
    text-align: center;
}

/* ---- Wave 59: page-jump input, search bar, thumbnail sidebar ---------- */
.cw-fw-vol-viewer__jump { display: inline-flex; align-items: center; }
.cw-fw-vol-jump-input {
    width: 52px;
    height: 30px;
    border: 1px solid var(--cw-line);
    border-radius: 8px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--cw-deep);
    background: #fff;
    /* Wave 59 fix: the page-viewer's global ArrowLeft/ArrowRight page-nav
       keydown listener now explicitly skips INPUT/TEXTAREA targets (see
       cynapse_framework_library.js), so the browser's native up/down
       steppers and left/right cursor movement in this field work normally
       instead of also flipping pages underneath it. */
}
.cw-fw-vol-jump-input:focus { outline: 2px solid var(--cw-green); outline-offset: 1px; }

.cw-fw-vol-viewer__searchbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-left: 1px solid var(--cw-line);
    border-right: 1px solid var(--cw-line);
    background: #eef2ee;
    font-size: 13px;
    color: var(--cw-deep);
}
.cw-fw-vol-viewer__searchbar[hidden] { display: none; }
.cw-fw-vol-search-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 30px;
    border: 1px solid var(--cw-line);
    border-radius: 8px;
    padding: 0 10px;
    font-size: 13px;
    background: #fff;
}
.cw-fw-vol-search-count {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--cw-muted);
    min-width: 78px;
    text-align: center;
    white-space: nowrap;
}
.cw-fw-vol-nav-btn--sm { width: 28px; height: 28px; }

.cw-fw-vol-viewer__body {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--cw-line);
    border-top: none;
    border-radius: 0 0 12px 12px;
    overflow: hidden;
}

.cw-fw-vol-thumbs {
    flex: 0 0 128px;
    width: 128px;
    max-height: 82vh;
    overflow-y: auto;
    scrollbar-gutter: stable;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #eef2ee;
    border-right: 1px solid var(--cw-line);
}
.cw-fw-vol-thumbs[hidden] { display: none; }

.cw-fw-vol-thumb {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border: 2px solid transparent;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
}
.cw-fw-vol-thumb:hover { border-color: var(--cw-line); }
.cw-fw-vol-thumb.is-active { border-color: var(--cw-green); }
.cw-fw-vol-thumb canvas {
    width: 100%;
    height: auto;
    display: block;
    box-shadow: 0 2px 8px rgba(15, 42, 32, .15);
    background: #fdfdfd;
}
.cw-fw-vol-thumb__num {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--cw-muted);
}
.cw-fw-vol-thumb__placeholder {
    width: 100%;
    aspect-ratio: 3 / 4;
    background: repeating-linear-gradient(45deg, #e4e8e3, #e4e8e3 6px, #eef2ee 6px, #eef2ee 12px);
    border-radius: 4px;
}

.cw-fw-vol-viewer__stage {
    flex: 1 1 auto;
    position: relative;
    display: flex;
    justify-content: center;
    padding: 22px;
    background: #f3f5f2;
    min-height: 480px;
    max-height: 82vh;
    /* Wave 59 fix: was `overflow: auto`, which only reserves scrollbar width
       AFTER a tall page's canvas first overflows -- so the very first render
       (before any scrollbar exists) computed its fit-to-width scale against
       the full, wider clientWidth, then a scrollbar appeared and visually
       shrank that same canvas via max-width:100%, looking soft/"compressed"
       vs Wave 57. overflow-y:scroll always reserves that space up front so
       clientWidth (and therefore the render scale) is correct and stable
       from the very first paint; scrollbar-gutter:stable is the modern
       equivalent for browsers that support it. */
    overflow-y: scroll;
    overflow-x: auto;
    scrollbar-gutter: stable;
    touch-action: pan-x pan-y;
    user-select: none;
    -webkit-user-select: none;
}

.cw-fw-vol-viewer__stage canvas {
    max-width: 100%;
    box-shadow: 0 10px 30px rgba(15, 42, 32, .18);
    border-radius: 4px;
    background: #fff;
}

/* When zoomed past fit-width, switch off centering (flex-centered overflow
   traps the start-side content out of scroll reach in most browsers) and let
   the canvas render at its true pixel size so overflow/scroll works normally. */
.cw-fw-vol-viewer__stage.is-zoomed {
    justify-content: flex-start;
    align-items: flex-start;
    cursor: grab;
}
.cw-fw-vol-viewer__stage.is-zoomed canvas { max-width: none; }
.cw-fw-vol-viewer__stage.is-zoomed.is-panning { cursor: grabbing; }

.cw-fw-vol-viewer__loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--cw-muted);
    font-size: 13.5px;
    font-weight: 700;
    background: rgba(243, 245, 242, .85);
}

.cw-fw-vol-viewer__footnote {
    margin: 10px 2px 0;
    color: var(--cw-muted);
    font-size: 12px;
    line-height: 1.6;
}

@media (max-width: 680px) {
    .cw-fw-vol-grid { grid-template-columns: 1fr; }
    .cw-fw-vol-viewer__stage { min-height: 340px; padding: 12px; }
    .cw-fw-vol-thumbs { flex-basis: 92px; width: 92px; padding: 8px; gap: 6px; }
    .cw-fw-vol-viewer__searchbar { flex-wrap: wrap; }
    .cw-fw-vol-search-count { min-width: 0; }
}