/* ==========================================================================
   Page-Specific Layouts & Overrides (Pages 1 to 20)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Common Page Structure
   -------------------------------------------------------------------------- */
.page-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  width: 100%;
}

.page-header-card {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  border: 2px solid var(--color-border);
  padding: var(--space-lg);
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.section-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: var(--space-xs);
}

.instruction-text {
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--color-text);
  margin-top: var(--space-xs);
}

.page-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  border: 2px solid var(--color-border);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
}

/* --------------------------------------------------------------------------
   Page 1: Cover Page
   -------------------------------------------------------------------------- */
.cover-hero {
  background: radial-gradient(circle at center 20%, #FFFDF9 0%, #FFF0DE 100%);
  border: 3px solid #FFD9A0;
  padding: var(--space-2xl) var(--space-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-md);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

.cover-badge {
  background: var(--color-primary);
  color: #FFFFFF;
  padding: 4px 16px;
  border-radius: var(--radius-full);
  font-weight: 800;
  font-size: var(--text-sm);
  letter-spacing: 1.5px;
}

.cover-title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  color: var(--color-primary-dark);
  line-height: 1.15;
}

.cover-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  width: 100%;
  max-width: 480px;
  margin-top: var(--space-sm);
}

/* --------------------------------------------------------------------------
   Page 2: Age Number Picker
   -------------------------------------------------------------------------- */
.number-picker-group {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  width: 100%;
}

.number-picker-btn {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
  border-radius: var(--radius-full);
  background-color: var(--color-surface);
  border: 3px solid var(--color-border);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.number-picker-btn:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
}

.number-picker-btn.selected {
  background-color: var(--color-primary);
  border-color: var(--color-primary-dark);
  color: #FFFFFF;
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.35);
}

/* --------------------------------------------------------------------------
   Page 5: Body Clues & Hotspot Cards
   -------------------------------------------------------------------------- */
.body-clues-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  width: 100%;
}

.body-clue-card {
  background: var(--color-surface);
  border: 2.5px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-md) var(--space-xs);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-xs);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-bounce);
  user-select: none;
}

.body-clue-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.body-clue-card.active {
  background-color: #EFEBFF;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.35);
  transform: scale(1.04);
}

.body-clue-icon {
  font-size: 2.5rem;
  line-height: 1;
}

.body-clue-title {
  font-size: var(--text-base);
  font-weight: 800;
  color: var(--color-text);
}

.body-clue-desc {
  font-size: var(--text-xs);
  color: var(--color-text-light);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   Page 8: Steps Flow
   -------------------------------------------------------------------------- */
.steps-flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
  width: 100%;
}

.step-card {
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-xs);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.step-number {
  background: var(--color-primary);
  color: #FFFFFF;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-icon {
  font-size: 1.75rem;
}

.step-title {
  font-size: var(--text-sm);
  font-weight: 800;
}

/* --------------------------------------------------------------------------
   Page 9: Toolbox Tray & Grid
   -------------------------------------------------------------------------- */
.toolbox-tray-container {
  background: linear-gradient(180deg, #FBF8F2 0%, #F5EDE0 100%);
  border: 3px solid #E6D7C3;
  border-radius: var(--radius-2xl);
  padding: var(--space-lg);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.05);
}

.toolbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--space-md);
  width: 100%;
}

.toolbox-card {
  background: #FFFFFF;
  border: 2.5px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-lg) var(--space-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-xs);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-bounce);
  user-select: none;
}

.toolbox-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

.toolbox-card.selected {
  background: #EFEBFF;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb), 0.3);
  transform: scale(1.05);
}

.toolbox-icon {
  font-size: 2.5rem;
  line-height: 1;
}

.toolbox-name {
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--color-text);
}

.affirmation-box {
  background: linear-gradient(135deg, #FFF6E5 0%, #FFEAD2 100%);
  border: 2px dashed #FFA834;
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
}

/* --------------------------------------------------------------------------
   Page 10: Sentence Builder
   -------------------------------------------------------------------------- */
.sentence-builder-card {
  background: #FDFBF7;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  text-align: center;
  width: 100%;
}

.sentence-preview-bubble {
  background: #FFFFFF;
  border: 2.5px solid var(--color-primary-light);
  border-radius: var(--radius-full);
  padding: 12px 24px;
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--color-primary-dark);
  box-shadow: var(--shadow-sm);
  max-width: 100%;
  animation: bounceIn 0.3s ease;
}

.sentence-picker-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  width: 100%;
  align-items: center;
}

.sentence-picker-label {
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--color-text-light);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Page 11: Friendship Qualities
   -------------------------------------------------------------------------- */
.friend-qualities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: var(--space-sm);
  width: 100%;
}

.friend-quality-card {
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-xs);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}

.friend-quality-icon {
  font-size: 2rem;
}

.friend-quality-label {
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--color-text);
}

/* --------------------------------------------------------------------------
   Page 12: Situation Feelings List
   -------------------------------------------------------------------------- */
.situations-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-md);
  width: 100%;
}

.situation-item-card {
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  box-shadow: var(--shadow-sm);
}

.situation-item-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-base);
  font-weight: 800;
  color: var(--color-text);
}

.situation-badge {
  background: var(--color-primary);
  color: #FFFFFF;
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: 800;
}

/* --------------------------------------------------------------------------
   Page 13: Perspective Comparison
   -------------------------------------------------------------------------- */
