/* Custom tooltip for a bold title row plus a separate description row. A plain
   data-tooltip cannot do that, so this is a single reusable element repositioned
   on hover. Colors use theme variables so light and dark mode both stay readable.
   The classes are short on purpose. They only apply inside the floating popup,
   which is appended to document.body. The source stays in the page and is not shown. */
.rich-tooltip > .source {
    display: none;
}

.rich-tooltip-popup {
    position: fixed;
    z-index: 10000;
    background: var(--surface-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    font-size: 0.75rem;
    line-height: 1.4;
    padding: 0.5rem 0.75rem;
    border-radius: 2px;
    max-width: 15rem;
    white-space: normal;
    word-break: break-word;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
}

.rich-tooltip-popup:has(.rows) {
    max-width: 20rem;
}

.rich-tooltip-popup .name {
    font-weight: bold;
}

.rich-tooltip-popup .description {
    margin-top: 0.25rem;
    white-space: pre-line;
    color: var(--text-secondary);
}

.rich-tooltip-popup .detail {
    margin-top: 0.5rem;
    font-weight: bold;
    color: var(--text-primary);
}

.rich-tooltip-popup .note {
    margin-top: 0.25rem;
    font-style: italic;
    white-space: pre-line;
    color: var(--text-secondary);
}

.rich-tooltip-popup .rows {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-top: 0.5rem;
}

.rich-tooltip-popup .body > :first-child {
    margin-top: 0;
}

.rich-tooltip-popup .row-label,
.rich-tooltip-popup .row-value {
    display: block;
}

.rich-tooltip-popup .row-label {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-primary);
}

.rich-tooltip-popup .row-value {
    color: var(--text-secondary);
    white-space: pre-line;
}

/* One line per row: the label on the left, the value on the right. */
.rich-tooltip-popup .rows.inline .row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.rich-tooltip-popup .rows.inline .row-label {
    font-size: 0.75rem;
    font-weight: 600;
}

.rich-tooltip-popup .rows.inline .row-value {
    flex-shrink: 0;
    font-weight: 700;
    color: var(--text-primary);
}

/* "Type: Review" as one left-aligned line, in the tooltip's regular weight. */
.rich-tooltip-popup .rows.labeled {
    margin-top: 0.75rem;
}

.rich-tooltip-popup .rows.labeled .row {
    text-align: left;
}

.rich-tooltip-popup .rows.labeled .row-label,
.rich-tooltip-popup .rows.labeled .row-value {
    display: inline;
    font-size: inherit;
    font-weight: 400;
    color: var(--text-primary);
}

.rich-tooltip-popup .rows.labeled .row-label::after {
    content: ": ";
}

.rich-tooltip-popup .arrow {
    position: absolute;
    top: -12px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-bottom-color: var(--surface-elevated);
    filter: drop-shadow(0 -1px 0 var(--border-primary));
}

.rich-tooltip-popup.is-above .arrow {
    top: auto;
    bottom: -12px;
    border-bottom-color: transparent;
    border-top-color: var(--surface-elevated);
    filter: drop-shadow(0 1px 0 var(--border-primary));
}