/* Language-learning hover/focus tooltip (Phase 1: French Canadian).

   Deliberately a plain static stylesheet, NOT a Styles/components/*.css
   partial: those are compiled into app-tailwind.css by a separate
   `npm run build:css` (PostCSS/Tailwind) step, so a change there is invisible
   until someone runs that build. This file needs no build step at all — it
   is served as-is, exactly like report-download.js/nav-collapse.js — so the
   tooltip works correctly under plain `dotnet build`/`dotnet test` with no
   node/npm dependency.

   Uses the same CSS custom-property tokens as the rest of the app
   (see Styles/tokens.css) so it stays visually consistent, and intentionally
   avoids the semantic --pos-success/--pos-warning/--pos-danger/--pos-info
   tokens since this is a neutral learning hint, not a status indicator. No
   dark-mode branch is needed: the application has none (confirmed — no
   prefers-color-scheme/data-theme usage anywhere in the app).

   The two ancestor-tag selectors (a:focus-visible ..., button:focus-visible
   ...) exist because a LearningTooltip is usually nested INSIDE an
   already-focusable element (a nav link, a button) rather than being
   focusable itself. :focus-within cannot help there since the focusable
   element is an ANCESTOR of the tooltip span, not a descendant of it — only
   a selector keyed off that known ancestor tag can reveal the tooltip when
   the ancestor receives keyboard focus. A LearningTooltip used standalone
   (not nested in an interactive ancestor) carries its own tabindex="0" and
   is covered by the plain :focus-visible rule below. */

.pos-learning-tooltip {
    position: relative;
    display: inline-block;
    max-width: 100%;
}

.pos-learning-tooltip::after {
    content: attr(data-learning-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 6px);
    transform: translateX(-50%);
    background: var(--pos-surface, #ffffff);
    color: var(--pos-text, #1f2937);
    border: 1px solid var(--pos-border-strong, #cbd5e1);
    border-radius: var(--pos-radius-sm, 8px);
    box-shadow: var(--pos-shadow, 0 4px 12px rgba(15, 23, 42, 0.12));
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    /* text-transform is inherited — without resetting it here, a tooltip nested inside an
       uppercase/small-caps ancestor (e.g. NavMenu's .nav-group__title section headings) would
       render its French translation in the ancestor's casing instead of as written. Confirmed
       directly: the "Purchasing" section title tooltip rendered as "ACHATS" before this reset. */
    text-transform: none;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    /* Instant hide, no delay. */
    transition: opacity 0.15s ease, visibility 0s linear 0.15s;
    z-index: 1080;
}

.pos-learning-tooltip:hover::after,
.pos-learning-tooltip:focus-visible::after,
a:focus-visible .pos-learning-tooltip::after,
button:focus-visible .pos-learning-tooltip::after {
    opacity: 1;
    visibility: visible;
    /* Delayed show (~350ms) so tooltips don't flash in on every incidental pointer pass. */
    transition: opacity 0.15s ease 0.35s, visibility 0s linear 0.35s;
}

@media (hover: none) and (pointer: coarse) {
    /* Touch devices have no hover state to delay-reveal from, and forcing the
       tooltip permanently visible would just clutter a small screen. The
       underlying label/button is completely unaffected and normal tap
       behavior is unchanged — the learning hint is simply omitted here. */
    .pos-learning-tooltip::after {
        display: none;
    }
}