@charset "UTF-8";

/* VARIABLES */
:root {
    /* > Set these from video file / data */
    --film-aspect: 0.8;
    --film-aspect-inverse: 1.25;

    /* > Will be set in JS */
    --num-scenes: 1;

    --gap-main: 4px;

    --width-video: calc((100vh - var(--height-page-header) - var(--height-player-header) - var(--height-timeline) - var(--gap-main) - var(--height-player-footer)) * var(--film-aspect-inverse));

    --color-bg: #242424;
    --color-video-bg: #444444;
    --color-text-default: #e2e2e2;

    --color-rfp-accent: #5f64d5;
    /*5f64d5*/

    --height-page-header: 1.75rem;
    --height-player-header: 5rem;
    --height-player-footer: calc(var(--height-page-header) + var(--gap-main));

    --height-timeline: 5rem;
    --width-controls: var(--height-timeline);

    --padding-header-sides: 1rem;
    --padding-notes-sides: 1.5rem;

    --height-timeline-track: 5px;
    --size-timeline-thumb: 15px;
    --gap-scenes: 1.5px;
    --height-timeline-thumbnail: 2.75rem;
    --width-timeline-thumbnail: calc(var(--film-aspect-inverse) * var(--height-timeline-thumbnail));

    --font-default: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --font-ui-mono: "Lilex", monospace;
    --font-mono: "Lilex", "Commit", "Jet Brains", monospace;
    --font-sans: "Inter", sans-serif;
    --font-serif: "Source Serif", serif;
    --font-typewriter: "Courier Prime Code", monospace;
    --font-icons: "Font Awesome";

    --font-film-title: var(--font-default);
    --font-annotation-title: var(--font-default);

    --font-note-meta: var(--font-default);
    --font-note-quote: var(--font-serif), var(--font-sans);
    --font-note-caption: var(--font-mono), var(--font-serif);
    --font-note-source: var(--font-mono);
    --font-note-transcript: var(--font-serif);
    --font-note-title: var(--font-default);
    --font-note-heading: var(--font-default);
    --font-note-text: var(--font-serif);
    --font-note-footnotes: var(--font-mono);

    --font-timings: var(--font-default);
    --font-settings-timings: "tnum";
    --font-size-timeline-timings: 0.85rem;

    --color-controls-bg: transparent;
    --color-video-footer-bg: rgba(0, 0, 0, 0.5);
    /* #8a8377; /*darkgray;*/
    --color-timeline-track: darkgray;
    --color-timeline-track-current: #FFF;
    --color-timeline-bg-thumbnail: var(--color-timeline-track);
    --color-timeline-bg-icons: var(--color-notes-bg-current);
    --color-timeline-bg-icons-empty: var(--color-notes-bg);

    --color-sensitive: hsla(44, 10%, 64%, 1.00);
    --color-sensitive-alpha: hsla(44, 10%, 64%, 0.50);
    --gradient-sensitive-timeline: repeating-linear-gradient(-45deg, transparent, transparent 2px, var(--color-sensitive) 2px, var(--color-sensitive) 6px);

    --color-notes-highlight: #ffd841;
    --color-notes-bg: #4A4741;
    --color-notes-bg-current: #7b766d;
    /* #8a8377;*/
    --color-notes-header-bg: #3A3833;
    --color-notes-header-bg-current: #625e55;
    /*#6D685E;*/
    --color-notes-title: #AAA;
    --color-notes-title-current: #EEE;

    --height-note-closed: 9rem;
    --height-note-list-view: 3rem;
    --time-note-open: 0.5s;

    --size-circle-button: 2.5rem;
    --font-size-circle-button: 1rem;

    --icon-meta: "\f008";
    --icon-quote: "\f518";
    --icon-image: "\f030";
    --icon-recording: "\f130";
    --icon-article: "\f036";

    --icon-bibliography: "\f02e";

    --icon-play: "\f04b";
    --icon-pause: "\f04c";
    --icon-restart: "\f0e2";
    --icon-list: "\f0ca";
    --icon-close: "\f00d";
    --icon-plus: "\2b";
    --icon-plus-circle: "\f055";
    /* f0ca list dots */
    /* f03a list squares */
    /* f00d xmark */
    /* f030 camera */
    /* f03e image */
    /* f008 film */
    /* f518 book open */
    /* f02d book closed */
    /* f02e bookmark */
    /* f04b play */
    /* f04c pause */
    /* f04e forward */
    /* f04a backward */
    /* f026 volume */
    /* f027 volume low */
    /* f028 volume high */
    /* f130 microphone */
    /* f07c folder open */
    /* f08e arrow up right (link) */
    /* f0c1 link */
    /* f13d anchor */
    /* f036 text align left */
    /* f1dd paragraph */
    /* f15c file lines */
    /* f0c9 three bars */
}

/* MAIN */
html {
    width: 100%;
    /*min-height: 100vh; /* CHECK */
    font-size: 100%;
}

body {
    font-family: var(--font-default);
    height: 100%;

    background-color: var(--color-bg);
    color: var(--color-text-default);
    line-height: 1.4;

    overflow: hidden;

    display: flex;
    flex-direction: column;

    /* For Inter */
    font-feature-settings: "cv11", "ss03";
}

.button-style-close {
    --_color-button: var(--color-text-default);
    --_color-button-hover: var(--color-bg);
    width: var(--size-circle-button);
    height: var(--size-circle-button);
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--_color-button);
    border: 1px solid var(--_color-button);
    cursor: pointer;
    font-size: var(--font-size-circle-button);
    line-height: 1;
    font-family: var(--font-icons);

    &::before {
        content: var(--icon-close);
    }

    &:hover {
        color: var(--_color-button-hover);
        background-color: var(--_color-button);
    }
}

/*********************************************/
/* PAGE HEADER */
.page-header {
    height: var(--height-page-header);
    width: 100%;
    flex-grow: 0;
    flex-shrink: 0;
    display: flex;
    background-color: var(--color-rfp-accent);
    font-size: 0.7rem;
    font-family: var(--font-ui-mono);
    line-height: 1;

    & .header-tabs {
        display: flex;

        & .tab {
            display: flex;
            align-items: center;
            white-space: nowrap;
            padding: 0 var(--padding-header-sides);
            color: hsl(from var(--color-text-default) h s l / 0.5);
            cursor: auto;

            & a {
                text-decoration: none;

                &:hover {
                    text-decoration: underline;
                    color: var(--color-text-default);
                }
            }

            &.current {
                background-color: var(--color-bg);
                color: var(--color-rfp-accent);
                text-decoration: none;
            }
        }
    }

    & .notes-area-header {
        width: calc(100% - var(--width-video));
        background-color: var(--color-notes-bg);
        margin-left: auto;
        border-left: var(--gap-main) solid var(--color-bg);
        display: flex;

        & .notes-menu-button {
            display: flex;
            align-items: center;
            cursor: pointer;
            padding: 0 var(--padding-notes-sides);
            color: var(--color-notes-highlight);
            border-right: 0px solid var(--color-bg);

            &::before {
                content: "\f0c9";
                font-family: var(--font-icons);
                margin-right: 1em;
            }

            &:hover {
                background-color: var(--color-notes-highlight);
                color: var(--color-bg);
            }
        }
    }
}

/*********************************************/
/* PLAYER CONTAINER */
.rfp-player {
    width: 100%;
    flex-grow: 1;
    display: flex;
    gap: var(--gap-main);
}

a:hover {
    text-decoration: none;
}

/*********************************************/
/* VIDEO AREA */
.video-area {
    /* gap between video and timeline set in this calculation */
    /*width: calc((100vh - var(--height-player-header) - var(--height-timeline) - var(--gap-main)) * var(--film-aspect-inverse));*/
    width: var(--width-video);
    flex-grow: 0;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    /*justify-content: space-between;*/
}

