/* Factories: this stop's own drawings (05-17 sections.factories). Shared looks are in living/explain.css. */
.sortfig { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; align-items: center; }
.sortbox { display: block; width: 100%; padding: 12px; border: 0; border-radius: 16px; background: rgba(255,252,247,0.86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 8px 24px -16px rgba(60,30,10,0.5); cursor: pointer; }
.sortbox svg { width: 100%; height: auto; display: block; overflow: visible; }
.gr { fill: #C9A27E; stroke: rgba(60,30,10,0.3); stroke-width: 0.8; transition: transform 1.3s cubic-bezier(.6,0,.2,1); transform-box: view-box; }
.gr.fe { fill: #6A2A16; }
.sorted .gr { transition-delay: calc(var(--d, 0) * 1ms); }
.sorted .gr.fe { fill: #5A2212; stroke: #FFC27A; }
.sort-txt { display: grid; gap: 12px; }
.sortgo { justify-self: start; padding: 11px 18px; border-radius: 999px; border: 0; background: var(--ink); color: #FFF4EA; font: 600 14px/1 var(--wum-body); cursor: pointer; }
.sk { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 14px; border-radius: 12px; background: rgba(255,252,247,0.86); font-size: 14.5px; }
.sk i { width: 14px; height: 14px; border-radius: 50%; background: #C9A27E; flex: none; }
.sk i.fe { background: #6A2A16; }
.sk b { margin-left: auto; font: 700 18px/1 var(--wum-mono); }
.step .spark { animation: fa-flash 0.6s steps(2) infinite; }
.step .glow { animation: fa-glow 2.4s ease-in-out infinite alternate; }
.step .steam { animation: fa-steam 3s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes fa-flash { 50% { opacity: 0.2; } }
@keyframes fa-glow { to { opacity: 0.55; } }
@keyframes fa-steam { from { transform: translateY(6px) scale(0.6); opacity: 0.8; } to { transform: translateY(-10px) scale(1.4); opacity: 0; } }
.rustfig svg, .enfig svg { width: 100%; height: auto; display: block; }
.rustfig .note, .enfig .note { margin: 12px 0 0; }
.rflow { stroke-dasharray: 6 8; animation: fa-flow 1.6s linear infinite; }
@keyframes fa-flow { to { stroke-dashoffset: -28; } }
.rglow { animation: fa-glow 2.4s ease-in-out infinite alternate; }
.ebar { transform-origin: left; transform-box: fill-box; transform: scaleX(0); transition: transform 1.4s cubic-bezier(.3,.7,.2,1); }
.fig.in .ebar { transform: none; }
@media (max-width: 960px) { .sortfig { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .step .spark, .step .glow, .step .steam, .rflow, .rglow { animation: none; } .ebar { transform: none; } }