/* =====================================================================
   Paper and Ink · essays/the-authority-we-gave-the-machine.css
   "The Authority We Gave the Machine": 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:
   a deployment approval sheet that can show its hidden connections (Figure 1), and a
   graph-paper worksheet of what three stop configurations stop (Figure 2).
   Gold = capacity to act; blue = capacity to govern; graphite = status words and records. */

/* ---- 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); }

/* ---- the acceptance exercise in the running text ------------------------ */
.prose ol.review { padding-left: 1.4em; }
.prose ol.review li { margin: 0 0 .55em; }

/* ---- Figure 1: the deployment sheet ------------------------------------ */
.dsfig { display: grid; grid-template-columns: minmax(0, 580px) minmax(0, 1fr); gap: 32px; align-items: start; padding: 10px 4px 6px; }
.ds-wrap { position: relative; transform: rotate(-.8deg); padding-bottom: 8px; }
.ds {
  box-sizing: border-box; padding: 22px 22px 70px;
  background: var(--noise), linear-gradient(var(--grid-minor) 1px, transparent 1px) 0 8px / 100% 1.9em, var(--slip);
  font-family: var(--mono); font-size: .76rem; line-height: 1.6;
}
.dsfig .sh { margin: 0; text-align: center; letter-spacing: .18em; text-transform: uppercase; font-weight: 500; }
.dsfig .ss { margin: 0 0 10px; text-align: center; font-size: .68rem; letter-spacing: .04em; }
.ds .rule { border-top: 1px dashed currentColor; opacity: .45; margin: 8px 0; }
.ds .task { margin: 0; }
.ds .task b { font-family: var(--sans); font-weight: 600; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; margin-right: .5em; }
.dst { width: 100%; border-collapse: collapse; margin: 4px 0 0; }
.dst caption { text-align: left; font-family: var(--sans); font-weight: 600; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--slip-ink); padding: 8px 0 2px; }
.dst th, .dst td { text-align: left; vertical-align: top; padding: 5px 6px 5px 0; border-bottom: 1px dashed var(--grid-major); }
.dst thead th { font-family: var(--sans); font-weight: 600; font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--slip-ink); }
.dst .cap-once { color: var(--slip-once); font-weight: 500; }
.dst .cap-life { color: var(--slip-life); font-weight: 500; }
.dst td.ok { color: var(--slip-ink); white-space: nowrap; }
.dst .via { color: var(--slip-ink); }
/* the connections column, written in pencil once revealed */
.dst .conn { font-family: var(--serif); font-style: italic; font-size: .86rem; line-height: 1.3; color: var(--graphite); }
.dst thead th.conn { font-family: var(--sans); font-style: normal; font-size: .58rem; line-height: 1.6; color: var(--graphite); }
.ds:not(.shown) .conn { display: none; }
.ds.shown .conn { animation: fade .6s ease both; }
.ds .unlisted { margin: 12px 0 0; padding-top: 8px; border-top: 1px dashed var(--graphite); }
.ds .unlisted[hidden] { display: none; }
.ds .unlisted { animation: fade .6s ease .15s both; }
.ds .unlisted p { margin: 0 0 4px; }
.ds .unlisted .uh { font-family: var(--sans); font-weight: 600; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--graphite); }
.ds .unlisted .q { font-family: var(--serif); font-style: italic; font-size: .92rem; line-height: 1.35; color: var(--slip-life); }
.dsfig .stamp { position: absolute; }
.dsfig .st1 { color: var(--slip-once); left: 24px; bottom: 26px; transform: rotate(-5deg); animation-delay: .7s; }
.dsfig .st2 { color: var(--graphite); right: 20px; bottom: 24px; transform: rotate(4deg); animation: thump .45s cubic-bezier(.3, 1.6, .5, 1) .1s both; }
.dsfig .st2[hidden] { display: none; }
.ds-side { display: grid; gap: 22px; padding-top: 40px; }
.ds-note { margin: 0; max-width: 28ch; color: var(--ink); animation: fade .7s ease both; }
.ds-note.n1 { animation-delay: 1.1s; }
.ds-note.n2 { animation-delay: 1.6s; }
.ds-side .btn { justify-self: start; font-size: .9rem; }

