/* ===================================================================
   WCI: Tooltip, the one-line icon card (wwwroot/js/wci/wci-tooltip.js),
   INTEL-403
   -------------------------------------------------------------------
   PORTED VERBATIM from the ip-b2b design repo, revision served by the
   prototype host on 2026-09-23 (http://3.17.180.155:4144/pages/wise.css,
   Last-Modified 2026-09-23 06:58:57 GMT):
     pages/wise.css
       lines 2342-2394    #lir-tooltip, .lir-tip-visible, .lir-tip-right,
                          .lir-tip-above
     js/all-modules-flow.js
       lines 5737-5773    module "Tooltip" (catalog entry and demo)
   Class names and the id are kept IDENTICAL to wise.css.

   This is a global sheet, not a scoped .razor.css, and it is the one
   exception to the registry's "only tokens are global" rule: the card is a
   single element the script appends to <body>, not markup any component
   renders, so there is no component for a scope attribute to belong to.
   Requires wwwroot/css/wci/wci-tokens.css (the card sits under body.wci).
   =================================================================== */

/* Floating tooltip shared by every top-bar icon. Fixed-positioned by JS so it
   escapes the rail's horizontal-scroll clipping, centered under the button
   (default) or pinned to the right for the left-nav collapse toggle. */
#lir-tooltip {
  position: fixed;
  /* Above js/popover-layer.js (2147483000) so a tip on an icon inside a
     portaled menu still paints on top of that popover. */
  z-index: 2147483646;
  background: var(--surface);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  /* An icon label is a couple of words; a chart cell's label is a whole
     sentence. Past 380px the card wraps instead of stretching off the window.
     `max-content` is what keeps a short label on one line: the card is fixed,
     so shrink-to-fit would otherwise size it to whatever space is left to the
     right of the control and wrap a two-word label near the edge. */
  width: max-content;
  max-width: 380px;
  white-space: normal;
  overflow-wrap: break-word;
  line-height: 1.35;
  padding: 5px 10px;
  border-radius: 8px;
  pointer-events: none;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  font-family: inherit;
  opacity: 0;
  transform: translateX(-50%) translateY(-4px);
  transition: opacity 0.06s ease, transform 0.06s ease;
}
#lir-tooltip.lir-tip-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* Left-nav collapse toggle — same right-side placement as #menu-rail-tip. */
#lir-tooltip.lir-tip-right {
  transform: translateY(-50%) translateX(-4px);
}
#lir-tooltip.lir-tip-right.lir-tip-visible {
  transform: translateY(-50%) translateX(0);
}
/* Appearance popover controls + the crossword trigger — float ABOVE the
   target (same rule as the appearance popover itself). `top` is the point
   just above the control; translateY(-100%) sits the card on that point. */
#lir-tooltip.lir-tip-above {
  transform: translateX(-50%) translateY(calc(-100% + 4px));
}
#lir-tooltip.lir-tip-above.lir-tip-visible {
  transform: translateX(-50%) translateY(-100%);
}


/* ===================================================================
   APP-OWNED ADDITIONS (not in wise.css). Keep below the verbatim port so a
   re-sync replaces everything above this line untouched.
   =================================================================== */

/* The design's 380px cap assumes a desktop window. On a phone a sentence-
   long card would still be 380px and run off the edge the script clamps
   it to, so the cap also stops at the viewport less the 8px margin each
   side (wci-tooltip.js MARGIN). */
#lir-tooltip { max-width: min(380px, calc(100vw - 16px)); }

/* CONVENTIONS: honour prefers-reduced-motion. The card still appears and
   disappears; it just does not slide. */
@media (prefers-reduced-motion: reduce) {
  #lir-tooltip,
  #lir-tooltip.lir-tip-visible,
  #lir-tooltip.lir-tip-right.lir-tip-visible,
  #lir-tooltip.lir-tip-above.lir-tip-visible { transition: none; }
}