/* =====================================================================
   Paper and Ink · essays/the-hard-part-was-never-the-typing.css
   "The Hard Part Was Never the Typing": 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 printed strip chart of the Demirer, Musolff and Yang estimates on a log scale (Figure 1, static)
   and a worksheet for Brooks's arithmetic on taped graph paper, with two sliders and before/after
   bars (Figure 2, interactive).
   Gold = writing the code; blue = deciding what to build.
   Every rule below is scoped to its figure so none of it can restyle the generated Read next block.
   Labels stay at 11px or larger. */

/* ---- 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 strip chart ----------------------------------------------- */
.ledger { max-width: 720px; padding: 1.3rem 1.4rem 1rem; background: var(--noise), var(--slip); color: var(--slip-ink); border-top: 5px solid var(--graphite); transform: rotate(-.5deg); }
.ledger .lh { margin: 0 0 .8rem; font-family: var(--sans); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--graphite); }
.ledger .row { display: grid; grid-template-columns: minmax(0, 10.5rem) minmax(0, 1fr) minmax(0, 3.6rem); gap: .8rem; align-items: center; margin: 0; padding: .38rem 0; border-top: 1px dashed var(--grid-major); }
.ledger .nm { font-family: var(--sans); font-size: .78rem; font-weight: 600; }
.ledger .bar { display: block; height: 12px; }
.ledger .bar i { display: block; height: 100%; animation: wipe .7s ease both; }
.ledger .row b { font-family: var(--mono); font-size: .82rem; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.ledger .w .nm, .ledger .w b { color: var(--slip-once); }
.ledger .w .bar i { background: var(--once); }
.ledger .g .nm, .ledger .g b { color: var(--graphite); }
.ledger .g .bar i { background: repeating-linear-gradient(45deg, var(--graphite) 0 2px, transparent 2px 5px); border: 1px solid var(--graphite); }
.ledger .d .nm, .ledger .d b { color: var(--slip-life); }
.ledger .d .bar i { background: var(--life); }
/* bar lengths on a log scale: ln(x) / ln(25.5) */
.ledger .v1 { width: 100%; }
.ledger .v2 { width: 50%; }
.ledger .v3 { width: 38%; }
.ledger .v4 { width: 31%; }
.ledger .v5 { width: 18%; }
.ledger .v6 { width: 8%; }
.ledger .lf { margin: .7rem 0 0; font-family: var(--sans); font-size: .7rem; color: var(--graphite); }

/* ---- Figure 2: Brooks's arithmetic ----------------------------------------------- */
.calc {
  position: relative; max-width: 720px; padding: 1.5rem 1.4rem 1.2rem; 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);
}
.calc::before, .calc::after { content: ""; position: absolute; top: -11px; width: 84px; height: 24px; background: var(--noise), var(--tape); }
.calc::before { left: 22px; transform: rotate(-5deg); }
.calc::after { right: 22px; transform: rotate(4deg); }
.calc .ch { margin: 0 0 .9rem; font-family: var(--sans); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--graphite); }
.calc .ctrl { display: grid; gap: .35rem; margin-bottom: 1rem; }
.calc .ctrl label { display: flex; justify-content: space-between; gap: 1rem; font-family: var(--sans); font-size: .8rem; font-weight: 600; margin-top: .4rem; }
.calc .ctrl output { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--slip-once); }
.calc input[type=range] { width: 100%; margin: 0; accent-color: var(--slip-life); }
.calc input[type=range]:focus-visible { outline: 2px solid var(--slip-life); outline-offset: 4px; }
.calc .bars { display: grid; grid-template-columns: minmax(0, 3.6rem) minmax(0, 1fr); gap: .5rem .8rem; align-items: center; }
.calc .bl { margin: 0; font-family: var(--sans); font-size: .72rem; font-weight: 600; color: var(--graphite); }
.calc .track { display: flex; height: 22px; border: 1.5px solid var(--graphite); background: var(--sheet); }
.calc .ess { background: var(--life); transition: width .3s ease; }
.calc .acc { background: var(--once); transition: width .3s ease; }
.calc .res { margin: .9rem 0 .4rem; font-family: var(--serif); font-size: 1.15rem; line-height: 1.35; color: var(--slip-ink); }
.calc .key { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin: 0; font-family: var(--sans); font-size: .72rem; font-weight: 600; }
.calc .k::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: .4rem; vertical-align: -1px; }
.calc .k.life { color: var(--slip-life); }
.calc .k.life::before { background: var(--life); }
.calc .k.once { color: var(--slip-once); }
.calc .k.once::before { background: var(--once); }

@media (max-width: 560px) {
  .ledger { padding: 1.1rem .85rem .9rem; }
  .ledger .row { grid-template-columns: minmax(0, 1fr) minmax(0, 3.4rem); gap: .2rem .6rem; }
  .ledger .bar { grid-column: 1 / -1; grid-row: 2; }
  .calc { padding: 1.3rem .85rem 1rem; }
  .calc .ctrl label { flex-direction: column; gap: .1rem; }
}