@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300italic,600italic,300,600");
@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600&display=swap");

/* Gallery theme. Dark is the default; light follows the device's appearance setting.
   A page overrides the --theme-bg tokens in a <style> block after this stylesheet,
   for both appearances. */
:root {
    color-scheme: dark;
    --theme-bg: #0f0e0c;
    --theme-bg-rgb: 15, 14, 12;
    --theme-bg-overlay: none;
    /* View Options ▸ Grain: what is laid over the grain to soften it. */
    --grain-veil: transparent;

    /* Ink: text, rules, and the tints laid over the background for hovers and fills. */
    --ink-rgb: 255, 255, 255;
    --ink: rgb(var(--ink-rgb));
    --ink-soft: #ccc;
    --ink-muted: #999;
    --on-ink: #1b1f22;
    --search-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z' /%3e%3c/svg%3e");

    /* Materials: the sidebar, menus and the top bar's fallback. */
    --panel-rgb: 25, 25, 25;
    --chrome-material-bg: rgba(25, 25, 25, 0.56);
    --chrome-material-border: rgba(var(--ink-rgb), 0.1);
    --scrollbar-rgb: 255, 250, 240;

    --focus-ring: #a3adaf;
    --focus-glow: 0 0 5px rgba(163, 173, 175, 0.5);
    --pill-bg: #3f3a36;
    --pill-border: #5c5753;
    --pill-text: #e0e0e0;
    --pill-selected-bg: #5c5753;

    /* The hairline QuickLook strokes inside a thumbnail's edge, and Binder after
       it: white at 25%, the same in either appearance. */
    --thumb-hairline: rgba(255, 255, 255, 0.25);
    /* The thumbnail's shadow and the selection glow are drawn for a 253px
       icon. The View Options icon size scales them, the shadow as Binder's
       does with the icon and the glow as Finder's selection box does, by
       factors the script sets here. */
    --thumb-glow: 0 0 calc(18px * var(--thumb-shadow-blur-scale, 1)) rgba(71, 68, 66, 0.3);

    /* Gold selection accent. */
    --accent: #dbb7a7;
    --accent-glow: 0 0 calc(18px * var(--selection-glow-scale, 1)) rgba(255, 184, 130, 0.5);
    --accent-text-glow: 0 0 22px rgba(255, 184, 130, 0.6);
    --all-people-focus-pill: rgba(219, 183, 167, 0.34);
    --text-selection: rgba(255, 222, 150, 0.3);

    --modal-scrim: rgba(0, 0, 0, 0.9);
    --modal-surface: rgba(10, 10, 10, 0.65);
    --modal-shadow: 0 8px 16px 0 rgba(0,0,0,0.4),0 12px 40px 0 rgba(0,0,0,0.3);
    --modal-info-bg: rgba(0, 0, 0, 0.2);
    --modal-control: #aaa;
    --modal-nav-hover: rgba(0,0,0,0.8);
    --download-cancel-bg: #111;
}

@media (prefers-color-scheme: light) {

    :root {
        color-scheme: light;
        --theme-bg: #f6f4f1;
        --theme-bg-rgb: 246, 244, 241;
        /* The background's own colour at 30%, which softens the grain as The
           Witcher's white wash does without changing the background. */
        --grain-veil: rgba(var(--theme-bg-rgb), 0.3);

        --ink-rgb: 31, 27, 24;
        --ink-soft: #4a4541;
        --ink-muted: #857f79;
        --on-ink: #ffffff;
        --search-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23857f79' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z' /%3e%3c/svg%3e");

        --panel-rgb: 250, 249, 247;
        --chrome-material-bg: rgba(228, 224, 218, 0.56);
        --scrollbar-rgb: 31, 27, 24;

        --focus-ring: #8e989b;
        --focus-glow: 0 0 5px rgba(142, 152, 155, 0.45);
        --pill-bg: #e8e4df;
        --pill-border: #d0cac3;
        --pill-text: #3a3531;
        --pill-selected-bg: #d0cac3;

        --thumb-glow: 0 calc(4px * var(--thumb-shadow-offset-scale, 1)) calc(14px * var(--thumb-shadow-blur-scale, 1)) rgba(0, 0, 0, 0.28);

        /* A tight ember layer hugs the ring so it seems to burn; the soft glow
           beyond it is unchanged. */
        --accent: #9c6247;
        --accent-glow: 0 0 calc(3px * var(--selection-glow-scale, 1)) calc(1px * var(--selection-glow-scale, 1)) rgba(238, 138, 58, 0.6), 0 0 calc(14px * var(--selection-glow-scale, 1)) calc(1.5px * var(--selection-glow-scale, 1)) rgba(204, 129, 70, 0.65);
        --accent-text-glow: 0 0 22px rgba(204, 129, 70, 0.38);
        --all-people-focus-pill: rgba(156, 98, 71, 0.2);
        --text-selection: rgba(222, 168, 96, 0.35);

        --modal-scrim: rgba(246, 244, 241, 0.92);
        --modal-surface: rgba(255, 255, 255, 0.7);
        --modal-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.08), 0 12px 40px 0 rgba(0, 0, 0, 0.12);
        --modal-info-bg: rgba(0, 0, 0, 0.03);
        --modal-control: #8a847e;
        --modal-nav-hover: rgba(31, 27, 24, 0.08);
        --download-cancel-bg: #e6e2dd;
    }

}

html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

    blockquote:before, blockquote:after, q:before, q:after {
        content: '';
        content: none;
    }

table {
    border-collapse: collapse;
    border-spacing: 0;
}

body {
    -webkit-text-size-adjust: none;
}

mark {
    background-color: transparent;
    color: inherit;
}

input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

input, select, textarea {
    -moz-appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    appearance: none;
}

/* Basic */

    @-ms-viewport {
        width: device-width;
    }

    @media screen and (max-width: 480px) {

        html, body {
            min-width: 320px;
        }

    }

    html {
        box-sizing: border-box;
    }

    *, *:before, *:after {
        box-sizing: inherit;
    }

    body {
        background: var(--theme-bg);
    }

/* Type */

    html {
        font-size: 16pt;
    }



    body, input, select, textarea {
        color: var(--ink);
        font-family: "Source Sans Pro", sans-serif;
        font-weight: 300;
        font-size: 1rem;
        line-height: 1.65;
    }

    a {
        -moz-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
        -webkit-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
        -ms-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
        transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
        border-bottom: dotted 1px rgba(var(--ink-rgb), 0.5);
        text-decoration: none;
        color: inherit;
    }

        a:hover {
            border-bottom-color: transparent;
        }

    strong, b {
        color: var(--ink);
        font-weight: 600;
    }

    em, i {
        font-style: italic;
    }

    p {
        margin: 0 0 2rem 0;
    }

    h1, h2, h3, h4, h5, h6 {
        color: var(--ink);
        font-weight: 600;
        line-height: 1.5;
        margin: 0 0 1rem 0;
        text-transform: uppercase;
    letter-spacing: 0.12rem;
    }

        h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
            color: inherit;
            text-decoration: none;
        }

        h1.major, h2.major, h3.major, h4.major, h5.major, h6.major {
            border-bottom: solid 1px var(--ink);
            width: -moz-max-content;
            width: -webkit-max-content;
            width: -ms-max-content;
            width: max-content;
            padding-bottom: 0.5rem;
            margin: 0 0 2rem 0;
        }

    h1 {
        font-size: 2.25rem;
        line-height: 1.3;
        letter-spacing: 0.5rem;
    }

    h2 {
        font-size: 1.5rem;
        line-height: 1.4;
        letter-spacing: 0.5rem;
    }

    h3 {
        font-size: 1rem;
    }

    h4 {
        font-size: 0.8rem;
    }

    h5 {
        font-size: 0.7rem;
    }

    h6 {
        font-size: 0.6rem;
    }

    @media screen and (max-width: 736px) {

        h1 {
            font-size: 1.75rem;
            line-height: 1.4;
        }

        h2 {
            font-size: 1.25em;
            line-height: 1.5;
        }

    }

    sub {
        font-size: 0.8rem;
        position: relative;
        top: 0.5rem;
    }

    sup {
        font-size: 0.8rem;
        position: relative;
        top: -0.5rem;
    }

    blockquote {
        border-left: solid 4px var(--ink);
        font-style: italic;
        margin: 0 0 2rem 0;
        padding: 0.5rem 0 0.5rem 2rem;
    }

    code {
        background: rgba(var(--ink-rgb), 0.075);
        border-radius: 4px;
        font-family: "Courier New", monospace;
        font-size: 0.9rem;
        margin: 0 0.25rem;
        padding: 0.25rem 0.65rem;
    }

    pre {
        -webkit-overflow-scrolling: touch;
        font-family: "Courier New", monospace;
        font-size: 0.9rem;
        margin: 0 0 2rem 0;
    }

        pre code {
            display: block;
            line-height: 1.75;
            padding: 1rem 1.5rem;
            overflow-x: auto;
        }

    hr {
        border: 0;
        border-bottom: solid 1px var(--ink);
        margin: 2.75rem 0;
    }

    .align-left {
        text-align: left;
    }

    .align-center {
        text-align: center;
    }

    .align-right {
        text-align: right;
    }

/* Form */

    form {
        margin: 0 0 2rem 0;
    }

        form > :last-child {
            margin-bottom: 0;
        }

        form > .fields {
            display: -moz-flex;
            display: -webkit-flex;
            display: -ms-flex;
            display: flex;
            -moz-flex-wrap: wrap;
            -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            width: calc(100% + 3rem);
            margin: -1.5rem 0 2rem -1.5rem;
        }

            form > .fields > .field {
                -moz-flex-grow: 0;
                -webkit-flex-grow: 0;
                -ms-flex-grow: 0;
                flex-grow: 0;
                -moz-flex-shrink: 0;
                -webkit-flex-shrink: 0;
                -ms-flex-shrink: 0;
                flex-shrink: 0;
                padding: 1.5rem 0 0 1.5rem;
                width: calc(100% - 1.5rem);
            }

                form > .fields > .field.half {
                    width: calc(50% - 0.75rem);
                }

                form > .fields > .field.third {
                    width: calc(100%/3 - 0.5rem);
                }

                form > .fields > .field.quarter {
                    width: calc(25% - 0.375rem);
                }

        @media screen and (max-width: 480px) {

            form > .fields {
                width: calc(100% + 3rem);
                margin: -1.5rem 0 2rem -1.5rem;
            }

                form > .fields > .field {
                    padding: 1.5rem 0 0 1.5rem;
                    width: calc(100% - 1.5rem);
                }

                    form > .fields > .field.half {
                        width: calc(100% - 1.5rem);
                    }

                    form > .fields > .field.third {
                        width: calc(100% - 1.5rem);
                    }

                    form > .fields > .field.quarter {
                        width: calc(100% - 1.5rem);
                    }

        }

    label {
        color: var(--ink);
        display: block;
        font-size: 0.8rem;
        font-weight: 300;
        letter-spacing: 0.2rem;
        line-height: 1.5;
        margin: 0 0 1rem 0;
        text-transform: uppercase;
    }

    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="tel"],
    select,
    textarea {
        -moz-appearance: none;
        -webkit-appearance: none;
        -ms-appearance: none;
        appearance: none;
        -moz-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
        -webkit-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
        -ms-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
        transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
        background-color: transparent;
        border-radius: 4px;
        border: solid 1px transparent;
        color: inherit;
        display: block;
        outline: 0;
        padding: 0 1rem;
        text-decoration: none;
        width: 100%;
    }

        input[type="text"]:invalid,
        input[type="password"]:invalid,
        input[type="email"]:invalid,
        input[type="tel"]:invalid,
        select:invalid,
        textarea:invalid {
            box-shadow: none;
        }

        input[type="text"]:focus,
        input[type="password"]:focus,
        input[type="email"]:focus,
        input[type="tel"]:focus,
        select:focus,
        textarea:focus {
            background: rgba(var(--ink-rgb), 0.075);
            border-color: var(--focus-ring);
            box-shadow: 0 0 0 0.5px var(--focus-ring);
        }

    select {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='%23ffffff' /%3E%3C/svg%3E");
        background-size: 1.25rem;
        background-repeat: no-repeat;
        background-position: calc(100% - 1rem) center;
        height: 2.75rem;
        padding-right: 2.75rem;
        text-overflow: ellipsis;
    }

        select option {
            color: var(--ink);
            background: var(--on-ink);
        }

        select:focus::-ms-value {
            background-color: transparent;
        }

        select::-ms-expand {
            display: none;
        }

    input[type="text"],
    input[type="password"],
    input[type="email"],
    select {
        height: 2.75rem;
    }

    textarea {
        padding: 0.75rem 1rem;
    }

    input[type="checkbox"],
    input[type="radio"] {
        -moz-appearance: none;
        -webkit-appearance: none;
        -ms-appearance: none;
        appearance: none;
        display: block;
        float: left;
        margin-right: -2rem;
        opacity: 0;
        width: 1rem;
        z-index: -1;
    }

        input[type="checkbox"] + label,
        input[type="radio"] + label {
            text-decoration: none;
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            user-select: none;
            color: var(--ink);
            cursor: pointer;
            display: inline-block;
            font-size: 0.8rem;
            font-weight: 300;
            margin: 0 0 0.5rem 0;
            padding-left: 2.65rem;
            padding-right: 0.75rem;
            position: relative;
        }

            input[type="checkbox"] + label:before,
            input[type="radio"] + label:before {
                -moz-osx-font-smoothing: grayscale;
                -webkit-font-smoothing: antialiased;
                display: inline-block;
                font-style: normal;
                font-variant: normal;
                text-rendering: auto;
                line-height: 1;
                text-transform: none !important;
                font-family: 'Font Awesome 5 Free';
                font-weight: 900;
            }

            input[type="checkbox"] + label:before,
            input[type="radio"] + label:before {
                -moz-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
                -webkit-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
                -ms-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
                transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
                border-radius: 4px;
                border: solid 1px var(--ink);
                content: '';
                display: inline-block;
                height: 1.65rem;
                left: 0;
                line-height: 1.65rem;
                position: absolute;
                text-align: center;
                top: -0.15rem;
                width: 1.65rem;
            }

        input[type="checkbox"]:checked + label:before,
        input[type="radio"]:checked + label:before {
            background: var(--ink) !important;
            border-color: var(--ink) !important;
            color: var(--on-ink);
            content: '\f00c';
        }

        input[type="checkbox"]:focus + label:before,
        input[type="radio"]:focus + label:before {
            background: rgba(var(--ink-rgb), 0.075);
            border-color: var(--ink);
            box-shadow: 0 0 0 1px var(--ink);
        }

    input[type="checkbox"] + label:before {
        border-radius: 4px;
    }

    input[type="radio"] + label:before {
        border-radius: 100%;
    }

    ::-webkit-input-placeholder {
        color: rgba(var(--ink-rgb), 0.5) !important;
        opacity: 0.7;
    }

    :-moz-placeholder {
        color: rgba(var(--ink-rgb), 0.5) !important;
        opacity: 0.7;
    }

    ::-moz-placeholder {
        color: rgba(var(--ink-rgb), 0.5) !important;
        opacity: 0.7;
    }

    :-ms-input-placeholder {
        color: rgba(var(--ink-rgb), 0.5) !important;
        opacity: 0.7;
    }

    .formerize-placeholder {
        color: rgba(var(--ink-rgb), 0.5) !important;
        opacity: 0.7;
    }

