/* BioBuilder Pathway Finder — scoped styles. Every rule is nested under
   .btb-pathway-finder so it cannot leak into (or be overridden by) the
   surrounding WordPress theme. Palette/type matched to biobuilder.org
   (Proxima Nova stack, #0E65E4 blue, white cards, asymmetric rounded
   buttons) so the widget reads as part of the page, not an embedded app. */

.btb-pathway-finder{
  --btbpf-ink:#111111;
  --btbpf-paper:#FFFFFF;
  --btbpf-paper-2:#F4F6F9;
  --btbpf-deep:#0E65E4;
  --btbpf-green:#6CC065;
  --btbpf-green-soft:#EAF6E8;
  --btbpf-amber:#00AEEF;
  --btbpf-line:#D7DBE2;
  --btbpf-line-soft:#E6E9EE;
  --btbpf-white:#FFFFFF;
  --btbpf-shadow: 0 2px 10px rgba(17,17,17,0.06);
  --btbpf-radius: 0 16px 16px 16px;
  --btbpf-radius-sm: 0 10px 10px 10px;

  background:transparent;
  color:var(--btbpf-ink);
  font-family:'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  max-width:1200px;
  margin:0 auto;
  padding:0;
  scroll-margin-top:100px;
}
.btb-pathway-finder, .btb-pathway-finder *{box-sizing:border-box;}
.btb-pathway-finder p, .btb-pathway-finder h1, .btb-pathway-finder h2, .btb-pathway-finder h3, .btb-pathway-finder h4, .btb-pathway-finder ul{margin:0;}

/* Question / result / support / final screens read better as a single
   centered column; only the intro pathway grid uses the full width. */
.btb-pathway-finder .btb-narrow{max-width:720px;margin:0 auto;}

.btb-pathway-finder .intro-head{margin-bottom:22px;}
.btb-pathway-finder .intro-title{font-size:32px;margin-top:12px;}
.btb-pathway-finder .intro-sub{font-size:15.5px;max-width:62ch;}

/* ---------- Cladogram progress ---------- */
.btb-pathway-finder .key-track{
  position:relative;
  margin:0 0 22px;
  padding:14px 4px 6px;
}
.btb-pathway-finder .key-track svg{display:block;width:100%;height:auto;}
.btb-pathway-finder .key-track .branch-path{
  fill:none;
  stroke:var(--btbpf-line);
  stroke-width:2;
  transition:stroke 0.4s ease;
}
.btb-pathway-finder .key-track .branch-path.active{stroke:var(--btbpf-deep);}
.btb-pathway-finder .key-track .branch-path.faded{stroke:var(--btbpf-line-soft);}
.btb-pathway-finder .node-label{
  font-family:inherit;
  font-size:11px;
  font-weight:600;
  fill:var(--btbpf-ink);
  opacity:0.55;
}
.btb-pathway-finder .node-label.result{
  font-weight:700;
  fill:var(--btbpf-deep);
  opacity:1;
}
.btb-pathway-finder .node-dot{fill:var(--btbpf-paper);stroke:var(--btbpf-line);stroke-width:2;}
.btb-pathway-finder .node-dot.active{stroke:var(--btbpf-deep);fill:var(--btbpf-deep);}
.btb-pathway-finder .node-dot.current{stroke:var(--btbpf-amber);fill:var(--btbpf-amber);}

/* ---------- Card ---------- */
.btb-pathway-finder .stage{
  background:var(--btbpf-white);
  border:1px solid var(--btbpf-line-soft);
  border-radius:var(--btbpf-radius);
  box-shadow: var(--btbpf-shadow);
  overflow:hidden;
}
.btb-pathway-finder .stage-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:22px 24px 0;
}
.btb-pathway-finder .step-tag{
  font-family:inherit;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--btbpf-deep);
}
.btb-pathway-finder .stage-rule{
  height:1px;
  background:var(--btbpf-line-soft);
  margin:16px 24px 0;
}
.btb-pathway-finder .stage-body{padding:20px 24px 26px;}

