/* ============================================================
   PIXFORGE HELP TIP
   A real <button> trigger plus a role="tooltip" bubble. Behaviour lives in
   /public/js/help-tip.js. Markup:

   <span class="help-tip-wrap">
     <button type="button" class="help-tip" aria-label="About X" aria-describedby="tip-x" aria-expanded="false">
       <span class="help-tip__icon" aria-hidden="true">?</span>
     </button>
     <span class="help-tip__bubble" role="tooltip" id="tip-x" hidden>Explanation</span>
   </span>

   The trigger has a 40px hit area (the visible badge is smaller) so it is easy
   to tap. The bubble is position: fixed and placed by script, so it can never
   be clipped by an overflow container or run off the viewport.
   ============================================================ */

.help-tip-wrap {
  display: inline-flex;
  align-items: center;
  flex: none;
}

/* The page-level button rules are deliberately out-specified here: a help tip
   is never an action button. */
button.help-tip {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  min-width: 40px;
  margin: -9px;
  padding: 0;
  border: 0;
  border-radius: 50% !important;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  line-height: 1;
  cursor: help;
  box-shadow: none;
  transform: none !important;
  -webkit-tap-highlight-color: transparent;
}

button.help-tip:hover,
button.help-tip[aria-expanded="true"] {
  background: transparent;
  border: 0;
  color: var(--text-primary);
}

.help-tip__icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--border-hover);
  border-radius: 50%;
  background: var(--bg-elevated);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}

button.help-tip:hover .help-tip__icon,
button.help-tip:focus-visible .help-tip__icon,
button.help-tip[aria-expanded="true"] .help-tip__icon {
  border-color: var(--brand-cyan);
  background: var(--selection-surface);
  color: var(--text-primary);
}

button.help-tip:focus-visible {
  outline: 2px solid var(--brand-cyan) !important;
  outline-offset: -2px;
  box-shadow: none;
}

.help-tip__bubble {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 95000;
  box-sizing: border-box;
  width: max-content;
  max-width: min(300px, calc(100vw - 24px));
  padding: 10px 12px;
  border: 1px solid var(--border-hover);
  border-left: 3px solid var(--brand-cyan);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  color: var(--text-primary);
  box-shadow: var(--shadow-md);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  pointer-events: none;
}

.help-tip__bubble[hidden] {
  display: none;
}