/* The one tooltip, styled. Pairs with app/static/tooltip.js — ship them together.
 *
 * Kept out of app.css because the public /changelog page loads this pair without the rest of
 * the app's stylesheet, so every token here carries a literal fallback and nothing depends on
 * app.css having been parsed first.
 *
 * There is deliberately no `cursor` declaration anywhere in this file, and there must never be
 * one. `cursor: help` is not a tooltip affordance, it's an irritation: the pointer flickers
 * between shapes as it crosses a table of info icons, and it tells the user nothing they don't
 * learn a tenth of a second later from the tooltip itself. Signal "there's more here" by
 * styling the TRIGGER on hover (see .card-info:hover in app.css), not by swapping the cursor.
 */

.aa-tip {
  position: fixed;
  z-index: 1300;                    /* over toasts (1200), modals (1000) and every sticky header */
  max-width: 340px;
  margin: 0;
  padding: 9px 12px;
  border-radius: 8px;
  background: var(--neutral-12, #1c2023);
  border: 1px solid rgba(255, 255, 255, .10);   /* keeps it off the page in a dark theme */
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-transform: none;             /* tips hang off uppercased headings and table headers */
  letter-spacing: normal;
  white-space: normal;
  overflow-wrap: anywhere;          /* ids, endpoints and stack detail must not overflow the box */
  box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
  /* INERT. A visible tip is the topmost thing over whatever it covers, so a hit-testable one
     eats the click meant for the control underneath — measured at 97% of a chain-of-thought
     button on the interaction detail page (#432), and the same shape wherever a trigger sits
     within a tip's height of a control.

     This does not cost 1.4.13 Hoverable. The criterion is that the tip must not VANISH when the
     pointer moves onto it, not that the pointer must be able to hit it; tooltip.js retains it
     geometrically instead (see `inTip`). Selecting a tip's text is the one thing that genuinely
     needs a hit target, so that is opt-in per trigger, below. */
  pointer-events: none;
  /* Visibility is the [hidden] attribute and NOTHING ELSE. This is only an entrance flourish,
     restarted for free by the display:none -> display:block flip.

     Which is why it animates TRANSFORM ONLY, and why there is no `both` fill-mode. Caught live
     on the interaction-detail page: the animation reported playState "running" with
     currentTime frozen at 0, because the page wasn't painting — and `both` pins a non-advancing
     animation to its `from` keyframe. A `from { opacity: 0 }` therefore made the tooltip
     permanently invisible, which is the exact bug this file exists to end, reintroduced in a
     second form after requestAnimationFrame was removed for the same reason (see tooltip.js's
     show()). A frozen transform costs 3px of offset; a frozen opacity costs the whole feature.
     Never animate opacity, visibility or display here. */
  animation: aa-tip-in .13s var(--ease, cubic-bezier(.2, .6, .2, 1));
}

@keyframes aa-tip-in { from { transform: translateY(3px); } }
@keyframes aa-tip-in-below { from { transform: translateY(-3px); } }

.aa-tip.is-below { animation-name: aa-tip-in-below; }

.aa-tip[hidden] { display: none; }

/* The opt-in, set by tooltip.js from `data-tip-interactive` on the TRIGGER. Only for a tip whose
   text a user may genuinely need to select — a raw endpoint, an id, a stack detail. It makes that
   tip a hit target again, so use it where the trigger has nothing clickable within a tip's height
   of it, and nowhere else. */
.aa-tip[data-interactive] { pointer-events: auto; user-select: text; }

/* Mono payloads (the simulator's raw endpoint/status detail) need to break anywhere and read as
   code, but must not inherit a monospace stack for an ordinary sentence. */
.aa-tip.aa-tip-mono .aa-tip-body {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
}

.aa-tip-body > :first-child { margin-top: 0; }
.aa-tip-body > :last-child { margin-bottom: 0; }

/* Positioned by tooltip.js against the trigger's centre, then clamped to the tip's own corners
   so it still points at the trigger even when the viewport clamp shifted the box sideways. */
.aa-tip-arrow {
  position: absolute;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  overflow: hidden;
}

.aa-tip-arrow::after {
  content: "";
  position: absolute;
  left: 1px;
  width: 10px;
  height: 10px;
  background: var(--neutral-12, #1c2023);
  border: 1px solid rgba(255, 255, 255, .10);
  transform: rotate(45deg);
}

.aa-tip:not(.is-below) .aa-tip-arrow { top: 100%; }
.aa-tip:not(.is-below) .aa-tip-arrow::after { top: -6px; }
.aa-tip.is-below .aa-tip-arrow { bottom: 100%; }
.aa-tip.is-below .aa-tip-arrow::after { bottom: -6px; }

@media (prefers-reduced-motion: reduce) {
  .aa-tip, .aa-tip.is-below { animation: none; }
}