.contextInfo,
:is(#appView, #sheet) span.contextInfo {
  position: relative;
  display: inline-flex;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  align-self: center;
  align-items: center;
  justify-content: center;
  line-height: 1;
  vertical-align: middle;
}

.contextInfoTrigger,
:is(#appView, #sheet) button.contextInfoTrigger {
  position: relative;
  display: inline-grid;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin: 0;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #5d6f65;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Keep a comfortable 44px touch target without making the visible icon or title gap larger. */
.contextInfoTrigger::before {
  position: absolute;
  inset: -13px;
  border-radius: 50%;
  content: "";
}

.contextInfoMark,
:is(#appView, #sheet) span.contextInfoMark {
  position: relative;
  display: grid;
  width: 16px;
  height: 16px;
  place-items: center;
  border: 1.25px solid currentColor;
  border-radius: 50%;
  background: #fff;
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 9px;
  font-style: normal;
  font-weight: 850;
  line-height: 1;
  margin: 0;
  color: inherit;
}

.contextInfoTrigger:hover .contextInfoMark,
.contextInfoTrigger[aria-expanded="true"] .contextInfoMark {
  border-color: #469b46;
  background: #edf7ed;
  color: #2f7d35;
}

.contextInfoTrigger:focus-visible {
  outline: none;
}

.contextInfoTrigger:focus-visible .contextInfoMark {
  box-shadow: 0 0 0 3px rgb(76 167 68 / 34%);
}

.contextInfoOnDark .contextInfoTrigger {
  color: #c8d7cf;
}

.contextInfoOnDark .contextInfoMark {
  border-color: rgb(255 255 255 / 48%);
  background: rgb(255 255 255 / 10%);
  color: #fff;
}

.contextInfoOnDark .contextInfoTrigger:hover .contextInfoMark,
.contextInfoOnDark .contextInfoTrigger[aria-expanded="true"] .contextInfoMark {
  border-color: #91d485;
  background: rgb(104 198 91 / 18%);
  color: #c8efc0;
}

.contextInfoPopover,
:is(#appView, #sheet) span.contextInfoPopover {
  position: fixed;
  z-index: 2147483647;
  inset: auto;
  width: max-content;
  max-width: min(300px, calc(100vw - 24px));
  max-height: min(240px, calc(100dvh - 24px));
  margin: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 11px 13px;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 12px;
  isolation: isolate;
  background: #010510;
  box-shadow: 0 14px 34px rgb(1 5 16 / 25%);
  color: #f7fbf8;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.48;
  text-align: left;
  white-space: normal;
}

.contextInfoPopover[hidden] {
  display: none !important;
}

.contextInfoTitle,
:is(#appView, #sheet) .contextInfoTitle {
  display: flex;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
}

.contextInfoTitle > :is(h1, h2, h3, h4, label) {
  min-width: 0;
  flex: 0 1 auto;
}

/* In the one form-label use, keep the icon beside the label instead of centering it beside the full control. */
.contextInfoTitle:has(> label) {
  align-items: flex-start;
}

.contextInfoTitle > label + .contextInfo {
  margin-top: 1px;
}

@media (prefers-reduced-motion: reduce) {
  .contextInfoTrigger {
    scroll-behavior: auto;
  }
}