/* VIDEO TITLE HEADER */
.video-area .video-header {
    display: flex;
    height: var(--height-player-header);
    width: 100%;
    flex-grow: 0;
    flex-shrink: 0;
    padding: 0rem var(--padding-header-sides);
    line-height: 1;
}

.video-header .film-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.6rem;
    height: 100%;
}

.video-header .film-title .title {
    font-family: var(--font-default);
}

.video-header .film-title .title.en {
    font-family: var(--font-film-title);
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: hsl(from var(--color-text-default) h s l / 0.8);
}

.video-header .info-button {
    border-radius: 2rem;
    width: 1.35rem;
    height: 1.35rem;
    background-color: var(--color-text-default);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-bg);
    font-size: 0.75rem;
    font-family: var(--font-ui-mono);
    cursor: pointer;
    opacity: 0.5;
}

.video-header .info-button:hover {
    opacity: 1.0;
}

.video-header .film-title .title.original {
    font-size: 0.9rem;
    opacity: 0.5;
}

/* VIDEO WRAPPER */
.video-wrapper {
    line-height: 0;
    width: 100%;

    display: grid;

    background-color: var(--color-video-bg);
}

.video-wrapper > div {
    grid-area: 1 / 1 / 2 / 2;
    position: relative;
}

.video-wrapper video {
    margin: 0;
    padding: 0;
    line-height: 0;
    width: 100%;
    height: auto;
}

.video-wrapper .original {
    cursor: pointer;
}

/* REVERSE VIDEO OVERLAY */
.video-wrapper .reversed {
    outline: 0px solid yellow;
    display: none;
    pointer-events: none;
}

.reversing .video-wrapper .reversed {
    display: block;
}

.video-wrapper .reversed .video-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*box-shadow: 0 0 100px rgba(0,0,0,1) inset;*/
    background: radial-gradient(closest-corner, rgba(0, 0, 0, 0) 33%, #000);
}

.video-wrapper .reversed::after {
    content: "◀◀";
    font-size: 2rem;
    opacity: 0.5;
    position: absolute;
    top: 2.5rem;
    right: 2.2rem;
}

/* SENSITIVE SCENE OVERLAY */
.video-wrapper .sensitive {
    padding: 0;
    display: grid;
    pointer-events: none;
    display: none;
}

.is-sensitive .video-wrapper .sensitive {
    display: grid;
}

.video-wrapper .sensitive > div {
    grid-area: 1 / 1 / 2 / 2;
}

.video-wrapper .sensitive .sensitive-cover {
    background: repeating-linear-gradient(-45deg, transparent, transparent 4px, var(--color-sensitive) 4px, var(--color-sensitive) 8px), var(--color-bg);
    background: var(--color-sensitive);
    backdrop-filter: contrast(50%) blur(30px);
    background: var(--color-sensitive-alpha);
}

.video-wrapper .sensitive .sensitive-message {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.7em;
    line-height: 1;
    isolation: isolate;
}

.video-wrapper .sensitive .sensitive-message .label {
    background: var(--color-bg);
    color: var(--color-sensitive);
    padding: 0.4em 0.8em;
    border-radius: 1.5em;
}

.video-wrapper .sensitive .sensitive-message .content {
    color: var(--color-bg);
    max-width: 50ch;
    text-wrap-style: balance;
    line-height: 1.3;
    text-align: center;
}

/* PAUSE INDICATOR OVERLAY */
.video-wrapper .pause-indicator {
    pointer-events: none;
    display: block;
    opacity: 0;
    transition: opacity 1s;
}

.video-wrapper .pause-indicator .video-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*box-shadow: 0 0 100px rgba(0,0,0,1) inset;*/
    background: radial-gradient(closest-corner, rgba(0, 0, 0, 0) 25%, #000);
}

