/* Tooltip: .civios-tip wraps a trigger button and its role="tooltip" text ---- */
/* Shown on hover, keyboard focus and tap (tooltip_controller.js); Escape hides it.
   The controller shifts it left when it would run past the edge of the viewport. */
.civios-tip { position: relative; display: inline-flex; align-self: flex-start; }
.civios-tip > button { margin: 0; font-family: inherit; line-height: inherit; cursor: help; }
.civios-tip > button:focus-visible { outline: 2px solid var(--civios-teal); outline-offset: 2px; }

.civios-tooltip {
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% + .375rem);
  z-index: 20;
  width: max-content;
  max-width: min(18rem, calc(100vw - 2rem));
  padding: .625rem .75rem;
  border-radius: var(--civios-r-lg);
  background: var(--civios-deep);
  color: var(--civios-wit);
  box-shadow: var(--civios-shadow-lift);
  font-family: var(--civios-font-sans);
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  white-space: normal;
}
/* Bridges the gap, so the pointer can move onto the tooltip without it closing. */
.civios-tooltip::before { content: ""; position: absolute; left: 0; right: 0; top: -.375rem; height: .375rem; }
.civios-tooltip-noot { display: block; margin-top: .25rem; opacity: .8; }

.civios-tip:hover > .civios-tooltip,
.civios-tip:focus-within > .civios-tooltip,
.civios-tip.is-open > .civios-tooltip { display: block; }
.civios-tip.is-verborgen > .civios-tooltip { display: none; }

/* Civios-validatie badge: Basis neutral, Verhoogd teal, Uitgebreid gold --------- */
.civios-validatie { font-weight: 700; }
.civios-validatie.is-basic { background: var(--civios-paper); color: var(--civios-muted); }
.civios-validatie.is-enhanced { border-color: var(--civios-teal-mid); background: var(--civios-sage-soft); color: var(--civios-teal); }
.civios-validatie.is-extensive { border-color: rgba(255, 222, 89, .7); background: var(--civios-gold-soft); color: var(--civios-deep); }