/* App-wide question-mark help standard, including legacy help controls. */
:root {
  --app-help-background: linear-gradient(135deg, #2ec5ff, #7c3aed);
  --app-help-hover-background: #5745c6;
  --app-help-shadow: 0 2px 5px rgba(76, 81, 191, 0.22);
  /* Glyph font-size as a share of the bubble diameter. Help "?" and Info "i"
     use the same ratio so the mark fills each circle the same way. */
  --app-help-glyph-ratio: 0.7;
  --app-help-bubble-size: 30px;
  --app-info-bubble-size: 24px;
  --app-help-launcher-size: 40px;
}

/* Informational context uses an italic i; task and page help uses ?. */
.app-info-bubble {
  --app-mark-bubble-size: var(--app-info-bubble-size);
  align-items: center !important;
  appearance: none !important;
  background: var(--app-help-background) !important;
  border: 0 !important;
  border-radius: 50% !important;
  box-shadow: var(--app-help-shadow) !important;
  box-sizing: border-box !important;
  color: #fff !important;
  display: inline-flex !important;
  flex: 0 0 var(--app-mark-bubble-size) !important;
  font-family: Georgia, "Times New Roman", Times, serif !important;
  font-size: calc(var(--app-mark-bubble-size) * var(--app-help-glyph-ratio)) !important;
  font-style: italic !important;
  font-weight: 700 !important;
  height: var(--app-mark-bubble-size) !important;
  justify-content: center !important;
  line-height: 1 !important;
  min-height: var(--app-mark-bubble-size) !important;
  min-width: var(--app-mark-bubble-size) !important;
  /* Optical nudge: Georgia italic "i" sits high in the circle; prefer
     top padding over bottom so the glyph centers visually app-wide. */
  padding: 1px 1px 0 0 !important;
  text-decoration: none !important;
  vertical-align: middle !important;
  width: var(--app-mark-bubble-size) !important;
}
button.app-info-bubble,
summary.app-info-bubble { cursor: pointer !important; }
button.app-info-bubble:hover,
button.app-info-bubble:focus-visible,
summary:hover .app-info-bubble,
details[open] > summary .app-info-bubble,
.app-info-bubble.is-open {
  background: var(--app-help-hover-background) !important;
}
button.app-info-bubble:focus-visible,
summary:focus-visible .app-info-bubble {
  outline: 2px solid #175cd3 !important;
  outline-offset: 2px !important;
}
.app-info-bubble[hidden] { display: none !important; }
.app-help-trigger {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 50%;
  cursor: pointer;
  list-style: none;
  flex: 0 0 34px;
  transform: none !important;
}
.app-help-trigger::-webkit-details-marker { display: none; }
.app-help-trigger::marker { content: ''; }
.app-help-trigger::before {
  border: 0 !important;
  content: none !important;
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  width: 0 !important;
}
.app-help-trigger:focus-visible { outline: 2px solid #175cd3 !important; outline-offset: 2px; }
.app-help-trigger__icon {
  --app-mark-bubble-size: var(--app-help-bubble-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--app-mark-bubble-size);
  height: var(--app-mark-bubble-size);
  border-radius: 50%;
  background: var(--app-help-background);
  color: white;
  font-size: calc(var(--app-mark-bubble-size) * var(--app-help-glyph-ratio));
  font-weight: 900;
  line-height: 1;
  box-shadow: var(--app-help-shadow);
}
.app-help-trigger:hover .app-help-trigger__icon,
details[open] > .app-help-trigger .app-help-trigger__icon { background: var(--app-help-hover-background); }

/* Preserve each control's behavior and placement while sharing its appearance.
   Important declarations override older page-specific help button skins. */
.inline-help-button,
.keshboard-drawer__field-help,
.development-item-creation-help__icon {
  --app-mark-bubble-size: var(--app-help-bubble-size);
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--app-help-background) !important;
  color: #fff !important;
  box-shadow: var(--app-help-shadow) !important;
  font-family: inherit !important;
  font-size: calc(var(--app-mark-bubble-size) * var(--app-help-glyph-ratio)) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  width: var(--app-mark-bubble-size) !important;
  min-width: var(--app-mark-bubble-size) !important;
  height: var(--app-mark-bubble-size) !important;
  min-height: var(--app-mark-bubble-size) !important;
  flex: 0 0 var(--app-mark-bubble-size) !important;
  padding: 0 !important;
  transform: none !important;
}
.inline-help-button:hover,
.keshboard-drawer__field-help:hover,
.development-item-creation-help__trigger:hover .development-item-creation-help__icon {
  background: var(--app-help-hover-background) !important;
}
.inline-help-button:focus-visible,
.keshboard-drawer__field-help:focus-visible {
  outline: 2px solid #175cd3 !important;
  outline-offset: 2px !important;
}

/* Cycle-table help stays compact without shrinking the floating help launcher. */
.home-planning-module-card .inline-help-button {
  --app-help-bubble-size: 20px;
  position: relative;
}
.home-planning-module-card .inline-help-button::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
}

/* Floating launchers retain their larger hit area and viewport positioning. */
.in-app-help-bubble,
.setup-checklist-launcher {
  --app-mark-bubble-size: var(--app-help-launcher-size);
  background: var(--app-help-background) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 50% !important;
  box-shadow: var(--app-help-shadow) !important;
  font-size: calc(var(--app-mark-bubble-size) * var(--app-help-glyph-ratio)) !important;
  line-height: 1 !important;
}
.in-app-help-bubble {
  --app-mark-bubble-size: 44px;
}
.in-app-help-bubble--collapsed {
  --app-mark-bubble-size: 34px;
}
.in-app-help-bubble:hover,
.setup-checklist-launcher:hover {
  background: var(--app-help-hover-background) !important;
}
.in-app-help-bubble__mark,
.setup-checklist-launcher > span {
  color: #fff !important;
  font-size: calc(var(--app-mark-bubble-size) * var(--app-help-glyph-ratio)) !important;
  font-weight: 900;
  line-height: 1 !important;
}

/* Body text zoom sets font-size !important on button/summary and would otherwise
   flatten every Help/Info mark to 1em. These glyphs scale with the circle, not body text. */
html[data-keshero-text-size] :is(
  .app-info-bubble,
  .inline-help-button,
  .keshboard-drawer__field-help,
  .setup-checklist-launcher,
  .in-app-help-bubble,
  .app-help-trigger__icon,
  .development-item-creation-help__icon,
  .in-app-help-bubble__mark,
  .setup-checklist-launcher > span
) {
  font-size: calc(var(--app-mark-bubble-size, var(--app-help-bubble-size)) * var(--app-help-glyph-ratio)) !important;
}
.in-app-help-bubble:hover,
.in-app-help-bubble:focus-visible { width: 44px; }
.in-app-help-bubble--collapsed:hover,
.in-app-help-bubble--collapsed:focus-visible { width: 34px; }
.in-app-help-bubble .in-app-help-bubble__label { display: none !important; }

.app-help-trigger[hidden],
.inline-help-button[hidden],
.keshboard-drawer__field-help[hidden],
.in-app-help-bubble[hidden],
.setup-checklist-launcher[hidden] { display: none !important; }