/* A&P pathway tracer (tools/pathways.js). Colors come from theme.css and the
   visual-language tokens in anp.css; nothing here picks its own color. */
#app.anp-app-mount{min-height:70vh;}
#app.anp-app-mount.is-ready{min-height:0;}
.pw{max-width:780px;margin:0 0 40px;}
.pw h2{font-size:21px;margin:26px 0 10px;}
.pw h3{font-size:17px;margin:22px 0 8px;}
.pw-lead{font-weight:600;line-height:1.65;margin:4px 0 6px;}
.pw-progress{margin:0 0 14px;}
.pw-error{font-weight:700;color:var(--bad-text, #B3261E);}

/* Chapter filter chips */
.pw-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 6px;}
.pw-chip{padding:7px 13px;border-radius:999px;border:2px solid var(--line);background:var(--white);color:var(--ink);font:800 13.5px var(--font-ui);cursor:pointer;}
.pw-chip:hover{border-color:var(--cink);}
.pw-chip[aria-pressed="true"]{background:var(--cink);border-color:var(--cink);color:var(--paper);}

/* Pathway cards */
.pw-cards{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));}
.pw-card{display:flex;flex-direction:column;gap:5px;height:100%;box-sizing:border-box;padding:14px 16px;border-radius:16px;background:var(--white);box-shadow:var(--lift-sm);color:var(--ink);text-decoration:none;}
.pw-card:hover .pw-card-title{text-decoration:underline;}
.pw-card-title{font:900 15.5px/1.35 var(--font-ui);}
.pw-card-meta{color:var(--muted);font:700 13px/1.4 var(--font-ui);}
.pw-dots{display:flex;gap:6px;margin-top:4px;}
.pw-dot{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;border:2px solid var(--line);font:900 12px var(--font-ui);box-sizing:border-box;}
.pw-dot.is-right{background:var(--good, #2F9E5B);border-color:var(--good, #2F9E5B);color:#fff;}
.pw-dot.is-missed{border-color:var(--bad, #B3261E);color:var(--bad-text, #B3261E);}

/* Pathway view */
.pw-back{margin:14px 0 0;font:800 14px var(--font-ui);}
.pw-back a{color:var(--cink);}
.pw-title{margin-top:10px !important;outline:none;}
.pw-meta{margin:0 0 8px;}
.pw-meta a{color:var(--cink);}
.pw-intro{font-weight:600;line-height:1.65;margin:0 0 14px;}
.pw-tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:2px solid var(--line);margin:0 0 14px;}
.pw-tab{padding:9px 14px;border:0;border-bottom:3px solid transparent;margin-bottom:-2px;background:none;color:var(--muted);font:800 14.5px var(--font-ui);cursor:pointer;border-radius:10px 10px 0 0;}
.pw-tab:hover{color:var(--ink);}
.pw-tab[aria-selected="true"]{color:var(--cink);border-bottom-color:var(--cink);background:var(--ctint);}
.pw-tick{color:var(--good-text, #1F6E3E);} .pw-miss{color:var(--bad-text, #B3261E);}
.pw-task{font-weight:700;margin:0 0 10px;line-height:1.55;}
.pw-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:14px 0 0;}
.pw-next{margin:26px 0 0;}
.pw-next .btn-outline{display:inline-block;max-width:100%;box-sizing:border-box;white-space:normal;text-align:left;}

/* Numbered steps */
.pw-n{flex:0 0 auto;display:inline-grid;place-items:center;min-width:26px;height:26px;border-radius:50%;background:var(--ctint);color:var(--cink);font:900 12.5px var(--font-ui);}
.pw-order li{align-items:flex-start;}
.pw-order .anp-order-text{font-weight:650;line-height:1.45;padding-top:2px;}
.pw-move{display:flex;flex-direction:column;gap:4px;flex:0 0 auto;}
.pw-order button{min-width:40px;min-height:36px;}
.pw-order button:disabled{opacity:.35;cursor:default;}
.pw-order button:focus-visible,.pw-pick:focus-visible,.pw-chip:focus-visible,.pw-tab:focus-visible{outline:3px solid var(--accent);outline-offset:2px;}
.pw-pos{display:block;margin-top:4px;font:900 12.5px var(--font-ui);}
.pw-pos.ok{color:var(--good-text, #1F6E3E);} .pw-pos.no{color:var(--bad-text, #B3261E);}

.pw-steps{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:7px;}
.pw-steps > li{display:flex;gap:10px;align-items:flex-start;padding:9px 12px;border-radius:12px;background:var(--white);box-shadow:var(--lift-sm);font-weight:650;line-height:1.45;}
.pw-steps > li > span:last-child{padding-top:2px;}
.pw-gap{border:2px dashed var(--cink);background:var(--ctint) !important;box-shadow:none !important;}
.pw-gap-text{font-weight:800;color:var(--cink);}
.pw-gap.is-right,.pw-gap.is-filled{border-style:solid;}
.pw-gap.is-right{border-color:var(--good, #2F9E5B);}
.pw-gap.is-filled .pw-gap-text,.pw-gap.is-right .pw-gap-text{color:var(--ink);font-weight:650;}

/* Spot the error: every step is a toggle */
.pw-pickable > li{padding:0;background:none;box-shadow:none;}
.pw-pick{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;padding:10px 12px;border-radius:12px;border:2px solid var(--line);background:var(--white);color:var(--ink);font:650 15px/1.45 var(--font-ui);cursor:pointer;}
.pw-pick:hover:not(:disabled){border-color:var(--cink);}
.pw-pick[aria-pressed="true"]{border-color:var(--cink);background:var(--ctint);}
.pw-pick:disabled{cursor:default;}
.pw-pick.is-right{border-color:var(--good, #2F9E5B);background:var(--good-tint, rgba(27,123,91,0.1));}
.pw-pick.is-wrong{border-color:var(--bad, #B3261E);background:var(--bad-tint, rgba(179,38,30,0.08));}
.pw-pick.is-answer{border-color:var(--good, #2F9E5B);border-style:dashed;}
.pw-pick s{color:var(--muted);}
.pw-fix{display:block;margin-top:5px;color:var(--good-text, #1F6E3E);}

/* Result */
.pw-result{margin-top:14px;line-height:1.6;font-weight:600;outline:none;}
.pw-verdict b{font-weight:900;}
.pw-verdict.ok b{color:var(--good-text, #1F6E3E);} .pw-verdict.no b{color:var(--bad-text, #B3261E);}
.pw-summary{background:var(--ctint);border-radius:14px;padding:12px 16px;}
.pw-fig{margin:6px 0 0;max-width:560px;}
.pw-svg{display:block;width:100%;height:auto;}
.pw-fig .pw-box{stroke-width:2;transition:stroke-width .2s, opacity .25s;}
.pw-fig .pw-box.pw-marked{stroke-dasharray:6 4;stroke-width:3;}
.pw-fig .pw-num-bg{fill:var(--cink);}
.pw-fig .pw-num{fill:var(--paper);font:900 11.5px var(--font-ui);}
.pw-fig .pw-lbl{fill:var(--ink);font:800 12.5px var(--font-ui);}
.pw-fig .pw-node{transition:opacity .25s;}
.pw-fig .pw-node.is-dim,.pw-fig .pw-arrows path.is-dim{opacity:.25;}
.pw-fig .pw-arrows path{transition:opacity .25s;}
.pw-fig .pw-node.is-cur .pw-box{stroke-width:5;stroke:var(--cink);}
.pw-player{display:flex;gap:8px;align-items:center;margin:10px 0 0;}
.pw-player .btn-outline{min-width:46px;padding-left:12px;padding-right:12px;}
.pw-caption{min-height:4.8em;margin:10px 0 0;line-height:1.55;}
.pw-cap-why{display:block;color:var(--muted);font-weight:600;margin-top:3px;}
.pw-whys{margin:12px 0 0;}
.pw-whys summary{cursor:pointer;font-weight:800;color:var(--cink);}
.pw-whys ol{padding-left:22px;}
.pw-whys li{margin:8px 0;}
.pw-whys li span{display:block;color:var(--muted);font-weight:600;}

@media (max-width:560px){
  .pw-steps > li,.pw-pick{font-size:14.5px;}
  .pw-tab{padding:8px 10px;font-size:13.5px;}
}
@media (prefers-reduced-motion:reduce){
  .pw-fig .pw-box,.pw-fig .pw-node,.pw-fig .pw-arrows path{transition:none;}
}