/* =====================================================================
   Paper and Ink · essays/when-the-safe-path-loses-to-the-to-do-list.css
   "When the Safe Path Loses to the To-Do List": the figures only this dispatch uses.
   Loaded after the shared stylesheets; everything shared lives in css/.
   ===================================================================== */

/* Layout: one 64ch reading column on grained paper; two paper objects break out to 860px:
   a thermal task log printed at 4:15 p.m. with two stamps and margin notes (Figure 1)
   and an illustrative model of off-channel workarounds under rising queue pressure, inked on taped graph paper (Figure 2).
   Gold = blocking the unsafe path; blue = making the safe path win; graphite = the reference marks. */

/* ---- 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 4:15 p.m. task log ------------------------------------ */
/* clip sideways overflow so a stamp's starting scale can never widen the page on a phone */
#tasklog .slipfig { overflow-x: clip; overflow-clip-margin: 14px; }
#tasklog .slip .stamp.s2 { bottom: 20px; }
#tasklog .replay { margin-top: -60px; justify-self: start; }

/* ---- Figure 2: workarounds under queue pressure ----------------------------- */
#chart text { fill: var(--slip-ink); }
#chart .rowlab { font-family: var(--sans); font-size: 10.5px; letter-spacing: .12em; font-variant: small-caps; text-transform: lowercase; fill: var(--graphite); }
#chart .axlab { font-family: var(--sans); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; fill: var(--graphite); }

@media (max-width: 640px) {
  #tasklog .replay { margin-top: 0; }
}

/* Phone mode: the task log stacks above its notes; Figure 2 is redrawn by the page script on a 420-wide,
   taller viewBox, so the sheet fits the column and its text is enlarged to stay readable. */
@media (max-width: 560px) {
  #tasklog .slip { font-size: .78rem; padding-inline: 18px; }
  .sheet-scroll { overflow-x: clip; padding-inline: 4px; margin-inline: -4px; }
  .sheet { min-width: 0; padding: 26px 8px 10px; user-select: none; }
  .sheet::before, .sheet::after { width: 72px; }
  #chart .svglab { font-size: 19px; }
  #chart .svgnote { font-size: 16.5px; }
  #chart .tick { font-size: 15px; }
  #chart .tagtext { font-size: 16px; }
  #chart .rowlab, #chart .axlab { font-size: 14px; letter-spacing: .08em; }
}