/* =========================================================================
   MAINTAIN, STAGE PAGE V2 (render/maintain-stage.ts; 2026-10-08). Class prefix mnt-.
   Loaded after stage-v2.css. The film carries the year; what's left here is the
   inside of the accordions. The wall planner (.mnt-cal) stays, compact, in the
   first one: twelve months across, five moments down. Three marks only: a solid
   line runs by itself once set up; a dot is a person on a date; a dashed band has
   no date. Motif: the date, set in mono wherever something is dated.
   House tokens and the site spacing scale (--s*) only.
   ========================================================================= */

.mnt-p { margin: var(--s4) 0 0; max-width: 62ch; font: var(--t-base)/var(--lh-body) var(--ui); color: var(--ink-2); }
.mnt-p code { font: .92em var(--mono); color: var(--ink); }
.mnt-list { margin: var(--s3) 0 0; padding-left: var(--s5); max-width: 62ch; font: var(--t-sm)/1.6 var(--ui); color: var(--ink-2); }
.mnt-list li + li { margin-top: var(--s1); }
.mnt-cap { margin: var(--s4) 0 0; max-width: 72ch; font: var(--t-xs)/var(--lh-meta) var(--mono); color: var(--ink-2); }
.mnt-big { margin: var(--s5) 0 0; max-width: 28ch; font: 750 var(--t-lg)/1.12 var(--display); letter-spacing: -.03em; color: var(--ink); text-wrap: balance; }
.mnt-fig { margin: var(--s5) 0 0; }
.mnt-quiet { margin: var(--s5) 0 0; padding: var(--s3) 0; border-top: 2px solid var(--brand); border-bottom: 1px solid var(--rule); font: var(--t-xs)/1.5 var(--ui); color: var(--ink-3); }
.mnt-quiet q { display: block; font: var(--t-md)/1.4 var(--mono); color: var(--ink); }

/* the tools each topic uses, with the stage's reason for each */
.mnt-tools { margin: 0; padding: 0; list-style: none; max-width: 62ch; border-top: 1px solid var(--rule); }
.mnt-tools li { padding: var(--s3) 0; border-bottom: 1px solid var(--rule); font: var(--t-sm)/1.55 var(--ui); color: var(--ink-2); }
.mnt-tools a { font-weight: 650; color: var(--ink); text-underline-offset: .2em; }
.mnt-tools span:not(.vh) { display: block; margin-top: var(--s1); }

/* headings inside an accordion step down to h4; the shared modules style h3 */
.afl__t h4 { margin: 0 0 var(--s2); font: 700 var(--t-md)/1.2 var(--display); letter-spacing: -.01em; color: var(--ink); }
.stg-mx h4 { margin: 0; font: 650 var(--t-md)/1.3 var(--display); letter-spacing: -.01em; color: var(--ink); }
.sv2-acc__b .stg-mx { margin: 0; }

/* ---- the planner ---- */
.mnt-key { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); margin: 0 0 var(--s5); padding: 0; list-style: none; font: var(--t-sm)/1.4 var(--ui); color: var(--ink-2); }
.mnt-key li { display: flex; align-items: center; gap: var(--s2); }
.mnt-key__m { display: inline-block; flex: none; width: 2rem; height: .75rem; position: relative; }
.mnt-key__m--line::before { content: ""; position: absolute; inset: 50% 0 auto; height: 3px; margin-top: -1.5px; background: var(--ink); }
.mnt-key__m--dot::before { content: ""; position: absolute; left: 50%; top: 50%; width: .75rem; height: .75rem; margin: -.375rem 0 0 -.375rem; border-radius: 50%; background: var(--brand); }
.mnt-key__m--band::before { content: ""; position: absolute; inset: 0; border: 1.5px dashed var(--ink-3); }

