/* =====================================================================
   Paper and Ink · essays/the-savings-that-became-a-project.css
   "The Savings That Became a Project": the figures only this essay uses.
   Loaded after the shared stylesheets; everything shared lives in css/.
   ===================================================================== */

/* Layout: one 64ch reading column on grained paper; two figures break out to 860px:
   a reconstructed six-month maintenance report with margin notes (Figure 1), and
   three grids of 100 hours on graph paper (Figure 2).
   Gold = delivering today's output; blue = preserving tomorrow's capability. */

/* ---- footnote markers -------------------------------------------------- */
sup.ref { font-family: var(--sans); font-size: .62em; line-height: 0; margin-left: 1px; }
sup.ref a { text-decoration: none; color: var(--life); padding: 0 1px; }
sup.ref a:hover { text-decoration: underline; }
.sources li:target { color: var(--ink); background: var(--life-soft); }

/* ---- the deferral record in the running text -------------------------- */
.prose ol.deferral { padding-left: 1.4em; }
.prose ol.deferral li { margin: 0 0 .55em; }

/* ---- Figure 1: the six-month report and its missing column ------------- */
.mrfig { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 56px; align-items: start; padding: 10px 4px 6px; }
/* the wrap carries the tilt, so the report and its stamps turn as one sheet; nothing here clips */
.mr-wrap { position: relative; transform: rotate(-1.2deg); padding-bottom: 8px; }
.mr {
  box-sizing: border-box; padding: 22px 22px 118px;
  background: var(--noise), var(--slip);
  font-family: var(--mono); font-size: .78rem; line-height: 1.75;
}
.mr .sh { margin: 0; text-align: center; letter-spacing: .18em; text-transform: uppercase; font-weight: 500; }
.mr .ss { margin: 0 0 8px; text-align: center; font-size: .7rem; letter-spacing: .06em; }
.mr .rule { border-top: 1px dashed currentColor; opacity: .45; margin: 8px 0; }
.mr .ln { display: flex; gap: 6px; margin: 0; }
.mr .ln span { flex: none; }
.mr .ln span:first-child { flex: 0 1 auto; min-width: 0; }
.mr .ln i { flex: 1; min-width: 10px; border-bottom: 1px dotted currentColor; opacity: .4; transform: translateY(-.45em); }
.mr .ln-once { color: var(--slip-once); font-weight: 500; }
.mr .ln-ink { color: var(--slip-ink); }
.mr .ln-life { color: var(--slip-life); }
.mr .sub { margin: 10px 0 2px; font-family: var(--sans); font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--slip-life); }
.mr .foot { margin: 6px 0 0; font-size: .7rem; color: var(--slip-ink); }
.mr .a { display: none; }
.mrfig .stamp { position: absolute; }
.mrfig .st1 { color: var(--slip-once); left: 22px; bottom: 70px; transform: rotate(-7deg); animation-delay: .7s; }
.mrfig .st2 { color: var(--slip-life); right: 18px; bottom: 26px; transform: rotate(5deg); animation-delay: 2s; }

.mr-notes { display: grid; gap: 64px; padding-top: 70px; }
.mr-notes .mn { position: relative; margin: 0; max-width: 26ch; color: var(--ink); animation: fade .7s ease both; }
.mr-notes .mn1 { animation-delay: 1.1s; }
.mr-notes .mn2 { animation-delay: 2.4s; }
.mr-notes .pen { position: absolute; left: -66px; top: 2px; width: 60px; height: 38px; }
.mr-notes .mn1 .pen path { animation-delay: 1.2s; }
.mr-notes .mn2 .pen path { animation-delay: 2.5s; }

/* with the script: the button fills in what the case reported later */
.mrfig.later .mr .q { display: none; }
.mrfig.later .mr .a { display: inline; animation: fade .6s ease both; }
.mrfig.later .st2 { animation: thump .45s cubic-bezier(.3, 1.6, .5, 1) .2s both; }
.mrbar { margin: 16px 0 0; font-family: var(--sans); font-size: .8rem; }
.mrbar:not(.on) { display: none; }

/* ---- Figure 2: one hundred hours, three quarters ----------------------- */
.ctl { display: grid; gap: .4rem; max-width: 640px; margin: 0 0 1.2rem; font-family: var(--sans); font-size: .86rem; color: var(--ink); }
.ctl .cap { display: flex; justify-content: space-between; gap: .8rem; color: var(--life); }
.ctl output { font-family: var(--mono); font-weight: 500; font-variant-numeric: tabular-nums; }
.ctl input[type=range] { width: 100%; margin: 0; accent-color: var(--life); }
.ctl input:focus-visible { outline: 2px solid var(--life); outline-offset: 3px; }
.ctl .fixed { margin: 0; font-size: .8rem; color: var(--muted); }

.sheet.hours2 { cursor: default; }
.hours2 .lab-ink { fill: var(--slip-ink); }
.hours2 .pen-g { fill: var(--slip-ink); }
.hours2 .small { font-size: 13px; }
.hours2 .m-d { fill: var(--slip-once); stroke: var(--slip-once); stroke-width: 1; stroke-linejoin: round; }
.hours2 .m-moved { fill: none; stroke: var(--slip-life); stroke-width: 1.3; stroke-dasharray: 2 2.5; }
.hours2 .m-c { fill: none; stroke: var(--graphite); stroke-width: 1.8; stroke-linecap: round; }
.hours2 .m-p { fill: none; stroke: var(--slip-life); stroke-width: 1.8; }
.hours2 .tag-once { fill: var(--slip-once); font-weight: 500; }
.hours2 .tag-life { fill: var(--slip-life); font-weight: 500; }
.hours2 .tag-ink { fill: var(--slip-ink); }
.hours2 .tagtext { white-space: pre; }
.hours2 .still .fade { animation: none; }

@media (max-width: 640px) {
  .mrfig { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .mr-wrap { width: min(100%, 380px); margin: 0 auto; }
  .mr-notes { padding: 0; gap: 14px; width: min(100%, 380px); margin: 0 auto; }
  .mr-notes .mn { max-width: none; }
  .mr-notes .pen { display: none; }
}

/* Phone mode: the report stacks above its notes; the hour grids are redrawn by the page
   script one above another with their totals beside them, and the figure text grows. */
@media (max-width: 560px) {
  .mr { padding: 18px 16px 118px; font-size: .74rem; }
  .sheet.hours2 { min-width: 0; user-select: none; }
  .sheet-scroll:has(.hours2) { overflow-x: clip; }
  .hours2 .svgnote { font-size: 16px; }
  .hours2 .svglab { font-size: 18px; }
  .hours2 .tagtext { font-size: 15px; }
  .hours2 .small { font-size: 15px; }
}