/* Sample monthly report (Chris 2026-11-06). ONE component, three sizes:
   .mr--full on monthly-report-sample.html, .mr--compact on monthly-upkeep.html (page 1 of the report, inside "The report unfolds"),
   .mr--mini on services.html (the picker's Monthly upkeep panel, a 3:2 preview linking to the sample page).
   A made-up business (Ledge & Till) with example numbers; the SAMPLE label is always the first thing on the sheet.
   House style: no rules, no shadows; surfaces separated by tone steps; one accent; tabular figures. */
.mr {
  --sheet: #FFFFFF;          /* the paper the report is printed on: one tone step up from the page ground */
  --mr-pad: clamp(16px, 4cqi, 40px);
  container-type: inline-size;
  display: grid;
  background: var(--sheet);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: left;
}
.mr-sample { margin: 0; padding: 12px var(--mr-pad); background: var(--accent); color: var(--ink); font-weight: 600; font-size: 1rem; line-height: 1.3; }
.mr-sample b { display: block; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.5rem, 1rem + 2.4cqi, 2.25rem); line-height: 0.95; letter-spacing: 0.01em; }
.mr-body { display: grid; gap: clamp(20px, 3.6cqi, 36px); padding: var(--mr-pad); }
.mr-head { display: grid; gap: 4px; }
.mr-biz { margin: 0; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.75rem, 1rem + 3cqi, 3rem); line-height: 0.95; }
.mr-month { margin: 0; color: var(--ink-soft); font-size: 1rem; }
.mr-h { margin: 0 0 12px; font-family: var(--font-text); font-weight: 700; font-size: 1.0625rem; line-height: 1.3; text-transform: none; letter-spacing: 0; }

/* the four numbers */
.mr-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.mr-stats > div { display: grid; gap: 4px; align-content: start; padding: 12px 14px 14px; background: var(--paper); }
.mr-stats dt { font-weight: 600; font-size: 0.9375rem; line-height: 1.3; color: var(--ink-soft); }
.mr-stats dd { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.25rem, 1.2rem + 4cqi, 3.75rem); line-height: 0.95; }
.mr-stats .mr-why { font-family: var(--font-text); font-weight: 400; font-size: 0.875rem; line-height: 1.35; color: var(--ink-soft); }

/* where they came from: one bar, four parts */
.mr-bar { display: flex; height: 28px; overflow: hidden; background: var(--paper); transform-origin: left center; }
.mr-bar > span { display: block; height: 100%; }
.mr-c1 { background: var(--accent); }
.mr-c2 { background: var(--ink); }
.mr-c3 { background: #8C877C; }
.mr-c4 { background: #CFCABF; }
.mr-legend { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 24px; }
@container (min-width: 440px) { .mr-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mr-legend li { display: flex; align-items: center; gap: 8px; font-size: 0.9375rem; line-height: 1.3; }
.mr-legend li::before { content: ""; flex: none; width: 12px; height: 12px; background: var(--c); }
.mr-legend b { margin-left: auto; }

/* lists with numbers on the right (searches, pages) */
.mr-list { list-style: none; margin: 0; padding: 0; display: grid; }
.mr-list li { display: flex; justify-content: space-between; gap: 16px; padding: 8px 10px; font-size: 0.9375rem; line-height: 1.35; }
.mr-list li:nth-child(odd) { background: var(--paper); }
.mr-list b { flex: none; }
.mr-list span { min-width: 0; overflow-wrap: anywhere; }

/* phone vs desktop */
.mr-split { display: flex; height: 28px; background: var(--paper); transform-origin: left center; }
.mr-split > span { display: block; height: 100%; }

/* what we did / next month */
.mr-notes { display: grid; gap: 16px; }
.mr-note { padding: 14px 16px; background: var(--paper); }
.mr-note p, .mr-note li { font-size: 0.9375rem; line-height: 1.45; }
.mr-note ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mr-note li, .mr-note p { text-wrap: balance; }
.mr-note .mr-h { margin-bottom: 8px; }
.mr-hours { margin-top: 8px; font-weight: 600; }

.mr-cols { display: grid; gap: clamp(20px, 3.6cqi, 36px); }
@container (min-width: 520px) {
  .mr-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container (min-width: 760px) {
  .mr--full .mr-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 4cqi, 48px); align-items: start; }
  .mr--full .mr-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* compact (upkeep page): the stats stay 2 x 2 so the sheet keeps its paper shape */
.mr--compact .mr-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mr--compact .mr-stats dd { font-size: clamp(1.875rem, 1rem + 3.6cqi, 2.5rem); }
/* compact keeps under ~620px tall so it fits the pinned stage on a 1024x768 or 1280x720 laptop */
.mr--compact .mr-sample { padding-block: 10px; }
.mr--compact .mr-body { gap: 16px; padding: 20px clamp(16px, 4cqi, 24px) 24px; }
.mr--compact .mr-stats > div { padding: 10px 12px 12px; }
.mr--compact .mr-h { margin-bottom: 8px; }
.mr--compact .mr-legend { margin-top: 8px; gap: 4px 16px; }
.mr--compact .mr-list li { padding: 6px 10px; }
.mr-more { margin: 0; font-weight: 600; }

/* mini (services picker): fills the 3:2 frame, sized from its own width */
.mr--mini { height: 100%; align-content: start; overflow: hidden; }
.mr--mini .mr-sample { padding: 2.4cqi 4cqi; font-size: clamp(12px, 2.7cqi, 16px); }
.mr--mini .mr-sample b { font-size: clamp(16px, 5cqi, 30px); }
.mr--mini .mr-body { padding: 4cqi; gap: 3.4cqi; }
.mr--mini .mr-biz { font-size: clamp(18px, 5.4cqi, 34px); }
.mr--mini .mr-month { font-size: clamp(12px, 2.7cqi, 16px); }
.mr--mini .mr-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4cqi; }
.mr--mini .mr-stats > div { padding: 2cqi 2.2cqi; gap: 0.6cqi; }
.mr--mini .mr-stats dt { font-size: clamp(12px, 2.5cqi, 15px); }
.mr--mini .mr-stats dd { font-size: clamp(20px, 6.4cqi, 44px); }
.mr--mini .mr-bar { height: clamp(10px, 3.4cqi, 22px); }
@container (max-width: 330px) { .mr--mini .mr-bar { display: none; } }
.mr-mini-link { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--sheet, #FFFFFF); text-decoration: none; color: inherit; touch-action: manipulation; transition: scale var(--dur-press) var(--ease-out); }
.mr-mini-link:active { scale: 0.99; }
.mr-mini-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.mr-mini-go { position: absolute; right: 0; bottom: 0; padding: 10px 14px; background: var(--ink); color: var(--paper); font-weight: 700; font-size: 1rem; line-height: 1.2; transition: background-color var(--dur-ui) ease, color var(--dur-ui) ease; }
@media (hover: hover) and (pointer: fine) {
  .mr-mini-link:hover .mr-mini-go { background: var(--accent); color: var(--ink); }
}

/* motion (sample page only, set by script): numbers count up, bars grow. Content is in the HTML; script only animates. */
html.motion .mr[data-mr-count] .mr-bar.is-wait, html.motion .mr[data-mr-count] .mr-split.is-wait { transform: scaleX(0); }
html.motion .mr[data-mr-count] .mr-bar.is-grow, html.motion .mr[data-mr-count] .mr-split.is-grow { transform: scaleX(1); transition: transform 900ms var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  .mr-mini-link, .mr-mini-go { transition-duration: 0.01ms; }
}