/* Lesson strip declutter (response-only; injected by functions/lesson-level-switcher.js on deep-dive
   lessons). Layout target: [< Back]  Lesson title...  [contents icon] [level chip].
   The strip is the dark header row in both color schemes (#171620, lilac #c6b2f5). */
#bw-global-header[data-header-variant="content"] .bw26-content-context-inner {
  gap: 8px;
  min-height: 52px;
}
/* Back: one 36px target; the jump menu next to it repeats Back and "On this page", so it is hidden. */
#bw-global-header[data-header-variant="content"] .bw26-content-back-group { gap: 0; }
#bw-global-header[data-header-variant="content"] .bw26-content-jump { display: none; }
#bw-global-header[data-header-variant="content"] .bw26-context-back {
  position: relative;
  gap: 4px;
  height: 36px;
  min-height: 36px;
  margin-left: -8px;
  padding: 0 10px 0 6px;
  border-radius: 999px;
  font: 600 12px/1 BWHeader, "Space Grotesk", system-ui, sans-serif;
  letter-spacing: .01em;
  color: #e6dcf2;
  transition: background-color .15s ease;
}
#bw-global-header[data-header-variant="content"] .bw26-context-back > span { font-size: 22px; line-height: 1; margin-top: -2px; }
#bw-global-header[data-header-variant="content"] .bw26-context-back::after { content: ""; position: absolute; inset: -4px 0; }
#bw-global-header[data-header-variant="content"] .bw26-context-back:hover { background: rgba(198, 178, 245, .1); }
/* Title takes the free space and truncates. */
#bw-global-header[data-header-variant="content"] .bw26-content-breadcrumb {
  flex: 1 1 auto;
  min-width: 0;
  gap: 8px;
  font: 500 12px/1.2 BWHeader, "Space Grotesk", system-ui, sans-serif;
}
#bw-global-header[data-header-variant="content"] .bw26-content-breadcrumb > [aria-current] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #f1eafb;
}
#bw-global-header[data-header-variant="content"] .bw26-content-breadcrumb > a { color: #b8a3cc; }
/* "On this page": a 36px round contents button. The visible text is hidden but stays the accessible name. */
#bw-global-header[data-header-variant="content"] .bw26-content-sections { margin-left: auto; flex: none; }
#bw-global-header[data-header-variant="content"] .bw26-content-sections > summary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  gap: 0;
  border-radius: 50%;
  font-size: 0 !important;
  color: #e6dcf2;
  list-style: none;
  cursor: pointer;
  transition: background-color .15s ease;
}
#bw-global-header[data-header-variant="content"] .bw26-content-sections > summary::-webkit-details-marker { display: none; }
#bw-global-header[data-header-variant="content"] .bw26-content-sections > summary > span { display: none; }
#bw-global-header[data-header-variant="content"] .bw26-content-sections > summary::before {
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3 5h.01M7 5h8M3 9h.01M7 9h8M3 13h.01M7 13h8' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3 5h.01M7 5h8M3 9h.01M7 9h8M3 13h.01M7 13h8' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
#bw-global-header[data-header-variant="content"] .bw26-content-sections > summary:hover,
#bw-global-header[data-header-variant="content"] .bw26-content-sections[open] > summary { background: rgba(198, 178, 245, .14); }
#bw-global-header[data-header-variant="content"] .bw26-content-sections > summary:focus-visible,
#bw-global-header[data-header-variant="content"] .bw26-context-back:focus-visible { outline: 2px solid #c6b2f5; outline-offset: 2px; }
/* Desktop tooltip, right-aligned under the icon so it never extends past the screen edge. */
@media (hover: hover) and (pointer: fine) {
  #bw-global-header[data-header-variant="content"] .bw26-content-sections > summary::after {
    content: "On this page";
    content: "On this page" / "";
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 2;
    padding: 5px 8px;
    border-radius: 6px;
    background: #fffefa;
    color: #191923;
    font: 600 11px/1 BWHeader, "Space Grotesk", system-ui, sans-serif;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(16, 17, 27, .35);
    opacity: 0;
    transform: translateY(-2px);
    pointer-events: none;
    transition: opacity .15s ease .3s, transform .15s ease .3s;
  }
  #bw-global-header[data-header-variant="content"] .bw26-content-sections:not([open]) > summary:hover::after {
    opacity: 1;
    transform: none;
  }
}
/* The sections panel stays anchored to the strip's right edge, under the icon. */
#bw-global-header[data-header-variant="content"] .bw26-content-sections nav { border-radius: 0 0 14px 14px; }
@media (prefers-reduced-motion: reduce) {
  #bw-global-header[data-header-variant="content"] .bw26-content-sections > summary,
  #bw-global-header[data-header-variant="content"] .bw26-content-sections > summary::after,
  #bw-global-header[data-header-variant="content"] .bw26-context-back { transition: none; }
}

/* Off-canvas header panels (study map, mobile nav) sit past the right edge; clip so phones never scroll sideways (live check 2026-10-03). */
html, body { overflow-x: clip; }
