/* =====================================================================
   Paper and Ink · essays/two-records-one-person.css
   "Two Records. One Person?": 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:
   three index cards with blue pencil loops and a grouping switch (Figure 1), and a
   score ruler on graph paper with a matching ledger and a threshold slider (Figure 2).
   Gold = record identity (row keys); blue = real-world entity identity (people). */

/* ---- 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 card file --------------------------------------------- */
.cardfig { overflow-x: clip; overflow-clip-margin: 14px; padding: 4px 4px 0; }
.view { 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); }
.view legend { padding: 0; margin-bottom: .35rem; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.view label { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; }
.view input { accent-color: var(--life); margin: 0; }
.view input:focus-visible { outline: 2px solid var(--life); outline-offset: 3px; }
.cardwrap { position: relative; padding: 16px 14px 40px; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; align-items: start; }
/* an index card: ruled lines on card stock, one heavier rule under the heading */
.icard {
  position: relative; margin: 0; padding: 12px 14px 12px;
  font-family: var(--mono); font-size: .74rem; line-height: 22px;
  background:
    var(--noise),
    linear-gradient(transparent 55px, color-mix(in srgb, var(--graphite) 55%, transparent) 55px 56px, transparent 56px) 0 0 / 100% 100% no-repeat,
    repeating-linear-gradient(transparent 0 21px, var(--grid-major) 21px 22px) 0 12px / 100% 100% no-repeat,
    var(--sheet);
}
#k0 { transform: rotate(-1deg); }
#k1 { transform: rotate(.6deg); }
#k2 { transform: rotate(-.4deg); }
.icard p { margin: 0; overflow-wrap: anywhere; }
.icard .key { color: var(--slip-once); font-weight: 600; letter-spacing: .08em; }
.icard .nm { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--slip-ink); margin-bottom: 0; }
.icard .src { color: var(--graphite); font-size: .68rem; }
.icard .blank { color: var(--graphite); font-style: italic; }
/* evidence marks, drawn in pencil under a field: agreement in blue, a clash as a graphite wave */
.icard .f { width: fit-content; max-width: 100%; text-decoration: underline 1.5px transparent; text-underline-offset: 3px; transition: text-decoration-color .3s; }
.icard .agree { text-decoration-color: var(--slip-life); }
.icard .clash { text-decoration: underline wavy 1.2px var(--graphite); }
.icard .weak { text-decoration: underline dotted 1.5px var(--graphite); }
.loops { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.loops .loop { fill: none; stroke: var(--life); stroke-width: 1.8; stroke-linecap: round; }
.loops .prov .loop { stroke-dasharray: 7 7; animation: fade .7s ease both; }
.loops .looplab { fill: var(--life); }
.loops .qm { fill: var(--life); font-size: 26px; }
.loops.still .ink path, .loops.still .fade { animation: none; }
.tally { display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; align-items: center; margin: .2rem 0 0; }
.tally .stamp { mix-blend-mode: normal; }
.tally .rows { color: var(--once); transform: rotate(-4deg); animation-delay: .2s; }
.tally .ppl { color: var(--life); transform: rotate(3deg); animation-delay: 1.3s; }
.cardfig .narr { margin-top: .8rem; }

/* ---- Figure 2: the matching ledger --------------------------------------- */
.ctl { display: grid; gap: .45rem; 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 .rev { display: inline-flex; align-items: flex-start; gap: .45rem; cursor: pointer; color: var(--ink); }
.ctl .rev input { accent-color: var(--life); margin: .2em 0 0; flex: none; }
.ctl input:focus-visible { outline: 2px solid var(--life); outline-offset: 3px; }
.match2 { cursor: default; }
.match2 .pen-g { fill: var(--graphite); }
.match2 .lab-life { fill: var(--slip-life); }
.match2 .pencil { fill: none; stroke: var(--graphite); stroke-width: 1.6; stroke-dasharray: 2 6; stroke-linecap: round; }
.match2 .hatline { stroke: var(--graphite); stroke-width: 1.1; opacity: .6; }
.match2 .loop { fill: none; stroke: var(--graphite); stroke-width: 1.4; stroke-linecap: round; }
.match2 .mk-life { stroke: var(--slip-life); stroke-width: 2.4; fill: none; }
.match2 .mk-g { stroke: var(--graphite); stroke-width: 2.2; fill: none; }
.match2 .tag { fill: var(--slip); stroke: var(--slip-ink); stroke-width: 1; }
.match2 .tagtext { fill: var(--slip-ink); }
.match2 .idl { font-weight: 600; }
.match2 .tk { stroke: var(--slip-ink); stroke-width: 1; opacity: .55; }
.match2 .tk.major { opacity: .9; stroke-width: 1.3; }
.match2 .rowlab { font-family: var(--sans); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; fill: var(--graphite); }
/* redraws after the controls move appear at once, without replaying the load sequence */
.match2 .still .ink path, .match2 .still .fade, .match2 .still .hatch { animation: none; }
.ledger { margin: .4rem 0 0; padding: .8rem 1.1rem .7rem; background: var(--noise), var(--slip); font-family: var(--mono); font-size: .74rem; line-height: 1.45; transform: rotate(-.2deg); }
.ledger .lrow { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.6fr) 3rem minmax(0, 1.25fr); gap: .3rem .9rem; margin: 0; padding: .45rem 0; align-items: baseline; border-bottom: 1px dotted color-mix(in srgb, var(--slip-ink) 35%, transparent); }
.lrow .pr { grid-column: 1; grid-row: 1; }
.lrow .sc { grid-column: 3; grid-row: 1; }
.lrow .pr i { font-style: normal; font-weight: 600; margin-right: .5em; }
.lrow small { display: block; font-size: .64rem; color: var(--graphite); }
.lrow .ev span { display: block; }
.lrow .ev .ag { color: var(--graphite); }
.lrow .sc { font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.lrow .dc b { font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: .68rem; }
.lrow .dc.merge b { color: var(--slip-life); }
.lrow .dc em { font-family: var(--serif); font-size: .95rem; margin-left: .5em; color: var(--slip-ink); }
.lrow.hd { font-family: var(--sans); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; border-bottom: 1px dashed currentColor; padding: 0 0 .35rem; }
.lrow.hd b { font-weight: 600; }
.lrow.tot { border-bottom: 0; border-top: 1px dashed currentColor; margin-top: .1rem; grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr)); }
.lrow.tot b { font-weight: 500; }

/* Phone mode: the cards stack and the loops follow them; the score ruler is redrawn
   vertical by the page script, its labels grow, and each ledger row wraps to three lines. */
@media (max-width: 560px) {
  .cardwrap { padding: 12px 10px 34px; }
  .cards { grid-template-columns: minmax(0, 1fr); gap: 54px; }
  .icard { font-size: .78rem; }
  .loops .looplab { font-size: 16px; }
  .sheet.match2 { min-width: 0; user-select: none; }
  .sheet-scroll:has(.match2) { overflow-x: clip; }
  .match2 .svgnote { font-size: 17px; }
  .match2 .svglab { font-size: 19px; }
  .match2 .tick { font-size: 15px; }
  .match2 .tagtext { font-size: 14px; }
  .match2 .rowlab { font-size: 14px; }
  .ledger { padding: .7rem .8rem .6rem; font-size: .74rem; }
  .ledger .lrow { grid-template-columns: minmax(0, 1fr) auto; }
  .lrow .sc { grid-column: 2; }
  .lrow .ev, .lrow .dc { grid-column: 1 / -1; }
  .lrow.hd .ev, .lrow.hd .dc { display: none; }
  .lrow.tot { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lrow.tot span { grid-column: 1 / -1; }
}