/* Physical book surfaces, scoped to Story and Reader Account only. */
#bf-book-mockup:has(.bf-reader,.bf-preview-toc,.bf-account){--bf-paper:light-dark(#eee4cf,#252a31);--bf-volume-fold:50%;--bf-volume-shadow:light-dark(#5e41274d,#0009);--bf-volume-edge:light-dark(#c8b897,#42464e)}
#bf-book-mockup:has(.bf-reader,.bf-preview-toc,.bf-account) .bf-stage{padding:34px 28px 52px}
#bf-book-mockup:has(.bf-reader,.bf-preview-toc,.bf-account) .bf-binding{max-width:1320px;padding:15px 20px 25px 24px;border-radius:8px 13px 16px 6px;box-shadow:0 25px 45px #0009,0 6px 0 #0b1928,inset 3px 0 5px #688aad50}
#bf-book-mockup:has(.bf-reader,.bf-preview-toc,.bf-account) .bf-sheet{min-height:calc(100vh - 130px);border-radius:2px 5px 11px 2px;box-shadow:1px 2px 0 var(--bf-volume-edge),3px 4px 0 light-dark(#e0d3b7,#55585e),2px 6px 0 var(--bf-volume-edge),4px 8px 0 light-dark(#d9c9aa,#383e47),3px 11px 0 var(--bf-volume-edge),0 15px 15px #0005}
#bf-book-mockup:has(.bf-reader,.bf-preview-toc,.bf-account) .bf-sheet:before{opacity:var(--bf-volume-texture,.3);background-size:600% 400%;background-position:70% 50%;box-shadow:inset 0 0 24px light-dark(#74512b26,#0004),inset -4px 0 9px light-dark(#79552e26,#0004)}
#bf-book-mockup:has(.bf-reader,.bf-preview-toc,.bf-account) .bf-sheet:after{display:block;left:calc(var(--bf-volume-fold) - 24px);width:48px;background:linear-gradient(90deg,transparent,var(--bf-volume-shadow) 43%,light-dark(#38271770,#000a) 50%,light-dark(#fff5,#a2aeb91a) 54%,light-dark(#8a6e3426,#0004) 67%,transparent);z-index:0;border-radius:0;pointer-events:none}
#bf-book-mockup:has(.bf-reader,.bf-preview-toc,.bf-account) .bf-full>.bf-page{padding:28px 50px 30px;min-height:calc(100vh - 130px)}
#bf-book-mockup:has(.bf-reader,.bf-preview-toc,.bf-account) .bf-top{padding-bottom:20px;border-bottom:1px solid color-mix(in srgb,var(--bf-blue) 40%,transparent)}
#bf-book-mockup:has(.bf-reader,.bf-preview-toc,.bf-account) .bf-footer{border-top:1px solid color-mix(in srgb,var(--bf-blue) 25%,transparent);margin-top:42px;padding-top:20px}
/* Two facing leaves for the story catalogue. */
#bf-book-mockup:has(.bf-reader,.bf-preview-toc,.bf-account) .bf-preview-toc{margin:22px 0 0;max-width:none;min-height:420px}
#bf-book-mockup:has(.bf-reader,.bf-preview-toc,.bf-account) .bf-book-index{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:90px;min-height:300px}
#bf-book-mockup:has(.bf-reader,.bf-preview-toc,.bf-account) .bf-book-index .bf-index{border:0;padding:0;align-items:stretch}
#bf-book-mockup:has(.bf-reader,.bf-preview-toc,.bf-account) .bf-book-index-title{max-width:38%;align-items:flex-start;margin-bottom:34px}
#bf-book-mockup:has(.bf-reader,.bf-preview-toc,.bf-account) .bf-book-index-title h1{font:500 34px/1.2 'BF Reading',Georgia,serif;letter-spacing:-.02em}
#bf-book-mockup:has(.bf-reader,.bf-preview-toc,.bf-account) .bf-index button{background:transparent;border:0;border-bottom:1px solid var(--bf-line);box-shadow:none;padding:16px 6px;font:20px/1.5 'BF Reading',Georgia,serif}
#bf-book-mockup:has(.bf-reader,.bf-preview-toc,.bf-account) .bf-index button[aria-pressed=true]{border:0;border-bottom:2px solid var(--bf-blue);color:var(--bf-blue)}
#bf-book-mockup:has(.bf-reader,.bf-preview-toc,.bf-account) .bf-rows button{background:light-dark(#ffffff26,#ffffff04);box-shadow:none;border:0;border-block:1px solid var(--bf-line);padding:22px 12px;border-radius:0}
#bf-book-mockup:has(.bf-reader,.bf-preview-toc,.bf-account) .bf-book-index>section>h2{font:500 30px/1.3 'BF Reading',Georgia,serif;color:var(--bf-blue);margin-bottom:26px}
/* Profile on the left leaf; reading records on the right leaf. */
#bf-book-mockup:has(.bf-reader,.bf-preview-toc,.bf-account) .bf-account{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:90px;row-gap:20px;align-content:start}
#bf-book-mockup:has(.bf-reader,.bf-preview-toc,.bf-account) .bf-account>.bf-top{grid-column:1/-1;margin-bottom:10px}
#bf-book-mockup:has(.bf-reader,.bf-preview-toc,.bf-account) .bf-account-profile{grid-column:1;grid-row:2;margin:20px 0;align-items:flex-start;gap:20px}
#bf-book-mockup:has(.bf-reader,.bf-preview-toc,.bf-account) .bf-account-avatar{border-radius:3px;box-shadow:2px 3px 0 var(--bf-volume-edge),0 5px 12px #0002;transform:rotate(-2deg);flex-shrink:0}
#bf-book-mockup:has(.bf-reader,.bf-preview-toc,.bf-account) .bf-account-profile h1{font-size:36px;overflow-wrap:anywhere}
#bf-book-mockup:has(.bf-reader,.bf-preview-toc,.bf-account) .bf-account-stats{grid-column:1;grid-row:3;grid-template-columns:1fr;gap:0}
#bf-book-mockup:has(.bf-reader,.bf-preview-toc,.bf-account) .bf-account-stats section{border:0;border-bottom:1px solid var(--bf-line);padding:16px 0;display:grid;grid-template-columns:115px 1fr;gap:15px;align-items:center}
#bf-book-mockup:has(.bf-reader,.bf-preview-toc,.bf-account) .bf-account-stats strong{font:600 25px/1.3 'BF Reading',Georgia,serif;margin:0}
#bf-book-mockup:has(.bf-reader,.bf-preview-toc,.bf-account) .bf-account>section:nth-of-type(1):not(.bf-access){grid-column:2;grid-row:2}
#bf-book-mockup:has(.bf-reader,.bf-preview-toc,.bf-account) .bf-account>section:nth-of-type(2){grid-column:2;grid-row:3}
#bf-book-mockup:has(.bf-reader,.bf-preview-toc,.bf-account) .bf-account-actions{grid-column:1;grid-row:4;margin:8px 0}
#bf-book-mockup:has(.bf-reader,.bf-preview-toc,.bf-account) .bf-account>p{grid-column:1;grid-row:5;color:var(--bf-muted)}
#bf-book-mockup:has(.bf-reader,.bf-preview-toc,.bf-account) .bf-account>.bf-footer{grid-column:1/-1;margin-top:15px}
#bf-book-mockup:has(.bf-reader,.bf-preview-toc,.bf-account) .bf-account>h1,#bf-book-mockup:has(.bf-reader,.bf-preview-toc,.bf-account) .bf-account>.bf-access,#bf-book-mockup:has(.bf-reader,.bf-preview-toc,.bf-account) .bf-account>[role=alert]{grid-column:1/-1}
#bf-book-mockup:has(.bf-reader,.bf-preview-toc,.bf-account) .bf-account h2{font:500 30px/1.3 'BF Reading',Georgia,serif;color:var(--bf-blue);margin:20px 0}
#bf-book-mockup:has(.bf-reader,.bf-preview-toc,.bf-account) .bf-account details{border:0;border-block:1px solid var(--bf-line);background:light-dark(#ffffff20,#ffffff03)}
#bf-book-mockup:has(.bf-reader,.bf-preview-toc,.bf-account) .bf-account summary{font:500 22px/1.5 'BF Reading',Georgia,serif;padding:18px 8px}
/* A wide reading leaf; the spine stays in the margin, never through the prose. */
#bf-book-mockup:has(.bf-reader){--bf-volume-fold:25px}
#bf-book-mockup:has(.bf-reader) .bf-full>.bf-page{padding-inline:60px 46px}
#bf-book-mockup:has(.bf-reader) .bf-sheet:after{left:0;width:35px;background:linear-gradient(90deg,light-dark(#35271870,#000a),var(--bf-volume-shadow) 35%,transparent)}
#bf-book-mockup:has(.bf-reader,.bf-preview-toc,.bf-account) .bf-reader{padding-bottom:20px}
@media(max-width:900px){
 #bf-book-mockup:has(.bf-reader,.bf-preview-toc,.bf-account) .bf-account-profile{flex-direction:column}
 #bf-book-mockup:has(.bf-reader,.bf-preview-toc,.bf-account) .bf-account-stats section{grid-template-columns:1fr;gap:5px}
 #bf-book-mockup:has(.bf-reader,.bf-preview-toc,.bf-account) .bf-book-index,#bf-book-mockup:has(.bf-reader,.bf-preview-toc,.bf-account) .bf-account{column-gap:60px}
}
@media(max-width:700px){
 #bf-book-mockup:has(.bf-reader,.bf-preview-toc,.bf-account) .bf-stage{padding:14px 8px 30px}
 #bf-book-mockup:has(.bf-reader,.bf-preview-toc,.bf-account) .bf-binding{padding:8px 9px 17px 12px}
 #bf-book-mockup:has(.bf-reader,.bf-preview-toc,.bf-account) .bf-full>.bf-page{padding:20px 20px 24px 26px;min-height:calc(100vh - 80px)}
 #bf-book-mockup:has(.bf-reader,.bf-preview-toc,.bf-account) .bf-sheet:after{left:0;width:16px;background:linear-gradient(90deg,var(--bf-volume-shadow),transparent)}
 #bf-book-mockup:has(.bf-reader,.bf-preview-toc,.bf-account) .bf-book-index-title{max-width:none}
 #bf-book-mockup:has(.bf-reader,.bf-preview-toc,.bf-account) .bf-book-index{grid-template-columns:1fr;gap:26px;min-height:0}
 #bf-book-mockup:has(.bf-reader,.bf-preview-toc,.bf-account) .bf-book-index .bf-index{border-bottom:1px solid var(--bf-line);padding-bottom:16px}
 #bf-book-mockup:has(.bf-reader,.bf-preview-toc,.bf-account) .bf-account{display:flex;flex-direction:column;gap:20px}
 #bf-book-mockup:has(.bf-reader,.bf-preview-toc,.bf-account) .bf-account-profile{flex-direction:row;flex-wrap:wrap;margin:8px 0}
 #bf-book-mockup:has(.bf-reader,.bf-preview-toc,.bf-account) .bf-account-stats section{grid-template-columns:110px 1fr}
 #bf-book-mockup:has(.bf-reader,.bf-preview-toc,.bf-account) .bf-account-actions{order:0}
 #bf-book-mockup:has(.bf-reader,.bf-preview-toc,.bf-account) .bf-account>.bf-footer{margin-top:auto}
}

