/* ==========================================================================
   Sticky Reading Header & Progress Bar
   ========================================================================== */

/* --------------------------------------------------------------------------
   Sticky Header Container
   -------------------------------------------------------------------------- */

.sticky-reading-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;

    background: white;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);

    /* Hidden by default, slides down when .is-visible */
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition:
        transform 0.3s ease,
        opacity 0.3s ease,
        visibility 0.3s ease;
}

.sticky-reading-header.is-visible {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

/* --------------------------------------------------------------------------
   Inner Layout (title + TOC button)
   -------------------------------------------------------------------------- */

.sticky-reading-header__inner {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--space-xs, 8px) var(--space-s);

    @media (width >= 800px) {
        padding-inline: calc(var(--space-l) * 2);
    }
}

/* --------------------------------------------------------------------------
   Title
   -------------------------------------------------------------------------- */

.sticky-reading-header__title {
    flex: 1;
    min-width: 0; /* allow text truncation in flex */

    font-family: var(--font-serif);
    font-size: var(--step-0, 1rem);
    font-weight: 600;
    line-height: 1.3;
    color: #333;

    white-space: nowrap;
    overflow: hidden;

    /* Fade-out on the right edge when text overflows */
    mask-image: linear-gradient(
        to right,
        black calc(100% - 3rem),
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        to right,
        black calc(100% - 3rem),
        transparent 100%
    );
}

/* --------------------------------------------------------------------------
   TOC Button Slot
   -------------------------------------------------------------------------- */

.sticky-reading-header__toc-slot {
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Progress Bar
   -------------------------------------------------------------------------- */

.reading-progress-container {
    width: 100%;
    height: 3px;
    background: rgba(150, 0, 12, 0.15);
}

.reading-progress-bar {
    height: 100%;
    width: 0%;
    background: #96000c;
    transition: width 50ms linear;
}