/* Mood: a watercolour diary. Five washes from rain grey to sunshine yellow mark each day; the month reads as a strip
   of colour. Pale lilac page, plum for actions. */
:root { --page: #f5f2f7; --card: #ffffff; --ink: #1e1922; --soft: #615868; --line: #ddd6e3; --field: #eee9f2; --act: #6b3a7d; --on-act: #ffffff; --stop: #b3261e;
  --m1: #6f7d8c; --m2: #8fa9c9; --m3: #c9c3b6; --m4: #9fd0a0; --m5: #f4c95d; --wide: 620px; color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --page: #121014; --card: #1c191f; --ink: #eee9f2; --soft: #a99fb1; --line: #352e3a; --field: #121014; --act: #d4a6e6; --on-act: #2a0f35; --stop: #ff8a80; color-scheme: dark; }
}
.top { justify-content: space-between; align-items: end; } .when { flex: 0 1 180px; }
.moods { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.moods button { min-height: 76px; padding: 6px 2px; border-radius: 14px; background: var(--field); color: var(--ink); border: 2px solid transparent; display: grid; gap: 6px; justify-items: center; font-size: 14px; font-weight: 600; }
.moods button i { width: 30px; height: 30px; border-radius: 50%; display: block; background: var(--c); }
.moods button[aria-pressed="true"] { border-color: var(--ink); background: var(--card); }
.strip { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 2px; }
.strip i { aspect-ratio: 1 / 2; border-radius: 3px; background: var(--c, var(--field)); }
.strip i.empty { background: var(--field); border: 1px dashed var(--line); }
#fx b.up { color: #2f7d3a; } #fx b.down { color: var(--stop); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #fx b.up { color: #8fd49a; } }