/* =====================================================================
   Paper and Ink · essays/the-missing-row-still-has-a-cause.css
   "The Missing Row Still Has a Cause": 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 survey summary sheet beside a tray of returned forms and empty slots (Figure 1)
   and a missing-outcome ruler with a worksheet and one slider (Figure 2).
   Gold = observed records (the forms); blue = target population (everyone eligible). */

/* ---- 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 returned forms and the empty slots --------------------- */
/* two columns: the summary sheet, then the blue outline of everyone eligible with its 30 slots */
.rowfig { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.25fr); gap: 20px 28px; align-items: center; overflow-x: clip; overflow-clip-margin: 14px; padding-top: 6px; }
.survey {
  position: relative; padding: 1rem 1.1rem 1.1rem; font-family: var(--mono); font-size: .74rem; line-height: 1.5;
  background: var(--noise), var(--slip); border-top: 5px solid var(--slip-once); color: var(--slip-once);
  transform: rotate(-1deg); animation: fade .6s ease .1s both;
}
.ph { font-family: var(--sans); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--slip-ink); opacity: .75; margin: 0 0 .5rem; }
.pr { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; margin: 0; padding: .2rem 0; border-bottom: 1px solid color-mix(in srgb, currentColor 20%, transparent); }
.pr span { color: var(--slip-ink); min-width: 0; }
.pr b { font-weight: 500; text-align: right; }
.pr b.big { font-family: var(--serif); font-size: 2rem; line-height: 1; font-weight: 500; }
.pnote { margin: .7rem 0 0; color: var(--graphite); font-size: 1.05rem; }
.frame1 {
  padding: .8rem .9rem .75rem; border: 2px solid var(--slip-life); color: var(--slip-life);
  background: var(--noise), var(--sheet); box-shadow: 0 1px 1px var(--shadow), 0 10px 24px -12px var(--shadow-deep);
  transform: rotate(.5deg); animation: fade .6s ease .6s both; transition: border-color .3s ease;
}
.fh { display: flex; justify-content: space-between; gap: .6rem; margin: 0 0 .6rem; font-family: var(--sans); font-size: .64rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.fo { color: var(--slip-once); }
.slots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; }
.slots li { aspect-ratio: 3 / 4; position: relative; }
/* a returned form reporting success: gold, with a tick; a failure: gold outline with a cross */
.ok { background: color-mix(in srgb, var(--slip-once) 82%, transparent); }
.ok::after {
  content: ""; position: absolute; left: 34%; top: 22%; width: 26%; height: 40%;
  border: solid var(--slip); border-width: 0 2px 2px 0; transform: rotate(40deg);
}
.no {
  border: 1.5px solid var(--slip-once);
  background:
    linear-gradient(45deg, transparent 45%, var(--slip-once) 45% 55%, transparent 55%) center / 60% 45% no-repeat,
    linear-gradient(-45deg, transparent 45%, var(--slip-once) 45% 55%, transparent 55%) center / 60% 45% no-repeat,
    var(--once-soft);
}
/* an eligible customer with no form: an empty slot in blue */
.gap { border: 1.5px dashed var(--slip-life); animation: fade .5s ease 1.1s both; transition: opacity .3s ease; }
.slots li.ok, .slots li.no { animation: fade .5s ease .8s both; }
.key { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: .7rem 0 0; font-family: var(--sans); font-size: .72rem; color: var(--slip-ink); }
.key span { display: inline-flex; align-items: center; gap: .35rem; }
.k { display: inline-block; width: 10px; height: 13px; position: relative; }
.k.ok::after { border-width: 0 1.5px 1.5px 0; }
.ks { color: var(--graphite); }
/* the survey table's own view: only the forms, no outline and no empty slots */
.rowfig.only .frame1 { border-color: transparent; }
.rowfig.only .gap, .rowfig.only .fl, .rowfig.only .kg { opacity: 0; }

/* ---- Figure 2: the missing-outcome ruler ---------------------------------- */
.ctl { display: grid; gap: .4rem; max-width: 640px; margin: 0 0 1.2rem; 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); }
.ruler {
  position: relative; padding: 1.6rem 1.2rem 1.1rem; transform: rotate(.4deg); color: var(--slip-ink);
  background:
    var(--noise),
    linear-gradient(var(--grid-major) 1px, transparent 1px) 0 0 / 60px 60px,
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px) 0 0 / 60px 60px,
    linear-gradient(var(--grid-minor) 1px, transparent 1px) 0 0 / 12px 12px,
    linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px) 0 0 / 12px 12px,
    var(--sheet);
  box-shadow: 0 1px 1px var(--shadow), 0 10px 24px -12px var(--shadow-deep);
}
.ruler::before, .ruler::after { content: ""; position: absolute; top: -11px; width: 92px; height: 26px; background: var(--noise), var(--tape); }
.ruler::before { left: 22px; transform: rotate(-4deg); }
.ruler::after { right: 22px; transform: rotate(5deg); }
.wh { font-family: var(--sans); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 .7rem; opacity: .8; }
/* the scale runs 50% to 100%: a value v sits at (v − 50) × 2 percent of the width.
   Rows, top to bottom: the observed label, the axis with its ticks, the marker's label, the bracket. */