#bf-book-mockup[data-theme=dark]:has(.bf-reader,.bf-preview-toc,.bf-account){--bf-volume-texture:.06}

#bf-book-mockup:has(.bf-reader) .bf-sheet:before{background-size:600% 400%;background-position:70% 50%}
@media(max-width:700px){#bf-book-mockup:has(.bf-reader,.bf-preview-toc,.bf-account) .bf-sheet:before{background-size:600% 400%;background-position:70% 50%}}

#bf-book-mockup:has(.bf-reader) .bf-sheet:before{opacity:.12}
#bf-book-mockup[data-theme=dark]:has(.bf-reader) .bf-sheet:before{opacity:.045}
#bf-book-mockup:has(.bf-preview-toc) .bf-index .bf-part-copy{font:inherit}
/* Actual facing pages, each with its own paper and content. */
#bf-book-mockup:has(.bf-spread) .bf-spread{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;background:none;align-items:stretch}
#bf-book-mockup:has(.bf-spread) .bf-spread:before{background:none!important;box-shadow:none;opacity:0}
#bf-book-mockup:has(.bf-spread) .bf-spread:after{left:calc(50% - 18px);width:36px;z-index:3;background:linear-gradient(90deg,transparent,light-dark(#63421c35,#0006) 35%,light-dark(#37271870,#000b) 49%,light-dark(#fff4,#bdc8d81a) 54%,transparent);pointer-events:none}
#bf-book-mockup:has(.bf-spread) .bf-spread>.bf-page{display:flex;flex-direction:column;width:auto;max-width:none;min-height:690px;margin:0;padding:26px 38px 28px;gap:0;background-color:var(--bf-paper);isolation:isolate;position:relative;border-radius:4px 0 0 5px;box-shadow:inset 0 0 18px light-dark(#79562b15,#0003)}
#bf-book-mockup:has(.bf-spread) .bf-spread>.bf-page:last-child{padding-left:42px;border-radius:0 5px 10px 0}
#bf-book-mockup:has(.bf-spread) .bf-spread>.bf-page:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:var(--bf-paper-photo);background-size:600% 400%;background-position:70% 50%;opacity:.3;mix-blend-mode:multiply;border-radius:inherit}
#bf-book-mockup:has(.bf-spread) .bf-spread>.bf-page:last-child:before{background-position:70% 50%}
#bf-book-mockup[data-theme=dark]:has(.bf-spread) .bf-spread>.bf-page:before{opacity:.06;mix-blend-mode:luminosity}
#bf-book-mockup:has(.bf-spread) .bf-spread>.bf-page>*{min-width:0}
#bf-book-mockup:has(.bf-spread) .bf-spread .bf-top{min-height:70px;padding:0 0 20px;margin:0 0 32px;align-items:center;gap:12px;justify-content:space-between;flex-wrap:wrap}
#bf-book-mockup:has(.bf-spread) .bf-spread .bf-top>.bf-small{position:static;transform:none;font:16px/1.5 'BF Reading',Georgia,serif}
#bf-book-mockup:has(.bf-spread) .bf-spread .bf-controls{margin-left:auto;width:auto;gap:8px}
#bf-book-mockup:has(.bf-spread) .bf-spread .bf-footer{margin-top:auto;padding-top:25px;border-top:0;gap:14px;flex-wrap:wrap}
#bf-book-mockup:has(.bf-spread) .bf-spread .bf-footer span{font:14px/1.5 'BF Reading',Georgia,serif;color:var(--bf-muted)}
#bf-book-mockup:has(.bf-spread) .bf-spread .bf-book-index-title{max-width:none;display:flex;align-items:center;gap:18px;margin:0 0 28px}
#bf-book-mockup:has(.bf-spread) .bf-spread h1{font:500 38px/1.2 'BF Reading',Georgia,serif;color:var(--bf-blue);margin:0}
#bf-book-mockup:has(.bf-spread) .bf-spread h2{font:500 30px/1.3 'BF Reading',Georgia,serif;color:var(--bf-blue);margin:0 0 28px}
#bf-book-mockup:has(.bf-spread) .bf-spread .bf-leaf-subtitle{font-size:23px;color:var(--bf-muted);margin-bottom:16px}
#bf-book-mockup:has(.bf-spread) .bf-spread .bf-index{display:flex;flex-direction:column;gap:8px;margin:0 0 38px}
#bf-book-mockup:has(.bf-spread) .bf-spread .bf-index button{padding:15px 6px;display:flex;gap:15px;align-items:flex-start;font:22px/1.5 'BF Reading',Georgia,serif;background:transparent;border:0;border-bottom:1px solid var(--bf-line);box-shadow:none}
#bf-book-mockup:has(.bf-spread) .bf-spread .bf-index button[aria-pressed=true]{color:var(--bf-blue);border-bottom:2px solid var(--bf-blue)}
#bf-book-mockup:has(.bf-spread) .bf-spread .bf-part-copy{font:inherit}
#bf-book-mockup:has(.bf-spread) .bf-spread .bf-rows button{grid-template-columns:90px minmax(0,1fr) 20px;font:22px/1.4 'BF Reading',Georgia,serif;margin-bottom:16px}
#bf-book-mockup:has(.bf-spread) .bf-spread .bf-number{font:15px/1.4 'BF Reading',Georgia,serif;color:var(--bf-muted)}
#bf-book-mockup:has(.bf-spread) .bf-leaf-note{font:16px/1.7 'BF Reading',Georgia,serif;color:var(--bf-muted);margin:30px 0}
#bf-book-mockup:has(.bf-spread) .bf-leaf-intro{font:22px/1.7 'BF Reading',Georgia,serif;margin:28px 0}
#bf-book-mockup:has(.bf-spread) .bf-spread .bf-account-profile{display:flex;align-items:center;flex-direction:row;flex-wrap:wrap;gap:20px;margin:0 0 30px}
#bf-book-mockup:has(.bf-spread) .bf-spread .bf-account-stats{display:grid;grid-template-columns:1fr;margin:0 0 30px;gap:0}
#bf-book-mockup:has(.bf-spread) .bf-spread .bf-account-stats section{grid-template-columns:130px minmax(0,1fr);padding:19px 0}
#bf-book-mockup:has(.bf-spread) .bf-spread .bf-account-stats strong{font-size:24px}
#bf-book-mockup:has(.bf-spread) .bf-spread .bf-account-actions{display:flex;flex-wrap:wrap;margin:0 0 35px;gap:10px}
#bf-book-mockup:has(.bf-spread) .bf-spread .bf-account>section{margin:0 0 32px}
#bf-book-mockup:has(.bf-spread) .bf-spread .bf-account>.bf-access{padding:0;margin:0 0 28px;max-width:none}
@media(max-width:850px){
 #bf-book-mockup:has(.bf-spread) .bf-spread>.bf-page{padding-inline:24px}
 #bf-book-mockup:has(.bf-spread) .bf-spread>.bf-page:last-child{padding-left:28px}
 #bf-book-mockup:has(.bf-spread) .bf-spread .bf-account-stats section{grid-template-columns:1fr;gap:6px}
 #bf-book-mockup:has(.bf-spread) .bf-spread h1{font-size:32px}
 #bf-book-mockup:has(.bf-spread) .bf-spread .bf-book-index-title{flex-wrap:wrap}
}
@media(max-width:700px){
 #bf-book-mockup:has(.bf-spread) .bf-spread{grid-template-columns:1fr;gap:12px;background:transparent;box-shadow:none}
 #bf-book-mockup:has(.bf-spread) .bf-spread:after{display:none}
 #bf-book-mockup:has(.bf-spread) .bf-spread>.bf-page,#bf-book-mockup:has(.bf-spread) .bf-spread>.bf-page:last-child{padding:22px 24px;min-height:420px;border-radius:3px 6px 9px 3px;border:0;box-shadow:0 2px var(--bf-volume-edge),0 5px light-dark(#dac9a8,#353b44)}
 #bf-book-mockup:has(.bf-spread) .bf-spread .bf-top{margin-bottom:26px}
 #bf-book-mockup:has(.bf-spread) .bf-spread .bf-account-stats section{grid-template-columns:115px minmax(0,1fr)}
}

#bf-book-mockup:has(.bf-spread) .bf-spread .bf-index .bf-part-copy{font:22px/1.5 'BF Reading',Georgia,serif!important}

/* Keep the contents paper crop even when a reader route loads its bundled CSS later. */
#bf-book-mockup .bf-sheet.bf-full:before,
#bf-book-mockup .bf-sheet.bf-spread>.bf-page:before{
 background-size:600% 400%!important;
 background-position:70% 50%!important;
}

/* Keep the profile preview inside the paper, including long display names. */
#bf-book-mockup .bf-profile-preview{min-width:0}
#bf-book-mockup .bf-profile-preview>.bf-account-avatar{flex-shrink:0}
#bf-book-mockup .bf-profile-preview>span:last-child{min-width:0;overflow-wrap:anywhere}
@media(max-width:700px){
 #bf-book-mockup .bf-profile-preview{flex-direction:column;align-items:flex-start;gap:14px}
 #bf-book-mockup .bf-profile-preview>span:last-child{max-width:100%}
}