.video-wrapper .pause-indicator .icon {
    position: absolute;
    /*top: 1.5rem;
    right: 1.5rem;*/
    width: 5rem;
    height: 5rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    /*animation: pause-spin 12s linear infinite;*/
    filter: drop-shadow(0 0 0.4rem rgba(0, 0, 0, 0.5));
    font-family: var(--font-icons);
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

.video-wrapper .pause-indicator .icon.play::after {
    content: var(--icon-pause);
    font-size: 1.1rem;
}

.video-wrapper .pause-indicator .icon.wait::after {
    content: "\f1ce";
    /*f28b*/
    font-size: 2.5rem;
    animation: pause-spin 12s linear infinite;
}

@keyframes pause-pulse {
    0% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

@keyframes pause-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.rfp-player.auto-pausing .video-wrapper .pause-indicator {
    opacity: 1.0;
}

/*********************************************/
/* TIMELINE AREA */
.video-area .timeline-wrapper {
    height: var(--height-timeline);

    display: flex;
    line-height: 1;
    gap: var(--gap-main);

    margin-top: var(--gap-main);

    position: relative;
}

/*********************************************/
/* PLAYBACK CONTROLS */
.timeline-wrapper .controls {
    width: var(--width-controls);
    flex-grow: 0;
    flex-shrink: 0;
    background-color: var(--color-controls-bg);

    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 0.5rem;
    gap: 0.5rem;
}

.controls .playback-time {
    width: 100%;
    text-align: center;
    flex-grow: 0;
    font-family: var(--font-timings);
    font-size: var(--font-size-timeline-timings);
    font-feature-settings: var(--font-settings-timings);
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
}

.controls .play-button {
    width: 100%;
    flex-grow: 1;
    border-radius: 0.5rem;
    background-color: rgba(255, 255, 255, 0.5);
    color: var(--color-bg);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 1.2rem;
    font-family: var(--font-icons);
}

.controls .play-button:before {
    content: var(--icon-play);
    /*▶*/
}

.playing .controls .play-button:before {
    content: var(--icon-pause);
    /*❙❙*/
}

.controls .play-button:hover {
    background-color: rgba(255, 255, 255, 0.75);
}

/*********************************************/
/* TIMELINE */
.timeline-wrapper .timeline {
    flex-grow: 1;
    min-width: 0;
    position: relative;
}

/*********************************************/
/* SCENES IN TIMELINE */
/*.scene-timeline {
    flex-grow: 1;
}*/

.timeline .scenes {
    display: flex;
    gap: 0;
    width: 100%;
    height: 100%;
}

.timeline .scene {
    --content-width: 0%;

    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;

    --padding-scene-left: var(--gap-scenes);
    --padding-scene-right: var(--gap-scenes);

    padding-left: var(--padding-scene-left);
    padding-right: var(--padding-scene-right);

    cursor: pointer;

    width: var(--time-width);

    min-width: 12px;
    /*min-width: 0rem;*/
    /*min-width: calc(100% / 18.0);*/
    /* animation janky because it starts from 0 and not the actual width of the element */
    transition: width 0.3s ease;

    position: relative;

    /* CHECK*/
    box-sizing: content-box;

    display: flex;
    flex-direction: column;
    gap: var(--gap-main);

    & .scene-timeline {
        position: relative;
        flex-grow: 0;
        flex-shrink: 0;

        & .track-touch-area {
            width: 100%;
            width: calc(100% + 2 * var(--gap-scenes));
            height: var(--height-timeline-track);
            position: absolute;
            left: calc(-1 * var(--gap-scenes));
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            /*background-color: rgba(255, 0, 0, 0.3);*/
        }

        & .track {
            height: var(--height-timeline-track);
            width: 100%;
            background-color: var(--color-timeline-track);
        }

        & .thumb {
            width: var(--size-timeline-thumb);
            height: var(--size-timeline-thumb);
            border-radius: 100%;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translate(-50%, -50%);
            background-color: #000;
            border: 4px solid #FFF;
            box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
            pointer-events: none;
            z-index: 999;
            display: none;
        }
    }

    &.active .scene-timeline .track {
        background-color: #FFF;
    }

    &.active .scene-timeline .thumb {
        display: block;
    }

    & .scene-content {
        width: 100%;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        overflow: clip;
        position: relative;
        opacity: 0.6;
        will-change: opacity;

        & .thumbnail {
            width: 100%;
            height: var(--height-timeline-thumbnail);
            flex-grow: 0;
            flex-shrink: 0;
            background-color: var(--color-timeline-bg-thumbnail);
            background-repeat: repeat-x;
            background-size: auto 100%;
            background-position: left top;
            mask-image: linear-gradient(to right, white var(--width-timeline-thumbnail), rgba(0, 0, 0, 0.3));
            transition: background-position 0.3s ease;
        }

        &.active .thumbnail {
            background-color: #FFF;
        }

        &:hover .thumbnail {}

        & .note-icons {
            /* Important for icon area sizing on hover */
            width: min-content;
            min-width: 100%;
            flex-grow: 1;
            background-color: var(--color-timeline-bg-icons);
            padding: 0.2rem 0.5rem;
            padding-right: 0.1rem;
            /*padding-right: calc(0.1rem + 2 * var(--gap-scenes));*/

            & .icons {
                height: 100%;
                display: flex;
                align-items: stretch;
                gap: 0.4rem;

                & div {
                    font-family: var(--font-icons);
                    font-size: 0.75rem;
                    color: var(--color-text-default);
                    opacity: 0.6;
                    border-right: 1px solid hsl(from currentColor h s l / 0.3);
                    padding-right: 0.4rem;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }

                & div:last-child {
                    border: none;
                }

                & div::before {
                    content: "\f15b";
                    /* file */
                }

                & div[data-type="meta"]::before {
                    content: var(--icon-meta);
                }

                & div[data-type="quote"]::before {
                    content: var(--icon-quote);
                }

                & div[data-type="image"]::before {
                    content: var(--icon-image);
                }

                & div[data-type="recording"]::before {
                    content: var(--icon-recording);
                }

                & div[data-type="article"]::before {
                    content: var(--icon-article);
                }
            }
        }
    }

    &.empty .scene-content .note-icons {
        background-color: var(--color-timeline-bg-icons-empty);
    }
}

.timeline .scene:first-child {
    --padding-scene-left: 0;
    /*padding-left: 0;
    margin-left: 0;*/
}

.timeline .scene:last-child {
    --padding-scene-right: 0;
    /*padding-right: 0;
    margin-right: 0;*/
}

.timeline .scene:hover {
    /* Set scene size to either full video frame width, its width proportional to its duration, or its content size (icon area), depending on which is largest */
    width: max(calc(4.375rem + 2 * var(--gap-scenes)), var(--time-width), var(--content-width));
    width: max(calc(var(--width-timeline-thumbnail) + 2 * var(--gap-scenes)), var(--time-width), var(--content-width));

    /* needed if min-width used, or else it won't open fully (?) */
    min-width: auto;

    & .scene-content {
        opacity: 1.0;
    }
}

.timeline .scene.active {
    opacity: 1.0;
}

/* Mark sensitive scenes */
.timeline .scene.is-sensitive .scene-content {}

.timeline .scene.is-sensitive .scene-content::after {
    content: "";
    position: absolute;
    /*left: var(--padding-scene-left);
    right: var(--padding-scene-right);*/
    left: 0;
    right: 0;
    top: 0;
    height: var(--height-timeline-thumbnail);
    background: var(--gradient-sensitive-timeline);
}

/*.scene-timeline .scene div::before {
    content: "▶";
    position: absolute;
    left: 50%;
    top: 1.75rem;
    font-size: 0.5rem;
    width: 3em;
    height: 3em;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #FFF;
    background-color: rgba(0,0,0,0.9);
    border-radius: 100%;
    opacity: 0;
    transition: opacity 0.1s;
}
.scene-timeline .scene:hover div::before {
    opacity: 1;
}*/

/*********************************************/
/* TIMELINE DETAILS & TOOLTIPS */

/*.timeline .thumb {
    width: var(--size-timeline-thumb);
    height: var(--size-timeline-thumb);
    border-radius: 100%;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #000;
    border: 4px solid #FFF;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    z-index: 999;
}*/

.timeline.hover .scene-timeline .track-touch-area {
    height: calc(var(--height-timeline-track) + 6px);
}

.timeline-wrapper .scrub-tooltip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    pointer-events: none;
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-50%, -100%);
    margin-right: 1rem;
    /* min distance from right video edge */
    padding-bottom: calc(2 * var(--gap-main));
    display: none;


    &.show {
        display: flex;
    }

    & .scrub-time {
        padding: 0.2em 0.3em;
        background-color: #FFF;
        color: #000;
        font-family: var(--font-timings);
        font-size: var(--font-size-timeline-timings);
        font-feature-settings: var(--font-settings-timings);
        border-radius: 0.2em;
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
        flex-grow: 0;
    }

    & .scrub-preview {
        line-height: 0;
        width: 7rem;
        position: relative;
        border-radius: 0.2em;
        overflow: hidden;
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
        border: 1px solid rgba(255, 255, 255, 0.5);
    }

    & .scrub-preview video {
        width: 100%;
        height: auto;
    }

    &.is-sensitive .scrub-preview:after {
        content: "";
        position: absolute;
        /*left: var(--padding-scene-left);
        right: var(--padding-scene-right);*/
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: var(--gradient-sensitive-timeline);
        /*background: repeating-linear-gradient(-45deg, transparent, transparent 1px, var(--color-sensitive) 1px, var(--color-sensitive) 6px);*/
    }
}

.timeline-wrapper .scene-tooltip {
    pointer-events: none;
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-50%, -100%);
    margin-right: 1rem;
    /* min distance from right video edge */
    padding-bottom: calc(3 * var(--gap-main));
    display: none;
    line-height: 1.2;

    &.show {
        display: block;
    }

    & .scene-info {
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
        border-radius: 0.2em;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 0.35em;
        border: 0px solid var(--color-notes-header-bg);
        background-color: var(--color-notes-header-bg);
        padding: 0.4em 0.5em;
        color: #AAA;
        white-space: nowrap;
        font-size: 0.8rem;
        font-family: var(--font-default);
    }

    & .number {
        font-feature-settings: var(--font-settings-timings);
        opacity: 0.5;
    }

    & .number::after {
        content: " |";
    }

    & .title {}
}

/*********************************************/
/* VIDEO FOOTER */
.video-area .video-footer {
    width: 100%;
    height: var(--height-player-footer);
    padding-top: var(--gap-main);
    flex-grow: 0;
    flex-shrink: 0;

    & .footer-content {
        height: 100%;
        display: flex;
        gap: var(--gap-main);
    }

    & .audio-controls {
        width: var(--width-controls);
        flex-grow: 0;
        flex-shrink: 0;
        background-color: var(--color-video-footer-bg);

        & .silent {
            height: 100%;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: default;
            gap: 0.5rem;
            opacity: 0.2;
        }

        & .silent::before {
            content: "\f026";
            font-family: var(--font-icons);
            font-size: 0.7rem;
        }
    }

    & .filler {
        flex-grow: 1;
        background-color: var(--color-video-footer-bg);
    }
}

/*********************************************/
/* NOTES & MATERIAL AREA */
.notes-area {
    flex-grow: 1;
    /*height: calc(100vh - var(--height-page-header) - var(--height-player-header) - var(--height-player-footer));*/
    height: calc(100vh - var(--height-page-header));

    overflow: hidden;

    display: flex;
}

.notes-area > div {
    width: 100%;
    flex-shrink: 0;
}

/*********************************************/
/* NOTES MENU VIEW */
.notes-area .menu-view {
    display: flex;
    flex-direction: column;
    height: 100%;

    margin-left: 0;
    transition: margin 0.45s;
    transition-timing-function: ease-in-out;
}

