/* Three short steps through one goals tracker. The practice app and Vinci
   share the existing Academy paper, code, focus and touch vocabulary. */
.anatomy-page .steps-lesson{max-width:1000px}
.anatomy-rail{position:sticky;top:84px;font-size:13px;color:var(--fs-label)}
.anatomy-rail>p{margin:0 0 12px;font:500 11px/1.4 var(--fs-mono);letter-spacing:.1em;text-transform:uppercase}
.anatomy-rail ol{list-style:none;margin:0;padding:0}
.anatomy-rail li{margin:0 0 8px}
.anatomy-rail li a{display:flex;align-items:center;gap:10px;min-height:44px;padding:4px 8px;border-radius:10px;line-height:1.3}
.anatomy-rail li a:hover,.anatomy-rail li a[aria-current]{background:var(--fs-warm);color:var(--fs-ink)}
.anatomy-rail li a span{flex:none;display:grid;place-items:center;width:25px;height:25px;border:1px solid var(--fs-line);border-radius:50%;background:var(--fs-card);font:600 11px var(--fs-mono)}
.anatomy-rail li a[aria-current] span{background:var(--fs-gold);border-color:var(--fs-gold-edge)}
.anatomy-rail li a[data-done] span{color:var(--fs-brown);background:var(--fs-gold-soft)}
.anatomy-rail-course{display:inline-flex;align-items:center;min-height:44px;margin:12px 0 0 8px;text-decoration:underline!important;text-underline-offset:4px}
.anatomy-page .steps-head{margin-bottom:18px}
.anatomy-page .steps-learn{max-width:64ch}
.anatomy-roles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 14px}
.anatomy-roles>div{display:flex;flex-direction:column;gap:3px;min-width:0;padding:13px 14px;border:1px solid var(--fs-line);border-radius:12px;background:var(--fs-card)}
.anatomy-roles strong{font-size:14px;line-height:1.3}
.anatomy-roles span{font-size:12px;line-height:1.4;color:var(--fs-quiet)}
.anatomy-honesty{max-width:75ch;margin:0 0 20px;color:var(--fs-ink-2);font-size:13px;line-height:1.5}
.anatomy-honesty strong{color:var(--fs-brown)}
.anatomy-task{padding:4px 0 4px 16px;border-left:3px solid var(--fs-gold)}
.anatomy-task h2{margin:0 0 2px;font:600 11px var(--fs-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fs-brown)}
.anatomy-task p{margin:0;font-size:17px;line-height:1.45}
.anatomy-task .anatomy-task-note{margin-top:7px;color:var(--fs-quiet);font-size:13px;line-height:1.5}
.anatomy-workspace{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:start;margin:22px 0 24px}
.anatomy-app,.anatomy-code,.anatomy-check{min-width:0;box-sizing:border-box;border:1px solid var(--fs-line);border-radius:16px;background:var(--fs-card);box-shadow:var(--fs-shadow)}
.anatomy-app{padding:18px}
.anatomy-app-bar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:9px;padding-bottom:15px;border-bottom:1px solid var(--fs-line)}
.anatomy-app-bar>span{width:9px;height:9px;border-radius:50%;background:var(--fs-gold)}
.anatomy-app h2,.anatomy-code h2,.anatomy-check h2{margin:0;font-size:19px;font-weight:600;letter-spacing:-.02em;line-height:1.25}
.anatomy-app-bar small{font:11px var(--fs-mono);color:var(--fs-label)}
.anatomy-app form{margin:18px 0 0}
.anatomy-app label{display:block;margin:0 0 7px;font-size:13px;font-weight:600}
.anatomy-form-row{display:flex;align-items:stretch;gap:8px}
.anatomy-form-row input{flex:1;min-width:0;min-height:44px;box-sizing:border-box;padding:10px 12px;border:1px solid #9c8456;border-radius:9px;background:#fff;color:var(--fs-ink);font:15px var(--fs-ui)}
.anatomy-form-row input[aria-invalid="true"]{border-color:var(--fs-wrong)}
.anatomy-form-row button,.anatomy-reopen,.anatomy-check-button{min-height:44px;padding:8px 16px;border:1px solid var(--fs-gold-edge);border-radius:999px;background:var(--fs-gold);color:var(--fs-gold-ink);font:600 14px var(--fs-ui);cursor:pointer}
.anatomy-form-row button:disabled,.anatomy-check-button:disabled{opacity:.55;cursor:default}
.anatomy-status{min-height:24px;margin:9px 0 16px;font-size:13px;line-height:1.45;color:var(--fs-brown)}
.anatomy-status[data-tone="error"]{color:var(--fs-wrong)}
.anatomy-app h3{margin:0 0 8px;font-size:14px;font-weight:600}
.anatomy-app h3 span{font-weight:400;color:var(--fs-quiet)}
.anatomy-goals{display:flex;flex-direction:column;gap:7px;min-height:50px;margin:0;padding:0;list-style:none}
.anatomy-goals li{overflow-wrap:anywhere;padding:9px 11px;border:1px solid var(--fs-line);border-radius:9px;background:var(--fs-warm);font-size:14px}
.anatomy-goals li.anatomy-empty{border-style:solid;background:transparent;color:var(--fs-quiet)}
.anatomy-reopen{margin-top:16px;background:var(--fs-card);border-color:var(--fs-line)}
.anatomy-reopen-note,.anatomy-storage-note{margin:8px 0 0;font-size:13px;line-height:1.5;color:var(--fs-brown)}
.anatomy-vinci{min-width:0;box-sizing:border-box;margin:0 0 22px;padding:18px;border:1px solid var(--fs-line);border-radius:16px;background:var(--fs-card);box-shadow:var(--fs-shadow)}
.anatomy-vinci h2{margin:0;font-size:19px;font-weight:600;letter-spacing:-.02em;line-height:1.25}
.anatomy-run-status{margin:6px 0 14px;font-size:13px;line-height:1.5;color:var(--fs-quiet)}
/* The one Vinci bar sits above this box; the app view (sol/vinci-app-view.mjs)
   fills it and owns its native responsive columns and scrolling. */
/* The drawing's own height as before, plus the one narrative block the app view now draws above it. */
.anatomy-canvas{--anatomy-narrative:126px;min-width:0;width:100%;box-sizing:border-box;isolation:isolate;margin-top:10px;height:min(calc(clamp(540px,82vh,880px) + var(--anatomy-narrative)),calc(100vh - 96px));overflow-x:auto;overflow-y:hidden}
/* A phone's page scrolls: the lanes keep the height the native stages need, the drawing may be taller than the window. */
@media(max-width:760px){.anatomy-canvas{--anatomy-narrative:178px;height:calc(clamp(540px,82vh,880px) + var(--anatomy-narrative))}}
.anatomy-app-view{position:relative;box-sizing:border-box;height:100%;min-width:0}
.anatomy-code{padding:18px;margin-bottom:22px}
.anatomy-code-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.anatomy-code-head p,.anatomy-code>p{margin:4px 0 0;font-size:13px;color:var(--fs-quiet);line-height:1.5}
.anatomy-code pre{margin:14px 0 12px;padding:14px 12px;border:1px solid var(--fs-line);border-radius:11px;background:#fffaf0;overflow-x:auto;white-space:pre-wrap;overflow-wrap:anywhere;font:12.5px/1.6 var(--fs-mono);color:#493b2b;font-variant-ligatures:none}
.anatomy-code pre code{display:block;padding:0;background:transparent;color:inherit;font:inherit;white-space:inherit}
.anatomy-code-line{display:block;min-height:1.6em;margin:0 -4px;padding:0 4px;border-radius:4px}
.anatomy-line-number{display:inline-block;width:28px;margin-right:8px;color:#9d8863;user-select:none}
.anatomy-check{padding:18px;margin-bottom:18px}
.anatomy-check-gate{margin:6px 0 14px;color:var(--fs-quiet);font-size:13px}
.anatomy-check fieldset{margin:0;padding:0;border:0}
.anatomy-check legend{margin:0 0 10px;font-size:15px;font-weight:600}
.anatomy-check label{display:flex;align-items:center;gap:10px;min-height:44px;margin:3px 0;padding:6px 9px;border:1px solid var(--fs-line);border-radius:9px;cursor:pointer}
.anatomy-check input{flex:none;accent-color:var(--fs-brown);width:18px;height:18px}
.anatomy-check-button{margin-top:10px}
.anatomy-check-feedback{min-height:22px;margin:9px 0 0;color:var(--fs-brown);font-size:13px;line-height:1.5}
.anatomy-page .steps-forward{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.anatomy-save-status{font-size:12px;color:var(--fs-quiet)}
@media(max-width:1023px){.anatomy-rail{display:flex;position:static;align-items:center;gap:10px;overflow-x:auto;margin:-8px 0 24px}.anatomy-rail>p,.anatomy-rail-course{display:none}.anatomy-rail ol{display:flex;gap:6px}.anatomy-rail li{flex:none;margin:0}.anatomy-rail li a{max-width:170px}}
@media(max-width:700px){.anatomy-roles{grid-template-columns:1fr}.anatomy-roles>div{padding:10px 12px}.anatomy-workspace{grid-template-columns:minmax(0,1fr);gap:14px}.anatomy-app,.anatomy-vinci,.anatomy-code,.anatomy-check{padding:15px}.anatomy-form-row{flex-wrap:wrap}.anatomy-form-row input,.anatomy-form-row button{flex:1 1 100%;width:100%}.anatomy-page .steps-head h1{font-size:28px}.anatomy-code pre{font-size:11.5px}.anatomy-code-head{display:block}}
@media(prefers-reduced-motion:reduce){.anatomy-page *{scroll-behavior:auto!important}}