/* Opening illustrations remain in the text flow. */
.intro-row { display: flow-root; margin: 1.4rem 0 1.9rem; }
.intro-row > p { margin: 0; }
.intro-row > .intro-figure { float: right; width: 18rem; margin: 0.2rem 0 0.85rem 1.6rem; }
.intro-row > .overview-a { width: 15rem; }
.intro-row > .overview-c { float: left; margin: 0.2rem 1.6rem 0.85rem 0; }
.intro-figure svg.overview-panel { display: block; width: 100%; height: auto; background: white; border-radius: 8px; }
.intro-figure figcaption, .workflow-example figcaption { margin-top: 0.65rem; font-size: 0.8rem; line-height: 1.5; }
.intro-row > .citation-notes { clear: both; margin-top: 0.7rem; }
.workflow-example { clear: both; width: 100%; margin: 1.8rem 0 2rem; scroll-margin-top: 7rem; }
.workflow { padding: 1rem 1.25rem 0.8rem; border: 1px solid var(--rule-soft); border-radius: 12px; background: white; }
.wf-header { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; }
.workflow-title { font-size: 1.05rem; font-weight: 600; line-height: 1.4; }
.workflow-hint { font-size: 0.74rem; color: var(--ink-soft); }
.wf-canvas { position: relative; height: 310px; margin: 0.5rem 0 0.4rem; isolation: isolate; }
.wf-connections { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: -1; }
.wf-route { stroke: #a9bbb2; stroke-width: 1.3; fill: none; }
.wf-route[data-route="solve-refine"], .wf-route[data-route="refine-critique"], .wf-route[data-route="critique-solve"] { stroke: #729b88; stroke-width: 1.6; }
.wf-route.is-active { stroke: var(--green-deep); stroke-width: 2.2; }
.wf-node { position: absolute; transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 104px; min-height: 60px; padding: 6px 4px; border: 1px solid transparent; border-radius: 9px; background: white; color: var(--green-deep); font: inherit; cursor: pointer; line-height: 1.25; }
.wf-node:hover { background: #f3f8f4; border-color: #d4e3d8; }
.wf-node.is-current, .wf-node[aria-expanded="true"] { background: #edf6ef; border-color: var(--green); }
.wf-node:focus-visible, .wf-toolbar button:focus-visible, .workflow-close:focus-visible { outline: 2px solid var(--blossom-deep); outline-offset: 3px; }
.wf-icon { display: block; width: 24px; height: 24px; flex-shrink: 0; }
.wf-node-label { font-size: 0.83rem; font-weight: 600; color: var(--ink); }
.wf-node-note { font-size: 0.68rem; color: var(--ink-soft); }
.wf-node-goal { left: 16%; top: 12%; }
.wf-node-propose { left: 50%; top: 12%; }
.wf-node-pool { left: 84%; top: 12%; }
.wf-node-solve { left: 77%; top: 47%; }
.wf-node-refine { left: 50%; top: 72%; }
.wf-node-critique { left: 23%; top: 47%; }
.wf-node-question { left: 50%; top: 47%; width: 140px; min-height: 65px; border-color: var(--rule-soft); background: #fafbfb; }
.wf-node-question .wf-node-label { font-size: 0.78rem; font-weight: 400; }
.wf-node-question .wf-icon { width: 20px; height: 20px; }
.wf-node-final { left: 38%; top: 91%; width: 128px; min-height: 46px; flex-direction: row; gap: 6px; }
.wf-node-expert { left: 78%; top: 91%; width: 120px; min-height: 46px; flex-direction: row; gap: 6px; }
.wf-node-final .wf-icon, .wf-node-expert .wf-icon { width: 21px; height: 21px; }
.wf-node-final .wf-node-label, .wf-node-expert .wf-node-label { font-size: 0.76rem; font-weight: 400; }
.wf-exit-label { position: absolute; left: 3%; top: 76%; font-size: 0.65rem; line-height: 1.3; color: var(--ink-soft); background: white; padding: 2px 4px; max-width: 4.5rem; }
.wf-toolbar { display: flex; justify-content: space-between; gap: 0.6rem; padding-top: 0.65rem; border-top: 1px solid var(--rule-soft); }
.wf-rounds, .wf-playback { display: flex; gap: 0.2rem; }
.wf-toolbar button { border: 1px solid transparent; border-radius: 6px; padding: 0.35rem 0.65rem; min-height: 32px; color: var(--ink-soft); background: none; font: inherit; font-size: 0.74rem; line-height: 1.35; white-space: nowrap; cursor: pointer; }
.wf-toolbar button:hover { background: #f0f5f1; color: var(--green-deep); }
.wf-mode[aria-pressed="true"] { color: var(--green-deep); background: #eaf3ec; border-color: #d4e3d8; }
.wf-toolbar .wf-play { color: var(--green-deep); border-color: var(--rule-soft); padding-inline: 0.75rem; }
.wf-play-symbol { display: inline-block; width: 0.8rem; font-size: 0.65rem; }
.wf-status { height: 3.55rem; padding-top: 0.5rem; font-size: 0.79rem; line-height: 1.45; color: var(--ink-soft); }
.wf-status-label { color: var(--green-deep); font-size: 0.69rem; display: block; }
.wf-status-text { display: block; }
/* Fixed overlays never change the figure or the surrounding article's height. */
.wf-popover { position: fixed; z-index: 2000; display: flex; flex-direction: column; width: min(24rem,calc(100vw - 2rem)); max-height: min(38rem,calc(100dvh - 2rem)); margin: 0; padding: 0; border: 1px solid #c6d9cd; border-radius: 12px; background: #fcfdfd; box-shadow: 0 14px 50px rgba(31,60,50,0.17), 0 2px 8px rgba(31,60,50,0.08); overflow: hidden; }
.wf-popover[hidden], .workflow-detail[hidden] { display: none; }
.wf-popover-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.65rem 1rem 0.4rem; flex-shrink: 0; }
.wf-popover-context { font: 0.64rem var(--mono); color: var(--ink-soft); }
.workflow-close { appearance: none; border: 0; border-radius: 4px; padding: 0.3rem 0.2rem; background: none; color: var(--ink-soft); font: inherit; font-size: 0.76rem; cursor: pointer; }
.workflow-close:hover { color: var(--green-deep); background: #edf4ed; }
.wf-popover-body { padding: 0.25rem 1rem 1.1rem; overflow-y: auto; overscroll-behavior: contain; }
.workflow-detail h4 { margin: 0 0 0.6rem; color: var(--green-deep); font-size: 1rem; line-height: 1.4; }
.post .workflow-detail p { font-size: 0.87rem; line-height: 1.6; margin: 0.7rem 0 0; hyphens: none; overflow-wrap: anywhere; }
.post .workflow-detail .wf-detail-note { font-size: 0.78rem; color: var(--ink-soft); }
.wf-evidence-graph { display: block; width: 100%; height: auto; margin: 0.5rem 0 0.8rem; }
.wf-graph-neutral { stroke: #99aaa0; fill: #99aaa0; }
.wf-graph-neutral[fill="none"] { fill: none; }
.wf-graph-signal { stroke: var(--green-deep); fill: var(--green-deep); }
.wf-graph-signal[fill="none"] { fill: none; }
.wf-graph-label { fill: var(--ink-soft); font: 22px var(--text); }
@media (max-width: 1279px) { .intro-row > .citation-notes { margin-bottom: 0; } }
@media (max-width: 679px) {
  .intro-row { display: flex; flex-direction: column; }
  .intro-row > p { order: 0; }
  .intro-row > .intro-figure { float: none; order: 1; width: 100%; max-width: 21rem; margin: 1.2rem auto 0; }
  .intro-row > .overview-a { max-width: 15rem; }
  .intro-row > .overview-c { max-width: 18rem; }
  .intro-row > .citation-notes { order: 2; margin-top: 0.85rem; }
  .workflow { padding: 0.8rem 0.6rem 0.7rem; }
  .workflow-hint { font-size: 0.68rem; }
  .workflow-title { font-size: 0.97rem; }
  .wf-node { width: 76px; min-height: 58px; padding: 4px 2px; }
  .wf-node-label { font-size: 0.75rem; }
  .wf-node-note { font-size: 0.65rem; }
  .wf-node-solve { left: 81%; }
  .wf-node-critique { left: 19%; }
  .wf-node-refine { top: 69%; }
  .wf-node-question { width: 92px; min-height: 61px; }
  .wf-node-question .wf-node-label { font-size: 0.7rem; }
  .wf-node-final { left: 40%; width: 87px; min-height: 48px; flex-direction: column; gap: 2px; }
  .wf-node-expert { left: 81%; width: 80px; min-height: 48px; flex-direction: column; gap: 2px; }
  .wf-node-final .wf-node-label, .wf-node-expert .wf-node-label { font-size: 0.68rem; }
  .wf-exit-label { left: 3%; top: 78%; max-width: 50px; font-size: 0.65rem; }
  .wf-toolbar { gap: 0.2rem; }
  .wf-toolbar button { min-height: 40px; padding: 0.3rem 0.45rem; font-size: 0.7rem; }
  .wf-toolbar .wf-play { padding-inline: 0.5rem; }
  .wf-status { height: 4.2rem; font-size: 0.77rem; }
  .wf-popover-context { font-size: 0.62rem; }
  .workflow-close { min-height: 40px; }
}
@media (max-width: 360px) {
  .wf-header { align-items: center; gap: 0.3rem; }
  .workflow-hint { max-width: 5.5rem; text-align: right; }
  .wf-node { width: 68px; }
  .wf-node-question { width: 82px; }
  .wf-node-final { width: 82px; }
  .wf-node-expert { width: 74px; }
  .wf-toolbar button { padding-inline: 0.3rem; }
  .wf-toolbar .wf-play { padding-inline: 0.35rem; }
  .wf-play-label { display: none; }
  .wf-toolbar .wf-play { min-width: 36px; }
  .wf-status { height: 4.75rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .wf-node { transition: background-color 140ms, border-color 140ms; }
  .wf-route { transition: stroke 140ms; }
}
@media print {
  .intro-row { display: flow-root; }
  .intro-row > .intro-figure, .workflow { break-inside: avoid; }
  .wf-toolbar, .workflow-hint, .wf-popover { display: none !important; }
}


/* A content walkthrough opens above the page; the workflow keeps its footprint. */
.wf-story { width: min(980px,calc(100vw - 3rem)); max-width: none; height: min(720px,calc(100dvh - 3rem)); max-height: none; padding: 0; border: 1px solid #c7d8cd; border-radius: 16px; color: var(--ink); background: #fff; box-shadow: 0 28px 90px #163e3438; overflow: hidden; }
.wf-story:not([open]) { display: none; }
.wf-story[open] { display: flex; flex-direction: column; }
.wf-story::backdrop { background: #1b302c75; backdrop-filter: blur(4px); }
.ws-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem 1.5rem 0.9rem; flex-shrink: 0; }
.ws-kicker { color: var(--ink-soft); font: 0.67rem var(--mono); }
.post .ws-dialog-title { border: 0; padding: 0; margin: 0.2rem 0 0; font-size: 1.2rem; line-height: 1.35; letter-spacing: -0.015em; }
.wf-story button { font-family: inherit; cursor: pointer; }
.wf-story button:focus-visible, .wf-story a:focus-visible, .wf-story summary:focus-visible { outline: 2px solid var(--blossom-deep); outline-offset: 3px; }
.ws-close { width: 38px; height: 38px; flex-shrink: 0; border: 1px solid var(--rule-soft); border-radius: 50%; color: var(--ink-soft); background: white; font-size: 1.4rem; line-height: 1; }
.ws-close:hover { background: #f0f5f1; color: var(--green-deep); }
.ws-chapters { display: flex; align-items: center; gap: 1rem; padding: 0.65rem 1.5rem 0.8rem; background: #f6f8f8; border-block: 1px solid #e5ece4; flex-shrink: 0; }
.ws-chapter { flex: 1; min-width: 0; }
.ws-chapter > span { display: block; font-size: 0.68rem; color: var(--ink-soft); margin-bottom: 0.3rem; }
.ws-chapter > div { display: flex; gap: 0.25rem; }
.ws-chapter button { flex: 1; min-width: 0; border: 1px solid transparent; border-radius: 5px; color: var(--ink-soft); background: none; padding: 0.3rem 0.25rem; font-size: 0.75rem; line-height: 1.4; }
.ws-chapter button:hover { background: #e8f0e8; }
.ws-chapter button[aria-current="step"] { background: white; color: var(--green-deep); border-color: #a7c8b1; box-shadow: 0 1px 3px #254f3c0a; }
.ws-loop-return { font-size: 1.6rem; color: #6d917d; }
.ws-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; flex: 1; padding: 1.5rem; }
.ws-scene { display: grid; grid-template-columns: 1.15fr 1fr; gap: 1.7rem; align-items: center; min-height: 100%; }
.ws-scene[hidden] { display: none; }
.ws-eyebrow { color: var(--green-deep); font: 0.68rem var(--mono); text-transform: uppercase; letter-spacing: 0.04em; }
.post .ws-scene-title { color: var(--ink); font-size: 1.45rem; line-height: 1.3; font-weight: 500; letter-spacing: -0.02em; margin: 0.45rem 0 1rem; }
.ws-question { border-left: 3px solid #c0cfc5; background: #f4f6f6; padding: 0.7rem 0.85rem; border-radius: 0 6px 6px 0; }
.ws-question-label { display: block; color: var(--ink-soft); font: 0.64rem var(--mono); line-height: 1.5; }
.post .ws-question p { font-size: 1.02rem; line-height: 1.5; margin: 0.4rem 0 0; hyphens: none; }
.post .ws-explanation { font-size: 0.87rem; line-height: 1.65; margin: 0.9rem 0 0; hyphens: none; }
.ws-finding { margin-top: 0.9rem; padding-top: 0.7rem; border-top: 1px solid #d8e6dc; }
.ws-finding > span { display: block; font-size: 0.69rem; font-weight: 600; color: var(--green-deep); }
.post .ws-finding p { font-size: 0.82rem; line-height: 1.6; margin: 0.25rem 0 0; hyphens: none; }
.ws-unresolved > span { color: #94652e; }
.ws-math { margin-top: 0.8rem; }
.ws-math summary { width: fit-content; font-size: 0.73rem; color: var(--green-deep); cursor: pointer; }
.post .ws-math p { font-size: 0.81rem; line-height: 1.65; margin: 0.65rem 0 0; overflow-wrap: anywhere; hyphens: none; }
.ws-visual { min-width: 0; align-self: center; }
.ws-illustration { width: 100%; height: auto; display: block; overflow: visible; }
.post .ws-visual-caption { margin: 0.7rem 0 0; font-size: 0.78rem; line-height: 1.5; text-align: center; color: var(--ink-soft); hyphens: none; }
.ws-edges { fill: none; stroke: #889c90; stroke-width: 2; }
.ws-dots { fill: #889c90; }
.ws-focus-large { fill: none; stroke: #6a927a; stroke-dasharray: 5 5; stroke-width: 1.5; }
.ws-small-components { color: #b7c1ba; fill: currentColor; }
.ws-triangle { stroke: currentColor; stroke-width: 2.5; fill: none; stroke-linejoin: round; }
.ws-svg-label { fill: #6a786f; font: 14px var(--text); text-anchor: middle; }
.ws-focus-shift { fill: none; stroke: #468264; stroke-width: 1.5; stroke-linecap: round; }
.ws-scene[data-kind="evidence"] .ws-large-component { opacity: 0.45; }
.ws-scene[data-kind="evidence"] .ws-focus-large { opacity: 0.25; }
.ws-scene[data-kind="evidence"] .ws-small-components, .ws-added-triangles { color: #2e7a52; fill: currentColor; }
.ws-scene[data-kind="evidence"] .ws-question { opacity: 0.72; }
.ws-scene[data-kind="revised"] .ws-question, .ws-scene[data-kind="return"] .ws-question, .ws-scene[data-kind="kept"] .ws-question { border-color: #4d9365; background: #eef6ef; }
.ws-scene[data-kind="revised"] .ws-question-label, .ws-scene[data-kind="kept"] .ws-question-label { color: #2e7a52; }
.ws-plus { fill: #879a8c; font: 30px var(--text); text-anchor: middle; }
.ws-model-arrow { fill: none; stroke: #9cb2a4; stroke-width: 1.5; }
.ws-model-target { fill: #f1f5f4; stroke: #cadbcd; }
.ws-target-label { fill: #3b664b; font: 14px var(--text); text-anchor: middle; }
.ws-pattern-known { fill: #f0f5f3; stroke: #d4e5d6; }
.ws-known-patterns { stroke: #5e8a68; stroke-width: 1.6; fill: none; }
.ws-known-patterns circle { fill: #5e8a68; }
.ws-check { stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ws-pattern-open { fill: #f1f5f4; stroke: #c9d6d2; }
.ws-dense-pattern { fill: none; stroke: #b38c53; stroke-width: 1.5; }
.ws-dense-pattern circle { fill: #b38c53; }
.ws-open-label { fill: #8d713f; font: 14px var(--text); text-anchor: middle; }
.ws-question-mark { fill: #b69460; font: 32px var(--text); }
.ws-footer { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.7rem 1.5rem; border-top: 1px solid #e5ece4; flex-shrink: 0; }
.ws-player { display: flex; gap: 0.4rem; align-items: center; }
.ws-player button { height: 36px; min-width: 36px; border: 1px solid #dce6dc; border-radius: 6px; background: white; color: var(--green-deep); font-size: 0.8rem; }
.ws-player .ws-play { min-width: 78px; background: #edf5ed; border-color: #c7dac9; }
.ws-player button:hover:not(:disabled) { background: #e1efdf; }
.ws-player button:disabled { opacity: 0.35; cursor: default; }
.ws-counter { font: 0.68rem var(--mono); color: var(--ink-soft); margin-left: 0.4rem; }
.ws-full-question { font-size: 0.74rem; white-space: nowrap; }
.ws-time-track { height: 2px; flex-shrink: 0; background: #edf2eb; }
.ws-time-track > div { height: 100%; background: #74a480; transform: scaleX(0); transform-origin: left; }
.post .ws-source-note { padding: 0.4rem 1.5rem 0.5rem; margin: 0; font-size: 0.62rem; color: #7c857e; line-height: 1.5; flex-shrink: 0; }
@media (max-width: 679px) {
  .wf-toolbar .wf-play { padding-inline: 0.4rem; }
  .wf-story { width: calc(100vw - 1rem); height: calc(100dvh - 1rem); border-radius: 12px; }
  .ws-header { padding: 0.8rem 0.9rem; gap: 0.6rem; }
  .post .ws-dialog-title { font-size: 1.03rem; }
  .ws-kicker { font-size: 0.61rem; }
  .ws-chapters { padding: 0.55rem 0.7rem; gap: 0.25rem; }
  .ws-chapter > span { font-size: 0.62rem; }
  .ws-chapter button { font-size: 0.67rem; min-height: 36px; padding-inline: 0.1rem; }
  .ws-loop-return { font-size: 1.2rem; }
  .ws-body { padding: 1rem 0.9rem; }
  .ws-scene { grid-template-columns: 1fr; gap: 1rem; min-height: 0; }
  .post .ws-scene-title { font-size: 1.25rem; margin-bottom: 0.7rem; }
  .post .ws-question p { font-size: 0.94rem; }
  .post .ws-explanation { font-size: 0.83rem; }
  .ws-visual { width: min(100%,300px); margin-inline: auto; }
  .ws-illustration { max-height: 165px; }
  .ws-scene[data-kind="evidence"] .ws-question, .ws-scene[data-kind="local"] .ws-question { display: none; }
  .post .ws-visual-caption { font-size: 0.72rem; margin-top: 0.3rem; }
  .ws-footer { padding: 0.6rem 0.75rem; gap: 0.4rem; }
  .ws-player { gap: 0.3rem; }
  .ws-player button { height: 40px; }
  .ws-player .ws-play { min-width: 65px; }
  .ws-counter { margin-left: 0.2rem; font-size: 0.62rem; }
  .ws-full-question { font-size: 0.67rem; }
  .post .ws-source-note { font-size: 0.58rem; padding-inline: 0.9rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .wf-story[open] { animation: ws-zoom 220ms ease-out; }
  .ws-scene:not([hidden]) .ws-copy { animation: ws-reveal 400ms ease-out; }
  .ws-scene:not([hidden]) .ws-visual { animation: ws-reveal 650ms ease-out; }
  .ws-scene[data-kind="evidence"]:not([hidden]) .ws-small-components { animation: ws-signal 1800ms ease-out; }
  .ws-scene[data-kind="revised"]:not([hidden]) .ws-added-triangles .ws-triangle { stroke-dasharray: 120; animation: ws-draw 1600ms ease-out; }
  .ws-scene[data-kind="revised"]:not([hidden]) .ws-question { animation: ws-rewrite 1000ms ease-out; }
  .ws-scene[data-kind="kept"]:not([hidden]) .ws-question { animation: ws-rewrite 1000ms ease-out; }
  @keyframes ws-zoom { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: scale(1); } }
  @keyframes ws-reveal { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
  @keyframes ws-signal { from { opacity: .2; } to { opacity: 1; } }
  @keyframes ws-draw { from { stroke-dashoffset: 120; } to { stroke-dashoffset: 0; } }
  @keyframes ws-rewrite { from { background: #d4ead8; } to { background: #eef6ef; } }
}
@media print { .wf-story { display: none !important; } }