.rfp-player.menu-open .notes-area .menu-view {
    margin-left: 0;
}

.notes-area .menu-view .menu-header {
    height: var(--height-player-header);
    flex-grow: 0;
    flex-shrink: 0;
    padding-top: var(--gap-main);
    line-height: 1;
}

.notes-area .menu-view .menu-header .header-content {
    width: 100%;
    height: 100%;
    display: flex;
    padding: 0 var(--padding-notes-sides);
    background-color: var(--color-notes-highlight);
    color: var(--color-notes-bg);

    & .header-left {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 0.8rem;

        flex-grow: 1;

        & .title {
            font-family: var(--font-default);
            font-size: 1.5rem;
            display: flex;
            align-items: center;
            gap: 0.6rem;
        }

        & .info {
            font-family: var(--font-ui-mono);
            font-size: 0.75rem;
        }
    }

    & .header-right {
        flex-grow: 0;
        display: flex;
        justify-content: flex-end;
        align-items: center;

        & .menu-close-button {
            --_color-button: var(--color-notes-bg);
            --_color-button-hover: var(--color-notes-highlight);
            display: none;

            /*width: var(--size-circle-button);
            height: var(--size-circle-button);
            border-radius: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid var(--color-notes-bg);
            cursor: pointer;
            font-size: var(--font-size-circle-button);
            line-height: 1;
            font-family: var(--font-icons);

            &::before {
                content: var(--icon-close);
            }

            &:hover {
                color: var(--color-notes-highlight);
                background-color: var(--color-notes-bg);
            }*/

            /* Only show close button when opening menu (to avoid flicker of button when loading with no annotation*/
            .rfp-player.menu-open & {
                display: flex;
            }

            /* Don't show close button when starting with no annotation */
            .rfp-player[data-annotation-id="-1"] & {
                display: none;
            }
        }
    }
}

.notes-area .menu-view .menu-header .menu-close-button {}

.notes-area .menu-view .notes-menu {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    background-color: var(--color-bg);
    border-top: 1px solid var(--color-bg);
}

.menu-view .notes-menu .menu-item {
    --_color-menu-item-bg: var(--color-notes-bg);
    flex-grow: 1;
    flex-basis: 0;
    background-color: var(--_color-menu-item-bg);
    position: relative;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    line-height: 1;

    flex-shrink: 0;
    overflow-y: hidden;
    transition: flex-grow 0.3s;

    &::after {
        content: "";
        position: absolute;
        width: 6px;
        left: 0;
        top: 0;
        bottom: 0;
        background-color: hsl(from var(--color-notes-highlight) h s l / 0.2);
    }

    &.current {
        --_color-menu-item-bg: var(--color-notes-bg-current);
    }

    &.current::after {
        background-color: var(--color-notes-highlight);
    }

    & .menu-item-content {
        padding: 1rem 1.5rem;
        overflow-y: scroll;
        padding-bottom: 6rem;

        & .title {
            font-family: var(--font-annotation-title);
            font-size: 1.5rem;
            font-weight: 600;
            line-height: 1.2;
            max-width: 40rem;
        }

        & .subtitle {
            font-family: var(--font-annotation-title);
            font-size: 1.5rem;
            margin-top: 0rem;
            line-height: 1.2;
            max-width: 40rem;
            opacity: 0.6;

            &:empty {
                display: none;
            }
        }

        & .authors {
            font-family: var(--font-ui-mono);
            font-size: 0.75rem;
            max-width: 30rem;
            line-height: 1.5;
            opacity: 0.6;
            margin-top: 0.5rem;
        }

        & .abstract {
            font-family: var(--font-serif);
            font-size: 1.2rem;
            line-height: 1.35;
            max-width: 40rem;
            margin-top: 1rem;
            opacity: 0;
            transition: opacity 0.3s;

            & p + p {
                margin-top: 1em;
            }
        }

        & .bios {
            font-family: var(--font-ui-mono);
            font-size: 0.75rem;
            font-weight: 600;
            line-height: 1.5;
            max-width: 40rem;
            margin-top: 1rem;

            opacity: 0;
            transition: opacity 0.3s;

            & p::before {
                content: "●\20";
            }

            & p + p {
                margin-top: 0.5em;
            }
        }
    }

    & .arrow-button {
        display: flex;
        align-items: center;
        gap: 0.5rem;

        position: absolute;
        bottom: 0;
        padding-bottom: 1rem;
        padding-left: 1.5rem;
        padding-top: 3rem;

        background: linear-gradient(to top, var(--_color-menu-item-bg) 3.5rem, transparent);
        width: calc(100% - 3rem);
        pointer-events: none;

        & .arrow {
            width: 2rem;
            height: 2rem;
            border-radius: 2rem;
            border: 1px solid currentColor;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: all 0.2s;
            line-height: 1;
        }

        & .arrow::before {
            content: "→";
            content: "\f061";
            font-family: var(--font-icons);
            font-size: 0.75rem;
        }

        & .label {
            font-family: var(--font-ui-mono);
            font-size: 0.75rem;
            display: block;
            opacity: 0;
            transition: opacity 0.2s;

            & .current {
                display: none;
            }
        }
    }

    &.current .arrow-button .label {
        & .default {
            display: none;
        }

        & .current {
            display: block;
        }
    }

    &:hover {
        color: var(--color-notes-highlight);
        flex-grow: 3;

        & .abstract {
            opacity: 1;
        }

        & .bios {
            opacity: 0.6;
        }

        & .arrow-button {
            & .arrow {
                background-color: var(--color-notes-highlight);
                color: var(--_color-menu-item-bg);
            }

            & .label {
                opacity: 0.6;
            }
        }
    }
}

/*********************************************/
/* NOTES VIEW */
.notes-area .notes-view {
    display: flex;
    flex-direction: column;
    height: 100%;

    margin-left: -100%;
    transition: margin 0.45s;
    transition-timing-function: ease-in-out;

    position: relative;

    background-color: var(--color-bg);
}

/* Show menu without animation when no valid annotation id on startup */
.rfp-player[data-annotation-id="-1"] .notes-area .notes-view {
    transition: none;
}

.rfp-player.menu-open .notes-area .notes-view {
    margin-left: 0;
}

/*********************************************/
/* NOTES HEADER */
.notes-view .notes-header {
    height: var(--height-player-header);
    flex-grow: 0;
    flex-shrink: 0;
    padding-top: var(--gap-main);
    line-height: 1;
    border-bottom: 1px solid var(--color-bg);
}

.notes-view .notes-header .header-content {
    height: 100%;
    width: 100%;
    background-color: var(--color-notes-bg);
    display: flex;
    justify-content: flex-start;
    padding: 0 var(--padding-notes-sides);
    gap: 1rem;
}

.notes-view .notes-header .header-left {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0.65rem;
}

.notes-view .notes-header .menu-button {
    color: var(--color-notes-highlight);
    font-family: var(--font-ui-mono);
    display: flex;
    align-items: center;
    white-space: nowrap;
    gap: 0.7em;
    font-size: 0.75rem;
    cursor: pointer;
    padding-left: 2rem;
    position: relative;
}

.notes-view .notes-header .menu-button:hover {
    text-decoration: underline;
}

.notes-view .notes-header .menu-button::before {
    content: "←";
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 2rem;
    border: 1px solid currentColor;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    text-decoration: none;
    left: 0;
    font-family: var(--font-default);
    font-size: 80%;
}

.notes-view .notes-header .menu-button:hover::before {
    background-color: var(--color-notes-highlight);
    color: var(--color-notes-bg);
}

.notes-view .notes-header .notes-title {
    font-family: var(--font-annotation-title);
    font-size: 1.5rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: hsl(from var(--color-text-default) h s l / 0.8);
}

