/* Yezbi Bookshelf header and front door (standalone plan, October 6, 2026).
   Yezbi brand (Derek, October 8, 2026; shared/brand/README.md): the header is the brand bar, white in Light and the
   approved slate in Dark, with the full-color logo straight on it (no white plate). It starts with the lockup, Yezbi
   wordmark → "Bookshelf" → the Bookshelf icon (markup from /shared/brand/brand-header.js, styles from brand-header.css).
   Colors are the --yz-* tokens (/shared/brand/yezbi-tokens.css), which follow data-yezbi-theme on <html>, so the header
   reads the same on the family editor (Homeschool styles copy) and on the shared-experience pages (settings, family setup). */
.bs-shell-bar{--bs-bar:var(--yz-header-bg);--bs-fg:var(--yz-text);--bs-muted:var(--yz-muted);--bs-accent:var(--yz-primary);--bs-line:var(--yz-control-border);background:var(--bs-bar);color:var(--bs-fg);border-bottom:1px solid var(--yz-header-border);position:relative;z-index:30;box-sizing:border-box;width:100%;font:15px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif}
.bs-shell-bar *{box-sizing:border-box}
.bs-shell-bar .bs-shell{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;max-width:1040px;margin:0 auto;padding:10px max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left));background:none;border:0;color:inherit}
/* The lockup is 21px on wider screens (wordmark and icon 31.5px tall), as in Homeschool's header. Its 44px target comes
   from padding on the link, never from the three parts, which keep their shared baseline (brand-header.css). */
.bs-shell-bar .bs-shell-brand{--yezbi-brand-size:21px;margin-inline-end:auto;padding:max(2px,calc((44px - 1.55em)/2)) 4px;color:var(--yz-brand-name);text-decoration:none}
.bs-shell-bar .bs-shell-nav{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:0;padding:0}
.bs-shell-bar .bs-shell-nav[hidden]{display:none}
.bs-shell-bar .bs-shell-item{display:inline-flex;align-items:center;min-height:40px;margin:0;padding:8px 12px;border:1px solid transparent;border-radius:999px;background:transparent;color:var(--bs-fg);font:inherit;font-size:15px;font-weight:600;line-height:1.2;text-decoration:none;cursor:pointer;white-space:nowrap;box-shadow:none}
.bs-shell-bar .bs-shell-item:hover{border-color:var(--yz-border);background:var(--yz-raised)}
/* The current page: soft blue with a blue edge, as Homeschool marks its current page. */
.bs-shell-bar .bs-shell-item[aria-current="page"]{background:var(--yz-primary-soft);color:var(--yz-primary-hover);border-color:var(--yz-primary)}
.bs-shell-bar .bs-shell-item[hidden]{display:none}
.bs-shell-bar .bs-shell-item:disabled{opacity:.6;cursor:default}
.bs-shell-bar .bs-shell-app{color:var(--bs-accent)}
.bs-shell-bar :focus-visible{outline:3px solid var(--yz-focus);outline-offset:2px}
.bs-shell-bar .bs-shell-status{flex-basis:100%;margin:0;color:var(--bs-muted);font-size:14px}
.bs-shell-bar .bs-shell-status:empty{display:none}
@media (max-width:640px),(max-width:1023px) and (max-height:500px){.bs-shell-bar .bs-shell{gap:4px 8px}.bs-shell-bar .bs-shell-brand{flex-basis:100%}.bs-shell-bar .bs-shell-item{min-height:40px;padding:6px 10px;font-size:14px}}
/* Phones (October 7, 2026): one row with the brand and a Menu button; the links open as a full-width list with 44px rows.
   Since the brand lockup (October 8, 2026), phones held sideways (844 by 390) use the same row, so the header stays one line. */
.bs-shell-bar .bs-shell-menu{display:none}
@media (max-width:640px),(max-width:1023px) and (max-height:500px){
 .bs-shell-bar .bs-shell{flex-wrap:wrap;padding-block:6px}
 .bs-shell-bar .bs-shell-brand{flex-basis:auto;--yezbi-brand-size:clamp(13px,4vw,16px)}
 .bs-shell-bar .bs-shell-menu:not([hidden]){display:inline-flex;align-items:center;gap:8px;min-height:44px;min-width:44px;margin:0;padding:8px 14px;border:1px solid var(--bs-line);border-radius:999px;background:transparent;color:var(--bs-fg);font:inherit;font-size:15px;font-weight:650;cursor:pointer}
 .bs-shell-bar .bs-shell-menu[aria-expanded="true"]{background:var(--yz-primary-soft);border-color:var(--yz-primary);color:var(--yz-primary-hover)}
 .bs-shell-bar .bs-shell-menu-icon,.bs-shell-bar .bs-shell-menu-icon::before,.bs-shell-bar .bs-shell-menu-icon::after{display:block;width:16px;height:2px;border-radius:2px;background:currentColor}
 .bs-shell-bar .bs-shell-menu-icon{position:relative}.bs-shell-bar .bs-shell-menu-icon::before,.bs-shell-bar .bs-shell-menu-icon::after{content:"";position:absolute;left:0}.bs-shell-bar .bs-shell-menu-icon::before{top:-5px}.bs-shell-bar .bs-shell-menu-icon::after{top:5px}
 .bs-shell-bar .bs-shell-nav{display:none;flex-basis:100%;flex-direction:column;align-items:stretch;gap:2px;padding:4px 0 6px}
 .bs-shell-bar .bs-shell-nav.is-open:not([hidden]){display:flex}
 .bs-shell-bar .bs-shell-nav .bs-shell-item{min-height:44px;padding:10px 14px;border-radius:12px;font-size:16px;white-space:normal;justify-content:flex-start;text-align:left}
}
/* Before sign-in the shared-experience styles are off, so Clerk's card keeps its own look. The page is the brand's
   neutral paper or deep slate, following the device's light or dark setting (js/bookshelf-shell.js, data-yezbi-theme). */
