:host {
  /* Per-size geometry resolved at the host level so JS positioning + CSS share one truth. */
  --tooltip-arrow-size: var(--tooltip-arrow-size-sm);
  --tooltip-arrow-width: var(--tooltip-arrow-width-sm);
  --tooltip-padding-block: var(--tooltip-container-padding-block-sm);
  --tooltip-padding-inline: var(--tooltip-container-padding-inline-sm);
  --tooltip-padding-inline-end: var(--tooltip-container-padding-inline-sm);
  --tooltip-border-radius: var(--tooltip-container-border-radius-sm);
  --tooltip-gap: var(--tooltip-container-gap-sm);

  display: inline-block;
  position: relative;
  line-height: 0;
}

:host([size='lg']) {
  --tooltip-arrow-size: var(--tooltip-arrow-size-lg);
  --tooltip-arrow-width: var(--tooltip-arrow-width-lg);
  --tooltip-padding-block: var(--tooltip-container-padding-block-lg);
  --tooltip-padding-inline: var(--tooltip-container-padding-inline-lg);
  --tooltip-padding-inline-end: var(--tooltip-container-padding-inline-lg);
  --tooltip-border-radius: var(--tooltip-container-border-radius-lg);
  --tooltip-gap: var(--tooltip-container-gap-lg);
}

:host([variant='coach'][size='lg']) {
  /* Coach close-button sits 12px from the right per Figma; reserve room. */
  --tooltip-padding-inline-end: calc(
    var(--tooltip-container-padding-inline-end-lg) + var(--tooltip-close-size) + var(--tooltip-container-gap-lg)
  );
}

:host([variant='coach'][size='sm']) {
  --tooltip-padding-inline-end: calc(
    var(--tooltip-container-padding-inline-sm) + var(--tooltip-close-size) + var(--tooltip-container-gap-sm)
  );
}

/* Trigger wrapper — preserves inline layout of the slotted control. */
.trigger {
  display: inline-flex;
  align-items: center;
  line-height: normal;
}

/* Bubble — the floating surface. Block element so text laying out inside the
   `.content` paragraph wraps normally below the inline `max-width` cap. The
   coach close button is absolutely positioned in the top-right corner; the
   bubble reserves space for it via the variant-specific `--tooltip-padding-inline-end`. */
.bubble {
  position: fixed;
  /* Runtime geometry is pushed onto the host as `--_bubble-*` custom
     properties (see updateGeometry in mud-tooltip.tsx). Fallbacks keep
     the bubble off-screen before the first geometry pass. */
  top: var(--_bubble-top, 0);
  left: var(--_bubble-left, 0);
  max-width: var(--_bubble-max-width, var(--tooltip-container-max-width));
  z-index: var(--tooltip-container-z-index);
  box-sizing: border-box;
  padding-block: var(--tooltip-padding-block);
  padding-inline-start: var(--tooltip-padding-inline);
  padding-inline-end: var(--tooltip-padding-inline-end);
  background-color: var(--tooltip-container-background-default);
  color: var(--tooltip-label-color-default);
  border-radius: var(--tooltip-border-radius);
  box-shadow: var(--tooltip-container-shadow);
  font-family: var(--tooltip-label-font-family);
  font-size: var(--tooltip-label-font-size);
  font-weight: var(--tooltip-label-font-weight);
  line-height: var(--tooltip-label-line-height);
  text-align: center;
  /* Reset inheritable text-flow rules — when the tooltip is placed inside a
     nowrap/ellipsis container (e.g. a breadcrumb trail), `white-space` and
     friends inherit through the host into the bubble and prevent the long
     label from wrapping inside the bubble. */
  white-space: normal;
  text-overflow: clip;
  word-break: normal;
  overflow-wrap: anywhere;
  width: max-content;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(var(--spacing-2));
  transition-property: opacity, transform, visibility;
  transition-duration: var(--tooltip-container-transition-duration);
  transition-timing-function: var(--tooltip-container-transition-timing-function);
}

