/* =====================================================================
   Paper and Ink · essays/the-minutes-we-saved.css
   "The Minutes We Saved": 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 paper objects break out to 860px:
   a ruled savings worksheet with a pencil correction (Figure 1) and a taped sheet of graph paper (Figure 2).
   Gold = realized value (a result that changed); blue = released capacity (time made available).
   The monetized estimate is graphite on purpose: it is neither of the two. */

/* ---- 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); }

/* ---- Figure 1: the savings worksheet ------------------------------------ */
.wsfig { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 28px 48px; align-items: start; }
.wsheet {
  position: relative; background-color: var(--sheet); color: var(--slip-ink);
  background-image: var(--noise), repeating-linear-gradient(transparent 0 31px, var(--grid-major) 31px 32px);
  background-size: 180px, 100% 32px; background-position: 0 0, 0 14px;
  padding: 26px 24px 22px; transform: rotate(-.8deg);
  font-family: var(--mono); font-size: .8rem; line-height: 32px;
}
.wsheet::before {
  content: ""; position: absolute; top: -12px; left: 50%; width: 92px; height: 26px; margin-left: -46px;
  background: var(--noise), var(--tape); transform: rotate(-3deg);
}
.ws-hd { font-family: var(--sans); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--graphite); line-height: 1.4; margin: 0; }
.ws-sub { font-family: var(--sans); font-size: .68rem; letter-spacing: .08em; color: var(--graphite); line-height: 1.4; margin: 2px 0 6px; }
.ws-ln { display: flex; gap: 8px; align-items: baseline; margin: 0; }
.ws-ln span { flex: none; }
.ws-ln i { flex: 1; min-width: 14px; border-bottom: 1px dotted currentColor; opacity: .4; transform: translateY(-.4em); }
.ws-ln .v { font-variant-numeric: tabular-nums; font-weight: 500; }
.ws-ln.op { padding-left: 1.2em; }
.ws-ln.cap { color: var(--slip-life); }
.ws-ln.cap .v { border-bottom: 2px solid currentColor; line-height: 1.2; }
.ws-ln.money { color: var(--graphite); position: relative; padding-top: 26px; }
.ws-ln.out { color: var(--slip-once); }
.ws-ln.out .v { font-family: var(--serif); font-style: italic; font-size: 1rem; font-weight: 400; }
/* the pencil correction: the label is struck, the honest label is written above it */
.struck { position: relative; }
.struck::after {
  content: ""; position: absolute; left: -2px; right: -2px; top: 52%; height: 1.6px;
  background: var(--graphite); transform: rotate(-2deg); transform-origin: left;
  animation: strike .5s ease-out 2.2s both;
}
@keyframes strike { from { transform: rotate(-2deg) scaleX(0); } }
.fix {
  position: absolute; left: 0; top: 4px; font-family: var(--serif); font-style: italic; font-size: 1.02rem;
  line-height: 1.2; color: var(--graphite); transform: rotate(-1.5deg);
}
.ws-rule { border-top: 1px solid var(--graphite); opacity: .55; margin: 4px 0 0; }
.ws-rule.dbl { border-top: 3px double var(--graphite); }
/* the notes sit level with the rows they point at: released capacity, the dollar line, the gold line */
.ws-notes { display: grid; gap: 18px; padding-top: 214px; }
.ws-notes .mnote p { color: var(--ink); }
.ws-notes .n1 .pen path { animation-delay: .9s; }
.ws-notes .n2 .pen path { animation-delay: 2.5s; }
.ws-notes .n3 .pen path { animation-delay: 3.6s; }
/* reveal order: the arithmetic, then the correction, then the unanswered gold line */
.wsheet .r1 { animation-delay: .2s; } .wsheet .r2 { animation-delay: .35s; } .wsheet .r3 { animation-delay: .5s; }
.wsheet .r4 { animation-delay: .8s; } .wsheet .r5 { animation-delay: 1.4s; } .wsheet .r6 { animation-delay: 1.7s; }
.wsheet .fix { animation-delay: 2.6s; } .wsheet .r7 { animation-delay: 3.1s; }
.ws-notes .n1 { animation-delay: 1s; } .ws-notes .n2 { animation-delay: 2.7s; } .ws-notes .n3 { animation-delay: 3.7s; }

/* ---- Figure 2: same hours, different outcomes ---------------------------- */
#sheet2 { -webkit-user-select: none; user-select: none; }
.ochart text { fill: var(--slip-ink); }
.ochart .zero { fill: none; stroke: var(--graphite); stroke-width: 1.6; stroke-dasharray: 2 6; stroke-linecap: round; }
.ochart .pen { fill: none; stroke: var(--slip-ink); stroke-width: 1.3; stroke-linecap: round; opacity: .8; }
.ochart .tk { stroke: var(--slip-ink); stroke-width: 1; opacity: .55; }
.ochart .tk.major { opacity: .9; stroke-width: 1.3; }
.ochart .rowlab { font-family: var(--sans); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; fill: var(--graphite); }
.ochart .svgnote.sm { font-size: 13px; }
.ochart .tally { stroke: var(--slip-life); stroke-width: 1.8; stroke-linecap: round; }
.ochart .used { stroke: var(--slip-once); stroke-width: 3; stroke-linecap: round; opacity: .9; }
.ochart .brace { fill: none; stroke: var(--graphite); stroke-width: 1.2; stroke-linecap: round; }
.ochart .cursor { stroke: var(--slip-ink); stroke-width: 1.2; stroke-dasharray: 3 4; opacity: .7; }
.ochart .tagbox { fill: var(--slip); stroke: var(--slip-ink); stroke-width: 1; }
.ochart .dot-once { fill: var(--slip-once); stroke: var(--sheet); stroke-width: 1.5; }
.checks { font-family: var(--sans); font-size: .82rem; color: var(--muted); margin: .6rem 0 0; }
.checks b { font-weight: 600; color: var(--ink); }

@media (max-width: 640px) {
  .wsfig { grid-template-columns: minmax(0, 1fr); }
  .ws-notes { gap: 1rem; padding-top: 0; }
  .ws-notes .pen { display: none; }
}

/* Phone mode: Figure 1 stacks, its worksheet tightens; Figure 2 is redrawn by the page script as a narrower,
   taller sheet (viewBox 400 x 540), so it fits the column with no sideways scroll, and its SVG text is raised
   so labels render at 11px or more. */
@media (max-width: 560px) {
  .wsheet { padding: 24px 16px 18px; font-size: .74rem; }
  .ws-ln { gap: 6px; }
  .fix { font-size: .95rem; }
  .sheet-scroll { overflow-x: clip; }
  .sheet { min-width: 0; padding: 24px 8px 10px; }
  .ochart .svgnote { font-size: 16px; }
  .ochart .svgnote.sm { font-size: 15px; }
  .ochart .svglab { font-size: 18px; }
  .ochart .tick { font-size: 14px; }
  .ochart .rowlab { font-size: 13.5px; }
  .ochart .tagtext { font-size: 15px; }
}