/* HSC ICT — shared app styles (on top of Tailwind CDN utility classes) */

:root {
  color-scheme: light;
}
html.dark {
  color-scheme: dark;
}

html, body {
  overscroll-behavior-y: none;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: "Hind Siliguri", "Noto Sans Bengali", ui-sans-serif, system-ui, sans-serif;
}

/* Hide scrollbars but keep scrolling (native app feel) */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Onboarding slider */
.snap-x-mandatory {
  scroll-snap-type: x mandatory;
}
.snap-center {
  scroll-snap-align: center;
}

/* Smooth page fade-in */
.app-fade-in {
  animation: appFadeIn .35s ease both;
}
@keyframes appFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Client-side route transitions (see HSC.navigate in app.js) */
#app-shell {
  transition: opacity .16s ease;
}
#app-shell.route-fade {
  opacity: 0;
}

/* Press feedback for tappable cards/buttons (native app feel) */
.tap {
  transition: transform .12s ease, opacity .12s ease;
}
.tap:active {
  transform: scale(0.97);
  opacity: .85;
}

/* Reading progress bar */
#reading-progress {
  transition: width .1s linear;
}

/* Reading font-size scale, applied to #reading-content */
.reading-sm { font-size: 0.9375rem; line-height: 1.9; }
.reading-base { font-size: 1.0625rem; line-height: 1.95; }
.reading-lg { font-size: 1.1875rem; line-height: 2; }
.reading-xl { font-size: 1.3125rem; line-height: 2.05; }

/* Bookmark star transition */
.bookmark-btn svg {
  transition: color .15s ease, transform .15s ease;
}
.bookmark-btn:active svg {
  transform: scale(1.25);
}

/* Timeline component (used inside chapters) */
.timeline-item {
  position: relative;
  padding-left: 1.5rem;
}
.timeline-item::before {
  content: "";
  position: absolute;
  left: 0.25rem;
  top: 0.35rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: currentColor;
}
.timeline-item::after {
  content: "";
  position: absolute;
  left: 0.5rem;
  top: 0.85rem;
  bottom: -1.25rem;
  width: 1px;
  background: currentColor;
  opacity: .25;
}
.timeline-item:last-child::after {
  display: none;
}

/* Safe-area padding for real mobile devices */
.pt-safe { padding-top: env(safe-area-inset-top); }
.pb-safe { padding-bottom: env(safe-area-inset-bottom); }