/* =====================================================================
   Paper and Ink · essays/a-pilot-needs-a-way-to-be-wrong.css
   "A Pilot Needs a Way to Be Wrong": 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:
   both sides of a pilot scorecard laid side by side (Figure 1), and a decision ledger
   on graph paper where one prewritten rule sorts results into stop, revise and expand
   (Figure 2). Gold = demonstrated feasibility; blue = decision-changing evidence. */

/* ---- 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-sided scorecard ----------------------------------- */
/* clip sideways overflow so a stamp's starting scale can never widen the page on a phone */
.cardfig { overflow-x: clip; overflow-clip-margin: 14px; padding: 6px 4px 0; }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; align-items: start; }
.card {
  position: relative; box-sizing: border-box; padding: 22px 22px 26px; min-height: 330px;
  background: var(--noise), var(--slip); font-family: var(--mono); font-size: .8rem; line-height: 1.7;
}
.card.front { transform: rotate(-1.2deg); }
.card.back { transform: rotate(.8deg); }
/* index-card ruling: faint grid-blue lines below the header */
.card::before {
  content: ""; position: absolute; inset: 70px 0 0; pointer-events: none;
  background: linear-gradient(var(--grid-major) 1px, transparent 1px) 0 0 / 100% 27px; opacity: .55;
}
.card > * { position: relative; }
.ch { margin: 0; text-align: center; letter-spacing: .18em; text-transform: uppercase; font-weight: 500; }
.cs { margin: 0; text-align: center; font-size: .7rem; letter-spacing: .1em; opacity: .7; }
.cr { border-top: 1px dashed currentColor; opacity: .45; margin: 8px 0 12px; }
.card .ln { display: flex; gap: 6px; margin: 0; }
.card .ln span { flex: none; }
.card .ln i { flex: 1; min-width: 12px; border-bottom: 1px dotted currentColor; opacity: .4; transform: translateY(-.45em); }
.card .ln.once { color: var(--slip-once); }
.cq { margin: 14px 0 0; color: var(--slip-ink); }
.stamp.st1 { color: var(--slip-once); display: table; margin: 18px auto 0; transform: rotate(-7deg); font-size: 1rem; animation-delay: .7s; }
.fields { margin: 0; display: grid; gap: 6px; color: var(--slip-life); }
.fields > div { display: grid; grid-template-columns: 7.6rem minmax(0, 1fr); gap: 8px; align-items: baseline; animation: fade .5s ease both; }
.fields > div:nth-child(1) { animation-delay: 1.2s; }
.fields > div:nth-child(2) { animation-delay: 1.45s; }
.fields > div:nth-child(3) { animation-delay: 1.7s; }
.fields > div:nth-child(4) { animation-delay: 1.95s; }
.fields > div:nth-child(5) { animation-delay: 2.2s; }
.fields dt { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }
.fields dd { margin: 0; font-size: 1.02rem; line-height: 1.35; color: var(--slip-life); }
.stamp.st2 { color: var(--slip-life); display: table; margin: 16px 0 0 auto; transform: rotate(4deg); animation-delay: 2.9s; }
.notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; margin-top: 1.1rem; }
.notes .mnote p { color: var(--ink); }
.notes .n1 { animation: fade .7s ease 1.2s both; }
.notes .n2 { animation: fade .7s ease 3.3s both; }
.notes .n1 .pen path { animation-delay: 1.2s; }
.notes .n2 .pen path { animation-delay: 3.3s; }
.notes b.g { color: var(--once); }
.notes b.b { color: var(--life); }

/* ---- Figure 2: the decision ledger -------------------------------------- */
.rule2 { cursor: crosshair; }
.rule2 .rl { stroke: var(--slip-life); }
.rule2 .reg { fill: var(--slip-life); }
.rule2 .pen-g { fill: var(--graphite); }
.rule2 .lab-once { fill: var(--slip-once); }
.rule2 .pencil { fill: none; stroke: var(--graphite); stroke-width: 1.6; stroke-dasharray: 2 6; stroke-linecap: round; }
.rule2 .loop { fill: none; stroke: var(--graphite); stroke-width: 1.5; stroke-linecap: round; }
.rule2 .pdot { fill: var(--slip-ink); }
.rule2 .plab { font-family: var(--mono); font-size: 13px; font-weight: 500; fill: var(--slip-ink); }
.rule2 .tk { stroke: var(--slip-ink); stroke-width: 1; opacity: .55; }
.rule2 .tk.major { opacity: .9; stroke-width: 1.3; }
.rule2 .rowlab { font-family: var(--sans); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; fill: var(--graphite); }
.rule2 .cursor { stroke: var(--graphite); stroke-width: 1.2; stroke-dasharray: 5 5; opacity: .7; }
.rule2 .rdot { fill: var(--slip); stroke: var(--slip-life); stroke-width: 2.4; }
.rule2 .tagbox { fill: var(--slip); stroke: var(--slip-ink); stroke-width: 1; }
.rule2 .tag-ink { fill: var(--slip-ink); }
.rule2 .tag-life { fill: var(--slip-life); font-weight: 500; }
/* redraws after the breakpoint changes appear at once, without replaying the load sequence */
.rule2 .still .ink path, .rule2 .still .fade { animation: none; }
.ledger { max-width: 500px; 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.4rem 4.2rem 4.2rem 5.2rem; 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); text-transform: uppercase; letter-spacing: .06em; }
.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 two sides of the card stack, front first, with each note under its card;
   the ledger chart is redrawn narrower and taller by the page script, its labels grow,
   and the ledger columns tighten. */
@media (max-width: 560px) {
  .cards { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .card { min-height: 0; padding: 20px 18px 22px; }
  .fields > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .notes { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .sheet.rule2 { min-width: 0; user-select: none; }
  .sheet-scroll:has(.rule2) { overflow-x: clip; }
  .rule2 .svgnote { font-size: 17px; }
  .rule2 .svglab { font-size: 20px; }
  .rule2 .tick { font-size: 15px; }
  .rule2 .plab { font-size: 16px; }
  .rule2 .tagtext { font-size: 13px; }
  .rule2 .rowlab { font-size: 14px; }
  .ledger { padding: .7rem .7rem .6rem; font-size: .7rem; }
  .ledger .lrow { grid-template-columns: minmax(0, 1fr) 3.6rem 3.2rem 2.8rem 4.4rem; gap: .25rem; }
  .lrow.hd { font-size: .54rem; letter-spacing: .04em; }
}