/* Pilcrow — final interaction overrides. Loaded after spike.css on purpose. */

#space-root,
#space-root + .reader-app { will-change: opacity, transform; }
.world-enter { opacity: 0; transform: translateX(12px); }
.world-exit { pointer-events: none; }
.world-exit-active { opacity: 0; transform: translateX(-12px); }

/* Match the lower navigation rhythm from the prototype. */
.space-bottom-nav-items { padding: 36px 12px 0; }
.reader-main-nav { padding: 30px 12px 0; }
.reader-main-library-icon img,
.reader-main-nav .is-active .reader-main-library-icon img {
  filter: none;
  opacity: 1;
}
.reader-main-nav button.is-active { color: #7a5dff; }

/* Reader chrome must float over the text instead of changing the EPUB height. */
.reader-shell:not([hidden]) { display: block; overscroll-behavior-x: none; }
.reader-shell[hidden] { display: none !important; }
.reader-stage { position: absolute; inset: 0; height: 100%; }
.reading-header {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  transition: opacity .32s ease, transform .48s cubic-bezier(.2,.75,.2,1);
}
.reader-homebar {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  transition: opacity .32s ease, transform .48s cubic-bezier(.2,.75,.2,1);
}
.reader-controls-hidden .reading-header {
  height: 91px;
  min-height: 91px;
  flex-basis: 91px;
  overflow: visible;
  opacity: 0;
  transform: translateY(-108%);
}
.reader-controls-hidden .reader-homebar {
  height: 149px;
  flex-basis: 149px;
  overflow: visible;
  opacity: 0;
  transform: translateY(108%);
}
.library-screen { overscroll-behavior-x: none; }

/* v43 — interaction repairs. This layer deliberately wins over the older
   prototype CSS, which contains several historical versions of these rules. */

/* Space: restore a compact four-item dock instead of the oversized interim one. */
.space-bottom-nav {
  height: 86px !important;
  border-radius: 24px 24px 0 0;
}
.space-bottom-nav-items {
  height: 70px !important;
  gap: 0 !important;
  padding: 14px 28px 0 !important;
}
.space-bottom-nav-items button {
  gap: 4px;
  font-size: 9px;
}
.space-nav-icon {
  width: 18px;
  height: 18px;
}
.space-home-indicator {
  bottom: 6px;
  width: 108px;
  height: 4px;
}

/* The card itself opens the book; controls inside it must remain tappable. */
.space-reading-copy,
.space-reading-status,
.space-reading-status > button,
.space-status-menu,
.space-status-menu button {
  pointer-events: auto !important;
}
.space-reading-card.is-status-open { overflow: visible; z-index: 10; }

/* Prevent Safari from auto-zooming the Explore search input on focus. */
@media (max-width: 719px) {
  .space-search input { font-size: 16px; }
}

/* Reader/Main: compact dock and a correctly assembled shelf glyph. */
.reader-main-nav {
  height: 86px;
  flex-basis: 86px;
  padding: 15px 12px 0 !important;
}
.reader-main-library-icon img {
  filter: grayscale(1) brightness(0) invert(1) !important;
  opacity: .9;
  object-fit: fill;
}
.reader-main-library-icon img:nth-child(1) { top: 1px; left: 0; width: 17px; height: 2px; }
.reader-main-library-icon img:nth-child(2) { top: 8px; left: 0; width: 17px; height: 2px; }
.reader-main-library-icon img:nth-child(3) { top: 15px; left: 0; width: 17px; height: 2px; }
.reader-main-library-icon img:nth-child(4) { top: 0; right: 0; left: auto; width: 7px; height: 20px; }
.reader-main-nav .is-active .reader-main-library-icon img {
  filter: none !important;
  opacity: 1;
}

/* The selected Reader status stays in place; choices unfold neatly below it. */
.featured-book-card.is-status-open { margin-bottom: 112px; }
.featured-book-card.is-status-open .book-status-panel {
  width: 189px;
  height: 164px;
  overflow: visible;
  border-radius: 16.75px;
}
.featured-book-card.is-status-open .book-status-chip { width: 98px; }
.status-menu {
  top: 39px;
  right: 3.5px;
  left: 3.5px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transform: translateY(-4px);
  animation: reader-status-menu-in .26s cubic-bezier(.2,.75,.2,1) .03s forwards;
}
.status-menu-choice {
  height: 27px;
  justify-content: flex-start;
  padding: 0 16px;
  border-radius: 13px;
  font-size: 9.6px;
}
@keyframes reader-status-menu-in {
  to { opacity: 1; transform: translateY(0); }
}

/* Reader chrome: move as one soft overlay and never draw separator strips. */
.reading-header,
.reader-homebar {
  background: #151515;
  transition: opacity .42s ease, transform .62s cubic-bezier(.2,.76,.2,1) !important;
}
.reading-header::after,
.reader-homebar::before { content: none !important; }
.reader-controls-hidden .reading-header { transform: translate3d(0, -112%, 0); }
.reader-controls-hidden .reader-homebar { transform: translate3d(0, 112%, 0); }

/* v44 — shared header rhythm and physical reading gestures. */
.space-logo-button,
.reader-main-logo {
  top: 52.93px !important;
  left: 26px !important;
  width: 63.75px;
  height: 18.73px;
}
.space-logo { display: block; width: 100%; height: 100%; }

/* The whole Space status rail is the tap target, not only its tiny label. */
.space-reading-status > .space-status-toggle {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  padding: 3.5px;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
}
.space-reading-copy > .space-reading-status,
.space-reading-status {
  /* The older direct-child rule clipped this exact dropdown at 35px high. */
  overflow: visible !important;
}
.space-reading-status > .space-status-menu {
  z-index: 12;
  pointer-events: auto;
}

/* v46 — Bottom Nav (Figma node 141:2832). The original exported vectors are
   intentionally used as images; the app only supplies their interaction. */
.space-bottom-nav {
  height: 128.016px !important;
  overflow: hidden;
  border-radius: 23.817px 23.817px 0 0 !important;
  background: #2b2b2b !important;
}
.space-bottom-nav-items {
  position: absolute;
  right: 0;
  bottom: 29.771px;
  left: 0;
  display: flex !important;
  width: 100%;
  height: auto !important;
  align-items: flex-start;
  justify-content: center;
  gap: 9.924px !important;
  padding: 14.885px 11.909px 0 !important;
}
.space-bottom-nav-items button {
  width: 58.768px;
  min-width: 58.768px;
  flex: 0 0 58.768px;
  gap: 5.359px;
  color: #ffeed7;
  font-family: "Geologica Pilcrow", var(--body);
  font-size: 10.718px;
  font-weight: 300;
  line-height: 14.29px;
}
.space-bottom-nav-items button.is-active { color: #7a5dff; font-weight: 400; }
.space-nav-icon {
  width: 21.435px !important;
  height: 21.435px !important;
  overflow: hidden;
}
.space-nav-icon::before,
.space-nav-icon::after { display: none !important; }
.space-nav-icon > img { position: absolute; display: block; max-width: none; }
.space-nav-icon--home > img:nth-child(1) { top: .893px; left: 1.786px; width: 17.863px; height: 19.649px; }
.space-nav-icon--home > img:nth-child(2) { top: 9.825px; left: 7.145px; width: 7.145px; height: 10.718px; }
.space-nav-icon--explore > img:nth-child(1) { top: 1.786px; left: 1.786px; width: 16.076px; height: 16.076px; }
.space-nav-icon--explore > img:nth-child(2) { top: 13.981px; left: 13.981px; width: 5.671px; height: 5.671px; }
.space-nav-icon--tops > img { top: 0; left: .817px; width: 19.8px; height: 21.429px; }
.space-nav-icon--profile > img:nth-child(1) { top: 12.503px; left: 2.679px; width: 16.076px; height: 7.145px; }
.space-nav-icon--profile > img:nth-child(2) { top: 1.786px; left: 6.25px; width: 8.93px; height: 8.93px; }
.space-home-indicator {
  bottom: 7.94px;
  width: 133.97px;
  height: 4.962px;
  background: #707070;
}
.space-status-toggle > i {
  flex: 1;
  padding-left: 20.5px;
  color: rgb(217 217 217 / 56%);
  font-size: 9.6px;
  font-style: normal;
  font-weight: 300;
}
.space-status-toggle > span {
  display: grid;
  width: 98px;
  height: 28px;
  padding: 0 7px;
  border-radius: 13.29px;
  place-items: center;
  background: var(--space-peach);
  color: var(--space-black);
  font-size: 9.6px;
  font-weight: 300;
  white-space: nowrap;
}

/* The centre reading area batches finger movement into animation frames.
   It preserves direct control while removing the previous jumpy micro-steps. */
.epub-reader .epub-container {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}