.mnt-year { --label: 13rem; --gap: var(--s6); }
.mnt-cal { margin: 0; }
.mnt-year__head, .mnt-ov__row { display: grid; grid-template-columns: var(--label) minmax(0, 1fr); column-gap: var(--gap); }
.mnt-year__head { padding: 0 0 var(--s2); border-bottom: 1px solid var(--rule-firm); }
.mnt-ov { padding: var(--s5) 0 var(--s2); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.mnt-ov__row { align-items: center; padding: var(--s3) 0; border-bottom: 1px solid var(--rule); }
.mnt-ov__row:last-child { border-bottom: 0; }
.mnt-ov__k { margin: 0; font: 750 var(--t-md)/1.15 var(--display); letter-spacing: -.02em; color: var(--ink); }
.mnt-ov__t { min-width: 0; }
.mnt-ov .mnt-track { height: 3rem; margin: 0; }
.mnt-ov .mnt-track + .mnt-track { margin-top: var(--s1); }
.mnt-months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.mnt-months span { position: relative; padding-left: var(--s1); border-left: 1px solid var(--rule); font: var(--t-xs)/1.2 var(--mono); color: var(--ink-2); }
.mnt-months b { font-weight: 400; }
.mnt-months i { font-style: normal; }
.mnt-months span[data-y]::before { content: attr(data-y); display: block; color: var(--ink-3); }
.mnt-months span:not([data-y])::before { content: "\00a0"; display: block; }

/* the track: twelve month columns drawn as hairlines; marks are placed by date (--x, --w in % of the year) */
.mnt-track { position: relative; height: 2.25rem; margin: 0 0 var(--s4);
  background: repeating-linear-gradient(to right, var(--rule) 0 1px, transparent 1px calc(100% / 12)); }
.mnt-track__note { position: absolute; right: 0; top: 0; padding-left: var(--s2); background: var(--paper); font: var(--t-xs)/1 var(--mono); color: var(--ink-3); }
.mnt-mk { position: absolute; left: var(--x); top: 50%; }
.mnt-mk--line { width: var(--w); height: 3px; margin-top: -1.5px; background: var(--ink); }
.mnt-mk--line::after { content: ""; position: absolute; right: 0; top: -4px; border: 5.5px solid transparent; border-left: 8px solid var(--ink); border-right: 0; }
.mnt-mk--band { width: var(--w); height: 1rem; margin-top: -.5rem; border: 1.5px dashed var(--ink-3); }
.mnt-mk--block { width: max(var(--w), .5rem); height: 1rem; margin-top: -.5rem; background: var(--ink); }
.mnt-mk--win, .mnt-mk--win-after { width: var(--w); height: .75rem; margin-top: -.375rem; }
.mnt-mk--win { border: 1.5px solid var(--ink-3); }
.mnt-mk--win-after { background: var(--brand-edge); }
.mnt-mk--dot, .mnt-mk--ring { width: .75rem; height: .75rem; margin: -.375rem 0 0 -.375rem; border-radius: 50%; background: var(--brand); z-index: 1; }
.mnt-mk--ring { background: var(--paper); border: 3px solid var(--brand); }
.mnt-mk__l { position: absolute; left: 50%; bottom: calc(100% + .3rem); z-index: 2; padding: 0 .2rem; background: var(--paper); transform: translateX(-20%); white-space: nowrap; font: var(--t-xs)/1 var(--mono); color: var(--ink); }
.mnt-mk--block .mnt-mk__l { left: 0; transform: none; bottom: calc(100% + .25rem); }
.mnt-mk--end .mnt-mk__l { transform: translateX(-80%); }

/* two short lists side by side: what fools you, what holds up */
.mnt-cmp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); }
.mnt-cmp ul { margin: 0; padding: 0; list-style: none; }
.mnt-cmp li { padding: var(--s2) 0; border-top: 1px solid var(--rule); font: var(--t-base)/1.4 var(--ui); color: var(--ink); }
.mnt-cmp div:first-child li { color: var(--ink-2); }
.mnt-cmp s { text-decoration-color: var(--brand); text-decoration-thickness: 1.5px; }
.mnt-cmp__k { margin: 0 0 var(--s2); font: var(--t-xs)/1.4 var(--mono); color: var(--ink-3); }
.mnt-cmp__k--on { color: var(--brand); }

.mnt-defs, .mnt-sum { margin: var(--s4) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s6); }
.mnt-defs div, .mnt-sum div { padding: var(--s2) 0; border-top: 1px solid var(--rule); }
.mnt-defs dt, .mnt-sum dt { font: var(--t-xs)/1.4 var(--mono); color: var(--ink-3); }
.mnt-defs dd, .mnt-sum dd { margin: var(--s1) 0 0; font: var(--t-base)/1.4 var(--ui); color: var(--ink); }

/* ---- narrower: the label column goes above its track ---- */
@media (max-width: 64rem) {
  .mnt-year { --label: 10rem; --gap: var(--s5); }
}
@media (max-width: 52rem) {
  .mnt-year__head { grid-template-columns: 1fr; }
  .mnt-year__head > span:first-child { display: none; }
  .mnt-ov__row { grid-template-columns: 1fr; row-gap: var(--s2); padding: var(--s3) 0 var(--s4); }
}
@media (max-width: 40rem) {
  .mnt-months i { display: none; }
  .mnt-months span { padding-left: 2px; }
  .mnt-months span[data-y]::before { content: "’" attr(data-ys); }
  .mnt-mk__l, .mnt-track__note { display: none; }
  .mnt-cmp, .mnt-defs, .mnt-sum { grid-template-columns: 1fr; }
  .mnt-cmp { gap: var(--s4); }
  .mnt-big { font-size: var(--t-lg); }
}