/* =====================================================================
   Paper and Ink · essays/the-questions-are-a-record-too.css
   "The questions are a record too": the figures only this dispatch uses.
   Loaded after the shared stylesheets; everything shared lives in css/.
   ===================================================================== */

/* Layout: one 64ch reading column; a thermal receipt of the Freeman ruling (shared .slip)
   and a pencil sketch of the self-response file and the paradata log on graph paper
   (shared .sheet) break out to 860px.
   Gold = the answers (sealed by law); blue = the instrument (what the agency wrote). */

/* ---- 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 second block is long, so the second stamp sits lower ---- */
#fig1 .slip .printing { padding-bottom: 48px; }
@media (min-width: 641px) { #fig1 .margin-notes { gap: 150px; padding-top: 80px; } #fig1 .margin-notes .btn { margin-top: -120px; justify-self: start; } }

/* ---- Figure 2: the file, sketched on graph paper ---------------------------- */
#chart { cursor: ew-resize; fill: var(--slip-ink); }
#chart .svgnote { font-size: 15px; }
#chart .lab-once { fill: var(--slip-once); }
#chart .lab-life { fill: var(--slip-life); }
#chart .lab-pencil { fill: var(--graphite); }
#chart .cell { fill: none; stroke: var(--slip-ink); stroke-width: .8; opacity: .55; }
#chart .hd-cell { fill: none; stroke: var(--slip-life); stroke-width: 1.2; }
#chart .hd-text { font-family: var(--mono); font-size: 12px; fill: var(--slip-life); }
#chart .seal { fill: url(#hatch); }
#chart .bar { fill: var(--graphite); opacity: .82; }
#chart .xml { font-family: var(--mono); font-size: 12px; white-space: pre; }
#chart .xml-name { fill: var(--graphite); }
#chart .xml-val { fill: none; stroke: var(--slip-once); stroke-width: 1; }
#chart .xml-valfill { fill: url(#hatch); opacity: .35; }
#chart .loop { fill: none; stroke-width: 1.5; stroke-linecap: round; }
#chart .pen { fill: none; stroke: var(--graphite); stroke-width: 1.4; stroke-linecap: round; }
#chart .rowlab { font-family: var(--sans); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; fill: var(--graphite); }
#chart .cursor { fill: none; stroke: var(--graphite); stroke-width: 1.2; stroke-dasharray: 3 4; }
#chart .tagtext { font-size: 12px; white-space: pre; }

/* Phone mode: Figure 2 is redrawn by the page script as a narrower, taller sheet (viewBox 400 x 640)
   with five columns, the XML log shortened, and svg text sizes raised so every label renders at 11px or more. */
@media (max-width: 560px) {
  .sheet-scroll { overflow-x: clip; }
  .sheet { min-width: 0; padding: 24px 8px 10px; -webkit-user-select: none; user-select: none; }
  #fig1 .slip .printing { padding-bottom: 52px; }
  #chart .svgnote { font-size: 17px; }
  #chart .hd-text { font-size: 14px; }
  #chart .xml { font-size: 13px; }
  #chart .rowlab { font-size: 13px; }
  #chart .tagtext { font-size: 15px; }
}