/* Greenlight — the small (i) help tooltip. Markup + behaviour: tooltip.js.
 * PR-5: tokens only (theme.css), no colour literal. Not scoped under a view
 * class on purpose: the same markup sits in the request form, the item and
 * board views, the rules builder and the server-rendered decide page. */

.gl-tip { display: inline-flex; vertical-align: middle; }

/* A 24px target (touch) drawn as a ~16px ring: the transparent border is the
   extra hit area, the inset shadow is the ring. */
.gl-tip .gl-tip-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 24px;
  height: 24px;
  margin: -4px 0;
  padding: 0;
  border: 4px solid transparent;
  border-radius: 50%;
  background: none;
  box-shadow: inset 0 0 0 1.5px currentColor;
  color: var(--muted);
  font: italic 700 10px/1 Georgia, "Times New Roman", serif;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
}
/* Low-key: muted grey, just darker on hover/focus (the focus ring stays for
   keyboard users). */
.gl-tip .gl-tip-btn:hover { color: var(--ink); }
.gl-tip .gl-tip-btn:focus-visible {
  outline: none;
  border-color: transparent; /* beats the request/rules button:focus-visible border */
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px currentColor, var(--focus-ring);
}

/* position:fixed + JS clamping keeps it inside the viewport and out of any
   scroll container; it never widens the page. Calm card: light surface, dark
   text, thin border, soft shadow. Light only: the views always paint a light
   surface (no monday dark/night theme support yet), so no dark variant. */
.gl-tip .gl-tip-pop {
  position: fixed;
  z-index: 1000;
  width: max-content;
  max-width: min(280px, calc(100vw - 16px));
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-md);
  font: normal 400 var(--fs-sm)/var(--lh-base) var(--font-sans);
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  white-space: normal;
  overflow-wrap: break-word;
}
.gl-tip .gl-tip-pop[hidden] { display: none; }