/* "The checklist says you're almost done". Page frame, steps and Back/Next come from the shuttle explainer's styles. */
.ck-figure{--ok:#2f6b4f}
.ck-figure .oc-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
.ck-figure .oc-stat b{font-size:34px}
.ck-figure .oc-stat.is-ok b{color:var(--ok)}
.ck-figure .oc-stat.is-bad b{color:var(--hit)}
.ck-figure.is-aido .oc-stat.is-bad b{color:var(--ink)}
.ck-when{font:600 11px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 -6px}
.ck-chart{position:relative;overflow:hidden}
.ck-chart svg{display:block;touch-action:pan-y}

.grid line{stroke:#ebe5db}
.grid text,.axis .tick{font:500 11px var(--sans);fill:var(--muted)}
.axis .base{stroke:var(--ink)}
.axis .ylabel{font:600 11px var(--sans);letter-spacing:.1em;text-transform:uppercase;fill:var(--muted)}
.line{fill:none;stroke-linejoin:round;stroke-linecap:round}
.line.checklist{stroke:var(--ok);stroke-width:2.5}
.line.real{stroke:var(--hit);stroke-width:3}
.is-aido .line.real{opacity:.18}
.gap{fill:var(--hit);opacity:.13;transition:opacity .6s}
.is-aido .gap{opacity:.05}
[data-step="3"] .line,[data-step="3"] .gap{opacity:.12;transition:opacity .6s}
[data-step="4"] .line.real,[data-step="4"] .gap{opacity:.2;transition:opacity .6s}
.line{transition:opacity .6s}

.ends text{font:600 13px var(--sans)}
.ends text.c{fill:var(--ok)}
.ends text.r{fill:var(--hit)}
.is-aido .ends text.r{fill:var(--ink)}
.moment{opacity:0;transition:opacity .5s}
.moment.is-on{opacity:1}
.moment line{stroke:var(--ink);stroke-width:1;stroke-dasharray:3 3}
.moment circle{fill:#fff;stroke-width:2}
.moment .tag.c circle{stroke:var(--ok)}
.moment .tag.r circle{stroke:var(--hit)}
.moment text{font:700 15px var(--sans);paint-order:stroke;stroke:var(--paper);stroke-width:5px;stroke-linejoin:round}
.moment .tag.c text{fill:var(--ok)}
.moment .tag.r text{fill:var(--hit)}
.is-aido .moment .tag.r text{fill:var(--ink)}
.moment .when{font:600 11px var(--sans);fill:var(--muted);paint-order:stroke;stroke:var(--paper);stroke-width:4px}

.rail{opacity:0;transition:opacity .5s}
.rail.is-on{opacity:1}
.rail circle{fill:var(--hit);stroke:var(--paper);stroke-width:2;cursor:pointer}
.rail text{font:700 10px var(--sans);fill:#fff;pointer-events:none}
.rail .lead{fill:none;stroke:var(--hit);stroke-width:1;stroke-dasharray:2 3;opacity:.6}
.rail-list{opacity:0;transition:opacity .5s;pointer-events:none}
.rail-list.is-on{opacity:1}
.rail-list text{font:500 13px var(--sans);fill:var(--ink);paint-order:stroke;stroke:var(--paper);stroke-width:5px;stroke-linejoin:round}
.rail-list .num{font-weight:700;fill:var(--hit)}
.rail-list .add{font-weight:700;fill:var(--hit)}
.rail-list.is-ask .lbl{font-weight:500}
.rail-list.is-ask .num{font-weight:700;fill:var(--ink)}
.is-aido .rail circle{fill:var(--ink)}
.is-aido .rail .lead{stroke:var(--ink)}
.ck-figure[data-step="5"] .rail,.ck-figure[data-step="6"] .rail{opacity:1}
.ck-figure[data-step="6"] .rail{opacity:.3}

.dot{cursor:pointer;transition:opacity .4s}
.dot circle{fill:var(--hit);stroke:var(--paper);stroke-width:1.2}
.dot use{color:#fff}
.dot.is-late circle{fill:#fff;stroke:var(--hit);stroke-width:1.8}
.dot.is-late use{color:var(--hit)}
.dot.is-focus circle{stroke:var(--ink);stroke-width:2.5}
.is-aido .dot circle{fill:var(--ink)}
.is-aido .dot.is-late circle{fill:var(--ink);stroke:var(--paper);stroke-width:1.2}
.is-aido .dot.is-late use{color:#fff}
.arcs path{fill:none;stroke:var(--hit);stroke-width:1.1;opacity:.42}
.arcs path.is-late{stroke-width:2;opacity:.8}

.ck-legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;color:var(--muted);margin:0}
.ck-legend span{display:inline-flex;align-items:center;gap:7px}
.ck-legend i{display:inline-block;width:20px;height:0;border-top:3px solid}
.ck-legend .lg-c{border-color:var(--ok)}
.ck-legend .lg-r{border-color:var(--hit)}
.ck-legend .lg-gap{height:10px;border:0;background:rgba(116,55,71,.18)}
.ck-legend .lg-dot{width:9px;height:9px;border:0;border-radius:50%;background:var(--hit)}
.oc-tip .late{display:block;color:var(--hit);font-weight:600}
.key-ok{font-family:var(--sans);font-weight:600;font-size:.92em;color:#2f6b4f}
.ck-num{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--hit);color:#fff;font:700 11px/1 var(--sans);transform:translateY(-2px)}
.oc-step>.ck-list,.oc-step>.ck-asks{padding:16px 20px}
.ck-list{margin:0;list-style:none;display:grid;gap:10px}
.ck-list li,.ck-asks li{display:grid;grid-template-columns:26px 1fr;align-items:baseline;font:300 17px/1.4 var(--serif)}
.ck-list .jump{display:grid;gap:2px}
.ck-list .box{font:600 14.5px/1.3 var(--sans);color:#2f6b4f}
.ck-list .fact{font:300 17px/1.35 var(--serif);color:var(--ink)}
.ck-list .work{font:600 13.5px/1.35 var(--sans);color:var(--hit)}
.ck-key{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:10px;font:600 12px var(--sans)}
.ck-key .box{color:#2f6b4f}.ck-key .work{color:var(--hit)}.ck-key .fact{color:var(--ink)}
.rail-list .head{font:600 11px var(--sans);letter-spacing:.06em;text-transform:uppercase}
.rail-list .box{fill:#2f6b4f;font-weight:600}
.rail-list .fact{fill:var(--ink)}
.rail-list .head .fact{fill:var(--muted)}
.oc-tip .tip-box{display:block;font:600 12px var(--sans);color:#2f6b4f;margin-bottom:2px}
.oc-tip .tip-add{display:block;color:var(--hit);font-weight:600;margin-top:4px}
@media (max-width:1100px),(orientation:portrait){
  .ck-figure .oc-stat b{font-size:24px}
  .ck-legend{font-size:11px;gap:2px 12px}
  .ck-legend .lg-dot-wrap{display:none}
  .moment text{font-size:13px}
}
@media (prefers-reduced-motion:reduce){.gap,.line,.moment,.rail,.rail-list,.dots circle{transition:none}}

.note text{font:700 17px var(--sans);fill:var(--ink);paint-order:stroke;stroke:var(--paper);stroke-width:5px;stroke-linejoin:round}
@media (max-width:620px){.note text{font-size:14px}}

.lg-types{display:none;flex-wrap:wrap;gap:4px 14px}
.ck-figure[data-step="3"] .lg-types,.ck-figure[data-step="4"] .lg-types,.ck-figure[data-step="5"] .lg-types,.ck-figure[data-step="6"] .lg-types{display:flex}
.ck-figure[data-step="3"] .lg-lines,.ck-figure[data-step="4"] .lg-lines,.ck-figure[data-step="5"] .lg-lines,.ck-figure[data-step="6"] .lg-lines{display:none}
.lg-lines{display:flex;flex-wrap:wrap;gap:6px 18px}
.lg-type svg{width:15px;height:15px;flex:none}
.lg-type circle,.oc-tip .kind circle{fill:var(--hit)}
.lg-type use,.oc-tip .kind use{color:#fff}
.is-aido .lg-type circle{fill:var(--ink)}
.oc-tip .kind{display:flex;align-items:center;gap:6px;font:600 11px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.oc-tip .kind svg{width:16px;height:16px}
.ck-asks{margin:0;list-style:none;display:grid;gap:10px}

.ck-asks .ck-num{background:var(--ink)}

/* Zoom into pile 1: goal → questions → decisions → the work left */
.ck-chart{position:relative}
.zoom{position:absolute;inset:0;z-index:4;opacity:0;transform:scale(.18);pointer-events:none;transition:opacity .45s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.zoom.is-on{opacity:1;transform:none;pointer-events:auto}
.zm-in{height:100%;overflow:auto;background:rgba(251,248,242,.97);border:1px solid var(--line);border-radius:10px;padding:16px 20px;box-shadow:0 18px 40px rgba(41,38,34,.10)}
.zm-crumb{display:flex;align-items:center;gap:8px;margin:0 0 10px;font:600 12px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.zm-num{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--ink);color:#fff;font:700 11px var(--sans);letter-spacing:0}
.zm-tag{display:block;font:700 11px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--hit)}
.zm-tag em{font-family:var(--sans);font-style:normal;font-weight:500;color:var(--muted);letter-spacing:.04em;text-transform:none}
.zm-goal{padding:12px 14px;border-radius:8px;background:#fff;border:1.5px solid var(--hit)}
.zm-goal p{margin:4px 0 0;font:400 22px/1.25 var(--serif);color:var(--ink)}
.zm-layer{margin:14px 0 6px}
.zm-l-w{display:none}
.zm-left{display:none;margin:10px 0 0;padding-top:8px;border-top:1px dashed var(--line)}
.zoom[data-layer="3"] .zm-left{display:block}
.zm-left .zm-tag{color:var(--ink)}
.zm-qs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.zm-q{background:#fff;border:1px solid var(--line);border-radius:8px;padding:10px 12px;opacity:0;transform:translateY(8px);transition:opacity .4s calc(var(--i) * 90ms),transform .4s calc(var(--i) * 90ms)}
.zm-question{margin:0;font:600 14.5px/1.3 var(--sans);color:var(--ink)}
.zm-question::before{content:"?";display:inline-grid;place-items:center;width:16px;height:16px;margin-right:6px;border-radius:50%;border:1.5px solid var(--hit);color:var(--hit);font:700 10px var(--sans);vertical-align:1px}
.zm-decision{margin:8px 0 0;padding-top:8px;border-top:1px dashed var(--line);font:400 14px/1.35 var(--serif);color:var(--ink);max-height:0;opacity:0;overflow:hidden;transition:max-height .5s calc(var(--i) * 110ms),opacity .4s calc(var(--i) * 110ms)}
.zm-decision .zm-tag{color:#2f6b4f;margin-bottom:2px}
.zm-work{list-style:none;margin:0;padding:0;display:grid;gap:6px;max-height:0;overflow:hidden;transition:max-height .6s}
.zm-work li{display:flex;gap:7px;align-items:flex-start;opacity:0;transform:translateX(-6px);transition:opacity .35s calc(var(--j) * 70ms + .2s),transform .35s calc(var(--j) * 70ms + .2s)}
.zm-work b{display:block;font:600 13px/1.3 var(--sans);color:var(--ink)}
.zm-work small{font:400 11.5px var(--sans);color:var(--muted)}
.zm-ic{width:18px;height:18px;flex:none;margin-top:1px}
.zm-ic circle{fill:var(--ink)}
.zm-ic use{color:#fff}
.zoom[data-layer="1"] .zm-q,.zoom[data-layer="2"] .zm-q,.zoom[data-layer="3"] .zm-q{opacity:1;transform:none}
.zoom[data-layer="2"] .zm-decision,.zoom[data-layer="3"] .zm-decision{max-height:90px;opacity:1}
.zoom[data-layer="3"] .zm-work{max-height:320px;margin-top:6px}
.zoom[data-layer="3"] .zm-work li{opacity:1;transform:none}
.zm-l-q{opacity:0;transition:opacity .4s}
.zoom[data-layer="1"] .zm-l-q,.zoom[data-layer="2"] .zm-l-q,.zoom[data-layer="3"] .zm-l-q{opacity:1}
.ck-figure[data-step="6"] .ck-chart>svg,.ck-figure[data-step="7"] .ck-chart>svg,.ck-figure[data-step="8"] .ck-chart>svg,.ck-figure[data-step="9"] .ck-chart>svg{opacity:.25}
.ck-chart>svg{transition:opacity .5s}
.rail-list .goal{font-weight:700;fill:var(--ink)}
.oc-tip .tip-goal{display:block;font:700 11px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--hit)}
@media (max-width:620px){
  .zm-in{padding:12px}
  .zm-goal p{font-size:18px}
  .zm-qs{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.zoom,.zm-q,.zm-decision,.zm-work,.zm-work li{transition:none}}