.perspective-illustration-card {
  background: linear-gradient(135deg, #F9F6FF 0%, #EFEBFF 100%);
  border: 2px solid var(--color-primary-light);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-md);
}

.perspective-characters {
  display: flex;
  justify-content: center;
  gap: var(--space-2xl);
  width: 100%;
  margin: var(--space-xs) 0;
}

.perspective-person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.perspective-person-avatar {
  font-size: 3rem;
}

.perspective-person-bubble {
  background: #FFFFFF;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 6px 12px;
  font-size: var(--text-sm);
  font-weight: 800;
  box-shadow: var(--shadow-sm);
}

.perspective-badge {
  background: var(--color-primary);
  color: #FFFFFF;
  padding: 4px 16px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Page 14: My Choices
   -------------------------------------------------------------------------- */
.choices-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-md);
  width: 100%;
}

.choice-card {
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-lg) var(--space-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-xs);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-fast);
}

.choice-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-primary);
}

.choice-card.selected {
  background: #EFEBFF;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb), 0.3);
  transform: scale(1.03);
}

.choice-icon {
  font-size: 2.5rem;
}

.choice-label {
  font-size: var(--text-base);
  font-weight: 800;
  color: var(--color-text);
}

.selected-choice-banner {
  background: linear-gradient(135deg, #E8F8F0 0%, #D4F4E4 100%);
  border: 2px solid var(--color-calm);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  font-size: var(--text-lg);
  font-weight: 800;
  color: #1E633C;
}

/* --------------------------------------------------------------------------
   Page 15: Story Flow Steps
   -------------------------------------------------------------------------- */
.story-flow-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  width: 100%;
}

.story-step-card {
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.story-step-header {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-base);
  font-weight: 800;
  color: var(--color-primary-dark);
}

.story-step-num {
  background: var(--color-primary);
  color: #FFFFFF;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: var(--text-xs);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   Page 16: Science Investigation
   -------------------------------------------------------------------------- */
.science-question-banner {
  background: linear-gradient(135deg, #EBF5FF 0%, #D8ECFE 100%);
  border: 2px solid #90CDF4;
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
}

.science-question-title {
  font-size: var(--text-xl);
  font-weight: 800;
  color: #1A365D;
}

.science-comparison-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  width: 100%;
}

.science-phase-card {
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* --------------------------------------------------------------------------
   Page 18: Expression Methods
   -------------------------------------------------------------------------- */
.express-methods-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: var(--space-sm);
  width: 100%;
}

.express-method-card {
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-xs);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}

.express-method-icon {
  font-size: 2rem;
}

.act-it-out-banner {
  background: linear-gradient(135deg, #FFF4E5 0%, #FFE8CC 100%);
  border: 2px dashed #FFA94D;
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
}

/* --------------------------------------------------------------------------
   Page 19: Reflection Prompts List
   -------------------------------------------------------------------------- */
.reflection-prompts-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  width: 100%;
}

.reflection-item-card {
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.reflection-item-prompt {
  font-size: var(--text-base);
  font-weight: 800;
  color: var(--color-primary-dark);
}

/* --------------------------------------------------------------------------
   Page 20: PYP Learner Profile Reflections
   -------------------------------------------------------------------------- */
.pyp-profiles-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  width: 100%;
}

.pyp-profile-card {
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-md) var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  user-select: none;
}

.pyp-profile-card:hover {
  border-color: var(--color-primary);
  transform: translateX(4px);
}

.pyp-profile-card.selected {
  background: #EFEBFF;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.3);
}

.pyp-check-box {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--color-border);
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-primary);
}

.pyp-profile-card.selected .pyp-check-box {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #FFFFFF;
}

.pyp-card-content {
  display: flex;
  flex-direction: column;
}

.pyp-card-title {
  font-size: var(--text-base);
  font-weight: 800;
  color: var(--color-text);
}

.pyp-card-desc {
  font-size: var(--text-sm);
  color: var(--color-text-light);
  font-weight: 600;
}

.favorite-pages-picker {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 6px;
  width: 100%;
}

.fav-page-dot {
  aspect-ratio: 1;
  border-radius: var(--radius-full);
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  font-weight: 800;
  font-size: var(--text-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  padding: 0;
}

.fav-page-dot:hover {
  border-color: var(--color-primary);
  transform: scale(1.15);
}

.fav-page-dot.selected {
  background: var(--color-primary);
  color: #FFFFFF;
  border-color: var(--color-primary-dark);
  transform: scale(1.2);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.3);
}

.celebration-finish-card {
  background: radial-gradient(circle at center, #FFFDF9 0%, #FFF2E0 100%);
  border: 3px solid #FFA834;
  border-radius: var(--radius-xl);
  padding: var(--space-2xl) var(--space-lg);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  box-shadow: var(--shadow-md);
}

@media (max-width: 767px) {
  .body-clues-grid {
    grid-template-columns: 1fr;
  }
  .steps-flow {
    grid-template-columns: repeat(2, 1fr);
  }
  .cover-meta-grid {
    grid-template-columns: 1fr;
  }
  .perspective-characters {
    gap: var(--space-lg);
  }
  .choices-grid {
    grid-template-columns: 1fr;
  }
  .science-comparison-grid {
    grid-template-columns: 1fr;
  }
  .favorite-pages-picker {
    grid-template-columns: repeat(5, 1fr);
  }
}