/* Box */

    .box {
        border-radius: 4px;
        border: solid 1px var(--ink);
        margin-bottom: 2rem;
        padding: 1.5em;
    }

        .box > :last-child,
        .box > :last-child > :last-child,
        .box > :last-child > :last-child > :last-child {
            margin-bottom: 0;
        }

        .box.alt {
            border: 0;
            border-radius: 0;
            padding: 0;
        }

/* Icon */

    .icon {
        text-decoration: none;
        border-bottom: none;
        position: relative;
    }

        .icon:before {
            -moz-osx-font-smoothing: grayscale;
            -webkit-font-smoothing: antialiased;
            display: inline-block;
            font-style: normal;
            font-variant: normal;
            text-rendering: auto;
            line-height: 1;
            text-transform: none !important;
            font-family: 'Font Awesome 5 Free';
            font-weight: 400;
        }

        .icon > .label {
            display: none;
        }

        .icon:before {
            line-height: inherit;
        }

        .icon.solid:before {
            font-weight: 900;
        }

        .icon.brands:before {
            font-family: 'Font Awesome 5 Brands';
        }

/* Image */

    .image {
        border-radius: 4px;
        border: 0;
        display: inline-block;
        position: relative;
    }

        .image:before {
            pointer-events: none;
            background-color: rgba(19, 21, 25, 0.5);
            border-radius: 4px;
            content: '';
            display: block;
            height: 100%;
            left: 0;
            opacity: 0.5;
            position: absolute;
            top: 0;
            width: 100%;
        }

        .image img {
            border-radius: 4px;
            display: block;
        }

        .image.left, .image.right {
            max-width: 40%;
        }

            .image.left img, .image.right img {
                width: 100%;
            }

        .image.left {
            float: left;
            padding: 0 1.5em 1em 0;
            top: 0.25em;
        }

        .image.right {
            float: right;
            padding: 0 0 1em 1.5em;
            top: 0.25em;
        }

        .image.fit {
            display: block;
            margin: 0 0 2rem 0;
            width: 100%;
        }

            .image.fit img {
                width: 100%;
            }

        .image.main {
            display: block;
            margin: 2.5rem 0;
            width: 100%;
        }

            .image.main img {
                width: 100%;
            }

        @media screen and (max-width: 736px) {

            .image.main {
                margin: 2rem 0;
            }

        }

        @media screen and (max-width: 480px) {

            .image.main {
                margin: 1.5rem 0;
            }

        }

/* List */

    ol {
        list-style: decimal;
        margin: 0 0 2rem 0;
        padding-left: 1.25em;
    }

        ol li {
            padding-left: 0.25em;
        }

    ul {
        list-style: disc;
        margin: 0 0 2rem 0;
        padding-left: 1em;
    }

        ul li {
            padding-left: 0.5em;
        }

        ul.alt {
            list-style: none;
            padding-left: 0;
        }

            ul.alt li {
                border-top: solid 1px var(--ink);
                padding: 0.5em 0;
            }

                ul.alt li:first-child {
                    border-top: 0;
                    padding-top: 0;
                }

    dl {
        margin: 0 0 2rem 0;
    }

        dl dt {
            display: block;
            font-weight: 600;
            margin: 0 0 1rem 0;
        }

        dl dd {
            margin-left: 2rem;
        }

/* Actions */

    ul.actions {
        display: -moz-flex;
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        cursor: default;
        list-style: none;
        margin-left: -1rem;
        padding-left: 0;
    }

        ul.actions li {
            padding: 0 0 0 1rem;
            vertical-align: middle;
        }

        ul.actions.special {
            -moz-justify-content: center;
            -webkit-justify-content: center;
            -ms-justify-content: center;
            justify-content: center;
            width: 100%;
            margin-left: 0;
        }

            ul.actions.special li:first-child {
                padding-left: 0;
            }

        ul.actions.stacked {
            -moz-flex-direction: column;
            -webkit-flex-direction: column;
            -ms-flex-direction: column;
            flex-direction: column;
            margin-left: 0;
        }

            ul.actions.stacked li {
                padding: 1.3rem 0 0 0;
            }

                ul.actions.stacked li:first-child {
                    padding-top: 0;
                }

        ul.actions.fit {
            width: calc(100% + 1rem);
        }

            ul.actions.fit li {
                -moz-flex-grow: 1;
                -webkit-flex-grow: 1;
                -ms-flex-grow: 1;
                flex-grow: 1;
                -moz-flex-shrink: 1;
                -webkit-flex-shrink: 1;
                -ms-flex-shrink: 1;
                flex-shrink: 1;
                width: 100%;
            }

                ul.actions.fit li > * {
                    width: 100%;
                }

            ul.actions.fit.stacked {
                width: 100%;
            }

        @media screen and (max-width: 480px) {

            ul.actions:not(.fixed) {
                -moz-flex-direction: column;
                -webkit-flex-direction: column;
                -ms-flex-direction: column;
                flex-direction: column;
                margin-left: 0;
                width: 100% !important;
            }

                ul.actions:not(.fixed) li {
                    -moz-flex-grow: 1;
                    -webkit-flex-grow: 1;
                    -ms-flex-grow: 1;
                    flex-grow: 1;
                    -moz-flex-shrink: 1;
                    -webkit-flex-shrink: 1;
                    -ms-flex-shrink: 1;
                    flex-shrink: 1;
                    padding: 1rem 0 0 0;
                    text-align: center;
                    width: 100%;
                }

                    ul.actions:not(.fixed) li > * {
                        width: 100%;
                    }

                    ul.actions:not(.fixed) li:first-child {
                        padding-top: 0;
                    }

                    ul.actions:not(.fixed) li input[type="submit"],
                    ul.actions:not(.fixed) li input[type="reset"],
                    ul.actions:not(.fixed) li input[type="button"],
                    ul.actions:not(.fixed) li button,
                    ul.actions:not(.fixed) li .button {
                        width: 100%;
                    }

                        ul.actions:not(.fixed) li input[type="submit"].icon:before,
                        ul.actions:not(.fixed) li input[type="reset"].icon:before,
                        ul.actions:not(.fixed) li input[type="button"].icon:before,
                        ul.actions:not(.fixed) li button.icon:before,
                        ul.actions:not(.fixed) li .button.icon:before {
                            margin-left: -0.5em;
                        }

        }

/* Icons */

    ul.icons {
        cursor: default;
        list-style: none;
        padding-left: 0;
    }

        ul.icons li {
            display: inline-block;
            padding: 0 0.75em 0 0;
        }

            ul.icons li:last-child {
                padding-right: 0;
            }

            ul.icons li a {
                border-radius: 100%;
                box-shadow: inset 0 0 0 1px var(--ink);
                display: inline-block;
                height: 2.25rem;
                line-height: 2.25rem;
                text-align: center;
                width: 2.25rem;
            }

                ul.icons li a:hover {
                    background-color: rgba(var(--ink-rgb), 0.075);
                }

                ul.icons li a:active {
                    background-color: rgba(var(--ink-rgb), 0.175);
                }

/* Table */

    .table-wrapper {
        -webkit-overflow-scrolling: touch;
        overflow-x: auto;
    }

    table {
        margin: 0 0 2rem 0;
        width: 100%;
    }

        table tbody tr {
            border: solid 1px var(--ink);
            border-left: 0;
            border-right: 0;
        }

            table tbody tr:nth-child(2n + 1) {
                background-color: rgba(var(--ink-rgb), 0.075);
            }

        table td {
            padding: 0.75em 0.75em;
        }

        table th {
            color: var(--ink);
            font-size: 0.9em;
            font-weight: 600;
            padding: 0 0.75em 0.75em 0.75em;
            text-align: left;
        }

        table thead {
            border-bottom: solid 2px var(--ink);
        }

        table tfoot {
            border-top: solid 2px var(--ink);
        }

        table.alt {
            border-collapse: separate;
        }

            table.alt tbody tr td {
                border: solid 1px var(--ink);
                border-left-width: 0;
                border-top-width: 0;
            }

                table.alt tbody tr td:first-child {
                    border-left-width: 1px;
                }

            table.alt tbody tr:first-child td {
                border-top-width: 1px;
            }

            table.alt thead {
                border-bottom: 0;
            }

            table.alt tfoot {
                border-top: 0;
            }

/* Button */

    input[type="submit"],
    input[type="reset"],
    input[type="button"],
    button,
    .button {
        -moz-appearance: none;
        -webkit-appearance: none;
        -ms-appearance: none;
        appearance: none;
        -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
        -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
        -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
        transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
        background-color: transparent;
        border-radius: 4px;
        border: 0;
        box-shadow: inset 0 0 0 1px var(--ink);
        color: var(--ink) !important;
        cursor: pointer;
        display: inline-block;
        font-size: 0.8rem;
        font-weight: 300;
        height: 2.75rem;
        letter-spacing: 0.2rem;
        line-height: 2.75rem;
        outline: 0;
        padding: 0 1.25rem 0 1.35rem;
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;
        white-space: nowrap;
    }

        input[type="submit"]:hover,
        input[type="reset"]:hover,
        input[type="button"]:hover,
        button:hover,
        .button:hover {
            background-color: rgba(var(--ink-rgb), 0.075);
        }

        input[type="submit"]:active,
        input[type="reset"]:active,
        input[type="button"]:active,
        button:active,
        .button:active {
            background-color: rgba(var(--ink-rgb), 0.175);
        }

        input[type="submit"].icon:before,
        input[type="reset"].icon:before,
        input[type="button"].icon:before,
        button.icon:before,
        .button.icon:before {
            margin-right: 0.5em;
        }

        input[type="submit"].fit,
        input[type="reset"].fit,
        input[type="button"].fit,
        button.fit,
        .button.fit {
            width: 100%;
        }

        input[type="submit"].small,
        input[type="reset"].small,
        input[type="button"].small,
        button.small,
        .button.small {
            font-size: 0.6rem;
            height: 2.0625rem;
            line-height: 2.0625rem;
        }

        input[type="submit"].primary,
        input[type="reset"].primary,
        input[type="button"].primary,
        button.primary,
        .button.primary {
            background-color: var(--ink);
            color: var(--on-ink) !important;
            font-weight: 600;
        }

        input[type="submit"].disabled, input[type="submit"]:disabled,
        input[type="reset"].disabled,
        input[type="reset"]:disabled,
        input[type="button"].disabled,
        input[type="button"]:disabled,
        button.disabled,
        button:disabled,
        .button.disabled,
        .button:disabled {
            pointer-events: none;
            cursor: default;
            opacity: 0.25;
        }

    input[type="submit"],
    input[type="reset"],
    input[type="button"],
    button {
        line-height: calc(2.75rem - 2px);
    }

/* BG */

    #bg {
        -moz-transform: scale(1.0);
        -webkit-transform: scale(1.0);
        -ms-transform: scale(1.0);
        transform: scale(1.0);
        -webkit-backface-visibility: hidden;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        z-index: 1;
    }

        #bg:before, #bg:after {
            content: '';
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        #bg:before {
            -moz-transition: background-color 2.5s ease-in-out;
            -webkit-transition: background-color 2.5s ease-in-out;
            -ms-transition: background-color 2.5s ease-in-out;
            transition: background-color 2.5s ease-in-out;
            -moz-transition-delay: 0.75s;
            -webkit-transition-delay: 0.75s;
            -ms-transition-delay: 0.75s;
            transition-delay: 0.75s;
            background-image: var(--theme-bg-overlay);
            z-index: 2;
        }

        /* View Options ▸ Grain: a film grain under the page's own wash. The
           script draws its tile, 128px square, into --grain-image. */
        #bg.has-grain:before {
            background-image: var(--theme-bg-overlay), linear-gradient(var(--grain-veil), var(--grain-veil)), var(--grain-image, none);
            background-size: auto, auto, 128px 128px;
            background-position: 0 0;
            background-repeat: no-repeat, no-repeat, repeat;
        }

        /* View Options ▸ Background ▸ Color: the colour over the page's own
           background, cut at the sidebar's edge, its width held between its
           least and most as the sidebar's is, and moving with it. The grain
           lies on it, its tiles in line with those under the sidebar. */
        #bg-color {
            --sidebar-edge: calc(var(--sidebar-gutter) + clamp(var(--sidebar-min-width), var(--sidebar-width), min(var(--sidebar-max-width), 100vw - 320px)));
            position: absolute;
            inset: 0;
            z-index: 3;
            background-size: 128px 128px;
            -webkit-clip-path: inset(0 0 0 var(--sidebar-edge));
            clip-path: inset(0 0 0 var(--sidebar-edge));
            -moz-transition: clip-path 260ms cubic-bezier(0.22, 1, 0.36, 1);
            -webkit-transition: -webkit-clip-path 260ms cubic-bezier(0.22, 1, 0.36, 1), clip-path 260ms cubic-bezier(0.22, 1, 0.36, 1);
            -ms-transition: clip-path 260ms cubic-bezier(0.22, 1, 0.36, 1);
            transition: clip-path 260ms cubic-bezier(0.22, 1, 0.36, 1);
        }

        #bg.has-grain #bg-color {
            background-image: var(--grain-image, none);
        }

        body.is-sidebar-collapsed #bg-color {
            -webkit-clip-path: inset(0);
            clip-path: inset(0);
        }

        body.is-resizing-sidebar #bg-color {
            -moz-transition: none;
            -webkit-transition: none;
            -ms-transition: none;
            transition: none;
        }

        #bg:after {
            -moz-transform: scale(1.125);
            -webkit-transform: scale(1.125);
            -ms-transform: scale(1.125);
            transform: scale(1.125);
            -moz-transition: -moz-transform 0.325s ease-in-out, -moz-filter 0.325s ease-in-out;
            -webkit-transition: -webkit-transform 0.325s ease-in-out, -webkit-filter 0.325s ease-in-out;
            -ms-transition: -ms-transform 0.325s ease-in-out, -ms-filter 0.325s ease-in-out;
            transition: transform 0.325s ease-in-out, filter 0.325s ease-in-out;
            background-color: var(--theme-bg);
            z-index: 1;
        }

        body.is-article-visible #bg:after {
            -moz-transform: scale(1.0825);
            -webkit-transform: scale(1.0825);
            -ms-transform: scale(1.0825);
            transform: scale(1.0825);
            -moz-filter: blur(0.2rem);
            -webkit-filter: blur(0.2rem);
            -ms-filter: blur(0.2rem);
            filter: blur(0.2rem);
        }