body.bs-page{margin:0;min-height:100vh}
body.bs-page:not(.learning-surface){background:var(--yz-background);color:var(--yz-text);font:16px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif}
body.bs-page:not(.learning-surface) main{max-width:1040px;margin:auto;padding:24px 20px}
/* The family editor loads Homeschool's styles without its sidebar or tab bar. */
body.parent-page.bookshelf-app{padding-bottom:0}
body.bookshelf-app .bs-shell-bar .bs-shell{max-width:none;padding-inline:max(24px,env(safe-area-inset-left)) max(24px,env(safe-area-inset-right))}
/* Signed-out pages: a Bookshelf heading above Clerk's card. */
.bs-signin{max-width:480px;margin:24px auto;text-align:center}
.bs-signin .bs-eyebrow{margin:0;font-size:.85rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.bs-signin h1{margin:.2em 0 .3em}
/* Clerk's card is centered under the heading at every width. Clerk swaps the mount element's own classes for
   cl-rootBox, so the flex centering sits on a wrapper Clerk never touches (October 7, 2026). */
.bs-signin-mount{display:flex;justify-content:center;margin:12px auto 32px}
.bs-signin-mount>[data-signin]{min-width:0;max-width:100%}
/* Clerk sign-in card, matching Yezbi Homeschool (October 6, 2026): the page has its own heading, and the
   app's form styles must not leak into Clerk's white card. */
html .cl-rootBox .cl-headerTitle, html .cl-rootBox .cl-headerSubtitle { display: none !important; }
html .cl-rootBox input.cl-formFieldInput { background: #ffffff !important; color: #1d2b28 !important; border: 1px solid #c9d3cc !important; }
html .cl-rootBox input.cl-formFieldInput::placeholder { color: #6b7a74 !important; opacity: 1; }
html .cl-rootBox .cl-socialButtonsBlockButton { background: #ffffff !important; color: #1d2b28 !important; border: 1px solid #c9d3cc !important; }
html .learning-surface .cl-rootBox button, html .learning-surface .cl-rootBox input { min-height: 0; margin: 0; }
/* Family shelf setup */
.bs-family-form .bs-optional{font-weight:400;color:var(--lp-muted)}
/* My library on phones (October 7, 2026): the list comes first; the add form opens from "Add a book" (js/bookshelf-entry.mjs). */
.bs-add-bar{display:none}
.bs-library-phone .bs-add-bar{display:block;margin:14px 0 6px}
.bs-library-phone form[data-add]:not(.bs-add-open){display:none}
.learning-surface .bs-library-phone .bs-add-bar [data-add-toggle]{display:block;width:100%;margin:0;background:var(--lp-accent);border-color:var(--lp-accent);color:var(--lp-bg)}
.learning-surface .bs-library-phone .bs-add-bar [data-add-toggle][aria-expanded="true"]{background:var(--lp-card);border-color:var(--lp-line);color:var(--lp-fg)}
.bs-add-bar [data-add-status]{margin:8px 0 0}
.bs-add-bar [data-add-status]:empty{display:none}
.learning-surface .bs-library-filters{margin:4px 0 8px}
/* Phone disclosures (Filters, download, import) open from a full 44px row. */
.learning-surface .bs-library-phone details{padding:0 14px;border-radius:12px}
.learning-surface .bs-library-phone details[open]{padding-bottom:12px}
.bs-library-phone details>summary{box-sizing:border-box;min-height:44px;padding-block:10px}
/* My library covers (October 7, 2026): the family shelf's cover frame and colored title spine (css/bookshelf-covers.css)
   beside each book and in its edit form; Find missing covers sits under the list when a visit stops early. */
.learning-surface .library-book-with-cover{display:grid;grid-template-columns:72px minmax(0,1fr);gap:4px 16px;align-items:start}
.library-book-cover{width:72px;height:108px;background:var(--lp-line)}
.library-book-body{min-width:0}
.library-book-body>h3{overflow-wrap:anywhere}
.library-edit-heading{display:flex;align-items:center;gap:14px;margin-bottom:8px}
.library-edit-heading>h3{margin:0}
.library-edit-cover{width:56px;height:84px;background:var(--lp-line)}
.library-book-cover .shelf-spine-title{font-size:.7rem;-webkit-line-clamp:5}.library-book-cover .shelf-spine-author{font-size:.6rem}
.bs-cover-tools{margin:12px 0}
.bs-cover-tools [data-cover-status]{margin:6px 0 0}
.bs-cover-tools [data-cover-status]:empty{display:none}
@media (max-width:767px){
 .learning-surface .library-book-with-cover{grid-template-columns:60px minmax(0,1fr);gap:4px 12px}
 .library-book-cover{width:60px;height:90px}
 .library-book-cover .shelf-spine-title{font-size:.62rem}
}