:root {
  --desk-color: #e6e2dd; /* Darker background to make the page pop */
  --page-color: #fcfcf9; /* Classic paper off-white */
  --text-dark: #3a3632;
  --text-light: #7a7571;
  --accent-color: #849b87; /* Soft sage green */
  --margin-line: rgba(230, 160, 160, 0.5); /* Classic notebook red line */
  --ruled-line: #e0dcd3;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body {
  background-color: var(--desk-color);
  color: var(--text-dark);
  font-family: 'Inter', sans-serif;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  
  /* NEW: Pin the body to the corners of the screen to prevent scroll-fighting */
  position: fixed; /* --- THIS WAS MISSING --- */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden; 
  
  padding: 1rem;
  box-sizing: border-box;
}

/* --- Journal Cover --- */
#journal-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #2c3e30; 
  border-radius: 4px 16px 16px 4px;
  z-index: 100; 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fdfbf7;
  cursor: pointer;
  transform-origin: left center;
  box-shadow: inset -5px 0 15px rgba(0,0,0,0.2), 5px 10px 20px rgba(0,0,0,0.3);
  transition: transform 1.8s ease-in-out, opacity 1.8s ease-in-out;
  
  /* --- NEW: Visual Centering --- */
  /* Offsets the text to account for the dark spine line on the left */
  padding-left: 1.5rem; 
}

/* Create the visual illusion of a book's spine crease */
#journal-cover::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 1.5rem;
  width: 15px;
  background: linear-gradient(to right, rgba(0,0,0,0.1), rgba(0,0,0,0.4), rgba(0,0,0,0.1));
}

.cover-title {
  font-family: 'Merriweather', serif;
  font-size: 2.5rem;
  margin: 0 0 1rem 0;
  text-align: center;
  padding: 0 2rem;
  text-shadow: 1px 2px 4px rgba(0,0,0,0.3);
}

.cover-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  opacity: 0.8;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* The class we will add via JavaScript to trigger the 3D swing */
#journal-cover.is-open {
  transform: perspective(1200px) rotateY(-110deg);
  opacity: 0;
  pointer-events: none; /* Prevents accidental clicks while it's invisible */
}

/* The physical "Page" */
#app-container {
  background-color: var(--page-color);
  width: 100%;
  max-width: 600px;
  height: 100%; 
  min-height: calc(100dvh - 6rem); 
  max-height: 800px; 
  display: flex;
  flex-direction: column;
  padding: 3rem 2rem 3rem 4rem; 
  position: relative;
  border-radius: 4px 16px 16px 4px; 
  box-shadow: 
    -2px 0 5px rgba(0,0,0,0.05), 
    5px 10px 20px rgba(0,0,0,0.08), 
    inset 0 0 40px rgba(0,0,0,0.02); 
/* --- NEW: Start invisible and define the fade speed --- */
  opacity: 0;
  transition: opacity 1.2s ease-in-out; 
}

/* --- NEW: The class JavaScript will add to trigger the fade --- */
#app-container.is-loaded {
  opacity: 1;
}

/* The vertical red margin line */
#app-container::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 2.5rem;
  width: 2px;
  background-color: var(--margin-line);
}

h2 {
  font-family: 'Merriweather', serif;
  font-weight: 400;
  color: #2c2926;
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
  margin-top: 0;
  line-height: 1.3;
}

p {
  color: var(--text-light);
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 2rem;
}

/* The Ruled Text Area */
textarea {
  width: 100%;
  height: 192px; /* Increased from 128px */
  min-height: 160px; /* Increased from 96px */
  overflow-y: auto; 
  background-color: transparent;
  border: none;
  
  background-image: repeating-linear-gradient(
    transparent, 
    transparent 31px, 
    var(--ruled-line) 31px, 
    var(--ruled-line) 32px
  );
  
  background-size: 100% 192px; /* Updated to match new height */
  background-repeat: no-repeat; 
  
  font-family: 'Inter', sans-serif;
  font-size: 1.2rem;
  color: var(--text-dark);
  resize: none;
  outline: none;
  
  margin-bottom: 2.25rem; 
  line-height: 32px; 
}

/* A subtle highlight when typing */
textarea:focus {
  background-image: repeating-linear-gradient(
    transparent, 
    transparent 31px, 
    var(--accent-color) 31px, 
    var(--accent-color) 32px
  );
}

button.next-btn {
  background-color: var(--accent-color);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 30px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  font-family: 'Inter', sans-serif;
  display: block;
  
  /* --- CHANGED --- */
  /* Remove margin-top: auto; from here */
  margin-bottom: clamp(2rem, 15vh, 256px); 
  flex-shrink: 0; 
  
  align-self: flex-start; 
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
  user-select: none; 
}