/* Wrapper */
#wrapper {
    display: -moz-flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -moz-flex-direction: column;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -moz-align-items: center;
    -webkit-align-items: center;
    -ms-align-items: center;
    align-items: center;
    -moz-justify-content: space-between;
    -webkit-justify-content: space-between;
    -ms-justify-content: space-between;
    justify-content: space-between;
    position: relative;
    min-height: 100vh;
    width: 100%;
    padding: 0;
    z-index: 3;
    overflow: visible;
    padding-top: 80px;
}

    #wrapper:before {
        content: '';
        display: block;
    }

    @media screen and (max-width: 736px) {

        #wrapper {
            padding: 3rem 2rem 1rem 2rem ;
        }

    }

    @media screen and (max-width: 480px) {

        #wrapper {
            padding: 2rem 1rem 0.5rem 1rem ;
        }

    }

#header {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    transition: transform 0.325s ease-in-out, filter 0.325s ease-in-out, opacity 0.325s ease-in-out;
    height: 2.5rem;

    /* === NEW: Background for visibility when scrolling === */
    background-color: rgba(var(--panel-rgb), 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
    cursor: default;

    /* Add these lines to disable selection on the header itself */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    /* These lines center the content inside the header */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.3rem;
}

    /* Medallion */
    #header .logo {
        padding: 0;
        margin: 0;
        /* Prevent text selection on the logo area */
        -webkit-user-select: none; /* Safari */
        -ms-user-select: none; /* IE 10+ and Edge */
        user-select: none; /* Standard syntax */
    }

    #header .logo img {
        display: block;
        width: 40px;
        height: auto;
        object-fit: cover;
    }

    /* General visibility and transition styles for the header */
    body.is-article-visible #header {
        -moz-transform: scale(0.95);
        -webkit-transform: scale(0.95);
        -ms-transform: scale(0.95);
        transform: scale(0.95);
        -moz-filter: blur(0.1rem);
        -webkit-filter: blur(0.1rem);
        -ms-filter: blur(0.1rem);
        filter: blur(0.1rem);
        opacity: 0;
    }

/*
    MODIFIED: The search container is now also positioned absolutely.
*/
#search-container {
    padding: 0;
    margin: 0;
}


/*
==================================================================
// Search Input and Pills (REVISED)
==================================================================
*/
/* INSTRUCTIONS:
  Delete the original style block for "#search-input" from your CSS file
  and replace it with all of the CSS rules below.
*/

/* Hides the scrollbar inside the search wrapper for a clean look */
.search-wrapper::-webkit-scrollbar {
    display: none;
}
.search-wrapper {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* The main wrapper that looks like an input field */
.search-wrapper {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    border-radius: 20px;
    background-color: rgba(var(--ink-rgb), 0.05);
    padding: 0 12px 0 30px; /* Removed vertical padding */
    width: 26.5em;
    height: 36px; /* Locks height to 36px */
    cursor: text;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    font-size: 0.65rem;
    overflow-x: auto;
}

.search-wrapper:hover {
    background-color: rgba(var(--ink-rgb), 0.075);
}

.search-wrapper.is-focused {
    background: rgba(var(--ink-rgb), 0.075);
    border: solid 1px var(--focus-ring);
    box-shadow: 0 0 0 0.5px var(--focus-ring);
    padding: 0 11px 0 29px; /* Offset for 1px border to prevent layout shifting */
}

/* The actual text input, styled to be invisible within the wrapper */
#search-input {
    flex-grow: 1;
    border: none !important;
    background: transparent !important;
    padding: 0 0 0 1px !important; /* Removed vertical padding */
    margin: 0 !important;
    outline: none !important;
    color: var(--ink) !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    height: 100% !important; /* Fills container height */
    width: auto !important;
    min-width: 120px;
    line-height: 1.4 !important;
    font-size: 0.65rem;
    text-align: left;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* The pill for selected search terms, with its default visible style */
.search-pill {
    display: inline-flex;
    align-items: center;
    background-color: var(--pill-bg);
    border: 1px solid var(--pill-border);
    border-radius: 10px;
    padding: 0px 8px;
    margin: 2px 6px 2px 0;
    font-size: 0.6rem;
    color: var(--pill-text);
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
    flex-shrink: 0; /* Prevents pills from shrinking */
}

/* A pill's appearance when it is actively selected */
.search-pill.selected {
    background-color: var(--pill-selected-bg);
    border-color: var(--focus-ring);
    color: var(--ink);
    box-shadow: var(--focus-glow); /* Adds the selection glow */
}

.search-pill-text {
    pointer-events: none;
}

/* The 'x' button to remove a pill */
.remove-pill {
    margin-left: 6px;
    font-weight: bold;
    font-size: 0.8rem;
    line-height: 1;
    padding: 0 2px;
}

.remove-pill:hover {
    color: var(--ink);
}

/* Main */

    #main {
        -moz-flex-grow: 1;
        -webkit-flex-grow: 1;
        -ms-flex-grow: 1;
        flex-grow: 1;
        -moz-flex-shrink: 1;
        -webkit-flex-shrink: 1;
        -ms-flex-shrink: 1;
        flex-shrink: 1;
        display: -moz-flex;
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        -moz-align-items: center;
        -webkit-align-items: center;
        -ms-align-items: center;
        align-items: center;
        -moz-justify-content: center;
        -webkit-justify-content: center;
        -ms-justify-content: center;
        justify-content: center;
        -moz-flex-direction: column;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        position: relative;
        max-width: 100%;
        z-index: 3;
        padding: 0 1rem;
    }

        #main article {
            -moz-transform: translateY(0.25rem);
            -webkit-transform: translateY(0.25rem);
            -ms-transform: translateY(0.25rem);
            transform: translateY(0.25rem);
            -moz-transition: opacity 0.325s ease-in-out, -moz-transform 0.325s ease-in-out;
            -webkit-transition: opacity 0.325s ease-in-out, -webkit-transform 0.325s ease-in-out;
            -ms-transition: opacity 0.325s ease-in-out, -ms-transform 0.325s ease-in-out;
            transition: opacity 0.325s ease-in-out, transform 0.325s ease-in-out;
            padding: 4.5rem 2.5rem 1.5rem 2.5rem ;
            position: relative;
            width: 40rem;
            max-width: 100%;
            background-color: rgba(27, 31, 34, 0.85);
            border-radius: 4px;
            opacity: 0;
        }

            #main article.active {
                -moz-transform: translateY(0);
                -webkit-transform: translateY(0);
                -ms-transform: translateY(0);
                transform: translateY(0);
                opacity: 1;
            }

            #main article .close {
                display: block;
                position: absolute;
                top: 0;
                right: 0;
                width: 4rem;
                height: 4rem;
                cursor: pointer;
                text-indent: 4rem;
                overflow: hidden;
                white-space: nowrap;
            }

                #main article .close:before {
                    -moz-transition: background-color 0.2s ease-in-out;
                    -webkit-transition: background-color 0.2s ease-in-out;
                    -ms-transition: background-color 0.2s ease-in-out;
                    transition: background-color 0.2s ease-in-out;
                    content: '';
                    display: block;
                    position: absolute;
                    top: 0.75rem;
                    left: 0.75rem;
                    width: 2.5rem;
                    height: 2.5rem;
                    border-radius: 100%;
                    background-position: center;
                    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='20px' height='20px' viewBox='0 0 20 20' zoomAndPan='disable'%3E%3Cstyle%3Eline %7B stroke: %23ffffff%3B stroke-width: 1%3B %7D%3C/style%3E%3Cline x1='2' y1='2' x2='18' y2='18' /%3E%3Cline x1='18' y1='2' x2='2' y2='18' /%3E%3C/svg%3E");
                    background-size: 20px 20px;
                    background-repeat: no-repeat;
                }

                #main article .close:hover:before {
                    background-color: rgba(var(--ink-rgb), 0.075);
                }

                #main article .close:active:before {
                    background-color: rgba(var(--ink-rgb), 0.175);
                }

        @media screen and (max-width: 736px) {

            #main article {
                padding: 3.5rem 2rem 0.5rem 2rem ;
            }

                #main article .close:before {
                    top: 0.875rem;
                    left: 0.875rem;
                    width: 2.25rem;
                    height: 2.25rem;
                    background-size: 14px 14px;
                }

        }

        @media screen and (max-width: 480px) {

            #main article {
                padding: 3rem 1.5rem 0.5rem 1.5rem ;
            }

        }

/* Footer */

    #footer {
        -moz-transition: -moz-transform 0.325s ease-in-out, -moz-filter 0.325s ease-in-out, opacity 0.325s ease-in-out;
        -webkit-transition: -webkit-transform 0.325s ease-in-out, -webkit-filter 0.325s ease-in-out, opacity 0.325s ease-in-out;
        -ms-transition: -ms-transform 0.325s ease-in-out, -ms-filter 0.325s ease-in-out, opacity 0.325s ease-in-out;
        transition: transform 0.325s ease-in-out, filter 0.325s ease-in-out, opacity 0.325s ease-in-out;
        width: 100%;
        max-width: 100%;
        text-align: center;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
        cursor: default;
        margin-top: auto; /* Push the footer to the bottom */
        opacity: 0; /* Hide the footer initially */
        pointer-events: none; /* Prevent interactions while invisible */
    }

        #footer .copyright {
            letter-spacing: 0.2rem;
            font-size: 0.6rem;
            opacity: 0.75;
            margin-bottom: 0.5rem;
            margin-top: 3rem;
            text-transform: uppercase;
        }

        body.is-article-visible #footer {
            -moz-transform: scale(0.95);
            -webkit-transform: scale(0.95);
            -ms-transform: scale(0.95);
            transform: scale(0.95);
            -moz-filter: blur(0.1rem);
            -webkit-filter: blur(0.1rem);
            -ms-filter: blur(0.1rem);
            filter: blur(0.1rem);
            opacity: 0;
        }

/*
============================================
Styling for the Finder-Style Photo Gallery
============================================
*/

/* 1. The Main Gallery Container */
/* The gallery is laid out as Binder's icon view, after Finder's: each figure is
   a cell, and every measure of it follows from the icon size, the grid spacing
   and the caption's text by Finder's own formulas (Binder's
   IconViewGeometry.swift). The caption's font is the gallery's, so 1ch is the
   width of its "0" and 1lh its line. The cell width and the name's lines are
   registered so the gallery's scripts can read them as numbers. */
@property --cell-width {
    syntax: '<length>';
    inherits: true;
    initial-value: 0px;
}

@property --name-lines {
    syntax: '<number>';
    inherits: true;
    initial-value: 2;
}

@property --column-gap {
    syntax: '<length>';
    inherits: true;
    initial-value: 2px;
}

#photo-gallery {
    /* View Options ▸ Icon size, 16 to 512; the gallery starts at 256, whose
       thumbnail box is 228px, as QuickLook insets it. */
    --icon-size: 256px;
    /* View Options ▸ Grid spacing runs 1 to 100; 54 is Finder's default. */
    --grid-spacing: 54;
    /* View Options ▸ Text size, 10 to 16 points; Finder's default is 12. A
       point is a twelfth of the caption's 0.65rem at 12. The dimensions line
       is two points smaller, never under 9. */
    --text-size: 12;
    --info-font-size: calc(max(var(--text-size) - 2, 9) * 0.65rem / 12);
    /* View Options ▸ Show item info: the dimensions line and its room in the
       cell, 1 or 0. */
    --info-lines: 1;
    /* +[TIconSelectionView selectionPaddingForIconSize:]: the selection box is
       the icon grown by s/16 a side, unrounded. */
    --icon-padding: calc(var(--icon-size) / 16);
    --icon-box: calc(var(--icon-size) + 2 * var(--icon-padding));
    /* The icon sits the padding, truncated, below the cell's top, centred
       across and floored. */
    --icon-inset: round(to-zero, var(--icon-padding), 1px);
    --icon-top: var(--icon-inset);
    --icon-left: round(down, (var(--cell-width) - var(--icon-size)) / 2, 1px);
    /* QuickLook insets a thumbnail by its table, linear between 1 at 16, 2 at
       32, 7 at 128, 14 at 256 and 29 at 512, rounded half up. */
    --thumb-inset: round(1px + clamp(0px, var(--icon-size) - 16px, 16px) / 16
        + clamp(0px, var(--icon-size) - 32px, 96px) * 5 / 96
        + clamp(0px, var(--icon-size) - 128px, 128px) * 7 / 128
        + clamp(0px, var(--icon-size) - 256px, 256px) * 15 / 256, 1px);
    --thumb-box: calc(var(--icon-size) - 2 * var(--thumb-inset));
    /* View Options ▸ Corner radius: a share of the thumbnail box, 0 to 0.5.
       The panel sets it; the gallery starts at 6%. Binder draws Apple's
       continuous corners, which Safari can't; circular ones of the same
       radius stay within 0.2px of them at 6%. */
    --corner-radius: 0.06;
    --thumb-radius: calc(var(--thumb-box) * var(--corner-radius));
    /* Photos' selection ring: a 3pt stroke 1pt clear of the picture, the same
       at every icon size. */
    --selection-ring-gap: 1px;
    --selection-ring-width: 3px;
    /* The name starts 2px below the selection box, floored. */
    --name-top: round(down, var(--icon-top) + var(--icon-size) + var(--icon-padding) + 2px, 1px);
    /* The name wraps at 4 to 20 widths of "0" across the grid spacing range,
       never narrower than the selection box, rounded up, plus 1px. */
    --wrap-width: calc(round(up, max(var(--icon-box), round(up, 1ch, 1px) * (4 + 16 * var(--grid-spacing) / 100)), 1px) + 1px);
    /* Lines the cell keeps for the name: 1 at spacing 1, growing to 2 at 26.
       The name may draw as many as are whole. */
    --name-lines: clamp(1, 1 + (var(--grid-spacing) - 1) / 25, 2);
    /* The cell: the wrap width and the name's 4px padding a side wide; the
       box, the name's lines, the dimensions line and margins tall. Each is
       rounded up to even. */
    --cell-width: round(up, var(--wrap-width) + 8px, 2px);
    --cell-height: round(up, var(--icon-box) + 2px + round(up, var(--name-lines) * 1lh, 1px) + var(--info-lines) * round(up, var(--info-font-size) * 1.4, 1px) + 6px, 2px);
    /* 2px between cells at least, s/16 rounded up between rows. */
    --column-gap: 2px;
    --row-gap: round(up, var(--icon-padding), 1px);

    display: grid;
    /* As many cells as fit with 2px between them. Packed left like this while
       they fill one row or less; past that the gallery's script spreads the
       spare width into equal gaps, as Finder does. */
    grid-template-columns: repeat(auto-fill, var(--cell-width));
    column-gap: var(--column-gap);
    row-gap: var(--row-gap);
    /* Rows a cell tall, as every figure is. Sized to their figures, each new
       width laid every figure out again only to measure it. */
    grid-auto-rows: var(--cell-height);
    justify-items: end;
    width: 100%;
    position: relative; /* Needed for the marquee positioning */
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10+ and Edge */
    user-select: none; /* Standard syntax */
    /* Finder's section insets. */
    padding: 20px 4px 2px;
    font-family: "Source Sans Pro", sans-serif;
    font-weight: 300;
    font-size: calc(var(--text-size) * 0.65rem / 12);
    line-height: 1.4;
}

