/* How it works: the workflow graphic and its definitions. Loaded only on how-it-works.html. */
#flow svg { width: 100%; height: auto; display: block; overflow: visible; }
svg text{font-family:"Nunito Sans","Segoe UI",system-ui,sans-serif}
.t-lab{font-size:13px;font-weight:800;letter-spacing:.14em;fill:var(--sand)}
.t-p{font-size:14px;fill:var(--ink-soft)}
.n-title{font-size:16px;font-weight:800;fill:var(--teal-deep)}
.n-sub{font-size:13.5px;font-weight:600;fill:var(--ink-soft)}
.n-tech{font-size:12px;font-weight:800;letter-spacing:.1em;fill:var(--slate)}
.t-cite{font-size:11px;font-weight:800;letter-spacing:.08em;fill:var(--teal)}
.feed{fill:none;stroke:var(--numeral);stroke-width:1.4}
.conv{fill:none;stroke:var(--teal);stroke-width:1.4;opacity:.42}
.stopline{fill:none;stroke:var(--slate);stroke-width:1.4;stroke-dasharray:5 4;opacity:.75}
.legend{margin-top:64px;border-top:1px solid var(--rule);padding-top:40px}
.legend .intro{max-width:72ch;color:var(--ink-soft);margin-top:18px}
.deflist{margin-top:34px}
.defrow{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:28px;border-top:1px solid var(--rule);padding:22px 0}
.defrow:first-child{border-top-color:var(--teal-deep);border-top-width:2px}
.defrow:last-child{border-bottom:1px solid var(--rule)}
.defrow .num{font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--sand);margin:0 0 6px}
.defrow h3{font-size:21px;font-weight:800;color:var(--teal-deep);margin:0}
.defrow .chip{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--teal);border:1px solid var(--teal);border-radius:999px;padding:3px 10px;margin-top:10px}
.defrow p{font-size:17px;color:var(--ink-soft);margin:0}
.defrow p + p{margin-top:10px}
.srcgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 32px;margin-top:18px}
.srccell{border-top:1px solid var(--rule);padding-top:12px}
.srccell h4{font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);margin:0 0 8px}
.srccell ul{margin:0;padding-left:18px}
.srccell li{font-size:15.5px;line-height:1.5;color:var(--ink-soft);margin:0 0 5px}
.srcnote{font-size:15.5px;color:var(--ink-mute);margin-top:18px}
.flow-stage { margin-top: 34px; }
.legend { margin-top: 56px; border-top: 1px solid var(--rule); padding-top: 36px; }
.legend .intro { max-width: 72ch; color: var(--ink-soft); margin-top: 16px; }
.defdetails{margin-top:26px}
.defdetails>summary{list-style:none;cursor:pointer;display:inline-block;font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);border:1px solid var(--teal);padding:14px 22px;background:#fff}
.defdetails>summary::-webkit-details-marker{display:none}
.defdetails>summary::after{content:"  +"}
.defdetails[open]>summary::after{content:"  \2212"}
.defdetails>summary:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.defdetails[open]>summary{margin-bottom:8px}
.wf-ui{margin-top:64px;border-top:1px solid var(--rule);padding-top:40px}
.wf-ui .intro{max-width:72ch;color:var(--ink-soft);margin-top:16px}
.wf-frame{display:block;border:0;width:calc(100% + 20px);margin:26px -10px 0;height:880px;background:transparent}
.flow-mobile-note { display: none; font-size: 16px; color: var(--ink-mute); margin-top: 14px; }
@media (max-width: 820px) {
  .srcgrid { grid-template-columns: minmax(0, 1fr); }
  .defrow { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .flow-stage { display: none; }           /* the written section carries it on a phone */
  .flow-mobile-note { display: block; }
  .wf-frame { height: 1300px; }
}