/* hover-callout.css — Apex's iconic hover annotation, reusable.
 *
 * Visual: a thin amber diagonal "pole" leading from the hover origin
 * to a small uppercase banner with an L-shaped amber bracket. Reads
 * like an HUD callout from a mil-sim / sci-fi map UI. This file
 * defines four directional variants so the callout can extend out of
 * the icon away from screen edges — JS (hover-callout.js) picks the
 * right variant at hover time based on the anchor's viewport
 * position.
 *
 * Usage from JS (preferred path):
 *
 *   window.ApexCallout.wrap(targetEl, 'Tooltip text');
 *
 * Or markup-only (no auto-direction):
 *
 *   <span class="apex-callout-anchor" data-callout-dir="up-right">
 *     <icon-content/>
 *     <span class="apex-callout" role="tooltip">Tooltip text</span>
 *   </span>
 *
 * Four directions:
 *   up-right    (default — pole goes up + right from origin)
 *   down-right  (pole goes down + right; use when origin is near top of viewport)
 *   up-left     (pole goes up + left;   use when origin is near right of viewport)
 *   down-left   (pole goes down + left; use when origin is near top-right corner)
 *
 * The pole length + banner offset are driven by a single CSS custom
 * property so a future tweak is one edit. Geometry constants:
 *   --apex-callout-pole       (diagonal box edge, default 40px)
 *   --apex-callout-stroke     (1px amber rails)
 *   --apex-callout-color      (#f59e0b, amber-500)
 *   --apex-callout-text-color (#fde68a, amber-200) */

:root {
  --apex-callout-pole:        40px;
  --apex-callout-stroke:      1px;
  --apex-callout-color:       #f59e0b;
  --apex-callout-text-color:  #fde68a;
  --apex-callout-bg:          rgba(10, 14, 22, 0.86);
}

/* Anchor — wraps the hover-target (icon, chip, badge, etc.). The
   callout positions itself absolutely against this anchor, so we
   need position:relative + inline-flex centering for predictable
   per-icon math. tabindex=0 (set by JS) so keyboard users can focus
   it and see the callout via :focus-within. */
.apex-callout-anchor {
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  /* Mouse-tracking: hover-callout.js sets these on pointerenter +
     pointermove to the cursor's pixel offset inside the anchor. The
     50% defaults keep the callout sensibly placed at the anchor's
     center for keyboard-focus / pre-mouse-move first paint. */
  --mx: 50%;
  --my: 50%;
}
.apex-callout-anchor:focus { outline: none; }
.apex-callout-anchor:focus-visible { outline: 2px solid var(--apex-callout-color); outline-offset: 2px; }

/* Phase 123 rev6 (2026-06-05, Maurice): a small translucent disc at
   the pole's origin — the cursor point (--mx / --my), which is exactly
   where the pole starts. Direction-independent: it rides the same
   mouse-tracking vars the pole uses, so it always sits under the pole
   root. Shows with the callout; pointer-events:none so it never eats
   clicks. */
