/* Journal — cream ground, a mood strip, and stacked entry cards.
 *
 * The kept entry is tinted from the accent ramp and the older ones from the
 * surface, so what you just put down is legible as new without a badge.
 */

.ro-journal {
  background: var(--color-bg);
  padding: 66px 18px 14px;
  gap: 14px;
}

/* — title row — */
.ro-journal-head {
  display: flex;
  align-items: center;
  gap: 11px;
}
/* An <h1> for the screen, so reset the type metrics organic.css gives headings
   back to the body values the design's plain div inherited. */
.ro-journal-title {
  margin: 0;
  flex: 1;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 21px;
  line-height: 1.55;
  letter-spacing: normal;
}

.ro-journal-reset {
  flex: none;
  height: 44px;
  border-radius: 999px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font: 600 12.5px var(--font-body);
  background: var(--color-accent-2-200);
  color: var(--color-accent-2-900);
}
.ro-journal-reset:hover { background: var(--color-accent-2-300); }
.ro-journal-reset:active { background: var(--color-accent-2-400); }

/* — mood strip: the tints are inline, from view().moodStyle() — */
.ro-journal-moods {
  display: flex;
  align-items: center;
  gap: 7px;
}
.ro-journal-moods-label {
  flex: none;
  font-size: 11.5px;
  color: var(--color-neutral-700);
}
.ro-journal-moodrow {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ro-journal-mood {
  border-radius: 999px;
  padding: 8px 13px;
  font: 600 11.5px var(--font-body);
}

/* — the guided prompt — */
.ro-journal-guided {
  background: var(--color-accent-2-100);
  border-radius: 28px;
  padding: 19px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.ro-journal-guided:hover { background: var(--color-accent-2-200); }
.ro-journal-guided:active { background: var(--color-accent-2-300); }

.ro-journal-guided-title {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 19px;
  line-height: 1.2;
  color: var(--color-accent-2-900);
}
.ro-journal-guided-body {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-accent-2-800);
  opacity: .85;
}

/* — entries — */
.ro-journal-entry {
  border-radius: 24px;
  padding: 16px 17px;
  display: flex;
  flex-direction: column;
}
.ro-journal-entry--kept { background: var(--color-accent-200); gap: 7px; }
.ro-journal-entry--past { background: var(--color-surface); gap: 6px; }

.ro-journal-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ro-journal-tag {
  background: var(--color-accent-300);
  color: var(--color-accent-900);
}
.ro-journal-when {
  font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.ro-journal-when--kept { color: var(--color-accent-800); }

.ro-journal-body {
  font-size: 13.5px;
  line-height: 1.5;
}
.ro-journal-body--kept { color: var(--color-accent-900); }
.ro-journal-body--past { opacity: .85; }

/* — the daily verse lives here, whether or not one is chosen — */
.ro-journal-verse {
  background: var(--color-accent-200);
  border-radius: 28px;
  padding: 19px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  text-align: left;
}
.ro-journal-verse:hover { background: var(--color-accent-300); }
.ro-journal-verse:active { background: var(--color-accent-400); }

/* Whole verse, sized to fit rather than clamped — see `fit` in store.js. */
.ro-journal-versetext {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 16px;
  line-height: 1.35;
  color: var(--color-accent-900);
  text-wrap: pretty;
}
.ro-journal-versetext.is-short { font-size: 17px; line-height: 1.32; }
.ro-journal-versetext.is-mid { font-size: 15.5px; line-height: 1.36; }
.ro-journal-versetext.is-long { font-size: 14px; line-height: 1.42; }
.ro-journal-versetext.is-xlong { font-size: 13px; line-height: 1.45; }
.ro-journal-versefaith {
  font-size: 11.5px;
  color: var(--color-accent-800);
  opacity: .85;
}

/* Nothing picked yet: quieter, and an invitation rather than a verse. */
.ro-journal-verse.is-empty { background: var(--color-surface); }
.ro-journal-verse.is-empty:hover { background: var(--color-neutral-300); }
.ro-journal-verse.is-empty .ro-journal-versetext {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--color-neutral-800);
}

.ro-journal-verserow { display: flex; align-items: center; gap: 8px; }
.ro-journal-versenew {
  flex: none;
  font: 600 9.5px var(--font-body);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--color-accent-700);
  color: var(--color-accent-100);
}