/* publonpress.reader.css — the READER's stylesheet (moved out of class.PublonPressReader.js on 2026-09-07,
   covenant burn-down: tokens only, no CSS-in-JS). Loaded by reader.html and self-linked by the reader class
   (PublonPressReader.CSS_URL, resolved from its own script URL) so every host that mounts the reader gets it.
   Look-and-feel flows from the --ui-* tokens; the only literals left are the seven cover-gradient palettes,
   declared once here as --wbk-cover-* (a system theme is the sanctioned home for a palette, DevNotes NN8). */
:root, .wbk-frame, body.wbk-reader {   /* :root too — a block plugin can draw outside a reader frame (2026-09-07) */
    --wbk-accent:    var(--ui-primary);
    --wbk-accent-bg: var(--ui-primary-50);
    --wbk-bg:        var(--ui-gray-50);
    /* Palette literals — declared ONCE here, referenced everywhere below (NN8: a system theme owns its palette). */
    --wbk-assess:        #9C27B0;   /* assessment blocks (mcq/practice/quiz): the one hue the reader adds to the tokens */
    --wbk-assess-strong: #6A1B9A;
    --wbk-assess-bg:     #F3E5F5;
    --wbk-assess-border: #cbb8ee;
    --wbk-gallery-navy:  #14203c;
    --wbk-gallery-plum:  #5a3a86;
}
body.wbk-reader { margin: 0; }
body.wbk-reader #app { max-width: none; padding: 0; }   /* override the narrow-column rule */
.wbk-frame { display: flex; flex-direction: column; height: 100vh; background: var(--wbk-bg); }
/* Embedded mode — fills its container, no fixed viewport height. */
.wbk-frame-embedded { height: 100%; min-height: 540px; }
.wbk-frame-embedded .wbk-frame-body { flex: 1; min-height: 0; }
.wbk-main.wbk-main-embedded { padding: 0 28px 60px; overflow-y: visible; }   /* outranks .wbk-main's overflow-y:auto below: the host page scrolls, so the reading strip sticks to it */
.wbk-main-embedded .wbk-chapter-page { padding-top: 18px; }   /* the host page scrolls, not this pane, so the reading strip sticks to the page */
/* The reading strip — Title page · Contents · ← where you are → — pinned at the top of every page, both modes (12 Sep 2026).
   --wbk-topnav-top lets a host with a sticky header (the Library app) push the strip below it. */
