/* Journal-only visual refinement; event names and one-tap behavior are unchanged. */
.moments { padding: 24px; background: var(--bg); border-radius: 20px; }
.moments h2 { margin: 0; font-size: 1.25rem; }
.moments-intro { margin: 8px 0 22px; color: var(--muted); font-size: .94rem; }
.moments .log-grid { gap: 12px; }
.moments .log-btn { min-height: 112px; gap: 12px; border-radius: 14px; padding: 16px 8px; background: var(--bg); }
.moments .log-btn .moment-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--soft); color: var(--accent); }
.moment-icon svg { width: 26px; height: 26px; }
.moments .log-btn[data-kind="wake"] .moment-icon,
.moments .log-btn[data-kind="nap_end"] .moment-icon { background: var(--warn-bg); color: var(--glow); }
.moments .log-btn.unusual { border-style: dashed; background: var(--bg); border-color: var(--line-strong); }
.moments .log-btn.unusual .moment-icon { background: var(--surface); color: var(--muted); }
.moments .log-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (hover: hover) { .moments .log-btn:hover { border-color: var(--accent); background: var(--surface); } }
.moments .past { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 22px; }
.moments .past summary { min-height: 44px; padding: 10px 0; }
.moments .past input, .moments .past select { min-width: 0; width: 100%; }
@media (max-width: 380px) { .moments { padding: 16px; } .moments .log-grid { gap: 8px; } .moments .log-btn { min-height: 104px; padding: 12px 4px; } }
@media print { .moments { display: none; } }