/**
 * ORGANISM: SetStudyPanel / MOLECULE: SetStudyStrip (a note, problem or app opened inside a set).
 * The strip: large when the page opens (150px), a slim bar under the site header once the page is scrolled
 * ([data-set-study].is-compact: 70px, fixed); its large place stays in the page, so nothing below it jumps.
 * The contents panel, on the right like a note's table of contents:
 *   wide screens, open ([data-panel="open"]): the side column (3 of 12, as wide as a note's table of contents),
 *     rising with the page and stuck under the strip (square top corners while stuck: .is-stuck);
 *   closed, and on phones / tablets: out of the screen on the right, its blue tab left at the edge
 *     ([data-drawer="open"] on phones slides it in, with a dim backdrop below the site header).
 * Level lines (3px) under the arrows: rows lie on them, the open item and the heading read now paint them blue.
 */
[data-set-study] .set-study-head { height: 150px; }
[data-set-study] .set-study-strip { position: absolute; top: 0; left: 0; right: 0; height: 150px; }
[data-set-study].is-compact .set-study-strip { position: fixed; top: 70px; height: 70px; }
.set-study-strip .set-strip-cover { width: 4.5rem; height: 4.5rem; }
.set-study-strip .set-strip-title {
    font-size: 1rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.set-study-strip .set-strip-summary { display: none; }
@media (min-width: 768px) {
    .set-study-strip .set-strip-cover { width: 6.5rem; height: 6.5rem; }
    .set-study-strip .set-strip-title { font-size: 1.375rem; }
    .set-study-strip .set-strip-summary {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        max-width: 56rem;
    }
}
[data-set-study].is-compact .set-strip-cover { width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; }
[data-set-study].is-compact .set-strip-title { font-size: 0.875rem; margin-top: 0.25rem; -webkit-line-clamp: 1; }
[data-set-study].is-compact .set-strip-summary { display: none; }

/* The contents panel out of the screen on the right; its tab hangs on its left edge, under the strip */
[data-set-study] .set-study-backdrop { display: none; }
[data-set-study] .set-study-aside {
    position: fixed;
    top: 70px;
    right: 0;
    bottom: 0;
    width: min(85vw, 22rem);
    z-index: 60;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}
/* Below the large strip and clear of the content's top corner buttons; under the slim strip once scrolled */
[data-set-study] .set-study-handle { position: absolute; left: -1.5rem; top: 230px; }
[data-set-study].is-compact .set-study-handle { top: 86px; }
[data-set-study] .set-study-panel { border-radius: 0; border-width: 0 0 0 1px; }

@media (max-width: 1023.98px) {
    [data-set-study][data-drawer="open"] .set-study-aside { transform: none; }
    [data-set-study][data-drawer="open"] .set-study-backdrop { display: block; }
}

@media (min-width: 1024px) {
    [data-set-study] .set-study-aside { transition: none; }
    /* Open: the side column, stuck under the slim strip with room below it */
    [data-set-study][data-panel="open"] .set-study-aside {
        position: sticky;
        top: 140px;
        right: auto;
        bottom: auto;
        width: auto;
        height: calc(100vh - 156px);
        z-index: 30;
        transform: none;
        grid-column: span 3 / span 3;
    }
    [data-set-study][data-panel="open"] .set-study-handle { top: 1.25rem; }
    [data-set-study][data-panel="open"] .set-study-panel { border-radius: 1rem; border-width: 1px; transition: border-radius 0.2s ease; }
    [data-set-study][data-panel="open"] .set-study-panel.is-stuck { border-top-left-radius: 0; border-top-right-radius: 0; }
    /* Closed: the content takes the whole width */
    [data-set-study][data-panel="closed"] .set-study-main { grid-column: 1 / -1; }
}

/*
 * Level lines: what a section (or the open note) holds hangs on a 3px grey line under its arrow. Its rows lie on the
 * line (same width), so the open item's blue edge takes the line's place; the note's headings start where the
 * items of a section start (their number), deeper heading levels (h3, h4: table-of-contents.js ml-3 / ml-6) hang a
 * step further on their own line.
 */
/* The line touches the box above it (no margin on top); the rows keep a little room from it and from each other */
.set-study-panel .set-study-level { border-left: 3px solid rgb(229 231 235); margin-top: 0; padding-top: 0.25rem; }
.set-study-panel nav ol > li + li,
.set-study-panel .set-study-toc > li + li { margin-top: 0.1875rem; }
.dark .set-study-panel .set-study-level { border-left-color: rgb(55 65 81); }
.set-study-panel .set-study-level > li > .set-study-row,
.set-study-panel .set-study-level > li > details > .set-study-row,
.set-study-panel .set-study-toc > li > .toc-link {
    margin-left: -3px;
    box-shadow: inset 3px 0 0 rgb(229 231 235);
}
.dark .set-study-panel .set-study-level > li > .set-study-row,
.dark .set-study-panel .set-study-level > li > details > .set-study-row,
.dark .set-study-panel .set-study-toc > li > .toc-link {
    box-shadow: inset 3px 0 0 rgb(55 65 81);
}
.set-study-panel .set-study-toc > li > .toc-link {
    border-radius: 0 0.5rem 0.5rem 0;
    padding-left: 1.875rem;
}
/* What holds the item read now (its sections, the note itself): a soft blue edge */
.set-study-panel .set-study-row.is-trail,
.set-study-panel .set-study-level > li > .set-study-row.is-trail,
.set-study-panel .set-study-level > li > details > .set-study-row.is-trail {
    box-shadow: inset 3px 0 0 rgb(147 197 253);
}
.dark .set-study-panel .set-study-row.is-trail,
.dark .set-study-panel .set-study-level > li > .set-study-row.is-trail,
.dark .set-study-panel .set-study-level > li > details > .set-study-row.is-trail {
    box-shadow: inset 3px 0 0 rgb(30 64 175);
}
/* The open item and the heading read now: the blue edge */
.set-study-panel .set-study-row.is-current,
.set-study-panel .set-study-level > li > .set-study-row.is-current,
.set-study-panel .set-study-toc > li > .toc-link.bg-blue-50,
.dark .set-study-panel .set-study-level > li > .set-study-row.is-current,
.dark .set-study-panel .set-study-toc > li > .toc-link.bg-blue-50 {
    box-shadow: inset 3px 0 0 rgb(37 99 235);
}
/* No separator line before the note's Tags / Sources / Comments in the panel: the level line runs on unbroken */
.set-study-panel .set-study-toc > li.border-t { display: none; }