.notes-view .notes-header .notes-authors {
    font-family: var(--font-ui-mono);
    font-size: 0.75rem;
    color: hsl(from var(--color-text-default) h s l / 0.3);
}

.notes-view .notes-header .info-button {
    border-radius: 2rem;
    width: 1.35rem;
    height: 1.35rem;
    background-color: var(--color-text-default);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-bg);
    font-size: 0.75rem;
    font-family: var(--font-ui-mono);
    font-weight: 400;
    cursor: pointer;
    opacity: 0.5;
}

.notes-view .notes-header .info-button:hover {
    opacity: 1.0;
}

.notes-view .notes-header .header-right {
    flex-grow: 0;
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
}

.notes-view .notes-header .list-button {
    color: var(--color-text-default);
    border: 0px solid transparent;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.3rem;
    opacity: 0.5;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    background-color: var(--color-notes-header-bg-current);

    &::before {
        content: var(--icon-list);
        font-family: var(--font-icons);
        font-size: 1rem;
    }

    &:hover {
        opacity: 1;
    }

    .notes-view.list-view & {
        opacity: 1;
        border: 0px solid currentColor;
        background-color: var(--color-text-default);
        color: var(--color-notes-header-bg-current);
    }

    .notes-view.list-view &::before {
        /* content: var(--icon-close);
        content: "\f036";
        content: "\f70e"; */
    }
}

/*********************************************/
/* NOTES */
.notes {
    flex-grow: 1;
    overflow-y: scroll;
    scroll-behavior: smooth;

    counter-reset: counter-fn-text counter-fn-list;
}

