/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

 @import "tailwindcss";

/* ===== Shared Utilities ===== */

/* Hide scrollbar but keep scroll functionality */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* Image loading shimmer skeleton */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.img-skeleton {
  background: linear-gradient(90deg, #e8e0cb 25%, #fbf7e8 50%, #e8e0cb 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* Bottom safe area for gesture-bar phones */
.safe-bottom { padding-bottom: env(safe-area-inset-bottom, 0); }

/* ===== PWA standalone display-mode polish (Mobile M1.5) =====
   When launched from the home screen with viewport-fit=cover +
   apple-mobile-web-app-status-bar-style=black-translucent, the iOS status
   bar overlays content. Push the layout header down by the top inset so
   the indigo bar covers the status-bar zone but its content stays clear. */
@media (display-mode: standalone) {
  header.app-shell-header {
    height: auto;
    min-height: calc(4rem + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
  }
}
@media (display-mode: standalone) and (min-width: 768px) {
  header.app-shell-header {
    min-height: calc(5rem + env(safe-area-inset-top, 0px));
  }
}

/* Suppress browser pull-to-refresh inside the installed PWA — feels wrong
   inside an app shell — and inside the immersive reader. Marketing pages in
   regular browsers keep the default behavior. */
@media (display-mode: standalone) {
  html, body { overscroll-behavior-y: contain; }
}
body.fullscreen-reader,
body.immersive-reading { overscroll-behavior-y: contain; }

/* Fade edges for horizontal scroll containers */
.scroll-fade-edges {
  mask-image: linear-gradient(to right, transparent, black 1rem, black calc(100% - 1rem), transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 1rem, black calc(100% - 1rem), transparent);
}

/* ===== Content-Length-Based Font Sizing ===== */
/* Mirrors BookReader's determineOptimalFontSize: <350 chars = large, 350-499 = medium, 500+ = small */

/* Mobile font sizes */
.scene-font-small  { font-size: 0.95rem; line-height: 1.85; }
.scene-font-medium { font-size: 1.1rem;  line-height: 1.9; }
.scene-font-large  { font-size: 1.25rem; line-height: 1.95; }

/* Tablet (sm+) */
@media (min-width: 640px) {
  .scene-font-small  { font-size: 1.0rem;  line-height: 1.85; }
  .scene-font-medium { font-size: 1.15rem; line-height: 1.9; }
  .scene-font-large  { font-size: 1.35rem; line-height: 1.95; }
}

/* Desktop (lg+) */
@media (min-width: 1024px) {
  .scene-font-small  { font-size: 1.05rem; line-height: 1.85; }
  .scene-font-medium { font-size: 1.2rem;  line-height: 1.9; }
  .scene-font-large  { font-size: 1.4rem;  line-height: 2.0; }
}

/* ===== Mobile Scene Slide/Snap Feel ===== */
/* Vertical scroll-snap on mobile gives page-turning feel without affecting SEO */
.scene-snap-container {
  scroll-snap-type: y proximity;  /* proximity = snaps when close, doesn't fight scroll */
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 1024px) {
  .scene-snap-container { scroll-snap-type: none; }
}

.scene-snap-item {
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}

/* Scene entrance animation — fade-in-up on scroll */
@keyframes sceneSlideIn {
  from {
    opacity: 0.3;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.scene-animate-in {
  animation: sceneSlideIn 0.4s ease-out both;
}

/* ===== Toggle Switch (Notification Preferences) ===== */
.toggle-switch {
  display: block;
  position: relative;
  width: 2.75rem;
  height: 1.5rem;
  background-color: #D1D5DB;
  border-radius: 9999px;
  cursor: pointer;
  transition: background-color 0.2s;
  flex-shrink: 0;
}
.toggle-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1.25rem;
  height: 1.25rem;
  background-color: white;
  border-radius: 9999px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  transition: transform 0.2s;
}
input:checked + .toggle-switch {
  background-color: #4F46E5;
}
input:checked + .toggle-switch::after {
  transform: translateX(1.25rem);
}