/* =========================================================
   r3cl4m3 — INLINE ANNOTATIONS (FINAL / FIXED)
   Attribute-driven. No DOM-structure assumptions.
   ========================================================= */

:root {
    --r3cl4m3-space-2: 0.125rem;
    --r3cl4m3-space-4: 0.25rem;
    --r3cl4m3-space-8: 0.5rem;
    --r3cl4m3-space-12: 0.75rem;
    --r3cl4m3-space-16: 1rem;

    --r3cl4m3-radius-s: 2px;
    --r3cl4m3-radius-m: 4px;

    --r3cl4m3-border-thin: 1px;

    --r3cl4m3-fs-xs: 0.875rem;
    --r3cl4m3-lh-tight: 1.25;
    --r3cl4m3-lh-normal: 1.6;

    /* alternating backgrounds */
    --r3cl4m3-yellow-1: rgba(255,230,150,0.45);
    --r3cl4m3-yellow-2: rgb(255, 180, 6);

    --r3cl4m3-red-1: rgba(255,130,130,0.30);
    --r3cl4m3-red-2: rgb(255, 0, 0);

    /* tooltip */
    --r3cl4m3-tooltip-bg: #fff7d6;
    --r3cl4m3-tooltip-bg-red: #ffd9d9;
    --r3cl4m3-tooltip-border: rgba(0,0,0,0.25);
    --r3cl4m3-tooltip-shadow: rgba(0,0,0,0.18);

    --r3cl4m3-trans-fast: 120ms;
    --r3cl4m3-trans-mid: 200ms;
}


/* ===== Base annotation ===== */

.r3cl4m3-annotation {
    position: relative;
    cursor: pointer;
    padding: 0 var(--r3cl4m3-space-2);
    border-radius: var(--r3cl4m3-radius-s);
    transition: background var(--r3cl4m3-trans-mid),
                outline var(--r3cl4m3-trans-fast);
}


/* ===== Alternation (yellow, non-critical) ===== */

.r3cl4m3-annotation[data-r3cl4m3-critical="0"][data-r3cl4m3-odd="1"] {
    background: var(--r3cl4m3-yellow-1) !important;
}

.r3cl4m3-annotation[data-r3cl4m3-critical="0"][data-r3cl4m3-odd="0"] {
    background: var(--r3cl4m3-yellow-2) !important;
}


/* ===== Critical inline highlight (two tones) ===== */

.r3cl4m3-annotation[data-r3cl4m3-critical="1"] {
    border-bottom: var(--r3cl4m3-border-thin) solid rgba(180,0,0,0.4);
}

.r3cl4m3-annotation[data-r3cl4m3-critical="1"][data-r3cl4m3-odd="1"] {
    background: var(--r3cl4m3-red-1) !important;
}

.r3cl4m3-annotation[data-r3cl4m3-critical="1"][data-r3cl4m3-odd="0"] {
    background: var(--r3cl4m3-red-2) !important;
}


/* ===== Tooltip base (readable, stable, independent of text width) ===== */

.r3cl4m3-annotation[data-r3cl4m3-note]:hover::after {
    content: attr(data-r3cl4m3-note);
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: var(--r3cl4m3-space-2);

    /* fixed UX rules */
    min-width: 180px;
    max-width: 320px;
    width: max-content;
    white-space: normal;
    word-break: break-word;

    background: var(--r3cl4m3-tooltip-bg);
    border: var(--r3cl4m3-border-thin) solid var(--r3cl4m3-tooltip-border);
    border-radius: var(--r3cl4m3-radius-s);
    padding: var(--r3cl4m3-space-4) var(--r3cl4m3-space-8);

    font-size: var(--r3cl4m3-fs-xs);
    line-height: var(--r3cl4m3-lh-tight);

    box-shadow: 0 2px 4px var(--r3cl4m3-tooltip-shadow);
    z-index: 99999;
    pointer-events: none;
}


/* ===== Tooltip critical coloring ===== */

.r3cl4m3-annotation[data-r3cl4m3-critical="1"]:hover::after {
    background: var(--r3cl4m3-tooltip-bg-red) !important;
    border-color: rgba(180,0,0,0.45) !important;
    color: #000;
}


/* ===== No tooltip on empty note ===== */

.r3cl4m3-annotation[data-r3cl4m3-note=""]::after {
    display: none;
}


/* ===== Prevent clipping in Gutenberg editor iframe ===== */

.editor-styles-wrapper .r3cl4m3-annotation:hover::after {
    z-index: 999999 !important;
    position: absolute !important;
}


/* ===== Gutenberg popover bubble ===== */

.r3cl4m3-popover {
    max-width: 300px;
    background: var(--r3cl4m3-tooltip-bg);
    border: var(--r3cl4m3-border-thin) solid var(--r3cl4m3-tooltip-border);
    border-radius: var(--r3cl4m3-radius-m);
    font-size: var(--r3cl4m3-fs-xs);
    line-height: var(--r3cl4m3-lh-normal);
    padding: var(--r3cl4m3-space-12) var(--r3cl4m3-space-16);
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}


/* ===== Modal (editor) ===== */

.r3cl4m3-modal .components-modal__content {
    display: flex;
    flex-direction: column;
    gap: var(--r3cl4m3-space-16);
    padding-top: var(--r3cl4m3-space-16);
    padding-bottom: var(--r3cl4m3-space-16);
}

.r3cl4m3-modal textarea.components-textarea-control__input {
    min-height: 110px;
    resize: vertical;
    padding: var(--r3cl4m3-space-12);
    font-size: var(--r3cl4m3-fs-xs);
    line-height: var(--r3cl4m3-lh-normal);
}

.r3cl4m3-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--r3cl4m3-space-8);
}


/* ===== Editor highlight outline ===== */

.editor-styles-wrapper .r3cl4m3-annotation:hover {
    outline: var(--r3cl4m3-border-thin) dashed rgba(0,0,0,0.35);
    outline-offset: var(--r3cl4m3-space-2);
}


/* ===== Nesting protection ===== */

.r3cl4m3-annotation .r3cl4m3-annotation {
    background: inherit !important;
    outline: none !important;
}