/* The width the cells are fitted to, inside the side insets. Its height never
   changes, so the script that justifies the grid can watch it without laying
   the gallery out twice. */
#gallery-width-probe {
    position: absolute;
    top: 0;
    left: 4px;
    right: 4px;
    height: 0;
    visibility: hidden;
    pointer-events: none;
}

/* A cell's height, for the script to read while the groups that hold the
   cells aren't laid out. */
#gallery-cell-probe {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: var(--cell-height);
    visibility: hidden;
    pointer-events: none;
}

#gallery-blur-layer {
    position: fixed;
    inset: 0;
    z-index: 8;
    pointer-events: none;
    background-color: rgba(var(--theme-bg-rgb), 0.04);
    backdrop-filter: blur(140px) brightness(1.1) saturate(2);
    -webkit-backdrop-filter: blur(140px) brightness(1.1) saturate(2);
    -webkit-clip-path: inset(
        var(--sidebar-gutter)
        calc(100vw - (var(--sidebar-gutter) + var(--sidebar-width)))
        var(--sidebar-gutter)
        var(--sidebar-gutter)
        round var(--sidebar-radius)
    );
    clip-path: inset(
        var(--sidebar-gutter)
        calc(100vw - (var(--sidebar-gutter) + var(--sidebar-width)))
        var(--sidebar-gutter)
        var(--sidebar-gutter)
        round var(--sidebar-radius)
    );
    transition: opacity 180ms ease-out;
}

body.is-sidebar-collapsed #gallery-blur-layer {
    opacity: 0;
}


/* 2. Each Individual Grid Item (Figure) */
/* A cell of fixed size, in pixels. Never a percentage height: that made Safari
   lay out the whole grid again on every scroll step, ~20 ms a frame with
   thousands of figures. */
#photo-gallery figure {
    /* Its own, not the reset's inherit: an element that inherits a property
       that isn't inherited by default is restyled whenever its parent's style
       changes, so each change to the gallery's, as the script fits its
       columns, restyled all 5,317 figures, ~40 ms. */
    box-sizing: border-box;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: var(--cell-width);
    height: var(--cell-height);
    text-align: center;
    cursor: default;
}

/* 3. The Container for the Image */
/* QuickLook's thumbnail box: a square inset into the icon, so a thumbnail of
   either orientation fits the same size, as in Finder.
   The image is positioned, not a flex item, and the container is sized and
   laid out on its own, so a thumbnail that finishes loading only lays out its
   own box. In normal flow every lazy-load relaid the whole grid, which takes
   tens of ms with thousands of figures, once per image as you scroll. */
#photo-gallery figure .image-container {
    position: relative;
    contain: size layout;
    align-self: flex-start;
    width: var(--thumb-box);
    height: var(--thumb-box);
    margin: calc(var(--icon-top) + var(--thumb-inset)) 0 0 calc(var(--icon-left) + var(--thumb-inset));
}

/* 4. The Image Itself */
/* QuickLook's thumbnail fits the box: its longer side spans it, and the other
   follows the picture's shape. Both come from the box's size and the shape
   alone. Sized from its own pixels, capped at 100% of the box, Safari once
   drew a thumbnail a third the size of its box, centred in it. */
#photo-gallery figure img {
    position: absolute;
    inset: 0;
    margin: auto; /* Centers it in the container */
    display: block;
    width: var(--thumb-box);
    height: auto;
    object-fit: contain;
    /* Binder's thumbnail card: the picture fills it to the edge, and the
       hairline runs 1px inside that edge, over the picture. An outline rather
       than a border, which would sit beside the picture, not over it. */
    border-radius: var(--thumb-radius);
    outline: solid 1px var(--thumb-hairline);
    outline-offset: -1px;
    pointer-events: none; /* Makes sure clicks go to the parent figure */
    box-shadow: var(--thumb-glow);
}

/* A portrait thumbnail spans the box's height instead. Its shape is known,
   and marked, once it loads. */
#photo-gallery figure img.is-portrait {
    width: auto;
    height: var(--thumb-box);
}

/* Until it loads, an image has no size of its own, and Safari's lazy loading
   takes it for a point at the box's centre: in a collapsed group's row, an
   item cut off by the row's edge didn't load until its centre scrolled in.
   Filling the box meanwhile lets any part of it in view load it. The box is
   hidden until then, so nothing of this shows. */
#photo-gallery figure:not(.is-visible) img {
    width: 100%;
    height: 100%;
}

/* 5. The Filename Caption */
/* Finder's title: as wide as the cell, wrapping 4px in from either side,
   starting at the name's top. The gallery's script keeps it to two lines. */
#photo-gallery figure figcaption {
    align-self: stretch;
    margin-top: calc(var(--name-top) - var(--icon-top) - var(--icon-size) + var(--thumb-inset));
    padding: 0 4px;
    color: rgba(var(--ink-rgb), 0.8);
    overflow-wrap: anywhere;
    pointer-events: none; /* Makes sure clicks go to the parent figure */
}

/* Dimmed by its colour, 0.7 of the caption's 0.8, not by opacity, and its ×
   lowered by vertical-align, not a transform: in Safari either one gives every
   caption a layer of its own, and with thousands of captions showing, each
   scroll step costs milliseconds more. */
#photo-gallery figure figcaption .dimensions {
    display: block;
    font-size: var(--info-font-size);
    color: rgba(var(--ink-rgb), 0.56);
    margin-top: 0.2em;
}

/* Show item info off: the line goes, and the cell loses its room. */
#photo-gallery.hides-item-info {
    --info-lines: 0;
}

#photo-gallery.hides-item-info figure figcaption .dimensions {
    display: none;
}

/* A zero line height keeps the lowered × from deepening the line. */
#photo-gallery figure figcaption .dimensions-x {
    vertical-align: -0.55px;
    line-height: 0;
}

/* View Options ▸ Label position ▸ Right: Finder's title beside the icon
   (Binder's IconViewGeometry, label on the right). The name wraps at 4 to 20
   widths of "0", the selection box playing no part. The cell is the box, then
   2px, then the name's wrap width and its 4px padding a side, wide; the
   taller of the box and the text, and 6px, tall, each rounded up to even.
   The icon sits the padding, truncated, in from the left and is centred down
   the cell, floored. Items are s/16 apart, rounded up and at least 2px, both
   ways. */
#photo-gallery.is-label-right {
    --wrap-width: calc(round(up, round(up, 1ch, 1px) * (4 + 16 * var(--grid-spacing) / 100), 1px) + 1px);
    --text-height: calc(round(up, var(--name-lines) * 1lh, 1px) + var(--info-lines) * round(up, var(--info-font-size) * 1.4, 1px));
    --cell-width: round(up, var(--icon-box) + 2px + var(--wrap-width) + 8px, 2px);
    --cell-height: round(up, max(var(--icon-box), var(--text-height)) + 6px, 2px);
    --icon-top: round(down, (var(--cell-height) - var(--icon-size)) / 2, 1px);
    --icon-left: var(--icon-inset);
    --column-gap: max(round(up, var(--icon-padding), 1px), 2px);
    --row-gap: var(--column-gap);
}

/* At 16px and under, the name keeps one line, and the cell a smaller margin. */
#photo-gallery.is-label-right.has-tiny-icons {
    --name-lines: 1;
    --cell-height: round(up, max(var(--icon-box), var(--text-height)) + 4px, 2px);
}

/* The name and the dimensions line start 6px past the selection box (the
   caption 2px past it, floored, and its 4px padding), left-aligned, and are
   centred down the cell together, or the name alone. The caption follows the
   thumbnail's box in a row, as tall as the cell. Not positioned: in Safari an
   absolutely placed caption in each figure laid the gallery out again on
   every step it scrolled sideways, 7ms a step with thousands of figures. */
#photo-gallery.is-label-right figure {
    flex-direction: row;
}

#photo-gallery.is-label-right figure figcaption {
    flex: none;
    align-self: stretch;
    width: calc(var(--wrap-width) + 8px);
    margin: 0 0 0 calc(round(down, var(--icon-left) + var(--icon-size) + var(--icon-padding) + 2px, 1px) - var(--icon-left) - var(--icon-size) + var(--thumb-inset));
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
}

#photo-gallery.is-label-right figure figcaption .dimensions {
    white-space: nowrap;
    overflow: hidden;
}

/* Ungrouped, the cells run down columns that fill the window's height, and
   the gallery scrolls sideways, as Finder's does. It fills the window under
   the top bar, down to the footer. */
#wrapper:has(> #photo-gallery.is-label-right:not(.is-grouped)) {
    height: 100vh;
}

#photo-gallery.is-label-right:not(.is-grouped) {
    flex: 1 1 0;
    min-height: 0;
    grid-template-columns: none;
    grid-template-rows: repeat(auto-fill, var(--cell-height));
    grid-auto-flow: column;
    grid-auto-columns: var(--cell-width);
    justify-items: start;
    align-content: start;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
}

/* View Options ▸ Background ▸ Color: the colour fills the area right of the
   sidebar, under the items, in place of the page's own background; #bg-color
   draws it. As in Binder, the items are drawn in the light appearance over
   it, whatever the system's, so the gallery and its footer take the light
   tokens. */
#photo-gallery.has-custom-background,
#photo-gallery.has-custom-background ~ #footer {
    --ink-rgb: 31, 27, 24;
    --thumb-glow: 0 calc(4px * var(--thumb-shadow-offset-scale, 1)) calc(14px * var(--thumb-shadow-blur-scale, 1)) rgba(0, 0, 0, 0.28);
    --accent: #9c6247;
    --accent-glow: 0 0 calc(3px * var(--selection-glow-scale, 1)) calc(1px * var(--selection-glow-scale, 1)) rgba(238, 138, 58, 0.6), 0 0 calc(14px * var(--selection-glow-scale, 1)) calc(1.5px * var(--selection-glow-scale, 1)) rgba(204, 129, 70, 0.65);
    --accent-text-glow: 0 0 22px rgba(204, 129, 70, 0.38);
    color: rgb(var(--ink-rgb));
}

.modal-info-panel .dimensions-x {
    display: inline-block;
    transform: translateY(1px);
}

/* Group By: Binder's grouped icon view, after Finder's. The gallery stacks its
   groups, each a 32px header over its own grid, with Finder's grouped section
   insets: 10px above the first row, 4px either side, 2px below the last. */
/* The ungrouped grid's justify-items would align and shrink the groups too,
   in browsers that align blocks. */
#photo-gallery.is-grouped {
    display: block;
    justify-items: normal;
    padding: 0;
    overflow-anchor: none;
}

/* Its own formatting context, so a collapsed row running on under the next
   header doesn't move where the group ends. */
.gallery-group {
    display: flow-root;
}

/* A group the search or the sidebar leaves empty. */
.gallery-group[hidden] {
    display: none;
}

/* Kept clear of the top bar and the pinned header when the arrows reveal it. */
#photo-gallery.is-grouped figure {
    scroll-margin-top: calc(var(--top-bar-height) + 32px);
}

/* The header pins under the top bar while its group passes, then the next
   group's pushes it out. It draws nothing of its own at rest but its title,
   its button and a rule along its top, the line between it and the group
   above. */
.gallery-group-header {
    position: relative;
    top: 0;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    height: 32px;
    padding: 0 19px;
}

/* Sticky only near the pin line, where the script puts it: Safari gives each
   sticky header a layer, and a few hundred slowed every scroll step. */
.gallery-group-header.is-sticky {
    position: sticky;
    top: var(--top-bar-height);
}

.gallery-group-header::before,
.gallery-group-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    pointer-events: none;
}

/* quaternaryLabelColor, a full point. */
.gallery-group-header::before {
    top: 0;
    background-color: rgba(var(--ink-rgb), 0.1);
}

/* The banner's divider: its two device rows inked 34 and 15 of 255, the
   heavier one on the band's edge. */
.gallery-group-header::after {
    bottom: 0;
    background-image: linear-gradient(to bottom, rgba(var(--ink-rgb), 0.06) 50%, rgba(var(--ink-rgb), 0.13) 50%);
    visibility: hidden;
}

/* Pinned, the header floats on the top bar's material, under the top bar,
   over the marquee, with the divider in place of its rule. */
.gallery-group-header.is-floating {
    z-index: 9;
    background-color: var(--top-bar-material-bg);
    backdrop-filter: var(--chrome-material-blur);
    -webkit-backdrop-filter: var(--chrome-material-blur);
}

.gallery-group-header.is-floating::before,
.gallery-group.is-first .gallery-group-header::before {
    visibility: hidden;
}

