/* ── Field help bubble (public/assets/js/hrpm-help.js, any [data-help]) ──
   Colours and width come from config/field_help.json as --help-* variables (views/shared/_field-help.php) — change
   them there, not here. A comic-style callout: dark cream, thick outline, a tail pointing at the field (--tail-x is
   set by the script), .is-below flips it under the field. The bulb switches on (flicker, then a soft glow) and the
   text types itself in; with reduced motion both are instant. */
.hrpm-help-bubble {
  position: absolute; z-index: 2000; display: none; align-items: flex-start; gap: 9px;
  max-width: min(var(--help-max-width, 340px), calc(100vw - 16px)); padding: 9px 13px 10px 11px;
  background: var(--help-bg, #F0DDB0); color: var(--help-text, #3A2A12); font-size: .82rem; line-height: 1.45;
  border: 2px solid var(--help-border, #6B4F2A); border-radius: 14px;
  box-shadow: 3px 3px 0 var(--help-shadow, rgba(107, 79, 42, .28));
  pointer-events: none; opacity: 0; transform: translateY(5px) scale(.94); transform-origin: var(--tail-x, 20px) 100%;
  transition: opacity .18s ease, transform .22s cubic-bezier(.34, 1.56, .64, 1);
}
.hrpm-help-bubble.is-on { opacity: 1; transform: none; }
.hrpm-help-bubble.is-below { transform-origin: var(--tail-x, 20px) 0; }
.hrpm-help-bubble::before, .hrpm-help-bubble::after {
  content: ''; position: absolute; left: var(--tail-x, 20px); width: 0; height: 0; border-style: solid;
}
/* Tail: an outline triangle with the fill triangle on top of it. */
.hrpm-help-bubble::before { bottom: -12px; border-width: 12px 9px 0 9px; border-color: var(--help-border, #6B4F2A) transparent transparent transparent; }
.hrpm-help-bubble::after  { bottom: -8px; margin-left: 2px; border-width: 9px 7px 0 7px; border-color: var(--help-bg, #F0DDB0) transparent transparent transparent; }
.hrpm-help-bubble.is-below::before { bottom: auto; top: -12px; border-width: 0 9px 12px 9px; border-color: transparent transparent var(--help-border, #6B4F2A) transparent; }
.hrpm-help-bubble.is-below::after  { bottom: auto; top: -8px; border-width: 0 7px 9px 7px; border-color: transparent transparent var(--help-bg, #F0DDB0) transparent; }

/* Three steps (hrpm-help.js puts the icon in, the bubble's class says which): .is-off an unlit grey bulb,
   .is-thinking a brain that pulses while the sentence prints, .is-lit the bulb switching on (flicker) and then
   glowing softly while the bubble stays open. */
.hrpm-help-bubble .hrpm-help-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 1.3rem; height: 1.3rem; font-size: 1.15rem; line-height: 1; color: var(--help-bulb-off, #9C8A6A);
}
.hrpm-help-bubble .hrpm-help-icon svg { width: 1.1rem; height: 1.1rem; }
.hrpm-help-bubble.is-off .hrpm-help-icon { color: var(--help-bulb-off, #9C8A6A); animation: hrpm-help-pop .25s ease-out; }
.hrpm-help-bubble.is-thinking .hrpm-help-icon { color: var(--help-brain, #B4536A); animation: hrpm-help-pop .2s ease-out, hrpm-brain-think .7s ease-in-out .2s infinite; }
.hrpm-help-bubble.is-lit .hrpm-help-icon { animation: hrpm-bulb-on .7s ease-out forwards, hrpm-bulb-glow 1.8s ease-in-out .7s infinite; }
@keyframes hrpm-help-pop { 0% { transform: scale(.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes hrpm-brain-think {
  0%, 100% { transform: scale(1) rotate(0deg); filter: none; }
  50%      { transform: scale(1.12) rotate(-6deg); filter: drop-shadow(0 0 3px var(--help-brain, #B4536A)); }
}
@keyframes hrpm-bulb-on {
  0%   { color: var(--help-bulb-off, #9C8A6A); text-shadow: none; transform: scale(.6); }
  18%  { color: var(--help-bulb, #FFB300); text-shadow: 0 0 8px var(--help-glow, rgba(255, 190, 0, .85)); transform: scale(1.1); }
  30%  { color: var(--help-bulb-off, #9C8A6A); text-shadow: none; }
  48%  { color: var(--help-bulb, #FFB300); text-shadow: 0 0 10px var(--help-glow, rgba(255, 190, 0, .85)); }
  58%  { color: var(--help-bulb-off, #9C8A6A); text-shadow: none; }
  100% { color: var(--help-bulb, #FFB300); text-shadow: 0 0 6px var(--help-glow, rgba(255, 190, 0, .85)), 0 0 14px var(--help-glow, rgba(255, 190, 0, .85)); transform: scale(1); }
}
@keyframes hrpm-bulb-glow {
  0%, 100% { color: var(--help-bulb, #FFB300); text-shadow: 0 0 6px var(--help-glow, rgba(255, 190, 0, .85)), 0 0 14px var(--help-glow, rgba(255, 190, 0, .85)); }
  50%      { color: var(--help-bulb, #FFB300); text-shadow: 0 0 3px var(--help-glow, rgba(255, 190, 0, .85)), 0 0 7px var(--help-glow, rgba(255, 190, 0, .85)); }
}
/* Text: the full sentence (invisible) holds the size, the typed copy is laid over it — the bubble never jumps. */
.hrpm-help-bubble .hrpm-help-text { position: relative; }
.hrpm-help-bubble .hrpm-help-ghost { visibility: hidden; }
.hrpm-help-bubble .hrpm-help-typed { position: absolute; inset: 0; }
.hrpm-help-bubble .hrpm-help-typed.is-typing::after { content: '▍'; opacity: .55; margin-left: 1px; }
@media (prefers-reduced-motion: reduce) {
  .hrpm-help-bubble { transition: none; }
  .hrpm-help-bubble .hrpm-help-icon { animation: none !important; }
  .hrpm-help-bubble.is-lit .hrpm-help-icon { color: var(--help-bulb, #FFB300); text-shadow: 0 0 6px var(--help-glow, rgba(255, 190, 0, .85)); }
}