/* ============================================================
   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.
   ============================================================ */

/* :where — no weight at all, so a page's own position or cursor for the
   element wins. A ✕ placed absolutely inside a text box was pushed out of it
   by this rule (10/04/2026); the tip is fixed and needs nothing from here. */
:where(.jc-tooltip-host) {
  position: relative;
  cursor: help;
}
/* SOMETHING YOU CLICK KEEPS THE HAND. The question mark is for a mark you
   read; on a button or link it says "this only explains", which is false
   (10/04/2026, when every native tooltip moved to this one). */
:is(button, a, label, summary, select, [role="button"], [onclick]).jc-tooltip-host { cursor: pointer; }
:is(button, input, select):disabled.jc-tooltip-host { cursor: not-allowed; }
/* A HOLDER for what cannot carry the tip itself: a text box, a picture, a
   dropdown, or a switched-off button (which gets no mouse events). Put
   data-jc-tooltip on the holder, around it. */
.jc-tooltip-wrap { display: inline-block; }

/* 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 */
  width: max-content;        /* its own width, not squeezed to a narrow box around it */
  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-detached.is-shown,
.jc-tooltip-wrap:focus-within > .jc-tooltip,
.jc-tooltip-host:hover > .jc-tooltip,
/* :focus-visible, not :focus — reached by the keyboard. After a click a
   button keeps the focus, and with :focus its tip stayed up over whatever the
   click opened (10/04/2026). Hover shows it to a mouse. */
.jc-tooltip-host:focus-visible > .jc-tooltip,
.jc-tooltip-host.jc-tooltip-open > .jc-tooltip {
  visibility: visible;
  opacity: 1;
}

/* Behind an open window: hidden, whatever the hover says (tooltip.js marks
   it, 10/04/2026). */
.jc-tooltip.jc-tooltip-behind {
  visibility: hidden !important;
  opacity: 0 !important;
}