/* =====================================================================
   Paper and Ink · essays/the-pilot-won-the-wrong-buyer.css
   "The Pilot Won the Wrong Buyer": 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 pilot-review receipt whose owner's questions keep printing (Figure 1) and a taped sheet of
   graph paper with a two-market adoption model and a switch for peer references (Figure 2).
   Gold = the sponsor's yes; blue = the owner's yes. */

/* ---- 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 pilot review receipt ----------------------------------- */
/* clip sideways overflow so a rotated stamp or sheet can never widen the page on a phone */
#fig-receipt, #fig-saddle { overflow-x: clip; overflow-clip-margin: 14px; }
@media (min-width: 641px) { #fig-receipt .margin-notes { gap: 150px; padding-top: 150px; } }

/* ---- Figure 2: the saddle on graph paper ----------------------------------- */
#sheet2 { -webkit-user-select: none; user-select: none; }
.schart text { fill: var(--slip-ink); }
.schart .pencil { fill: none; stroke: var(--graphite); stroke-width: 1.6; stroke-dasharray: 2 6; stroke-linecap: round; }
.schart .pen { fill: none; stroke: var(--slip-ink); stroke-width: 1.3; stroke-linecap: round; opacity: .8; }
.schart .tk { stroke: var(--slip-ink); stroke-width: 1; opacity: .55; }
.schart .tk.major { opacity: .9; stroke-width: 1.3; }
.schart .rowlab { font-family: var(--sans); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; fill: var(--graphite); }
.schart .cursor { stroke: var(--slip-ink); stroke-width: 1.2; stroke-dasharray: 3 4; opacity: .7; }
.schart .tagbox { fill: var(--slip); stroke: var(--slip-ink); stroke-width: 1; }
.schart .tagtext { white-space: pre; }
.schart .dot-once { fill: var(--slip-once); }
.schart .dot-life { fill: var(--slip-life); }
.schart .dot-tot { fill: var(--graphite); }
/* the switch: two pencil-ringed words under the sheet */
.refs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 14px 0 0; }
.refs .rlab { font-family: var(--sans); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.refs .btn { padding: 2px 8px; border: 1.4px solid transparent; }
.refs .btn[aria-pressed="true"] { color: var(--ink); border-color: var(--graphite); font-weight: 600; text-decoration: none; }

/* Phone mode: Figure 2 is redrawn by the page script as a narrower, taller sheet (viewBox 400 x 420), so it fits
   the column with no sideways scroll; SVG text is raised so labels render at 11px or more. */
@media (max-width: 560px) {
  .sheet-scroll { overflow-x: clip; }
  .sheet { min-width: 0; padding: 24px 8px 10px; }
  .schart .svgnote { font-size: 15.5px; }
  .schart .svglab { font-size: 18px; }
  .schart .tick { font-size: 14px; }
  .schart .rowlab { font-size: 14.5px; }
  .schart .tagtext { font-size: 14.5px; }
  .refs .rlab { flex-basis: 100%; }
}