/* =============================================================================
   ics-tooltip — the hover/focus label (component: js/components/ics-tooltip.js).
   ONE card per page, retargeted between triggers; the JS places it
   position:fixed in viewport space, so no overflow ancestor can clip it and
   this sheet paints geometry-free: surface, frame, type, arrow, plane.

   CLASSES OWNED: .ics-tooltip .ics-tooltip__content .ics-tooltip__arrow and
   the side modifiers .ics-tooltip--top / --bottom / --left / --right (the side
   the card LANDED on after any flip - the arrow reads it to face the trigger).
   The bare `.tooltip` name is NOT this sheet's and must never appear here:
   another stylesheet on every shell already owns it (with an opacity:0 rest
   state that would ship this card invisible while every structural gate stays
   green).

   SELF-SUFFICIENT SURFACE (the datetime.css rule): the card declares its own
   surface, frame, radius, elevation and type, reading tokens only - a shell
   that links this sheet without the app base sheets still paints a whole card.
   Inner content forces font-size:inherit because the app base sheet sizes
   EVERY element (`*`) at 12px - without the guard an allowlisted <b> inside
   the text silently drops off the card's size.

   NO MOTION BY DESIGN: the card appears and leaves instantly. A label that
   fades under a moving pointer reads as lag, not polish - so there is nothing
   here for prefers-reduced-motion to reduce.

   TOKENS read (every name resolves in css\tokens\ - the component tier owns
   the tooltip knobs): --ics-surface · --ics-text · --ics-border ·
   --ics-font · --ics-font-size · --ics-line · --ics-tooltip-maxw ·
   --ics-tooltip-gap (published for the JS placer - read, not painted) ·
   --ics-tooltip-radius · --ics-tooltip-shadow · --ics-z-tooltip ·
   --border-1 · --space-2 · --space-4.

   LINK ORDER. Link after tokens.css; independent of every other component
   sheet. Linked by _Meta, _MobileLayout and _AuthMeta (the card ships in the
   dialog-family bundle, so sheet and script travel together on every shell).
   ============================================================================= */

/* ---- the card ---------------------------------------------------------------- */
.ics-tooltip {
  position: fixed;                                 /* viewport space - the JS placer writes left/top */
  left: 0; top: 0;
  z-index: var(--ics-z-tooltip, 5500);             /* above any dropdown, below overlay + toasts */
  max-width: var(--ics-tooltip-maxw);
  background: var(--ics-surface);
  color: var(--ics-text);
  border: var(--border-1) solid var(--ics-border);
  border-radius: var(--ics-tooltip-radius);
  box-shadow: var(--ics-tooltip-shadow);
  box-sizing: border-box;
  pointer-events: auto;                            /* the card is hoverable - entering it holds it open */
  /* --ics-tooltip-gap is NOT re-declared here: the :root token (component tier)
     inherits onto the card, and that inherited value is what the JS placer
     reads off the card's computed style */
}

/* ---- the text ---------------------------------------------------------------- */
.ics-tooltip__content {
  padding: var(--space-2) var(--space-4);
  font-family: var(--ics-font);
  font-size: var(--ics-font-size);
  line-height: var(--ics-line);
  overflow-wrap: break-word;
  white-space: pre-line;                           /* an authored title may carry line breaks */
}
.ics-tooltip__content :where(*) { font-size: inherit; }  /* the app base sheet sizes every element; opt-in markup must ride the card's size */

/* ---- the arrow: an 8px square rotated onto the trigger-facing edge, its two
   outward borders continuing the card frame, its face covering the seam ------- */
.ics-tooltip__arrow {
  position: absolute;
  width: 8px; height: 8px;
  background: var(--ics-surface);
  border: var(--border-1) solid var(--ics-border);
  transform: rotate(45deg);
}
.ics-tooltip--bottom .ics-tooltip__arrow {         /* card sits BELOW the trigger: arrow on its top edge */
  top: -5px; left: 50%; margin-left: -4px;
  border-bottom: 0; border-right: 0;
}
.ics-tooltip--top .ics-tooltip__arrow {            /* card above: arrow on its bottom edge */
  bottom: -5px; left: 50%; margin-left: -4px;
  border-top: 0; border-left: 0;
}
.ics-tooltip--right .ics-tooltip__arrow {          /* card to the right: arrow on its left edge */
  left: -5px; top: 50%; margin-top: -4px;
  border-top: 0; border-right: 0;
}
.ics-tooltip--left .ics-tooltip__arrow {           /* card to the left: arrow on its right edge */
  right: -5px; top: 50%; margin-top: -4px;
  border-bottom: 0; border-left: 0;
}