/* One agenda moves through four states. Styles stay scoped to the animation. */
.workflow { border-bottom: var(--rule) solid var(--ink); background: linear-gradient(var(--ink), var(--ink)) var(--rail) 0 / var(--rule) 100% no-repeat, var(--paper); }
.workflow:not(.is-ready) { padding: 32px var(--pad); }
.workflow.is-ready { height: 350svh; position: relative; }
.workflow-sticky { position: sticky; top: 0; height: 100svh; min-height: 620px; align-items: center; }
.workflow-nav { grid-row: 1; display: flex; flex-direction: column; gap: 4px; }
.workflow-nav button { display: flex; align-items: baseline; gap: .35em; padding: 12px 0; border: 0; background: none; color: var(--muted); font: 500 1.75rem/1 var(--sans); letter-spacing: -.035em; text-align: left; cursor: pointer; }
.workflow-nav button > span { font: inherit; letter-spacing: inherit; }
.workflow-nav button[aria-current] { color: var(--ink); }
.workflow-nav button:hover { color: var(--red); }
.workflow-main { grid-row: 1; padding: 24px 0; min-width: 0; }
.workflow-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; font: .75rem var(--sans); }
.workflow-scene[hidden] { display: none; }
.workflow-caption { position: relative; z-index: 2; padding: 24px 0 0; min-height: 160px; pointer-events: none; }
.workflow-caption h2 { display: block; border: 0; padding: 0; margin: 0; font: 500 clamp(2.6rem, 4.2vw, 4.2rem)/.98 var(--sans); letter-spacing: -.045em; }
.workflow-caption > p { max-width: 52ch; margin: 16px 0 0; font: 400 1.05rem/1.4 var(--sans); color: var(--muted); }
.workflow-canvas { height: clamp(290px, 43svh, 390px); position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; }
.workflow-scene.is-active .workflow-canvas > * { animation: document-arrive .45s cubic-bezier(.2,.8,.2,1) both; }
@keyframes document-arrive { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.typed-prompt { width: min(100%, 570px); font: 500 clamp(1.3rem, 2vw, 1.8rem)/1.15 var(--sans); letter-spacing: -.025em; min-height: 4.6em; margin: 0; }
.typed-prompt::after { content: ''; border-right: 3px solid var(--ink); margin-left: 3px; animation: cursor-blink .7s steps(1) 6; }
.typed-prompt.is-typing::after { animation-iteration-count: infinite; }
@keyframes cursor-blink { 50% { opacity: 0; } }
.document-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; font: .8rem/1.3 var(--sans); font-weight: 500; }
.workflow-agenda { width: min(100%, 410px); padding: 22px; border: var(--line) solid var(--ink); background: var(--paper); }
.workflow-status { display: inline-flex; align-items: center; gap: 7px; padding: 5px 8px; border: 1px solid var(--ink); text-transform: none; white-space: nowrap; }
.workflow-status::before { content: ""; width: 6px; height: 6px; border: 1px solid currentColor; border-radius: 50%; }
.workflow-status[data-status="review"]::before { background: color-mix(in srgb, var(--ink) 30%, var(--paper)); }
.workflow-status[data-status="published"]::before { background: var(--ink); }
.workflow-status[data-status="verified"] { color: var(--paper); background: var(--ink); }
.workflow-status[data-status="verified"]::before { content: "✓"; width: auto; height: auto; border: 0; }
.workflow-canvas h3 { font: 500 clamp(1.9rem, 3vw, 2.7rem)/.96 var(--sans); letter-spacing: -.04em; margin: 22px 0 16px; }
.document-deck, .document-motivation { font: 1.15rem/1.25 var(--serif); margin: 0; }
.document-motivation { font-size: 1rem; }
.document-theorem { font: 1rem/1.3 var(--serif); margin: 0; }
.document-motivation .katex-display, .document-theorem .katex-display { margin: 14px 0 0; }
.document-rule { height: var(--line); background: var(--ink); margin: 18px 0; }
.workflow-bottom { border-top: var(--line) solid var(--ink); margin-top: 20px; padding-top: 12px; }
.workflow-progress { flex: 1; max-width: 160px; height: 5px; background: color-mix(in srgb, var(--ink) 15%, transparent); }
.workflow-progress > span { display: block; width: var(--workflow-progress, 20%); height: 100%; background: var(--red); transition: width .3s; }
.workflow-next { padding: 8px 0 8px 12px; border: 0; background: none; color: var(--ink); font: inherit; cursor: pointer; }
.workflow-next:hover { color: var(--red); }
@media (min-width: 961px) and (max-width: 1200px) {
  .workflow-sticky { column-gap: 38px; padding-right: 32px; }
  .workflow-caption h2 { font-size: 3.2rem; }
}
@media (max-width: 960px) {
  .workflow-sticky { align-content: center; }
  .workflow-nav { grid-row: 1; flex-direction: row; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
  .workflow-nav button { font-size: 1rem; gap: 8px; }
  .workflow-main { grid-row: 2; padding: 0; }
  .workflow-caption h2 { font-size: clamp(2.6rem, 5.8vw, 3.8rem); }
  .workflow-canvas { height: 340px; }
}
@media (max-width: 600px) {
  .workflow-sticky { padding-left: 24px; padding-right: 24px; }
  .workflow-nav { gap: 8px; margin-bottom: 16px; }
  .workflow-nav button { font-size: 0; gap: 0; }
  .workflow-nav button[aria-current] { font-size: 1rem; gap: 10px; }
  .workflow-nav button > span { font-size: 1rem; }
  .workflow-bottom { font-size: .85rem; }
  .workflow-caption { padding-top: 20px; min-height: 155px; }
  .workflow-caption > p { font-size: .95rem; margin-top: 12px; }
  .workflow-caption h2 { font-size: clamp(2.3rem, 8vw, 3rem); }
  .workflow-canvas { height: 300px; }
  .typed-prompt { font-size: 1.4rem; }
  .workflow-agenda { padding: 18px; }
  .document-label { font-size: .75rem; }
  .document-deck { font-size: 1.1rem; }
  .document-motivation { font-size: .95rem; }
  .workflow-progress { max-width: 80px; }
}
@media (max-height: 650px) {
  .workflow-sticky { top: calc(100svh - 650px); min-height: 650px; }
  .workflow-canvas { height: 290px; }
}
@media (prefers-reduced-motion: reduce) {
  .workflow *, .workflow *::after { animation: none !important; transition: none !important; }
}
@media print {
  .workflow.is-ready { height: auto; }
  .workflow-sticky { position: static; height: auto; display: block; }
  .workflow-nav, .workflow-bottom { display: none; }
  .workflow-scene[hidden] { display: block; }
  .workflow-scene { break-inside: avoid; }
}