/* SPDX-License-Identifier: MIT
 *
 * tooltip.css - THE ONE FLOATING COMPONENT (SL_05B Part E; hire4real's tooltip.css, 41 lines).
 * Every panel that floats - a defined term's definition, a figure's basis - is this. Not a second
 * one.
 *
 * With JavaScript off the panel sits in the flow under its <details> summary and is complete.
 * stonelane-popover.js marks the details `data-enhanced`, and only then does the panel float,
 * anchored under its trigger and flipped to the left edge when it would leave the viewport.
 * Colours are tokens; the shadow is a token alias (design-tokens.css), never a literal.
 *
 * The class is `sl-tooltip`, not `tooltip`: daisyUI ships a `tooltip` component, and the Tailwind
 * build reads every class attribute under templates/, so the bare word would make daisyUI emit
 * its own tooltip rules into site.css (check-css-colourless would see their colour variables).
 */

.sl-tooltip {
  display: block;
  box-sizing: border-box;
  max-width: 18rem;
  margin-top: 0.3rem;
  padding: 0.5rem 0.6rem;
  font-size: 0.8rem;
  font-weight: 400;
  font-style: normal;
  line-height: 1.45;
  letter-spacing: 0;
  text-align: left;
  white-space: normal;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 0.35rem;
}

[data-popover][data-enhanced] { position: relative; }
[data-popover][data-enhanced] > .sl-tooltip {
  position: absolute;
  z-index: 40;
  top: 100%;
  left: 0;
  width: max-content;
  max-width: min(18rem, calc(100vw - 2rem));
  box-shadow: 0 6px 20px var(--shadow-float);
}
[data-popover][data-enhanced][data-flip="left"] > .sl-tooltip { left: auto; right: 0; }

/* ---- The hover tip: hire4real's tooltip.css R119, an attribute and an ::after, ported. ----
 * `data-sl-tip="..."` on any element draws a token-coloured box from the attribute alone,
 * unpainted at rest, shown on hover and on keyboard focus. The terminology switch carries the
 * words theirs carries. Their colours are their tokens and one shadow literal; ours are the
 * tokens .sl-tooltip uses, so two floating things never disagree about "above the page".
 *
 * DIVERGES FROM hire4real/static/css/components/tooltip.css: the attribute is data-sl-tip, this
 *   site's prefix, where theirs is data-h4r-tip, as the column picker's storage key is ours.
 *
 * DIVERGES FROM hire4real/static/css/components/tooltip.css: a tip in the site header opens below
 *   its trigger. Theirs opens above, and in their header at 1440 its top edge sits 9px above the
 *   viewport (measured 2026-10-06). On a phone the tip starts at its trigger's left edge, where
 *   the switch sits, so it stays on the screen (tests/test_sl05f_tip.py).
 *
 * DIVERGES FROM hire4real/static/css/components/tooltip.css: the tip also shows while a control
 *   inside its trigger has keyboard focus. Their rule reads :focus-visible on the trigger, and on
 *   the switch the focus lands on the input inside the label, so a keyboard never shows theirs.
 */
[data-sl-tip] { position: relative; }

[data-sl-tip]::after {
  content: attr(data-sl-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  white-space: nowrap;
  padding: 5px 9px;
  border-radius: 6px;
  font-size: var(--font-size-xs);
  font-weight: 500;
  line-height: 1.3;
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 4px 14px var(--shadow-float);
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
}

[data-sl-tip]:hover::after,
[data-sl-tip]:focus-visible::after,
[data-sl-tip]:has(:focus-visible)::after { opacity: 1; }

.site-header [data-sl-tip]::after { bottom: auto; top: calc(100% + 8px); }

@media (max-width: 767px) {
  .site-header [data-sl-tip]::after { left: 0; transform: none; }
}