.notes section {
    background-color: var(--color-notes-bg);
    margin-bottom: 4px;
    /*min-height: 100%;*/

    transition: opacity 0.3s;

    &:last-child {
        margin-bottom: 0;
    }

    &.empty {
        opacity: 0.3;
    }

    &.current {
        background-color: var(--color-notes-bg-current);
        --color-notes-title: #EEE;
        opacity: 1.0;
    }

    & + section {
        border-top: 0px solid #FFF;
    }

    /*********************************************/
    /* NOTES SECTION HEADER */
    & .header {
        padding: 0.7rem var(--padding-notes-sides);
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;

        position: sticky;
        top: 0;
        z-index: 1;
        background-color: var(--color-notes-header-bg);

        border-top: 0px solid var(--color-bg);

        & .scene-preview {
            cursor: pointer;
            display: grid;
            justify-items: center;
            align-items: center;
            flex-grow: 0;
            flex-shrink: 0;

            & img {
                grid-area: 1 / 1 / 2 / 2;
                height: 3rem;
                width: auto;
                border-radius: 0.2rem;
                border: 1px solid hsl(from var(--color-text-default) h s l / 0.5);
            }

            &:hover img {
                border-color: var(--color-text-default);
            }

            /* REMOVE */
            & .scene-number {
                grid-area: 1 / 1 / 2 / 2;
                filter: drop-shadow(0px 0px 3px #000);
                font-family: var(--font-sans);
                font-size: 1rem;
                display: none;
            }

            &:hover .scene-number {
                display: none;
            }

            &:hover::after {
                /*content: var(--icon-restart);*/
                content: var(--icon-play);
                font-family: var(--font-icons);
                grid-area: 1 / 1 / 2 / 2;
                opacity: 1;
                font-size: 1rem;
                line-height: 1;
                filter: drop-shadow(0px 0px 3px #000);
            }
        }

        & .scene-info {
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 0.2rem;
            width: 100%;
            padding-top: 0.2rem;
        }

        & .scene-title {
            /*display: flex;
            align-items: baseline;
            gap: 0.25em;*/
            font-family: var(--font-sans);
            font-size: 1.0rem;
            padding-right: 0%;
            display: flex;
            align-items: flex-start;
            gap: 0.6em;

            & .number {
                color: var(--color-notes-title);
                opacity: 0.4;
                white-space: nowrap;
                display: inline;
                font-feature-settings: "tnum";
                flex-grow: 0;
                flex-shrink: 0;
                /*text-align: center;
                background-color: rgba(255, 255, 255, 0.2);
                border-radius: 0.2rem;*/
                border-right: 1px solid;
                padding-right: 0.6em;
            }

            & .number::after {
                /*content: " —";*/
            }

            & .title {
                color: var(--color-notes-title);
                display: inline;
            }
        }

        & .scene-time {
            font-family: var(--font-timings);
            font-feature-settings: var(--font-settings-timings);
            color: var(--color-notes-title);
            opacity: 0.4;
            word-spacing: -0.15em;
            font-size: 0.7rem;
        }
    }

    &.current .header {
        background-color: var(--color-notes-header-bg-current);

        & .scene-preview img {
            border-color: var(--color-text-default);
        }
    }
}

/*********************************************/
/* NOTES ARTICLE ELEMENTS */

.notes article {
    width: 100%;

    display: grid;

    /*opacity: 0.3;
    transition: opacity 0.15s;*/
}

/*.notes article + article {
    border-top: 1px solid var(--color-notes-header-bg-current);
}*/

.notes .current article {
    /*opacity: 0.75;*/
}

.notes article:hover {
    /*opacity: 1;*/
}

/* .notes article:first-of-type {
    padding-top: 0.5rem;
}

.notes article:not(.open):last-child {
    padding-bottom: 0.5rem;
} */

.notes article:first-of-type .note-preview-wrapper {
    padding-top: 1rem;
}

.notes article:not(.open):last-child .note-preview-wrapper {
    padding-bottom: 1rem;
}

.notes article.no-preview:last-child {
    padding-bottom: 0;
}

.notes-view.list-view .notes article {
    padding: 0;
}

/* .notes-view:not(.list-view) .notes article.open + article:not(.open) {
    padding-top: 1rem;
} */

.notes-view:not(.list-view) .notes article.open + article:not(.open) .note-preview-wrapper {
    padding-top: 1rem;
}

.notes article {
    & .note-list-view-wrapper {}

    & .note-list-view {}

    & .note-preview-wrapper {
        padding: 0.5rem var(--padding-notes-sides);
        height: var(--height-note-closed);
        transition: opacity var(--time-note-open);
        opacity: 1;
        grid-area: 1 / 1 / 2 / 2;
        /* Let fixed height not change by paddings */
        box-sizing: content-box;

        & .note-preview {
            height: 100%;
            border: 1px solid hsl(from var(--color-text-default) h s l / 0.3);
            border-radius: 0.5rem;
            display: flex;
            overflow: hidden;
            box-shadow: 0 0 1rem rgba(0, 0, 0, 0.3);
            color: var(--color-notes-title);
            background-color: rgba(255, 255, 255, 0.1);
            transition: border-color 0.15s;
            cursor: pointer;
        }

        & .note-preview:hover {
            border-color: var(--color-text-default);
        }

        & .note-preview .preview-image {
            width: 10rem;
            background-color: #AAA;
            flex-grow: 0;
            flex-shrink: 0;

            /*background-image: url("../media/quote-images/quote01.jpg");*/
            background-position: top center;
            background-repeat: no-repeat;
            background-size: cover;

            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }

        & .note-preview .preview-image::after {
            content: var(--icon-plus-circle);
            font-family: var(--font-icons);
            font-size: 2rem;
            color: rgba(0, 0, 0, 0.4);
            opacity: 0;
            transition: opacity 0.15s;
        }

        & .note-preview:hover .preview-image::after {
            opacity: 1;
        }
    }

    &.has-multiple-images .note-preview .preview-image::before {
        content: "\f302";
        /*content: "\f07c";*/
        font-family: var(--font-icons);
        position: absolute;
        left: 0;
        bottom: 0;
        padding: 0.5rem 0.65rem;
        font-size: 1rem;
        color: hsl(from var(--color-text-default) h s l / 0.7);
    }

    & .note-content-wrapper {
        grid-area: 1 / 1 / 2 / 2;
        display: block;
        visibility: hidden;
        padding: 0rem var(--padding-notes-sides);
        height: var(--height-note-closed);
        overflow: hidden;
        opacity: 0;
        transition: opacity var(--time-note-open);

        position: relative;

        border-bottom: 1px solid hsl(from var(--color-text-default) h s l / 0.3);
    }

    /* Close button */
    & .note-content-wrapper .close-button {
        position: absolute;
        top: 1.25rem;
        right: var(--padding-notes-sides);
        right: 1rem;
        --_color-button-hover: var(--color-notes-bg);
        opacity: 0.5;
        width: 2rem;
        height: 2rem;
        font-size: 0.8rem;
    }

    &.no-preview .note-content-wrapper .close-button {
        display: none;
    }

    /* Padding to make space for close button */
    &:not(.no-preview) .note-content {
        padding-right: 2.75rem;
    }

    &:last-child .note-content-wrapper {
        border-bottom: none;
    }

    /* Border and padding on top of open contents */
    &:not(.open, .no-preview) + article .note-content-wrapper {
        border-top: 1px solid hsl(from var(--color-text-default) h s l / 0.3);
    }

    /* = article followed by open content */
    &:has(+ .open) .note-preview-wrapper,
    &:has(+ .no-preview) .note-preview-wrapper {
        padding-bottom: 1rem;
    }

    &.open .note-preview-wrapper {
        display: none;
        opacity: 0;
    }

    &.open .note-content-wrapper,
    &.no-preview .note-content-wrapper {
        visibility: visible;
        display: block;
        height: auto;
        opacity: 1;
        overflow: visible;
    }

    & .note-content {
        padding-top: 1.5rem;

        & p {
            margin: 0;
        }
    }
}

/*********************************************/
/* NOTE TYPE: META */
.notes article[data-type="meta"] {

    & .note-content-wrapper {
        padding: 0.5rem var(--padding-notes-sides);
        border-bottom: none;
    }
}

/*********************************************/
/* NOTE TYPE: QUOTE */
.notes article[data-type="quote"] {

    & .note-preview .preview-content {
        flex-grow: 1;
        padding: 0.75rem 1.5rem 0 1rem;

        mask-image: linear-gradient(to bottom, black 50%, transparent);
    }

    & .note-preview .preview-content .title {
        font-family: var(--font-note-title);
        font-size: 0.95rem;
        margin-bottom: 0.75em;
        font-weight: 600;

        &::before {
            content: var(--icon-quote);
            font-size: 0.9rem;
            margin-right: 0.5em;
            width: 1.2em;
            display: inline-block;
            text-align: center;
            font-family: var(--font-icons);
            opacity: 0.6;
        }
    }

    & .note-preview .preview-content .text {
        font-family: var(--font-note-quote);
        font-size: 0.95rem;
        opacity: 0.7;
    }

    & .note-content-wrapper {
        /* padding-bottom: 0rem; */
    }

    & .note-content {
        /* padding-right: 0rem; */
    }
}

/*********************************************/
/* NOTE TYPE: IMAGE */
.notes article[data-type="image"] {

    & .note-preview .preview-content {
        flex-grow: 1;
        padding: 0.75rem 1.5rem 0.75rem 1rem;

        /*mask-image: linear-gradient(to bottom, black 50%, transparent);*/

        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    & .note-preview .preview-content .title {
        font-family: var(--font-note-title);
        font-size: 0.95rem;
        font-weight: 600;

        & + .text {
            margin-top: 0.75em;
        }
    }

    & .note-preview .preview-content .text {
        font-family: var(--font-note-caption);
        opacity: 0.7;
        max-width: 75%;
        font-weight: 500;
        font-size: 0.8rem;
        font-style: italic;

        &::before {
            content: var(--icon-image);
            font-family: var(--font-icons);
            font-size: 0.9rem;
            margin-right: 0.5em;
            width: 1.2em;
            display: inline-block;
            text-align: center;
            opacity: 0.6;
            font-style: normal;
        }
    }

    & .note-content-wrapper {
        /* padding-bottom: 1.5rem; */
    }

    & .note-content {}
}

/*********************************************/
/* NOTE CONTENT BLOCKS */
.notes .block {
    & p + p {
        margin-top: 1em;
    }
}

.notes .block + .block {
    margin-top: 1rem;
}

.notes .note-content > .block:last-child {
    margin-bottom: 1.5rem;
}

.notes .note-content .block[data-type="source"].has-cover:last-child {
    margin-bottom: 0;
}

.notes .note-content > .block:last-child:has(> .block[data-type="source"].has-cover:last-child) {
    margin-bottom: 0;
}

.notes .block[data-type="title"] + .block[data-type="quote-text"] {
    margin-top: 0.75rem;
}

.notes .block[data-type="caption"] + .block[data-type="source"] {
    margin-top: 0.5rem;
}

.notes .block[data-type="image"]:has(.block[data-type="caption"]) + .block[data-type="image"] {
    margin-top: 2rem;
}

.notes .block[data-type="quote"] + .block[data-type="quote"] {
    margin-top: 1.5rem;
}

.notes .block[data-type="quote"] + .block[data-type="image"] {
    margin-top: 1.5rem;
}

.notes .block[data-type="text"] + .block[data-type="image"] {
    margin-top: 1.5rem;
}

.notes .block[data-type="image"] + .block[data-type="footnotes"] {
    margin-top: 2rem;
}



.notes .block[data-type="meta"] {
    padding: 0.5rem 0.75rem;
    border: 1px solid hsl(from currentColor h s l / 0.5);
    border-radius: 0.5rem;
    display: flex;
    gap: 0.5rem;

    & .text {
        font-family: var(--font-note-meta);
        font-size: 0.85rem;
    }

    & .icon {
        width: 2rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    & .icon::before {
        content: var(--icon-meta);
        font-family: var(--font-icons);
        font-size: 1.2rem;
        opacity: 0.5;
    }
}

.notes .block[data-type="title"] {
    font-family: var(--font-note-title);
    font-weight: 500;
    font-size: 1.1rem;
    max-width: 60ch;
    color: hsl(from currentColor h s l / 0.8);
    font-weight: 600;

    /* margin-bottom: 0.75rem; */
}

.notes .block[data-type="quote-text"] {
    font-family: var(--font-note-quote);
    line-height: 1.5;
    border-left: 2px solid hsl(from currentColor h s l / 0.3);
    padding-left: 1rem;
    padding-right: 1.5rem;
    font-weight: 400;
    line-height: 1.5;
    font-size: 1.05rem;
    color: hsl(from currentColor h s l / 1.0);

    /* margin-bottom: 1rem; */
}

.notes .block[data-type="source"] {
    /* margin-top: 0.5rem; */

    &.has-cover {
        display: flex;
        gap: 0rem;

        & .text {
            padding-top: 1rem;
            max-width: 60ch;
        }
    }

    & .text {
        font-family: var(--font-note-source);
        font-weight: 500;
        font-size: 0.7rem;
        line-height: 1.5;
        max-width: 80ch;
        color: hsl(from currentColor h s l / 0.5);

        & a {
            text-decoration: underline;
            color: inherit;

            &:hover {
                color: hsl(from currentColor h s l / 0.8);
            }
        }
    }

    & .cover {
        width: 15rem;
        flex-grow: 0;
        flex-shrink: 0;
        max-height: 12rem;
        overflow: hidden;
        mask-image: linear-gradient(0deg, transparent, black 3rem);
        opacity: 0.8;

        & img {
            width: 80%;
            box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
            transform: rotate(-2.5deg) translate(12%, 8%);
        }
    }
}

.notes .block[data-type="image"] {
    & .image {
        width: 100%;

        & img {
            width: 100%;
            box-shadow: 0 0 1rem rgba(0, 0, 0, 0.3);

            width: auto;
            max-width: min(40rem, 100%);
            max-height: 70vh;
        }

        & + .source {
            margin-top: 0.75rem;
        }
    }

    &.zoom .image {
        cursor: pointer;
    }

    /* source in image blocks */
    & .block[data-type="source"] .text {
        color: hsl(from currentColor h s l / 0.3);
    }
}

.notes .block[data-type="image-set"] {

    & .images {
        display: flex;
        gap: 1rem;

        & > .block {
            flex-grow: 1;
            flex-basis: 0;
            margin-top: 0;
        }
    }
}

.notes .block[data-type="caption"] {
    margin-top: 0.65rem;
    font-family: var(--font-note-caption);
    font-size: 0.85rem;
    font-style: italic;
    opacity: 0.7;
    padding-left: 0.25rem;
    max-width: 65ch;

    & p {
        /* text-wrap-style: balance; */
    }

    & p + p {
        margin-top: 0.15rem;
    }

    & p::before {
        content: var(--icon-image);
        margin-right: 0.7em;
        font-family: var(--font-icons);
        font-size: 1rem;
        font-style: normal;
        opacity: 0.6;
    }
}

.notes .block[data-type="heading"] {
    font-family: var(--font-note-heading);
    font-size: 1.25rem;
    line-height: 1.2;
    font-weight: 600;

    /* margin-bottom: 0.65em; */
}

.notes .block[data-type="text"] {
    font-family: var(--font-note-text);
    font-size: 1.25rem;
    line-height: 1.4;

    & .fn {
        font-family: var(--font-note-footnotes);
        font-weight: 500;
        vertical-align: super;
        color: hsl(from currentColor h s l / 0.5);
        line-height: 1;
        font-size: 0.75rem;
        margin-right: 0.1em;

        &::before {
            counter-increment: counter-fn-text;
            content: counter(counter-fn-text);
        }
    }

    & + .block[data-type="text"] {
        margin-top: 0.65em;
    }
}

.notes .block[data-type="footnotes"] {
    font-family: var(--font-note-footnotes);
    font-weight: 500;
    font-size: 0.7rem;
    line-height: 1.5;
    color: hsl(from currentColor h s l / 0.5);
    /* margin-top: 1rem; */
    max-width: 95ch;

    --_inset-footnotes: 2em;

    & p {
        padding-left: var(--_inset-footnotes);
    }

    & p::before {
        counter-increment: counter-fn-list;
        content: counter(counter-fn-list);
        width: var(--_inset-footnotes);
        margin-left: calc(-1 * var(--_inset-footnotes));
        display: inline-block;
    }

    & p + p {
        margin-top: 0.5em;
    }

    & a {
        text-decoration: underline;
        color: inherit;

        &:hover {
            color: hsl(from currentColor h s l / 0.8);
        }
    }
}

.notes .block[data-type="recording"] {

    & .audio {
        width: 100%;
        margin-bottom: 0.5rem;
        padding: 0 1.5rem;

        & audio {
            width: 100%;
            color: red;

            &::-webkit-media-controls-panel {
                background-color: #f0e0bd;
            }
        }
    }

    & .transcript {
        font-family: var(--font-note-transcript);
        font-size: 1.3rem;
        font-weight: 500;
        font-style: italic;
        margin-bottom: 0.5rem;
        line-height: 1.35;
        /*border-left: 2px solid hsl(from currentColor h s l / 0.3);*/
        padding-left: 2rem;
        padding-right: 1.5rem;
        color: #f0e0bd;

        & em {
            font-style: normal;
        }

        & p {}

        & p:first-child::before {
            content: var(--icon-recording);
            font-family: var(--font-icons);
            opacity: 0.3;
            display: inline-block;
            font-size: 80%;
            vertical-align: 0.1em;
            margin-left: -2rem;
            width: 2rem;
            font-style: normal;
        }
    }
}

/*********************************************/
/* LIST VIEW FOR NOTES */
.notes-view article .note-list-view-wrapper {
    grid-area: 1 / 1 / 2 / 2;
    /*display: none;
    visibility: hidden;*/
    padding: 0rem var(--padding-notes-sides);
    height: var(--height-note-list-view);
    /*opacity: 1;
    transition: opacity var(--time-note-open);*/
    display: none;
    align-items: center;
    overflow: hidden;
    cursor: pointer;
    color: var(--color-text-default);

    &:hover .note-list-view {
        opacity: 1;
    }

    & .note-list-view {
        display: flex;
        align-items: center;
        gap: 0.7rem;
        width: 100%;
        width: calc(100% + 2rem);
        mask-image: linear-gradient(to left, transparent, black 2rem);
        /* mask gradient starts outside view */

        opacity: 0.5;
        transition: opacity 0.15s;

        & .icon {
            flex-grow: 0;
            flex-shrink: 0;
            border-right: 1px solid currentColor;
            padding-right: 0.7rem;
            width: 2.1rem;
            display: flex;
            justify-content: center;
            align-items: center;

            &::before {
                content: "";
                font-family: var(--font-icons);
                font-size: 1rem;
                opacity: 0.6;
            }
        }

        & .title {
            text-overflow: ellipsis;
            white-space: nowrap;
            flex-grow: 1;
            font-size: 1rem;
            font-family: var(--font-sans);
        }
    }
}

.notes-view article:not(:last-child) .note-list-view-wrapper {
    border-bottom: 1px solid hsl(from var(--color-text-default) h s l / 0.5);
}

.notes-view article[data-type="quote"] .note-list-view .icon::before {
    content: var(--icon-quote);
}

.notes-view article[data-type="image"] .note-list-view .icon::before {
    content: var(--icon-image);
}

.notes-view article[data-type="recording"] .note-list-view .icon::before {
    content: var(--icon-recording);
}

.notes-view article[data-type="article"] .note-list-view .icon::before {
    content: var(--icon-article);
}

.notes-view.list-view .notes section {
    min-height: auto;
}

/* Force hide contents in list view */
.notes-view.list-view :is(article, article.open, article.no-preview) {
    & .note-list-view-wrapper {
        display: flex;
    }

    & .note-preview-wrapper {
        display: none;
    }

    & .note-content-wrapper {
        display: none;
    }
}

/*********************************************/
/* BIBLIOGRAPHY OVERLAY */
.bibliography-overlay {
    position: absolute;
    top: var(--height-player-header);
    left: 0;
    right: 0;
    bottom: var(--height-player-footer);
    /* Above go-to-current button */
    z-index: 100;
    background-color: var(--color-notes-bg);
    color: var(--color-text-default);
    display: none;

    .show-bibliography & {
        display: block;
    }

    & .bibliography-content {
        width: 100%;
        height: 100%;
        overflow-y: scroll;
        padding-top: 0rem;
        padding-left: var(--padding-notes-sides);
        padding-right: calc(var(--padding-notes-sides) + var(--size-circle-button) + 1.5rem);
        padding-bottom: 3rem;

        & .header {
            height: calc(var(--size-circle-button) + 2rem);
            display: flex;
            align-items: center;

            & .title {
                font-family: var(--font-default);
                font-size: 1.5rem;
                color: hsl(from var(--color-text-default) h s l / 0.8);
            }
        }


        & .content {
            font-family: var(--font-serif);
            font-size: 0.95rem;

            & > div:not(:empty) + div {
                margin-top: 1rem;
            }
        }

        & .text-before:empty {
            display: none;
        }

        & .text-after:empty {
            display: none;
        }

        & .references {
            & p {
                padding-left: 1.25rem;

                &::before {
                    content: var(--icon-bibliography);
                    font-family: var(--font-icons);
                    opacity: 0.3;
                    width: 1.25rem;
                    margin-left: -1.25rem;
                    display: inline-block;
                    font-size: 85%;
                }
            }
        }

        & p + p {
            margin-top: 0.75em;
        }
    }

    & .close-button {
        position: absolute;
        top: 1rem;
        right: var(--padding-notes-sides);
        --_color-button-hover: var(--color-notes-bg);
    }
}

/*********************************************/
/* ANNOTATION INFO OVERLAY */
.annotation-info-overlay {
    position: absolute;
    top: var(--gap-main);
    left: 0;
    right: 0;
    bottom: var(--height-player-footer);
    /* Above go-to-current button */
    z-index: 100;
    background-color: var(--color-notes-highlight);
    color: var(--color-notes-bg);
    display: none;

    .show-info & {
        display: block;
    }

    & .annotation-info-content {
        width: 100%;
        height: 100%;
        overflow-y: scroll;
        padding-top: 0;
        padding-left: var(--padding-notes-sides);
        padding-right: calc(var(--padding-notes-sides) + var(--size-circle-button) + 1.5rem);
        padding-bottom: 3rem;

        & .header {
            height: calc(var(--height-player-header) - var(--gap-main));
            display: flex;
            align-items: center;
            margin-bottom: 1.5rem;
            border-bottom: 1px solid hsl(from currentColor h s l / 0.3);

            & .title {
                font-family: var(--font-ui-mono);
                font-size: 0.7rem;
                color: hsl(from currentColor h s l / 0.6);
            }
        }


        & .content {

            & > div:empty {
                display: none;
            }

            & .title {
                font-family: var(--font-annotation-title);
                font-size: 1.5rem;
                font-weight: 600;
                line-height: 1.2;
            }

            & .subtitle {
                font-family: var(--font-annotation-title);
                font-size: 1.5rem;
                line-height: 1.2;
            }

            & .authors {
                margin-top: 0.5rem;
                font-family: var(--font-serif);
                font-size: 0.95rem;
                color: hsl(from currentColor h s l / 0.6);
            }

            & .description {
                margin-top: 2.5rem;
                font-family: var(--font-serif);
                font-size: 1.2rem;
            }

            & .bios {
                margin-top: 1.5rem;
                font-family: var(--font-serif);
                font-size: 0.95rem;
                color: hsl(from currentColor h s l / 0.6);
                border-top: 1px solid hsl(from currentColor h s l / 0.3);
                padding-top: 1.5rem;
            }

            & p + p {
                margin-top: 0.75em;
            }
        }
    }

    & .close-button {
        position: absolute;
        top: 1rem;
        right: var(--padding-notes-sides);
        --_color-button: var(--color-notes-bg);
        --_color-button-hover: var(--color-notes-highlight);
        opacity: 0.6;
    }
}

/*********************************************/
/* GO-TO-CURRENT BUTTON */
.notes-view .current-button {
    position: absolute;
    font-size: 0.65rem;
    font-family: var(--font-ui-mono);
    bottom: calc(var(--height-player-footer) + 1rem);
    left: 50%;
    translate: -50%;
    line-height: 1;
    z-index: 99;
    pointer-events: none;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s;

    &.active {
        pointer-events: all;
        opacity: 1.0;
    }

    & div {
        display: flex;
        gap: 0.7em;
        align-items: center;
        opacity: 1;
        padding: 0.6em 1.2em;
        border-radius: 3em;
        box-shadow: 0 0 2rem rgba(0, 0, 0, 0.35);
        color: var(--color-notes-bg);
        background-color: #AAA;

        background-color: var(--color-notes-bg);
        border: 1px solid hsl(from var(--color-text-default) h s l / 0.3);
        color: hsl(from var(--color-text-default) h s l / 0.5);

        &::before {
            content: "\f079";
            /* f107 */
            /* f106 (up) */
            font-family: var(--font-icons);
            font-size: 1.25em;
            opacity: 0.5;
        }

        &:hover {
            opacity: 1.0;
            background-color: var(--color-text-default);

            background-color: var(--color-notes-bg-current);
            color: var(--color-text-default);
        }
    }
}

/*********************************************/
/* NOTES FOOTER */
.notes-footer {
    height: var(--height-player-footer);
    padding-top: var(--gap-main);
    flex-grow: 0;
    flex-shrink: 0;
    background-color: var(--color-bg);
}

.notes-footer .footer-content {
    width: 100%;
    height: 100%;
    background-color: var(--color-notes-bg);
    display: flex;
    gap: var(--gap-main);
    gap: 0;
    justify-content: space-between;

    & .footer-group-options {
        display: flex;
        gap: var(--gap-main);
        gap: 0;

        & .footer-button {
            --_color-button: var(--color-text-default);
            display: flex;
            align-items: center;
            padding: 0 1rem 0 0.8rem;
            font-size: 0.65rem;
            font-family: var(--font-ui-mono);
            background-color: rgba(255, 255, 255, 0.1);
            background-color: transparent;
            color: hsl(from var(--_color-button) h s l / 0.35);
            cursor: pointer;
            gap: 0.65em;
            border-right: var(--gap-main) solid var(--color-bg);
            border-right: 1px solid var(--color-bg);

            &::before {
                content: "";
                width: 1.15em;
                height: 1.15em;
                border: 1px solid currentColor;
                padding: 1.5px;
                background-clip: content-box;
                border-radius: 1rem;
            }

            &.forced::before {
                color: var(--color-notes-highlight);
            }

            &.active {}

            &.active::before {
                background-color: currentColor;
            }

            &:hover {
                color: var(--_color-button);
                background-color: rgba(255, 255, 255, 0.2);
            }
        }
    }

    & .footer-group-bibliography {
        display: flex;
        flex-grow: 1;

        & .button-bibliography {
            --_color-button: var(--color-text-default);
            align-items: center;
            padding: 0 1rem 0 0.8rem;
            font-size: 0.65rem;
            font-family: var(--font-ui-mono);
            background-color: rgba(255, 255, 255, 0.1);
            background-color: transparent;
            color: hsl(from var(--_color-button) h s l / 0.5);
            cursor: pointer;
            gap: 0.65em;
            flex-grow: 1;
            display: none;

            .notes-view.has-bibliography & {
                display: flex;
            }

            &::before {
                content: var(--icon-bibliography);
                font-family: var(--font-icons);
                font-size: 100%;
            }

            &:hover {
                color: var(--_color-button);
                background-color: rgba(255, 255, 255, 0.2);
            }

            .show-bibliography & {
                color: var(--_color-button);
                background-color: rgba(255, 255, 255, 0.2);
            }
        }
    }
}

/*********************************************/
/* GLOBAL TOOLTIP */
.tooltip {
    display: none;
    position: absolute;

    pointer-events: none;
    user-select: none;
    white-space: nowrap;

    font-family: var(--font-ui-mono);
    color: var(--color-bg);
    background-color: var(--color-text-default);

    font-size: 0.7rem;
    line-height: 1.3;

    margin: var(--gap-main) 0;

    box-shadow: 0 0 0.75rem rgba(0, 0, 0, 0.3);

    align-items: center;
    padding: 0 1rem;
    height: var(--height-page-header);

    z-index: 9999;
}

.tooltip.show {
    display: flex;
}

/* Custom color settings for tooltips. Elements need to have the same data attribute.*/
.tooltip[data-tooltip-color="notes-highlight"] {
    background-color: var(--color-notes-highlight);
}


/*********************************************/
/* DEBUG OVERLAY */
.debug {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    padding: 1rem;
    background-color: rgba(0, 0, 0, 0.5);
    color: rgba(255, 255, 255, 0.5);

    display: none;
}

.seeking .debug {
    background-color: darkgoldenrod;
    outline: 8px solid darkgoldenrod;
    outline-offset: 4px;
}