/* =========================================================================
   Frame — text tooltips (pd-rttip-*)                       (owner, 24 Oct 2026)

   A small icon placed inside text from the Text panel's Insert tab
   (assets/js/pd_rttip.js). Hovering or tapping it shows a short note.
   This file draws the icon and the note on the PUBLISHED page, in the
   editor's page preview, and in the Text panel's own typing box, so all
   three look the same.

   Markup, saved inside the text:
     <span class="pd-rttip" data-pd-rttip-show="hover|click" data-pd-rttip-icon="info">
       <span class="pd-rttip-btn" role="button" tabindex="0" aria-label="…"><svg …></span>
       <span class="pd-rttip-bubble" role="tooltip">The note</span>
     </span>

   Colours: the icon takes the colour of the words it sits in, so it reads
   wherever they read. The note is a small pop-up made of the website's own
   page surface — page background with the page's text colour — so it reads
   on any web theme, even when the words around it sit on a dark band. With
   no web theme the admin pop-up labels are used, then the system's own
   page colours. Nothing is hard-coded.

   Without the public script (the editor preview) the note shows from CSS
   alone: on hover for "hover" tips, on focus for both. The script
   (pd_rttip_public.js) adds html.pd-rttip-js and shows the note as its own
   layer instead, so a block that clips its contents can never cut it off.
   ========================================================================= */

.pd-rttip {
    position: relative;
    display: inline;
    white-space: nowrap;
}

/* The icon: level with the top of the words, sized from them, with a
   tap area of at least 44px that does not move the line. */
.pd-rttip-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: text-top;
    margin-inline: 0.15em 0.1em;
    font-size: clamp(0.875rem, 0.55em, 1.5rem);
    line-height: 1;
    color: inherit;
    cursor: pointer;
    border-radius: 50%;
    -webkit-tap-highlight-color: transparent;
}
.pd-rttip-btn::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(100%, 2.75rem);
    height: max(100%, 2.75rem);
    transform: translate(-50%, -50%);
}
.pd-rttip-btn:focus {
    outline: none;
}
.pd-rttip-btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}
.pd-rttip-ico {
    display: block;
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
}

/* The note. Its words are reset so a tip inside a heading does not take
   the heading's size, capitals or weight. */
.pd-rttip-bubble,
.pd-rttip-float {
    box-sizing: border-box;
    width: max-content;
    max-width: min(18rem, calc(100vw - 2rem));
    padding: 0.625rem 0.75rem;
    background-color: var(--pd-color-bg, var(--at-color-popover, Canvas));
    color: var(--pd-general-color, var(--at-color-popover-foreground, CanvasText));
    border: 1px solid color-mix(in srgb, var(--pd-general-color, var(--at-color-popover-foreground, CanvasText)) 28%, transparent);
    border-radius: 0.5rem;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--pd-general-color, var(--at-color-popover-foreground, CanvasText)) 22%, transparent);
    font-family: var(--pd-general-font, inherit);
    font-size: 0.9375rem;
    font-weight: 400;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-align: start;
    text-shadow: none;
    text-decoration: none;
    white-space: normal;
    overflow-wrap: break-word;
    -webkit-text-fill-color: currentColor;
}
@media (max-width: 575.98px) {
    .pd-rttip-bubble,
    .pd-rttip-float {
        font-size: 1rem;
    }
}

/* CSS-only note (editor preview, or a page whose script has not run):
   above the icon, centred on it. */
.pd-rttip-bubble {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 0.5rem);
    transform: translateX(-50%);
    z-index: 30;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}
.pd-rttip:focus-within > .pd-rttip-bubble {
    visibility: visible;
    opacity: 1;
}
@media (hover: hover) {
    .pd-rttip[data-pd-rttip-show="hover"]:hover > .pd-rttip-bubble {
        visibility: visible;
        opacity: 1;
    }
}

/* With the script running, the inline note never shows; the script's own
   layer does. */
html.pd-rttip-js .pd-rttip > .pd-rttip-bubble,
html.pd-rttip-js .pd-rttip:focus-within > .pd-rttip-bubble {
    visibility: hidden;
    opacity: 0;
}

/* The script's note layer: fixed to the screen, placed by the script so it
   always stays inside it. */
.pd-rttip-float {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 2147483000;
    pointer-events: auto;
}
.pd-rttip-float[hidden] {
    display: none;
}

@media (prefers-reduced-motion: no-preference) {
    .pd-rttip-bubble {
        transition: opacity 0.12s ease, visibility 0.12s ease;
    }
}