/* =====================================================================
   Paper and Ink · essays/the-routing-rule-is-a-spending-decision.css
   "The Routing Rule Is a Spending Decision": 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:
   an invented inference invoice beside its routing policy (Figure 1)
   and a catalog card with two invented routes and a priority switch (Figure 2).
   Gold = access to many models; blue = authority to allocate spending; graphite = metering and settlement.
   Stamps are normal-flow blocks inside unclipped paper, so their tilt and thump never get cut off.
   Every rule below is scoped to its figure so none of it can restyle the generated Read next block. */

/* ---- 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 invoice and the routing policy -------------------------- */
.rr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem 2.4rem; align-items: start; }
.rr .doc { padding: 1.3rem 1.3rem 1.2rem; font-family: var(--mono); font-size: .8rem; line-height: 1.6; }
.rr .inv { background: var(--noise), var(--slip); transform: rotate(-1deg); }
.rr .pol { background: var(--noise), var(--sheet); transform: rotate(.8deg); margin-top: 1.4rem; }
.rr .dh { margin: 0; text-align: center; text-transform: uppercase; letter-spacing: .18em; font-weight: 600; }
.rr .ds { margin: 0 0 .2rem; text-align: center; text-transform: uppercase; letter-spacing: .08em; font-size: .68rem; color: var(--graphite); }
.rr .rule { border-top: 1px dashed currentColor; opacity: .45; margin: .6rem 0; }
.rr .wk { margin: 0 0 .5rem; }
.rr .ln { display: flex; gap: .4rem; align-items: baseline; }
.rr .ln i { flex: 1; border-bottom: 1px dotted currentColor; opacity: .4; min-width: .8rem; }
.rr .ln span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.rr .ln.once { color: var(--slip-once); }
.rr .ln.tot { font-weight: 600; }
.rr .ln.why { color: var(--slip-life); margin-top: .5rem; }
.rr .mt { margin: -.1rem 0 .35rem; font-size: .7rem; color: var(--graphite); }
.rr .stamp { display: table; margin: 1rem auto .2rem; }
.rr .stamp.paid { color: var(--graphite); transform: rotate(-6deg); animation-delay: .7s; }
.rr .stamp.pv { color: var(--slip-life); transform: rotate(4deg); animation-delay: 1.4s; }
/* the policy fields: a label column and a value column */
.rr .pf { margin: 0; display: grid; gap: .45rem; }
.rr .pf div { display: grid; grid-template-columns: 6.2em minmax(0, 1fr); gap: .6rem; }
.rr .pf dt { text-transform: uppercase; letter-spacing: .08em; font-size: .68rem; font-weight: 600; padding-top: .1rem; }
.rr .pf dd { margin: 0; }
.rr .pf .once { color: var(--slip-once); }
.rr .pf .life { color: var(--slip-life); }
/* handwritten notes under each sheet, on the page, so they use page ink */
.rr .nt { margin: .2rem 0 0; color: var(--ink); max-width: 26ch; animation: fade .7s ease both; }
.rr .n1 { grid-column: 1; grid-row: 2; animation-delay: 1.8s; }
.rr .n2 { grid-column: 2; grid-row: 2; animation-delay: 2.1s; }

/* ---- Figure 2: same catalog, different policy ------------------------------ */
.cat { max-width: 820px; padding: 1.2rem 1.3rem 1.1rem; background: var(--noise), var(--sheet); transform: rotate(-.35deg); }
.cat .ch { margin: 0 0 1rem; font-family: var(--sans); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--graphite); }
.cat .rts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.4rem; align-items: start; }
.cat .rt { padding: .8rem .9rem .6rem; background: var(--noise), var(--slip); box-shadow: 0 1px 1px var(--shadow); font-family: var(--mono); font-size: .78rem; line-height: 1.55; border: 2px solid transparent; min-height: 10.5rem; }
.cat .rt:first-child { transform: rotate(-.6deg); }
.cat .rt:last-child { transform: rotate(.5deg); }
/* the selected route gets a hand-inked blue ring */
.cat .rt.on { border-color: var(--slip-life); border-radius: 12px 16px 10px 18px; }
.cat .rn { margin: 0 0 .4rem; color: var(--slip-once); font-weight: 600; }
.cat .rl { margin: 0; display: flex; gap: .4rem; align-items: baseline; }
.cat .rl i { flex: 1; border-bottom: 1px dotted currentColor; opacity: .4; min-width: .6rem; }
.cat .rl span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cat .stamp.sel { color: var(--slip-life); display: table; margin: .7rem auto .2rem; transform: rotate(-5deg); }
.cat .ru { margin: 1rem 0 .6rem; font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--slip-life); }
/* the switch: two underlined text choices */
.cat .sw { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.2rem; }
.cat .sw legend { float: left; margin-right: .4rem; padding: 0; font-family: var(--sans); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--graphite); }
.cat .sw label { position: relative; cursor: pointer; font-family: var(--sans); font-size: .85rem; color: var(--graphite); }
.cat .sw input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cat .sw span { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
.cat .sw input:checked + span { color: var(--slip-life); font-weight: 600; text-decoration-style: solid; }
.cat .sw input:focus-visible + span { outline: 2px solid var(--slip-life); outline-offset: 3px; }
.cat + .narr { margin-top: 1.2rem; }

/* Phone mode: the two sheets and the two routes stack, each note sits under its sheet, and the tilts flatten. */
@media (max-width: 560px) {
  .rr { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
  .rr .doc { padding: 1.1rem .9rem 1rem; font-size: .76rem; }
  .rr .inv { transform: rotate(-.5deg); }
  .rr .pol { transform: rotate(.4deg); margin-top: 1.2rem; }
  .rr .n1 { grid-column: 1; grid-row: 2; }
  .rr .pol { grid-row: 3; }
  .rr .n2 { grid-column: 1; grid-row: 4; }
  .rr .pf div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .rr .ds, .rr .mt, .rr .pf dt { font-size: .7rem; }
  .cat { padding: 1rem .8rem .9rem; transform: none; }
  .cat .rts { grid-template-columns: minmax(0, 1fr); }
  .cat .rt { min-height: 0; }
  .cat .ch, .cat .sw legend { font-size: .7rem; }
  .cat .sw legend { float: none; width: 100%; margin: 0 0 .2rem; }
}