/* =====================================================================
   Paper and Ink · essays/old-code-was-quiet-not-safe.css
   "Old Code Was Quiet, Not Safe": the figure only this dispatch uses.
   Loaded after the shared stylesheets; everything shared lives in css/.
   ===================================================================== */

/* Layout: one 64ch reading column on grained paper; one static paper object breaks out to 860px:
   the same invented system list printed twice, sorted by quiet and then by who fixes it (Figure 1).
   Gold = years without a problem; blue = someone who can fix it.
   Every rule below is scoped to its figure so none of it can restyle the generated Read next block.
   Labels stay at 11px or larger. */

/* ---- 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: two printouts of one list ---------------------------------------- */
.lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; max-width: 820px; padding-top: 6px; }
.lists .sheet-a, .lists .sheet-b { padding: 1rem 1rem .9rem; background: var(--noise), var(--slip); color: var(--slip-ink); border-top: 5px solid var(--graphite); }
.lists .sheet-a { transform: rotate(-.8deg); animation: fade .5s ease both; }
.lists .sheet-b { transform: rotate(.6deg); animation: fade .5s ease .5s both; }
.lists .lh { margin: 0 0 .6rem; font-family: var(--sans); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--graphite); }
.lists ol { list-style: none; margin: 0; padding: 0; }
.lists li { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; padding: .34rem .3rem; border-top: 1px dashed var(--grid-major); font-family: var(--mono); font-size: .76rem; }
.lists li span { min-width: 0; }
.lists li b { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.lists .sheet-a b { color: var(--slip-once); }
.lists .sheet-a .low b::after { content: " · low"; font-family: var(--sans); font-size: .7rem; font-weight: 600; }
.lists .sheet-b b { color: var(--slip-life); }
.lists .sheet-b .thin b { font-style: italic; }
/* a pencil ring around each row that has no one behind it */
.lists .sheet-b .none { padding-inline: .55rem; outline: 1.5px solid var(--slip-life); outline-offset: -1px; border-radius: 14px / 50%; }
.lists .lf { margin: .7rem 0 0; font-family: var(--sans); font-size: .7rem; color: var(--graphite); }

@media (max-width: 640px) {
  .lists { grid-template-columns: minmax(0, 1fr); max-width: 460px; }
  .lists li { flex-wrap: wrap; gap: .1rem .6rem; }
}