/* ===================== */
/* INFO BUTTON (THE CIRCLE) */
/* ===================== */
.info{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:20px;
  height:20px;
  border-radius:999px;
  margin: 0px 10px;
  font-size:12px;
  font-weight:600;

  background: var(--line);
  color: var(--ink);

  cursor:pointer;
  transition:
    background 160ms ease,
    color 160ms ease,
    transform 120ms ease,
    box-shadow 160ms ease;
}

.info:hover,
.info:focus{
  background: var(--accent);
  color:#fff;
  transform: scale(1.1);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}

/* Invisible hover bridge */
.info::after{
  content:"";
  position:absolute;
  left:-12px;
  right:-12px;
  top:-40px;
  height:40px;
}

/* ===================== */
/* TOOLTIP BOX */
/* ===================== */
.info-box{
  position:absolute;
  bottom:140%;
  left: 0;                 /* anchor to left edge of icon */
  transform: translateX(0) translateY(-6px);

  width:320px;
  padding:0.7rem 0.85rem;

  font-size:0.85rem;
  line-height:1.4;

  border-radius:12px;
  background:  #ffffff;;
  border:1px solid var(--line);
  box-shadow:0 14px 40px rgba(0,0,0,0.15);

  color: var(--ink);

  opacity:0;
  visibility:hidden;
  pointer-events:none;
  z-index:9999;

  transition:
    opacity 140ms ease,
    transform 140ms ease,
    visibility 0s linear 140ms;
  
    font-weight: 400; 
    
}

/* Arrow */
.info-box::before{
  content:"";
  position:absolute;
  bottom:-6px;
  left: 14px;              /* position arrow under the icon */
  transform: none;
  border:6px solid transparent;
  border-top-color:var(--panel);
}

/* Show */
.info:hover .info-box,
.info:focus-within .info-box,
.info .info-box:hover{
  opacity:1;
  visibility:visible;
  pointer-events:auto;

  transition:
    opacity 140ms ease,
    transform 140ms ease,
    visibility 0s;
}