/* Daily Life Doc, round 5: the Mood control (js/ui/mood.js, owner ruling 30). Five drawn faces, each with its own
   soft fill and deep line from the tokens of css/base.css, so they read in light and dark: red, amber, grey, sage,
   green. A face takes the size of its box; every place below gives the box ONE fixed size, so a face that arrives
   or changes never moves a neighbour. */
.mood { display: inline-block; flex: none; width: 18px; height: 18px; font-style: normal; vertical-align: middle; color: var(--mood-s, var(--ink2)); }
.mood-f { fill: var(--mood-bg, var(--soft)); }
[data-mood="1"] { --mood-bg: var(--bad-bg); --mood-s: var(--bad-d); }
[data-mood="2"] { --mood-bg: var(--try-bg); --mood-s: var(--try-d); }
[data-mood="3"] { --mood-bg: var(--soft); --mood-s: var(--ink2); }
[data-mood="4"] { --mood-bg: var(--exp); --mood-s: var(--exp-d); }
[data-mood="5"] { --mood-bg: var(--good-bg); --mood-s: var(--good-d); }

/* A mood in a line: the small face before its word on the underline (.cc .mood in css/lines.css). */

/* The row of five faces to pick from: the value sheet and a past day in Progress. */
.mood-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.mood-b { position: relative; min-height: 84px; padding: 12px 0 9px; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  background: var(--soft); transition: background-color var(--m-step) ease, box-shadow var(--m-step) ease, transform var(--m-press) var(--ease-out); }
.mood-b:active { transform: scale(0.94); }
.mood-b .mood { width: 36px; height: 36px; }
.mood-b small { font-size: var(--t-2xs); font-weight: 500; line-height: 1.2; color: var(--ink2); white-space: nowrap; }
/* The picked face: its own soft colour fills the button and an ink ring goes round it (a shadow: nothing moves). */
.mood-b[aria-pressed="true"] { background: var(--surface); box-shadow: inset 0 0 0 2px var(--ink); }
.mood-b[aria-pressed="true"] small { color: var(--ink); }


/* The Table: a face in a cell. */
.rep .mood { width: 20px; height: 20px; }

/* The report: faces on the chart's axis and beside the two averages. */
.rp-chart svg .ch-face { width: 17px; height: 17px; overflow: visible; }
.rp-means b.rp-mood { display: flex; align-items: center; gap: 7px; font-size: var(--t-l); white-space: nowrap; }
.rp-means b.rp-mood .mood { width: 22px; height: 22px; }
.rp-means b.rp-mood em { font-style: normal; }
.rp-means b.rp-mood i.num { font-style: normal; font-size: var(--t-xs); font-weight: 500; color: var(--ink2); }

/* ---------- A mood picked in the line itself (round 3, change 24; js/ui/mood.js `inline`) ----------
   One tap on the value opens the five faces where the word stood; one more tap picks. No box, no sheet. The row is
   26 px tall, inside the 28 px line, so the line never counts as longer than its box. Each face has a 31 px wide
   place for the finger (155 px for the five, so the row stays beside a short line's words on a phone). With a mood already picked the other four faces are faint. */
.cc.is-pick, .cc.is-pick:active { background: none; box-shadow: none; }
.cc .mood-in { display: inline-flex; align-items: center; height: 26px; vertical-align: middle; margin: -2px 0 0 -4px; }
.cc .mood-o { flex: none; width: 31px; height: 26px; display: grid; place-items: center; animation: mood-in 220ms var(--ease-out) both; animation-delay: calc((var(--k, 0)) * 28ms); }
.cc .mood-o:nth-child(2) { --k: 1; } .cc .mood-o:nth-child(3) { --k: 2; } .cc .mood-o:nth-child(4) { --k: 3; } .cc .mood-o:nth-child(5) { --k: 4; }
.cc .mood-o .mood { width: 23px; height: 23px; margin: 0; vertical-align: 0; transition: opacity var(--m-step) ease; }
.cc .mood-o.off .mood { opacity: .38; }
@keyframes mood-in { from { opacity: 0; transform: scale(.7); } }
@media (prefers-reduced-motion: reduce) { .cc .mood-o { animation: none; } }