/* =====================================================================
   Paper and Ink · essays/growth-can-empty-the-bank-account.css
   "Growth Can Empty the Bank Account": 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:
   an income statement and a cash schedule joined by a receivable tag (Figure 1)
   and an eight-month growth-and-timing worksheet on taped graph paper (Figure 2).
   Gold = accrual profit; blue = operating cash flow; graphite = the receivable that joins them.
   Every rule below is scoped to its figure so none of it can restyle the generated Read next block. */

/* ---- 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 two ledgers -------------------------------------------- */
/* clip sideways overflow so a stamp's starting scale can never widen the page on a phone */
.ldfig { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 150px) minmax(0, 1.1fr); gap: 0 14px; align-items: center; overflow-x: clip; overflow-clip-margin: 14px; padding-top: 6px; }
.ldfig .isht, .ldfig .csht { position: relative; font-family: var(--mono); font-size: .74rem; line-height: 1.6; padding: 1rem 1rem 1.1rem; background: var(--noise), var(--sheet); border-top: 5px solid var(--graphite); }
.ldfig .isht { color: var(--slip-once); transform: rotate(-1.2deg); animation: fade .6s ease both; }
.ldfig .csht { color: var(--slip-life); transform: rotate(.9deg); animation: fade .6s ease 1s both; }
.ldfig .ph { font-family: var(--sans); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; margin: 0; color: var(--slip-ink); opacity: .8; }
.ldfig .pn { font-size: .62rem; opacity: .7; margin: .1rem 0 .7rem; color: var(--slip-ink); }
.ldfig .ln { display: flex; align-items: baseline; gap: 6px; }
.ldfig .ln span { flex: none; }
.ldfig .ln i { flex: 1; min-width: 10px; border-bottom: 1px dotted currentColor; opacity: .45; transform: translateY(-.45em); }
.ldfig .ln b { flex: none; font-weight: 500; font-variant-numeric: tabular-nums; }
.ldfig .ln.tt { border-top: 1.5px solid currentColor; margin-top: .3rem; padding-top: .3rem; font-size: .84rem; }
.ldfig .isht .stamp.s1 { display: table; margin: .9rem 0 0 .2rem; color: var(--slip-once); transform: rotate(-6deg); animation-delay: .7s; }
.ldfig .cg { display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); gap: .15rem .7rem; align-items: baseline; }
.ldfig .cg b { font-family: var(--sans); font-size: .56rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; text-align: right; color: var(--slip-ink); opacity: .75; }
.ldfig .cg b:first-child { text-align: left; }
.ldfig .cg span { color: var(--slip-ink); opacity: .8; }
.ldfig .cg em { font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }
.ldfig .cg em.neg { font-weight: 500; }
.ldfig .csht .stamp.s2 { display: table; margin: .9rem .1rem 0 auto; color: var(--slip-life); transform: rotate(4deg); animation-delay: 1.7s; }
/* the receivable: a graphite tag on a string, tied between the two sheets */
.ldfig .rcv { display: flex; align-items: center; animation: fade .6s ease 2.2s both; }
.ldfig .rcv .wire { flex: 1; min-width: 8px; border-top: 1.5px dashed var(--graphite); }
.ldfig .rcv .tag { flex: none; max-width: 112px; margin: 0; padding: .45rem .55rem; font-family: var(--mono); font-size: .64rem; line-height: 1.45; color: var(--graphite); background: var(--noise), var(--slip); border: 1.5px solid var(--graphite); border-radius: 3px; transform: rotate(-3deg); text-align: center; }
.ldfig .rcv .tag b { display: block; font-family: var(--sans); font-size: .56rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }
.ldnotes { display: flex; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; margin-top: 1.3rem; }
.ldnotes p { margin: 0; color: var(--ink); }
.ldnotes .n1 { animation: fade .7s ease 2.5s both; }
.ldnotes .n2 { animation: fade .7s ease 2.8s both; }
.ldnotes .n1 b { color: var(--once); }
.ldnotes .n2 b { color: var(--life); }

