/* Top margin only: this file loads after prose.css, and inside the article
   grid a bottom margin would add to the next element instead of collapsing. */
.diagram{margin:2.5rem 0 0;}
.diagram figcaption{margin-top:1rem;font-size:.8rem;}
.flow-chart{font:400 .875rem/1.5 var(--sans-text);}
.flow-accordion{border-bottom:1px solid var(--rule);}
.flow-accordion > summary{padding:1rem 0;cursor:pointer;color:var(--text);}
.flow-accordion[open] > summary{font-weight:700;}
.flow-accordion__body{padding-bottom:1.25rem;}
.flow-help{font-size:.8rem;color:var(--text-2);margin:0 0 1rem;}
.flow-scroll{overflow:auto;border:1px solid var(--rule);background:var(--surface);scrollbar-gutter:stable;}
.flow-canvas{position:relative;margin-inline:auto;}
.flow-canvas svg{position:absolute;inset:0;color:var(--text-2);}
.flow-node{position:absolute;padding:16px;border:1px solid var(--text-2);border-radius:2px;background:var(--surface);color:var(--text);font:400 13px/21px var(--mono);text-align:left;white-space:pre-wrap;overflow-wrap:anywhere;cursor:pointer;}
.flow-node:hover,.flow-node[aria-pressed="true"]{background:var(--highlight);color:var(--highlight-ink);border-color:var(--highlight-ink);}
.flow-edge-label{font:12px var(--sans-text);fill:var(--text);paint-order:stroke;stroke:var(--surface);stroke-width:5px;stroke-linejoin:round;}
.flow-detail{padding:1rem;border-bottom:1px solid var(--rule);}
.flow-detail p{white-space:pre-wrap;overflow-wrap:anywhere;}
.flow-detail button{float:right;border:0;background:none;color:var(--text);text-decoration:underline;cursor:pointer;}
.flow-connections{margin-top:1rem;font-size:.8rem;color:var(--text-2);}
.flow-connections summary{cursor:pointer;}
.flow-connections li{margin-bottom:.75rem;overflow-wrap:anywhere;}
.flow-chart--bare .flow-accordion__body{padding-bottom:0;}
.flow-detail__note{color:var(--text-2);}


/* The #1 positioning matrix. Real text in a CSS grid, not a drawing of text: it
   reflows, scales with the reader's font size, and can be selected and searched.
   Stacks to one column on a phone, where a 2x2 is unreadable anyway. */
.quad{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.75rem;align-items:center;}
.quad__grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--rule);border:1px solid var(--rule);}
.quad__cell{background:var(--surface);padding:1rem 1.1rem;}
.quad__cell--works{background:var(--surface-2);}
.quad__where{margin:0 0 .4rem;font:400 .7rem/1.4 var(--mono);color:var(--text-2);text-transform:uppercase;letter-spacing:.06em;}
.quad__cell h4{margin:0 0 .5rem;font:700 1rem/1.3 var(--sans-text);color:var(--text);}
.quad__cell--works h4{color:var(--accent);}
.quad__cell p:last-child{margin:0;font:400 .85rem/1.55 var(--sans-text);color:var(--text-2);}
.quad__axis{margin:0;font:400 .7rem/1.4 var(--mono);color:var(--text-2);text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;}
.quad__axis span{font-weight:700;color:var(--text);}
.quad__axis i{font-style:normal;opacity:.5;}
.quad__axis--y{grid-column:1;grid-row:1;writing-mode:vertical-rl;transform:rotate(180deg);justify-self:center;}
.quad__axis--x{grid-column:2;grid-row:2;text-align:center;}
@media (max-width:40rem){
  .quad{grid-template-columns:1fr;}
  .quad__grid{grid-template-columns:1fr;grid-column:1;grid-row:1;}
  .quad__axis--y{display:none;}
  .quad__axis--x{grid-column:1;grid-row:2;}
}