/* ============================================================================
   journal.css — styles for the Journal plugin (Phase 4).
   A plugin ships its own stylesheet; nothing here is referenced by the core.
   ============================================================================ */

.mood-row { display: flex; gap: 8px; margin-top: 4px; }
.mood-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 11px 4px; border-radius: var(--r-md);
  border: 1px solid rgb(var(--border)); background: rgb(var(--surface-2));
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.mood-btn:hover { border-color: rgb(var(--primary)); transform: translateY(-1px); }
.mood-btn.is-active { border-color: rgb(var(--primary)); background: rgb(var(--primary) / 0.08); }
.mood-btn__emoji { font-size: 24px; line-height: 1; }
.mood-btn__label { font-size: 11px; color: rgb(var(--text-2)); font-weight: 600; }

.journal-field { display: block; margin-top: 16px; }
.journal-field:first-of-type { margin-top: 4px; }
.journal-field__label { font-size: 13px; font-weight: 600; color: rgb(var(--text-2)); display: block; margin-bottom: 8px; }
.journal-textarea {
  width: 100%; min-height: 128px; resize: vertical;
  padding: 12px; background: rgb(var(--surface-2));
  border: 1px solid rgb(var(--border)); border-radius: var(--r-sm);
  font-size: 16px; line-height: 1.55; font-family: inherit; color: rgb(var(--text));
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.journal-textarea::placeholder { color: rgb(var(--text-3)); }
.journal-textarea:focus { outline: none; border-color: rgb(var(--primary)); background: rgb(var(--surface)); box-shadow: 0 0 0 3px rgb(var(--primary) / 0.14); }

.journal-past { display: flex; flex-direction: column; gap: 10px; }
.journal-item { display: flex; gap: 14px; padding: 14px 16px; background: rgb(var(--surface)); border: 1px solid rgb(var(--border)); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.journal-item__mood { font-size: 22px; flex: none; line-height: 1.2; }
.journal-item__body { min-width: 0; }
.journal-item__date { font-size: 12.5px; color: rgb(var(--text-3)); font-weight: 600; }
.journal-item__note { font-size: 14px; margin-top: 3px; color: rgb(var(--text-2)); overflow-wrap: break-word; }