button.next-btn:hover {
  background-color: #728775;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}

/* Normal step styling */
.step {
  display: none;
}

.step.active {
  display: flex; 
  flex-direction: column;
  flex-grow: 1;
  height: 100%; 
  
  /* NEW: Allows scrolling specifically inside the page content if needed */
  overflow-y: auto;
  
  /* A very quick fade so the new page ink appears smoothly as the old page lifts */
  animation: quickFadeIn 0.3s ease forwards;
}

@keyframes quickFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* --- Page Turn 3D Animation --- */
.step.turning-page {
  position: absolute;
  
  /* 1. FIX THE SHIFT: Anchor to the absolute edges of the container */
  top: 0;
  bottom: 0;
  left: 2.5rem; /* Start the paper exactly on the red line */
  right: 0;
  
  /* Match the container's padding perfectly to keep text static */
  /* (3rem top, 2rem right, 3rem bottom, 1.5rem left from the red line) */
  padding: 3rem 2rem 3rem 1.5rem; 
  
  background-color: var(--page-color);
  
  /* Round the right corners to match the notebook cover */
  border-radius: 0 16px 16px 0; 
  z-index: 10;
  
  /* Hinge precisely on the left edge (the red line) */
  transform-origin: left center; 
  
  /* Slightly longer animation for a graceful turn */
  animation: turnPageLeft 1.2s ease-in-out forwards;
  
  overflow: hidden; 
}

@keyframes turnPageLeft {
  0% {
    transform: perspective(1200px) rotateY(0deg) skewY(0deg) scale(1);
    box-shadow: 0 0 0 rgba(0,0,0,0);
    opacity: 1;
  }
  35% {
    /* 2. FIX THE STIFFNESS: The "Lift and Peel" illusion */
    /* Skew mimics the corner curling, Scale pops it toward the user */
    transform: perspective(1200px) rotateY(-30deg) skewY(-3deg) scale(1.02);
    
    /* Dynamic shadow mimics the paper lifting off the stack */
    box-shadow: -8px 15px 25px rgba(0,0,0,0.15);
    opacity: 1;
  }
  100% {
    transform: perspective(1200px) rotateY(-110deg) skewY(-5deg) scale(0.95);
    box-shadow: -20px 20px 30px rgba(0,0,0,0);
    opacity: 0;
  }
}

#summary-box {
  background-color: rgba(224, 220, 211, 0.4);
  padding: 1.5rem; 
  margin-bottom: 1.5rem; 
  border-radius: 8px;
  font-family: 'Merriweather', serif;
  font-style: italic;
  color: var(--text-dark);
  line-height: 1.6; 
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.03);
  
  max-height: 35vh; /* Caps the box height at 35% of the screen */
  overflow-y: auto; /* Brings the scrollbar back ONLY if text exceeds 35vh */
}

/* Kill the massive global margins for paragraphs INSIDE the box */
#summary-box p {
  margin-top: 0; /* --- THIS IS THE FIX --- Removes the double gap at the top */
  margin-bottom: 0.75rem; 
}

#summary-box p:last-child {
  margin-bottom: 0; /* The final sentence gets zero bottom margin */
}

/* --- Breath Message --- */
#breath-message {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Perfectly centers the text */
  font-family: 'Merriweather', serif;
  font-size: 1.5rem;
  color: var(--text-dark);
  text-align: center;
  
  /* Start completely invisible */
  opacity: 0; 
  pointer-events: none; 
  z-index: 2000; /* Ensures it shows up on top of everything */
  
  /* NEW: Forces the fade-in and fade-out to take exactly 1.5 seconds */
  transition: opacity 1.5s ease-in-out;
}

/* iOS Install Banner Styles */
#ios-install-banner {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 400px;
  background-color: #fdfbf7; /* Warm off-white */
  border: 1px solid var(--margin-line);
  border-radius: 12px;
  padding: 1rem 2.5rem 1rem 1.5rem;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  z-index: 1000;
  display: flex;
  align-items: center;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

#ios-install-banner.hidden {
  display: none;
  opacity: 0;
  pointer-events: none;
}

#ios-install-banner p {
  margin: 0;
  line-height: 1.4;
  font-size: 0.95rem;
  font-family: 'Inter', sans-serif;
  color: var(--text-dark);
}

.close-banner {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 1.2rem;
  color: var(--text-light);
  cursor: pointer;
  padding: 5px;
}

