/*
 * ADR-048 §2a — restyle MudTooltip to match the prototype's `MTooltip`
 * tokens (overlay-components.jsx:337). One component, one keyboard
 * contract, one accessibility surface.
 *
 * Visual tokens the prototype dictates:
 *   - mono caption family (var(--mud-typography-monospace-family))
 *   - inverse fill (text colour as background, surface as foreground)
 *   - 2 px corner radius (no large drop shadow)
 *   - 200 ms hover delay (set on each <MudTooltip Delay="200">)
 *   - max-width 320 px so a caption never spans the full screen
 *
 * The .meridian-tooltip class is opted into by <MeridianTooltip>; raw
 * MudTooltip usages keep the MudBlazor default until they migrate. This
 * is intentional — gradual adoption prevents a big-bang restyle.
 */

/* The MudBlazor tooltip body. */
.meridian-tooltip,
.mud-tooltip.meridian-tooltip {
    font-family: var(--mud-typography-monospace-family,
        ui-monospace, "Cascadia Code", "Consolas", "Roboto Mono", monospace);
    font-size: 0.75rem;
    line-height: 1.4;
    letter-spacing: 0;

    background-color: var(--mud-palette-text-primary);
    color: var(--mud-palette-surface);

    border-radius: 2px;
    box-shadow: none;

    padding: 6px 10px;
    max-width: 320px;
}

/* Caption-shape tooltip with optional shortcut chip on the right.
   Used by <MeridianTooltip Shortcut="…">. */
.meridian-tooltip-caption {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: pre;
}

.meridian-tooltip-caption-text {
    flex: 1 1 auto;
    white-space: normal;
}

.meridian-tooltip-caption-shortcut {
    flex: 0 0 auto;
    padding: 1px 5px;
    border-left: 1px solid color-mix(in srgb,
        var(--mud-palette-surface) 30%, transparent);
    margin-left: 4px;
    opacity: 0.6;
    font-weight: 500;
}

/* Data-inspection shape — used by GalleryTooltip-style heatmap reveals.
   Each row is `<dt>LABEL</dt><dd>value</dd>`. */
.meridian-tooltip-rows {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 10px;
    row-gap: 2px;
    margin: 0;
}

.meridian-tooltip-rows dt {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.55;
    margin: 0;
}

.meridian-tooltip-rows dd {
    margin: 0;
    overflow-wrap: anywhere;
}

/* The info icon adjacent to a <MeridianTermLabel> term — always visible
   at default density, hover-revealed on the .meridian-density-compact
   table/grid context per OQ-048-005 resolution. */
.meridian-term-label-info {
    color: var(--mud-palette-text-secondary);
    cursor: help;
    transition: opacity 120ms ease-out;
}

.meridian-density-compact .meridian-term-label-info {
    opacity: 0;
}

.meridian-density-compact:hover .meridian-term-label-info,
.meridian-density-compact:focus-within .meridian-term-label-info {
    opacity: 1;
}