.gallery-group-header.is-floating::after {
    visibility: visible;
}

/* Finder's 15pt semibold title and 11pt button to its 12pt names, in the
   caption's type. */
.gallery-group-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: calc(0.65rem * 15 / 12);
    font-weight: 600;
    line-height: 1.25;
    color: rgba(var(--ink-rgb), 0.55);
}

.gallery-group-subtitle {
    font-weight: 300;
    color: rgba(var(--ink-rgb), 0.3);
}

#photo-gallery .gallery-group-toggle {
    flex: none;
    height: auto;
    margin: 0 0 0 5px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: rgba(var(--ink-rgb), 0.55) !important;
    font-family: inherit;
    font-size: calc(0.65rem * 11 / 12);
    font-weight: 300;
    letter-spacing: 0;
    line-height: 1.25;
    text-transform: none;
    transition: none;
    cursor: default;
}

#photo-gallery .gallery-group-toggle:hover {
    background: none;
}

#photo-gallery .gallery-group-toggle:active {
    background: none;
    color: rgba(var(--ink-rgb), 0.85) !important;
}

#photo-gallery .gallery-group-toggle[hidden] {
    display: none;
}

/* A group's rows aren't laid out or painted while they're off screen: grouped
   by character, the gallery has thousands more items and a scrolling row per
   group, and Safari's scrolling missed frames drawing them all. The script
   tells each body its height. Its paint is clipped to it, so it runs on 20px
   under the next header, where a selected name's glow can reach, and the
   header stays out of it, above the marquee. */
.gallery-group-body {
    margin-bottom: -20px;
    content-visibility: auto;
}

/* Left-packed, never justified, as Finder lays out a grouped grid. */
.gallery-group-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, var(--cell-width));
    column-gap: var(--column-gap);
    row-gap: var(--row-gap);
    padding: 10px 4px 22px;
}

/* Collapsed, a group is one row of all its items, scrolled sideways. */
.gallery-group.is-collapsed .gallery-group-items {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: var(--cell-width);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

.gallery-group.is-collapsed .gallery-group-items::-webkit-scrollbar {
    display: none;
}



/* 6. Marquee Selection Box */
#marquee {
    position: absolute;
    border: 1px solid rgba(var(--ink-rgb), 0.246);
    background-color: rgba(var(--ink-rgb), 0.098);
    pointer-events: none;
    visibility: hidden;
    z-index: 9; /* Changed from 10 to 9 */
}

/* Once collapsed rows have scrolled under it, Binder's band is a staircase:
   a slice per row's window, each edged at its sides like the marquee, and
   the hairline's steps between them. The script places them. */
#marquee-steps {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 9;
}

.marquee-slice,
.marquee-step {
    position: absolute;
}

.marquee-slice {
    border: 1px solid rgba(var(--ink-rgb), 0.246);
    background-color: rgba(var(--ink-rgb), 0.098);
}

.marquee-step {
    background-color: rgba(var(--ink-rgb), 0.246);
}

#marquee-gutter-highlight {
    position: fixed;
    border: 1px solid transparent;
    border-top-color: var(--marquee-gutter-highlight-top, transparent);
    border-right-color: var(--marquee-gutter-highlight-right, transparent);
    border-bottom-color: var(--marquee-gutter-highlight-bottom, transparent);
    border-left-color: var(--marquee-gutter-highlight-left, transparent);
    background-color: transparent;
    pointer-events: none;
    visibility: hidden;
    z-index: 9;
    --marquee-gutter-highlight-mask: linear-gradient(
        to right,
        #000 0,
        #000 48%,
        rgba(0, 0, 0, 0.98) 58%,
        rgba(0, 0, 0, 0.92) 68%,
        rgba(0, 0, 0, 0.74) 78%,
        rgba(0, 0, 0, 0.36) 86%,
        rgba(0, 0, 0, 0.16) 96%,
        transparent 100%
    );
    -webkit-mask-image: var(--marquee-gutter-highlight-mask);
    -webkit-mask-position: var(--marquee-gutter-mask-x, 0px) var(--marquee-gutter-mask-y, 0px);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: var(--marquee-gutter-mask-width, calc(var(--sidebar-gutter) + var(--sidebar-width))) 100vh;
    mask-image: var(--marquee-gutter-highlight-mask);
    mask-position: var(--marquee-gutter-mask-x, 0px) var(--marquee-gutter-mask-y, 0px);
    mask-repeat: no-repeat;
    mask-size: var(--marquee-gutter-mask-width, calc(var(--sidebar-gutter) + var(--sidebar-width))) 100vh;
    -webkit-clip-path: inset(
        var(--marquee-gutter-clip-top, 0px)
        var(--marquee-gutter-clip-right, 0px)
        var(--marquee-gutter-clip-bottom, 0px)
        var(--marquee-gutter-clip-left, 0px)
    );
    clip-path: inset(
        var(--marquee-gutter-clip-top, 0px)
        var(--marquee-gutter-clip-right, 0px)
        var(--marquee-gutter-clip-bottom, 0px)
        var(--marquee-gutter-clip-left, 0px)
    );
}

/* FINAL FIX: Prevents object-highlighting on the search input during a drag */
body.is-marquee-dragging #search-input {
    pointer-events: none;
    outline: none;
    -webkit-user-drag: none;
}

/* FINAL FIX: Globally disables default browser selection during a marquee drag */
/* Set on the body, which descendants follow, plus the few elements with a
   cursor of their own. A rule on every element restyled the whole page,
   thousands of figures included, as each drag started and ended. */
body.is-marquee-dragging {
    cursor: default !important;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

body.is-marquee-dragging :is(a, button, input, label, .button, .search-wrapper, .search-pill,
                             .sidebar-resize-handle, .all-people-resize-handle) {
    cursor: default !important;
}

/*
============================================
Modal / Lightbox Styles
============================================
*/

/* The main overlay container */
.modal-overlay {
    display: flex; /* MODIFIED: Set to flex to enable centering */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: var(--modal-scrim);
    align-items: center;
    justify-content: center;

    /* NEW: Default hidden state and transition for smooth animation */
    opacity: 0;
    visibility: hidden;
    transform: scale(0.98);
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
}

/* NEW: The visible state for the modal overlay */
.modal-overlay.is-visible {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

/* Opening and closing zoom, Quick Look's, as Binder plays it. While it runs
   the overlay shows at once, without its own fade, and the script animates
   the scrim, the window and the thumbnail flying beneath it. The window and
   its parts are scaled from their top-left corners, the picture running past
   its container while the chrome around it is squeezed. A thumbnail half out
   of view flies partly out of the overlay, which mustn't scroll for it.
   Closing, clicks go through to the gallery. */
.modal-overlay.is-zooming {
    opacity: 1;
    visibility: visible;
    transform: none;
    overflow: hidden;
    background-color: transparent;
    transition: none;
}

.modal-overlay.is-closing {
    pointer-events: none;
}

.modal-overlay.is-zooming :is(.modal-content, .modal-info-panel, #modal-img) {
    transform-origin: 0 0;
}

.modal-overlay.is-zooming .modal-image-container {
    overflow: visible;
}

.modal-zoom-scrim,
.modal-zoom-image {
    display: none;
    position: absolute;
    pointer-events: none;
}

.modal-overlay.is-zooming :is(.modal-zoom-scrim, .modal-zoom-image) {
    display: block;
}

.modal-zoom-scrim {
    inset: 0;
    background-color: var(--modal-scrim);
}

/* The thumbnail as the gallery draws it, card corners and hairline, scaled
   with it. A kind icon flies as it is. */
.modal-zoom-image {
    transform-origin: 0 0;
    background: no-repeat center / 100% 100%;
    outline: solid 1px var(--thumb-hairline);
    outline-offset: -1px;
}

.modal-zoom-image.is-icon {
    outline: none;
}

/* The content box of the modal */
.modal-content {
    display: flex;
    flex-direction: row;
    background-color: var(--modal-surface);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px); /* Safari compatibility */
    margin: auto;
    border: 1px solid rgba(var(--ink-rgb), 0.2);
    border-radius: 12px;
    width: 90%;
    max-width: 1400px;
    height: auto;
    max-height: 90vh; /* Set a max-height relative to viewport for very large images */
    align-items: stretch;
    position: relative;
    box-shadow: var(--modal-shadow);
    overflow: hidden; /* ADDED to apply border-radius to children */
}

/* The Close Button */
.modal-close {
    color: var(--modal-control);
    position: absolute;
    top: 15px;
    right: 25px;
    font-size: 35px;
    font-weight: bold;
    transition: 0.3s;
}

.modal-close:hover,
.modal-close:focus {
    color: var(--ink);
    text-decoration: none;
    cursor: pointer;
}

/* Navigation arrows */
.modal-prev, .modal-next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -50px;
    color: var(--ink);
    font-weight: bold;
    font-size: 20px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    -webkit-user-select: none;
}

.modal-next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.modal-prev {
    left: 0;
    border-radius: 0 3px 3px 0;
}

/* On hover, add a black background color with a little transparency */
.modal-prev:hover, .modal-next:hover {
    background-color: var(--modal-nav-hover);
}

/* Left side of the modal (the image) */
.modal-image-container {
    flex: 2;
    padding: 0; /* MODIFIED */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative; /* Added for absolute positioning of img */
}

.modal-image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}



/* Right side of the modal (the info panel) */
.modal-info-panel {
    flex: 1;
    min-width: 350px; /* Ensure info panel has enough space */
    padding: 2.5rem;
    background-color: var(--modal-info-bg);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.modal-info-panel .info-content {
    flex-grow: 1;
}

.modal-info-panel h3 {
    margin-top: 0;
    margin-bottom: 1.5rem;
    word-break: break-all;
    font-size: 0.85rem;
}

#modal-filename {
    text-transform: none;
}

/* Download button */
#modal-download-btn {
    width: 100%;
    margin-top: 1.5rem;
    padding: 0;
}

/*
================================================
New Styles for Finder-Style Info Panel
================================================
*/
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.25rem 1.5rem; /* Vertical and horizontal spacing */
}

.info-item {
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
}

.info-grid dt {
    font-size: 0.55rem;
    font-weight: 300;
    color: var(--ink-muted);
    text-transform: uppercase;
    margin: 0;
}

.info-grid dd {
    font-size: 0.65rem;
    color: var(--ink);
    margin: 0;
    word-wrap: break-word;
}

.metadata-header {
    text-align: left;
    padding-top: 1.5rem;
    padding-bottom: 0.5rem;
    margin: 0;
    font-size: 0.7rem;
    letter-spacing: 0.1rem;
    border-bottom: 1px solid rgba(var(--ink-rgb), 0.2);
}

/* ================================================
Custom Download Button Style
================================================
*/
/* Using the 'Subtle & Integrated' style */
#modal-download-btn.download-btn {
    background-color: rgba(var(--ink-rgb), 0.075);
    color: var(--ink) !important;
    box-shadow: inset 0 0 0 1px rgba(var(--ink-rgb), 0.25);
    font-weight: 300;
}

#modal-download-btn.download-btn:hover {
    background-color: rgba(var(--ink-rgb), 0.15);
    box-shadow: inset 0 0 0 1px var(--ink);
}

#modal-download-btn.download-btn .fas {
    margin-right: 0.75em;
}

/*
============================================
Custom Context Menu
============================================
*/

.context-menu {
    display: none; /* Hidden by default */
    position: fixed; /* Stays in place on the screen */
    z-index: 2000; /* Ensures it's on top of other elements */
    background-color: rgba(var(--panel-rgb), 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px); /* Safari compatibility */
    border: 1px solid rgba(var(--ink-rgb), 0.1);
    border-radius: 8px;
    padding: 5px 0;
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
    font-family: "Source Sans Pro", sans-serif;
    font-weight: 300;
    font-size: 0.65rem; /* Matched to filename size */
    color: var(--ink);
    -webkit-user-select: none; /* Prevent text selection */
    -ms-user-select: none;
    user-select: none;
}

/* While a menu is open, the page and the collapsed rows can't be scrolled, so
   a fling already under way stops where it is: the browser lets a script
   cancel only a gesture's first wheel event, not the momentum that follows
   it. The sideways gallery keeps its overflow, which would take its scrollbar
   away and give its rows the room. */
body.is-context-menu-open,
body.is-context-menu-open .gallery-group.is-collapsed .gallery-group-items {
    overflow: hidden;
}

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

.context-menu ul li {
    padding: 8px 15px;
    cursor: pointer;
    white-space: nowrap;
}

/* MODIFIED: This rule now excludes .separator from the hover effect */
.context-menu ul li:not(.separator):hover {
    background-color: rgba(var(--ink-rgb), 0.1);
}

/* NEW: This rule styles the separator as a centered, inset line */
.context-menu ul li.separator {
    height: 1px;
    padding: 0;
    margin: 6px 15px;
    background-color: rgba(var(--ink-rgb), 0.15);
    cursor: default; /* Use the default cursor, not the pointer */
}

/* A row that opens a submenu: a chevron at its end, and lit while it's open. */
.context-menu ul li.context-menu-parent {
    display: flex;
    align-items: center;
    gap: 24px;
    cursor: default;
}

.context-menu ul li.context-menu-parent::after {
    content: '\203A';
    margin-left: auto;
    font-size: 1.3em;
    line-height: 0;
    opacity: 0.7;
}

.context-menu ul li.context-menu-parent.is-open {
    background-color: rgba(var(--ink-rgb), 0.1);
}

/* The submenu keeps a column for the check mark of the current choice. */
.context-submenu {
    z-index: 2001;
}

.context-submenu ul li {
    position: relative;
    padding-left: 30px;
}

.context-submenu ul li.separator {
    padding: 0;
}

.context-submenu ul li.is-checked::before {
    content: '\2713';
    position: absolute;
    left: 12px;
}

/* A choice that does nothing here, such as Reverse Order with no key. */
.context-menu ul li.is-disabled {
    color: rgba(var(--ink-rgb), 0.35);
    pointer-events: none;
}

/*
============================================
View Options Panel
============================================
*/

/* Binder's View Options window: 236pt wide, 18pt margins, its controls in an
   11pt font. Here it is set in the menus' font and material, so its metrics
   are points of that font: --pt is 1/11 of it. The script places it. */
