/* ===== Reading UX — Shared Enhancements =====
 * Back-to-top, reading time, TOC, smooth scroll, text selection sharing
 */

/* ===== Smooth Scroll with Sticky Nav Offset ===== */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 60px; /* offset for sticky nav */
}

/* ===== Back to Top Button ===== */
#rux-back-to-top {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 42px;
    height: 42px;
    background: var(--accent, #d97706);
    color: #000;
    border: none;
    border-radius: 50%;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
    z-index: 9000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.3s, visibility 0.3s, transform 0.3s, background 0.2s;
}
#rux-back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
#rux-back-to-top:hover {
    background: var(--accent-hover, #e6a817);
    transform: translateY(-2px);
}

/* ===== Reading Time Indicator ===== */
.rux-reading-time {
    display: inline-block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.75rem;
    color: var(--text-muted, #666);
    letter-spacing: 0.03em;
    padding: 3px 10px;
    border: 1px solid var(--border-light, #222);
    border-radius: 3px;
    margin-bottom: 12px;
}

/* ===== Table of Contents ===== */
.rux-toc {
    position: fixed;
    left: max(12px, calc((100vw - 1200px) / 2 - 220px));
    top: 100px;
    width: 200px;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    z-index: 90;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.7rem;
    line-height: 1.5;
    border-left: 2px solid var(--border-light, #222);
    padding-left: 12px;
    opacity: 0;
    transition: opacity 0.4s;
}
.rux-toc.loaded {
    opacity: 1;
}
.rux-toc-title {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted, #666);
    margin-bottom: 8px;
    font-weight: 600;
}
.rux-toc a {
    display: block;
    color: var(--text-secondary, #888);
    text-decoration: none;
    padding: 3px 0;
    transition: color 0.2s;
    border-left: 2px solid transparent;
    margin-left: -14px;
    padding-left: 12px;
}
.rux-toc a:hover {
    color: var(--accent, #d97706);
}
.rux-toc a.active {
    color: var(--accent, #d97706);
    border-left-color: var(--accent, #d97706);
}
.rux-toc a.toc-h3 {
    padding-left: 22px;
    font-size: 0.65rem;
}
/* Scrollbar styling */
.rux-toc::-webkit-scrollbar { width: 3px; }
.rux-toc::-webkit-scrollbar-thumb { background: var(--border, #333); border-radius: 3px; }

/* Hide TOC on smaller screens / when viewport is narrow */
@media (max-width: 1440px) {
    .rux-toc { display: none; }
}

/* ===== Text Selection Share Popup ===== */
.rux-sel-popup {
    position: absolute;
    z-index: 9500;
    display: flex;
    gap: 2px;
    background: var(--bg-tertiary, #1a1a1a);
    border: 1px solid var(--border, #333);
    border-radius: 6px;
    padding: 4px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
    animation: rux-popup-in 0.15s ease-out;
}
@keyframes rux-popup-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.rux-sel-popup button {
    background: transparent;
    border: none;
    color: var(--text-secondary, #888);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.7rem;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 4px;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
.rux-sel-popup button:hover {
    background: var(--accent, #d97706);
    color: #000;
}

/* ===== Print: hide all reading-ux elements ===== */
@media print {
    #rux-back-to-top,
    .rux-toc,
    .rux-sel-popup { display: none !important; }
}