.apex-callout-anchor::after {
  content: "";
  position: absolute;
  left: var(--mx);
  top: var(--my);
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  /* rev7 (Maurice): more transparent. */
  background: rgba(245, 158, 11, 0.14);
  border: 1px solid rgba(245, 158, 11, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease-out;
  z-index: 49;
}
.apex-callout-anchor:hover::after,
.apex-callout-anchor:focus-within::after {
  opacity: 1;
}
/* Mirror the nested-anchor suppression used for the banner: when an
   inner anchor is hovered, hide the OUTER disc so only the active
   popup's disc shows. */
.apex-callout-anchor:has(.apex-callout-anchor:hover)::after,
.apex-callout-anchor:has(.apex-callout-anchor:focus-within)::after {
  opacity: 0;
}

/* The banner itself. Common rules; per-direction positioning + border
   combos live in the four data-callout-dir blocks below. */
.apex-callout {
  position: absolute;
  padding: 4px 14px 4px 10px;
  background: var(--apex-callout-bg);
  color: var(--apex-callout-text-color);
  /* Phase 123 rev4 (2026-06-05, Maurice): full border around the whole
     popup. The per-direction blocks below still set the 2 pole-side
     rails (same colour/width) so the bracket-into-pole still reads;
     this base rule closes the other two sides into a full box. */
  border: var(--apex-callout-stroke) solid var(--apex-callout-color);
  /* Phase 123 rev5 (2026-06-05, Maurice): rounded corners matching the
     other HUD boxes (4px). NOT using overflow:hidden — it would clip
     the ::before pole that extends outside the banner; the header /
     body blocks round their own outer corners instead. */
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease-out, transform 140ms ease-out;
  z-index: 50;
}

/* Pole — a square the size of --apex-callout-pole containing a 1px
   amber stroke between two opposite corners. Implemented with
   linear-gradient: a thin band along the gradient axis renders a
   line PERPENDICULAR to the axis. Two perpendicular axes give us
   the two diagonal directions we need (BL↔TR and TL↔BR). */
.apex-callout::before {
  content: "";
  position: absolute;
  /* rev7 (2026-06-05, Maurice): shrink the pole square by the gap so
     its anchor-end pulls back toward the banner — every direction
     positions the ::before by its banner-side corner, so a smaller
     square shrinks AWAY from the cursor, leaving the pole starting
     just outside the origin disc instead of running through it. */
  width: calc(var(--apex-callout-pole) - 9px);
  height: calc(var(--apex-callout-pole) - 9px);
  pointer-events: none;
}

/* Show on hover or keyboard focus. translateX slide is direction-
   aware (per-variant rules below) so the callout always slides
   OUTWARD from the icon, not in a fixed direction. */
.apex-callout-anchor:hover > .apex-callout,
.apex-callout-anchor:focus-within > .apex-callout {
  opacity: 1;
}

/* Phase 123 fix (2026-06-05): nested anchors. A stat box is an anchor
   AND contains pill / FAVORS anchors. Hovering an inner pill bubbles
   :hover up to the outer box, which would show BOTH callouts stacked
   (Maurice's screenshot). Suppress the outer banner whenever an inner
   anchor is being hovered/focused — the inner one wins. */
.apex-callout-anchor:has(.apex-callout-anchor:hover) > .apex-callout,
.apex-callout-anchor:has(.apex-callout-anchor:focus-within) > .apex-callout {
  opacity: 0;
}

/* Phase 123 (2026-06-05): multi-line explainer variant (Maurice:
   "dont put all in one line, you can use 2 or 3 lines"). Toggled by
   hover-callout.js whenever the installed text contains a newline.
   pre-line honors the caller's \n breaks; sentence case + lighter
   weight read better than the single-line label style at 2-3 lines. */
.apex-callout.apex-callout--multi {
  /* normal wrapping at a fixed width — natural line breaks, no
     hand-placed \n collisions (Maurice: "strange line breaks"). */
  white-space: normal;
  width: 220px;
  max-width: 220px;
  text-transform: none;
  letter-spacing: 0.03em;
  font-weight: 500;
  font-size: 11px;
  line-height: 1.45;
  text-align: left;
  padding: 0;
}

/* Phase 123 rev3 (2026-06-05): distinctable header (Maurice). The
   amber title bar names what the popup is about; the body sits below
   it in the calmer explainer style. */
.apex-callout.apex-callout--multi .apex-callout-head {
  display: block;
  padding: 5px 12px 2px;
  /* Phase 123 rev4 (2026-06-05, Maurice): no divider border between
     header and body — the amber tint + caps weight separate them. */
  background: rgba(245, 158, 11, 0.16);
  color: var(--apex-callout-color);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  /* Round the header's top corners to follow the banner's 4px box. */
  border-radius: 3px 3px 0 0;
}
.apex-callout.apex-callout--multi .apex-callout-body {
  display: block;
  padding: 6px 12px 7px;
}

/* ============================================================
   Direction variants. Each block sets:
     - banner position    (which corner lands at the pole endpoint)
     - banner border rails (L-bracket pointing into the pole)
     - pole position      (which side of banner the pole sits on)
     - pole gradient axis (which diagonal the 1px stroke renders)
     - resting + open transform (slide-in direction)
   ============================================================ */

/* --- up-right (default) ---
   Icon bottom-left, banner top-right. Pole goes up-right.
   Banner BL corner is the pole endpoint. Borders: bottom + left. */
.apex-callout-anchor[data-callout-dir="up-right"] > .apex-callout,
.apex-callout-anchor:not([data-callout-dir]) .apex-callout {
  left:   calc(var(--mx) + var(--apex-callout-pole));
  bottom: calc(100% - var(--my) + var(--apex-callout-pole));
  border-bottom: var(--apex-callout-stroke) solid var(--apex-callout-color);
  border-left:   var(--apex-callout-stroke) solid var(--apex-callout-color);
  transform: translateX(-6px);
}
.apex-callout-anchor[data-callout-dir="up-right"] > .apex-callout::before,
.apex-callout-anchor:not([data-callout-dir]) .apex-callout::before {
  top: 100%; right: 100%;
  background: linear-gradient(
    to bottom right,
    transparent calc(50% - 0.5px),
    var(--apex-callout-color) calc(50% - 0.5px),
    var(--apex-callout-color) calc(50% + 0.5px),
    transparent calc(50% + 0.5px)
  );
}
.apex-callout-anchor[data-callout-dir="up-right"]:hover .apex-callout,
.apex-callout-anchor[data-callout-dir="up-right"]:focus-within .apex-callout,
.apex-callout-anchor:not([data-callout-dir]):hover .apex-callout,
.apex-callout-anchor:not([data-callout-dir]):focus-within .apex-callout {
  transform: translateX(0);
}

/* --- down-right ---
   Icon top-left, banner bottom-right. Pole goes down-right.
   Banner TL corner is the pole endpoint. Borders: top + left.
   Pole sits ABOVE the banner (bottom: 100%) with line TL→BR. */
.apex-callout-anchor[data-callout-dir="down-right"] > .apex-callout {
  left: calc(var(--mx) + var(--apex-callout-pole));
  top:  calc(var(--my) + var(--apex-callout-pole));
  border-top:  var(--apex-callout-stroke) solid var(--apex-callout-color);
  border-left: var(--apex-callout-stroke) solid var(--apex-callout-color);
  transform: translateX(-6px);
}
.apex-callout-anchor[data-callout-dir="down-right"] > .apex-callout::before {
  bottom: 100%; right: 100%;
  background: linear-gradient(
    to bottom left,
    transparent calc(50% - 0.5px),
    var(--apex-callout-color) calc(50% - 0.5px),
    var(--apex-callout-color) calc(50% + 0.5px),
    transparent calc(50% + 0.5px)
  );
}
.apex-callout-anchor[data-callout-dir="down-right"]:hover .apex-callout,
.apex-callout-anchor[data-callout-dir="down-right"]:focus-within .apex-callout {
  transform: translateX(0);
}

/* --- up-left ---
   Icon bottom-right, banner top-left. Pole goes up-left.
   Banner BR corner is the pole endpoint. Borders: bottom + right.
   Pole sits BELOW the banner (top: 100%) with line TL→BR. */
.apex-callout-anchor[data-callout-dir="up-left"] > .apex-callout {
  right:  calc(100% - var(--mx) + var(--apex-callout-pole));
  bottom: calc(100% - var(--my) + var(--apex-callout-pole));
  border-bottom: var(--apex-callout-stroke) solid var(--apex-callout-color);
  border-right:  var(--apex-callout-stroke) solid var(--apex-callout-color);
  transform: translateX(6px);
}
.apex-callout-anchor[data-callout-dir="up-left"] > .apex-callout::before {
  top: 100%; left: 100%;
  background: linear-gradient(
    to bottom left,
    transparent calc(50% - 0.5px),
    var(--apex-callout-color) calc(50% - 0.5px),
    var(--apex-callout-color) calc(50% + 0.5px),
    transparent calc(50% + 0.5px)
  );
}
.apex-callout-anchor[data-callout-dir="up-left"]:hover .apex-callout,
.apex-callout-anchor[data-callout-dir="up-left"]:focus-within .apex-callout {
  transform: translateX(0);
}

/* --- down-left ---
   Icon top-right, banner bottom-left. Pole goes down-left.
   Banner TR corner is the pole endpoint. Borders: top + right.
   Pole sits ABOVE the banner (bottom: 100%) with line BL→TR. */
.apex-callout-anchor[data-callout-dir="down-left"] > .apex-callout {
  right: calc(100% - var(--mx) + var(--apex-callout-pole));
  top:   calc(var(--my) + var(--apex-callout-pole));
  border-top:   var(--apex-callout-stroke) solid var(--apex-callout-color);
  border-right: var(--apex-callout-stroke) solid var(--apex-callout-color);
  transform: translateX(6px);
}
.apex-callout-anchor[data-callout-dir="down-left"] > .apex-callout::before {
  bottom: 100%; left: 100%;
  background: linear-gradient(
    to bottom right,
    transparent calc(50% - 0.5px),
    var(--apex-callout-color) calc(50% - 0.5px),
    var(--apex-callout-color) calc(50% + 0.5px),
    transparent calc(50% + 0.5px)
  );
}
.apex-callout-anchor[data-callout-dir="down-left"]:hover .apex-callout,
.apex-callout-anchor[data-callout-dir="down-left"]:focus-within .apex-callout {
  transform: translateX(0);
}