/* Monthly upkeep: page-local styles (page builder A). Shared tokens only. */

/* ---------- The monthly report ---------- */
.rep-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 40px; align-items: center; }
.rep-text { grid-column: 1 / 6; display: grid; gap: 24px; justify-items: start; }
.rep-list { font-size: var(--step-body); font-weight: 600; line-height: 1.4; }
.rep-paper-wrap { grid-column: 7 / -1; display: grid; justify-items: center; }
.rep-paper { width: min(100%, 560px); }
.rep.rep-pin .rep-pinbox { height: calc(100svh - var(--header-h)); display: grid; align-items: center; }
.rep.rep-pin .rep-paper { width: min(100%, 560px); } /* 2026-11-06: the HTML sample sheet sets its own height (was a 17:22 photo frame) */
/* phones: opens once as it scrolls in (the class is added by script, so no script = open) */
.rep.rep-once .rep-paper { transition: clip-path 900ms var(--ease-out); }
.rep.rep-once .rep-paper:not(.is-open) { clip-path: inset(0 0 82% 0); }
@media (max-width: 800px) {
  .rep-text, .rep-paper-wrap { grid-column: 1 / -1; }
  .rep-list { font-size: var(--step-body); }
}

/* ---------- Hosting ---------- */
.host-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 32px; align-items: end; }
.host-word { grid-column: 1 / 8; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: var(--step-display); line-height: 0.85; letter-spacing: -0.01em; }
.host-side { grid-column: 8 / -1; display: grid; gap: 16px; padding-bottom: 0.4em; }
.host-st { font-size: var(--step-lead); line-height: 1.3; }
@media (max-width: 800px) { .host-word, .host-side { grid-column: 1 / -1; } .host-side { padding-bottom: 0; } }

/* ---------- If you leave ---------- */
.leave { display: grid; gap: 8px; }
.leave li { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 10px; align-items: baseline; padding: clamp(20px, 2.4vw, 32px) clamp(16px, 2vw, 28px); background: var(--paper-2); font-size: var(--step-lead); line-height: 1.3; }
.leave-k { grid-column: 1 / 6; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(2rem, 1rem + 2.4vw, 3.75rem); line-height: 0.9; }
.leave li > .fill, .leave li > .leave-v { grid-column: 7 / -1; justify-self: start; }
@media (max-width: 800px) {
  .leave-k, .leave li > .fill, .leave li > .leave-v { grid-column: 1 / -1; }
  .leave li { font-size: var(--step-body); }
}

@media (prefers-reduced-motion: reduce) { .rep.rep-once .rep-paper { transition: none; } }