/* =====================================================================
   Paper and Ink · essays/faster-work-can-make-a-slower-company.css
   "Faster Work Can Make a Slower Company": 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:
   three in-trays of proposals with a drafting-speed switch (Figure 1), and a five-day
   unfinished-work ledger on graph paper with a review-capacity slider (Figure 2).
   Gold = local production speed; blue = end-to-end completion rate. */

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

/* ---- shared controls ----------------------------------------------------- */
.speed { border: 0; margin: 0 0 1.1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; font-family: var(--sans); font-size: .86rem; color: var(--ink); }
.speed legend { padding: 0; margin-bottom: .35rem; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.speed label { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; }
.speed input { accent-color: var(--once); margin: 0; }
.speed input:focus-visible { outline: 2px solid var(--life); outline-offset: 3px; }

/* ---- Figure 1: three in-trays -------------------------------------------- */
/* clip sideways overflow so a stamp's starting scale can never widen the page on a phone */
.trayfig { overflow-x: clip; overflow-clip-margin: 14px; padding: 4px 4px 0; }
.trays { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; align-items: end; }
.tray { display: grid; gap: .45rem; justify-items: center; text-align: center; }
.tl { margin: 0; font-family: var(--sans); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.tl small { display: block; font-weight: 400; letter-spacing: .04em; text-transform: none; font-size: .78rem; color: var(--muted); }
/* the tray: a shallow paper box, open at the top, with a heavier front lip */
.bin {
  position: relative; width: 100%; max-width: 220px; height: 176px; box-sizing: border-box;
  display: flex; flex-direction: column-reverse; align-items: center; gap: 1px; padding: 0 14px 12px;
  background: var(--noise), var(--sheet); border-bottom: 10px solid var(--graphite);
  border-left: 1px solid color-mix(in srgb, var(--graphite) 50%, transparent);
  border-right: 1px solid color-mix(in srgb, var(--graphite) 50%, transparent);
}
.t1 .bin { transform: rotate(-.8deg); }
.t2 .bin { transform: rotate(.4deg); }
.t3 .bin { transform: rotate(-.3deg); }
/* each sheet is one proposal, seen edge-on in the stack */
.sh { display: block; flex: none; width: 86%; height: 4px; box-sizing: border-box; background: var(--slip); border: 1px solid var(--slip-ink); border-width: 1px 1px 0; animation: fade .3s ease both; }
.sh:nth-child(3n+1) { translate: -3px 0; }
.sh:nth-child(3n+2) { translate: 2px 0; rotate: -.6deg; }
.sh.wait { border-color: var(--slip-once); background: color-mix(in srgb, var(--once-soft) 60%, var(--slip)); }
.sh.out { border-color: var(--graphite); }
.sh.done { border-color: var(--slip-life); }
.bin .acc { position: absolute; left: 50%; bottom: 40px; translate: -50% 0; color: var(--slip-life); transform: rotate(-6deg); font-size: .66rem; background: color-mix(in srgb, var(--slip) 70%, transparent); }
.cnt { margin: 0; font-family: var(--mono); font-size: 1.15rem; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink); }
.cnt.once { color: var(--once); }
.cnt.life { color: var(--life); }
.notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 1rem; }
.notes .mnote p { color: var(--ink); }
.notes .n1 { grid-column: 1; animation: fade .7s ease 1.6s both; }
.notes .n2 { grid-column: 3; animation: fade .7s ease 2.6s both; }
.notes .n1 .pen path { animation-delay: 1.6s; }
.notes .n2 .pen path { animation-delay: 2.6s; }
.notes b.g { color: var(--once); }
.notes b.b { color: var(--life); }
.trayfig .narr { margin-top: .6rem; }

/* ---- Figure 2: the unfinished-work ledger --------------------------------- */
.ctl { display: grid; gap: .4rem; max-width: 640px; margin: 0 0 .4rem; 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); }
.flow2 { cursor: default; }
.flow2 .pen-g { fill: var(--graphite); }
.flow2 .lab-life { fill: var(--slip-life); }
.flow2 .lab-once { fill: var(--slip-once); }
.flow2 .pencil { fill: none; stroke: var(--graphite); stroke-width: 1.6; stroke-dasharray: 2 6; stroke-linecap: round; }
.flow2 .hatline { stroke: var(--once); stroke-width: 1.2; opacity: .7; }
.flow2 .loop { fill: none; stroke: var(--graphite); stroke-width: 1.5; stroke-linecap: round; }
.flow2 .tk { stroke: var(--slip-ink); stroke-width: 1; opacity: .55; }
.flow2 .tk.major { opacity: .9; stroke-width: 1.3; }
.flow2 .rowlab { font-family: var(--sans); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; fill: var(--graphite); }
/* redraws after the slider moves appear at once, without replaying the load sequence */
.flow2 .still .ink path, .flow2 .still .fade, .flow2 .still .hatch { animation: none; }
.ledger { max-width: 460px; margin: .4rem 0 0; padding: .8rem 1.1rem .7rem; background: var(--noise), var(--slip); font-family: var(--mono); font-size: .76rem; transform: rotate(-.3deg); }
.ledger .lrow { display: grid; grid-template-columns: minmax(0, 1fr) 4.6rem 4.6rem 5.6rem; gap: .4rem; margin: 0; padding: .15rem 0; align-items: baseline; }
.lrow b { font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.lrow b.once { color: var(--slip-once); }
.lrow b.life { color: var(--slip-life); }
.lrow.hd { font-family: var(--sans); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; border-bottom: 1px dashed currentColor; padding-bottom: .35rem; margin-bottom: .2rem; }
.lrow.hd b { font-weight: 600; }
.lrow.tot { border-top: 1px dashed currentColor; margin-top: .25rem; padding-top: .35rem; }

@media (max-width: 640px) {
  .notes .pen { display: none; }
}

/* Phone mode: the trays shrink and the notes stack beneath them; the ledger chart is redrawn
   narrower and taller by the page script, its labels grow, and the ledger columns tighten. */
@media (max-width: 560px) {
  .trays { gap: 12px; }
  .bin { height: 160px; padding: 0 8px 10px; }
  .tl { font-size: .66rem; letter-spacing: .1em; }
  .tl small { font-size: .74rem; }
  .bin .acc { font-size: .58rem; letter-spacing: .1em; padding: .45em .5em; }
  .notes { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .notes .n1, .notes .n2 { grid-column: 1; }
  .sheet.flow2 { min-width: 0; user-select: none; }
  .sheet-scroll:has(.flow2) { overflow-x: clip; }
  .flow2 .svgnote { font-size: 17px; }
  .flow2 .svglab { font-size: 19px; }
  .flow2 .tick { font-size: 17px; }
  .flow2 .rowlab { font-size: 16px; }
  .ledger { padding: .7rem .8rem .6rem; font-size: .72rem; }
  .ledger .lrow { grid-template-columns: minmax(0, 1fr) 3.6rem 4rem 4.4rem; gap: .3rem; }
  .lrow.hd { font-size: .56rem; letter-spacing: .06em; }
}