/* BonBonBot Console: THINGS THAT OPEN OVER THE WORK.

   Tooltips, and the home for the dialog, menu and popover primitives as they
   are gathered. Started on the console-refresh branch with the tooltip block
   lifted out of console.css.

   WHY IT EXISTS EMPTY-ISH. There is no shared overlay in this console. Nine
   stylesheets reach for `--cbc-veil` and each draws its own dimmed ground,
   its own panel, its own entrance and its own way out, so "every modal dims
   with the veil" is true about the token and not about the result. That is a
   look assembled nine times rather than a component, and it is the reason a
   dialog on one screen settles differently from a dialog on the next.

   The intended shape is one set of primitives here, with each feature sheet
   keeping only what is genuinely its own. Move rules in as they are unified;
   do not copy them, because a class defined in two sheets is what
   `npm run check:classes` fails on, and that guard is the only thing standing
   between this file and a second set of overlay rules nobody meant to keep.

   TOKENS OVER LOOKS. `--cbc-focus` means "you are here" and `--cbc-self`
   means "this one is you". They may resolve to the same value today. They are
   not the same token and unifying them by value would make every later change
   to keyboard focus silently change how the console points at you.

   Loaded after console-header.css and before the feature sheets. */

/* ---- Tooltips ----
   One element for the whole console (admin/src/tooltip.ts). Fixed and
   transform-positioned rather than absolutely placed, so a tip on a control
   inside a scrolling panel is never clipped by it, and so moving between two
   controls animates the same node instead of tearing one down.

   Raised rather than surface: a tip is above the card it is describing, and it
   has to read that way on a panel of the same colour. */
.cb-tip {
  position: fixed;
  /* The tip is in the top layer (src/tooltip.ts), so the browser applies its
     own popover box on top of this one: inset 0 on all four sides with an auto
     margin, which centres the element in the window. Placement here is a
     translate from the top-left corner, so that origin has to be put back or
     every tip opens in the middle of the screen. The z-index below is now only
     for a browser with no popover support, where the tip is an ordinary fixed
     element again. */
  margin: 0;
  inset: auto;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: var(--cbc-z-tip);
  max-inline-size: var(--cb-width-xxs);
  padding: var(--cb-space-sm) var(--cb-space-lg);
  border: 1px solid var(--cbc-line);
  border-radius: var(--cb-radius-md);
  background: var(--cbc-raised);
  box-shadow: var(--cbc-shadow);
  color: var(--cbc-ink);
  font-size: var(--cb-type-xs-size);
  line-height: var(--cb-type-sm-line-height);
  font-weight: var(--cb-font-weight-medium);
  text-align: start;
  /* It follows the pointer between controls; it does not intercept it. */
  pointer-events: none;
  /* cbc-fade, not a fourth entrance. There was a cbc-tip-in here that was
     cbc-fade retyped under another name, and it never painted a frame in any
     case: tooltip.ts sets data-side inside the same synchronous show(), so one
     of the two directional keyframes below has always taken over before the
     browser gets anywhere near a paint. This is the fallback for a tip placed
     before it knows which way it is pointing. */
  animation: cbc-fade var(--cb-motion-fast) var(--cbc-spring) backwards;
}
/* Arriving from the side it is anchored on, which is what ties it to the
   control rather than to the page. These two are the tooltip's own signature
   and stay; what they do not have is a `to`, which pinned the resting translate
   and the resting opacity on a node the tooltip reuses for every control the
   pointer crosses. An entrance ends where the element already rests. */
.cb-tip[data-side="above"] {
  animation-name: cbc-tip-above;
}
.cb-tip[data-side="below"] {
  animation-name: cbc-tip-below;
}
@keyframes cbc-tip-above {
  from {
    opacity: 0;
    translate: 0 var(--cb-space-xs);
  }
}
@keyframes cbc-tip-below {
  from {
    opacity: 0;
    translate: 0 calc(var(--cb-space-xs) * -1);
  }
}