/*
═══════════════════════════════════════════════════════════════════════
CODEX V2.0 - INLINE TERM DETECTION
Styles for detected terms in page content
Used by: codex-detector.js
═══════════════════════════════════════════════════════════════════════
*/

/* ═══════════════════════════════════════════════════════════════════
   DETECTED TERM - Inline Highlighting
   Applied by CodexDetector.js when terms found in DOM
   ═══════════════════════════════════════════════════════════════== */

.codex-term {
 
    font-weight: 600;
    cursor: pointer;
}

.codex-term:hover {
  
}

/* Prevent weird wrapping on inline terms */
.codex-term {
    white-space: nowrap;
}

/* Selection override - don't lose highlighting on select */
.codex-term::selection {
    background: var(--io-accent-subtle);
    color: var(--io-text-primary);
}

/* ═══════════════════════════════════════════════════════════════════
   CONTEXT MENU (Right-click "Add to CODEX")
   Spawned by codex-registry.js on text selection
   ═══════════════════════════════════════════════════════════════== */

.codex-selection-menu {
    position: absolute;
    background: var(--io-surface-raised);
    border: 1px solid var(--io-border);
    border-radius: var(--io-radius-md);
    box-shadow: var(--io-shadow-lg);
    z-index: var(--io-z-tooltip);
    overflow: hidden;
    min-width: 200px;
}

.codex-selection-menu-item {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all var(--io-transition-base);
    font-size: var(--io-text-sm);
    font-weight: 500;
    color: var(--io-text-primary);
    white-space: nowrap;
    user-select: none;
}

.codex-selection-menu-item:hover {
    background: var(--io-surface-hover);
    color: var(--io-accent);
}

.codex-selection-menu-item:active {
    background: var(--io-accent-subtle);
}

.codex-selection-menu-item i {
    width: 18px;
    text-align: center;
    font-size: 14px;
}

/* ═══════════════════════════════════════════════════════════════════
   ACCESSIBILITY
   ═══════════════════════════════════════════════════════════════== */

/* Focus visible for keyboard navigation */
.codex-term:focus-visible {
    outline: 2px solid var(--io-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .codex-term {
        transition: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   DARK/LIGHT MODE ADJUSTMENTS
   ═══════════════════════════════════════════════════════════════== */

/* Terms should be readable in both modes - handled by CSS vars */
/* If needed, add theme-specific overrides here */


/* ====================================================================
   CODEX TERM STYLING - LAYER DIFFERENTIATION
   ==================================================================== */

/* Layer1: Capitalized (fancy) */
.codex-term[data-layer="layer1"] {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
       background: var(--io-accent-subtle);
    color: var(--io-accent-bright);
}

/* Layer0: Normal case (clean) */
.codex-term[data-layer="layer0"] {
    text-transform: none;
    letter-spacing: 0.3px;
    font-weight: 500;
    color: var(--io-text-secondary);
}

/* Layer0: Normal case (clean) */
.codex-term[data-layer="layer0"] {
    text-transform: none;
    letter-spacing: 0.3px;
    font-weight: 500;
    color: var(--io-text-secondary);
    text-decoration: underline dashed;
    text-decoration-color: var(--io-accent);
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.codex-term[data-layer="layer0"]::before {
    color: var(--io-accent);
    transform: translateY(1px); /* adjust this value: try 0.5px, 1px, 2px */
}

.codex-term[data-layer="layer0"]:hover::before {
    opacity: 1;
}