/* Shares the site's paper, green ink, typography and button tokens. */
.wf-examples { padding: 0 0 72px; }
.wf-standalone { padding:32px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); box-shadow:0 8px 28px #102a2a08; }
.wf-heading { max-width: 760px; }
.wf-heading h2 { min-height: 0; font-size: clamp(1.9rem,3.3vw,2.8rem); line-height: 1.12; margin: 8px 0 16px; }
.wf-heading > p:last-child { color: var(--slate); margin-bottom: 16px; }
.wf-notice { font-size: .82rem; color: var(--slate); border-left: 3px solid var(--line); padding-left: 12px; }
.wf-controls { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 24px 0; }
.wf-controls[hidden] { display: none; }
.wf-variants,.wf-playback,.wf-actions,.wf-comparison-controls { display:flex; flex-wrap:wrap; gap:8px; }
[data-workflow-demo] button { min-height:44px; padding:10px 14px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); color:var(--ink); font:inherit; font-size:.87rem; font-weight:650; cursor:pointer; }
[data-workflow-demo] button[aria-pressed=true] { background:var(--ink); border-color:var(--ink); color:white; }
[data-workflow-demo] button.wf-primary { background:var(--accent); color:white; border-color:var(--accent); }
[data-workflow-demo] button.wf-takeover { background:var(--warm); color:white; border-color:var(--warm); }
[data-workflow-demo] button:disabled { opacity:.5; cursor:not-allowed; }
[data-workflow-demo] :focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
.wf-phases { display:grid; grid-template-columns:1fr 1.35fr 1fr 1fr; list-style:none; margin:0; padding:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.wf-phases li { display:flex; align-items:center; gap:12px; padding:16px; background:var(--mist); border-right:1px solid var(--line); }
.wf-phases li:nth-child(3) { border-left:2px dashed var(--warm); }
.wf-phases li:last-child { border-right:0; }
.wf-phases li[aria-current] { background:var(--ink); color:white; }
.wf-phases li[data-done=true] { background:var(--accent-soft); }
.wf-number { font-family:var(--font-mono); font-size:.8rem; opacity:.8; }
.wf-phases strong,.wf-phases small { display:block; }
.wf-phases strong { font-size:.93rem; }
.wf-phases small { font-size:.75rem; margin-top:3px; }
.wf-live { font-size:.9rem; min-height:2.8em; margin:16px 0 8px; font-weight:600; }
.wf-workspace { display:grid; grid-template-columns: minmax(0,.72fr) minmax(0,1.65fr); gap:20px; align-items:start; min-height:500px; }
.wf-mail,.wf-active { border:1px solid var(--line); border-radius:var(--radius); padding:24px; min-width:0; }
.wf-mail { background:var(--paper); box-shadow:0 5px 14px #102a2a06; }
.wf-active { background:var(--tint); min-height:470px; }
.wf-mail h3,.wf-active h3 { font-size:1.25rem; margin:14px 0; line-height:1.3; }
.wf-mail p,.wf-active p { font-size:.94rem; overflow-wrap:anywhere; }
.wf-kicker { font:700 .72rem var(--font-mono); letter-spacing:.06em; text-transform:uppercase; }
.wf-sender { display:flex; align-items:center; gap:10px; border-block:1px solid var(--line); padding:12px 0; }
.wf-sender span { display:grid; place-items:center; border-radius:50%; background:var(--mint); width:30px; height:30px; font-weight:bold; }
.wf-question { background:var(--accent-soft); border-bottom:1px solid var(--accent); }
.wf-question mark { background:var(--volt); color:var(--ink); padding:0 3px; }
.wf-source-preview { display:grid; gap:12px; margin:24px 0; }
.wf-source-preview span { padding:16px; border:1px dashed var(--line); background:white; }
.wf-source-preview b { margin-right:16px; font-family:var(--font-mono); color:var(--accent); }
.wf-sources { display:grid; grid-template-columns:.75fr 1.15fr 1.2fr; gap:10px; }
.wf-sources > div { border:1px solid var(--line); background:white; padding:14px; border-radius:var(--radius-sm); }
.wf-sources h4 { font:700 .85rem var(--font-body); margin:8px 0; }
.wf-sources p { font-size:.8rem; margin:6px 0; }
.wf-source-icon { font-size:1.4rem; color:var(--accent); }
.wf-check,.wf-review-facts { padding:14px; border-left:3px solid var(--accent); background:var(--surface); }
.wf-warning { border-color:var(--warm); background:var(--warm-soft); }
.wf-draft,.wf-draft-preview { background:white; border:1px solid var(--line); padding:16px; margin:16px 0; }
.wf-draft p { white-space:pre-wrap; }
.wf-review-facts p { font-size:.85rem; margin:6px 0; }
[data-state=awaiting_review] .wf-active,[data-state=awaiting_takeover] .wf-active { border:2px dashed var(--warm); background:var(--warm-soft); }
[data-state=handoff_complete] .wf-active { background:var(--warm-soft); border-color:var(--warm); }
[data-state=completed] .wf-active { background:var(--accent-soft); border-color:var(--accent); }
[data-workflow-demo] textarea { display:block; width:100%; border:1px solid var(--accent); padding:14px; margin:8px 0 16px; font:inherit; resize:vertical; }
.wf-details { border-top:1px solid var(--line); padding:16px 0; }
.wf-details summary { min-height:44px; padding:9px 0; font-weight:650; cursor:pointer; }
.wf-details p { font-size:.9rem; }
.wf-task-list { list-style:none; padding:0; }
.wf-task-list li { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--line); font-size:.9rem; }
.wf-task-list strong { min-width:112px; text-align:center; padding:7px 10px; border:1px solid var(--warm); background:var(--warm-soft); border-radius:3px; transition:background .3s,transform .3s; }
.wf-task-list .wf-automated { background:var(--accent-soft); border-color:var(--accent); transform:translateX(-20px); }
.wf-cta { margin:12px 0; }
@media (prefers-reduced-motion:no-preference) { .wf-active > .wf-sources,.wf-draft-preview { animation:wf-appear .35s ease-out; } @keyframes wf-appear { from { opacity:.3; transform:translateY(6px); } to { opacity:1; transform:none; } } }
@media(max-width:800px) {
 .wf-standalone { padding:20px; }
 .wf-workspace { grid-template-columns:1fr; min-height:0; }
 .wf-active { min-height:0; }
 .wf-phases { grid-template-columns:1fr; }
 .wf-phases li { border-right:0; border-bottom:1px solid var(--line); padding:10px 14px; }
 .wf-phases li:nth-child(3) { border-left:0; border-top:2px dashed var(--warm); }
 .wf-phases li > span:last-child { display:flex; justify-content:space-between; align-items:center; flex:1; gap:8px; }
 .wf-phases small { margin:0; }
 .wf-mail,.wf-active { padding:18px; }
 .wf-sources { grid-template-columns:1fr; }
 .wf-sources > div { display:grid; grid-template-columns:28px 1fr; column-gap:8px; }
 .wf-sources p { grid-column:2; }
 .wf-sources h4 { align-self:center; }
 .wf-live { min-height:0; }
 .wf-task-list .wf-automated { transform:none; }
 .wf-task-list strong { min-width:90px; font-size:.8rem; }
}
@media(prefers-reduced-motion:reduce) { .wf-task-list strong { transition:none; transform:none; } }
/* Override the site's broad section spacing and strong ink rules locally. */
.wf-examples.wf-examples { padding: 0 0 72px; }
.wf-workspace > section.wf-mail,.wf-workspace > section.wf-active { padding:24px; }
.wf-phases li[aria-current] strong { color:white; }
@media(max-width:800px) { .wf-workspace > section.wf-mail,.wf-workspace > section.wf-active { padding:18px; } }
/* Demo-page stylesheet: let the existing header wrap at enlarged text sizes. */
.site-header .header-inner { flex-wrap:wrap; }