/* the portrait tooltips of the course stage (tip.js; Akademie fix round r3, 2026-11-14), in the manner of shadcn/ui's
   Tooltip: navy ground, white text 12.5 px, radius 6 px, padding 6 px 10 px, a small arrow, a fine shadow; fades and
   scales in from .96 within 120 ms, leaves at once. Rendered on <body> (position fixed), above everything. */
.hpc-tip { position: fixed; z-index: 2147483000; display: grid; gap: 1px; max-width: min(280px, calc(100vw - 16px)); padding: 6px 10px; box-sizing: border-box;
  border-radius: 6px; background: #003e52; color: #fff; pointer-events: none; text-align: left;
  box-shadow: 0 6px 16px -6px rgb(0 33 44 / .45), 0 1px 3px rgb(0 33 44 / .2);
  font: 400 12.5px/1.4 "Theme-Font", Inter, system-ui, sans-serif;
  opacity: 0; transform: scale(.96); transform-origin: var(--ax, 50%) 100%; }
.hpc-tip.is-below { transform-origin: var(--ax, 50%) 0; }
.hpc-tip.is-in { opacity: 1; transform: none; transition: opacity .12s ease-out, transform .12s ease-out; }
.hpc-tip[hidden] { display: none; }
.hpc-tip__n { font-weight: 600; }
.hpc-tip__i { color: rgb(255 255 255 / .78); font-weight: 400; }
.hpc-tip__arrow { position: absolute; left: var(--ax, 50%); bottom: -4px; width: 8px; height: 8px; margin-left: -4px; background: #003e52; transform: rotate(45deg); border-radius: 1px; }
.hpc-tip.is-below .hpc-tip__arrow { top: -4px; bottom: auto; }
@media (prefers-reduced-motion: reduce) { .hpc-tip, .hpc-tip.is-in { transform: none; transition: none; } }
/* on the navy card a fine light edge keeps the navy tooltip apart from the card behind it */
.hpc-tip { outline: 1px solid rgb(255 255 255 / .16); }
.hpc-tip__n.is-rest { color: rgb(255 255 255 / .78); font-weight: 400; }
/* director, 2026-11-14: the tooltip stands over the deck's navy cards, where a navy tooltip hardly separates. Inverted:
   white ground, navy text, so it reads as a layer of its own (shadcn's tooltip inverts against its surface too). */
.hpc-tip { background: #fff; color: #003e52; outline: 1px solid rgb(0 62 82 / .1);
  box-shadow: 0 10px 28px -8px rgb(0 33 44 / .5), 0 2px 6px rgb(0 33 44 / .22); }
.hpc-tip__i, .hpc-tip__n.is-rest { color: #4f6b78; }
.hpc-tip__arrow { background: #fff; }