.ff-context-help {
  display:inline-flex;
  position:relative;
  align-items:center;
  flex:none;
  vertical-align:middle;
  margin-inline:6px 0;
  line-height:1;
  text-align:left;
}

.ff-help-heading,
.ff-help-label {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  min-width:0;
}
.ff-help-heading > :is(h1, h2, h3, h4),
.ff-help-label > :is(label, strong, span, p) { margin:0; }
.ff-help-heading > .ff-context-help,
.ff-help-label > .ff-context-help { margin-inline:0; }
.access-section-title:has(> .ff-context-help) { justify-content:flex-start; }
.desk-field:not(.desk-field--checkbox):has(> .ff-context-help) > label {
  display:inline-block;
  margin-inline-end:0;
  vertical-align:middle;
}
.desk-field:not(.desk-field--checkbox) > .ff-context-help { margin-block-end:8px; }

.ff-context-help > summary {
  display:grid;
  place-items:center;
  box-sizing:border-box;
  inline-size:32px;
  block-size:32px;
  padding:0;
  border:1px solid var(--ff-line, var(--brand-line));
  border-radius:50%;
  background:var(--ff-card, var(--brand-paper));
  color:var(--ff-secondary, var(--brand-muted));
  font:700 14px/1 var(--ff-font-ui, var(--brand-font-body));
  cursor:pointer;
  list-style:none;
  user-select:none;
}

.ff-context-help > summary::-webkit-details-marker { display:none; }
.ff-context-help > summary::marker { content:""; }
.ff-context-help > summary:hover,
.ff-context-help[open] > summary {
  border-color:var(--ff-action, var(--brand-red));
  color:var(--ff-link, var(--brand-red-dark));
  background:var(--ff-tint, var(--brand-cream));
}
.ff-context-help > summary:focus-visible {
  outline:2px solid var(--ff-action, var(--brand-red));
  outline-offset:3px;
}

.ff-context-help__panel,
.ff-context-help-popover {
  box-sizing:border-box;
  width:min(340px, calc(100vw - 24px));
  max-height:min(360px, calc(100dvh - 24px));
  overflow:auto;
  padding:13px 16px;
  border:1px solid var(--ff-line, var(--brand-line));
  border-radius:var(--ff-control-radius, var(--brand-control-radius));
  background:var(--ff-card, var(--brand-paper));
  box-shadow:var(--ff-mini-dialog-shadow, var(--brand-shadow-large));
  color:var(--ff-text, var(--brand-ink));
  font:400 13px/1.5 var(--ff-font-ui, var(--brand-font-body));
  letter-spacing:normal;
  text-transform:none;
  white-space:normal;
  overflow-wrap:anywhere;
  z-index:2000;
}

/* Native details remain useful if JavaScript fails. With JavaScript, the same
   text is moved to a body-level popover so cards and tables cannot clip it. */
.ff-context-help__panel {
  position:absolute;
  inset-block-start:calc(100% + 8px);
  inset-inline-start:0;
}
.ff-context-help[data-help-align="right"] .ff-context-help__panel {
  inset-inline-start:auto;
  inset-inline-end:0;
}
.ff-context-help-js .ff-context-help__panel { display:none; }
.ff-context-help-popover { position:fixed; margin:0; pointer-events:none; }

@media (prefers-reduced-motion:no-preference) {
  .ff-context-help > summary { transition:background-color .16s ease, border-color .16s ease, color .16s ease; }
}