/* =====================================================================
   Paper and Ink · essays/simple-enough-to-be-obviously-right.css
   "Simple enough to be obviously right.": the figures only this essay uses.
   Loaded after the shared stylesheets; everything shared lives in css/.
   ===================================================================== */

/* Layout: one 64ch reading column; a constructed code review printed as a thermal slip
   (shared .slip, Figure 1) and the 48 catastrophic failures in Yuan et al. (OSDI '14),
   one hand-drawn box each, on graph paper (shared .sheet, Figure 2), break out to 860px.
   Gold = what the system can do; blue = what anyone can show it does. */

/* ---- footnote markers and inline code ----------------------------------- */
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); }
.prose code { font-family: var(--mono); font-size: .86em; }

/* ---- Figure 1: code lines on the slip, and room for the second stamp ----- */
#fig1 .slip .code { white-space: pre; margin: 4px 0 2px; }
#fig1 .slip .vlab { letter-spacing: .14em; font-size: .72rem; margin-top: 4px; }
#fig1 .slip .printing { padding-bottom: 52px; }
@media (min-width: 641px) { #fig1 .margin-notes { gap: 220px; padding-top: 110px; } #fig1 .margin-notes .btn { margin-top: -150px; justify-self: start; } }

/* ---- Figure 2: one box per catastrophic failure, 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 .pen-g { fill: var(--slip-ink); }
#chart .pencil { fill: none; stroke: var(--graphite); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 2 5; }
#chart .penline { fill: none; stroke: var(--slip-ink); stroke-width: 1.3; stroke-linecap: round; }
#chart .band { opacity: .7; }
#chart .sel { fill: none; stroke: var(--slip-ink); stroke-width: 1.2; stroke-dasharray: 3 3; }
#chart .tick { font-size: 11px; }
#chart .tagtext { font-size: 12px; white-space: pre; }
/* redraws after the breakpoint changes appear at once, without replaying the load sequence */
#chart.still .ink path, #chart.still .fade, #chart.still .hatch { animation: none; }

/* Phone mode: Figure 2 is redrawn by the page script as a narrower, taller sheet (viewBox 400 x 600)
   with one labeled row per group and the paper tag at the bottom; svg text sizes rise 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; }
  #chart .svgnote { font-size: 16px; }
  #chart .tick { font-size: 14px; }
  #chart .tagtext { font-size: 15px; }
}