:host(.is-open) .bubble {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

:host(.variant-coach.is-open) .bubble {
  pointer-events: auto;
}

/* Coach variant left-aligns instructional copy. */
:host(.variant-coach) .bubble {
  text-align: start;
}

.content {
  overflow-wrap: break-word;
}

.hint {
  margin: var(--tooltip-hint-margin-top) 0 0 0;
  font-size: var(--tooltip-hint-font-size);
  line-height: var(--tooltip-hint-line-height);
  font-weight: var(--tooltip-hint-font-weight);
  color: var(--tooltip-hint-color-default);
  opacity: var(--tooltip-hint-opacity);
}

/* Close button — coach variant only. Pinned to the bubble's top-right corner. */
.close {
  /* The 16px glyph keeps its place (padding-block from the top, 12px from the end); the hit target
     is centred on it: 32px, 40px on touch (Figma Target Sizes 578:34599, 578:34626). */
  --_close-target: var(--tooltip-close-target);
  --_close-bleed: calc((var(--_close-target) - var(--tooltip-close-size)) / 2);

  position: absolute;
  top: calc(var(--tooltip-padding-block) - var(--_close-bleed));
  inset-inline-end: calc(var(--tooltip-container-padding-inline-end-lg, var(--spacing-12)) - var(--_close-bleed));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--_close-target);
  height: var(--_close-target);
  padding: 0;
  margin: 0;
  background-color: var(--tooltip-close-background-default);
  color: var(--tooltip-close-color-default);
  border: none;
  border-radius: var(--tooltip-close-border-radius);
  cursor: pointer;
  transition: background-color var(--tooltip-container-transition-duration)
    var(--tooltip-container-transition-timing-function);
}

.close:hover {
  background-color: var(--tooltip-close-background-hover);
}

.close:focus-visible {
  outline: var(--border-width-2) solid var(--color-background-brand-focus-ring, currentColor);
  outline-offset: var(--spacing-2);
}

@media (pointer: coarse) {
  .close {
    --_close-target: var(--tooltip-close-touch-target);
  }
}

.close-icon {
  width: var(--tooltip-close-size);
  height: var(--tooltip-close-size);
  pointer-events: none;
}

/* Arrow — Figma's own shape (32 x 12, 21.33 x 8 on Small): a flat base that flares out of the bubble
   edge and a rounded tip (210:3904, 611:2349). It is a box of that size painted through a mask of the
   Figma path, so it scales to both sizes; a border triangle would be sharp and cannot be 21.33px wide.
   The mask is one path per direction: it points down (below the bubble), up, right or left. */
