/* PROTOTYPE ONLY — flowchart-centred skill page variants. Not production CSS. */
.proto-note{margin:0 0 18px;padding:10px 14px;border:1px dashed #a9215d;border-radius:8px;background:#fff6f9;font-size:12px;color:#655c67}
.proto-note b{color:#a9215d}
.proto-state{font-size:12px;color:#655c67;margin:6px 0 0}
/* switcher */
.proto-bar{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:10px;padding:8px 10px;background:#111;color:#fff;border-radius:999px;box-shadow:0 8px 24px #0006;font:600 13px/1 "Avenir Next","Trebuchet MS",sans-serif}
.proto-bar button{min-width:36px;height:36px;border:0;border-radius:50%;background:#333;color:#fff;font-size:18px;cursor:pointer}
.proto-bar button:hover{background:#555}
.proto-bar span{padding:0 6px;white-space:nowrap}
/* shared flow node styles */
.fl-node{border:1.5px solid #302839;border-radius:12px;background:#fffbf2;padding:12px 16px;text-align:center}
.fl-node b{display:block;font-size:14px}
.fl-node small{display:block;font-size:12px;color:#655c67;margin-top:2px}
.fl-node.mint{background:#d9ebe0}.fl-node.pink{background:#f5e5ec}.fl-node.wash{background:#f2ead6}.fl-node.lilac{background:#ece6f7}
.fl-arrow{text-align:center;color:#655c67;font-size:20px;line-height:1;margin:2px 0}
.fl-callout{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid #d8cfc0;border-radius:10px;background:#fffbf2;text-decoration:none;color:#302839}
.fl-callout img{width:28px;height:28px;flex:none}
.fl-callout em{display:block;font-style:normal;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#a9215d;font-weight:800}
.fl-callout strong{display:block;font-size:14px;line-height:1.35}
.fl-callout span{display:block;font-size:12px;color:#655c67}
.fl-callout:hover{background:#edf5ef}
/* ---- A: spine ---- */
.va-head{margin:0 0 6px;font:800 12px/1.4 "Avenir Next","Trebuchet MS",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#a9215d}
.va-title{margin:0 0 14px;font-size:22px}
.va{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px 26px;align-items:start}
.va-stage{display:contents}
.va-flow{display:grid;gap:6px}
.va-side{display:grid;gap:8px;padding-top:6px}
.va-side .fl-callout{border-left:5px solid #a9215d}
.va-branches{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.va-loop{border:2px dashed #b5a9ad;border-radius:14px;padding:12px;display:grid;gap:6px;position:relative}
.va-loop::before{content:"Repeat for a minimum of 3–4 cycles";position:absolute;top:-10px;left:14px;background:#fffbf2;padding:0 6px;font-size:11px;color:#655c67}
.va-outcomes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.va-all{margin-top:22px;border-top:1px solid #d8cfc0;padding-top:12px;font-size:13px;color:#655c67}
.va-all a{color:#a9215d;margin-right:14px}
@media(max-width:900px){.va{grid-template-columns:1fr}.va-branches,.va-outcomes{grid-template-columns:1fr}}
/* ---- B: stepper ---- */
.vb-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:0 0 16px}
.vb-steps button{display:grid;gap:4px;padding:12px 10px;border:1.5px solid #d8cfc0;border-radius:12px;background:#fffbf2;text-align:left;cursor:pointer;font:inherit;color:#302839;min-height:78px}
.vb-steps button i{font-style:normal;display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#302839;color:#fff;font-size:12px;font-weight:800}
.vb-steps button b{font-size:13px;line-height:1.3}
.vb-steps button[aria-current]{border-color:#302839;background:#d9ebe0;box-shadow:2px 3px 0 #30283925}
.vb-steps button.done i{background:#0f6e56}
.vb-panel{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:18px;border:1.5px solid #302839;border-radius:14px;background:#fffbf2;padding:20px 22px}
.vb-panel h3{margin:0 0 6px;font-size:20px}
.vb-panel p{margin:0 0 10px;font-size:14px;line-height:1.55}
.vb-panel ul{margin:0;padding-left:18px;font-size:14px;line-height:1.5}
.vb-panel .vb-res{display:grid;gap:8px;align-content:start}
.vb-res h4{margin:0 0 2px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#a9215d}
.vb-nav{display:flex;justify-content:space-between;margin-top:14px}
.vb-nav button{font:inherit;padding:10px 16px;border:1.5px solid #302839;border-radius:8px;background:#fffbf2;cursor:pointer}
.vb-nav button.primary{background:#a9215d;color:#fff;border-color:#a9215d}
.vb-progress{height:6px;background:#eee7d8;border-radius:3px;margin:0 0 14px;overflow:hidden}
.vb-progress i{display:block;height:100%;background:#a9215d}
@media(max-width:900px){.vb-steps{grid-template-columns:1fr 1fr}.vb-panel{grid-template-columns:1fr}}
/* ---- C: tiles + pathway strip ---- */
.vc-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 20px}
.vc-tile{display:block;position:relative;padding:16px 16px 14px;border:1.5px solid #302839;border-radius:14px;background:#fffbf2;text-decoration:none;color:#302839;box-shadow:2px 3px 0 #30283925;min-height:150px}
.vc-tile img{width:34px;height:34px;display:block;margin-bottom:8px}
.vc-tile b{display:block;font-size:15px;line-height:1.3}
.vc-tile q{display:block;font-style:italic;color:#a9215d;font-size:12px;margin:3px 0 6px;quotes:none}
.vc-tile span{display:block;font-size:12px;color:#655c67;line-height:1.45}
.vc-tile .vc-stage{position:absolute;top:12px;right:12px;font-size:10px;font-weight:800;letter-spacing:.06em;padding:3px 7px;border-radius:999px;background:#302839;color:#fff}
.vc-tile.start{background:#d9ebe0}
.vc-tile.dim{opacity:.35}
.vc-tile.lit{box-shadow:0 0 0 3px #a9215d,2px 3px 0 #30283925}
.vc-strip{border:1.5px solid #302839;border-radius:14px;background:#fffbf2;padding:14px 16px}
.vc-strip h3{margin:0 0 10px;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:#a9215d}
.vc-path{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.vc-path button{font:inherit;text-align:left;padding:10px;border:1px solid #d8cfc0;border-radius:10px;background:#fff;cursor:pointer;color:#302839;position:relative}
.vc-path button::after{content:"→";position:absolute;right:-13px;top:50%;transform:translateY(-50%);color:#655c67}
.vc-path button:last-child::after{content:""}
.vc-path button b{display:block;font-size:13px}
.vc-path button small{display:block;font-size:11px;color:#655c67}
.vc-path button[aria-pressed=true]{background:#d9ebe0;border-color:#302839}
.vc-hint{font-size:12px;color:#655c67;margin:10px 0 0}
@media(max-width:900px){.vc-tiles{grid-template-columns:1fr 1fr}.vc-path{grid-template-columns:1fr}.vc-path button::after{content:""}}
/* ---- A2: spine with resources per stage (Kelly, 2026-09-10) ---- */
.va2{display:grid;gap:0}
.va2-row{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:0 26px;align-items:start}
.va2-row>.va2-flow{display:grid;gap:6px}
.va2-row>.va2-res{display:grid;gap:8px;align-content:start;padding:4px 0 0}
.va2-res .fl-callout{border-left:5px solid #a9215d}
.va2-res .va2-none{font-size:12px;color:#655c67;padding:10px 12px;border:1px dashed #d8cfc0;border-radius:10px}
.va2-gap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:0 26px}
.va2-gap .fl-arrow{margin:4px 0}
.va2-stage{font:800 11px/1.4 "Avenir Next","Trebuchet MS",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#a9215d;margin:0 0 4px}
.va2-lead{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:0 26px;align-items:end;margin:0 0 14px}
.va2-lead .va-title{margin:0}
@media(max-width:900px){.va2-row,.va2-gap,.va2-lead{grid-template-columns:1fr}.va2-row>.va2-res{padding:8px 0 0 18px;border-left:3px solid #d9ebe0;margin:6px 0 4px}.va2-gap .fl-arrow:last-child{display:none}}