.sl-shell {
  /* Match the typography used by Sofia's Tailwind chat panel everywhere in
     the canonical reader, including headings and editorial titles. */
  font-family: ui-sans-serif, system-ui, sans-serif;
  /* ScrollLit/Sofia uses a neutral white paper surface in the light theme.
     Keep this scoped to the canonical shell so other reader surfaces retain
     their existing theme palette. */
  --app-canvas: #fff;
  --app-surface: #fff;
  --app-raised: #fff;
  --app-ink: #111827;
  --app-muted: #64748b;
  --app-border: rgb(148 163 184 / 35%);
  --app-hover: rgb(148 163 184 / 14%);
  --app-shadow: rgb(15 23 42 / 14%);
  background: #fff;
}

.sl-shell {
  min-height: 100dvh;
  background: var(--app-canvas);
  color: var(--app-ink);
}

body.sl-shell {
  background: #fff;
}

/* Some legacy detail styles set a serif face directly on titles and prose.
   Keep the canonical reader typography aligned with Sofia across every
   descendant, including those older component rules. */
.sl-shell,
.sl-shell * {
  font-family: ui-sans-serif, system-ui, sans-serif !important;
}

html:has(.book-shell),
html:has(.book-shell) body,
.sl-shell,
.book-shell,
.book-shell .book-pane,
.book-shell .book-main,
.book-shell .book-content-scroll,
.book-shell #main-panel,
.sl-shell__sofia,
.sl-shell__sofia .site-ai-v2-panel,
.sl-shell .sl-sofia-story {
  background: #fff;
}

.sl-shell :is(.chapter-detail-event, .mobile-event-timeline-item) {
  background: #fff;
}

.sl-shell__header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.25rem;
  padding: .75rem 1.25rem;
  border-bottom: 1px solid color-mix(in srgb, var(--app-border) 75%, transparent);
  background: color-mix(in srgb, var(--app-surface) 92%, transparent);
  backdrop-filter: blur(16px);
}

.sl-shell__brand { color: var(--app-ink); font-size: 1rem; font-weight: 800; letter-spacing: -.03em; }
.sl-shell__main { min-height: 100dvh; padding: 5.5rem 1.25rem 2rem; margin-right: clamp(24rem, 30vw, 36rem); }
.sl-shell__main--library { padding-top: 2rem; }
.sl-shell__sofia { position: fixed; inset: 0 0 0 auto; z-index: 70; width: clamp(24rem, 30vw, 36rem); min-width: 24rem; background: var(--app-surface); border-left: 1px solid var(--app-border); }
.sl-shell__sofia .site-ai-v2-panel { position: absolute !important; inset: 0 !important; width: 100% !important; min-width: 0 !important; max-width: none !important; box-shadow: none !important; }
.sl-shell__sofia--global .sl-global-sofia-placeholder { display: flex; height: 100%; flex-direction: column; justify-content: flex-end; padding: 1rem; }
.sl-global-sofia-placeholder textarea { width: 100%; resize: none; border: 1px solid var(--app-border); border-radius: 1rem; background: var(--app-canvas); padding: .9rem; color: var(--app-muted); }
.sl-global-more { position: relative; }
.sl-global-more__button { display: inline-flex; align-items: center; gap: .5rem; border-radius: .75rem; padding: .55rem .8rem; color: var(--app-ink); font-size: .875rem; font-weight: 700; }
.sl-global-more__button:hover { background: color-mix(in srgb, var(--app-border) 35%, transparent); }
.sl-global-more__menu { min-width: 19rem; max-height: min(80dvh, 42rem); overflow-y: auto; margin: 0; border: 1px solid var(--app-border); border-radius: 1rem; background: var(--app-surface); padding: .5rem; box-shadow: 0 1rem 3rem rgb(15 23 42 / .18); }
.sl-global-more__menu::backdrop { background: transparent; }
.sl-global-more__section + .sl-global-more__section { margin-top: .35rem; border-top: 1px solid var(--app-border); padding-top: .35rem; }
.sl-global-more__section-label { padding: .45rem .65rem .25rem; color: var(--app-muted); font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.sl-global-more__link { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: .75rem; border-radius: .7rem; padding: .65rem; color: var(--app-ink); font-size: .875rem; text-align: left; }
.sl-global-more__link:hover { background: color-mix(in srgb, var(--app-border) 35%, transparent); }
.sl-global-more__form { margin: 0; }

.sl-book-landing-navigation { display: grid; gap: 1.25rem; margin-top: 2rem; }
.sl-book-landing-navigation__section { min-width: 0; border: 1px solid var(--app-border); border-radius: 1rem; background: var(--app-surface); padding: 1rem; }
.sl-book-landing-navigation__heading { margin: 0; color: var(--app-ink); font-size: 1.1rem; font-weight: 800; }
.sl-book-landing-navigation__subheading { margin: 1rem 0 .55rem; color: var(--app-muted); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.sl-book-landing-navigation__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .7rem; }
.sl-book-landing-card { display: flex; min-width: 0; flex-direction: column; gap: .45rem; border: 1px solid var(--app-border); border-radius: .8rem; padding: .5rem; color: var(--app-ink); transition: border-color .15s ease, background-color .15s ease, transform .15s ease; }
.sl-book-landing-card:hover { border-color: var(--app-accent); background: color-mix(in srgb, var(--app-accent) 7%, var(--app-surface)); transform: translateY(-1px); }
.sl-book-landing-card.is-locked { opacity: .55; filter: grayscale(.8); }
.sl-book-landing-card__media { display: flex; min-width: 0; align-items: center; justify-content: center; overflow: hidden; border-radius: .55rem; background: color-mix(in srgb, var(--app-border) 45%, transparent); color: var(--app-muted); font-weight: 800; }
.sl-book-landing-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sl-book-landing-card__title { min-width: 0; overflow: hidden; color: var(--app-ink); font-size: .78rem; font-weight: 700; line-height: 1.25; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.narrative-element-tile__badge { position: absolute; bottom: 0; left: 50%; display: grid; width: 2.15rem; height: 2.15rem; place-items: center; transform: translate(-50%, 50%); border: 2px solid #111; border-radius: 50%; background: #fff; color: #111; font-size: .7rem; font-weight: 800; line-height: 1; }
.sl-book-landing-navigation__empty { margin: .5rem 0 0; color: var(--app-muted); font-size: .875rem; }

@media (max-width: 1023px) {
  .sl-shell__header { min-height: 3.75rem; padding: .55rem .75rem; }
  .sl-shell__main { margin-right: 0; padding: 4.75rem .75rem 6rem; }
  .sl-shell__main--library { padding-top: .75rem; }
  .sl-shell__sofia { position: relative; inset: auto; width: 100%; min-width: 0; min-height: 18rem; border-left: 0; border-top: 1px solid var(--app-border); }
  .sl-shell__sofia .site-ai-v2-panel { position: relative !important; min-height: 18rem; }
}