/* Earnessa v23.11 — zero-jank mobile header and compact orbit switch */

/* The label is intentionally absent: the control is represented by its switch. */
.orbit-toggle {
  bottom: 8px !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 18px !important;
  min-height: 18px !important;
  gap: 0 !important;
  padding: 2px 3px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.orbit-toggle:hover,
.orbit-toggle:focus-visible {
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.orbit-toggle:focus-visible {
  outline: 2px solid rgba(118, 236, 215, .48) !important;
  outline-offset: 2px !important;
}

.toggle-state {
  display: none !important;
}

.toggle-track {
  width: 28px !important;
  height: 12px !important;
  flex: 0 0 28px !important;
  background: linear-gradient(90deg, #22a96f, #4ddd99) !important;
  box-shadow: inset 0 1px 2px rgba(3, 48, 31, .34) !important;
}

.toggle-knob {
  top: 2px !important;
  right: 2px !important;
  width: 8px !important;
  height: 8px !important;
  box-shadow: 0 1px 3px rgba(1, 35, 22, .34) !important;
}

.hero-visual.is-off .toggle-track {
  background: linear-gradient(90deg, #536666, #7b8c8c) !important;
  box-shadow: inset 0 1px 2px rgba(13, 28, 31, .34) !important;
}

.hero-visual.is-off .toggle-knob {
  transform: translateX(-16px) !important;
}

.visual-emblem {
  transform: translateY(-7px) !important;
}

@media (max-width: 720px) {
  /*
    No interpolated height, padding, shadow or grid changes here. Those
    properties force the sticky header and the page below it to be laid out on
    every animation frame. The compact state now changes only once per
    threshold crossing and paints no hidden controls.
  */
  body.is-authenticated .site-header,
  body.is-authenticated .site-header > .brand,
  body.is-authenticated #member-control-panel,
  body.is-authenticated .header-member-area {
    transition: none !important;
  }

  body.is-authenticated .site-header.is-mobile-scrolled {
    row-gap: 0 !important;
    padding-top: max(5px, env(safe-area-inset-top)) !important;
    padding-bottom: 5px !important;
    border-color: transparent !important;
    border-radius: 0 !important;
    background:
      linear-gradient(90deg, transparent 0%, rgba(4, 28, 32, .13) 22%, rgba(4, 31, 35, .26) 50%, rgba(4, 28, 32, .13) 78%, transparent 100%) !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    contain: layout style !important;
  }

  body.is-authenticated .site-header.is-mobile-scrolled > .brand {
    transform: none !important;
  }

  body.is-authenticated .site-header.is-mobile-scrolled #member-control-panel,
  body.is-authenticated .site-header.is-mobile-scrolled .header-member-area {
    display: none !important;
  }

  .orbit-toggle {
    bottom: 4px !important;
  }

  .visual-core {
    inset: 54px !important;
  }

  .visual-emblem {
    transform: translateY(-7px) !important;
  }
}

@media (max-width: 360px) {
  .visual-emblem {
    width: 86px !important;
    height: 86px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .toggle-knob {
    transition: none !important;
  }
}