/* ============================================
   prayers.css — Prayer Journal: prayer cards, answered-prayer chip, form
   layout, answered-prayer timeline.
   Part of the app.css split.
   ============================================ */

.prayer-card.is-answered { background: linear-gradient(180deg, rgba(39,174,96,0.12), var(--bg-card)); }
.prayer-answer-chip {
    display: inline-flex; align-items: flex-start; gap: 6px;
    padding: 7px 11px; border-radius: var(--radius-sm); margin-bottom: 12px;
    background: rgba(39,174,96,0.14); border: 1px solid rgba(39,174,96,0.35);
    color: #6fd99a; font-size: 0.76rem; line-height: 1.45;
}
.prayer-answer-chip i { color: #27ae60; margin-top: 1px; }

.prayer-form-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px; }
.prayer-form-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.prayer-body-input { line-height: 1.7; resize: vertical; min-height: 200px; }
.prayer-answer-group {
    padding: 14px; border-radius: var(--radius);
    background: rgba(39,174,96,0.08); border: 1px solid rgba(39,174,96,0.25);
}
.prayer-answer-group label { color: #6fd99a; }
.prayer-answer-group label i { color: #27ae60; }

/* ── Prayer Timeline ── */
.prayer-timeline-section {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(186,154,66,0.15);
}
.prayer-timeline {
  position: relative;
  padding-left: 20px;
}
.prayer-timeline::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(186,154,66,0.25);
}
.prayer-timeline-item {
  position: relative;
  padding: 12px 16px;
  margin-bottom: 12px;
  background: rgba(255,255,255,0.03);
  border-radius: 10px;
  border-left: 3px solid var(--gold);
}
.prayer-timeline-item::before {
  content: "";
  position: absolute;
  left: -25px;
  top: 18px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid var(--bg-main);
}
.prayer-tl-date {
  font-size: 0.78rem;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 4px;
}
.prayer-tl-title {
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 4px;
}
.prayer-tl-answer {
  font-size: 0.85rem;
  opacity: 0.7;
  margin-bottom: 4px;
  font-style: italic;
}
.prayer-tl-wait {
  font-size: 0.78rem;
  opacity: 0.5;
  display: flex;
  align-items: center;
  gap: 4px;
}

@media (max-width: 860px) {
    .prayer-form-grid { grid-template-columns: 1fr; }
    .prayer-form-grid .song-form-side { order: -1; }
}