/* LIFE-136 Phase 3a: the Planner's Monthly tab. Served on every page by
   `:app` like planner.css, so every rule is scoped to .pm-* classes; tokens
   come from .t-body, the layout and shared pieces from planner.css. */

.pm-month { display: flex; flex-direction: column; gap: .9rem; }
.pm-month__meta { margin: .1rem 0 0; display: flex; gap: .8rem; flex-wrap: wrap; color: var(--t-dim); font-size: .85rem; }
.pm-month__create { margin-top: .5rem; display: flex; justify-content: flex-start; }

/* Weeks: one row per ISO week of the month, linking to Weekly. */
.pm-weeks { list-style: none; margin: 0; padding: 0; }
.pm-week { border-top: 1px solid var(--t-line); padding: .55rem 0; }
.pm-week:first-child { border-top: 0; padding-top: 0; }
.pm-week__head { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.pm-week__key { font-weight: 600; color: #f4f4f5; }
.pm-week--today .pm-week__key { color: var(--t-accent); }
.pm-week__range { color: var(--t-dim); font-size: .8rem; }
.pm-week__counts { margin-left: auto; }
.pm-week__theme { margin: .15rem 0 0; font-style: italic; font-size: .9rem; }
.pm-week__review { margin: .15rem 0 0; color: var(--t-dim); font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-week__review b { color: var(--t-faint); font-weight: 500; margin-right: .25rem; }
.pm-week__empty { margin: .15rem 0 0; color: var(--t-faint); font-size: .78rem; }

.pm-counts { margin-top: .1rem; }

/* Goal progress: each active Goal with its Metrics' standing at month end. */
.pm-goals, .pm-metrics, .pm-trends { list-style: none; margin: 0; padding: 0; }
.pm-goal { border-top: 1px solid var(--t-line); padding: .55rem 0; }
.pm-goal:first-child { border-top: 0; padding-top: 0; }
.pm-goal__head { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.pm-goal__title { font-weight: 600; color: #f4f4f5; min-width: 0; overflow-wrap: anywhere; }
.pm-goal__due { color: var(--t-dim); font-size: .8rem; }
.pm-goal__empty { margin: .2rem 0 0 .2rem; color: var(--t-faint); font-size: .78rem; }
.pm-metrics { margin-top: .3rem; }
.pm-metric { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; padding: .18rem 0 .18rem .4rem; font-size: .86rem; }
.pm-metric__title { min-width: 0; overflow-wrap: anywhere; }
.pm-metric__latest { white-space: nowrap; }
.pm-metric__latest b { color: #f4f4f5; font-weight: 650; }
.pm-metric__bounds { color: var(--t-dim); font-size: .78rem; display: flex; gap: .5rem; flex-wrap: wrap; }
.pm-metric > .t-chip:last-child { margin-left: auto; }
/* A Metric removed in Notion (§3.3): observations stay, folded read-only. */
.pm-metric--removed .pm-metric__title { color: var(--t-faint); font-weight: 500; }

/* Metric trend: the month's observations as a sparkline per Metric. */
.pm-trend { border-top: 1px solid var(--t-line); padding: .5rem 0; }
.pm-trend:first-child { border-top: 0; padding-top: 0; }
.pm-trend__head { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; font-size: .88rem; }
.pm-trend__title { font-weight: 600; color: #f4f4f5; min-width: 0; overflow-wrap: anywhere; }
.pm-trend__meta { margin-left: auto; color: var(--t-dim); font-size: .8rem; }
.pm-trend__meta b { color: #f4f4f5; font-weight: 650; }
.pm-trend .p-spark { margin: .35rem 0 0; }