/* ---- Figure 2: the growth-and-timing worksheet ----------------------------- */
.gws {
  position: relative; padding: 1.5rem 1.4rem 1.3rem; transform: rotate(-.3deg); color: var(--slip-ink);
  background:
    var(--noise),
    linear-gradient(var(--grid-major) 1px, transparent 1px) 0 0 / 60px 60px,
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px) 0 0 / 60px 60px,
    linear-gradient(var(--grid-minor) 1px, transparent 1px) 0 0 / 12px 12px,
    linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px) 0 0 / 12px 12px,
    var(--sheet);
}
.gws::before, .gws::after { content: ""; position: absolute; top: -11px; width: 84px; height: 24px; background: var(--noise), var(--tape); }
.gws::before { left: 22px; transform: rotate(-5deg); }
.gws::after { right: 22px; transform: rotate(4deg); }
.gws .pick { border: 0; margin: 0 0 .7rem; padding: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1.2rem; }
.gws .pick legend { float: left; font-family: var(--sans); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--graphite); width: 9rem; padding: .35rem 0 0; }
.gws .pick label { font-family: var(--sans); font-size: .85rem; color: var(--graphite); cursor: pointer; padding: .2rem 0; border-bottom: 2px solid transparent; }
.gws .pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.gws .pick label:has(input:checked) { color: var(--slip-ink); border-bottom-color: var(--slip-ink); }
.gws .pick label:has(input:focus-visible) { outline: 2px solid var(--life); outline-offset: 3px; }
/* month rows and the balance chart share one grid: a label column, then eight months */
.gws .tbl, .gws .chart { display: grid; grid-template-columns: 8.5rem repeat(8, minmax(0, 1fr)); gap: .2rem .3rem; font-family: var(--mono); font-size: .72rem; }
.gws .tbl { margin-top: 1rem; padding: .6rem .7rem .5rem; background: var(--noise), var(--slip); box-shadow: 0 1px 1px var(--shadow); }
.gws .rl { font-family: var(--sans); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--graphite); align-self: center; }
.gws .rl.once { color: var(--slip-once); }
.gws .rl.life { color: var(--slip-life); }
.gws .mh { text-align: right; color: var(--graphite); font-size: .66rem; }
.gws .v { text-align: right; font-variant-numeric: tabular-nums; }
.gws .v.once { color: var(--slip-once); }
.gws .v.life { color: var(--slip-life); }
/* the chart is drawn to a fixed ruler: 480k above the zero line, 300k below */
.gws .chart { margin-top: 1rem; padding: 0 .7rem; }
.gws .chart .rl { align-self: start; padding-top: 1rem; }
.gws .col { position: relative; height: 240px; background: linear-gradient(var(--graphite), var(--graphite)) 0 61.5% / 100% 1.5px no-repeat; }
.gws .col i { position: absolute; left: 18%; right: 18%; background: var(--slip-life); animation: fade .5s ease both; }
.gws .col i.up { bottom: 38.5%; max-height: 61.5%; }
.gws .col i.dn { top: 61.5%; max-height: 38.5%; opacity: .55; }
.gws .col b { position: absolute; left: -4px; right: -4px; top: calc(61.5% + 4px); text-align: center; font-weight: 500; font-size: .62rem; color: var(--slip-life); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* each total sits beside the zero line, on the side away from its bar */
.gws .col i.dn + b { top: auto; bottom: calc(38.5% + 4px); }
.gws .col.lo i { opacity: 1; outline: 2px solid var(--slip-life); outline-offset: 2px; }
.gws .low { margin: .8rem 0 0; color: var(--slip-life); font-size: 1.05rem; }
.gws + .narr { margin-top: 1.5rem; }

@media (max-width: 680px) {
  .ldfig { grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 400px; }
  .ldfig .rcv { flex-direction: column; height: 120px; }
  .ldfig .rcv .wire { border-top: 0; border-left: 1.5px dashed var(--graphite); min-height: 10px; }
}

/* Phone mode: the worksheet's labels move above their rows so all eight months keep their width. */
@media (max-width: 560px) {
  .gws { padding: 1.4rem .8rem 1.1rem; }
  .gws .pick { display: grid; grid-template-columns: 1fr; gap: .1rem; }
  .gws .pick legend { float: none; width: auto; }
  .gws .tbl, .gws .chart { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .15rem .15rem; font-size: .62rem; }
  .gws .tbl { padding: .5rem .4rem .4rem; }
  .gws .chart { padding: 0 .1rem; }
  .gws .rl { grid-column: 1 / -1; padding-top: .3rem; }
  .gws .chart .rl { padding-top: 0; }
  .gws .col { height: 200px; }
  .gws .col b { font-size: .5rem; left: -6px; right: -6px; }
}