.view-options-panel {
    --pt: calc(1em / 11);
    position: fixed;
    z-index: 1400;
    width: calc(236 * var(--pt));
    padding-bottom: calc(19 * var(--pt));
    background-color: rgba(var(--panel-rgb), 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(var(--ink-rgb), 0.1);
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    font-family: "Source Sans Pro", sans-serif;
    font-weight: 300;
    font-size: 0.65rem;
    line-height: calc(18 * var(--pt));
    color: var(--ink);
    cursor: default;
    -webkit-user-select: none;
    user-select: none;
}

/* Its display would otherwise beat the hidden attribute. */
.view-options-panel[hidden] {
    display: none;
}

/* A utility window's title bar: the close button on the left, the title
   centred across the whole bar. */
.view-options-title-bar {
    position: relative;
    height: calc(28 * var(--pt));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 calc(28 * var(--pt));
    touch-action: none;
}

.view-options-panel .view-options-title {
    margin: 0;
    overflow: hidden;
    font-size: 1em;
    font-weight: 600;
    line-height: inherit;
    letter-spacing: 0;
    text-overflow: ellipsis;
    text-transform: none;
    white-space: nowrap;
}

.view-options-close {
    position: absolute;
    top: 50%;
    left: calc(9 * var(--pt));
    width: 12px;
    height: 12px;
    margin-top: -6px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: #ff5f57;
    box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.2);
    cursor: default;
}

.view-options-close::before,
.view-options-close::after {
    content: '';
    position: absolute;
    top: 5.5px;
    left: 3px;
    width: 6px;
    height: 1px;
    background-color: rgba(77, 0, 0, 0.75);
    opacity: 0;
    transform: rotate(45deg);
}

.view-options-close::after {
    transform: rotate(-45deg);
}

.view-options-close:hover::before,
.view-options-close:hover::after {
    opacity: 1;
}

.view-options-panel label {
    display: inline;
    margin: 0;
    color: inherit;
    font-size: 1em;
    letter-spacing: 0;
    line-height: inherit;
    text-transform: none;
}

/* Group By: its label, then the popup 64pt in. */
.view-options-row {
    display: flex;
    align-items: center;
    height: calc(22 * var(--pt));
    margin-top: calc(8 * var(--pt));
    padding: 0 calc(18 * var(--pt));
}

.view-options-row label {
    flex: 0 0 calc(64 * var(--pt));
}

/* Text size: a narrow popup, 59.5pt in. */
.view-options-row--text-size label {
    flex-basis: calc(59.5 * var(--pt));
}

.view-options-panel .view-options-row--text-size select {
    width: calc(64 * var(--pt));
}

/* A native popup button, as Binder's is, not the template's field. Its font is
   the panel's, which its metrics count in. */
.view-options-panel select {
    all: revert;
    width: calc(134 * var(--pt));
    font: inherit;
}

/* Binder places each row by its frame. Here each row keeps its distance from
   the one above it, which depends on what that is. */
/* Its frame is 1pt tall, as Binder's is, with a 1px line at its top. */
.view-options-separator {
    height: calc(1 * var(--pt));
    margin-top: calc(7 * var(--pt));
    border-top: 1px solid rgba(var(--ink-rgb), 0.15);
}

.view-options-slider + .view-options-separator {
    margin-top: calc(15 * var(--pt));
}

.view-options-check + .view-options-separator,
.view-options-radios + .view-options-separator {
    margin-top: calc(6 * var(--pt));
}

.view-options-row + .view-options-line {
    margin-top: calc(6 * var(--pt));
}

.view-options-line + .view-options-radios {
    margin-top: calc(2 * var(--pt));
}

.view-options-separator + .view-options-line {
    margin-top: calc(8 * var(--pt));
}

.view-options-line + .view-options-radios--stacked {
    margin-top: calc(-3 * var(--pt));
}

.view-options-separator + .view-options-slider,
.view-options-separator + .view-options-check {
    margin-top: calc(8 * var(--pt));
}

.view-options-separator + .view-options-row {
    margin-top: calc(7 * var(--pt));
}

.view-options-row + .view-options-row {
    margin-top: calc(6 * var(--pt));
}

.view-options-check + .view-options-check,
.view-options-radios + .view-options-check {
    margin-top: calc(2 * var(--pt));
}

.view-options-slider + .view-options-slider {
    margin-top: calc(10 * var(--pt));
}

.view-options-check + .view-options-grain-slider {
    margin-top: calc(2 * var(--pt));
}

.view-options-grain-slider + .view-options-separator {
    margin-top: calc(6 * var(--pt));
}

/* A small checkbox: its 14pt box 2pt in from the margin and its title 4pt
   past the box, on an 18pt line. A native one, as Binder's is. */
.view-options-panel .view-options-check {
    display: flex;
    align-items: center;
    height: calc(18 * var(--pt));
    padding: 0 calc(18 * var(--pt)) 0 calc(20 * var(--pt));
}

/* A title on a line of its own, such as Label position's. */
.view-options-line {
    height: calc(18 * var(--pt));
    padding: 0 calc(18 * var(--pt));
}

/* Small radio buttons in a row, each 64.5pt wide, from 2pt in. */
.view-options-radios {
    display: flex;
    height: calc(18 * var(--pt));
    padding-left: calc(20 * var(--pt));
}

.view-options-panel .view-options-radios label {
    display: flex;
    flex: 0 0 calc(64.5 * var(--pt));
    align-items: center;
}

/* Radio buttons one under another, Background's. */
.view-options-radios--stacked {
    flex-direction: column;
    height: auto;
}

.view-options-panel .view-options-radios--stacked label {
    flex: 0 0 calc(18 * var(--pt));
}

/* Use as Defaults: a small push button on a 22pt line, centred, 106pt under
   the last separator as Binder places it, less the 82pt Grain's settings
   take above that separator, so the window is as tall as it was without
   them. A native one, as Binder's is. */
.view-options-defaults {
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(22 * var(--pt));
    margin-top: calc(24 * var(--pt));
}

.view-options-panel .view-options-defaults button {
    all: revert;
    width: calc(121 * var(--pt));
    font: inherit;
}

/* The colour picker the Color button opens, out of sight beside it. */
.view-options-panel input[type="color"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.view-options-panel input[type="checkbox"],
.view-options-panel input[type="radio"] {
    all: revert;
    flex: none;
    width: calc(14 * var(--pt));
    height: calc(14 * var(--pt));
    margin: 0 calc(4 * var(--pt)) 0 0;
    font: inherit;
    accent-color: var(--accent);
}

/* A slider: its title and value on one line, the slider under them, 1pt up,
   26pt in and 68pt short of the margin, where the other sliders keep their
   icons. */
.view-options-slider {
    position: relative;
    display: grid;
    grid-template-columns: calc(86 * var(--pt)) 1fr;
    padding: 0 calc(18 * var(--pt));
}

/* Icon size: its value 56pt in. */
.view-options-slider--icon-size {
    grid-template-columns: calc(56 * var(--pt)) 1fr;
}

/* The small and large pictures either side of a slider, placed from the top
   of its title line. Icon size's are the generic document icon, 16pt and
   32pt. Grid spacing's are Binder's square.grid.2x2 and 3x3 symbols,
   redrawn: rounded squares in the secondary label colour. */
.view-options-slider-icon {
    position: absolute;
}

.view-options-icon-small {
    left: calc(20 * var(--pt));
    top: calc(18 * var(--pt));
    width: calc(16 * var(--pt));
    height: calc(16 * var(--pt));
    background: url("../images/kind-icons/data-64.webp") center / contain no-repeat;
}

.view-options-icon-large {
    left: calc(184 * var(--pt));
    top: calc(10 * var(--pt));
    width: calc(32 * var(--pt));
    height: calc(32 * var(--pt));
    background: url("../images/kind-icons/data-128.webp") center / contain no-repeat;
}

.view-options-grid-small,
.view-options-grid-large {
    background-color: rgba(var(--ink-rgb), 0.5);
    -webkit-mask: var(--icon) no-repeat center / 100% 100%;
    mask: var(--icon) no-repeat center / 100% 100%;
}

.view-options-grid-small {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11.25 11.25' fill='none' stroke='black' stroke-width='0.9'%3E%3Crect x='0.45' y='0.45' width='4.1' height='4.1' rx='0.85'/%3E%3Crect x='6.7' y='0.45' width='4.1' height='4.1' rx='0.85'/%3E%3Crect x='0.45' y='6.7' width='4.1' height='4.1' rx='0.85'/%3E%3Crect x='6.7' y='6.7' width='4.1' height='4.1' rx='0.85'/%3E%3C/svg%3E");
    left: calc(22.5 * var(--pt));
    top: calc(19.875 * var(--pt));
    width: calc(11.25 * var(--pt));
    height: calc(11.25 * var(--pt));
}

.view-options-grid-large {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26.6 26.6' fill='none' stroke='black' stroke-width='1.7'%3E%3Crect x='0.85' y='0.85' width='5.9' height='5.9' rx='1.65'/%3E%3Crect x='10.35' y='0.85' width='5.9' height='5.9' rx='1.65'/%3E%3Crect x='19.85' y='0.85' width='5.9' height='5.9' rx='1.65'/%3E%3Crect x='0.85' y='10.35' width='5.9' height='5.9' rx='1.65'/%3E%3Crect x='10.35' y='10.35' width='5.9' height='5.9' rx='1.65'/%3E%3Crect x='19.85' y='10.35' width='5.9' height='5.9' rx='1.65'/%3E%3Crect x='0.85' y='19.85' width='5.9' height='5.9' rx='1.65'/%3E%3Crect x='10.35' y='19.85' width='5.9' height='5.9' rx='1.65'/%3E%3Crect x='19.85' y='19.85' width='5.9' height='5.9' rx='1.65'/%3E%3C/svg%3E");
    left: calc(187.1 * var(--pt));
    top: calc(12.3 * var(--pt));
    width: calc(26.6 * var(--pt));
    height: calc(26.6 * var(--pt));
}

/* Grain's settings, under it: a 20pt row each, from its title, as macOS sets
   in a checkbox's dependent controls, and laid out as Preview's Adjust Color
   lays out its sliders: the setting's title, its slider, and here its value
   at the margin. While Grain is off they are too, their titles and values in
   AppKit's disabled control text, a quarter of the label colour. */
.view-options-grain-slider {
    display: grid;
    grid-template-columns: calc(46 * var(--pt)) minmax(0, 1fr) calc(34 * var(--pt));
    align-items: center;
    height: calc(20 * var(--pt));
    padding: 0 calc(18 * var(--pt)) 0 calc(38 * var(--pt));
}

.view-options-grain-slider output {
    text-align: right;
}

.view-options-grain-slider:has(input:disabled) {
    color: rgba(var(--ink-rgb), 0.25);
}

.view-options-grain-slider input[type="range"] {
    all: revert;
    font: inherit;
    width: 100%;
    height: calc(18 * var(--pt));
    margin: 0;
    accent-color: var(--accent);
}

/* A native slider too. Its font is the panel's, which its metrics count in. */
.view-options-slider input[type="range"] {
    all: revert;
    font: inherit;
    grid-column: 1 / -1;
    width: calc(132 * var(--pt));
    height: calc(18 * var(--pt));
    margin: calc(-1 * var(--pt)) 0 0 calc(26 * var(--pt));
    accent-color: var(--accent);
}

/*
==================================================================
// Search Icon & Clear Button
==================================================================
*/
#search-container form {
    margin: 0;
    display: flex;
    align-items: center;
    position: relative; /* This is the positioning context for the icon and button */
}

.search-icon {
    position: absolute;
    left: 10px; /* Slightly adjusted for visual centering */
    top: 50%;
    transform: translateY(-50%);
    width: 16px;  /* Icon width */
    height: 16px; /* Icon height */
    z-index: 1;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: contain;
    /* The SVG icon is embedded here. You can change stroke-width from '1.5' to '1' for ultra-thin or '2' for thicker. */
    background-image: var(--search-icon);
}

.clear-search-button {
    position: absolute;
    right: 12px; /* Position from the right edge of the form */
    top: 50%; /* Center vertically */
    transform: translateY(-50%);
    cursor: default;
    display: none; /* Hidden by default */
    color: var(--ink-muted);
    font-size: 1.2rem;
    font-weight: bold;
    line-height: 1; /* Ensure the 'x' is centered in its own box */
    -webkit-user-select: none; /* Prevent text selection */
    -ms-user-select: none;
    user-select: none;
    transition: color 0.2s ease-in-out;
}

.clear-search-button:hover {
    color: var(--ink);
}


/*
==================================================================
// Custom Scrollbar
==================================================================
*/

/* 1. Hide the native browser scrollbar */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none;
}

html, body {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* 2. Style the custom scrollbar track */
#custom-scrollbar-track {
    position: fixed;
    top: 80px;
    right: 0;
    width: 12px; /* Set the track width to contain the expanded thumb */
    height: calc(100% - 80px);
    z-index: 1500;
    pointer-events: none; /* ADDED: Allows clicks to pass through the track */
}

/* 3. Style the custom scrollbar thumb */
#custom-scrollbar-thumb {
    position: absolute;
    top: 0;
    right: 1px;
    width: 3px;
    background-color: rgba(var(--scrollbar-rgb), 0.35);
    border-radius: 2px;
    cursor: default;
    /* Animate all property changes smoothly */
    transition: all 0.2s ease-in-out;
    pointer-events: auto; /* ADDED: Re-enables clicks specifically for the thumb */
}

/* NEW: The thumb's "hover" state is now controlled by a class */
#custom-scrollbar-thumb.is-near {
    right: 2px;  /* Re-center the wider thumb */
    width: 15px;  /* The new, wider width */
    background-color: rgba(var(--scrollbar-rgb), 0.55);
}

/* Invisible, larger grab area around the 'is-near' thumb */
#custom-scrollbar-thumb.is-near::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: transparent;
}

/* ===== Enhanced Selection Style ===== */

/* Photos' exterior selection ring (-[PXGDecorationDefaultBadgeDrawingHelper
   drawWithDecorationInfo:...], type 18): a rounded rect stroked 3pt wide in
   the picture's rect grown 4pt a side, its corners the picture's grown by 1pt
   plus half the stroke, so both edges of the ring are concentric with the
   picture and the 1pt between stays clear. Here the stroke is the selected
   thumbnail's border and the gap its padding. The box grows by both on every
   side, so the picture stays put, and the browser clips the picture to the
   content box's curve, its own radius. The glow is cast from the ring's outer
   edge, and the hairline stays on the picture. */