.close-banner:hover {
  color: var(--text-dark);
}

/* Android Install Banner Styles */
#android-install-banner {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 400px;
  background-color: #fdfbf7;
  border: 1px solid var(--margin-line);
  border-radius: 12px;
  padding: 1rem 2.5rem 1rem 1.5rem;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  z-index: 1000;
  display: flex;
  align-items: center;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

#android-install-banner.hidden {
  display: none;
  opacity: 0;
  pointer-events: none;
}

#android-install-banner .banner-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#android-install-banner p {
  margin: 0;
  line-height: 1.4;
  font-size: 0.95rem;
  font-family: 'Inter', sans-serif;
  color: var(--text-dark);
}

.install-banner-btn {
  background-color: var(--accent-color);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.9rem;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  align-self: flex-start;
  transition: background-color 0.3s ease;
}

.install-banner-btn:hover {
  background-color: #728775;
}

/* --- PWA Standalone Mode Adjustments --- */
/* This code ONLY runs when the app is installed on the device */
@media (display-mode: standalone) {
  button.next-btn {
    /* UPDATED: Flexible bottom margin for standalone mode */
    margin-bottom: clamp(3rem, 20vh, 288px); 
  }
}

/* --- Adjust buttons for pages without text areas --- */
#step-0 .next-btn {
  margin-bottom: 1rem; 
  /* 1rem from paragraph + 1.25rem here = our perfect 2.25rem gap! */
  margin-top: 1.25rem; 
}

#step-10 .next-btn {
  /* REMOVED margin-top: auto; */
  margin-top: 1.5rem; /* Adds a normal, fixed gap below the summary box */
  margin-bottom: 2rem; 
}

/* --- Adjust paragraph spacing on the intro page --- */
#step-0 p {
  margin-bottom: .5rem; /* Reduced from the default 2rem */
}

/* --- Feedback Link Styles --- */
.feedback-note {
  font-size: 0.95rem;
  margin-top: 0; 
  padding-top: 1rem; /* Reduced from 1.5rem to save a little space */
  border-top: 1px solid var(--ruled-line);
  color: var(--text-light);
  text-align: center;
  font-style: italic;
}

/* --- Feedback Link Styles --- */
.feedback-note {
  font-size: 0.95rem;
  
  /* 1. NEW: The spring! Pushes the feedback line to the bottom */
  margin-top: auto; 
  
  /* 2. NEW: Creates a safe zone so it doesn't overlap the floating logo */
  margin-bottom: 0.5rem; 
  
  padding-top: 1rem;
  border-top: 1px solid var(--ruled-line);
  color: var(--text-light);
  text-align: center;
  font-style: italic;
}

.feedback-note a:hover {
  opacity: 0.7;
}

/* --- Branding Logo Styles --- */
.cover-title {
  font-family: 'Merriweather', serif;
  font-size: 2.4rem; /* INCREASED: Makes the title much more prominent */
  margin: 0 0 0.75rem 0;
  text-align: center;
  padding: 0 2rem;
  text-shadow: 1px 2px 4px rgba(0,0,0,0.3);
}

.cover-seal {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -4rem; /* NEW: Pulls the logo (and the text beneath it) higher up on the cover */
  margin-bottom: 1.5rem; /* REDUCED: Brings the title slightly closer to the seal */
}

.seal-icon {
  width: auto;
  height: clamp(48px, 10vh, 76px); /* REDUCED: Makes the seal smaller and more elegant */
  
  /* NEW: Shaves a tiny fraction off the outer edge to guarantee a perfectly crisp circle */
  clip-path: circle(48%); 
}

.cover-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  opacity: 0.8;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: clamp(1rem, 5vh, 2rem);
}

.footer-branding {
  /* 1. Remove it from the normal scrolling flow */
  position: absolute; 
  
  /* 2. Anchor it to the absolute bottom of the white paper */
  bottom: 0.5rem; 
  
  /* 3. Match the journal's padding so it stays perfectly centered with the text */
  left: 4rem; 
  right: 2rem; 
  text-align: center;
  
  /* Make sure it floats visually above everything else */
  z-index: 10; 
}

.footer-logo {
  max-width: 160px; /* STRICT LIMIT: Forces the logo to be small and elegant */
  width: 100%;
  height: auto; /* Keeps the aspect ratio perfect */
  opacity: 0.7; /* Softens the logo so it isn't distracting */
  transition: opacity 0.3s ease;
  display: inline-block;
}

.footer-logo:hover {
  opacity: 1; /* Brightens when the user hovers to click */
}