/*
 * SBTooltip — a reusable, IMMEDIATE, reliable hover tooltip that replaces the native
 * HTML `title` attribute where `title` fails:
 *   (1) a DISABLED control (button) is inert — the browser fires no hover events over
 *       it, so its `title` NEVER shows (only the CSS `cursor:not-allowed` paints). This
 *       is why the grayed Skip / "I disagree" / "I'm done" buttons showed the circle-
 *       slash cursor but no tooltip. Put `class="sb-tip"` on a NON-disabled WRAPPER
 *       span around the disabled control: the wrapper still receives :hover.
 *   (2) the native tooltip has a slow ~1s delay + is easy to miss on a dense table
 *       (the admin column headers) — this renders instantly.
 *
 * Usage: put `class="sb-tip" data-sb-tip="the text"` on a hoverable element (or a
 * wrapper around a disabled one). The tip renders ONLY while `data-sb-tip` is present,
 * so callers add it when a control is locked and remove it when unlocked → the tip
 * "shows only while disabled". Add `sb-tip-up` to open upward (controls near the bottom
 * of their box, e.g. the practice buttons) and `sb-tip-right` to anchor to the right
 * edge (right-most table columns, so a wide tip isn't clipped).
 */
.sb-tip { position: relative; }
.sb-tip[data-sb-tip] { cursor: help; }

.sb-tip[data-sb-tip]::after {
  content: attr(data-sb-tip);
  position: absolute;
  left: 0;
  top: calc(100% + 5px);            /* default: BELOW (table headers drop into the body, not clipped above) */
  z-index: 1000;                    /* above .topbar (z-index 30) and .stepper (20) */
  width: max-content;
  max-width: 300px;
  white-space: normal;
  text-align: left;
  padding: 7px 10px;
  border-radius: 6px;
  background: #1c2333;
  color: #fff;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.35;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;             /* the tip must never eat the hover */
  transition: opacity 0.08s ease;
}
.sb-tip[data-sb-tip]:hover::after,
.sb-tip[data-sb-tip]:focus-within::after {
  opacity: 1;
  visibility: visible;
}

/* Open UPWARD — for controls near the bottom of their container (the practice
   skip / disagree / finish buttons sit at the bottom of the practice panel). */
.sb-tip.sb-tip-up[data-sb-tip]::after {
  top: auto;
  bottom: calc(100% + 5px);
}

/* Anchor to the RIGHT edge — for right-most table columns so a wide tip is not
   clipped by the .table-scroll overflow box. */
.sb-tip.sb-tip-right[data-sb-tip]::after {
  left: auto;
  right: 0;
}