/* =====================================================================
   Paper and Ink · essays/a-thousand-simulations-are-not-a-thousand-customers.css
   "A Thousand Simulations Are Not a Thousand Customers": 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 kraft research envelope with sheets and provenance tags (Figure 1)
   and an illustrative model of repeated synthetic runs on taped graph paper (Figure 2).
   Gold = simulated responses; blue = observed human responses. Colors mark origin, not truth. */

/* ---- 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 research envelope ----------------------------------- */
.envfig { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 28px 44px; align-items: start; overflow-x: clip; overflow-clip-margin: 14px; padding-top: 6px; }
.env-wrap { position: relative; padding-top: 46px; }
/* sheets sticking out of the open envelope: three gold, one blue */
.sheets { position: absolute; top: 0; left: 0; right: 0; height: 90px; }
.sh { position: absolute; bottom: 0; height: 84px; width: 62%; background: var(--noise), var(--sheet); border-top: 5px solid currentColor; box-shadow: 0 1px 2px var(--shadow); animation: fade .5s ease both; }
.sh.g1 { left: 10%; color: var(--slip-once); transform: rotate(-4deg); animation-delay: .3s; }
.sh.g2 { left: 14%; color: var(--slip-once); transform: rotate(-1.5deg); animation-delay: .45s; }
.sh.g3 { left: 18%; color: var(--slip-once); transform: rotate(1deg); animation-delay: .6s; }
.sh.b1 { left: 34%; width: 52%; height: 70px; color: var(--slip-life); transform: rotate(3.5deg); animation-delay: 1.1s; }
.env {
  position: relative; z-index: 1; height: 220px;
  /* the tape ink is translucent, so lay it over solid paper to hide the sheets behind the envelope */
  background: var(--noise), linear-gradient(var(--tape), var(--tape)), var(--sheet); padding: 64px 1.4rem 1.2rem;
  transform: rotate(-.6deg); color: var(--slip-ink);
}
/* the opened flap, folded back behind the sheets as a darker band along the top edge */
.env::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 26px; background: var(--noise), color-mix(in srgb, var(--tape) 82%, var(--graphite)); clip-path: polygon(0 0, 100% 0, 92% 100%, 8% 100%); }
.el { font-family: var(--sans); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 .2rem; opacity: .75; }
.en { font-family: var(--sans); font-weight: 600; font-size: 1.7rem; letter-spacing: -.01em; margin: 0; }
/* the old label is struck through in pencil, drawn left to right */
.en s { text-decoration: none; background: linear-gradient(var(--graphite), var(--graphite)) no-repeat 0 55% / 100% 2px; animation: strike .6s ease 2.6s both; }
@keyframes strike { from { background-size: 0% 2px; } }
.fix { margin: .3rem 0 0; color: var(--slip-life); font-size: 1.15rem; animation: fade .6s ease 3s both; }
.tags { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.tags .tag { background: var(--noise), var(--slip); padding: .6rem .7rem .7rem; font-family: var(--mono); font-size: .68rem; line-height: 1.5; border-left: 3px solid currentColor; box-shadow: 0 1px 1px var(--shadow), 0 6px 14px -10px var(--shadow-deep); animation: fade .5s ease both; }
.tags .tag p { margin: 0; }
.tags .tag .th { font-family: var(--sans); font-weight: 600; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: .2rem; }
.tags .tag.once { color: var(--slip-once); transform: rotate(-1.2deg); animation-delay: 1.6s; }
.tags .tag.life { color: var(--slip-life); transform: rotate(1deg); animation-delay: 2.1s; }
.enotes { display: grid; gap: 150px; padding-top: 70px; }
.enotes .mnote p { color: var(--ink); }
.enotes .n1 { animation: fade .7s ease 1s both; }
.enotes .n2 { animation: fade .7s ease 2.2s both; }
.enotes .n1 .pen path { animation-delay: 1s; }
.enotes .n2 .pen path { animation-delay: 2.2s; }
.enotes .n1 b { color: var(--once); }
.enotes .n2 b { color: var(--life); }

/* ---- Figure 2: precision around the wrong answer ------------------------- */
.chart2 { cursor: auto; touch-action: auto; padding: 30px 20px 20px; color: var(--slip-ink); }
.pick { border: 0; margin: 0 0 .6rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.pick label { font-family: var(--sans); font-size: .85rem; color: var(--graphite); cursor: pointer; padding: .2rem 0; border-bottom: 2px solid transparent; }
.pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pick label:has(input:checked) { color: var(--slip-ink); border-bottom-color: var(--slip-ink); }
.pick label:has(input:focus-visible) { outline: 2px solid var(--life); outline-offset: 3px; }
.pchart text { fill: var(--slip-ink); }
.pchart .run { fill: var(--slip-once); opacity: .85; }
.pchart .center { stroke: var(--slip-once); stroke-width: 1.4; stroke-dasharray: 3 6; stroke-linecap: round; opacity: .8; }
.pchart .cursor { stroke: var(--graphite); stroke-width: 1.2; stroke-dasharray: 5 5; opacity: .6; }
.pchart .tk { stroke: var(--slip-ink); stroke-width: 1; opacity: .55; }
.pchart .tk.major { opacity: .9; stroke-width: 1.3; }
.pchart .rowlab { font-family: var(--sans); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; fill: var(--graphite); }

@media (max-width: 640px) {
  .envfig { grid-template-columns: minmax(0, 1fr); }
  .enotes { gap: .9rem; padding-top: 0; }
  .enotes .pen { display: none; }
}

/* Phone mode: the envelope, tags and notes stack; the chart is redrawn on a 400-wide, taller sheet by the
   page script with shorter labels, and its text is enlarged to stay readable. */
@media (max-width: 560px) {
  .env { height: 200px; padding: 58px 1rem 1rem; }
  .en { font-size: 1.45rem; }
  .fix { font-size: 1.05rem; }
  .tags .tag { font-size: .64rem; }
  .sheet { min-width: 0; }
  .sheet-scroll { overflow-x: clip; }
  .chart2 { padding: 28px 12px 14px; }
  .pick { display: grid; grid-template-columns: 1fr; gap: .1rem; }
  .pchart .svglab { font-size: 18px; }
  .pchart .svgnote { font-size: 17px; }
  .pchart .tick { font-size: 15px; }
  .pchart .rowlab { font-size: 14px; }
}