/* AIForSRE Learning Path + mouse wheel UX */
html{
  height:auto !important;
  min-height:100% !important;
  scroll-snap-type:none !important;
  overflow-y:auto !important;
  overscroll-behavior-y:auto !important;
}
body{
  height:auto !important;
  min-height:100% !important;
  max-height:none !important;
  overflow-y:auto !important;
  overscroll-behavior-y:auto !important;
}
#course,.lesson,.lesson-shell,.lesson-grid,.copy,.visual{
  height:auto !important;
  max-height:none !important;
}
.lesson{
  scroll-snap-align:none !important;
  overflow:visible !important;
}

/* Learning path is sequence/navigation, not a taxonomy. */
.concept-map .concept-node[data-path-role]{
  position:relative;
}
.concept-map .concept-node[data-path-role]::before{
  content:attr(data-path-role);
  display:block;
  margin-bottom:5px;
  color:#6f7e92;
  font-size:7px;
  line-height:1;
  font-weight:900;
  letter-spacing:.13em;
}
.concept-map .concept-node.current[data-path-role]::before{
  color:var(--accent);
}
.concept-map .concept-node.path-previous,
.concept-map .concept-node.path-next{
  opacity:.86;
}

/* Correct concept relationship diagrams for the first AI taxonomy lessons. */
.lp-model{
  display:grid;
  justify-items:center;
  gap:8px;
  width:100%;
  min-width:0;
}
.lp-node{
  box-sizing:border-box;
  width:min(100%,340px);
  border:1px solid #2a3443;
  border-radius:13px;
  padding:11px 13px;
  background:linear-gradient(145deg,#111722,#0d1219);
  color:#b3becd;
  font-size:10px;
  line-height:1.35;
  font-weight:800;
  text-align:center;
}
.lp-node.is-current{
  color:#f2fff8;
  border-color:rgba(134,241,193,.48);
  background:linear-gradient(135deg,rgba(134,241,193,.12),rgba(138,168,255,.08));
}
.lp-node.is-current::before{
  content:"YOU ARE HERE";
  display:block;
  color:var(--accent);
  font-size:7px;
  font-weight:900;
  letter-spacing:.13em;
  margin-bottom:4px;
}
.lp-node.is-small{
  width:auto;
  min-width:82px;
  flex:1 1 90px;
  padding:9px 10px;
  font-size:9px;
}
.lp-arrow{
  color:#516075;
  font-size:16px;
  line-height:1;
}
.lp-branches{
  width:100%;
  display:flex;
  justify-content:center;
  gap:7px;
  flex-wrap:wrap;
  position:relative;
  padding-top:10px;
}
.lp-branches::before{
  content:"";
  position:absolute;
  top:0;
  left:10%;
  right:10%;
  height:1px;
  background:linear-gradient(90deg,transparent,#354154 12%,#354154 88%,transparent);
}

/* The diagram may horizontally scroll on very small screens, but never trap vertical wheel input. */
.picture{
  overflow-x:auto !important;
  overflow-y:hidden !important;
  overscroll-behavior:auto !important;
}

@media(max-width:560px){
  .lp-node{font-size:9px}
  .lp-node.is-small{min-width:72px}
}

/* Native mouse-wheel scrolling fix */
html,
body {
  height: auto !important;
  min-height: 100% !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: scroll !important;
  scroll-snap-type: none !important;
  overscroll-behavior-y: auto !important;
}

#course,
.lesson,
.lesson-shell,
.lesson-grid,
.copy,
.visual {
  height: auto !important;
  max-height: none !important;
  overflow-y: visible !important;
}

.lesson {
  min-height: 100vh !important;
  scroll-snap-align: none !important;
}

/* Do not let the visual diagram area capture vertical wheel movement */
.picture {
  overflow: visible !important;
  overscroll-behavior: auto !important;
  touch-action: pan-y !important;
}

/* Only allow horizontal diagram scrolling on narrow screens */
@media (max-width: 700px) {
  .picture {
    overflow-x: auto !important;
    overflow-y: visible !important;
  }
}