.bcis-flashlight {
  --bcis-light-x: 50%;
  --bcis-light-y: 50%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.bcis-flashlight::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle 190px at var(--bcis-light-x) var(--bcis-light-y), rgba(212,170,67,.14), transparent 72%);
  opacity: 0;
  transition: opacity .18s ease;
}

.bcis-flashlight:hover::after { opacity: 1; }
.bcis-flashlight:hover {
  border-color: #d4aa43 !important;
  box-shadow: 0 16px 38px rgba(0,0,0,.38), 0 0 0 1px rgba(212,170,67,.16);
}
.bcis-flashlight > * { position: relative; z-index: 1; }
.bcis-flashlight :is(h1,h2,h3,legend,label,strong,.eyebrow,.stage-label,.type-section-title,.type-section-count,.helper):hover {
  color: #fff7dc !important;
  text-shadow: 0 0 8px rgba(212,170,67,.48), 0 0 18px rgba(212,170,67,.22);
}

@media (prefers-reduced-motion: reduce) {
  .bcis-flashlight, .bcis-flashlight::after { transition: none; }
}

/* v0.9.78: on phones the page header (with Sign out) stays pinned at the top, so you never have to
   scroll back up to sign out, and the header buttons are large enough to tap. */
@media (max-width: 760px) {
  body > header { position: sticky !important; top: 0; z-index: 60; }
  header .bcis-signout, header .global-signout, header #logout, header .data-tools-link { min-height: 40px; display: inline-flex; align-items: center; }
  body > header.data-tool-header { height: 66px; min-height: 66px; }
}