.context-help { display: inline-flex; flex: none; }
.context-help-trigger {
  display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem;
  border: 1px solid var(--ui-border, #dce3ed); border-radius: 50%;
  background: var(--ui-raised, #f8fafc); color: var(--ui-muted, #526178);
  font-size: .875rem; font-weight: 700; cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease;
}
.context-help-trigger:hover, .context-help-trigger[aria-expanded="true"] {
  border-color: var(--tenant-accent, #087e95); color: var(--tenant-accent, #087e95);
}
.context-help-trigger:focus-visible { outline: 2px solid var(--tenant-accent, #087e95); outline-offset: 3px; }
.context-help-panel {
  position: fixed; inset: auto; margin: 0; width: min(20rem, calc(100vw - 24px));
  max-height: calc(100dvh - 24px); overflow: auto; box-sizing: border-box;
  padding: 1rem; border: 1px solid var(--ui-border, #dce3ed); border-radius: 1rem;
  background: var(--ui-surface, white); color: var(--ui-text, #172033);
  box-shadow: 0 12px 32px #0002; font-size: .875rem; line-height: 1.5;
}
.context-help-panel strong, .context-help-panel > span { display: block; }
.context-help-panel > span { margin-top: .4rem; color: var(--ui-muted, #526178); }
.context-help-panel:popover-open { animation: context-help-in 160ms ease-out both; }
@keyframes context-help-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@media (hover: hover) and (pointer: fine) { .context-help-trigger { width: 2rem; height: 2rem; } }
@media (prefers-reduced-motion: reduce) { .context-help-panel:popover-open { animation: none; } }
.app-body[data-reveal-enabled-value="false"] .context-help-panel:popover-open { animation: none; }