#photo-gallery figure.selected img {
    --selection-ring: calc(var(--selection-ring-gap) + var(--selection-ring-width));
    inset: calc(-1 * var(--selection-ring));
    width: calc(var(--thumb-box) + 2 * var(--selection-ring));
    padding: var(--selection-ring-gap);
    border: var(--selection-ring-width) solid var(--accent);
    border-radius: calc(var(--thumb-radius) + var(--selection-ring));
    outline-offset: calc(-1px - var(--selection-ring));
    box-shadow: var(--accent-glow);
}

#photo-gallery figure.selected img.is-portrait {
    width: auto;
    height: calc(var(--thumb-box) + 2 * var(--selection-ring));
}

/* At rest the filename carries a transparent glow the size of --accent-text-glow,
   so selecting only recolors it. A glow appearing from none changes the text's
   painted bounds, which relays the whole grid: tens of ms per item that a
   marquee selects in a gallery of thousands. */
#photo-gallery figure figcaption .filename {
    text-shadow: 0 0 22px transparent;
}

/* Makes the filename text color and glow match the selected image's border. */
#photo-gallery figure.selected figcaption .filename {
    color: var(--accent); /* Same color as the selected image border */
    /* A single shadow with a large blur-radius for a very soft effect. */
    text-shadow: var(--accent-text-glow);
}
/*
==================================================================
// Lazy Load Image Reveal
==================================================================
*/

/* Until its thumbnail loads, a figure shows its file's kind icon above the
   filename and dimensions, as Binder's icon view shows a file's type icon until
   QuickLook has its thumbnail. Finder draws such an icon on a canvas of the icon
   size, concentric with the thumbnail box, which QuickLook insets by 7/128 of
   the icon size a side: a 225px box is a 253px icon. The icon is the figure's
   background rather than an element of its own, so a gallery of thousands gains
   no boxes, and swapping it for the thumbnail only repaints. The icons are
   macOS's own, rendered at 2x, and look the same in light and dark mode. */
#photo-gallery figure {
    background: url("../images/kind-icons/jpeg.webp") no-repeat;
    background-position: var(--icon-left) var(--icon-top);
    background-size: var(--icon-size) var(--icon-size);
}

#photo-gallery figure[data-kind="png"] {
    background-image: url("../images/kind-icons/png.webp");
}

#photo-gallery figure[data-kind="webp"] {
    background-image: url("../images/kind-icons/webp.webp");
}

#photo-gallery figure[data-kind="avif"] {
    background-image: url("../images/kind-icons/avif.webp");
}

/* Above 253px the icons are drawn from renders twice the size. */
#photo-gallery.has-large-icons figure {
    background-image: url("../images/kind-icons/jpeg-1024.webp");
}

#photo-gallery.has-large-icons figure[data-kind="png"] {
    background-image: url("../images/kind-icons/png-1024.webp");
}

#photo-gallery.has-large-icons figure[data-kind="webp"] {
    background-image: url("../images/kind-icons/webp-1024.webp");
}

#photo-gallery.has-large-icons figure[data-kind="avif"] {
    background-image: url("../images/kind-icons/avif-1024.webp");
}

#photo-gallery:not(.hides-icon-preview) figure.is-visible {
    background-image: none;
}

/* View Options ▸ Show icon preview off: every figure keeps its kind icon, as
   Finder's icons do without previews. A thumbnail not yet shown isn't
   loaded either, since an image that isn't rendered isn't lazy-loaded. Its
   container is sized on its own, so this doesn't move anything. */
#photo-gallery.hides-icon-preview figure img {
    display: none;
}

/* The thumbnail's container is hidden until it loads, then shown at once. The
   container and the image are layers in Safari, and hidden ones cost a scroll
   step nothing, while shown ones add up over thousands of waiting figures.
   Not opacity: below 1 it gives each waiting figure two more layers, and a
   fade-in starts and ends more of them on every frame while you scroll. Both
   made Safari and Chrome miss frames. */
#photo-gallery figure .image-container {
    visibility: hidden;
}

#photo-gallery:not(.hides-icon-preview) figure.is-visible .image-container {
    visibility: visible;
}

/*
==================================================================
// Download Button
==================================================================
*/

/* The download button on the item under the pointer: Binder's like heart,
   which is Photos' favourite badge (+[IPXBadges newFavoriteBadgeWithTarget:
   action:]), an unbordered button the size of its 16×18 image. Photos' image
   is a white SF Symbol at 13pt regular over a black halo of 40% alpha,
   blurred 1px (sigma) all round: fitted to MediaItem-Favorite-Off within
   1/255. These are drawn the same way from arrow.down.circle, the symbol of
   Binder's Downloads row, at 1x and 2x. The script places the button in the
   thumbnail's box, which is hidden until the thumbnail loads, so it is made
   visible itself. The template's button styles are undone. */
#photo-gallery .item-download-button {
    all: unset;
    position: absolute;
    width: 16px;
    height: 18px;
    visibility: visible;
    cursor: default;
    -webkit-user-select: none;
    user-select: none;
}

#photo-gallery .item-download-button[hidden] {
    display: none;
}

/* The images carry 3px of halo a side past the frame, which Photos' crop, so
   they are drawn by pseudo-elements that take no clicks: the button's frame
   alone is hit. Pressed, it shows arrow.down.circle.fill, as Photos' badge
   shows its alternate image while held. Both images are drawn from the start,
   so the first press doesn't wait for its image. */
#photo-gallery .item-download-button::before,
#photo-gallery .item-download-button::after {
    content: '';
    position: absolute;
    inset: -3px;
    background: no-repeat 0 0 / 100% 100%;
    pointer-events: none;
}

#photo-gallery .item-download-button::before {
    background-image: image-set(url("../images/badges/download.webp") 1x, url("../images/badges/download-2x.webp") 2x);
}

#photo-gallery .item-download-button::after {
    background-image: image-set(url("../images/badges/download-pressed.webp") 1x, url("../images/badges/download-pressed-2x.webp") 2x);
    visibility: hidden;
}

#photo-gallery .item-download-button:active:hover::before {
    visibility: hidden;
}

#photo-gallery .item-download-button:active:hover::after {
    visibility: visible;
}

/*
==================================================================
// Constrained Text Selection in Modal
==================================================================
*/

/* When dragging, default to NO selection and the standard arrow cursor.
  The !important flag ensures this overrides browser defaults during the drag.
*/
.is-selecting-text * {
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default !important;
}

/* For the specific element where the drag started, re-enable
  both text selection and the text "I-beam" cursor.
*/
.is-selecting-text .selection-active,
.is-selecting-text .selection-active * {
    -webkit-user-select: text;
    -ms-user-select: text;
    user-select: text;
    cursor: text !important;
}

/*
==================================================================
// Disable Text Selection on Download Button
==================================================================
*/

/* This rule makes the download button and its contents (the icon and text)
   immune to text selection, even on right-click. */
#modal-download-btn, #modal-download-btn * {
    -webkit-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

/*
==================================================================
// Custom Text Selection Style
==================================================================
*/

::selection {
  background-color: var(--text-selection);
}

::-moz-selection { /* Firefox compatibility */
  background-color: var(--text-selection);
}

/*
==================================================================
// Search Suggestions / Autocomplete
==================================================================
*/
#search-container form {
    position: relative;
}

#suggestions-container {
    display: none;
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    width: 100%;
    background-color: rgba(var(--theme-bg-rgb), 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(var(--ink-rgb), 0.15);
    border-radius: 4px;
    z-index: 1001;
    max-height: 280px;
    overflow-y: auto;
    overflow-x: hidden;
}

.suggestion-item {
    padding: 8px 30px;
    cursor: default;
    font-size: 0.65rem;
    color: var(--ink-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color 0.2s ease-in-out;
}

.suggestion-item:hover,
.suggestion-item.active {
    background-color: rgba(var(--ink-rgb), 0.1);
    color: var(--ink);
}

#suggestions-container::-webkit-scrollbar {
    width: 8px;
}
#suggestions-container::-webkit-scrollbar-track {
    background: transparent;
}
#suggestions-container::-webkit-scrollbar-thumb {
    background: rgba(var(--ink-rgb), 0.3);
    border-radius: 4px;
}
#suggestions-container::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--ink-rgb), 0.5);
}

/* --- Download Progress Indicator --- */

/* This tells the browser how to smoothly animate our custom property */
@property --progress-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

#download-indicator {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px; /* Changed from 28px */
    height: 22px; /* Changed from 28px */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#download-indicator.is-active {
    opacity: 1;
    visibility: visible;
}

#download-indicator .progress-circle,
#download-indicator .cancel-icon,
#download-indicator .complete-icon {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

#download-indicator .progress-circle {
    /* The background is now ONLY the conic-gradient for the progress */
    background: conic-gradient(var(--ink) var(--progress-angle), rgba(var(--ink-rgb), 0.2) 0deg);

    /* This mask now correctly cuts a real hole out of the background */
    -webkit-mask-image: radial-gradient(transparent 56%, black 57%);
    mask-image: radial-gradient(transparent 56%, black 57%);

    opacity: 0;
    pointer-events: none;
    transition: --progress-angle 0.4s ease-in-out;
}

#download-indicator.is-downloading .progress-circle {
    opacity: 1;
}

/* --- Cancel (Hover) State --- */
#download-indicator .cancel-icon {
    background-color: var(--download-cancel-bg);
    color: var(--ink);
    font-size: 20px; /* Changed from 24px */
    line-height: 1;
    cursor: native;
    opacity: 0;
    transform: scale(0.8);
}

#download-indicator.is-downloading:hover .progress-circle {
    opacity: 0;
}

#download-indicator.is-downloading:hover .cancel-icon {
    opacity: 1;
    transform: scale(1);
}

/*
============================================
Finder-Style Sidebar
============================================
*/

:root {
    --top-bar-material-rgb: var(--theme-bg-rgb);
    --top-bar-material-bg: rgba(var(--top-bar-material-rgb), 0.8);
    --top-bar-material-gradient: linear-gradient(
        to bottom,
        rgba(var(--top-bar-material-rgb), 0.8) 0%,
        rgba(var(--top-bar-material-rgb), 0.58) 38%,
        rgba(var(--top-bar-material-rgb), 0.2) 72%,
        rgba(var(--top-bar-material-rgb), 0) 100%
    );
    --top-bar-blur-mask: linear-gradient(
        to bottom,
        #000 0%,
        rgba(0, 0, 0, 0.9) 34%,
        rgba(0, 0, 0, 0.48) 68%,
        transparent 100%
    );
    --chrome-material-blur: blur(4px);
    /* The sidebar's width until the script sets its own on each element that
       reads it (gallery.js, setSidebarWidth). */
    --sidebar-width: 240px;
    --sidebar-min-width: 176px;
    --sidebar-max-width: 420px;
    --sidebar-gutter: 8px;
    --sidebar-blur-feather: 72px;
    --sidebar-blur-mask: linear-gradient(
        to right,
        #000 0,
        #000 calc(100% - var(--sidebar-blur-feather)),
        rgba(0, 0, 0, 0.94) calc(100% - 56px),
        rgba(0, 0, 0, 0.74) calc(100% - 36px),
        rgba(0, 0, 0, 0.48) calc(100% - 18px),
        rgba(0, 0, 0, 0.2) calc(100% - 5px),
        transparent 100%
    );
    --sidebar-radius: 20px;
    --sidebar-toggle-size: 28px;
    --sidebar-toggle-left: calc(var(--sidebar-gutter) + 12px);
    --top-bar-height: 2.5rem;
    --top-bar-fade-height: 4.5rem;
}

#app-shell {
    display: flex;
    align-items: stretch;
    min-height: 100vh;
    width: 100%;
    position: relative;
    z-index: 3;
}

/* The blur from the window's edge to the sidebar's, fading out over its last
   72px. An element rather than the shell's ::before, so the resize handle can
   give it the sidebar's width (gallery.js). */
#sidebar-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: calc(var(--sidebar-gutter) + var(--sidebar-width));
    height: 100vh;
    z-index: 10;
    pointer-events: none;
    background-color: rgba(var(--theme-bg-rgb), 0.01);
    backdrop-filter: var(--chrome-material-blur);
    -webkit-backdrop-filter: var(--chrome-material-blur);
    -webkit-mask-image: var(--sidebar-blur-mask);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-image: var(--sidebar-blur-mask);
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    -moz-transition: width 260ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease-out;
    -webkit-transition: width 260ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease-out;
    -ms-transition: width 260ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease-out;
    transition: width 260ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease-out;
}

#finder-sidebar {
    flex: 0 0 var(--sidebar-width);
    width: var(--sidebar-width);
    min-width: var(--sidebar-min-width);
    max-width: min(var(--sidebar-max-width), calc(100vw - 320px));
    height: calc(100vh - (var(--sidebar-gutter) * 2));
    margin: var(--sidebar-gutter) 0 var(--sidebar-gutter) var(--sidebar-gutter);
    position: sticky;
    top: var(--sidebar-gutter);
    z-index: 11;
    background-color: var(--chrome-material-bg);
    backdrop-filter: var(--chrome-material-blur);
    -webkit-backdrop-filter: var(--chrome-material-blur);
    border: 1px solid var(--chrome-material-border);
    border-radius: var(--sidebar-radius);
    corner-shape: squircle;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
    cursor: default;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    opacity: 1;
    overflow: visible;
    -moz-transform: translateX(0);
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
    -moz-transition: flex-basis 260ms cubic-bezier(0.22, 1, 0.36, 1), width 260ms cubic-bezier(0.22, 1, 0.36, 1), min-width 260ms cubic-bezier(0.22, 1, 0.36, 1), margin-left 260ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease-out, -moz-transform 260ms cubic-bezier(0.22, 1, 0.36, 1), border-width 180ms ease-out, border-color 180ms ease-out, background-color 180ms ease-out, box-shadow 180ms ease-out;
    -webkit-transition: flex-basis 260ms cubic-bezier(0.22, 1, 0.36, 1), width 260ms cubic-bezier(0.22, 1, 0.36, 1), min-width 260ms cubic-bezier(0.22, 1, 0.36, 1), margin-left 260ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease-out, -webkit-transform 260ms cubic-bezier(0.22, 1, 0.36, 1), border-width 180ms ease-out, border-color 180ms ease-out, background-color 180ms ease-out, box-shadow 180ms ease-out;
    -ms-transition: flex-basis 260ms cubic-bezier(0.22, 1, 0.36, 1), width 260ms cubic-bezier(0.22, 1, 0.36, 1), min-width 260ms cubic-bezier(0.22, 1, 0.36, 1), margin-left 260ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease-out, -ms-transform 260ms cubic-bezier(0.22, 1, 0.36, 1), border-width 180ms ease-out, border-color 180ms ease-out, background-color 180ms ease-out, box-shadow 180ms ease-out;
    transition: flex-basis 260ms cubic-bezier(0.22, 1, 0.36, 1), width 260ms cubic-bezier(0.22, 1, 0.36, 1), min-width 260ms cubic-bezier(0.22, 1, 0.36, 1), margin-left 260ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease-out, transform 260ms cubic-bezier(0.22, 1, 0.36, 1), border-width 180ms ease-out, border-color 180ms ease-out, background-color 180ms ease-out, box-shadow 180ms ease-out;
    will-change: flex-basis, width, min-width, margin-left, opacity, transform;
}

