/* Reading-Focused Japanese Aesthetic Typography & Mobile Layout */

:root {
  --scrollbar-thumb: #222938;
  --scrollbar-track: #07090c;
}

/* Safe Area Inset Support for Modern Mobile Viewports */
body {
  padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 1024px) {
  body {
    padding-bottom: 2rem;
  }
}

/* Custom Minimalist Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #354157;
}

/* Smooth Touch Scrolling on iOS */
.custom-scrollbar {
  -webkit-overflow-scrolling: touch;
}

/* Active lesson item */
.lesson-card {
  transition: all 0.18s ease-in-out;
  -webkit-tap-highlight-color: transparent;
}

.lesson-card.active-lesson {
  border-color: #e63946 !important;
  background-color: #171c26 !important;
  box-shadow: 0 0 0 1px rgba(230, 57, 70, 0.25);
}

.lesson-card.active-lesson::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14%;
  bottom: 14%;
  width: 3.5px;
  background-color: #e63946;
  border-radius: 0 3px 3px 0;
}

.lesson-card.completed-lesson .status-bullet {
  background-color: #22c55e;
  border-color: #16a34a;
  color: #ffffff;
}

/* Category Filter active pill */
.filter-btn {
  transition: all 0.15s ease-in-out;
  -webkit-tap-highlight-color: transparent;
}

.filter-btn.active {
  background-color: #e63946 !important;
  border-color: #e63946 !important;
  color: #ffffff !important;
}

/* Sentence breakdown card styling */
.example-card {
  background-color: #07090c;
  border: 1px solid #1f2737;
  border-radius: 0.875rem;
  padding: 0.875rem 1rem;
  transition: border-color 0.2s ease, transform 0.15s ease;
}

@media (min-width: 640px) {
  .example-card {
    padding: 1.125rem 1.25rem;
  }
}

.example-card:hover {
  border-color: #354157;
}

.japanese-text {
  font-family: "Noto Serif JP", serif;
  font-size: 1.0625rem;
  color: #f5efe6;
  letter-spacing: 0.04em;
  line-height: 1.6;
}

@media (min-width: 640px) {
  .japanese-text {
    font-size: 1.1875rem;
  }
}

.literal-text {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.725rem;
  color: #94a3b8;
  word-break: break-word;
}

/* Off-canvas Mobile Drawer State Transitions */
#sidebarContainer.drawer-open {
  transform: translateX(0) !important;
}