/* Monthly review page. Mobile first; matches the reflection cream theme. */
#month-review { background: #efeae3; color: #1c1916; padding: 24px 0 56px; }
#month-review .mr-wrap { max-width: 1040px; }
#month-review h1 { font-size: clamp(30px, 7vw, 52px); line-height: 1.05; margin: 4px 0 8px; font-weight: 700; }
#month-review h2 { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: #6e6258; margin: 0 0 10px; font-weight: 600; }
#month-review .mr-kicker { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #8d6a2a; margin: 0; font-weight: 600; }
#month-review .mr-range, #month-review .mr-note { color: #6e6258; font-size: 13px; margin: 4px 0 0; }
#month-review .mr-summary { margin-top: 16px; font-size: 17px; line-height: 1.6; max-width: 46rem; }
#month-review .mr-summary p { margin: 0 0 12px; }
.mr-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 22px 0 12px; }
.mr-kpi, .mr-card, .mr-take article { background: #fff; border-radius: 16px; padding: 14px 16px; }
.mr-kpi.is-lead { grid-column: 1 / -1; background: #221f1c; color: #f6f1ea; }
.mr-kpi.is-lead h2 { color: #cbbfb3; }
.mr-big { font-size: 30px; font-weight: 700; line-height: 1.1; margin: 0; }
.mr-kpi.is-lead .mr-big { font-size: 44px; }
.mr-big span { font-size: 14px; font-weight: 500; color: #8b8077; margin-left: 2px; }
.mr-delta { display: inline-block; font-size: 12px; font-weight: 600; border-radius: 10px; padding: 1px 7px; margin-left: 4px; }
.mr-delta.is-up { color: #0a7a3d; background: #e3f3e9; }
.mr-delta.is-down { color: #b0392b; background: #f8e5e2; }
.mr-delta.is-same { color: #8b8077; background: #f3eee8; }
.mr-delta.is-none { display: none; }
.mr-card { margin: 12px 0; }
.mr-days { display: grid; grid-template-columns: repeat(31, minmax(0, 1fr)); gap: 2px; align-items: end; height: 120px; }
.mr-day { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.mr-day i { display: block; height: var(--h); background: #d4a04c; border-radius: 3px 3px 1px 1px; min-height: 3px; }
.mr-day.is-none i { background: #e6dfd6; }
.mr-day b { font-size: 8px; color: #8b8077; text-align: center; font-weight: 500; margin-top: 3px; }
.mr-day:nth-child(even) b { visibility: hidden; }
.mr-grid { display: grid; gap: 12px; }
.mr-bars, .mr-habits, .mr-stats, .mr-prs, .mr-take ul { list-style: none; padding: 0; margin: 0; }
.mr-bars li, .mr-habits li { display: grid; grid-template-columns: 44px 1fr 36px; gap: 8px; align-items: center; margin: 7px 0; font-size: 13px; }
.mr-habits li { grid-template-columns: minmax(96px, 9.5rem) 1fr 38px 30px 58px; }
.mr-bar { display: block; height: 10px; background: #f0ebe4; border-radius: 6px; overflow: hidden; }
.mr-bar i { display: block; height: 100%; background: #7fa65a; border-radius: 6px; }
.mr-bars li.is-best .mr-bar i { background: #2e7d4f; }
.mr-bars li.is-best .mr-bar-label { font-weight: 700; }
.mr-bar-value { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.mr-streak { color: #8d6a2a; font-size: 12px; text-align: right; }
.mr-habit-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mr-stats li { display: flex; flex-direction: column; gap: 2px; }
.mr-stats strong { font-size: 26px; line-height: 1; }
.mr-stats span { font-size: 12px; color: #6e6258; }
.mr-stats .mr-delta { align-self: flex-start; margin: 4px 0 0; }
.mr-sub { margin-top: 16px !important; }
.mr-trophies { display: flex; align-items: center; gap: 6px; font-weight: 600; margin: 0 0 6px; }
.mr-trophies svg { width: 18px; height: 18px; color: #c98a00; }
.mr-prs li { font-size: 13px; margin: 4px 0; }
.mr-prs li span { color: #8b8077; margin-right: 4px; }
.mr-prs li.is-beat { color: #0a7a3d; }
.mr-take { display: grid; gap: 12px; margin: 12px 0; }
.mr-take li { font-size: 14px; line-height: 1.45; margin: 6px 0; padding-left: 14px; position: relative; }
.mr-take li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: #d4a04c; }
.mr-take article:nth-child(1) li::before { background: #2e7d4f; }
.mr-take article:nth-child(2) li::before { background: #c0392b; }
.mr-back { margin-top: 20px; }
.mr-back a { color: #1c1916; }
@media (max-width: 420px) {
  .mr-habits li { grid-template-columns: minmax(84px, 7.5rem) 1fr 34px 26px; }
  .mr-habits li .mr-delta { display: none; }
}
@media (min-width: 720px) {
  .mr-kpis { grid-template-columns: repeat(4, 1fr); }
  .mr-kpi.is-lead { grid-column: auto; }
  .mr-grid { grid-template-columns: 1fr 1fr; }
  .mr-grid .mr-card { margin: 0; }
  .mr-take { grid-template-columns: repeat(3, 1fr); }
  .mr-day:nth-child(even) b { visibility: visible; }
  .mr-days { height: 160px; gap: 4px; }
  .mr-day b { font-size: 10px; }
}
.mr-delta.is-none-shown { color: #8b8077; background: #f3eee8; font-weight: 500; }

/* v3: monthly goals */
#month-review .mr-goals ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
#month-review .mr-goals li { display: grid; grid-template-columns: 1.5rem 1fr auto; gap: 4px 10px; align-items: center; }
#month-review .mr-goal-mark { font-weight: 700; color: #1f7a4d; }
#month-review .mr-goals .is-missed .mr-goal-mark { color: #8a8a8a; }
#month-review .mr-goal-nums { font-variant-numeric: tabular-nums; font-weight: 600; }
#month-review .mr-goal-bar { grid-column: 2 / -1; height: 8px; border-radius: 4px; background: rgba(0,0,0,.08); overflow: hidden; }
#month-review .mr-goal-bar i { display: block; height: 100%; width: var(--p); background: #1f7a4d; }
#month-review .mr-goal-score { float: right; font-size: .9em; color: #1f7a4d; }