/* =====================================================================
   Paper and Ink · essays/a-probability-is-not-a-price.css
   "A Probability Is Not a Price": 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:
   two delivery slips with the same stamp and an assumptions card (Figure 1), and a
   decision ruler on graph paper with a loss slider and a draggable cursor (Figure 2).
   Gold = predicted probability; blue = economic consequence. */

/* ---- 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 ----------------------------------------------------- */
.pick { 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); }
.pick legend { padding: 0; margin-bottom: .35rem; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pick label { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; }
.pick input { accent-color: var(--ink); margin: 0; }
.pick input:focus-visible { outline: 2px solid var(--life); outline-offset: 3px; }

/* ---- Figure 1: two delivery slips ----------------------------------------- */
/* clip sideways overflow so a stamp's starting scale can never widen the page on a phone */
.dsfig { overflow-x: clip; overflow-clip-margin: 14px; padding: 4px 4px 0; }
.dslips { display: grid; grid-template-columns: repeat(2, minmax(0, 300px)); gap: 48px; justify-content: center; padding: 8px 0 4px; }
.dslip {
  position: relative; cursor: pointer; background: var(--noise), var(--slip); background-size: 180px, auto;
  font-family: var(--mono); font-size: .8rem; line-height: 1.75; padding: 22px 22px 30px;
  transition: transform .3s ease, opacity .3s ease;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%;
}
.dslip.sa { transform: rotate(-1.4deg); }
.dslip.sb { transform: rotate(1deg); }
.dslip:not(.on) { opacity: 1; }
.dslip.on.sa { transform: rotate(-.6deg) translateY(-6px); }
.dslip.on.sb { transform: rotate(.4deg) translateY(-6px); }
.dslip p { margin: 0; }
.dslip .hd { text-align: center; letter-spacing: .18em; font-weight: 500; }
.dslip .sub { text-align: center; font-size: .7rem; letter-spacing: .1em; opacity: .85; }
.dslip .rule { border-top: 1px dashed currentColor; opacity: .45; margin: 8px 0; }
.dslip .ln { display: flex; gap: 6px; }
.dslip .ln span { flex: none; }
.dslip .ln i { flex: 1; min-width: 12px; border-bottom: 1px dotted currentColor; opacity: .4; transform: translateY(-.45em); }
.dslip .ink-life { color: var(--slip-life); }
.dslip .ln.ink-life { font-weight: 500; font-size: .9rem; }
.dslip .why { font-size: .72rem; letter-spacing: .04em; }
.dslip .stamp.s1 { color: var(--slip-once); display: table; margin: 14px auto 10px; transform: rotate(-7deg); animation-delay: .7s; }
.dslip.sb .stamp.s1 { transform: rotate(-5deg); animation-delay: 1s; }

.dsfig .notes { display: grid; grid-template-columns: repeat(2, minmax(0, 300px)); gap: 48px; justify-content: center; margin-top: 1rem; }
.dsfig .notes .mnote p { color: var(--ink); }
.dsfig .notes .n1 { animation: fade .7s ease 1.4s both; }
.dsfig .notes .n2 { animation: fade .7s ease 2.2s both; }
.dsfig .notes .n1 .pen path { animation-delay: 1.4s; }
.dsfig .notes .n2 .pen path { animation-delay: 2.2s; }
.dsfig .notes b.g { color: var(--once); }
.dsfig .notes b.b { color: var(--life); }

/* the assumptions card: an index card under the slips */
.card { max-width: 560px; margin: 1.4rem auto 0; padding: .9rem 1.2rem .8rem; background: var(--noise), var(--slip); font-family: var(--mono); font-size: .76rem; transform: rotate(-.3deg); }
.card p { margin: 0; }
.card .chd { font-family: var(--sans); font-size: .64rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; border-bottom: 1px dashed currentColor; padding-bottom: .35rem; margin-bottom: .3rem; }
.card .crow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .8rem; padding: .14rem 0; align-items: baseline; }
.crow b { font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.crow b.once { color: var(--slip-once); }
.crow b.life { color: var(--slip-life); }
.crow.tot { border-top: 1px dashed currentColor; margin-top: .3rem; padding-top: .4rem; }
.card .cnote { margin-top: .5rem; font-size: 1.05rem; color: var(--slip-ink); }

/* ---- Figure 2: the decision ruler ------------------------------------------ */
.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); }
.ctl .mode { margin: .3rem 0 .1rem; }
.rule2 .pen-g { fill: var(--graphite); }
.rule2 .lab-life { fill: var(--slip-life); }
.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 .hatline { stroke: var(--once); stroke-width: 1.2; opacity: .7; }
.rule2 .loop { fill: none; stroke: var(--graphite); stroke-width: 1.5; stroke-linecap: round; }
.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 .curline { stroke: var(--graphite); stroke-width: 1.2; stroke-dasharray: 3 4; }
.rule2 .dot-life { fill: var(--slip-life); }
.rule2 .dot-pen { fill: var(--graphite); }
.rule2 .tagbox { fill: var(--slip); stroke: var(--slip-ink); stroke-width: 1; }
.rule2 .t-once { fill: var(--slip-once); }
.rule2 .t-life { fill: var(--slip-life); }
.rule2 .t-ink { fill: var(--slip-ink); }
/* redraws after a control moves appear at once, without replaying the load sequence */
.rule2 .still .ink path, .rule2 .still .fade, .rule2 .still .hatch { animation: none; }

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

/* Phone mode: the slips stack with their notes beneath; the ruler is redrawn narrower and
   taller by the page script, and its labels grow so every one renders at 11px or more. */
@media (max-width: 560px) {
  .dslips { grid-template-columns: minmax(0, 300px); gap: 22px; }
  .dsfig .notes { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .card { padding: .8rem .85rem .7rem; font-size: .72rem; }
  .card .crow { gap: .5rem; }
  .sheet.rule2 { min-width: 0; user-select: none; }
  .sheet-scroll:has(.rule2) { overflow-x: clip; }
  .rule2 .svgnote { font-size: 17px; }
  .rule2 .svglab { font-size: 19px; }
  .rule2 .tick { font-size: 15px; }
  .rule2 .tagtext { font-size: 14px; }
  .rule2 .rowlab { font-size: 14px; }
}