/* A&P graph reader (tools/graphs.js). The page shell rules (chips, cards,
   header) match tools/pathways.css so the two tools look the same. 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;}


.pw-result,.gr-feedback{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);}

/* Layout: graph and question side by side when there is room */
.gr-view{max-width:1040px;}
.gr-layout{display:grid;gap:18px;grid-template-columns:minmax(0,1fr);}
@media (min-width:900px){
  .gr-layout{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start;}
  .gr-figcol{position:sticky;top:12px;}
}
.gr-fig{margin:0;background:var(--white);border-radius:16px;box-shadow:var(--lift-sm);padding:10px 6px 4px;}
.gr-svg{display:block;width:100%;height:auto;overflow:visible;}
.gr-tools{margin:10px 0 0;}
.gr-toggle[aria-pressed="true"]{background:var(--ctint);color:var(--cink);}

/* Chart vocabulary. Line colors come from the visual-language classes in
   anp.css (o2, lo, hi, symp, para, accent, shape); these rules set weight,
   dashes and text. */
.gr-fig .gr-grid{stroke:var(--line);stroke-width:1;}
.gr-fig .gr-grid-major{stroke:var(--line);stroke-width:1.8;}
.gr-fig .gr-axis{stroke:var(--muted);stroke-width:1.4;}
.gr-fig .gr-tick{fill:var(--muted);font:700 11.5px var(--font-ui);}
.gr-fig .gr-axis-title{fill:var(--ink);font:800 12.5px var(--font-ui);}
.gr-fig .gr-line{stroke-width:2.6;fill:none;stroke-linejoin:round;stroke-linecap:round;}
.gr-fig .gr-dash{stroke-dasharray:7 5;}
.gr-fig .gr-hline{stroke-width:1.8;}
.gr-fig .gr-hline.gr-faint{stroke:var(--muted);stroke-width:1;opacity:.6;}
.gr-fig .gr-burst{stroke-width:1.6;}
.gr-fig .gr-lbl{font:800 12px var(--font-ui);paint-order:stroke;stroke:var(--white);stroke-width:4px;stroke-linejoin:round;}
.gr-fig .gr-note{fill:var(--muted);font:800 11.5px var(--font-ui);paint-order:stroke;stroke:var(--white);stroke-width:4px;stroke-linejoin:round;}
.gr-fig .gr-c-o2{fill:var(--anp-o2);} .gr-fig .gr-c-deo2{fill:var(--anp-deo2);}
.gr-fig .gr-c-hi{fill:var(--anp-hi);} .gr-fig .gr-c-lo{fill:var(--anp-lo);}
.gr-fig .gr-c-symp{fill:var(--anp-symp);} .gr-fig .gr-c-para{fill:var(--anp-para);}
.gr-fig .gr-c-aff{fill:var(--anp-aff);} .gr-fig .gr-c-eff{fill:var(--anp-eff);}
.gr-fig .gr-c-accent{fill:var(--cink);} .gr-fig .gr-c-shape{fill:var(--anp-shape);} .gr-fig .gr-c-memb{fill:var(--anp-memb);}
.gr-fig .gr-band{fill:var(--anp-lo-fill);opacity:.55;}
.gr-fig .gr-region-show{fill:var(--anp-lo-fill);opacity:.8;}
.gr-fig .gr-region-all{fill:var(--anp-lo-fill);opacity:.55;stroke:var(--anp-lo);stroke-width:1;stroke-dasharray:3 3;}
.gr-fig .gr-region-all.alt{fill:var(--anp-aff-fill);stroke:var(--anp-aff);}
.gr-fig .gr-region-hl{fill:var(--ctint);stroke:var(--cink);stroke-width:1.5;stroke-dasharray:4 3;opacity:.9;}
.gr-fig .gr-rlabel{fill:var(--cink);font:900 11.5px var(--font-ui);paint-order:stroke;stroke:var(--white);stroke-width:4px;stroke-linejoin:round;}
.gr-fig .gr-vline{stroke:var(--muted);stroke-width:1.2;stroke-dasharray:3 4;}
.gr-fig .gr-vlabel{fill:var(--muted);font:800 10.5px var(--font-ui);paint-order:stroke;stroke:var(--white);stroke-width:3px;}
.gr-fig .gr-mark{fill:var(--white);stroke:var(--cink);stroke-width:2.5;}
.gr-fig .gr-qmark{fill:var(--cink);stroke:var(--white);stroke-width:2;}
.gr-fig .gr-guide{fill:none;stroke:var(--cink);stroke-width:1.6;stroke-dasharray:4 4;}
.gr-fig .gr-path-hl{fill:none;stroke:var(--cink);stroke-width:7;stroke-linecap:round;opacity:.45;}

/* Questions */
.gr-qnav{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px;}
.gr-qbtn{min-width:38px;height:38px;border-radius:12px;border:2px solid var(--line);background:var(--white);color:var(--ink);font:900 14px var(--font-ui);cursor:pointer;}
.gr-qbtn:hover{border-color:var(--cink);}
.gr-qbtn[aria-current="step"]{border-color:var(--cink);background:var(--ctint);color:var(--cink);}
.gr-qbtn.is-right{box-shadow:inset 0 -4px 0 var(--good, #2F9E5B);}
.gr-qbtn.is-missed{box-shadow:inset 0 -4px 0 var(--bad, #B3261E);}
.gr-qbtn:focus-visible,.gr-input:focus-visible{outline:3px solid var(--accent);outline-offset:2px;}
.gr-q{background:var(--white);border-radius:16px;box-shadow:var(--lift-sm);padding:16px 18px;min-height:220px;}
.gr-kind{margin:0 0 6px;font:900 11.5px var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--cink);}
.gr-stem{font-weight:750;line-height:1.55;margin:0 0 12px;outline:none;}
.gr-value{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.gr-input{width:9em;max-width:100%;padding:10px 12px;border-radius:12px;border:2px solid var(--line);background:var(--paper);color:var(--ink);font:800 16px var(--font-ui);}
.gr-input.is-right{border-color:var(--good, #2F9E5B);} .gr-input.is-wrong{border-color:var(--bad, #B3261E);}
.gr-unit{font:800 14.5px var(--font-ui);color:var(--muted);margin-right:4px;}
.gr-hint{margin:6px 0 0;min-height:1.2em;}
.gr-feedback{margin-top:12px;}
.gr-feedback p{margin:6px 0;}
@media (max-width:560px){
  .gr-q{padding:14px 14px;}
  .gr-fig{padding:6px 2px 2px;border-radius:12px;}
}