/* ---- Figure 2: what the stop button stops ------------------------------ */
.ctl { border: 0; margin: 0 0 1.2rem; padding: 0; display: grid; gap: .5rem; max-width: 720px; font-family: var(--sans); font-size: .86rem; color: var(--ink); }
.ctl legend { padding: 0; margin-bottom: .35rem; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ctl .opts { display: grid; gap: .35rem; }
.ctl label { display: inline-flex; align-items: baseline; gap: .45rem; cursor: pointer; }
.ctl input { accent-color: var(--life); margin: 0; transform: translateY(1px); }
.ctl input:focus-visible { outline: 2px solid var(--life); outline-offset: 3px; }
.ctl .fixed { margin: 0; font-size: .8rem; color: var(--muted); }

.sheet.stop2 { cursor: default; }
.sheet.stop2:not(.on) { display: none; }
.stop2 .pen-g { fill: var(--slip-ink); }
.stop2 .lab-life { fill: var(--slip-life); }
.stop2 .lab-once { fill: var(--slip-once); }
.stop2 .obj { fill: var(--slip-ink); font-size: 17px; }
.stop2 .stat { fill: var(--graphite); font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.stop2 .ink .main { stroke-width: 2.6; }
.stop2 .ink .edge { stroke-width: .9; opacity: .45; }
.stop2 .bx-once path { stroke: var(--slip-once); }
.stop2 .bx-life path { stroke: var(--slip-life); }
.stop2 .bx-rec path { stroke: var(--graphite); stroke-dasharray: 3 6; animation: none; }
.stop2 .bx-rec .main { stroke-width: 1.8; }
.stop2 .bx-rec .edge { display: none; }
.stop2 .done path { stroke: var(--graphite); stroke-width: 1.6; stroke-dasharray: 2 6; animation: none; }
.stop2 .xmark { fill: none; stroke: var(--slip-life); stroke-width: 2.2; stroke-linecap: round; }
.stop2 svg.still .ink path, .stop2 svg.still .fade { animation: none; }

.stop-tab { width: 100%; border-collapse: collapse; margin: 1rem 0 0; font-family: var(--sans); font-size: .8rem; color: var(--ink); }
.stop-tab caption { text-align: left; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-bottom: .4rem; }
.stop-tab th, .stop-tab td { text-align: left; vertical-align: top; padding: .35rem .6rem .35rem 0; border-bottom: 1px solid var(--rule); }
.stop-tab thead th { font-weight: 600; color: var(--muted); }
.stop-tab tbody th { font-weight: 500; }

@media (max-width: 760px) {
  .dsfig { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .ds-wrap { width: min(100%, 540px); margin-inline: auto; }
  .ds.shown { padding-bottom: 118px; }
  .dsfig .st2 { right: auto; left: 24px; bottom: 72px; }
  .ds-side { padding-top: 0; width: min(100%, 500px); margin-inline: auto; }
  .ds-note { max-width: none; }
}

/* Phone mode: the sheet's three columns fold into stacked rows; the stop worksheet is redrawn
   by the page script as a column of objects; figure text grows; the table stacks. */
@media (max-width: 560px) {
  .ds { padding: 18px 14px 70px; font-size: .74rem; }
  .dst thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .dst tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 .6rem; padding: 6px 0; border-bottom: 1px dashed var(--grid-major); }
  .dst th, .dst td { border: 0; padding: 1px 0; }
  .dst .via { grid-column: 1 / -1; }
  .dst .conn { grid-column: 1 / -1; }
  .dst td.ok { grid-row: 1; grid-column: 2; }
  .sheet.stop2 { min-width: 0; user-select: none; }
  .sheet-scroll:has(.stop2) { overflow-x: clip; }
  .stop2 .svgnote { font-size: 16.5px; }
  .stop2 .obj { font-size: 19px; }
  .stop2 .stat { font-size: 15.5px; }
  .stop-tab thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .stop-tab tr { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding: .5rem 0; border-bottom: 1px solid var(--rule); }
  .stop-tab th, .stop-tab td { border: 0; padding: .1rem 0; }
  .stop-tab td:nth-child(2)::before { content: "Stop the worker: "; color: var(--muted); }
  .stop-tab td:nth-child(3)::before { content: "Also cancel queued work: "; color: var(--muted); }
  .stop-tab td:nth-child(4)::before { content: "End the task's authority: "; color: var(--muted); }
}