/* ==========================================================================
   Marketing — Info tip
   ==========================================================================
   A small round "i" that reveals a bubble of detail on hover, focus or press.
   The trigger is a real <button> (focusable, announced through its translated
   aria-label) and the bubble reveals on :hover / :focus-within — so it works
   with no JavaScript at all. A press pins it open through `is-open`
   (InfoTip.js): hover alone cannot survive the empty space between the trigger
   and a bubble anchored to the host, and touch has no hover to give. The three
   states are one rule below, so they can never drift apart.

   No flipping logic, and none needed: the bubble is positioned against its
   HOST, not against the trigger — so the host must be `position: relative`,
   and the bubble then opens above it, pinned to its left edge and capped at
   the host's own width. It can never reach a viewport edge the host does not
   already reach.

   The bubble carries the detail, never the meaning: what it says must be
   optional to the sentence it hangs off.
   ========================================================================== */

.mkt-infotip {
  display: inline;
  white-space: nowrap;
}

.mkt-infotip__trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05rem;
  height: 1.05rem;
  padding: 0;
  /* The lit values live in one rule below; these are the resting ones. */
  border: 1px solid var(--tip-ring, rgba(176, 173, 224, 0.34));
  border-radius: 50%;
  margin-left: 0.35rem;
  background: var(--tip-fill, rgba(255, 255, 255, 0.05));
  color: var(--tip-ink, var(--feat-muted, var(--gray-300)));
  font-family: var(--feat-mono, ui-monospace, monospace);
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition:
    border-color 180ms ease,
    color 180ms ease,
    background 180ms ease;
  vertical-align: 0.06em;
}

/* The glyph is decoration; the accessible name comes from the aria-label. */
.mkt-infotip__trigger::before {
  content: 'i';
}

/* Lit — hovered, keyboard-focused or pinned. */
.mkt-infotip__trigger:hover,
.mkt-infotip__trigger:focus-visible,
.mkt-infotip.is-open .mkt-infotip__trigger {
  --tip-ring: rgba(169, 144, 255, 0.75);
  --tip-fill: rgba(124, 60, 255, 0.18);
  --tip-ink: var(--feat-text, var(--gray-50));
}

.mkt-infotip__trigger:focus-visible {
  outline: 2px solid rgba(169, 144, 255, 0.85);
  outline-offset: 2px;
}

/* A 17px glyph is the right size to read and the wrong size to hit. On touch,
   the button keeps its drawn size and grows an invisible target around it,
   outside the flow so no line height moves. */
@media (pointer: coarse) {
  .mkt-infotip__trigger::after {
    content: '';
    position: absolute;
    inset: -0.75rem;
  }
}

.mkt-infotip__bubble {
  position: absolute;
  bottom: calc(100% + 0.6rem);
  left: 0;
  z-index: 20;
  /* A note, not a label: the mark that opened it stands at the head of the
     text, in its own column, so the bubble reads as a small aside rather than
     a floating paragraph. */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.7rem;
  align-items: start;
  /* Named because the lit edge below hangs off them: inside a grid container,
     an absolutely positioned child is laid out against the padding box, so the
     line has to climb back out by exactly the padding it sits in. */
  --tip-pad-y: 0.9rem;
  --tip-pad-x: 1.05rem;
  width: max-content;
  max-width: min(23rem, 100%);
  padding: var(--tip-pad-y) var(--tip-pad-x) calc(var(--tip-pad-y) + 0.05rem);
  border: 1px solid rgba(176, 173, 224, 0.3);
  border-radius: var(--feat-radius-sm, 14px);
  /* Fully opaque on purpose: this bubble lands on top of running copy, and a
     translucent panel would let that copy read straight through its own text.
     Two opaque inks rather than one — the panel is lit from the top, like
     every other surface in the family. */
  background: linear-gradient(rgb(27, 28, 66), rgb(20, 21, 52));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 22px 52px -12px rgba(2, 6, 23, 0.75);
  color: var(--feat-text, var(--gray-50));
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 400;
  /* Justified prose in a 23rem column only holds with hyphenation: without it
     a single long word opens rivers across two or three lines. Same trio the
     marketing families set on their ledes. */
  hyphens: auto;
  letter-spacing: normal;
  line-height: 1.5;
  opacity: 0;
  /* The host may be a centred claim or an uppercase tag; the bubble is prose
     either way and reads as prose. */
  text-align: justify;
  text-transform: none;
  text-wrap: pretty;
  transform: translateY(0.35rem);
  /* Closing waits: the pointer needs that grace to leave the trigger and land
     inside a bubble that does not touch it (opening cancels the delay below).
     Hiding is `visibility`, which gates sight and hit-testing together — and
     never `pointer-events`, which cannot transition and would therefore drop
     the instant the pointer leaves, killing the very travel this delay buys. */
  transition:
    opacity 180ms ease 220ms,
    transform 180ms ease 220ms,
    visibility 180ms 220ms;
  visibility: hidden;
  white-space: normal;
}