.scale { position: relative; height: 6.9rem; margin: 0 .6rem 1rem; font-family: var(--sans); font-size: .72rem; }
.ticks { list-style: none; margin: 0; padding: 0; position: absolute; left: 0; right: 0; top: 2.2rem; border-top: 1.5px solid currentColor; font-family: var(--mono); font-size: .7rem; color: var(--graphite); }
.ticks li { position: absolute; top: .3rem; transform: translateX(-50%); }
.ticks li::before { content: ""; position: absolute; left: 50%; top: calc(-.3rem - 6px); height: 10px; border-left: 1px solid var(--slip-ink); }
.ticks li:nth-child(1) { left: 0; }   .ticks li:nth-child(2) { left: 20%; }   .ticks li:nth-child(3) { left: 40%; }
.ticks li:nth-child(4) { left: 60%; } .ticks li:nth-child(5) { left: 80%; }   .ticks li:nth-child(6) { left: 100%; }
/* the gold mark: the observed rate, fixed at 90%, labelled above the axis */
.obs { position: absolute; left: 80%; top: .1rem; height: 2.1rem; border-left: 2px solid var(--slip-once); color: var(--slip-once); }
.obs b { position: absolute; right: .4rem; top: 0; font-weight: 600; white-space: nowrap; }
/* the blue marker: the rate among all 1,500 for the chosen missing outcome, labelled below the ticks */
.all { position: absolute; top: calc(2.2rem - 5px); width: 0; height: 12px; color: var(--slip-life); transition: left .25s ease; }
.all::before { content: ""; position: absolute; left: -6px; top: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--slip-life); box-shadow: 0 0 0 2px var(--sheet); }
.all b { position: absolute; top: 2.05rem; left: -.2rem; font-weight: 600; white-space: nowrap; }
.all.a7 b, .all.a8 b, .all.a9 b, .all.a10 b { left: auto; right: -.2rem; }
/* the blue bracket: every overall rate the returned forms allow, 60% to about 93.3% */
.range { position: absolute; left: 20%; width: 66.667%; top: 4.9rem; height: .5rem; border: 1.5px solid var(--slip-life); border-top: 0; color: var(--slip-life); animation: fade .5s ease .4s both; }
.range b { position: absolute; left: 0; top: .6rem; font-weight: 600; white-space: nowrap; }
.a0 { left: 20%; }      .a1 { left: 26.667%; }  .a2 { left: 33.333%; }  .a3 { left: 40%; }
.a4 { left: 46.667%; }  .a5 { left: 53.333%; }  .a6 { left: 60%; }      .a7 { left: 66.667%; }
.a8 { left: 73.333%; }  .a9 { left: 80%; }      .a10 { left: 86.667%; }
.wrow { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.4fr) 6rem; gap: .3rem 1rem; align-items: center; padding: .5rem 0; border-bottom: 1px solid color-mix(in srgb, var(--slip-ink) 15%, transparent); }
.wrow p { margin: 0; min-width: 0; }
.wl { font-family: var(--sans); font-size: .8rem; font-weight: 600; line-height: 1.3; }
.wf { font-family: var(--mono); font-size: .74rem; }
.wv { font-family: var(--mono); font-size: .9rem; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.wrow.once { color: var(--slip-once); }
.wrow.life { color: var(--slip-life); }
.wrow.tot .wv { font-size: 1rem; }
.wrow.gapr { color: var(--slip-ink); border-bottom: 0; }
.wn { margin: 1rem 0 0; color: var(--slip-ink); }
.wn b { color: var(--slip-life); }

@media (max-width: 760px) {
  .wrow { grid-template-columns: minmax(0, 1fr) 6rem; }
  .wf { grid-column: 1; grid-row: 2; }
}

/* Phone mode: the sheet and the tray stack; the slots keep ten to a row, smaller;
   the worksheet rows become label and value with the formula beneath. */
@media (max-width: 560px) {
  .rowfig { grid-template-columns: minmax(0, 1fr); }
  .ph, .wh, .fh { font-size: .7rem; }
  .fh { letter-spacing: .06em; }
  .slots { gap: 4px; }
  .ruler { padding: 1.4rem .9rem 1rem; }
  .scale { margin-inline: .9rem; }
  .wrow { grid-template-columns: minmax(0, 1fr) 5.4rem; }
  .wl { font-size: .78rem; }
  .wf { font-size: .72rem; }
  .wv { font-size: .84rem; }
  .wrow.tot .wv { font-size: .92rem; }
}