/* =====================================================================
   Paper and Ink · essays/who-gave-the-machine-permission.css
   "Who Gave the Machine Permission?": 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 paper objects (a purchase form beside a mandate slip, a decision ledger on taped graph paper) break out to 860px. Gold = technical capability (can); blue = delegated authority (may); outcomes are graphite. */

.dek{max-width:44ch}

/* ---- Figure 1: the purchase form and the mandate slip -------------------- */
.fig1{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);gap:36px;align-items:start}
.form{position:relative;background:var(--noise),var(--sheet);padding:1.1rem 1.2rem 1.2rem;font-family:var(--mono);font-size:.74rem;line-height:1.55;transform:rotate(-1deg)}
.fh,.mh{font-family:var(--sans);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;margin:0 0 .7rem;opacity:.8}
.frow,.mrow{display:flex;justify-content:space-between;gap:.8rem;border-bottom:1px solid color-mix(in srgb,var(--slip-ink) 22%,transparent);padding:.22rem 0}
.frow span,.mrow span{opacity:.75}
.frow b,.mrow b{font-weight:500;text-align:right}
.frow.total{border-bottom:1.5px solid var(--slip-ink)}
.frow.total b{font-family:var(--serif);font-size:1.5rem;font-weight:400;line-height:1.1}
.ok{color:var(--slip-once);margin:.5rem 0 0;font-size:1rem;animation:fade .7s ease .4s both}
.form .s-ok{display:table;margin:.5rem 0 0 auto;color:var(--slip-once);transform:rotate(-5deg);font-size:.64rem;animation-delay:.9s}
.boxes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:1.1rem;border:1px solid var(--slip-ink)}
.box{display:flex;flex-direction:column;justify-content:space-between;min-height:4.4rem;padding:.35rem .45rem;animation:fade .6s ease both}
.box+.box{border-left:1px solid var(--slip-ink)}
.box small{font-family:var(--sans);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;opacity:.75}
.box .hand{font-size:.98rem;line-height:1.2}
.box.filled .hand{color:var(--slip-once)}
.box.empty{background:repeating-linear-gradient(135deg,transparent 0 7px,var(--grid-minor) 7px 8px)}
.box.empty:nth-child(2){animation-delay:1.4s}
.box .sep{color:var(--graphite);font-size:.85rem}
.side{display:grid;gap:1.8rem}
.mandate{position:relative;background:var(--noise),var(--slip);padding:1rem 1.1rem 1.1rem;font-family:var(--mono);font-size:.72rem;line-height:1.55;transform:rotate(1.4deg);border-top:3px solid var(--slip-life);animation:fade .7s ease 1.6s both}
.mandate .mh{color:var(--slip-life)}
.mandate b{color:var(--slip-life)}
.mrow.lim{animation:mark 1s ease 2.4s both;background:linear-gradient(var(--life-soft),var(--life-soft)) no-repeat 0 100%/100% 100%}
@keyframes mark{from{background-size:0 100%}}
.msig{font-family:var(--serif);font-style:italic;font-size:.95rem;color:var(--slip-life);margin:.7rem 0 0}
.side .mnote p{max-width:24ch;animation:fade .7s ease 2.8s both}
.side .a1 path{animation-delay:2.6s}
.again{margin-top:1rem}

/* ---- Figure 2: the decision ledger on graph paper ------------------------ */
.ledger{min-width:0;transform:rotate(-.4deg);touch-action:auto;cursor:auto;padding:30px 22px 22px;color:var(--slip-ink)}
.can{margin:0 0 1rem;font-family:var(--serif);font-size:1.2rem;color:var(--slip-once);border-bottom:2px solid var(--slip-once);padding-bottom:.45rem}
.cl,.ml{font-family:var(--sans);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase}
.cl{margin-right:.6rem;color:var(--slip-once)}
.pick{border:0;margin:0 0 .9rem;padding:0;display:flex;flex-wrap:wrap;gap:.4rem 1.2rem}
.pick label{font-family:var(--sans);font-size:.85rem;color:var(--graphite);cursor:pointer;padding:.2rem 0;border-bottom:2px solid transparent}
.pick input{position:absolute;opacity:0;width:1px;height:1px}
.pick label:has(input:checked){color:var(--slip-ink);border-bottom-color:var(--slip-ink)}
.pick label:has(input:focus-visible){outline:2px solid var(--life);outline-offset:3px}
.facts{font-family:var(--mono);font-size:.78rem;margin:0 0 1rem;min-height:1.4em}
.may{background:var(--noise),var(--slip);border-top:3px solid var(--slip-life);padding:.7rem .9rem .5rem;box-shadow:0 1px 1px var(--shadow)}
.ml{color:var(--slip-life);margin:0 0 .4rem}
.checks{list-style:none;margin:0;padding:0;font-family:var(--mono);font-size:.76rem}
.checks li{display:flex;align-items:baseline;gap:.6rem;margin:0;padding:.22rem 0;border-bottom:1px solid color-mix(in srgb,var(--slip-ink) 22%,transparent);color:var(--slip-life)}
.checks li:last-child{border-bottom:0}
.checks .mark{width:1.1em;color:var(--slip-ink);text-align:center}
.checks li.unmet{color:var(--slip-ink);font-weight:500;text-decoration:underline wavy var(--graphite) 1px;text-underline-offset:4px}
.result{display:flex;gap:1.2rem;align-items:center;margin-top:1.1rem;min-height:4.6rem}
.result .stamp{color:var(--slip-ink);font-size:.86rem;transform:rotate(-5deg);flex:none}
.why{margin:0;font-size:1.08rem;animation:fade .6s ease .2s both;max-width:46ch}

@media (max-width:700px){
  .fig1{grid-template-columns:1fr;gap:28px}
  .side .pen{display:none}
  .mandate{transform:rotate(.8deg)}
}
/* Phone mode: the form's labels shrink, the signature boxes keep three columns with smaller type, and the ledger's scenario choices wrap as a two-column list. */
@media (max-width:560px){
  .form{padding:1rem .8rem 1rem}
  .box{min-height:4rem;padding:.3rem .35rem}
  .box small,.fh,.mh,.cl,.ml{font-size:.7rem;letter-spacing:.04em}
  .form .s-ok{font-size:.7rem}
  .box .hand{font-size:.86rem}
  .box .sep{font-size:.76rem}
  .ledger{padding:28px 12px 16px}
  .pick{display:grid;grid-template-columns:1fr 1fr;gap:.2rem .8rem}
  .pick label{font-size:.8rem}
  .result{flex-direction:column;align-items:flex-start;gap:.7rem}
}