/* Post/page only — vertical sidebar ToC, left edge */

@media (min-width: 992px) {

    custom-indicator {
        position: fixed !important;
        left: max(16px, calc(1.11vw * var(--scale))) !important;
        right: auto !important;
        top: 50% !important;
        transform: translateY(-50%);
        bottom: auto !important;

        width: auto !important;
        max-height: 80vh;
        height: auto !important;
        padding: 0 !important;

        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;

        background-color: transparent !important;
        overflow: visible !important;
    }


    /* --- Horizontal dashes stacked in a column --- */
    .indicator-lines {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0;
        flex-shrink: 0;
        /* Fixed width wider than any line so align-items:center has room to center shorter lines */
        width: max(30px, calc(2.08vw * var(--scale)));
        max-height: 80vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        overscroll-behavior: contain;
    }

    .indicator-lines::-webkit-scrollbar {
        display: none;
    }

    .indicator-line {
        display: flex !important;
        align-items: center;
        /* Default width for top-level sections (no heading level) */
        width: max(22px, calc(1.53vw * var(--scale))) !important;
        min-width: unset !important;
        height: auto !important;
        min-height: unset !important;
        padding: max(4px, calc(0.28vw * var(--scale))) 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        opacity: 0.3;
        cursor: pointer;
        transition: opacity 0.2s ease-out;
    }

    .indicator-line:first-child { padding-top: 0 !important; }
    .indicator-line:last-child  { padding-bottom: 0 !important; }

    /* base CSS sets width:2px/min-width:2px — loads after this file, needs !important */
    .indicator-line-inner {
        width: 100% !important;
        min-width: unset !important;
        height: 2px !important;
        transition: background-color 0.2s cubic-bezier(0.5, 1, 0.89, 1);
    }

    /* --- Line width hierarchy by heading level --- */
    .indicator-line[data-level="h1"] { width: max(20px, calc(1.39vw * var(--scale))) !important; }
    .indicator-line[data-level="h2"] { width: max(16px, calc(1.11vw * var(--scale))) !important; }
    .indicator-line[data-level="h3"] { width: max(12px, calc(0.83vw * var(--scale))) !important; }
    .indicator-line[data-level="h4"] { width: max(9px,  calc(0.63vw * var(--scale))) !important; }

    /* Active: accent color only — same width as level, no growth */
    .active-indicator {
        height: auto !important;
        opacity: 1;
    }

    .active-indicator .indicator-line-inner {
        background-color: var(--button-color, #C41E5A);
    }

    /* Hover highlight */
    .indicator-line:hover {
        opacity: 0.65 !important;
    }

    .active-indicator:hover {
        opacity: 1 !important;
    }

    /* --- ToC Panel --- */
    .current-section {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;

        margin-left: max(16px, calc(1.11vw * var(--scale)));
        width: max(220px, calc(15.3vw * var(--scale)));
        max-height: 70vh;
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;

        padding: max(14px, calc(0.97vw * var(--scale))) max(16px, calc(1.11vw * var(--scale)));

        background: color-mix(in srgb, var(--background-color) 92%, var(--text-color) 8%);
        border: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent);
        border-radius: 10px;

        opacity: 0;
        transform: translateX(-5px);
        pointer-events: none;
        transition: opacity 0.3s ease 0.1s, transform 0.35s cubic-bezier(0.19, 1, 0.22, 1) 0.1s;
    }

    .current-section::-webkit-scrollbar {
        display: none;
    }

    custom-indicator:hover .current-section {
        opacity: 1;
        transform: translateX(0);
        pointer-events: auto;
        transition: opacity 0.2s ease 0s, transform 0.3s cubic-bezier(0.19, 1, 0.22, 1) 0s;
    }

    /* "CONTENTS" label */
    .current-section-wrapper::before {
        content: "CONTENTS";
        display: block;
        font-size: max(9px, calc(0.63vw * var(--scale)));
        letter-spacing: 0.12em;
        opacity: 0.4;
        text-align: left !important;
        margin-bottom: max(10px, calc(0.69vw * var(--scale)));
        pointer-events: none;
    }

    .current-section-wrapper {
        width: 100% !important;
        height: auto !important;
        position: static !important;
        display: flex !important;
        flex-direction: column;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: max(4px, calc(0.28vw * var(--scale)));
        overflow: hidden;
        text-align: left !important;
    }

    /* All entries: override absolute positioning + right-align from base CSS */
    .section-text,
    .active-text {
        position: static !important;
        display: block !important;
        transform: none !important;
        min-width: 0;
        width: 100%;
        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
        text-align: left !important;
        opacity: 0.4 !important;
        font-size: max(11px, calc(0.76vw * var(--scale)));
        letter-spacing: 0.02em;
        line-height: 1.5;
        pointer-events: auto !important;
        cursor: pointer;
        transition: opacity 0.15s ease !important;
        top: auto !important;
        bottom: auto !important;
        right: auto !important;
        left: auto !important;
    }

    .section-text:hover {
        opacity: 0.75 !important;
    }

    .active-text {
        opacity: 1 !important;
        font-weight: 600;
    }

    .section-num { display: none; }

    /* --- Text hierarchy by heading level --- */
    .section-text[data-level="h1"] {
        font-size: max(11px, calc(0.76vw * var(--scale)));
    }

    .section-text[data-level="h2"] {
        padding-left: max(12px, calc(0.83vw * var(--scale)));
        font-size: max(11px, calc(0.76vw * var(--scale)));
    }

    .section-text[data-level="h3"] {
        padding-left: max(22px, calc(1.53vw * var(--scale)));
        font-size: max(10px, calc(0.69vw * var(--scale)));
        opacity: 0.35 !important;
    }

    .section-text[data-level="h3"]:hover  { opacity: 0.65 !important; }

    .section-text[data-level="h4"] {
        padding-left: max(30px, calc(2.08vw * var(--scale)));
        font-size: max(10px, calc(0.69vw * var(--scale)));
        opacity: 0.25 !important;
    }

    .section-text[data-level="h4"]:hover  { opacity: 0.55 !important; }

    .active-text[data-level="h3"] { opacity: 0.85 !important; }
    .active-text[data-level="h4"] { opacity: 0.75 !important; }
}

/* Tablet — original bottom bar */
@media (max-width: 991px) {
    custom-indicator {
        background-color: var(--background-color);
    }

    .current-section {
        width: 100%;
        padding-left: 28px;
    }

    .current-section-wrapper {
        width: 100%;
    }

    .section-text {
        display: -webkit-box !important;
        -webkit-line-clamp: 1 !important;
        -webkit-box-orient: vertical;
        overflow: hidden !important;
        text-align: left !important;
        white-space: normal !important;
        text-overflow: clip !important;
        transform: translateY(100%) !important;
        pointer-events: none !important;
    }

    .active-text {
        transform: translateY(0%) !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}

/* Mobile — original vertical bars at bottom */
@media (max-width: 479px) {
    custom-indicator {
        padding-bottom: 17px;
        padding-top: 17px;
        height: 55px;
    }

    .indicator-lines {
        flex-direction: row !important;
        align-items: flex-end !important;
    }

    .indicator-line {
        width: 2px !important;
        min-width: 2px !important;
        height: max(17px, calc(1.18vw * var(--scale))) !important;
        padding: 0 5px !important;
    }

    .active-indicator {
        height: max(21px, calc(1.46vw * var(--scale))) !important;
        width: 2px !important;
    }

    .indicator-line-inner {
        height: 100% !important;
        width: 2px !important;
    }

    .current-section {
        padding-left: 18px;
    }
}