/* Help text and tips behind an ⓘ (static/js/help.js): the icon, a field's help opened in place,
   and a column tip's bubble. On back-office and working pages alike, so colours fall back from
   the back office's names to derp.css's. */
button.help-toggle {
  display: inline-grid; place-items: center; width: 16px; height: 16px; min-height: 0; margin: 0 0 0 6px;
  padding: 0; border: 1px solid currentColor; border-radius: 50%; background: none; cursor: pointer;
  color: var(--body-quiet-color, var(--muted, #6b6b66)); font: italic 700 10px/1 Georgia, "Times New Roman", serif;
  text-transform: none; letter-spacing: 0; vertical-align: 1px; flex: none; box-shadow: none;
}
button.help-toggle:hover, button.help-toggle:focus-visible, button.help-toggle[aria-expanded="true"] {
  color: var(--link-fg, var(--accent, #2f5d50)); background: none;
}
@media (pointer: coarse) { button.help-toggle { width: 20px; height: 20px; font-size: 11.5px; } }
.help-folded { display: none !important; }
.help-folded.help-open {
  display: block !important; margin-top: 6px; padding: 7px 10px; border-radius: 6px; font-size: 12.5px;
  line-height: 1.45; color: var(--body-fg, var(--text, #222));
  background: var(--darkened-bg, var(--head-row, #f5f5f2)); border-left: 3px solid var(--link-fg, var(--accent, #2f5d50));
}
.help-bubble {
  position: absolute; z-index: 1000; max-width: 280px; padding: 8px 10px; border-radius: 8px; font-size: 12.5px;
  line-height: 1.45; text-transform: none; letter-spacing: 0; font-weight: 400;
  color: var(--body-fg, var(--text, #222)); background: var(--body-bg, var(--surface, #fff));
  border: 1px solid var(--border-color, var(--border, #ddd)); box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}