/* =====================================================================
   Paper and Ink · essays/the-answer-got-cheap-the-question-did-not.css
   "The answer got cheap. The question did not.": figures only.
   Gold = a cheap local deliverable; blue = a bounded system question.
   ===================================================================== */

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); }

#sysmap svg { width: 100%; height: auto; display: block; }
#sysmap .loop-once { fill: none; stroke: var(--slip-once); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
#sysmap .loop-life { fill: none; stroke: var(--slip-life); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
#sysmap .lbl { font-family: var(--serif); font-size: 15px; font-style: italic; }
#sysmap .lbl-once { fill: var(--slip-once); }
#sysmap .lbl-life { fill: var(--slip-life); }
#sysmap .note { font-family: var(--sans); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; fill: var(--slip-ink); opacity: .75; }

#sysmap.sheet::after { display: none; }

#sheet::after { display: none; }

#fig2-index-chart #sheet { padding: 34px 8px 6px; }

#chart { cursor: ew-resize; fill: var(--slip-ink); }
#chart .tick { font-size: 11px; }
#chart .tick-once { fill: var(--slip-once); }
#chart .tick-life { fill: var(--slip-life); }
#chart .chart-tag { pointer-events: none; }
#chart .rule-once { fill: none; stroke: var(--slip-once); stroke-width: 1.1; stroke-linecap: round; opacity: 0.85; }
#chart .rule-life { fill: none; stroke: var(--slip-life); stroke-width: 1.1; stroke-linecap: round; opacity: 0.85; }
#chart .svgnote { font-size: 15px; }
#chart .lab-once { fill: var(--slip-once); font-size: 17px; }
#chart .lab-life { fill: var(--slip-life); font-size: 17px; }
#chart .pencil { fill: none; stroke: var(--graphite); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 2 6; }
#chart .ruler { fill: none; stroke: var(--slip-ink); stroke-width: 1; stroke-linecap: round; }
#chart .hatch { opacity: .7; }
#chart .cur { stroke: var(--graphite); stroke-width: 1.2; stroke-dasharray: 3 4; }
#chart .tagtext { font-size: 12px; white-space: pre; }
#chart.still .ink path, #chart.still .fade, #chart.still .hatch { animation: none; }

@media (max-width: 560px) {
  .sheet-scroll { overflow-x: clip; }
  .sheet { min-width: 0; padding: 24px 8px 10px; -webkit-user-select: none; user-select: none; }
  #fig2-index-chart #sheet { padding: 28px 6px 4px; }
  #chart .svgnote { font-size: 17px; }
  #chart .lab-once, #chart .lab-life { font-size: 18px; }
  #chart .tick { font-size: 14px; }
  #chart .tagtext { font-size: 14px; }
}