.sidebar-content {
    border-radius: inherit;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 3.8rem 16px 1.6rem 1rem;
    position: relative;
    text-align: left;
    scrollbar-width: none;
    z-index: 1;
}

.sidebar-content::-webkit-scrollbar {
    display: none;
}

.sidebar-filter-section {
    margin: 0 0 1.45rem;
}

.sidebar-filter-section:last-child {
    margin-bottom: 0;
}

.sidebar-filter-heading {
    margin: 0 0 0.42rem;
    color: rgba(var(--ink-rgb), 0.9);
    font-family: 'Game of Thrones', 'Cinzel', 'Trajan Pro', serif;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.2;
    text-transform: uppercase;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.sidebar-option-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.18rem;
}

.sidebar-option-list--inline {
    display: grid;
    grid-template-columns: repeat(auto-fill, 1.3rem);
    gap: 0.26rem 0.3rem;
}

#finder-sidebar .sidebar-option-list--inline .sidebar-option {
    padding-left: 0;
    padding-right: 0;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

#finder-sidebar .sidebar-option {
    display: inline-block;
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0.08rem 0.34rem;
    border: 0;
    border-radius: 7px;
    background: transparent;
    box-shadow: none;
    color: rgba(var(--ink-rgb), 0.68) !important;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 300;
    letter-spacing: 0;
    line-height: 1.25;
    text-align: left;
    text-transform: none;
    white-space: normal;
    cursor: default;
    -webkit-appearance: none;
    appearance: none;
    -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

#finder-sidebar .sidebar-option:hover, #finder-sidebar .sidebar-option:focus-visible, #finder-sidebar .sidebar-option.is-active {
    color: rgba(var(--ink-rgb), 0.92) !important;
}

/* The pointer lights a row less than picking it does, so a lit row
   clicked clear dims at once. On a lit row the two veils stack:
   1 - (1 - 0.16) × (1 - 0.075). */
#finder-sidebar .sidebar-option:hover, #finder-sidebar .sidebar-option:focus-visible {
    background: rgba(var(--ink-rgb), 0.075);
}

#finder-sidebar .sidebar-option.is-active {
    background: rgba(var(--ink-rgb), 0.16);
}

#finder-sidebar .sidebar-option.is-active:hover, #finder-sidebar .sidebar-option.is-active:focus-visible {
    background: rgba(var(--ink-rgb), 0.223);
}

#finder-sidebar .sidebar-option:focus {
    outline: none;
}

.sidebar-option--emphasis {
    font-style: italic !important;
}

.sidebar-option--muted {
    color: rgba(var(--ink-rgb), 0.56) !important;
}

.sidebar-toggle {
    position: fixed;
    top: calc((var(--top-bar-height) - var(--sidebar-toggle-size)) / 2);
    left: var(--sidebar-toggle-left);
    z-index: 12;
    width: var(--sidebar-toggle-size);
    height: var(--sidebar-toggle-size);
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    box-shadow: none;
    color: rgba(var(--ink-rgb), 0.72);
    cursor: default;
    -webkit-appearance: none;
    appearance: none;
}

.sidebar-toggle svg {
    width: 18px;
    height: 18px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sidebar-toggle:hover, .sidebar-toggle:focus-visible {
    background: rgba(var(--ink-rgb), 0.1);
    color: rgba(var(--ink-rgb), 0.9);
}

.sidebar-toggle:focus {
    outline: none;
}

/* Back and Forward (shared/css/history-nav.css): just past the sidebar's
   edge, in line with its toggle, and next to the toggle once the sidebar is
   closed. They slide with the sidebar. */
.history-nav {
    --history-nav-left: calc(var(--sidebar-gutter) + clamp(var(--sidebar-min-width), var(--sidebar-width), min(var(--sidebar-max-width), 100vw - 320px)) + 12px);
    top: calc((var(--top-bar-height) - var(--history-nav-height)) / 2);
    left: var(--history-nav-left);
    -moz-transition: left 260ms cubic-bezier(0.22, 1, 0.36, 1);
    -webkit-transition: left 260ms cubic-bezier(0.22, 1, 0.36, 1);
    -ms-transition: left 260ms cubic-bezier(0.22, 1, 0.36, 1);
    transition: left 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.is-sidebar-collapsed .history-nav {
    --history-nav-left: calc(var(--sidebar-toggle-left) + var(--sidebar-toggle-size) + 4px);
}

body.is-resizing-sidebar .history-nav {
    -moz-transition: none;
    -webkit-transition: none;
    -ms-transition: none;
    transition: none;
}

.sidebar-resize-handle {
    position: absolute;
    top: 0;
    right: -5px;
    width: 8px;
    height: 100%;
    z-index: 2;
    cursor: col-resize;
    touch-action: none;
    outline: none;
}

.sidebar-resize-handle::after {
    content: '';
    position: absolute;
    top: 0;
    right: 3px;
    width: 1px;
    height: 100%;
    background-color: transparent;
    transition: background-color 0.2s ease-in-out, width 0.2s ease-in-out;
}

body.is-resizing-sidebar {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* While the sidebar is dragged, a sheet over the page holds the resize
   cursor wherever the pointer goes, w-resize once the sidebar is as wide as
   it gets. A rule on every element did it, and restyled the whole page,
   thousands of figures included, as each drag started and ended. */
body.is-resizing-sidebar::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    cursor: col-resize;
}

body.is-resizing-sidebar.is-sidebar-resize-maxed::after {
    cursor: w-resize;
}

body.is-resizing-sidebar #finder-sidebar, body.is-resizing-sidebar #sidebar-backdrop {
    -moz-transition: none;
    -webkit-transition: none;
    -ms-transition: none;
    transition: none;
}

body.is-sidebar-collapsed #finder-sidebar {
    flex-basis: 0px;
    width: 0;
    min-width: 0;
    margin-left: 0;
    opacity: 0;
    -moz-transform: translateX(-6px);
    -webkit-transform: translateX(-6px);
    -ms-transform: translateX(-6px);
    transform: translateX(-6px);
    border-width: 0;
    border-color: transparent;
    background-color: transparent;
    box-shadow: none;
    pointer-events: none;
}

body.is-sidebar-collapsed .sidebar-resize-handle {
    display: none;
}

body.is-sidebar-collapsed #sidebar-backdrop {
    width: 0;
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {

    #finder-sidebar, #sidebar-backdrop, .history-nav {
        -moz-transition: none;
        -webkit-transition: none;
        -ms-transition: none;
        transition: none;
    }

}

#app-shell > #wrapper {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    padding-top: 0;
}

#app-shell #header {
    position: sticky;
    top: 0;
    left: auto;
    flex: 0 0 2.5rem;
    background-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 0;
    isolation: isolate;
}

#app-shell #header::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: var(--top-bar-fade-height);
    z-index: 0;
    pointer-events: none;
    background: var(--top-bar-material-gradient);
    backdrop-filter: var(--chrome-material-blur);
    -webkit-backdrop-filter: var(--chrome-material-blur);
    -webkit-mask-image: var(--top-bar-blur-mask);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-image: var(--top-bar-blur-mask);
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
}

#app-shell #header > * {
    z-index: 1;
}

/* The bar keeps clear of Back and Forward on both sides, so its logo and
   search stay centred, and move right off the buttons only where the bar is
   too narrow for both. */
#app-shell #header {
    --history-nav-room: calc(12px + var(--history-nav-width) + 8px);
    padding-left: var(--history-nav-room);
    padding-right: var(--history-nav-room);
    justify-content: safe center;
}

body.is-sidebar-collapsed #app-shell #header {
    --history-nav-room: calc(var(--sidebar-toggle-left) + var(--sidebar-toggle-size) + 4px + var(--history-nav-width) + 8px);
}

/* Grouped, the top bar is solid glass down to the pinned group header, which
   carries the same material on to its divider, as Finder's toolbar runs into
   its group band. Its fade would lie over the header and blur it twice. */
body.is-gallery-grouped #app-shell #header::before {
    height: var(--top-bar-height);
    background: var(--top-bar-material-bg);
    -webkit-mask-image: none;
    mask-image: none;
}

@media screen and (max-width: 736px) {

    :root {
        --sidebar-width: 88px;
        --sidebar-min-width: 80px;
        --sidebar-max-width: 200px;
        --sidebar-gutter: 6px;
        --sidebar-toggle-size: 26px;
        --sidebar-toggle-left: calc(var(--sidebar-gutter) + 8px);
    }

    /* Back and Forward are hidden on a phone: the bar has no room to keep. */
    #app-shell #header,
    body.is-sidebar-collapsed #app-shell #header {
        --history-nav-room: 0px;
        justify-content: center;
    }

    #app-shell > #wrapper {
        padding-top: 0;
        padding-right: 1rem;
        padding-bottom: 0.5rem;
        padding-left: 1rem;
    }

    .sidebar-content {
        padding: 3.5rem 0.2rem 1rem;
    }

    .sidebar-filter-section {
        margin-bottom: 1.25rem;
    }

    .sidebar-filter-heading {
        font-size: 0.54rem;
    }

    #finder-sidebar .sidebar-option {
        padding: 0.05rem 0.18rem;
        font-size: 0.62rem;
    }

    .sidebar-option-list--inline {
        grid-template-columns: repeat(auto-fill, 0.9rem);
        gap: 0.18rem;
    }

}

/*
============================================
All People Column
============================================
*/

/* Binder's All Tags column, for people: a split view item between the sidebar
   and the gallery, inserted while the sidebar's "All People…" row is selected. */

:root {
    --all-people-column-width: 190px;
    --all-people-column-min-width: 150px;
    --all-people-row-height: 1.1rem;
    --all-people-pill-inset: 0.5rem;
}

#all-people-column {
    flex: 0 0 var(--all-people-column-width);
    width: var(--all-people-column-width);
    height: 100vh;
    position: sticky;
    top: 0;
    z-index: 2;
    border-right: 1px solid var(--chrome-material-border);
    cursor: default;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.all-people-list {
    position: relative;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* The first name lines up with the gallery's first row, below the top bar's fade. */
    padding: calc(var(--top-bar-height) + 20px) 0 1.6rem;
    scrollbar-width: none;
    outline: none;
}

.all-people-list::-webkit-scrollbar {
    display: none;
}

.all-people-row {
    display: flex;
    align-items: center;
    height: var(--all-people-row-height);
    margin: 0 var(--all-people-pill-inset);
    padding: 0 0.34rem;
    border-radius: 7px;
    color: rgba(var(--ink-rgb), 0.68);
    font-size: 0.72rem;
    font-weight: 300;
    line-height: 1.25;
}

.all-people-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Adjacent picks join into one pill, as a table's selected rows do. */
.all-people-row.is-selected {
    background: rgba(var(--ink-rgb), 0.16);
    color: rgba(var(--ink-rgb), 0.92);
}

.all-people-row.is-selected + .all-people-row.is-selected {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.all-people-row.is-selected:has(+ .all-people-row.is-selected) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.all-people-list:focus .all-people-row.is-selected {
    background: var(--all-people-focus-pill);
    color: var(--ink);
}

.all-people-resize-handle {
    position: absolute;
    top: 0;
    right: -5px;
    width: 8px;
    height: 100%;
    z-index: 2;
    cursor: col-resize;
    touch-action: none;
    outline: none;
}

body.is-resizing-all-people-column,
body.is-resizing-all-people-column * {
    cursor: col-resize !important;
}

/* Two picks or more: Binder's "Match:" row, the Find bar's scope row. */
.all-people-match-row {
    position: sticky;
    top: var(--top-bar-height);
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    width: 100%;
    padding: 0.35rem 2rem 0;
    font-size: 0.62rem;
    line-height: 1.25;
}

.all-people-match-label {
    margin-right: 0.08rem;
    color: rgba(var(--ink-rgb), 0.68);
}

.all-people-match-pills {
    display: flex;
    gap: 2px;
}

#app-shell .all-people-match-pill,
#app-shell .all-people-empty-button {
    width: auto;
    height: auto;
    margin: 0;
    padding: 0.08rem 0.46rem;
    border-radius: 7px;
    background: transparent;
    box-shadow: inset 0 0 0 1px transparent;
    color: rgba(var(--ink-rgb), 0.78) !important;
    font: inherit;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.25;
    text-transform: none;
    cursor: default;
}

#app-shell .all-people-match-pill:hover {
    box-shadow: inset 0 0 0 1px rgba(var(--ink-rgb), 0.22);
}

#app-shell .all-people-match-pill.is-active {
    background: rgba(var(--ink-rgb), 0.16);
    color: rgba(var(--ink-rgb), 0.95) !important;
}

.all-people-empty-state {
    position: absolute;
    top: 50vh;
    left: 50%;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    width: max-content;
    max-width: min(360px, calc(100% - 32px));
    color: rgba(var(--ink-rgb), 0.56);
    font-size: 0.72rem;
    line-height: 1.35;
    text-align: center;
    transform: translate(-50%, -50%);
}

.all-people-empty-state p {
    margin: 0;
}

#app-shell .all-people-empty-button {
    font-size: 0.62rem;
    font-weight: 400;
    box-shadow: inset 0 0 0 1px rgba(var(--ink-rgb), 0.28);
}

#app-shell .all-people-empty-button:hover {
    background: rgba(var(--ink-rgb), 0.08);
}

@media screen and (max-width: 736px) {

    :root {
        --all-people-column-width: 120px;
        --all-people-column-min-width: 88px;
        --all-people-row-height: 1rem;
        --all-people-pill-inset: 0.2rem;
    }

    .all-people-row {
        padding: 0 0.18rem;
        font-size: 0.62rem;
    }

    .all-people-match-row {
        padding: 0.3rem 1rem 0;
    }

}