.wbk-topnav { position: sticky; top: var(--wbk-topnav-top, 0); z-index: 3; display: flex; align-items: center; gap: 6px; margin: 0 0 22px; padding: 8px 0; background: var(--wbk-bg); border-bottom: 1px solid var(--ui-gray-200); font-size: 0.85rem; }
.wbk-topnav-link { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--ui-radius-md); color: var(--ui-gray-700); text-decoration: none; border: 1px solid transparent; }
.wbk-topnav-link:hover { color: var(--wbk-accent); background: var(--ui-white, #fff); border-color: var(--ui-gray-200); }
.wbk-topnav-on { color: var(--wbk-accent); font-weight: 600; }
.wbk-topnav-off { color: var(--ui-gray-300); cursor: default; }
.wbk-topnav-arrow { font-size: 1.05rem; padding: 3px 10px; }
.wbk-topnav-spacer { flex: 1; }
.wbk-topnav-sep { width: 1px; height: 18px; background: var(--ui-gray-200); margin: 0 4px; }
@media (max-width: 900px) { .wbk-topnav-mode-label { display: none; } }
.wbk-topnav-where { color: var(--ui-gray-500); font-variant-numeric: tabular-nums; white-space: nowrap; padding: 0 4px; }
@media (max-width: 640px) { .wbk-topnav { margin-top: 0; } .wbk-topnav-where { display: none; } }
.wbk-main-embedded .wbk-chapter-title { font-size: 1.7rem; }
.wbk-frame-header { display: flex; align-items: center; gap: 16px; padding: 10px 24px; background: var(--wbk-accent); color: var(--ui-white, #fff); flex-shrink: 0; }
.wbk-frame-brand { font-weight: 600; font-size: 0.95rem; color: var(--ui-white, #fff); text-decoration: none; }
.wbk-frame-brand:hover { opacity: 0.85; }
.wbk-frame-spacer { flex: 1; }
.wbk-frame-back { color: var(--ui-white, #fff); text-decoration: none; opacity: 0.9; font-size: 0.9rem; }
.wbk-frame-back:hover { opacity: 1; }
.wbk-frame-body { display: flex; flex: 1; min-height: 0; }
.wbk-toc { width: 320px; flex-shrink: 0; overflow-y: auto; padding: 0 14px 20px; background: var(--ui-white, #fff); border-right: 1px solid var(--ui-gray-200); }
.wbk-collbadge { display: flex; align-items: center; gap: 7px; padding: 8px 12px; margin: 0 0 14px 0; background: linear-gradient(180deg, var(--wbk-accent), var(--ui-primary-700, var(--ui-primary-700))); color: var(--ui-white, #fff); border-radius: var(--ui-radius-lg, 8px); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.01em; box-shadow: 0 2px 8px rgba(21,101,192,.25); }
.wbk-collbadge-n { margin-left: auto; font-size: 0.68rem; font-weight: 600; background: rgba(255,255,255,.22); padding: 2px 8px; border-radius: 999px; }
.wbk-serieshome { display: flex; align-items: center; gap: 10px; padding: 9px 12px; margin: 0 0 10px 0; background: linear-gradient(180deg, var(--wbk-accent), var(--ui-primary-700, var(--ui-primary-700))); color: var(--ui-white, #fff); border-radius: var(--ui-radius-lg, 8px); text-decoration: none; box-shadow: 0 2px 8px rgba(21,45,86,.22); transition: transform 120ms, box-shadow 120ms; }
.wbk-serieshome:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(21,45,86,.3); }
.wbk-serieshome > .fa-layer-group { font-size: 0.95rem; opacity: 0.9; }
.wbk-serieshome-body { display: flex; flex-direction: column; gap: 0; min-width: 0; flex: 1; }
.wbk-serieshome-label { font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; opacity: 0.8; }
.wbk-serieshome-title { font-size: 0.82rem; font-weight: 700; line-height: 1.25; var(--ui-white, #fff)-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wbk-serieshome-go { font-size: 0.75rem; opacity: 0.85; transition: transform 120ms; }
.wbk-serieshome:hover .wbk-serieshome-go { transform: translateX(3px); }
.wbk-series { padding: 10px 12px; margin: 0 0 14px 0; background: var(--ui-primary-50); border: 1px solid var(--ui-primary-100); border-radius: var(--ui-radius-lg, 8px); }
.wbk-series-label { font-size: 0.62rem; letter-spacing: 0.1em; color: var(--ui-gray-500); font-weight: 700; }
.wbk-series-title { font-size: 0.9rem; font-weight: 700; color: var(--ui-gray-800); margin: 2px 0 8px 0; line-height: 1.2; }
.wbk-series-pills { display: flex; flex-wrap: wrap; gap: 5px; }
.wbk-vol-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; padding: 3px 9px; font-size: 0.78rem; font-weight: 600; color: var(--wbk-accent); background: var(--ui-white, #fff); border: 1px solid var(--ui-primary-200); border-radius: 999px; text-decoration: none; transition: background 100ms, border-color 100ms, transform 100ms; }
.wbk-vol-pill:hover { background: var(--ui-primary-50); border-color: var(--wbk-accent); transform: translateY(-1px); }
.wbk-vol-pill.wbk-vol-active { background: var(--wbk-accent); color: var(--ui-white, #fff); border-color: var(--wbk-accent); cursor: default; }
.wbk-vol-jump { background: var(--ui-primary-50) !important; border-color: var(--ui-primary-200) !important; }
.wbk-vol-jump:hover { border-color: var(--wbk-accent) !important; }
.wbk-vol-jump .wbk-chapter-nav-arrow { color: var(--wbk-accent); }
/* The book head (title → title page) stays pinned while the chapter list scrolls beneath it (12 Sep 2026). */
.wbk-toc-bookhead { position: sticky; top: 0; z-index: 1; background: var(--ui-white, #fff); padding: 20px 6px 16px 6px; border-bottom: 1px solid var(--ui-gray-100); margin-bottom: 12px; }
.wbk-toc-title { font-weight: 700; font-size: 1.05rem; line-height: 1.25; color: var(--ui-gray-900); }
.wbk-toc-subtitle { font-size: 0.82rem; color: var(--ui-gray-600); margin-top: 2px; }
.wbk-toc-author { font-size: 0.75rem; color: var(--ui-gray-400); margin-top: 6px; }
.wbk-toc-nav { display: flex; flex-direction: column; gap: 2px; }
/* ── Virtual pages: cover · contents · part title pages ── */
.wbk-toc-bookhead-link { cursor: pointer; }
.wbk-toc-bookhead-link:hover .wbk-toc-title { color: var(--wbk-accent); }
.wbk-toc-contents { display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin: 2px 0 6px; font-size: 0.85rem; color: var(--ui-gray-700); text-decoration: none; border-radius: var(--ui-radius-md); }
.wbk-toc-contents:hover { background: var(--ui-gray-100); color: var(--wbk-accent); }
.wbk-toc-part-link { cursor: pointer; }
.wbk-toc-part-link:hover .wbk-toc-part-name { color: var(--wbk-accent); }
.wbk-virtual-page { max-width: 860px; }
/* Title-page hero: the default is a gradient built from the book accent;
   a book.settings.cover scheme class (.wbk-cover-*) overrides it. */
.wbk-vhero { position: relative; overflow: hidden; border-radius: var(--ui-radius-xl, 16px); padding: 60px 48px 42px; margin: 10px 0 30px; color: var(--ui-white, #fff); box-shadow: 0 12px 34px rgba(0,0,0,0.16);
    background: linear-gradient(135deg, color-mix(in srgb, var(--wbk-accent) 72%, var(--ui-black, #000)) 0%, var(--wbk-accent) 58%, color-mix(in srgb, var(--wbk-accent) 70%, var(--ui-white, #fff)) 100%); }
.wbk-vhero-num { position: absolute; right: 22px; bottom: -42px; font-family: Georgia, 'Times New Roman', serif; font-size: 15rem; font-weight: 700; line-height: 1; opacity: 0.13; pointer-events: none; }
.wbk-vhero-badge { display: inline-block; border: 1px solid rgba(255,255,255,0.55); border-radius: 999px; padding: 4px 14px; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; margin-bottom: 20px; }
.wbk-vhero-icon { font-size: 2rem; opacity: 0.92; display: block; margin-bottom: 16px; }
.wbk-vhero-kicker { text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.74rem; font-weight: 700; opacity: 0.85; margin-bottom: 16px; }
.wbk-vhero-title { font-family: Georgia, 'Times New Roman', serif; font-size: 2.9rem; line-height: 1.08; margin: 0 0 14px; font-weight: 700; max-width: 14em; }
.wbk-vhero-subtitle { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-size: 1.28rem; opacity: 0.94; margin: 0 0 20px; max-width: 30em; line-height: 1.45; }
.wbk-vhero-meta { font-size: 0.95rem; opacity: 0.92; margin: 0 0 30px; letter-spacing: 0.02em; }
.wbk-vhero-dot { margin: 0 10px; opacity: 0.7; }
.wbk-vhero .wbk-vcover-actions { justify-content: flex-start; }
.wbk-vhero .wbk-vbtn { border-color: rgba(255,255,255,0.55); color: var(--ui-white, #fff); }
.wbk-vhero .wbk-vbtn:hover { border-color: var(--ui-white, #fff); color: var(--ui-white, #fff); background: rgba(255,255,255,0.12); }
.wbk-vhero .wbk-vbtn-primary { background: var(--ui-white, #fff); border-color: var(--ui-white, #fff); color: var(--ui-gray-900); }
.wbk-vhero .wbk-vbtn-primary:hover { opacity: 0.92; color: var(--ui-gray-900); }
@media (max-width: 720px) { .wbk-vhero { padding: 40px 26px 32px; } .wbk-vhero-title { font-size: 2.1rem; } .wbk-vhero-num { font-size: 9rem; } }
.wbk-vcover-head { text-align: center; padding: 56px 24px 34px; }
.wbk-vcover-icon { font-size: 2.2rem; color: var(--wbk-accent); margin-bottom: 14px; display: inline-block; }
.wbk-vcover-kicker { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.78rem; color: var(--ui-gray-500); margin-bottom: 14px; }
.wbk-vcover-title { font-size: 2.4rem; line-height: 1.15; margin: 0 0 10px; }
.wbk-vcover-subtitle { font-size: 1.12rem; color: var(--ui-gray-700); margin: 0 auto 14px; max-width: 560px; }
.wbk-vcover-author { font-size: 0.95rem; color: var(--ui-gray-800); font-weight: 600; margin: 0 0 26px; }
.wbk-vcover-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.wbk-vbtn { display: inline-block; padding: 9px 18px; border: 1px solid var(--ui-gray-300); border-radius: 999px; font-size: 0.9rem; color: var(--ui-gray-800); text-decoration: none; }
.wbk-vbtn:hover { border-color: var(--wbk-accent); color: var(--wbk-accent); }
.wbk-vbtn-primary { background: var(--wbk-accent); border-color: var(--wbk-accent); color: var(--ui-white, #fff); }
.wbk-vbtn-primary:hover { color: var(--ui-white, #fff); opacity: 0.92; }
.wbk-vsection-label { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.75rem; color: var(--ui-gray-400); margin: 26px 0 10px; }
.wbk-vcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.wbk-vcard { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--ui-gray-200); border-radius: var(--ui-radius-lg); text-decoration: none; color: var(--ui-gray-900); background: var(--ui-white, #fff); }
.wbk-vcard:hover { border-color: var(--wbk-accent); box-shadow: var(--ui-shadow-sm); }
.wbk-vcard-badge { font-size: 0.75rem; font-weight: 700; color: var(--wbk-accent); text-transform: uppercase; letter-spacing: 0.06em; }
.wbk-vcard-title { font-size: 0.95rem; line-height: 1.3; }
.wbk-vcard-meta { font-size: 0.78rem; color: var(--ui-gray-400); }
.wbk-vpage-kicker { font-size: 0.85rem; margin-bottom: 18px; }
.wbk-vpage-kicker a { color: var(--ui-gray-500); text-decoration: none; }
.wbk-vpage-kicker a:hover { color: var(--wbk-accent); }
.wbk-vpage-title { font-size: 1.9rem; margin: 0 0 18px; }
.wbk-vpart-num { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8rem; font-weight: 700; color: var(--wbk-accent); margin-bottom: 6px; }
.wbk-vcontents-part { display: flex; flex-direction: column; gap: 1px; margin: 22px 0 8px; padding-top: 14px; border-top: 1px solid var(--ui-gray-100); }
.wbk-vcontents-partname { font-weight: 700; color: var(--ui-gray-900); text-decoration: none; font-size: 1.02rem; }
.wbk-vcontents-partname:hover { color: var(--wbk-accent); }
.wbk-vcontents-row { display: flex; gap: 12px; padding: 7px 8px; text-decoration: none; color: var(--ui-gray-800); border-radius: var(--ui-radius-md); font-size: 0.93rem; }
.wbk-vcontents-row:hover { background: var(--ui-gray-100); }
.wbk-vcontents-rowtitle { flex: 1; }
.wbk-toc-part { display: flex; flex-direction: column; gap: 1px; padding: 14px 10px 5px 10px; margin-top: 4px; border-top: 1px solid var(--ui-gray-100); }
.wbk-toc-part:first-child { border-top: none; margin-top: 0; padding-top: 4px; }
.wbk-toc-part-num { text-transform: uppercase; letter-spacing: 0.13em; font-size: 0.64rem; font-weight: 700; color: var(--wbk-accent); }
.wbk-toc-part-name { font-size: 0.82rem; font-weight: 600; color: var(--ui-gray-800); line-height: 1.25; }
.wbk-chapter-part { display: inline-block; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.68rem; font-weight: 700; color: var(--wbk-accent); margin-right: 10px; }
.wbk-toc-chapter { display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px; border-radius: var(--ui-radius-md); text-decoration: none; color: var(--ui-gray-800); font-size: 0.88rem; line-height: 1.3; transition: background 100ms; }
.wbk-toc-chapter:hover { background: var(--ui-gray-100); }
.wbk-toc-chapter-active { background: var(--wbk-accent-bg); color: var(--wbk-accent); font-weight: 600; }
.wbk-toc-num { color: var(--ui-gray-400); font-size: 0.78rem; flex-shrink: 0; min-width: 22px; text-align: right; padding-top: 1px; }
.wbk-toc-chapter-active .wbk-toc-num { color: var(--wbk-accent); }
.wbk-toc-sections { list-style: none; padding: 4px 0 8px 36px; margin: 0; }
.wbk-toc-sections li a { display: block; padding: 4px 8px; border-radius: var(--ui-radius-sm); text-decoration: none; color: var(--ui-gray-700); font-size: 0.81rem; line-height: 1.3; }
.wbk-toc-sections li a:hover { background: var(--ui-gray-100); color: var(--wbk-accent); }

.wbk-main { flex: 1; min-width: 0; overflow-y: auto; padding: 0 36px 80px 36px; }   /* top padding moved onto the page so the reading strip can sit flush at the scroll edge (12 Sep 2026) */
.wbk-chapter-page { max-width: 760px; margin: 0 auto; padding-top: 28px; }
.wbk-cover { border-radius: var(--ui-radius-xl); padding: 56px 44px 50px; margin: 8px 0 44px; color: var(--ui-white, #fff); box-shadow: 0 12px 34px rgba(0,0,0,0.16); position: relative; overflow: hidden; }
.wbk-cover-icon { font-size: 1.9rem; opacity: 0.9; margin-bottom: 18px; display: block; }
.wbk-cover-kicker { text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.7rem; font-weight: 700; opacity: 0.85; margin-bottom: 14px; }
.wbk-cover-title { font-family: Georgia, 'Times New Roman', serif; font-size: 2.4rem; line-height: 1.13; margin: 0 0 16px 0; font-weight: 700; }
.wbk-cover-subtitle { font-family: Georgia, serif; font-size: 1.18rem; font-style: italic; opacity: 0.94; margin: 0 0 24px 0; max-width: 30em; line-height: 1.4; }
.wbk-cover-author { font-size: 0.95rem; letter-spacing: 0.02em; opacity: 0.92; margin: 0; }
.wbk-cover-indigo   { background: linear-gradient(135deg, #312a7c 0%, #6d3bce 60%, #8b5cf6 100%); }
.wbk-cover-teal     { background: linear-gradient(135deg, #0d4646 0%, #0e7c6b 58%, #16b8a6 100%); }
.wbk-cover-slate    { background: linear-gradient(135deg, #1b2636 0%, #2c3e50 58%, #4a6582 100%); }
.wbk-cover-crimson  { background: linear-gradient(135deg, #531320 0%, #9b1c31 58%, #d6485a 100%); }
.wbk-cover-amber    { background: linear-gradient(135deg, #6e3500 0%, #c2680f 55%, #f59e0b 100%); }
.wbk-cover-midnight { background: linear-gradient(135deg, #0a0f1f 0%, #141d3a 55%, #26407a 100%); }
.wbk-cover-forest   { background: linear-gradient(135deg, #14321f 0%, #1f6b3a 58%, #34a853 100%); }
.wbk-resume-banner {
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px; padding: 8px 14px; margin: 0 0 18px 0;
    background: var(--wbk-accent-bg);
    border-left: 3px solid var(--wbk-accent);
    border-radius: var(--ui-radius-sm); font-size: 0.88rem; color: var(--ui-gray-900);
}
.wbk-resume-banner i { margin-right: 6px; color: var(--wbk-accent); }
.wbk-resume-restart {
    color: var(--wbk-accent); text-decoration: none;
    font-size: 0.82rem; var(--ui-white, #fff)-space: nowrap;
}
.wbk-resume-restart:hover { text-decoration: underline; }
@media print { .wbk-resume-banner { display: none !important; } }
.wbk-chapter-head { margin-bottom: 24px; }
.wbk-chapter-pos { font-size: 0.78rem; color: var(--ui-gray-500); text-transform: uppercase; letter-spacing: 0.06em; }
.wbk-chapter-title { font-size: 2rem; margin: 4px 0 0 0; color: var(--ui-gray-900); line-height: 1.2; }
.wbk-section { margin: 32px 0; }
.wbk-section-title { font-size: 1.3rem; margin: 24px 0 12px 0; color: var(--wbk-accent); padding-bottom: 6px; border-bottom: 1px solid var(--ui-gray-200); }

.wbk-block { margin: 14px 0; line-height: 1.65; }
.wbk-markdown p { margin: 8px 0; }
.wbk-markdown blockquote { border-left: 4px solid var(--wbk-accent); background: var(--wbk-accent-bg); margin: 12px 0; padding: 8px 16px; border-radius: var(--ui-radius-sm); }
.wbk-markdown code { background: var(--ui-gray-100); padding: 1px 6px; border-radius: var(--ui-radius-sm); font-size: 0.9em; }
.wbk-markdown pre { background: var(--ui-gray-900); color: var(--ui-gray-100); padding: 12px; border-radius: var(--ui-radius-md); overflow-x: auto; }
/* inside a fenced block the inline-code chip must not apply: its light
   background under pre's light text renders every line as a blank bar */
.wbk-markdown pre code { background: none; padding: 0; border-radius: 0; font-size: inherit; color: inherit; }
.wbk-markdown table { border-collapse: collapse; margin: 12px 0; }
.wbk-markdown th, .wbk-markdown td { border: 1px solid var(--ui-gray-200); padding: 6px 12px; text-align: left; }
.wbk-markdown th { background: var(--ui-gray-100); }

.wbk-practice { background: color-mix(in srgb, var(--ui-warning) 12%, var(--ui-white, #fff)); border: 1px solid var(--ui-warning); border-radius: var(--ui-radius-lg); padding: 16px 20px; margin: 20px 0; }
.wbk-practice-tag { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.75rem; font-weight: 600; color: var(--ui-warning); margin-bottom: 8px; }
.wbk-practice-prompt { font-size: 1.05rem; margin-bottom: 12px; }
.wbk-practice-solution { margin: 12px 0; }
.wbk-practice-solution summary { cursor: pointer; color: var(--wbk-accent); font-weight: 600; }
.wbk-practice-answer { margin-top: 8px; padding: 12px; background: var(--ui-white, #fff); border-radius: var(--ui-radius-sm); border-left: 3px solid var(--wbk-accent); }
.wbk-btn-ghost { background: transparent; color: var(--wbk-accent); border: 1px solid var(--wbk-accent); padding: 4px 12px; border-radius: var(--ui-radius-md); cursor: pointer; font-size: 0.85rem; margin-top: 8px; }

/* MCQ block */
.wbk-mcq { background: var(--wbk-assess-bg); border: 1px solid var(--wbk-assess); border-radius: var(--ui-radius-lg); padding: 16px 20px; margin: 20px 0; }
.wbk-mcq-tag { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.75rem; font-weight: 600; color: var(--wbk-assess); margin-bottom: 8px; }
.wbk-mcq-statement { font-size: 1.05rem; margin-bottom: 14px; }
.wbk-mcq-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.wbk-mcq-option { display: flex; align-items: flex-start; gap: 12px; padding: 10px 14px; background: var(--ui-white, #fff); border: 1px solid var(--ui-gray-300); border-radius: var(--ui-radius-md); cursor: pointer; text-align: left; font-size: 0.95rem; transition: border-color 100ms, background 100ms; }
.wbk-mcq-option:hover:not(:disabled) { border-color: var(--wbk-assess); background: var(--ui-gray-50); }
.wbk-mcq-option:disabled { cursor: default; }
.wbk-mcq-letter { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--wbk-assess-bg); color: var(--wbk-assess-strong); font-weight: 700; font-size: 0.85rem; flex-shrink: 0; }
.wbk-mcq-label { flex: 1; }
.wbk-mcq-label p { margin: 0; }
.wbk-mcq-correct { background: var(--ui-success-100); border-color: var(--ui-success); }
.wbk-mcq-correct .wbk-mcq-letter { background: var(--ui-success); color: var(--ui-white, #fff); }
.wbk-mcq-wrong { background: var(--ui-danger-100); border-color: var(--ui-danger); }
.wbk-mcq-wrong .wbk-mcq-letter { background: var(--ui-danger); color: var(--ui-white, #fff); }
.wbk-mcq-result { font-weight: 600; margin-top: 8px; }
.wbk-mcq-result-correct { color: var(--ui-success); }
.wbk-mcq-result-wrong { color: var(--ui-danger); }
.wbk-mcq-solution { background: var(--ui-white, #fff); padding: 12px 14px; border-radius: var(--ui-radius-md); border-left: 3px solid var(--wbk-assess); margin-top: 8px; }

.wbk-chapter-nav { display: flex; justify-content: space-between; align-items: stretch; gap: 16px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--ui-gray-200); }
.wbk-chapter-nav-link { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--ui-gray-200); border-radius: var(--ui-radius-lg); background: var(--ui-white, #fff); text-decoration: none; color: var(--ui-gray-800); flex: 0 1 280px; min-width: 0; transition: border-color 100ms, transform 100ms; }
.wbk-chapter-nav-link:hover { border-color: var(--wbk-accent); transform: translateY(-1px); }
.wbk-chapter-nav-arrow { font-size: 1.4rem; color: var(--wbk-accent); }
.wbk-chapter-nav-stack { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wbk-chapter-nav-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ui-gray-500); }
.wbk-chapter-nav-title { font-size: 0.92rem; color: var(--ui-gray-900); font-weight: 600; overflow: hidden; text-overflow: ellipsis; var(--ui-white, #fff)-space: nowrap; }
.wbk-chapter-nav-spacer { flex: 0 1 280px; }

.wbk-error { color: var(--ui-danger); background: var(--ui-danger-100); padding: 8px; border-radius: var(--ui-radius-sm); font-family: monospace; font-size: 0.9rem; }
.wbk-empty { padding: 40px; text-align: center; color: var(--ui-gray-500); }

@media (max-width: 720px) {
    .wbk-toc { width: 100%; max-height: 200px; }
    .wbk-frame-body { flex-direction: column; }
}

/* ── Print / PDF export ─────────────────────────────────────
   When the reader is in print mode (?print=1 URL param), all
   chapters render in flow inside .wbk-print-root. Page-frame
   chrome and the standalone header / TOC are hidden so the
   PDF is just the book content. */
.wbk-print-titlepage {
    page-break-after: always;
    text-align: center;
    padding: 30vh 40px 0 40px;
}
.wbk-print-title { font-size: 2.4rem; margin: 0 0 8px 0; line-height: 1.15; color: var(--ui-gray-900); }
.wbk-print-subtitle { font-size: 1.2rem; color: var(--ui-gray-700); margin: 0 0 20px 0; }
.wbk-print-author { font-size: 1rem; color: var(--ui-gray-700); margin: 0 0 24px 0; }
.wbk-print-published { font-size: 0.78rem; color: var(--ui-gray-400); letter-spacing: 0.06em; text-transform: uppercase; }
.wbk-print-chapter { page-break-before: always; }

@media print {
    /* Default page: book title top-centre, page number bottom-centre.
       The book title is set per-render by JS via 'string-set' on the
       print root's data-book-title attribute. */
    @page {
        margin: 22mm 16mm 22mm 16mm;
        @top-center  { content: string(book-title); font-family: var(--wbk-font, Georgia, serif); font-size: 9pt; color: var(--ui-gray-500); letter-spacing: 0.04em; }
        @bottom-center { content: counter(page) " of " counter(pages); font-family: var(--wbk-font, Georgia, serif); font-size: 9pt; color: var(--ui-gray-500); }
    }
    /* Title page has no running header / page number. */
    @page :first {
        @top-center    { content: ""; }
        @bottom-center { content: ""; }
    }
    .wbk-print-root { string-set: book-title attr(data-book-title); }
    html, body, body.wbk-reader,
    .wbk-frame, .wbk-frame-embedded, .wbk-frame-body, .wbk-main {
        background: var(--ui-white, #fff) !important; background-image: none !important;
    }
    /* Strip everything that isn't book content. */
    .ui-pageframe-header, .ui-pageframe-tabs, .ui-pageframe-actions,
    .ui-pageframe-footer, .wbk-frame-header, .wbk-toc,
    .wbk-chapter-nav, .wbk-fork-btn, .wbk-export-btn,
    .wbk-chapter-actions, .pp-editor-control, .pp-editor-stage-head,
    .ui-system-shield-host, .ui-modal-overlay, .pp-share-overlay,
    .pp-group-overlay, .wbk-frame-back, .wbk-practice-regen {
        display: none !important;
    }
    .wbk-frame, .wbk-frame-body, .wbk-main, .wbk-frame-embedded {
        display: block !important; height: auto !important;
        overflow: visible !important; padding: 0 !important;
        border: 0 !important; box-shadow: none !important;
    }
    .wbk-chapter-page { max-width: none; margin: 0; padding: 0; }
    /* Keep chapter title + position + first section title together
       so each chapter doesn't start with an empty page. */
    .wbk-chapter-page > .wbk-chapter-pos,
    .wbk-chapter-page > .wbk-chapter-title { page-break-after: avoid; }
    .wbk-chapter-page > .wbk-section:first-of-type,
    .wbk-section-title { page-break-before: avoid; page-break-after: avoid; }
    /* Don't split blocks across pages where possible. .wbk-block is
       the shared parent class every block uses (including plugins),
       so adding new plugin types doesn't need a CSS update. */
    .wbk-block, .wbk-section, .wbk-callout, .wbk-code, .wbk-practice,
    .wbk-mcq, .wbk-table-block, .wbk-equation, .wbk-image, .wbk-experiment,
    .wbk-quiz-set, .wbk-gantt { page-break-inside: avoid; break-inside: avoid; }
    a { color: inherit; text-decoration: none; }
    /* Solution disclosures stay closed in print (cleaner book) */
    details > summary { list-style: none; }
    details:not([open]) > div { display: none; }
}

/* ── Collection gallery (layout:'gallery') — a browsable shelf ── */
.wbk-gallery-frame { background: var(--ui-gray-50); }
.wbk-gallery-topbar { background: var(--wbk-gallery-navy); }
.wbk-gallery { padding: 0 0 90px 0; }
.wbk-gallery-inner { max-width: 1160px; margin: 0 auto; padding: 0 32px; }

/* Masthead — a gradient cover band echoing the book covers. */
.wbk-gallery-cover { position: relative; overflow: hidden; color: var(--ui-white, #fff);
    background: linear-gradient(135deg, var(--wbk-gallery-navy) 0%, #2f2a63 52%, var(--wbk-gallery-plum) 100%); }
.wbk-gallery-cover::after { content: ''; position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 15px);
    mask-image: linear-gradient(90deg, transparent 55%, var(--ui-black, #000) 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 55%, var(--ui-black, #000) 100%); opacity: 0.7; }
.wbk-gallery-cover-inner { position: relative; max-width: 1160px; margin: 0 auto; padding: 52px 32px 46px; }
.wbk-gallery-kicker { display: inline-flex; align-items: center; gap: 7px; text-transform: uppercase; letter-spacing: 0.2em; font-size: var(--ui-text-xs); font-weight: var(--ui-font-bold); color: var(--wbk-assess-border); margin-bottom: 16px; }
.wbk-gallery-title { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.08; font-weight: 700; color: var(--ui-white, #fff); margin: 0 0 14px; text-wrap: balance; max-width: 18em; }
.wbk-gallery-subtitle { font-family: Georgia, serif; font-style: italic; font-size: clamp(1.05rem, 1.6vw, 1.28rem); color: rgba(255,255,255,0.88); line-height: 1.45; margin: 0 0 12px; max-width: 40em; }
.wbk-gallery-author { font-size: var(--ui-text-sm); letter-spacing: 0.02em; color: rgba(255,255,255,0.7); margin: 0; }
.wbk-gallery-tally { display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin: 26px 0 2px; }
.wbk-gallery-tally .ui-metric-chip { padding: 2px 18px 2px 0; margin-right: 18px; }
.wbk-gallery-tally .ui-metric-chip + .ui-metric-chip { border-left: 1px solid rgba(255,255,255,0.22); padding-left: 18px; }
.wbk-gallery-tally .ui-metric-chip strong { color: var(--ui-white, #fff); font-size: var(--ui-text-xl); }
.wbk-gallery-tally .ui-metric-chip .ui-text-muted { color: rgba(255,255,255,0.72); }

.wbk-gallery-intro { margin: 34px 0 40px; color: var(--ui-fg); font-size: var(--ui-text-base); line-height: 1.62; max-width: 60ch; }
.wbk-gallery-intro p { margin: 0 0 13px; }
.wbk-gallery-intro blockquote { margin: 16px 0 0; padding: 12px 18px; border-left: 3px solid var(--wbk-gallery-plum); background: var(--ui-white, #fff); box-shadow: var(--ui-shadow-sm); border-radius: var(--ui-radius-md); color: var(--ui-fg-muted); font-size: var(--ui-text-sm); }
.wbk-gallery-intro blockquote p:last-child { margin-bottom: 0; }
.wbk-gallery-intro strong { color: var(--ui-fg); font-weight: var(--ui-font-semibold); }

/* Shelf — each section carries its own hue via --shelf-h. */
.wbk-gallery-section { --shelf: hsl(var(--shelf-h) 55% 47%); --shelf-soft: hsl(var(--shelf-h) 62% 96%); --shelf-ink: hsl(var(--shelf-h) 52% 36%); margin: 0 0 38px; }
.wbk-gallery-section-head { display: flex; align-items: center; gap: 14px; padding: 0 0 16px; }
.wbk-gallery-section-num { flex: 0 0 auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; font-family: Georgia, serif; font-size: var(--ui-text-lg); font-weight: 700; color: var(--ui-white, #fff); background: var(--shelf); border-radius: var(--ui-radius-lg); box-shadow: 0 3px 10px hsl(var(--shelf-h) 55% 47% / 0.35); }
.wbk-gallery-section-heads { display: flex; flex-direction: column; gap: 1px; }
.wbk-gallery-section-title { font-size: var(--ui-text-xl); font-weight: var(--ui-font-bold); color: var(--ui-fg); line-height: 1.2; }
.wbk-gallery-section-blurb { font-size: var(--ui-text-sm); color: var(--ui-fg-muted); }

.wbk-gallery-grid { align-items: stretch; gap: var(--ui-space-4); grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .wbk-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .wbk-gallery-grid { grid-template-columns: minmax(0, 1fr); } }
a.wbk-gallery-card { position: relative; display: flex; flex-direction: column; gap: 0; text-decoration: none; color: inherit; padding: 20px 20px 18px 26px; min-height: 100%; background: var(--ui-white, #fff); border-color: var(--ui-border); transition: box-shadow 140ms, transform 140ms, border-color 140ms; }
a.wbk-gallery-card:hover { box-shadow: 0 14px 30px hsl(var(--shelf-h) 40% 30% / 0.16); transform: translateY(-3px); border-color: var(--shelf); }
a.wbk-gallery-card:focus-visible { outline: 2px solid var(--shelf); outline-offset: 2px; }
.wbk-gallery-card-spine { position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--shelf); }
.wbk-gallery-card-icon { flex: 0 0 auto; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--ui-radius-lg); background: var(--shelf-soft); color: var(--shelf-ink); font-size: 1.15rem; margin-bottom: 14px; }
.wbk-gallery-card-main { display: flex; flex-direction: column; flex: 1; }
.wbk-gallery-card-head { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
.wbk-gallery-card-eyebrow { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.64rem; font-weight: var(--ui-font-bold); color: var(--shelf-ink); }
.wbk-gallery-card-title { font-weight: var(--ui-font-semibold); font-size: var(--ui-text-lg); line-height: 1.24; color: var(--ui-fg); }
.wbk-gallery-card-blurb { margin: 0; font-size: var(--ui-text-sm); line-height: 1.52; color: var(--ui-fg-muted); flex: 1; }
.wbk-gallery-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; padding-top: 12px; border-top: var(--ui-border-width) solid var(--ui-border); }
.wbk-gallery-card-foot .ui-metric-chip { padding: 0; }
.wbk-gallery-card-foot .ui-metric-chip-icon { color: var(--shelf-ink); }
.wbk-gallery-card-open { display: inline-flex; align-items: center; gap: 6px; font-size: var(--ui-text-xs); font-weight: var(--ui-font-bold); color: var(--shelf); var(--ui-white, #fff)-space: nowrap; }
a.wbk-gallery-card:hover .wbk-gallery-card-open i { transform: translateX(3px); transition: transform 140ms; }

/* Featured volume (Foundations, Student Success) — full-width, horizontal. */
a.wbk-gallery-card-featured { grid-column: 1 / -1; flex-direction: row; align-items: stretch; gap: 22px; padding: 26px 30px 26px 34px; background: linear-gradient(120deg, var(--shelf-soft) 0%, var(--ui-white, #fff) 60%); }
a.wbk-gallery-card-featured .wbk-gallery-card-spine { width: 8px; }
a.wbk-gallery-card-featured .wbk-gallery-card-icon { width: 64px; height: 64px; font-size: 1.7rem; margin: 4px 0 0; box-shadow: 0 4px 14px hsl(var(--shelf-h) 55% 47% / 0.28); color: var(--ui-white, #fff); background: var(--shelf); }
a.wbk-gallery-card-featured .wbk-gallery-card-title { font-size: var(--ui-text-xl); }
a.wbk-gallery-card-featured .wbk-gallery-card-blurb { max-width: 62ch; }
a.wbk-gallery-card-featured .wbk-gallery-card-foot { justify-content: flex-start; gap: 22px; }
@media (max-width: 640px) {
    a.wbk-gallery-card-featured { flex-direction: column; gap: 0; }
    .wbk-gallery-cover-inner { padding: 40px 24px 36px; }
    .wbk-gallery-inner { padding: 0 20px; }
}

/* ── plugin.visuals styles (moved out of plugin.visuals.js on 2026-09-07; tokens only) ── */

/* Generic visual wrappers */
.wbk-block.wbk-textpanel,
.wbk-block.wbk-pv,
.wbk-block.wbk-numline,
.wbk-block.wbk-fc {
    background:var(--ui-white, #fff); border:1px solid var(--ui-gray-200);
    border-radius:var(--ui-radius-lg); padding:20px; margin:16px 0;
    display:flex; flex-direction:column; align-items:center; gap:12px;
}
.wbk-visual-caption, .wbk-textpanel-caption {
    font-size:0.95rem; color:var(--ui-gray-600); text-align:center;
    font-style:italic; padding:0 1rem;
}

/* textPanel — passage / reading content */
.wbk-textpanel-body {
    width:100%; line-height:1.65; color:var(--ui-gray-800);
    font-size:1.05rem;
}
.wbk-textpanel-body p { margin:0.5em 0; }
/* Q/A flashcard variant (language lessons) */
.wbk-textpanel-qa { width:100%; padding:0.25rem 0; }
.wbk-textpanel-q { color:var(--ui-gray-800); margin-bottom:0.35rem; }
.wbk-textpanel-a { color:var(--ui-success); margin-bottom:0.35rem;
    padding:0.4rem 0.75rem; background:var(--ui-success-100);
    border-left:3px solid var(--ui-success); border-radius:var(--ui-radius-sm); }
.wbk-textpanel-note { color:var(--ui-gray-500); font-size:0.9rem;
    font-style:italic; margin-top:0.25rem; }
.wbk-qa-reveal {
    margin-top:0.35rem; padding:0.35rem 0.9rem;
    border:1px solid var(--ui-gray-300);
    border-radius:var(--ui-radius-md); background:var(--ui-gray-50);
    color:var(--ui-success); font-weight:600; cursor:pointer;
}
.wbk-qa-reveal:hover { background:var(--ui-success-100); border-color:var(--ui-success); }

/* placeValueGrid — digit columns */
.wbk-pv-grid {
    display:flex; gap:8px; padding:8px;
}
.wbk-pv-col {
    display:flex; flex-direction:column;
    border:2px solid var(--ui-gray-300); border-radius:var(--ui-radius-md);
    background:var(--ui-gray-50); padding:6px 4px;
    min-width:64px; align-items:center;
}
.wbk-pv-col-hi {
    border-color:var(--ui-primary);
    background:var(--ui-primary-100);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--ui-primary) 15%, transparent);
}
.wbk-pv-label {
    font-size:0.75rem; font-weight:600;
    color:var(--ui-gray-500); text-transform:uppercase;
    letter-spacing:0.04em; margin-bottom:4px;
}
.wbk-pv-col-hi .wbk-pv-label { color:var(--ui-primary-700); }
.wbk-pv-digit {
    font-size:2.4rem; font-weight:700; color:var(--ui-gray-800);
    font-family:'Inter','Nunito',sans-serif;
    font-variant-numeric:tabular-nums;
    line-height:1;
}
.wbk-pv-col-hi .wbk-pv-digit { color:var(--ui-primary-700); }

/* numberLine — SVG with ticks + markers */
.wbk-numline-svg { max-width:100%; height:auto; }

/* fractionCircle — SVG wedges, optionally multiple side-by-side */
.wbk-fc-row { display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap;
    justify-content:center; }
.wbk-fc-cell { display:flex; flex-direction:column; align-items:center; gap:0.5rem; }
.wbk-fc-sep { font-size:1.8rem; font-weight:700; color:var(--ui-gray-500);
    line-height:1; align-self:center; padding-top:1rem; }
.wbk-fc-svg { max-width:100%; height:auto; }
.wbk-fc-caption-num {
    font-size:1.4rem; font-weight:700; color:var(--ui-gray-800);
    font-family:'Inter','Nunito',sans-serif;
}
.wbk-fc-empty { color:var(--ui-gray-400); }

/* Interactive controls (sliders / inputs) above a visual */
.wbk-vis-controls { display:flex; flex-direction:column; gap:0.5rem;
    width:100%; max-width:480px; margin-bottom:0.5rem; }
.wbk-vis-ctrl { display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; }
.wbk-vis-ctrl-label { font-size:0.9rem; font-weight:600;
    color:var(--ui-gray-800); min-width:6.5rem; }
.wbk-vis-ctrl-val { font-family:monospace; color:var(--ui-primary);
    font-weight:700; margin-left:0.25rem; }
.wbk-vis-slider { flex:1 1 auto; min-width:8rem; }
.wbk-vis-num-input, .wbk-vis-ctrl select {
    font-size:1rem; padding:0.4rem 0.6rem;
    border:1px solid var(--ui-gray-300); border-radius:var(--ui-radius-sm);
}
.wbk-vis-tryhint { font-style: italic; color: var(--ui-text-muted);
    font-size: 0.85rem; text-align: center; }
/* Visible keyboard focus on the visual sliders (a11y pass). */
.wbk-vis-slider:focus-visible {
    outline: 2px solid var(--wbk-accent); outline-offset: 2px;
}
/* Print/PDF static fallback: an interactive visual's slider is a
   dead control on paper — hide the controls (and the intrinsic
   try-hint they contain) and keep the static drawing at its current
   value. Authored captions stay (they are content). */
@media print {
    .wbk-vis-controls, .wbk-vis-ctrl, .wbk-vis-slider { display: none !important; }
    .wbk-block { break-inside: avoid; }
}

/* ── plugin.visuals — SVG colour classes (2026-09-07): a diagram element carries a class, the theme carries the colour ── */
.wbk-vis-ink { stroke: var(--ui-gray-800); }
.wbk-vis-ink-text { fill: var(--ui-gray-800); }
.wbk-vis-muted-text { fill: var(--ui-gray-600); }
.wbk-vis-faint-text { fill: var(--ui-gray-400); }
.wbk-vis-stroke-muted { stroke: var(--ui-gray-600); }
.wbk-vis-stroke-strong { stroke: var(--ui-primary-700); }
.wbk-vis-fill-primary { fill: var(--ui-primary); }
.wbk-vis-fill-alt { fill: var(--ui-danger); }
.wbk-vis-fill-third { fill: var(--ui-success); }
.wbk-vis-fill-empty { fill: var(--ui-primary-50); }
.wbk-vis-fill-track { fill: var(--ui-gray-200); }
.wbk-vis-fill-warn { fill: var(--ui-warning); }
text.wbk-vis-fill-primary { fill: var(--ui-primary); }
text.wbk-vis-fill-alt { fill: var(--ui-danger); }

/* ── plugin.nstVisuals — science scene colours (2026-09-07): states, trophic roles, glassware, on tokens ── */
.wbk-nst-box { fill: var(--ui-gray-50); stroke: var(--ui-gray-400); }
.wbk-nst-solid { fill: var(--ui-primary); }        .wbk-nst-solid-stroke { stroke: var(--ui-primary); }
.wbk-nst-liquid { fill: var(--ui-info); }          .wbk-nst-liquid-stroke { stroke: var(--ui-info); }
.wbk-nst-gas { fill: var(--wbk-assess); }          .wbk-nst-gas-stroke { stroke: var(--wbk-assess); }
text.wbk-nst-on-color { fill: var(--ui-white, #fff); }
text.wbk-nst-on-color-sub { fill: var(--ui-primary-100); }
.wbk-nst-liquid-default { fill: var(--ui-primary-200); }
.wbk-nst-glass { fill: none; stroke: var(--ui-gray-800); }
.wbk-vis-fill-particle { fill: var(--ui-gray-600); }
.wbk-vis-stroke-ink { stroke: var(--ui-gray-800); }
.wbk-vis-strong-text { fill: var(--ui-gray-700); }
.wbk-vis-error-text { fill: var(--ui-danger); }
.wbk-nst-arrow { fill: var(--ui-gray-500); }
.wbk-nst-link { stroke: var(--ui-gray-500); }
.wbk-nst-node { fill: var(--ui-white, #fff); }
.wbk-nst-role-producer { stroke: var(--ui-success); }  text.wbk-nst-role-producer { fill: var(--ui-success); }
.wbk-nst-role-herbivore, .wbk-nst-role-consumer { stroke: var(--ui-primary); }  text.wbk-nst-role-herbivore, text.wbk-nst-role-consumer { fill: var(--ui-primary); }
.wbk-nst-role-carnivore { stroke: var(--ui-danger); }  text.wbk-nst-role-carnivore { fill: var(--ui-danger); }
.wbk-nst-role-omnivore { stroke: var(--wbk-assess); }  text.wbk-nst-role-omnivore { fill: var(--wbk-assess); }
.wbk-nst-role-decomposer { stroke: var(--ui-warning); }  text.wbk-nst-role-decomposer { fill: var(--ui-warning); }
.wbk-nst-role-other { stroke: var(--ui-gray-600); }  text.wbk-nst-role-other { fill: var(--ui-gray-600); }
text.wbk-nst-role-text { stroke: none; }

/* ── plugin.svg styles (moved out of plugin.svg on 2026-09-07; tokens only) ── */
.wbk-svg-illustration { margin: 14px 0; }
.wbk-svg-illustration-title { font-weight: 600; color: var(--wbk-accent); margin-bottom: 6px; }
.wbk-svg-illustration svg { max-width: 100%; }
@media print {
  .wbk-svg-illustration { page-break-inside: avoid; }
}
.wbk-svg-illustration-svg { display: block; width: 100%; height: auto; }
.wbk-sym-paper { fill: var(--ui-white, #fff); }
.wbk-sym-vessel { fill: var(--ui-gray-100); }
.wbk-sym-liquid { fill: var(--ui-info); }
.wbk-sym-pipe { fill: var(--ui-gray-300); }

/* ── plugin.core styles (moved out of plugin.core on 2026-09-07; tokens only) ── */
.wbk-accordion-block,
.wbk-chart-block,
.wbk-metric-strip-block { margin: 14px 0; }
.wbk-accordion-block-title,
.wbk-chart-block-title,
.wbk-metric-strip-title {
  font-weight: 600; color: var(--wbk-accent);
  margin-bottom: 6px;
}
.wbk-metric-strip { display: flex; flex-wrap: wrap; gap: 8px; }
@media print {
  .wbk-accordion-block, .wbk-chart-block, .wbk-metric-strip-block {
    page-break-inside: avoid;
  }
  /* In print, expand all accordion sections — collapsed bodies
     would otherwise be invisible in the PDF. */
  .wbk-accordion-block .ui-accordion-body { display: block !important; }
}

/* ── plugin.gantt colours (2026-09-07) ── */
.wbk-gantt-svg { max-width: 100%; height: auto; }
.wbk-gantt-grid { stroke: var(--ui-gray-100); }
.wbk-gantt-month { fill: var(--ui-gray-500); }
.wbk-gantt-today { stroke: var(--ui-danger); }
.wbk-gantt-label { fill: var(--ui-gray-900); }
.wbk-gantt-bar { fill: var(--wbk-accent); }
.wbk-gantt-days { fill: var(--ui-white, #fff); }
.wbk-gantt-dep { stroke: var(--ui-gray-500); fill: none; }
.wbk-gantt-dep-head { fill: var(--ui-gray-500); }

/* ── plugin.cardList styles (moved out of plugin.cardList.js on 2026-09-07) ── */
.wbk-card-list { margin: 12px 0; display: flex; flex-direction: column; gap: 10px; }
.wbk-card-list-title { font-weight: 600; color: var(--wbk-accent); margin-bottom: 4px; }
.wbk-card {
  border: 1px solid #e0e0e0;
  border-left-width: 4px;
  border-radius: var(--ui-radius-md);
  padding: 10px 14px;
  background: #fff;
}
.wbk-card-neutral  { border-left-color: #B0BEC5; }
.wbk-card-info     { border-left-color: #1565C0; }
.wbk-card-success  { border-left-color: #2E7D32; }
.wbk-card-warning  { border-left-color: #C77700; }
.wbk-card-danger   { border-left-color: #C62828; }
.wbk-card-progress { border-left-color: #E07B00; }
.wbk-card-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 6px;
}
.wbk-card-title { font-weight: 600; color: #222; }
.wbk-card-kv {
  display: grid; grid-template-columns: minmax(80px, max-content) 1fr;
  column-gap: 12px; row-gap: 2px; margin: 4px 0 0 0;
  font-size: 0.9rem;
}
.wbk-card-kv dt { color: #666; font-weight: 600; }
.wbk-card-kv dd { margin: 0; color: #222; }
.wbk-card-kv dd p { margin: 0; }
.wbk-card-body { margin-top: 8px; padding-top: 6px; border-top: 1px dashed #eee; font-size: 0.92rem; }
.wbk-card-body p { margin: 4px 0; }
@media print { .wbk-card { page-break-inside: avoid; } }

/* ── plugin.svg-anim styles (moved out of plugin.svg-anim.js on 2026-09-07) ── */
.wbk-svg-anim-controls {
  margin-top: 10px; padding: 10px 14px; border-top: 1px solid #eee;
  background: #fafbfc; border-radius: 0 0 6px 6px;
  display: flex; flex-direction: column; gap: 6px;
}
.wbk-svg-anim-row {
  display: grid; grid-template-columns: minmax(100px, max-content) 1fr 60px;
  align-items: center; gap: 10px; font-size: 0.85rem;
}
.wbk-svg-anim-label { color: #444; font-weight: 500; }
.wbk-svg-anim-slider { width: 100%; }
.wbk-svg-anim-value {
  font-family: ui-monospace, monospace; font-size: 0.82rem;
  color: var(--wbk-accent); text-align: right;
}
.wbk-svg-anim-anim-controls {
  margin-top: 8px; padding: 6px 14px;
  display: flex; gap: 6px;
}
.wbk-svg-anim-btn {
  background: #fff; color: var(--wbk-accent);
  border: 1px solid var(--wbk-accent-bg, #E3F2FD);
  border-radius: var(--ui-radius-sm); padding: 5px 12px; cursor: pointer;
  font-size: 0.85rem;
}
.wbk-svg-anim-btn:hover { background: var(--wbk-accent-bg, #E3F2FD); }
@media print {
  .wbk-svg-anim-controls, .wbk-svg-anim-anim-controls { display: none !important; }
}

/* ── plugin.pillTable styles (moved out of plugin.pillTable.js on 2026-09-07) ── */
.wbk-pill-table { margin: 12px 0; }
.wbk-pill-table-title { font-weight: 600; color: var(--wbk-accent); margin-bottom: 6px; }
.wbk-pill-table-grid { border-collapse: collapse; width: 100%; }
.wbk-pill-table-grid th, .wbk-pill-table-grid td {
  border: 1px solid #ddd; padding: 6px 10px; text-align: left; vertical-align: top; }
.wbk-pill-table-grid th { background: #f5f5f5; font-weight: 600; }
.wbk-pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.wbk-pill-neutral  { background: #ECEFF1; color: #37474F; }
.wbk-pill-info     { background: #E3F2FD; color: #1565C0; }
.wbk-pill-success  { background: #E8F5E9; color: #2E7D32; }
.wbk-pill-warning  { background: #FFF8E1; color: #C77700; }
.wbk-pill-danger   { background: #FFEBEE; color: #C62828; }
.wbk-pill-progress { background: #FFF3E0; color: #E07B00; }
@media print {
  .wbk-pill-table { page-break-inside: avoid; }
  .wbk-pill { border: 1px solid currentColor; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ── plugin.bind styles (moved out of plugin.bind.js on 2026-09-07) ── */
.wbk-bind-block { margin: 14px 0; }
.wbk-bind-block-title { font-weight: 600; color: var(--wbk-accent); margin-bottom: 6px; }
.wbk-bind-host { min-height: 40px; }
@media print {
  .wbk-bind-block { page-break-inside: avoid; }
  .wbk-bind-block .ui-table-toolbar,
  .wbk-bind-block .ui-paginator { display: none !important; }
}

/* ── plugin.dl styles (moved out of plugin.dl.js on 2026-09-07) ── */
.wbk-dl-block { margin: 12px 0; }
.wbk-dl-title { font-weight: 600; color: var(--wbk-accent); margin-bottom: 6px; }
.wbk-dl { display: grid; grid-template-columns: minmax(140px, max-content) 1fr;
          column-gap: 16px; row-gap: 4px; margin: 0; }
.wbk-dl dt { font-weight: 600; color: #555; }
.wbk-dl dd { margin: 0; }
.wbk-dl dd p { margin: 0; }
@media print { .wbk-dl-block { page-break-inside: avoid; } }

/* ── plugin.svg-edit styles (moved out of plugin.svg-edit.js on 2026-09-07) ── */
.pp-svg-edit-draggable { transition: opacity 80ms; }
.pp-svg-edit-draggable:hover { opacity: 0.85; outline: 1px dashed var(--wbk-accent); outline-offset: 2px; }
.pp-svg-edit-dragging { opacity: 0.6 !important; }

.wbk-block-error { color: var(--ui-danger); font: 13px/1.5 monospace; padding: 8px; border: 1px solid var(--ui-danger-100); border-radius: var(--ui-radius-md); }
.pp-svg-edit-draggable { cursor: move; }

.wbk-vis-stroke-warn { stroke: var(--ui-warning); }
.wbk-lab-panel { fill: var(--ui-gray-50); }
.wbk-lab-box { fill: var(--ui-gray-100); stroke: var(--ui-gray-400); }
.wbk-lab-graph { fill: var(--ui-gray-100); stroke: var(--ui-gray-300); }
.wbk-lab-flash { stroke: var(--wbk-assess); }