/* ==========================================================================
   WAYBACK DISCOVERY HINT — default/fallback styling
   Deliberately plain. Expected to be re-skinned per era in each era's own
   stylesheet (e.g. body.era-1996 .mw-wayback-hint-arrow { ... }), same
   pattern as every other piece of this system. This file just needs to
   be functional and legible on its own if an era never bothers to
   override it.
   ========================================================================== */

.mw-wayback-hint {
  position: fixed; /* top/left set inline by wayback-hint.js via getBoundingClientRect() */
  display: flex;
  align-items: flex-start;
  gap: 6px;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 1000; /* above .wayback's own z-index: 99, and everything else */
  
  background: rgba(255, 255, 255, 0.9);
	border-radius: 16px;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	
	border: 1px solid rgba(255, 255, 255, 0.75);
	
	margin-left: 15px;




}

.mw-wayback-hint.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Placeholder arrow — a plain line-and-point built from CSS alone.
   Swap this out per era for something hand-drawn / era-appropriate;
   the only contract that matters is that it visually reads as
   "pointing up-left toward #whereami" from wherever the hint sits. */
.mw-wayback-hint-arrow {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  position: relative;
}
.mw-wayback-hint-arrow::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 9px;
    width: 30px;
    height: 30px;
     background-image: url('data:image/svg+xml;utf8,<svg id="arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 97.37 117.97"><g id="layer1" fill="%23000000" ><path d="M89.65,101.96c-8.32.1-17.32.32-24.87-3.74-6.19-3.32-10.83-8.61-14.25-14.68-7.48-13.29-7.87-29.03-7.62-44.04,10.38,10.28,20.69,19.59,32.76,28.07,2.75,1.94,4.97,1.64,7.65-.23,6.34-4.43-9.73-21.03-18.77-29.94-9.36-9.23-19-17.8-25.79-29.1-2.36-3.94-4.52-9.93-10.69-7.89-2.82.93-6.24,6.33-6.14,9.54.18,6.04-.4,10.95-1.94,16.62-2.55,9.38-4.96,18.59-8.71,27.57-4.4,8.92-7.89,17.63-11.27,26.92l1.19,3.08c.66,1.7,9.05-1.56,12.82-9.9l5.61-12.39c2.34-5.16,4.92-9.69,7.33-15.1.25,16.52,2.25,33.21,11.29,47.4,4.74,7.44,11.19,14.15,19.11,18.21,10.05,5.14,21.21,5.72,32.3,5.59,10.29-.12,10.32-16.12,0-16Z"/></g></svg>');
    background-repeat: no-repeat;
}

.mw-wayback-hint-text {
  font-family: inherit;
  font-size: 1.5em;
  line-height: 1.3;
  /* background: #111; */
  color: #000;
  padding: 6px 10px;
  border-radius: 4px;
  white-space: nowrap;
      padding: 15px;
}

/* Horizontal bounce ping on #whereami itself. */
@keyframes mw-wayback-bounce {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  50% { transform: translateX(3px); }
  75% { transform: translateX(-2px); }
}

.mw-wayback-bounce {
  animation: mw-wayback-bounce 0.6s ease;
}