/* Load after app.css and preserved wizard-shelf.css. */
.shelf-layout{min-width:0}
.shelf-layout.is-shelf-view.folio-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:18px;align-items:start;margin-top:14px}
.bookshelf.folio-shelf{display:block;min-width:0;max-width:100%;margin:0;padding:0 0 8px;border:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent;overscroll-behavior-x:contain;isolation:isolate}
.folio-shelf .shelf-track{position:relative;display:flex;align-items:flex-end;width:max-content;min-width:calc(100% - 1px);min-height:354px;padding:60px 4px 12px 21px;gap:0}
.folio-shelf .shelf-track::after{content:'';position:absolute;z-index:-1;bottom:0;left:0;right:0;height:14px;background:url('assets/folio-ledge.png') center/100% 100% no-repeat}
.folio-shelf .spines{display:flex;flex-wrap:nowrap;align-items:flex-end;flex:0 0 auto;gap:1px;min-width:0;padding:0}
.folio-shelf .bookend-left{display:none}
.folio-shelf .bookend-right{display:block;flex:0 0 94px;width:94px;height:154px;margin:0 0 -1px -2px;border:0;border-radius:0;background:none}
.folio-shelf .bookend img{display:block;width:100%;height:100%;object-fit:contain;object-position:left bottom}
.folio-shelf .spine{position:relative;flex:0 0 var(--folio-w,85px);width:var(--folio-w,85px);height:var(--folio-h,274px);min-width:0;padding:0;border:0;border-radius:4px;background:transparent!important;box-shadow:none;color:var(--folio-ink,#283b46)!important;transform:none;transition:transform 160ms ease,filter 160ms ease;outline-offset:1px}
.folio-shelf .shelf-art{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain;object-position:center bottom;pointer-events:none;user-select:none}
.folio-shelf .spine-title{position:absolute;top:22%;bottom:18%;left:8%;right:8%;width:auto;height:auto;max-height:none;display:flex;align-items:center;justify-content:center;margin:0;padding:0;writing-mode:horizontal-tb;transform:none;text-align:center;white-space:normal;overflow:hidden;overflow-wrap:anywhere;text-overflow:ellipsis;color:inherit;font:400 var(--folio-title-size,22px)/1.2 Georgia,'Times New Roman',serif;letter-spacing:-.02em;text-shadow:none}
.folio-shelf .spine[data-title-direction='vertical'] .spine-title{top:15%;bottom:25%;left:50%;right:auto;width:1.2em;display:block;writing-mode:vertical-rl;transform:translateX(-50%);white-space:nowrap;text-align:center;letter-spacing:0}
.folio-shelf .spine[data-title-direction='horizontal'] .spine-title{top:15%;bottom:46%;left:12%;right:12%}
.folio-shelf .spine-progress{position:absolute;left:0;right:0;bottom:15px;color:inherit;text-align:center;font:11px/1 var(--font-ui);opacity:.8}
.folio-shelf .spine:hover{transform:translateY(-3px);filter:brightness(1.025)}
.folio-shelf .spine.is-open{transform:translateY(-5px);outline:1.5px solid var(--accent,#3e5c6c);outline-offset:0;filter:none;box-shadow:none}
.folio-shelf .spine:focus-visible{outline:2px solid var(--accent,#3e5c6c);outline-offset:3px}
.shelf-style-pick{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;font-size:14px;color:var(--ink-2)}
.shelf-style-pick select{border:1px solid var(--line);border-radius:5px;background:transparent;color:var(--ink);padding:9px 10px;font:inherit}
.shelf-layout.is-shelf-view.folio-layout #grid{display:block;min-width:0}
.shelf-layout.is-shelf-view.folio-layout #grid>.note:not([hidden]){margin:0;min-height:394px;grid-row-end:auto!important}
.shelf-layout.is-shelf-view.folio-layout #grid .tape{padding-top:25px;min-height:78px}
.shelf-layout.is-shelf-view.folio-layout #grid .tape .title{font-size:42px;height:54px;letter-spacing:-.035em}
.shelf-layout.is-shelf-view.folio-layout #grid .note .body,.shelf-layout.is-shelf-view.folio-layout #grid .note .body-view{font-size:20px;line-height:1.6;max-height:55vh}
.shelf-layout.wizard-layout{display:block;margin-top:14px}
@media(max-width:1100px){.shelf-layout.is-shelf-view.folio-layout{grid-template-columns:minmax(0,1fr);gap:20px}.folio-shelf .shelf-track{min-height:332px;padding-top:38px}.shelf-layout.is-shelf-view.folio-layout #grid{max-width:760px}}
@media(max-width:640px){.folio-shelf .shelf-track{min-height:316px;padding-top:22px}.shelf-style-pick{font-size:13px}.shelf-style-pick select{padding:6px 7px}.shelf-layout.is-shelf-view.folio-layout{margin-top:10px;gap:14px}.shelf-layout.is-shelf-view.folio-layout #grid .tape .title{font-size:30px;height:42px}.shelf-layout.is-shelf-view.folio-layout #grid .note .body{font-size:16px}}
@media(prefers-reduced-motion:reduce){.folio-shelf .spine{transition:none}}