/*
    Styling for the SidePanel component. The panel is docked to the window's right edge below the
    site's top bar and overlaid on the webpage, so opening, closing, or changing its page never
    moves the webpage's content. Its title and header icons are sized as in the modal dialog.
*/
/* split-check: the panel's frames, header controls, open-page list and edge tab share its custom
   properties; the list and the edge tab could move to sheets of their own at promotion. */
.side-panel
{
    /* The panel's width, judged by eye to fit two columns of content side by side. */
    --side-panel-width: 44rem;
    /* The 1px line at the panel's left edge and below its header. */
    --side-panel-line: 1px solid var(--neutral-higher-emphasis-surface-color);
    /* How far a page slides as it opens or closes, and for how long: a small movement, so it reads
       as the page coming in or going out, not as the panel opening. Judged by eye; can be tuned. */
    --side-panel-page-slide-distance: 24px;
    --side-panel-page-motion-duration: 180ms;
    /* How far a page opened over another page slides in. Farther than the first page, so it reads
       as a new page coming in over the one below: from 24px, the two pages' content overlapped
       closely enough to look like the page below shifting. Judged by eye; can be tuned. */
    --side-panel-page-over-page-slide-distance: 80px;
    /* The header's fixed height: the 1.5rem icons plus 0.25rem above and below. Borders count
       toward an element's height sitewide, so the line under the header takes 1px of it. */
    --side-panel-header-height: 2rem;
    /* The width of one header button, which is the size of its icon. */
    --side-panel-header-button-width: 1.5rem;
    --side-panel-header-gap: 0.5rem;
    --side-panel-header-inset: 0.5rem;

    /* The panel stays below the site's top bar as the webpage scrolls. */
    position: fixed;
    top: var(--WEBPAGE-HEADER-HEIGHT);
    right: 0;
    bottom: 0;
    /* The cap keeps the panel inside a window narrower than the panel's width. */
    width: min(var(--side-panel-width), 100%);
    /* One level above the webpage's content is enough, since its tables keep their stacking order
       inside themselves. Popups, tooltips, dialogs, and the navigation menu sit far above it. */
    z-index: 1;
    /* The pages' frames are stacked in one cell, the last on top. The cell is the panel's width
       however wide a page's content is: a column sized to the content would widen a page past the
       panel, carrying its header's room for the controls past the panel's edge, so the title would
       run under them. A page wider than the panel scrolls within its body instead. */
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    /* A page sliding out is cut off at the window's right edge, while its shadow and the collapse
       tab still show past the panel's left edge: the clip is inset 0 from the top, right and bottom
       edges, and -2rem from the left, reaching 2rem past it, enough for the collapse tab's 1.5rem
       and its shadow, and for the page's shadow, which spreads about 7px (its 2px offset plus its
       5px blur). */
    clip-path: inset(0 0 0 -2rem);
    color: var(--neutral-surface-high-emphasis-contrast-color);

    /* Styling for a page's frame: its header over its content. Each frame is opaque, so the shown
       page hides the ones under it. */
    .side-panel-page-frame
    {
        grid-area: 1 / 1;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        min-height: 0;
        background: var(--neutral-low-emphasis-surface-color);
        /* The border and shadow set the panel apart from the content it is overlaid on. */
        border-left: var(--side-panel-line);
        /* A shadow offset only 2px left (-2px), blurred over 5px, in black at 50% opacity. */
        box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
    }

    /* An opened page slides in from the right while fading in, slowing as it reaches its place. */
    .side-panel-page-frame-entering
    {
        animation: side_panel_page_enter var(--side-panel-page-motion-duration) ease-out;
    }

    /* A page opened over another page slides in from farther right, the same way. */
    .side-panel-page-frame-entering-over-page
    {
        --side-panel-page-slide-distance: var(--side-panel-page-over-page-slide-distance);
    }

    /* A page another page slides in over shows only its background: its header and content would
       show through the entering page as it fades in. */
    .side-panel-page-frame-covered > *
    {
        visibility: hidden;
    }

    /* A closed page slides out to the right while fading out, speeding up as it leaves, and stays
       as it ends until the script removes it. */
    .side-panel-page-frame-closing
    {
        animation: side_panel_page_close var(--side-panel-page-motion-duration) ease-in forwards;
    }

    /* Styling for a page's header holding its title. Its right end leaves room for the panel's
       header controls over it, whose width the script measures. It starts below the pinned pages'
       chips, which sit above it as a browser's tabs sit over the page they switch, moving with their
       area's height as it slides. */
    .side-panel-header
    {
        margin-top: var(--side-panel-pin-chips-height, 0px);
        display: flex;
        align-items: center;
        height: var(--side-panel-header-height);
        padding-top: 0;
        padding-right: calc(var(--side-panel-header-inset) + var(--side-panel-header-gap) + var(--side-panel-header-controls-width, 0px));
        padding-bottom: 0;
        padding-left: var(--side-panel-header-inset);
        border-bottom: var(--side-panel-line);
    }

    /* The panel's own controls, at the header's right end over every page's header: they stay in
       place while pages slide in and out under them. Above the frames, and their list above the
       shown page's content. */
    .side-panel-header-controls
    {
        position: absolute;
        top: var(--side-panel-pin-chips-height, 0px);
        right: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        gap: var(--side-panel-header-gap);
        height: var(--side-panel-header-height);
        padding-right: var(--side-panel-header-inset);

        /* The buttons' tooltips wrap them in blocks, which keep the buttons' widths. */
        > .tooltip-trigger
        {
            display: flex;
            flex-shrink: 0;
        }
    }

    /* The pinned pages' chips, on one line of their own across the panel's top, above the title row,
       as a browser's tabs sit over the page they switch, with the pin count at the line's end. They
       stay in place over every page as pages slide, as the header controls do; each page's header
       starts below them, at a height the script measures. The line scrolls sideways past the pin
       count's place. The area's height, which the script sets from the chips', slides open as the
       line shows and closed as it goes, as the site's rows that show or hide do, over 180ms. One
       line's height fits a chip and the room around it, and the pin count's place fits its pin,
       two digits and its arrow; both judged by eye. */
    .side-panel-pin-chips-place
    {
        --side-panel-pin-chips-row-height: 2rem;
        --side-panel-pin-count-place-width: 4.25rem;

        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        z-index: 1;
        overflow: hidden;
        padding-right: var(--side-panel-pin-count-place-width);
        border-bottom: 1px solid transparent;
        font-size: 0.75rem;

        /* The area slides once it has been shown at its first height, so a panel that opens with
           pins shows them at once. */
        &.side-panel-pin-chips-place-sliding
        {
            transition: height 180ms ease-out, border-color 180ms ease-out;
        }

        &.side-panel-pin-chips-place-open
        {
            border-bottom-color: var(--neutral-higher-emphasis-surface-color);
        }
    }

    /* The title rows below the chips slide with the chips' area, and only while it slides, so a
       panel that opens with pins shows its title in place at once. */
    &:has(.side-panel-pin-chips-place-sliding)
    {
        .side-panel-header
        {
            transition: margin-top 180ms ease-out;
        }

        .side-panel-header-controls
        {
            transition: top 180ms ease-out;
        }
    }

    /* On one line, the chips scroll sideways within their frame, whose shadows mark the sides with
       chips past them; the scroll bar is left out, since a wheel and the shadows serve instead. */
    .side-panel-pin-chips
    {
        height: var(--side-panel-pin-chips-row-height);
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }

    /* A chip that arrives fades in once its row has room, after the area's 180ms slide; the last
       chips unpinned fade out over 150ms before their row closes, the run in reverse. The fade's
       keyframes are the side panel's own, the page fades being the pages' stylesheets'. */
    .side-panel-pin-chip.side-panel-pin-chip-arriving
    {
        animation: side_panel_pin_chip_arrive 150ms ease-out 180ms both;
    }

    /* A new chip held hidden in its place while the line scrolls to it, then faded in at once. */
    .side-panel-pin-chip.side-panel-pin-chip-waiting
    {
        opacity: 0;
        animation: none;
    }

    .side-panel-pin-chip.side-panel-pin-chip-revealed
    {
        animation: side_panel_pin_chip_arrive 150ms ease-out both;
    }

    /* The pin count's number slides in from below as it rises and from above as it falls, fading
       in, over the 150ms and 0.35em of the site's values that change in place; the count's box
       clips it. */
    .side-panel-pin-count-number
    {
        display: inline-block;

        &.side-panel-pin-count-number-rising
        {
            animation: side_panel_pin_count_rise 150ms ease-out;
        }

        &.side-panel-pin-count-number-falling
        {
            animation: side_panel_pin_count_fall 150ms ease-out;
        }
    }

    .side-panel-pin-chip.side-panel-pin-chip-leaving
    {
        pointer-events: none;
        animation: side_panel_pin_chip_leave 150ms ease-in forwards;
    }

    .side-panel-pin-chip-list
    {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        width: max-content;
        height: var(--side-panel-pin-chips-row-height);
        padding: 0 var(--side-panel-header-inset);
    }

    /* The pin count at the chips' line's end, over the line's room for it, which opens the list of
       pinned and recently viewed pages under it. It fades in after the line slides open, as an
       arriving chip does; a panel that opens with pins shows it at once, as it shows the chips. */
    .side-panel-pin-list-place
    {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 3;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: var(--side-panel-pin-count-place-width);
        height: 2rem;
        padding-right: var(--side-panel-header-inset);
    }

    &:has(.side-panel-pin-chips-place-sliding) .side-panel-pin-list-place
    {
        animation: side_panel_pin_chip_arrive 150ms ease-out 180ms both;
    }

    /* A chip: its name, with its pencil over the name's end on hover, and its pin, in a rounded
       outline; the name's own padding spaces it from the outline's left. The shown page's chip has a gold outline, as a picked choice does. */
    .side-panel-pin-chip
    {
        display: inline-flex;
        flex-shrink: 0;
        align-items: center;
        max-width: 12rem;
        border: 1px solid var(--neutral-highest-emphasis-surface-color);
        /* The pin's width: its icon and the room around it, judged by eye. */
        --side-panel-pin-chip-unpin-width: 1.3rem;

        position: relative;
        border-radius: 0.375rem;
        cursor: grab;

        &.side-panel-pin-chip-shown
        {
            border-color: var(--EDENSOFT-GOLD);
        }

        &.side-panel-pin-chip-dragged
        {
            opacity: 0.45;
        }

        /* A gold line on the side the dragged chip lands on. */
        &.side-panel-pin-chip-drop-before
        {
            box-shadow: -3px 0 0 var(--EDENSOFT-GOLD);
        }

        &.side-panel-pin-chip-drop-after
        {
            box-shadow: 3px 0 0 var(--EDENSOFT-GOLD);
        }

        /* The name's tooltip wraps it in a block, which may shrink so the name ends in an ellipsis. */
        /* styles-other-component: the chip lays out the tooltips' wrappers around its buttons, as the header controls do. */
        > .tooltip-trigger
        {
            display: flex;
            min-width: 0;
        }
    }

    /* The pencil shows over the name's end while the pointer is over the chip or the pencil has
       the keyboard's focus, in a raised box of its own so it stands out from the name, and so
       nothing moves. It sits just before the pin, whose width is set so the pencil knows where it
       ends. It doesn't show while the name has the focus, whose ring it would cover. The chips'
       buttons' own rule, later, would take the box away, so this one names both CSS classes. */
    .side-panel-pin-chip-button.side-panel-pin-chip-rename-button
    {
        position: absolute;
        top: 50%;
        right: var(--side-panel-pin-chip-unpin-width);
        padding: 0.1rem;
        border-radius: 0.25rem;
        /* A raised box of its own sets the pencil apart from the name it covers. */
        background: var(--neutral-highest-emphasis-surface-color);
        transform: translateY(-50%);
        opacity: 0;
        pointer-events: none;
    }

    .side-panel-pin-chip:hover .side-panel-pin-chip-rename-button,
    .side-panel-pin-chip-rename-button:focus-visible
    {
        opacity: 1;
        pointer-events: auto;
    }

    .side-panel-pin-chip-unpin-button
    {
        justify-content: center;
        width: var(--side-panel-pin-chip-unpin-width);
    }

    .side-panel-pin-chip-name
    {
        display: inline-flex;
        min-width: 0;
        overflow: hidden;
        padding: 0.15rem 0.2rem 0.15rem 0.45rem;
        border: none;
        background: none;
        color: var(--neutral-surface-high-emphasis-contrast-color);
        font: inherit;
        white-space: nowrap;
        cursor: pointer;
    }

    /* The name's start is cut short first, with an ellipsis, down to a few characters; an end the
       page keeps whole, such as the developer a page came from, is cut short only after that, with
       its own ellipsis. The few characters are judged by eye. */
    .side-panel-pin-chip-name-start
    {
        flex: 0 1000 auto;
        min-width: 4ch;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .side-panel-pin-chip-name-end
    {
        flex: 0 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: pre;
    }

    /* The pencil and the pin are as large as the open-page list's entry buttons, the pencil as gray. */
    .side-panel-pin-chip-button
    {
        display: inline-flex;
        align-items: center;
        padding: 0.1rem;
        border: none;
        background: none;
        color: var(--neutral-surface-medium-emphasis-contrast-color);
        font-size: 1rem;
        cursor: pointer;
    }

    .side-panel-pin-chip-name,
    .side-panel-pin-chip-button
    {
        border-radius: 0.375rem;

        &:hover,
        &:focus-visible
        {
            color: var(--EDENSOFT-GOLD);
        }

        &:focus-visible
        {
            outline: 2px solid var(--primary-higher-emphasis-color);
            outline-offset: -2px;
        }

        &:active
        {
            filter: brightness(130%);
        }
    }

    .side-panel-pin-chip-name-box
    {
        width: 9rem;
        margin: 0.1rem;
        padding: 0.05rem 0.25rem;
        border: 1px solid var(--neutral-highest-emphasis-surface-color);
        border-radius: 0.375rem;
        outline: none;
        background: var(--neutral-lower-emphasis-surface-color);
        color: var(--neutral-surface-medium-emphasis-contrast-color);
        font: inherit;

        /* any-focus: the border shows where the caret is, however the box was focused, as the list's name box does */
        &:focus
        {
            border-color: var(--EDENSOFT-GOLD);
        }
    }

    /* Styling for the shown page's title. */
    .side-panel-title
    {
        /* The title takes the space before the header's controls and is cut short with an ellipsis
           rather than wrapping, so the header stays one row. */
        flex: 1 1 8rem;
        margin: 0;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 1.25rem;
        font-weight: normal;
    }

    /* A title's tooltip holds it in the header's title, as wide as the header leaves, so the title
       can be cut short within it. It doesn't clip, so a button's focus ring in the title shows
       whole; the title's start clips itself. */
    /* styles-other-component: only the tooltip's holder around the title can pass the title's width down to it. */
    .side-panel-title > .tooltip-trigger
    {
        display: flex;
        min-width: 0;
        max-width: 100%;
    }

    /* A plain title: its start cut short with an ellipsis, its end kept whole after it. */
    .side-panel-title-text
    {
        display: flex;
        min-width: 0;
    }

    .side-panel-title-start
    {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .side-panel-title-end
    {
        flex-shrink: 0;
        white-space: pre;
    }

    /* The pin count: a pin and how many pages are pinned, in a small rounded button that opens the
       list of pinned and recently viewed pages under it. It sits at the pin line's end, or in the
       header, before the pin, where pages can't be pinned. */
    .side-panel-open-pages
    {
        position: relative;
        flex-shrink: 0;
    }

    .side-panel-open-pages-chip
    {
        display: flex;
        align-items: center;
        gap: 0.2rem;
        /* Clips the count's number as it slides in. */
        overflow: hidden;
        padding: 0.1rem 0.5rem;
        border: 1px solid var(--neutral-higher-emphasis-surface-color);
        border-radius: 999px;
        background: var(--neutral-high-emphasis-surface-color);
        color: inherit;
        font: inherit;
        font-size: 0.8rem;
        white-space: nowrap;
        cursor: pointer;

        &:hover,
        &:focus-visible,
        &[aria-expanded="true"]
        {
            border-color: var(--EDENSOFT-GOLD);
        }

        &:active
        {
            filter: brightness(130%);
        }

        /* The arrow's box hugs its icon, so the chip centers it on the text's middle and it flips
           about its own center, as in the dropdowns, rather than about its line's box. */
        .dropdown-arrow
        {
            display: flex;
            align-items: center;

            ion-icon
            {
                display: block;
            }
        }
    }

    /* The list under the pin count, over the page's content: the pinned pages, then the recently
       viewed ones. It is as wide as its longest name and buttons, its names no narrower than the
       minimum the script sets, and no wider than 24rem, judged by eye, past which names are cut
       short. */
    .side-panel-open-page-list
    {
        position: absolute;
        top: calc(100% + 0.25rem);
        right: 0;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        width: max-content;
        max-width: 24rem;
        max-height: 60vh;
        overflow-y: auto;
        padding: 0.5rem;
        border-radius: 0.5rem;
        background: var(--neutral-high-emphasis-surface-color);
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
        font-size: 0.85rem;

        ul
        {
            margin: 0;
            padding: 0;
            list-style: none;
        }
    }

    .side-panel-open-page-list-heading
    {
        margin: 0 0 0.2rem 0;
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--neutral-surface-medium-emphasis-contrast-color);
    }

    /* "N of 10" beside "Pinned", in the gray the site's counts use. */
    .side-panel-open-page-list-pin-count
    {
        margin-left: 0.35em;
        font-weight: normal;
        color: var(--neutral-surface-low-emphasis-contrast-color);
    }

    /* An entry: its name, which shows its page, then its small buttons. The shown page's entry is
       lit. */
    .side-panel-open-page-entry
    {
        display: flex;
        align-items: center;
        gap: 0.15rem;
        padding: 0 0.25rem 0 0;
        border-radius: 0.25rem;

        &.side-panel-open-page-entry-shown
        {
            background: var(--neutral-highest-emphasis-surface-color);
        }

        /* The pin's and the pencil's tooltips keep their buttons' size; the name's takes the room
           left, no narrower than the minimum. */
        /* styles-other-component: the buttons' and the name's tooltips wrap them inside the entry, as the header's buttons' do. */
        > .tooltip-trigger
        {
            display: flex;
            flex-shrink: 0;
        }

        /* styles-other-component: the name's tooltip wraps it as the first of the entry's parts, or
           the first after a pinned page's grip. */
        > .tooltip-trigger:first-child,
        > .drag-grip:first-child + .tooltip-trigger
        {
            flex: 1 1 auto;
            min-width: var(--side-panel-open-page-name-minimum-width);
        }
    }


    /* A pinned page's entry drags to reorder, with a line where it would land. */
    .side-panel-pinned-page-entry
    {
        cursor: grab;

        &.side-panel-pinned-page-drop-before
        {
            box-shadow: inset 0 2px 0 var(--EDENSOFT-GOLD);
        }

        &.side-panel-pinned-page-drop-after
        {
            box-shadow: inset 0 -2px 0 var(--EDENSOFT-GOLD);
        }
    }

    .side-panel-open-page-entry-name
    {
        flex: 1 1 auto;
        min-width: 0;
        width: 100%;
        padding: 0.15rem 0.25rem;
        border: none;
        background: none;
        color: inherit;
        font: inherit;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        border-radius: 0.25rem;
        cursor: pointer;

        /* A text button, as the site's names are: gold text on a slightly lighter background. */
        &:hover,
        &:focus-visible
        {
            outline: none;
            color: var(--primary-higher-emphasis-color);
            background: var(--neutral-higher-emphasis-surface-color);
        }

        &:active
        {
            filter: brightness(130%);
        }
    }

    .side-panel-open-page-entry-button-holder
    {
        display: flex;
    }

    .side-panel-open-page-entry-button
    {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        padding: 0.1rem;
        border: none;
        border-radius: 0.25rem;
        background: none;
        color: var(--neutral-surface-medium-emphasis-contrast-color);
        font-size: 1rem;
        cursor: pointer;

        &:hover:not(:disabled),
        &:focus-visible
        {
            color: var(--EDENSOFT-GOLD);
        }

        &:active:not(:disabled)
        {
            filter: brightness(130%);
        }

        &:disabled
        {
            opacity: 0.4;
            cursor: default;
        }
    }

    /* The rename box takes the site's text box look, as the filter bar's search box has it: a thin
       border, rounded corners and a darker fill, the border gold while the box has focus. */
    .side-panel-pinned-page-name-box
    {
        flex: 1 1 auto;
        min-width: var(--side-panel-open-page-name-minimum-width);
        padding: 0.1rem 0.25rem;
        border: 1px solid var(--neutral-highest-emphasis-surface-color);
        border-radius: 6px;
        outline: none;
        background: var(--neutral-lower-emphasis-surface-color);
        color: var(--neutral-surface-medium-emphasis-contrast-color);
        font: inherit;

        /* any-focus: the border shows where the caret is, however the box was focused, as the filter bar's search box does */
        &:focus
        {
            border-color: var(--primary-higher-emphasis-color);
        }
    }

    /* The pushpin icon is a block, centered by its button as the site's icons are. Unpinned, the
       pin tilts 45 degrees about its middle, hollow; pinned, it stands upright, filled white, which
       is enough to tell them apart without gold pulling the eye; it turns between the two over
       200ms, judged by eye. */
    .side-panel-pin-icon
    {
        display: block;

        .side-panel-pin-icon-pin
        {
            transform-box: view-box;
            transform-origin: center;
            transform: rotate(45deg);
            transition: transform 200ms ease-out;
        }

        &.side-panel-pin-icon-pinned
        {
            color: var(--neutral-surface-highest-emphasis-contrast-color);

            /* On its button's hover or keyboard focus it takes the button's color, gold where the
               button turns gold, as the pencil beside it does. */
            button:is(:hover:not(:disabled), :focus-visible) &
            {
                color: inherit;
            }

            .side-panel-pin-icon-pin
            {
                transform: none;
            }
        }
    }

    /* A disabled header button's tooltip still needs a target, which this holds. */
    .side-panel-header-button-holder
    {
        display: flex;
        flex-shrink: 0;
    }

    /* The pin is faded while it can't be used. */
    .side-panel-pin-button
    {
        &:disabled
        {
            opacity: 0.4;
            cursor: default;
        }
    }

    /* The collapse button: a small tab hanging off the panel's left edge at its top, its chevron
       pointing to the window's edge it collapses to, with the edge tab's look. It is part of the
       panel, so it moves with it as it collapses. */
    .side-panel-collapse-tab-place
    {
        position: absolute;
        top: 0.25rem;
        right: 100%;
        z-index: 2;
        display: flex;
    }

    .side-panel-collapse-tab
    {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1.5rem;
        height: 3rem;
        padding: 0;
        border: 1px solid var(--neutral-higher-emphasis-surface-color);
        border-right: none;
        border-radius: 0.375rem 0 0 0.375rem;
        background: var(--neutral-low-emphasis-surface-color);
        box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
        color: var(--neutral-surface-high-emphasis-contrast-color);
        font-size: 1rem;
        cursor: pointer;

        &:hover,
        &:focus-visible
        {
            color: var(--primary-higher-emphasis-color);
        }

        &:focus-visible
        {
            outline: 2px solid var(--primary-higher-emphasis-color);
            outline-offset: -2px;
        }

        &:active
        {
            filter: brightness(130%);
        }
    }

    /* Styling for the close button, and the header's other buttons. */
    .side-panel-header-button
    {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: var(--side-panel-header-button-width);
        padding: 0;
        border: none;
        border-radius: 0.25rem;
        font-size: 1.5rem;
        color: inherit;
        background: none;
        cursor: pointer;

        &:hover:not(:disabled)
        {
            background: var(--neutral-medium-emphasis-surface-color);
        }

        &:active:not(:disabled)
        {
            filter: brightness(130%);
        }
    }

    /* Styling for the body holding the shown page's content. */
    .side-panel-body
    {
        /* Scrolling past the content's end stops there rather than scrolling the webpage behind
           the panel. */
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-top: 0.5rem;
        padding-right: 1rem;
        padding-bottom: 0.5rem;
        padding-left: 1rem;
    }

    /* Styling for the loading and error messages shown in place of a page's content. */
    .side-panel-page-message
    {
        margin: 0;
        color: var(--neutral-surface-low-emphasis-contrast-color);
    }
}

/* An open-page entry name's tooltip while the name fits: hidden, since it would only repeat the
   name. Tooltips render outside the panel, in the webpage's tooltip container. */
/* styles-other-component: UseContentTruncation hands the tooltip this modifier CSS class to hide it, as the developer panel's names do. */
.tooltip.side-panel-untruncated-entry-name-tooltip
{
    visibility: hidden;
}

/* Styling for the panel when the user's system asks for less motion: pages appear and disappear at
   once. */
@media (prefers-reduced-motion: reduce)
{
    .side-panel .side-panel-pin-chip.side-panel-pin-chip-arriving,
    .side-panel .side-panel-pin-chip.side-panel-pin-chip-revealed
    {
        animation: none;
    }

    /* The title row's slide is set under the sliding chips' rule, so its override repeats it. */
    .side-panel .side-panel-pin-chips-place.side-panel-pin-chips-place-sliding,
    .side-panel:has(.side-panel-pin-chips-place-sliding) .side-panel-header,
    .side-panel:has(.side-panel-pin-chips-place-sliding) .side-panel-header-controls
    {
        transition: none;
    }

    .side-panel .side-panel-page-frame-entering,
    .side-panel .side-panel-page-frame-closing
    {
        animation: none;
    }

    .side-panel .side-panel-pin-icon .side-panel-pin-icon-pin
    {
        transition: none;
    }

    .side-panel .side-panel-pin-count-number
    {
        animation: none;
    }
}

/* Animations for the pin count's new number: in from below as it rises, from above as it falls. */
@keyframes side_panel_pin_count_rise
{
    from
    {
        opacity: 0;
        transform: translateY(0.35em);
    }
}

@keyframes side_panel_pin_count_fall
{
    from
    {
        opacity: 0;
        transform: translateY(-0.35em);
    }
}

/* An animation to slide an opened page in from the right while it fades in. */
@keyframes side_panel_page_enter
{
    from
    {
        opacity: 0%;
        transform: translateX(var(--side-panel-page-slide-distance));
    }
    to
    {
        opacity: 100%;
        transform: none;
    }
}

/* An animation to slide a closed page out to the right while it fades out. */
@keyframes side_panel_page_close
{
    from
    {
        opacity: 100%;
        transform: none;
    }
    to
    {
        opacity: 0%;
        transform: translateX(var(--side-panel-page-slide-distance));
    }
}

/* A collapsed panel slides off the window's edge and is out of sight, keeping its pages. */
.side-panel.side-panel-collapsed
{
    visibility: hidden;
    pointer-events: none;
    transform: translateX(100%);
    transition: transform var(--side-panel-page-motion-duration) ease-in, visibility 0s linear var(--side-panel-page-motion-duration);
}

/* The tab on the window's right edge that stands for the collapsed panel: its text runs down the
   edge, and it drags up and down. */
.side-panel-edge-tab
{
    /* How far the tab reaches from its middle to its ends, which the script measures; half its 14rem
       maximum height until then. */
    --side-panel-edge-tab-half-height: 7rem;

    position: fixed;
    /* The tab's middle sits at its place, kept where the whole tab is between the site's top bar
       and the window's bottom. */
    top: clamp(
        calc(var(--WEBPAGE-HEADER-HEIGHT) + var(--side-panel-edge-tab-half-height)),
        var(--side-panel-edge-tab-place),
        calc(100% - var(--side-panel-edge-tab-half-height)));
    right: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    max-height: 14rem;
    padding: 0.5rem 0.3rem;
    border: 1px solid var(--neutral-higher-emphasis-surface-color);
    border-right: none;
    border-radius: 0.5rem 0 0 0.5rem;
    background: var(--neutral-low-emphasis-surface-color);
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
    color: var(--neutral-surface-highest-emphasis-contrast-color);
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    touch-action: none;
    transform: translateY(-50%);

    &:hover,
    &:focus-visible
    {
        color: var(--EDENSOFT-GOLD);
    }

    &:active
    {
        filter: brightness(130%);
    }

    .side-panel-edge-tab-text
    {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        writing-mode: vertical-rl;
    }
}

@media (prefers-reduced-motion: reduce)
{
    .side-panel.side-panel-collapsed
    {
        transition: none;
    }
}

/* A page title's tooltip says only what is cut short, so it is hidden while the title fits. */
/* styles-other-component: UseContentTruncation hands the tooltip this modifier CSS class to hide it, as the pin chips' names do. */
.tooltip.side-panel-untruncated-title-tooltip
{
    visibility: hidden;
}

@keyframes side_panel_pin_chip_arrive
{
    from
    {
        opacity: 0;
    }
}

@keyframes side_panel_pin_chip_leave
{
    to
    {
        opacity: 0;
    }
}