/* Month and Year sheet layout (wave V2 owner: sheets).
   js/v2/sheets/month.mjs, year.mjs, month/*.mjs. The foundation draws the
   components (sheet header with the status as subtitle, hero, change line,
   sections, cells, capsules); this file lays them out. Tokens only; plain
   content, no glass. */

/* ---------------------------------------------------------------- page */
.mon {
  display: flex; flex-direction: column; gap: var(--gap-group);
  padding-top: var(--radius-xs);
}
.mon > .ui-sec + .ui-sec { margin-top: 0; }
.mon--empty { justify-content: center; min-height: 60%; }

/* ---------------------------------------------------------------- top */
.mon-top { display: flex; flex-direction: column; }
.mon-top .ui-hero { padding-top: 0; }
.mon-top .ui-change-main,
.mon-top .ui-change-split { white-space: normal; }
/* plain-question headers wrap instead of truncating (N20) */
.mon-sec .ui-sec-title { white-space: normal; }
.mon-status-line {
  margin: 0 var(--margin) var(--radius-xs);
  font: var(--t-secondary); letter-spacing: var(--tr-secondary); color: var(--label-2);
}
/* milestones: one plain sentence each, under the split line */
.mon-stone {
  margin: var(--radius-xs) var(--margin) 0;
  font: var(--t-secondary); letter-spacing: var(--tr-secondary); color: var(--label);
}

/* ---------------------------------------------------------------- chart cards */
.mon-card-body {
  display: flex; flex-direction: column; gap: var(--cell-pad-y);
  padding: var(--cell-pad-y) var(--cell-pad-x);
  --chart-halo: var(--cell-2);
}
.mon-chart { min-width: 0; }
.mon-chart .viz-gate { padding: var(--radius-xs) 0; margin: 0; }
.mon-sentence {
  margin: 0;
  font: var(--t-body); letter-spacing: var(--tr-body); color: var(--label);
}
.mon-sentence[hidden] { display: none; }

/* checks */
.mon-check-ico { display: grid; place-items: center; color: var(--label-2); }
.mon-check-ico .ui-ico { width: var(--icon); height: var(--icon); }
.mon .mon-wrap { white-space: normal; }
.mon .ui-cell-label:has(> .mon-wrap),
.mon .ui-cell-sec:has(> .mon-wrap) { white-space: normal; }

/* note */
.mon-note-box { padding: 0; }
.mon-note {
  display: block; width: 100%; min-height: calc(var(--row-min) * 2.2);
  padding: var(--cell-pad-y) var(--cell-pad-x);
  border: 0; outline: none; resize: vertical;
  background: transparent; color: var(--label);
  font: var(--t-body); letter-spacing: var(--tr-body);
}
.mon-note::placeholder { color: var(--label-3); }
.mon-note-box:focus-within { box-shadow: inset 0 0 0 var(--focus-ring) var(--tint); }

/* ---------------------------------------------------------------- the one action */
.mon-actions { display: flex; justify-content: center; padding: 0 var(--margin); }
.mon-actions .ui-capsule--lg { width: 100%; }
.mon > .ui-footnote { margin: 0 calc(var(--margin) + var(--cell-pad-x)); }

/* ---------------------------------------------------------------- year: the highlighted year */
.mon-year .viz-ybar { transition: opacity var(--dur-fade) var(--ease-linear); }
.mon-year .viz-ybar.is-dim,
.mon-year .viz-ybar-value.is-dim,
.mon-year .viz-xlabel.is-dim { opacity: var(--viz-seg-dim); }
.mon-year .viz-hit { cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .mon-year .viz-ybar { transition: none; }
}

/* ---------------------------------------------------------------- estimated month */
/* a month from the estimated history (Settings › Values): a quiet chip and one line */
.mon-est {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--radius-xs);
  margin: 0 var(--margin) var(--radius-xs);
  font: var(--t-secondary); letter-spacing: var(--tr-secondary); color: var(--label-2);
}
.mon-est-chip {
  flex: none;
  padding: 1px var(--radius-xs);
  border-radius: var(--radius-full);
  background: var(--fill);
  font: var(--t-caption1); letter-spacing: var(--tr-caption1); color: var(--label-2);
}