/* ============================================================
   tooltip.css — the standard JudgeCalc tooltip

   ONE IMPLEMENTATION. Before this there was a native title attribute in some
   places and a hand-rolled span on the Federal Holidays page in others. The
   native one is unstyleable, tiny, and appears after a delay the browser
   chooses; the hand-rolled one was scoped to that page and could not wrap.

   Use it by putting the text in data-jc-tooltip and calling
   JCTooltip.init(container) after rendering. See docs/ui-conventions.md.
   ============================================================ */

.jc-tooltip-host {
  position: relative;
  cursor: help;
}

/* The dotted underline that says "there is something to read here" is OPT-IN.
   Forcing it on every host silently restyles anything retrofitted onto the
   shared tooltip — it put a second line under each Federal Holidays label,
   which already had a row border. Add it where the element does not otherwise
   look interactive. */
.jc-tooltip-underline {
  border-bottom: 1px dotted #adb5bd;
}

.jc-tooltip {
  visibility: hidden;
  opacity: 0;
  position: fixed;
  z-index: 10050;
  max-width: 24rem;          /* wraps — an explanation is often two sentences */
  padding: 0.625rem 0.75rem;
  background: #fff;
  color: #333;
  border: 1px solid #adb5bd;
  border-radius: 0.375rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  font-size: 0.875rem;
  font-weight: 400;
  font-style: normal;
  line-height: 1.45;
  text-align: left;
  white-space: normal;
  pointer-events: none;
  transition: opacity 0.15s;
}

/* jc-tooltip-open is set by a tap. There is no hover on a tablet, and the
   mark was doing nothing at all there. */
.jc-tooltip-host:hover > .jc-tooltip,
.jc-tooltip-host:focus > .jc-tooltip,
.jc-tooltip-host:focus-visible > .jc-tooltip,
.jc-tooltip-host.jc-tooltip-open > .jc-tooltip {
  visibility: visible;
  opacity: 1;
}