/* Tooltip trigger styling */
  .has-tooltip {
    position: relative;         /* required for positioning pseudo-elements */
    cursor: help;
    text-decoration: underline dotted;
    outline: none;              /* focus styling provided separately */
  }

  /* Visible focus ring for keyboard users */
  .has-tooltip:focus {
    box-shadow: 0 0 0 3px rgba(3,102,214,0.15);
    border-radius: 3px;
  }

  /* Tooltip content (pseudo-element) */
  .has-tooltip::after {
    content: attr(data-tooltip);
    display: none;              /* shown on hover/focus */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(100% + 10px);  /* place above the word with a gap */
    
    width: 250px;
    max-width: none;     /* override the previous max-width: 320px */
    white-space: normal; /* wrap text within the fixed width */
    
    /*white-space: pre-wrap;*/      /* allow wrapping for long text */
    /*max-width: 320px;*/
    
    background: rgba(0,0,0,0.88);
    color: #fff;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.3;
    z-index: 1000;
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
    text-align: left;
  }

  /* Small caret triangle */
  .has-tooltip::before {
    content: "";
    display: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(100% + 2px);
    border-width: 6px;
    border-style: solid;
    border-color: rgba(0,0,0,0.88) transparent transparent transparent;
    z-index: 1001;
  }

  /* Show tooltip on hover and focus (keyboard) */
  .has-tooltip:hover::after,
  .has-tooltip:focus::after,
  .has-tooltip:hover::before,
  .has-tooltip:focus::before {
    display: block;
  }

  /* Prevent overflow off the left/right edges by nudging */
  .has-tooltip[data-tooltip] {
    /* nothing needed here — positioning is centered; handle extreme cases in JS if required */
  }

  /* Small responsive adjustment: on narrow screens, place tooltip below */
  @media (max-width: 420px) {
    .has-tooltip::after { bottom: auto; top: calc(100% + 10px); }
    .has-tooltip::before { bottom: auto; top: calc(100% + 2px); border-color: transparent transparent rgba(0,0,0,0.88) transparent; }
  }