.arrow {
  position: absolute;
  background-color: var(--tooltip-container-background-default);
  pointer-events: none;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/*
 * Arrow offset along the cross-axis is set on the host as `--_arrow-offset`
 * by updateGeometry. The `transform` centres the arrow over that offset
 * (half its width / height). Combined placements (e.g. `top-left`) share the
 * same arrow side as their base.
 */

/* ---- Base: top + alignments (the arrow hangs below the bubble) ---- */
:host(.position-top) .arrow,
:host(.position-top-left) .arrow,
:host(.position-top-right) .arrow {
  inline-size: var(--tooltip-arrow-width);
  block-size: var(--tooltip-arrow-size);
  bottom: calc(var(--tooltip-arrow-size) * -1);
  left: var(--_arrow-offset, 0);
  transform: translateX(calc(var(--tooltip-arrow-width) / -2));
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 12' preserveAspectRatio='none'%3E%3Cpath d='M0 0L32 0C29.2951 0.14663 26.8761 1.38308 25.1628 3.25987L18.5803 10.8229C17.2143 12.3924 14.7857 12.3924 13.4197 10.8229L6.83622 3.2587C5.12292 1.38256 2.70436 0.14659 0 0Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 12' preserveAspectRatio='none'%3E%3Cpath d='M0 0L32 0C29.2951 0.14663 26.8761 1.38308 25.1628 3.25987L18.5803 10.8229C17.2143 12.3924 14.7857 12.3924 13.4197 10.8229L6.83622 3.2587C5.12292 1.38256 2.70436 0.14659 0 0Z'/%3E%3C/svg%3E");
}

/* ---- Base: bottom + alignments (the arrow stands above the bubble) ---- */
:host(.position-bottom) .arrow,
:host(.position-bottom-left) .arrow,
:host(.position-bottom-right) .arrow {
  inline-size: var(--tooltip-arrow-width);
  block-size: var(--tooltip-arrow-size);
  top: calc(var(--tooltip-arrow-size) * -1);
  left: var(--_arrow-offset, 0);
  transform: translateX(calc(var(--tooltip-arrow-width) / -2));
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 12' preserveAspectRatio='none'%3E%3Cpath d='M0 12L32 12C29.2951 11.85337 26.8761 10.61692 25.1628 8.74013L18.5803 1.1771C17.2143 -0.3924 14.7857 -0.3924 13.4197 1.1771L6.83622 8.7413C5.12292 10.61744 2.70436 11.85341 0 12Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 12' preserveAspectRatio='none'%3E%3Cpath d='M0 12L32 12C29.2951 11.85337 26.8761 10.61692 25.1628 8.74013L18.5803 1.1771C17.2143 -0.3924 14.7857 -0.3924 13.4197 1.1771L6.83622 8.7413C5.12292 10.61744 2.70436 11.85341 0 12Z'/%3E%3C/svg%3E");
}

/* ---- Base: left + alignments (the arrow sticks out to the right) ---- */
:host(.position-left) .arrow,
:host(.position-left-top) .arrow,
:host(.position-left-bottom) .arrow {
  inline-size: var(--tooltip-arrow-size);
  block-size: var(--tooltip-arrow-width);
  right: calc(var(--tooltip-arrow-size) * -1);
  top: var(--_arrow-offset, 0);
  transform: translateY(calc(var(--tooltip-arrow-width) / -2));
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 32' preserveAspectRatio='none'%3E%3Cpath d='M0 0L0 32C0.14663 29.2951 1.38308 26.8761 3.25987 25.1628L10.8229 18.5803C12.3924 17.2143 12.3924 14.7857 10.8229 13.4197L3.2587 6.83622C1.38256 5.12292 0.14659 2.70436 0 0Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 32' preserveAspectRatio='none'%3E%3Cpath d='M0 0L0 32C0.14663 29.2951 1.38308 26.8761 3.25987 25.1628L10.8229 18.5803C12.3924 17.2143 12.3924 14.7857 10.8229 13.4197L3.2587 6.83622C1.38256 5.12292 0.14659 2.70436 0 0Z'/%3E%3C/svg%3E");
}

/* ---- Base: right + alignments (the arrow sticks out to the left) ---- */
:host(.position-right) .arrow,
:host(.position-right-top) .arrow,
:host(.position-right-bottom) .arrow {
  inline-size: var(--tooltip-arrow-size);
  block-size: var(--tooltip-arrow-width);
  left: calc(var(--tooltip-arrow-size) * -1);
  top: var(--_arrow-offset, 0);
  transform: translateY(calc(var(--tooltip-arrow-width) / -2));
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 32' preserveAspectRatio='none'%3E%3Cpath d='M12 0L12 32C11.85337 29.2951 10.61692 26.8761 8.74013 25.1628L1.1771 18.5803C-0.3924 17.2143 -0.3924 14.7857 1.1771 13.4197L8.7413 6.83622C10.61744 5.12292 11.85341 2.70436 12 0Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 32' preserveAspectRatio='none'%3E%3Cpath d='M12 0L12 32C11.85337 29.2951 10.61692 26.8761 8.74013 25.1628L1.1771 18.5803C-0.3924 17.2143 -0.3924 14.7857 1.1771 13.4197L8.7413 6.83622C10.61744 5.12292 11.85341 2.70436 12 0Z'/%3E%3C/svg%3E");
}

/* ---- Slot validation error indicator (legacy parity) ---- */
.slot-error {
  position: absolute;
  inset: auto 0 100%;
  margin-block-end: var(--spacing-2);
  padding: var(--spacing-4) var(--spacing-8);
  background-color: var(--color-background-danger-default);
  color: var(--color-text-base-inverse-default);
  font-size: var(--font-size-12);
  font-family: var(--tooltip-label-font-family);
  border-radius: var(--border-radius-4);
  z-index: var(--tooltip-container-z-index);
}

/* Respect reduced motion globally. */
@media (prefers-reduced-motion: reduce) {
  .bubble {
    transition-duration: 0ms;
    transform: none;
  }
}