/* =====================================================================
   Paper and Ink · essays/the-pool-needs-the-healthy.css
   "The pool needs the healthy.": the figures only this essay uses.
   Loaded after the shared stylesheets; everything shared lives in css/.
   ===================================================================== */

/* Layout: one 64ch reading column on grained paper; two figures break out to 860px:
   the Harvard PPO as a thermal receipt (Figure 1) and the pool, year by year,
   on graph paper (Figure 2).
   Gold = pricing the individual risk; blue = keeping the pool solvent. */

/* ---- 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; }
sup.ref + sup.ref { margin-left: 3px; }
.sources li:target { color: var(--ink); background: var(--life-soft); }

/* ---- Figure 1: the PPO receipt ------------------------------------------ */
/* the plan was closed, so this receipt stops printing: no cursor on its last line */
.slip.ppo .stamp.s2 { bottom: 20px; }
/* clip sideways overflow so a stamp's starting scale can never widen the page on a phone */
#fig-receipt { overflow-x: clip; overflow-clip-margin: 14px; }

/* ---- Figure 2: the pool, year by year ----------------------------------- */
.spiral .once { stroke: var(--slip-once); }
.spiral .life { stroke: var(--slip-life); }
.spiral .all { stroke: var(--graphite); stroke-width: 1.6; stroke-dasharray: 2 6; stroke-linecap: round; }
.spiral .hl { stroke: var(--slip-once); stroke-width: 1; opacity: .7; }
.spiral .yt, .spiral .rt, .spiral .rl { stroke: var(--slip-ink); stroke-width: 1.2; }
.spiral .lab-once { fill: var(--slip-once); }
.spiral .lab-life { fill: var(--slip-life); }
.spiral .pen-g { fill: var(--graphite); }
.spiral .arrow { fill: none; stroke: var(--graphite); stroke-width: 1.4; stroke-linecap: round; }
.spiral .loop { fill: none; stroke: var(--graphite); stroke-width: 1.5; stroke-linecap: round; }
.spiral .rowlab { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; fill: var(--slip-ink); }
.spiral .rowsub { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.spiral .gbox { fill: none; stroke-width: 1.4; }
.spiral .in-once { stroke: var(--slip-once); }
.spiral .in-life { stroke: var(--slip-life); }
.spiral .out-once, .spiral .out-life { stroke: var(--graphite); stroke-dasharray: 3 4; }
.spiral .tl { stroke-width: 1.8; stroke-linecap: round; }
.spiral .tl.once { stroke: var(--slip-once); }
.spiral .tl.life { stroke: var(--slip-life); }
.spiral .cursor { stroke: var(--graphite); stroke-width: 1.2; stroke-dasharray: 5 5; }
.spiral .dot-once { fill: var(--slip-once); }
.spiral .dot-life { fill: var(--slip-life); }
.spiral .tagbox { fill: var(--slip); stroke: var(--slip-ink); stroke-width: 1; }
.spiral .tag-ink { fill: var(--slip-ink); }
.spiral .tag-once { fill: var(--slip-once); }
.spiral .tag-life { fill: var(--slip-life); }
.spiral .tagtext { white-space: pre; }
/* redraws after the breakpoint changes appear at once, without replaying the load sequence */
.spiral .still .ink path, .spiral .still .fade, .spiral .still .hatch { animation: none; }

/* Phone mode: the chart is redrawn narrower and taller by the page script, with its
   paper tag above the plot and fewer notes; labels grow so they render at 11px or more. */
@media (max-width: 560px) {
  .sheet.spiral { min-width: 0; user-select: none; }
  .sheet-scroll:has(.spiral) { overflow-x: clip; }
  .spiral .tick { font-size: 13px; }
  .spiral .svgnote { font-size: 16px; }
  .spiral .svglab { font-size: 17px; }
  .spiral .rowlab { font-size: 12px; }
  .spiral .rowsub { font-size: 12px; }
  .spiral .tagtext { font-size: 14px; }
}