/* =====================================================================
   Paper and Ink · essays/the-checker-has-to-know-the-work.css
   "The checker has to know the work.": the figures only this essay uses.
   Loaded after the shared stylesheets; Figure 1 is the shared .slip receipt.
   ===================================================================== */

/* Layout: one 64ch reading column; three paper objects (a procedure log receipt, graph paper with a slope chart, two index cards) break out to 860px. Gold = the finished work, with the tool; blue = the judgment to check it, without the tool. */

/* Figure 2: slope chart on graph paper, with view buttons */
.btn[aria-pressed="true"]{color:var(--ink);font-weight:600;text-decoration-thickness:2px}
.ctl{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;align-items:baseline;margin-top:1rem;font-family:var(--sans);font-size:.82rem;color:var(--muted)}
#cards .rowlab{font-family:var(--sans);font-size:11px;letter-spacing:.12em;text-transform:uppercase;fill:var(--graphite)}
#cards .rowlab.cA{fill:var(--slip-once)}
#cards .rowlab.cB{fill:var(--slip-life)}
#cards .gsub{font-size:13px}

/* Figure 3: two index cards, the same task in two orders */
.order{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start}
.icard{background:var(--noise),var(--slip);padding:1.1rem 1.3rem 1.3rem;font-family:var(--mono);font-size:.82rem;line-height:1.5;border-top:2px solid var(--slip-life)}
.icard .ich{border-bottom:1px solid var(--grid-major);padding-bottom:.35rem}
.icard.c-a{transform:rotate(-1.2deg)}
.icard.c-b{transform:rotate(.9deg);margin-top:14px}
.icard .ich{font-family:var(--serif);font-style:italic;font-size:1.3rem;margin:0 0 .5rem}
.icard ol{margin:0;padding-left:1.4rem}
.icard li{padding:.2rem 0 .35rem}
.icard li span{display:block}
.icard .mk{display:inline-block;font-family:var(--sans);font-style:normal;font-weight:600;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  border:1.5px solid currentColor;padding:.2em .5em;margin-top:.25rem;transform:rotate(-2deg)}
.icard .mk.g{color:var(--slip-once)}
.icard .mk.b{color:var(--slip-life)}

/* Phones: Figure 2 is redrawn by the page script as a taller sheet (viewBox 400 x 540) with svg text raised to read at 11px or more; Figure 3's cards stack. */
@media (max-width:560px){
  .sheet-scroll{overflow-x:clip}
  .sheet{min-width:0;padding:24px 8px 10px;-webkit-user-select:none;user-select:none}
  #cards .rowlab{font-size:15px}
  #cards .svglab{font-size:21px}
  #cards .svgnote{font-size:18px}
  #cards .gsub{font-size:16px}
  #cards .tick{font-size:15px}
  .order{grid-template-columns:1fr;gap:20px}
  .icard.c-b{margin-top:0}
}