.workflow-intro{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6)}.workflow-intro .page-heading{max-width:68ch}.workflow-mode{flex-shrink:0;border-left:3px solid var(--accent);padding:var(--space-3) var(--space-4);background:var(--tint);font-size:var(--text-small);font-weight:750}.workflow-mode small{font-weight:400}
.workflow-track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:0;list-style:none;gap:var(--space-3);margin-block:var(--space-6)}.workflow-track li{min-width:0;overflow-wrap:anywhere;border:1px solid var(--line);padding:var(--space-4);font-size:var(--text-small);font-weight:650;background:var(--surface)}.workflow-track span{color:var(--muted);margin-right:var(--space-2)}.workflow-track [aria-current=step]{border-color:var(--accent);background:var(--tint);color:var(--accent)}.workflow-track .is-complete{border-color:var(--accent)}
.workflow-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr);gap:var(--space-6);align-items:start}.workflow-main,.workflow-side{display:grid;gap:var(--space-4);min-width:0}.workflow-page .lab-panel{border-radius:var(--radius)}.workflow-page label{display:block;font-size:var(--text-small);font-weight:650;margin-block:var(--space-4) var(--space-2)}.workflow-page textarea{width:100%;min-height:130px;resize:vertical;background:var(--surface);color:var(--ink);border:1px solid var(--line);padding:var(--space-4);border-radius:var(--radius);font:inherit}.workflow-page input{width:100%;min-width:0;min-height:44px;padding:var(--space-3);font:inherit;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:var(--radius)}.workflow-page fieldset{padding:0;border:0;margin-top:var(--space-4)}.workflow-page legend{font-size:var(--text-small);font-weight:650;margin-bottom:var(--space-2)}.workflow-fields{display:grid;grid-template-columns:.8fr 1.2fr 1fr;gap:var(--space-3)}.workflow-errors{color:var(--error)}
.workflow-products{display:grid;gap:var(--space-3)}.workflow-product{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);padding:var(--space-4);border:1px solid var(--line);background:var(--surface);border-radius:var(--radius)}.workflow-product.eligible{border-left:3px solid var(--accent);background:var(--tint)}.workflow-product h3{margin-block:var(--space-2)}.workflow-product p{margin-block:var(--space-2)}.workflow-product ul{padding-left:var(--space-4);font-size:var(--text-small)}.workflow-product>div:last-child>strong{font-size:1.25rem;line-height:1.35;font-variant-numeric:tabular-nums}
.workflow-switch{display:flex;align-items:center;gap:var(--space-3);min-height:44px;text-align:left;padding:var(--space-4);width:100%;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:var(--text-small);border-radius:var(--radius)}.workflow-switch[aria-pressed=true]{border-color:var(--accent);background:var(--tint);color:var(--accent)}.workflow-connection{font-size:var(--text-small);padding-block:var(--space-3);border-block:1px solid var(--line)}.workflow-draft{padding-block:var(--space-4)}.workflow-page details{padding:0;border:0;margin-block:var(--space-3)}.workflow-page summary{font-size:var(--text-small);min-height:44px;align-content:center;cursor:pointer}.workflow-page pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:var(--text-small);padding:var(--space-4);background:var(--surface);max-height:320px;overflow:auto}.workflow-log ol{list-style:none;padding:0;display:grid;gap:var(--space-4)}.workflow-log li{padding-left:var(--space-4);border-left:2px solid var(--line);font-size:var(--text-small)}.workflow-log li:first-child{border-color:var(--accent)}.workflow-log p{margin:var(--space-1) 0 0}.workflow-status{position:sticky;bottom:var(--space-3);background:var(--panel);border-left:3px solid var(--accent);box-shadow:0 2px 12px color-mix(in srgb,var(--ink) 10%,transparent);padding:var(--space-4);font-size:var(--text-small);max-width:none;margin-top:var(--space-4)}.workflow-status:empty{display:none}
@media(max-width:1000px){.workflow-grid{grid-template-columns:1fr}.workflow-side{grid-template-columns:1fr 1fr}.workflow-intro{align-items:start;flex-direction:column;gap:0}.workflow-mode{margin-bottom:var(--space-4)}}
@media(max-width:620px){.workflow-track{grid-template-columns:repeat(2,minmax(0,1fr))}.workflow-side,.workflow-fields,.workflow-product{grid-template-columns:1fr}.workflow-status{position:static}.workflow-fields label{margin-top:var(--space-2)}}

.workflow-mode .text-link{display:block;font-size:var(--text-small);margin-top:var(--space-2)}
/* Explain business value before exposing implementation details. */
.workflow-purpose{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6);padding:var(--card-inset);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}.workflow-purpose p{margin-top:var(--space-2);font-size:var(--text-body)}.workflow-purpose>div+div{border-left:3px solid var(--accent);padding-left:var(--space-6)}.workflow-demo-note{font-size:var(--text-small);max-width:100ch;margin-top:var(--space-4)}.workflow-current{padding:var(--space-4);background:var(--tint);font-size:var(--text-small);margin-bottom:var(--space-4)}.workflow-status{position:static;box-shadow:none;background:var(--tint);margin-block:var(--space-4);max-width:none}.workflow-advanced{border-top:1px solid var(--line)!important;padding-top:var(--space-3)!important}
@media(max-width:620px){.workflow-purpose{grid-template-columns:1fr;gap:var(--space-4)}.workflow-purpose>div+div{padding-left:0;border-left:0;border-top:2px solid var(--accent);padding-top:var(--space-4)}}

@media(max-width:450px){.workflow-track{grid-template-columns:1fr}}