/* =====================================================================
   Paper and Ink · essays/the-forecast-is-not-an-order.css
   "The Forecast Is Not an Order": 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:
   an industry outlook beside an unsigned purchase order, each with its margin question (Figure 1),
   and a capacity worksheet on graph paper comparing full and staged expansion (Figure 2).
   Gold = projected demand; blue = contracted customer commitment. */

/* ---- 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: two pieces of paper -------------------------------------- */
/* clip sideways overflow so a stamp's starting scale can never widen the page on a phone */
.twofig { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 40px; align-items: start; overflow-x: clip; overflow-clip-margin: 14px; padding: 8px 4px 4px; }
.col { display: grid; gap: 22px; }
.fc, .of { position: relative; font-family: var(--mono); font-size: .72rem; line-height: 1.6; padding: 1rem 1.15rem 1.2rem; }
.fc { background: var(--noise), var(--slip); color: var(--slip-once); transform: rotate(-1.2deg); animation: fade .6s ease .1s both; }
.of { background: var(--noise), var(--sheet); color: var(--slip-life); transform: rotate(.9deg); border-top: 6px solid var(--graphite); animation: fade .6s ease .3s both; }
.dh { font-family: var(--sans); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 .6rem; color: var(--slip-ink); opacity: .75; }
.dl { display: flex; align-items: baseline; gap: 6px; }
.dl span { flex: none; opacity: .8; }
.dl i { flex: 1; min-width: 10px; border-bottom: 1px dotted currentColor; opacity: .4; transform: translateY(-.45em); }
.dl b { flex: 0 1 auto; font-weight: 500; text-align: right; }
/* the outlook's fan of cases, inked in gold */
.fan { display: block; width: 100%; height: auto; margin: 0 0 .5rem; overflow: visible; }
.fan path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-dasharray: 400; animation: draw13 1.6s ease .5s both; }
.fan .ax { stroke: var(--graphite); stroke-width: 1; opacity: .6; animation: none; }
.fan .mid { stroke-width: 2.4; }
.fan .lo, .fan .hi { stroke-width: 1.3; stroke-dasharray: 3 5; animation: fade .8s ease 1.6s both; }
.fan .yr { font-family: var(--mono); font-size: 9px; fill: var(--graphite); text-anchor: middle; }
@keyframes draw13 { from { stroke-dashoffset: 400; } }
.fc .stamp.s1 { display: table; margin: .9rem 0 0 auto; color: var(--slip-once); transform: rotate(-6deg); animation-delay: .7s; }
.sig { display: flex; align-items: flex-end; gap: .6rem; margin-top: .9rem; padding-top: .5rem; border-top: 1.5px solid currentColor; }
.sig span:first-child { flex: none; }
.sig .blank { flex: 1; min-width: 3rem; height: 1.6em; border-bottom: 1px solid currentColor; opacity: .6; }
.of .stamp.s2 { display: table; margin: .9rem .2rem 0 auto; color: var(--slip-life); transform: rotate(5deg); animation-delay: 2.4s; }
.col .mnote { padding-left: .4rem; }
.col .mnote p { color: var(--ink); }
.col .n1 { animation: fade .7s ease 1.1s both; }
.col .n2 { animation: fade .7s ease 2.8s both; }
.col .n1 .pen path { animation-delay: 1.1s; }
.col .n2 .pen path { animation-delay: 2.8s; }
.col .n1 b { color: var(--once); }
.col .n2 b { color: var(--life); }

/* ---- Figure 2: the capacity worksheet -------------------------------------- */
.ctl { display: grid; gap: .4rem; max-width: 640px; margin: 0 0 .4rem; font-family: var(--sans); font-size: .86rem; color: var(--ink); }
.scen { border: 0; margin: 0 0 .3rem; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; }
.scen legend { padding: 0; margin-bottom: .35rem; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.scen label { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; }
.scen input { accent-color: var(--graphite); margin: 0; }
.ctl .firm { 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; }
.cap2 { cursor: default; }
.cap2 .rowname { fill: var(--slip-ink); }
.cap2 .pen-g { fill: var(--graphite); }
.cap2 .sm { font-size: 13px; }
.cap2 .lab-life { fill: var(--slip-life); }
.cap2 .lab-once { fill: var(--slip-once); }
.cap2 .pencil { fill: none; stroke: var(--graphite); stroke-width: 1.6; stroke-dasharray: 2 6; stroke-linecap: round; }
.cap2 .pencil.faint { opacity: .7; }
.cap2 .dots { fill: none; stroke: var(--graphite); stroke-width: 2.2; stroke-dasharray: 1 5; stroke-linecap: round; }
.cap2 .endtick { stroke: var(--slip-ink); stroke-width: 1.4; opacity: .7; }
.cap2 .hatline { stroke: var(--graphite); stroke-width: 1.2; opacity: .55; }
.cap2 .tk { stroke: var(--slip-ink); stroke-width: 1; opacity: .55; }
.cap2 .tk.major { opacity: .9; stroke-width: 1.3; }
.cap2 .rowlab { font-family: var(--sans); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; fill: var(--graphite); }
/* redraws after a control changes appear at once, without replaying the load sequence */
.cap2 .still .ink path, .cap2 .still .fade, .cap2 .still .hatch { animation: none; }
.ledger { max-width: 520px; margin: .4rem 0 0; padding: .8rem 1.1rem .7rem; background: var(--noise), var(--slip); font-family: var(--mono); font-size: .76rem; transform: rotate(-.3deg); }
.lrow { display: grid; grid-template-columns: minmax(0, 1fr) 4.5rem 4.5rem 6.5rem; gap: .4rem; margin: 0; padding: .2rem 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.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; }

@media (max-width: 640px) {
  .twofig { grid-template-columns: minmax(0, 1fr); }
  .col .pen { display: none; }
}

/* Phone mode: the two sheets stack with their questions beneath; the worksheet is redrawn
   tall and narrow by the page script, its labels grow, and the ledger columns tighten. */
@media (max-width: 560px) {
  .fc, .of { padding: .9rem .9rem 1.1rem; font-size: .68rem; }
  .dl { flex-wrap: wrap; column-gap: .8rem; }
  .dl i { display: none; }
  .dl b { margin-left: auto; }
  .sheet.cap2 { min-width: 0; user-select: none; }
  .sheet-scroll:has(.cap2) { overflow-x: clip; }
  .cap2 .svgnote { font-size: 16px; }
  .cap2 .sm { font-size: 14px; }
  .cap2 .svglab { font-size: 19px; }
  .cap2 .tick { font-size: 13px; }
  .cap2 .rowlab { font-size: 12px; }
  .ledger { padding: .7rem .8rem .6rem; font-size: .7rem; }
  .lrow { grid-template-columns: minmax(0, 1fr) 2.6rem 3.6rem 4.6rem; gap: .3rem; }
  .lrow.hd { font-size: .56rem; letter-spacing: .06em; }
}