/* Yezbi Bookshelf header and front door (standalone plan, October 6, 2026).
   Placeholder brand colors for staging; the final icon and palette come with the later polish step.
   The header keeps its own colors so it reads the same on the family editor (Homeschool styles copy)
   and on the shared-experience pages (library, settings, family setup). */
.bs-shell-bar{--bs-bar:#1f3b33;--bs-fg:#f6f1e4;--bs-muted:#cfe0d6;--bs-accent:#e8a33d;--bs-line:rgba(246,241,228,.22);background:var(--bs-bar);color:var(--bs-fg);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}
.bs-shell-bar .bs-shell-brand{display:inline-flex;align-items:center;gap:10px;color:var(--bs-fg);font-weight:750;font-size:17px;letter-spacing:-.01em;text-decoration:none;margin-inline-end:auto;min-height:44px}
.bs-shell-bar .bs-shell-brand img{border-radius:8px;flex: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(--bs-line);background:rgba(246,241,228,.08)}
.bs-shell-bar .bs-shell-item[aria-current="page"]{background:var(--bs-fg);color:var(--bs-bar);border-color:var(--bs-fg)}
.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(--bs-accent);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){.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. */
.bs-shell-bar .bs-shell-menu{display:none}
@media (max-width:640px){
 .bs-shell-bar .bs-shell{flex-wrap:wrap;padding-block:6px}
 .bs-shell-bar .bs-shell-brand{flex-basis:auto;font-size: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(--bs-fg);color:var(--bs-bar)}
 .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}
}
/* Before sign-in the shared-experience styles are off, so Clerk's card keeps its own look. */
body.bs-page{margin:0;min-height:100vh}
body.bs-page:not(.learning-surface){background:#fbf7ee;color:#1d2b28;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}
@media (prefers-color-scheme:dark){body.bs-page:not(.learning-surface){background:#142b2b;color:#f2f6ed}}
/* 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}