/* 今天心情 —— 五档表情各有颜色（在 app.js 的 MOODS 里），页面本身保持素净，
   颜色只出现在数据上。 */

.lede{color:var(--soft);margin-bottom:20px}
.lede b{color:var(--ink)}
.sec{font-size:1.05rem;margin-bottom:14px}
.sec .muted{font-weight:400;font-size:.85rem}

/* ── 五个表情按钮 ── */
.moods{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;max-width:460px}
.mood{--mc:var(--accent);
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:14px 4px;background:var(--surface);color:var(--ink);
  border:2px solid var(--line);border-radius:12px;
  transition:border-color .16s,background .16s,transform .12s}
.mood .me{font-size:1.75rem;line-height:1;filter:grayscale(.35);transition:filter .16s,transform .16s}
.mood .mt{font-size:.78rem;color:var(--soft)}
.mood:hover{border-color:var(--mc)}
.mood:hover .me{filter:none;transform:scale(1.1)}
.mood.on{border-color:var(--mc);background:color-mix(in srgb,var(--mc) 12%,transparent)}
.mood.on .me{filter:none;transform:scale(1.15)}
.mood.on .mt{color:var(--ink);font-weight:600}

/* ── 填写区 ── */
.detail{margin-top:18px;border-top:1px solid var(--line);padding-top:16px}
.frow{margin-bottom:12px}
.detail label{margin-top:2px}
.detail input{margin-bottom:12px}
.save{width:100%}
.saved{margin-top:10px;text-align:center}

/* ── 图表 ── */
.chart{width:100%;height:210px}
.chart.tall{height:260px}
/* With no data at all, this slot holds a sentence instead of an empty axis */
.chart.empty{display:flex;align-items:center;justify-content:center;text-align:center;
  height:150px;padding:0 24px;color:var(--soft);font-size:.9rem;
  border:1px dashed var(--line);border-radius:12px}
.avgline{margin-top:10px;text-align:center;color:var(--soft);font-size:.9rem}
.chartnote{margin:12px 0 0}

/* ── 留言墙 ── */
.notes{list-style:none;padding:0;margin:0}
.notes .empty{color:var(--soft);font-size:.9rem}
.noteline{display:flex;gap:10px;align-items:flex-start;
  padding:9px 12px;border-radius:10px;background:var(--bg);margin:0 0 6px}
.noteline.mine{box-shadow:inset 3px 0 0 var(--accent)}
.noteline .ne{font-size:1.2rem;line-height:1.4}
.nbody{display:flex;flex-direction:column;min-width:0}
.nbody .nn{font-size:.8rem;color:var(--soft);font-weight:600}
.nbody .nt{font-size:.95rem;word-break:break-word}
.note{margin-top:6px}

@media(max-width:420px){
  .moods{gap:5px}
  .mood{padding:11px 2px}
  .mood .me{font-size:1.5rem}
  .mood .mt{font-size:.7rem}
  .chart{height:190px}
  .chart.tall{height:230px}
}