/* Last visual layer: align the inner-page rhythm without replacing any real controls. */

/* Shared inner headers keep the return action and title at the same visual scale. */
#app-root > div > div.memoir-timeline > header,
#app-root > div > div.memoir-shelf > header,
#app-root > div > div.memoir-settings-polish > header,
#app-root > div > div:has(> header + main > div > div.grid > button h4) > header {
  min-height: 5.25rem !important;
}

/* Chat guide: the prior bitmap treatment hid the real heading and made the cards too tall. */
#app-root > div > div:has(> header + main > div > div.grid > button h4) > header {
  position: relative !important;
  min-height: 5.25rem !important;
  background: rgba(255, 253, 247, .93) !important;
  border-bottom: 1px solid rgba(173, 98, 29, .20) !important;
  box-shadow: 0 3px 12px rgba(112, 70, 29, .10) !important;
}

#app-root > div > div:has(> header + main > div > div.grid > button h4) > header h2 {
  color: #783b18 !important;
  font-size: clamp(1.65rem, 2.3vw, 2.25rem) !important;
  font-weight: 900 !important;
}

#app-root > div > div:has(> header + main > div > div.grid > button h4) > main {
  width: min(100%, 76rem) !important;
  padding: 1.1rem 1.25rem 1.55rem !important;
}

#app-root > div > div:has(> header + main > div > div.grid > button h4) > main > div {
  padding: 1.15rem 1.2rem 1.25rem !important;
}

#app-root > div > div:has(> header + main > div > div.grid > button h4) > main > div > div:first-child {
  display: grid !important;
  justify-items: center !important;
  gap: .22rem !important;
  margin: 0 0 .9rem !important;
  color: #783b18 !important;
  text-align: center !important;
}

#app-root > div > div:has(> header + main > div > div.grid > button h4) > main > div > div:first-child h2,
#app-root > div > div:has(> header + main > div > div.grid > button h4) > main > div > div:first-child h3 {
  margin: 0 !important;
  color: #783b18 !important;
  font-size: clamp(1.42rem, 2vw, 1.9rem) !important;
  font-weight: 900 !important;
}

#app-root > div > div:has(> header + main > div > div.grid > button h4) > main > div > div:first-child p {
  margin: 0 !important;
  color: #a8784f !important;
  font-size: .95rem !important;
  font-weight: 700 !important;
}

#app-root > div > div:has(> header + main > div > div.grid > button h4) > main > div > div.grid {
  gap: .8rem !important;
  grid-auto-rows: minmax(11.7rem, 1fr) !important;
}

#app-root > div > div:has(> header + main > div > div.grid > button h4) > main > div > div.grid > button {
  min-height: 0 !important;
  height: 100% !important;
  padding: .9rem 1rem 3.15rem !important;
  border-radius: 1.12rem !important;
}

#app-root > div > div:has(> header + main > div > div.grid > button h4) > main > div > div.grid > button > div:first-child {
  min-height: 3.35rem !important;
  gap: .58rem !important;
}

#app-root > div > div:has(> header + main > div > div.grid > button h4) > main > div > div.grid > button > div:first-child > span.text-3xl {
  width: 3.35rem !important;
  height: 3.35rem !important;
  flex-basis: 3.35rem !important;
  background-size: 152px 152px !important;
  background-position: -10px -9px !important;
}

#app-root > div > div:has(> header + main > div > div.grid > button h4) > main > div > div.grid > button p {
  font-size: clamp(.82rem, 1vw, .95rem) !important;
  line-height: 1.42 !important;
}

#app-root > div > div:has(> header + main > div > div.grid > button h4) > main > div > div.grid > button > .memoir-chat-cta {
  right: 1rem !important;
  bottom: .85rem !important;
  left: 1rem !important;
  min-height: 2.1rem !important;
}

/* Timeline: use the view height evenly, with no oversized internal blank area. */
#app-root#app-root > div > div.memoir-timeline > main {
  max-width: 76rem !important;
  padding: 1.15rem 1.35rem 1.75rem !important;
}

#app-root#app-root > div > div.memoir-timeline > main > div {
  padding: 1.3rem 2rem !important;
}

#app-root#app-root > div > div.memoir-timeline > main > div > div:first-child {
  padding: 1.05rem 1.65rem !important;
}

#app-root#app-root > div > div.memoir-timeline > main > div > div.flex.items-center.justify-center.gap-4 {
  margin: .85rem 0 .45rem !important;
}

#app-root#app-root > div > div.memoir-timeline .timeline-decoration {
  height: 9.7rem !important;
  min-height: 9.7rem !important;
  max-height: 9.7rem !important;
}

@media (min-width: 761px) and (max-height: 900px) {
  #app-root > div > div:has(> header + main > div > div.grid > button h4) > main {
    padding-top: .8rem !important;
  }

  #app-root > div > div:has(> header + main > div > div.grid > button h4) > main > div > div.grid {
    grid-auto-rows: minmax(10.8rem, 1fr) !important;
  }

  #app-root#app-root > div > div.memoir-timeline > main {
    padding-top: .8rem !important;
  }
}

@media (max-width: 760px) {
  #app-root > div > div:has(> header + main > div > div.grid > button h4) > main > div > div.grid {
    grid-auto-rows: auto !important;
  }
}