.btb-pathway-finder .q-title{
  font-family:inherit;
  font-weight:700;
  font-size:24px;
  line-height:1.3;
  margin:6px 0 8px;
}
.btb-pathway-finder .q-sub{
  font-size:14.5px;
  color:var(--btbpf-ink);
  opacity:0.68;
  line-height:1.5;
  margin:0 0 20px;
  max-width:54ch;
}

.btb-pathway-finder .options{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.btb-pathway-finder .option{
  display:flex;
  align-items:flex-start;
  gap:14px;
  text-align:left;
  width:100%;
  background:var(--btbpf-paper-2);
  border:1.5px solid var(--btbpf-line-soft);
  border-radius:var(--btbpf-radius-sm);
  padding:14px 16px;
  cursor:pointer;
  font-family:inherit;
  transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
.btb-pathway-finder .option:hover{
  border-color:var(--btbpf-deep);
  background:#EAF1FD;
}
.btb-pathway-finder .option:active{transform:translateY(1px);}
.btb-pathway-finder .option .opt-letter{
  font-family:inherit;
  font-size:12px;
  font-weight:700;
  color:var(--btbpf-white);
  background:var(--btbpf-ink);
  border-radius:50%;
  width:22px;height:22px;
  min-width:22px;
  display:flex;align-items:center;justify-content:center;
  margin-top:1px;
}
.btb-pathway-finder .option:hover .opt-letter{background:var(--btbpf-deep);}
.btb-pathway-finder .opt-text{display:flex;flex-direction:column;gap:2px;}
.btb-pathway-finder .opt-main{font-weight:600;font-size:15px;}
.btb-pathway-finder .opt-detail{font-size:13px;opacity:0.65;line-height:1.4;}

.btb-pathway-finder .multi-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:18px;
}
.btb-pathway-finder .btn-next{
  font-family:inherit;
  font-size:14px;
  font-weight:600;
  letter-spacing:0;
  background:var(--btbpf-deep);
  color:var(--btbpf-white);
  border:none;
  padding:12px 20px;
  border-radius:var(--btbpf-radius-sm);
  cursor:pointer;
  display:flex;align-items:center;gap:6px;
}
.btb-pathway-finder .btn-next:disabled{opacity:0.35;cursor:not-allowed;}
.btb-pathway-finder .btn-next:not(:disabled):hover{background:#0B52BC;}

/* ---------- Model select (intro) ---------- */
.btb-pathway-finder .model-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
  margin-bottom:24px;
}
@media (max-width:900px){
  .btb-pathway-finder .model-grid{grid-template-columns:repeat(2, 1fr);}
}
@media (max-width:600px){
  .btb-pathway-finder .model-grid{grid-template-columns:1fr;}
}
.btb-pathway-finder .model-card{
  display:flex;
  flex-direction:column;
  text-align:left;
  width:100%;
  background:var(--btbpf-paper-2);
  border:1.5px solid var(--btbpf-line-soft);
  border-radius:var(--btbpf-radius-sm);
  padding:0;
  cursor:pointer;
  font-family:inherit;
  overflow:hidden;
  transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
.btb-pathway-finder .model-card:hover{
  border-color:var(--btbpf-deep);
  background:#EAF1FD;
  transform:translateY(-1px);
}
.btb-pathway-finder .model-card:active{transform:translateY(0);}
.btb-pathway-finder .model-card-img{
  display:block !important;
  width:100% !important;
  height:180px !important;
  max-width:100% !important;
  object-fit:cover !important;
  background:var(--btbpf-line-soft);
}
.btb-pathway-finder .model-card-body{
  display:flex;
  flex-direction:column;
  flex:1;
  padding:18px 20px;
}
.btb-pathway-finder .model-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.btb-pathway-finder .model-badge{
  font-family:inherit;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--btbpf-deep);
  opacity:0.85;
}
.btb-pathway-finder .model-name{
  font-family:inherit;
  font-weight:700;
  font-size:19px;
  margin:4px 0 6px;
}
.btb-pathway-finder .model-name em{color:var(--btbpf-deep);font-style:normal;}
.btb-pathway-finder .model-desc{
  font-size:13.5px;
  opacity:0.72;
  line-height:1.5;
  margin-bottom:10px;
  max-width:56ch;
}
.btb-pathway-finder .model-case-study{
  font-family:inherit;
  font-size:12px;
  color:var(--btbpf-ink);
  opacity:0.5;
  line-height:1.5;
}
.btb-pathway-finder .model-cta{
  font-family:inherit;
  font-size:12.5px;
  font-weight:600;
  color:var(--btbpf-deep);
  margin-top:auto;
  padding-top:10px;
}
.btb-pathway-finder .quiz-cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  background:var(--btbpf-paper-2);
  border:1.5px dashed var(--btbpf-line);
  border-radius:var(--btbpf-radius-sm);
  padding:16px 18px;
}
.btb-pathway-finder .quiz-cta-text .opt-main{font-weight:600;font-size:14.5px;}
.btb-pathway-finder .quiz-cta-text .opt-detail{font-size:12.5px;opacity:0.65;margin-top:2px;}
.btb-pathway-finder .quiz-cta button{
  font-family:inherit;
  font-size:13.5px;
  font-weight:600;
  background:var(--btbpf-deep);
  color:var(--btbpf-white);
  border:none;
  padding:10px 16px;
  border-radius:var(--btbpf-radius-sm);
  cursor:pointer;
  white-space:nowrap;
}
.btb-pathway-finder .quiz-cta button:hover{background:#0B52BC;}

.btb-pathway-finder .checkbox-option{position:relative;}
.btb-pathway-finder .checkbox-option input{position:absolute;opacity:0;inset:0;cursor:pointer;}
.btb-pathway-finder .checkbox-option.checked{border-color:var(--btbpf-deep);background:#EAF1FD;}
.btb-pathway-finder .checkbox-option .opt-letter{
  border-radius:4px;
  background:var(--btbpf-white);
  border:1.5px solid var(--btbpf-line);
  color:transparent;
}
.btb-pathway-finder .checkbox-option.checked .opt-letter{
  background:var(--btbpf-deep);
  border-color:var(--btbpf-deep);
  color:var(--btbpf-white);
}

.btb-pathway-finder .back-link{
  font-family:inherit;
  font-size:13px;
  font-weight:600;
  color:var(--btbpf-ink);
  opacity:0.5;
  background:none;
  border:none;
  cursor:pointer;
  padding:0;
  margin-bottom:14px;
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.btb-pathway-finder .back-link:hover{opacity:0.85;}

/* ---------- Result ---------- */
.btb-pathway-finder .result-banner{
  background:var(--btbpf-deep);
  color:var(--btbpf-white);
  padding:26px 24px;
  position:relative;
}
.btb-pathway-finder .result-eyebrow{
  font-family:inherit;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
  opacity:0.75;
}
.btb-pathway-finder .result-name{
  font-family:inherit;
  font-size:28px;
  font-weight:700;
  margin:6px 0 10px;
  color:var(--btbpf-white);
}
.btb-pathway-finder .result-name em{color:#CFE1FB;font-style:normal;}
.btb-pathway-finder .result-desc{font-size:14.5px;line-height:1.6;opacity:0.92;max-width:56ch;}
.btb-pathway-finder .result-pills{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;
}
.btb-pathway-finder .pill{
  font-family:inherit;
  font-size:12px;
  font-weight:600;
  border:1px solid rgba(255,255,255,0.35);
  padding:5px 10px;
  border-radius:20px;
  opacity:0.9;
}

.btb-pathway-finder .alt-note{
  font-size:13px;
  padding:14px 24px;
  background:var(--btbpf-paper-2);
  border-bottom:1px solid var(--btbpf-line-soft);
  color:var(--btbpf-ink);
  opacity:0.8;
  line-height:1.5;
}
.btb-pathway-finder .alt-note b{opacity:1;}
.btb-pathway-finder .alt-note-switch{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding:14px 24px;
  background:var(--btbpf-paper-2);
  border-bottom:1px solid var(--btbpf-line-soft);
  font-size:13px;
  opacity:0.85;
}
.btb-pathway-finder .alt-note-switch button{
  font-family:inherit;
  font-size:13px;
  font-weight:600;
  background:none;
  border:none;
  color:var(--btbpf-deep);
  text-decoration:underline;
  cursor:pointer;
  padding:0;
  white-space:nowrap;
}

.btb-pathway-finder .support-grid{
  display:grid;
  gap:14px;
  padding:22px 24px 26px;
}
.btb-pathway-finder .support-card{
  border:1px solid var(--btbpf-line-soft);
  border-radius:var(--btbpf-radius-sm);
  padding:16px 18px;
  background:var(--btbpf-paper-2);
}
.btb-pathway-finder .support-card h4{
  font-family:inherit;
  font-weight:700;
  font-size:16px;
  margin:0 0 8px;
  display:flex;align-items:center;gap:8px;
}
.btb-pathway-finder .support-card .day-tag{
  font-family:inherit;
  font-size:11px;
  font-weight:700;
  color:var(--btbpf-deep);
  border:1px solid rgba(14,101,228,0.3);
  border-radius:4px;
  padding:2px 8px;
}
.btb-pathway-finder .support-card p{
  margin:0;
  font-size:13.5px;
  line-height:1.55;
  opacity:0.8;
}
.btb-pathway-finder .support-card ul{
  margin:8px 0 0;
  padding-left:18px;
  font-size:13.5px;
  line-height:1.6;
  opacity:0.85;
}
.btb-pathway-finder .support-card li{margin:0 0 4px;}

.btb-pathway-finder .cta-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  padding:0 24px 24px;
}
.btb-pathway-finder .cta-primary, .btb-pathway-finder .cta-secondary{
  font-family:inherit;
  font-size:13.5px;
  font-weight:600;
  padding:12px 18px;
  border-radius:var(--btbpf-radius-sm);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  border:1.5px solid var(--btbpf-deep);
}
.btb-pathway-finder .cta-primary{background:var(--btbpf-deep);color:var(--btbpf-white);}
.btb-pathway-finder .cta-primary:hover{background:#0B52BC;border-color:#0B52BC;}
.btb-pathway-finder .cta-secondary{background:transparent;color:var(--btbpf-deep);}
.btb-pathway-finder .cta-secondary:hover{background:#EAF1FD;}

.btb-pathway-finder .restart-row{
  text-align:center;
  margin-top:18px;
}
.btb-pathway-finder .restart-row button{
  font-family:inherit;
  font-size:13px;
  background:none;
  border:none;
  color:var(--btbpf-ink);
  opacity:0.45;
  cursor:pointer;
  text-decoration:underline;
}
.btb-pathway-finder .restart-row button:hover{opacity:0.8;}

@media (max-width:520px){
  .btb-pathway-finder .q-title{font-size:20px;}
  .btb-pathway-finder .result-name{font-size:24px;}
}

.btb-pathway-finder .fade-in{animation:btbpfFadeIn .35s ease both;}
@keyframes btbpfFadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}

@media (prefers-reduced-motion: reduce){
  .btb-pathway-finder .fade-in{animation:none;}
  .btb-pathway-finder .option, .btb-pathway-finder .model-card, .btb-pathway-finder .btn-next, .btb-pathway-finder .cta-primary, .btb-pathway-finder .cta-secondary{transition:none;}
}

.btb-pathway-finder :focus-visible{outline:2px solid var(--btbpf-amber);outline-offset:2px;}