/* The trigger's own glyph, repeated at the head of the note: the bubble says
   where it came from without spending a word of copy on it. Decorative — what
   is announced is the sentence beside it, so this stays a pseudo-element. */
.mkt-infotip__bubble::before {
  content: 'i';
  display: grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  border: 1px solid rgba(169, 144, 255, 0.5);
  border-radius: 50%;
  background: rgba(124, 60, 255, 0.24);
  color: var(--feat-violet-soft, var(--brand-lavender-300));
  font-family: var(--feat-mono, ui-monospace, monospace);
  font-size: 0.64rem;
  font-weight: 700;
  line-height: 1;
  /* Sits on the first line of the sentence, not on the box that holds it. */
  translate: 0 0.12rem;
}

/* One lit hairline along the top edge, in the family's violet — the same line
   the boards and plates open with. It is out of flow, so it never becomes a
   column of the grid above. */
.mkt-infotip__bubble::after {
  content: '';
  position: absolute;
  top: calc(-1 * var(--tip-pad-y));
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(169, 144, 255, 0.6), transparent);
}

/* The translated copy is the bubble's only child, and the template's own
   indentation sits around it as whitespace. Left inline, that whitespace forms
   one more line box: the visible last line stops being the last one, and
   justification stretches it from edge to edge. As a block it owns the
   bubble's last line, and whitespace-only siblings are dropped — so the fix
   holds whatever the markup is indented to. Anything the copy carries inside
   it (a link, an emphasis) stays inline. */
.mkt-infotip__bubble > span {
  display: block;
}

/* Some bubbles send the reader somewhere — the fair use policy, a legal page.
   The link has to look like one inside a panel that is otherwise quiet prose. */
.mkt-infotip__link {
  color: var(--feat-violet-soft, var(--violet-400));
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.mkt-infotip__link:hover,
.mkt-infotip__link:focus-visible {
  color: var(--feat-text, var(--gray-50));
}

/* Open — hovered, keyboard-focused, or pinned by a press. One rule for the
   three, so no state can look different from another. */
.mkt-infotip:hover .mkt-infotip__bubble,
.mkt-infotip:focus-within .mkt-infotip__bubble,
.mkt-infotip.is-open .mkt-infotip__bubble {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0s;
  visibility: visible;
}

@media (hover: none) {
  .mkt-infotip__bubble {
    /* One panel the full width of its host, whatever the host. Tightened
       through the two padding variables, so the lit edge follows. */
    --tip-pad-y: 0.8rem;
    --tip-pad-x: 0.9rem;
    right: 0;
    width: auto;
    max-width: none;
    font-size: 0.9rem;
  }

  /* A tap leaves a stale :hover behind that outlives it, which would keep a
     dismissed bubble on screen and the "i" lit. Where there is no real hover,
     only a press or keyboard focus shows either: `visibility` gates sight and
     hit-testing together, and `initial` hands the trigger its resting values
     back — neither state is restated here. */
  .mkt-infotip:not(.is-open):not(:focus-within) .mkt-infotip__bubble {
    visibility: hidden;
  }

  .mkt-infotip:not(.is-open):not(:focus-within) .mkt-infotip__trigger {
    --tip-ring: initial;
    --tip-fill: initial;
    --tip-ink: initial;
  }
}

/* No motion, but the grace delay stays: it is not decoration, it is what lets
   the pointer reach the bubble at all. Only the durations go. */
@media (prefers-reduced-motion: reduce) {
  .mkt-infotip__bubble {
    transform: none;
    transition-duration: 0s;
  }
}