/* NOTE: this was original palette/scheme.  It drifted and then I reconciled it at one point,
         but it's drifted again, so no worries it want to revisit it.
         If we do want to revisit scheme then we should keep in mind '/library/fqdn_text.py'

- cool-white: #f3ffff; very-light-grey: #fafafa; light-grey: #e3e4e7; light-mid-grey: #dadada; mid-grey: #bababa; dark-grey: #3f3f47; slate-like-blue: #566d7e;
- cnt-bookcase: #bababa (#dadada); drag-bookcase: #e3e4e7; drag-name: #3f3f47; drag-bookshelf: #fafafa;

*/

body, input, table {
    font-size: 9pt;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Calibri, Arial, sans-serif;
}
form { margin: 0; padding: 0; }

a { color: #3f3f47; text-decoration: none; }
a:hover { text-decoration: underline; }


/******************** LIBRARY CONTENTS ********************/
.top-view { position: sticky; top: 0px; width: 100%; background-color: #ffffff; z-index:10; }

/* header (see section further down) */

.bookcases-summary { font-weight: bold; padding: 10px; background-color: #bababa; border: 1px solid #bababa ;
    border-radius: 5px 5px 0px 0px;
    background-image: radial-gradient(ellipse 120% 70% at 50% -30%, rgba(255, 255, 255, 0.7), transparent);
    margin: 0;
}
.bookcases-summary a { color: #3f3f47; padding: 5px 7px; transition: all 0.2s ease; }
.bookcases-summary a:hover { background-color: #dadada; color: #3f3f47; border-radius: 5px; }

.library-interactive-root { margin-top: -5px; }

.cnt-inbox {
    display: flow-root;
    background-color: #e3e4e7;
    padding: 1px;
    border-style: ridge; border-radius: 5px;
    box-shadow: inset 0 1px 0 #ffffff;
    margin: 1px;
    transition-behavior: allow-discrete; transition-property: scale, opacity, display; transition: all .3s ease-in-out;
}
    .cnt-inbox--collapsed { background: none; padding: 0; border: none; box-shadow: none; margin: 0; }
    .cnt-inbox-name { display: block; float: left; width: 10%; padding: 3px; font-weight: bold; }
    .cnt-inbox--collapsed .cnt-inbox-name { float: none; width: auto; padding: 0; }
    .cnt-inbox--collapsed .cnt-inbox-name:hover { transform: scale(1.03); transform-origin: 0%; }
    .cnt-inbox .cnt-sites {
        min-height:50px;
        background-color: #fafafa;
        border-radius: 7px;
        margin: 2px;
    }
    .cnt-ads {
        display: block;
        height: 50px;
        background-color: #fafafa;
        margin: 1px;
        border-radius: 7px;
        padding: 1px;
    }

/* tab carousel (see section further down) */
/* drag-drop (see section further down) */

.cnt-library {
    width: 100%;
    background-color: #bababa;
    border-radius: 0 0 5px 5px;
    padding-bottom: 3px;
    background-image: radial-gradient(ellipse 120% 70% at 50% -30%, rgba(255, 255, 255, 0.7), transparent);
}
    .cnt-bookcase {
        display: block;
        min-height:40px;
        margin: 0 px;
    }
        .drag-bookcase,
        .bookcase-row {
            display: block;
            background-color: #e3e4e7;
            color: #3f3f47;
            margin: 3px 1px;
            border-radius: 5px;
            box-shadow: inset 0 1px 0 #ffffff;
            transition: all 0.2s ease;
            -webkit-user-drag: element;
        }
        .drag-bookcase:hover {
            box-shadow: 0 1px 3px #00000010, 0 3px 5px #00000030;
        }
            .bookcase-name {
                display: block; float: left; width: 10%;
                padding: 3px;
                overflow-wrap: break-word;
                transition: all 0.2s ease;
                -webkit-user-drag: none;
            }
            .bookcase-name span { font-weight: bold; }
            .drag-bookcase .bookcase-name:hover {
                background-color: hsl(from #e3e4e7 h s calc(l - 10)); color: #3f3f47; padding: 3px; border-radius: 5px 5px 0 0;
                cursor: move;
                cursor: -webkit-grab;
            }
            .cnt-library--readonly .bookcase-name {
                cursor: pointer;
            }
            .cnt-bookshelf {
                display: inline-block;
                width:88%; min-height:40px;
            }
                .drag-bookshelf,
                .bookshelf-row {
                    display: block;
                    max-width:100%;
                    background-color: #fafafa;
                    color: #3f3f47;
                    margin: 2px;
                    border-radius: 7px;
                    box-shadow: inset 0 1px 0 #ffffff;
                    transition: all 0.2s ease;
                    -webkit-user-drag: element;
                }
                .drag-bookshelf:hover {
                    box-shadow: 0 1px 3px #00000010, 0 3px 5px #00000030;
                }
                    .bookshelf-name {
                        display:block; float: left; width: 10%;
                        padding: 3px;
                        overflow-wrap: break-word;
                        transition: all 0.2s ease;
                        -webkit-user-drag: none;
                    }
                    .drag-bookshelf .bookshelf-name:hover {
                        background-color: hsl(from #fafafa h s calc(l - 10)); color: #3f3f47; padding: 3px; border-radius: 7px 7px 0 0;
                        cursor: move;
                        cursor: -webkit-grab;
                    }
                    .cnt-library--readonly .bookshelf-name {
                        cursor: pointer;
                    }
                    /* bookshelf tools (see section further down) */

                    .sites {
                        display:inline-block;
                        width:88%;
                        min-height:40px;
                    }
                        .cnt-sites {
                            display: block;
                            position: relative;
                            min-height:40px;
                            padding: 0 0 4px 0;
                        }
                        .drag-site,
                        .site-card,
                        .edit-site {
                                position: relative; width: 90px;
                                display: inline-block; vertical-align: top;
                                background-color: #ffffff;
                                padding: 3px 4px;
                                text-align: center; color: #3f3f47;
                                margin: 5px 3px 3px 3px;
                                border-radius: 7px;
                                box-shadow: 0 1px 2px #00000010, 0 2px 3px #00000030;
                                transition: all 0.2s ease;
                                -webkit-user-drag: element;
                                cursor: move;
                                cursor: -webkit-grab;
                            }
                            .cnt-library--readonly .site-card {
                                cursor: pointer;
                            }
                            .drag-site:hover,
                            .site-card:hover {
                                transform: scale(1.10); z-index: 10;
                            }
                            .drag-site a img,
                            .site-card a img,
                            .edit-site a img {
                                    height: 32px; width: 80px;
                                    background-color: #ffffff;
                                    border: none;
                                    -webkit-user-drag: none;
                                }
                                .drag-site a div,
                                .site-card a div,
                                .edit-site a div {
                                    color: #3f3f47; line-height: 135%; font-size: 80%;
                                    -webkit-user-drag: none;
                                }
                                .drag-site a div:not(:empty),
                                .site-card a div:not(:empty),
                                .edit-site a div:not(:empty) {
                                    margin: 1px;
                                    overflow-wrap: break-word;
                                    border-top: solid 1px #e3e4e7;
                                }


/******************** HEADER ********************/
.header {
    position: relative;
    align-items: center;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    height: 50px;
    z-index: 100;
  }
.logo {
    justify-self: left;
    width: 102px; height: 30px;
    padding: 5px;
    border: none;
}

.library-page-header { width: 100%; justify-self: center; text-align: center; }
.library-page-header > span:first-of-type { font-size: 125%; font-weight: bold; font-style: italic; }
.shared-lib-header { background-color: hsl(from #566d7e h s calc(l + 30)); border-radius: 7px; }
.library-page-actions { display: flex; justify-content: center; align-items: center; margin: 10px 0 0 0;}
.library-page-actions input { font-size: 90%; }
.library-page-actions > span:first-of-type:hover { transform: scale(1.00); }
.library-page-actions .glyph-item {display: flex; justify-content: center; align-items: center; margin: 0 5px; color: #3f3f47; text-decoration: none; }
.library-page-actions .glyph-label { visibility: hidden; position: absolute; top: -10px; color: #3f3f47; font-size: 70%; white-space: nowrap; opacity: 0; }
.library-page-actions .glyph-item svg { padding: 1px 2px; width: 20px; height: 20px; flex-shrink: 0; stroke: #3f3f47; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.library-page-actions .glyph-item:hover { transform: scale(1.10); border-radius: 99px; }
.library-page-actions .glyph-item:hover .glyph-label,
.library-page-actions .glyph-item:focus-visible .glyph-label { opacity: 1; visibility: visible; }

.dock-panel {
    position: relative;
    display: flex; align-items: center; justify-self: right;
    color: #3f3f47;
}
.dock-item {
    display: flex; justify-content: center;
    padding: 0 5px;
    color: #3f3f47;
}
.dock-item svg {
    width: 20px; height: 20px;
    flex-shrink: 0;
    stroke: #3f3f47; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; fill: none;
}
.dock-label {
    visibility: hidden;
    position: absolute; bottom: calc(100% + 2px);
    opacity: 0;
    color: #3f3f47; font-size: 80%;
    white-space: nowrap;
    transition: all 0.2s ease;
}
.dock-item:hover { transform: scale(1.10); background-color: #e3e4e7; border-radius: 99px; }
.dock-item:hover .dock-label,
.dock-item:focus-visible .dock-label { opacity: 1; visibility: visible; }

.dock-details { position: relative; z-index: 1; }
.dock-details[open] { z-index: 110; }
.dock-details>summary { list-style: none; }
.dock-details>summary::-webkit-details-marker { display: none; }
.dock-details[open] .dock-item { background-color: transparent; }

.dock-pop {
    position: absolute;
    top: calc(100% + 10px); right: 3px;
    min-width: 125px;
    background-color: #dadada;
    padding: 3px;
    text-align: right;
    border: 1px solid #bababa; border-radius: 5px;
    margin-left: 3px;
    box-shadow: inset 0 1px 0 #ffffff, 0 1px 2px #00000010, 0 2px 3px #00000030;
    z-index: 120;
}
.dock-pop a,
.dock-pop form,
.dock-pop__link {
    display: flex; align-items:center;
    width: 100%;
    background-color: transparent;
    padding: 3px 3px;
    color: #3f3f47; font: inherit; text-align: right;
    text-decoration: none;
    border: none;
}
.dock-pop a:hover, .dock-pop form:hover, .dock-pop__link:hover { text-decoration: underline; }
.dock-pop svg {
    width: 15px; height: 15px;
    flex-shrink: 0;
    padding: 0 5px;
    color: #3f3f47;
    stroke: #3f3f47; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; fill: none;
}
.dock-pop__form { margin: 0; padding: 0; }
.dock-pop hr { border: none; border-top: 1px solid rgba(15, 23, 42, 0.1); margin: 1px; }

.sign-up-button, .sign-in-button, .subscribe-button {
    display: inline-block; min-width: 50px; padding:5px 10px;
    background-color: #566d7e;
    color: #fafafa; text-align: center; font-weight: bold;
    border: 1px solid #bababa; border-radius: 7px;
    margin: 0 3px;
    transition: all 0.2s ease;
}
.sign-up-button:hover, .sign-in-button:hover, .subscribe-button:hover {
    background-color: hsl(from #566d7e h s calc(l - 7));
    text-decoration: none;
    border: 1px solid seagreen;
    transform: scale(1.03);
}

.library-page-actions .subscribed .glyph-label { color: #566d7e; }
.library-page-actions .subscribed svg { stroke: #566d7e;  }


/******************** TAB CAROUSEL ********************/
.tabs-carousel-root {
    position: relative;
    display: flex; align-items: stretch;
    width: 70vw; max-width: 100%; min-width: 0;
    gap: 8px;
    box-sizing: border-box;
}

.tabs-carousel-viewport {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 10px 10px 0px 0px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    max-width: max-content;
}

.tabs-carousel-nav {
    display: inline-flex;
    flex: 0 0 auto;
    align-self: center;
    align-items: center;
    justify-content: center;
    width: 25px; height: 25px;
    background-color: #ffffff;
    padding: 0; margin: 0;
    color: #bababa;
    font: inherit;
    line-height: 1;
    border: 1px solid #e3e4e7; border-radius: 7px;
    transition: all 0.2s ease;
}

.tabs-carousel-nav:hover:not(:disabled) { background-color: #fafafa; }
.tabs-carousel-nav:disabled {
    opacity: 35%;
    box-shadow: none;
}
.tabs-carousel-nav__chev {
    color: #3f3f47; font-size: 14px; font-weight: 700;
    user-select: none;
}
.tabs-carousel-viewport::-webkit-scrollbar { height: 6px; }

.tabs-carousel-viewport::-webkit-scrollbar-thumb { background-color:#dadada; border-radius: 99px; }

.tabs-list {
    display: flex; align-items: center;
    width: max-content;
    padding: 7px 7px 0px 7px;
    gap: 7px;
    background-color: #e3e4e7;
    border: 1px solid #bababa;
    border-bottom: none;
    border-radius: 10px 10px 0px 0px;
    box-shadow: inset 0 1px 0 #ffffff;
}

.tab-trigger {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #fafafa;
    padding: 7px 14px 7px 14px;
    color: #bababa;
    font-weight: bold; text-decoration: none; white-space: nowrap;
    border: 1px solid #bababa; border-radius: 7px 7px 0px 0px;
    box-shadow: inset 0 1px 0 #ffffff50;
    transition: all 0.2s ease;
}
.tab-trigger:hover:not(.tab-trigger--edit-mode) { transform: scale(1.07); z-index: 10; }
.tab-trigger:hover:not(.tab-trigger--active, .tab-trigger--sharedlib, .tab-trigger--edit-mode) { background-color: #fafafa; color: #3f3f47; }
.tab-trigger--active {
    background-color: #bababa;
    color: #0b0b0e;
    border: 1px solid #bababa;
    background-image: radial-gradient(ellipse 70% 50% at 50% -25%, rgba(255, 255, 255, 0.95), transparent);
    box-shadow: inset 0 1px 0 #ffffff;
}

.tab-trigger--sharedlib {
    background-color: hsl(from #566d7e h s calc(l + 45));
    color: hsl(from #566d7e h s calc(l + 15));
    box-shadow: inset 0 1px 0 #ffffff50;
}
.tab-trigger--sharedlib:hover { background-color: hsl(from #566d7e h s calc(l + 30)); color: #3f3f47; }
.tab-trigger--sharedlib.tab-trigger--active {
    background-color: hsl(from #566d7e h s calc(l + 30));
    color: #0b0b0e;
    background-image: radial-gradient(ellipse 70% 50% at 50% -30%, rgba(255, 255, 255, 0.95), transparent);
}
.tab-border--publib { border-width: 1px 1px 0px 1px; border-style: solid; border-color: seagreen; }
.tab-border--privlib { border-width: 1px 1px 0px 1px; border-style: solid; border-color: #bababa; }


/******************** DRAG-DROP ********************/
.hide-ghost-drag {
    opacity: 0;
    visibility: hidden;
    /* display: none; */
}

.ui-sortable-helper.drag-bookcase,
.ui-sortable-helper.drag-site {
    box-shadow: 0 1px 3px #00000010, 0 3px 5px #00000030;
    padding: 3px 4px;
    border-radius: 7px;
}
.highlight-tab-drop {
    border: 3px solid hsl(from wheat h s calc(l - 10));
    border-bottom: 0px;
}

/* TODO: future scope...
   Safari drag-image ghost: see 'lib-drag.js' header comment (2026-07-09 investigation).
   hide-ghost-drag hides Sortable's in-list placeholder only, not Safari's native dragImage.
   library-drag-image-clone is the setDragImage helper appended during Safari drags.
*/
.library-drag-image-clone {
    transform: none !important;
    transition: none !important;
    opacity: 0.95;
    box-shadow: 0 4px 14px #00000028;
    contain: layout paint;
}
.library-drag-image-clone .bookshelf-tools,
.library-drag-image-clone .edit-site-button,
.library-drag-image-clone .edit-bookshelf-button,
.library-drag-image-clone .edit-bookcase-button,
.library-drag-image-clone .add-site-button,
.library-drag-image-clone .add-bookshelf-button,
.library-drag-image-clone .bookshelves-tree__add,
.library-drag-image-clone [x-cloak] {
    display: none !important;
}


/******************** BOOKSHELF TOOLS ********************/
[x-cloak] { display: none !important; }
.bookshelf-tools {
    position: relative;
    text-align: left;
}
.bookshelf-tools-wrapper { display: inline-block; }
.bookshelf-tools .bookshelf-tools-wrapper:hover ul { display: inline; width: 55px;}
.bookshelf-tools a { color: #3f3f47; }
.bookshelf-tools ul {
    display: none;
    list-style: none;
    position: absolute;
    float: none;
    left: 10px; top: -10px;
    z-index: 10;
    background-color: #dadada;
    margin-left: -2px;
    border: 1px solid #bababa;
    border-radius: 5px;
    padding: 3px;
    box-shadow: inset 0 1px 0 #ffffff, 0 1px 2px #00000010, 0 2px 3px #00000030;
    /* white-space: nowrap; */
}
.bookshelf-tools ul li {
    position: relative;
    font-size: 75%;
    padding: 1px 0px;
}


/******************** EDIT PAGE ********************/
.library-page-actions .library-return-button {
    display: inline-block; min-width: 50px; padding:5px 7px;
    background-color: #bababa;
    color: #3f3f47; text-align: center; font-size: 90%; font-weight: bold; text-decoration: none;
    border: 1px solid #bababa; border-radius: 7px;
    margin: -3px 0px 3px 0px;
    background-image: radial-gradient(ellipse 70% 50% at 50% -25%, rgba(255, 255, 255, 0.95), transparent);
    box-shadow: inset 0 1px 0 #ffffff;
    transition: all 0.2s ease;
}
.library-page-actions .library-return-button:hover {
    background-color: hsl(from #bababa h s calc(l - 10));
    color: #3f3f47; text-decoration: none;
    transform: scale(1.03);
}

.edit-page-background { background-color: hsl(from wheat h s calc(l + 10));}
.edit-libraries-button { position: absolute; top: -30px; right: -30px; display: flex; align-items: center; z-index: 10; }
.edit-library-button { display: inline-flex; align-items: center; justify-content: center; }
.edit-bookcase-button, .edit-bookshelf-button { position: absolute; margin: -4px 0 0 5px; z-index: 10; }
.edit-site-button { position: absolute; top: -4px; right: -3px; z-index: 10; }

.edit-libraries-button, .edit-library-button, .edit-bookcase-button, .edit-bookshelf-button, .edit-site-button {
    background-color: wheat;
    color: red; font-size: 90%;
    padding: 3px;
    border-radius: 5px;
    box-shadow: 0 1px 3px #00000010, 0 3px 5px #00000030;
    transition: all 0.2s ease;
}
.edit-libraries-button { padding: 7px 5px; margin: 5px 10px; }
.edit-library-button { box-shadow: none; }
.edit-libraries-button svg, .edit-library-button svg, .edit-bookcase-button svg,.edit-bookshelf-button svg, .edit-site-button svg  {
    width: 14px; height: 14px; flex-shrink: 0; stroke: red; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; fill: none;
}
.edit-libraries-button svg { width: 18px; height: 18px; margin: 0 5px 0 0; }
.edit-libraries-button:hover { text-decoration: none; transform: scale(1.03); }
.edit-bookcase-button:hover, .edit-library-button:hover, .edit-bookshelf-button:hover, .edit-site-button:hover  {
    text-decoration: none; transform: scale(1.10);
}

.add-library-button, .add-bookcase-button, .add-bookshelf-button, .add-site-button {
    padding: 10px 7px;
    color: #3f3f47; font-size: 90%; text-align: left;
    border: 1px solid #e3e4e7; border-radius: 5px;
    margin: 5px 10px;
    transition: all 0.2s ease;
}
.add-library-button, .add-bookcase-button, .add-bookshelf-button,.add-site-button {
    display: inline-flex; align-items: center; justify-content: center;
}

.add-library-button { background-color: #bababa; font-weight: bold; box-shadow: 0 1px 3px #00000010, 0 3px 5px #00000030; }
.add-bookcase-button { background-color: #e3e4e7; font-weight: bold;}
.add-bookshelf-button { background-color: #fafafa; }
.add-site-button { background-color: #ffffff; box-shadow: 0 1px 3px #00000010, 0 3px 5px #00000030; }

.add-library-button svg, .add-bookcase-button svg, .add-bookshelf-button svg, .add-site-button svg {
    margin: 0 3px 0 0; width: 14px; height: 14px; flex-shrink: 0; stroke: #3f3f47; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; fill: none;
}
.add-library-button:hover, .add-bookcase-button:hover, .add-bookshelf-button:hover, .add-site-button:hover {
    background-color: wheat; text-decoration: none; transform: scale(1.03);
}

.library-empty-state {
    margin: 2rem 1rem;
    text-align: center;
}
.library-empty-state p {
    margin-bottom: 1rem;
    color: #3f3f47;
}

.library-modal {
    min-width: 300px; max-width: 25vw;
    background-color: wheat;
    padding: 16px 20px;
    border: 1px solid #bababa; border-radius: 10px;
    box-shadow: 0 1px 3px #00000010, 0 3px 5px #00000030;
}
.library-modal::backdrop { background-color: #000000; opacity: 50%;}
.library-modal--libraries { min-width: min(55vw, 700px); max-width: 55vw; }
.library-modal__title { margin: 0 0 12px 0; font-size: 110%; }
.library-modal__center-frame { justify-self: center; text-align: center; margin: -15px 0 7px 0; }
.library-modal__label { display: block; margin-bottom: 4px; font-size: 90%; }
.library-modal__input { width: 100%; box-sizing: border-box; padding: 4px 6px; border: 0; border-radius: 5px; margin-bottom: 12px; }
.library-modal__input:disabled { background-color: #e3e4e7; opacity: 80%; color: #3f3f47; cursor: not-allowed; }

input:focus, textarea:focus, select:focus,
.library-modal__button:focus { outline: none;  border: 1px solid #bababa;  outline-offset: 2px; }

.library-modal__hint {
    display: block;
    color: #3f3f47; font-size: 80%; line-height: 1.35;
    margin: -8px 0 12px 0;
    overflow-wrap: anywhere;
}
.library-modal__errors {
    background-color: #ffffff;
    color: #b00020; font-size: 90%;
    padding: 6px 8px;
    border: 1px solid #b00020; border-radius: 5px;
    margin-bottom: 10px;
}
.library-modal__message { margin: 0 0 16px 0; font-size: 90%; }
.library-modal__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    width: 100%;
}
.library-modal__actions-left { display: flex; gap: 8px; flex-wrap: nowrap; min-width: 0; }
.library-modal__actions-right {
    display: flex; gap: 8px; flex-wrap: nowrap; min-width: 0;
    grid-column: 2; justify-self: end;
}
.library-modal__button { padding: 4px 12px; border-radius: 7px; white-space: nowrap; background-color: #dadada; transition: all 0.2s ease }
.library-modal__button--primary { font-weight: bold; }
.library-modal__button--danger { color: #b00020; border: 1px solid #b00020; }
.library-modal__button:hover { transform: scale(1.05); }
.library-modal__button:disabled { opacity: 0.45; cursor: not-allowed; }

.edit-libraries__table {
    table-layout: fixed; width: 100%;
    overflow: hidden;
    font-size: 85%;
    border-collapse: separate; border-spacing: 0;
    border-radius: 7px;
    margin: 15px auto 0 auto;
    box-shadow: 0 1px 2px #00000010, 0 2px 3px #00000030;
}
.edit-libraries__table tr:last-child td:first-child { border-bottom-left-radius: 7px; }
.edit-libraries__table tr:last-child td:last-child { border-bottom-right-radius: 7px; }
.edit-libraries__table th { background-color: #bababa; }
.edit-libraries__table td { min-height: 50px; background-color: wheat; vertical-align: top; }
.edit-libraries__table td.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.edit-libraries__table th, .edit-libraries__table td { border: 1px solid #bababa; padding: 5px 7px; }
.edit-libraries__table th:nth-child(1), .edit-libraries__table td:nth-child(1) { width: 20%; text-align: left; font-weight: bold; }
.edit-libraries__table th:nth-child(2), .edit-libraries__table td:nth-child(2) { width: 10%; text-align: center; padding: 10px; }
.edit-libraries__table th:nth-child(3), .edit-libraries__table td:nth-child(3) { width: 43%; text-align: left; padding: 5px 13px; overflow-wrap: anywhere; word-break: break-word; }
.edit-libraries__table th:nth-child(4), .edit-libraries__table td:nth-child(4) { width: 10%; text-align: center; }
.edit-libraries__table th:nth-child(5), .edit-libraries__table td:nth-child(5) { width: 10%; text-align: center; }
.edit-libraries__table th:nth-child(6), .edit-libraries__table td:nth-child(6) { width: 7%; text-align: center; }
.edit-libraries__table td:nth-child(1) { overflow-wrap: anywhere; word-break: break-word; }
.edit-libraries__table-sortable-ghost { opacity: 0.7; background-color: hsl(from wheat h s calc(l + 20)); }
.edit-libraries__table tr:hover td { border: 1px solid hsl(from #bababa h s calc(l - 20)); cursor: move;}
.edit-libraries__table tr:hover { cursor: move; }
.edit-libraries__table tr:active td { cursor: grabbing; }

.library-modal__textarea { resize: vertical; min-height: 4.5em; resize: none; }

.library-modal__select {
    appearance: none;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233f3f47' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 14px;
    padding-right: 30px;
}

.library-modal__custom-dropdown { position: relative; width: 150px; margin-bottom: 12px; }
.library-modal__dropdown-trigger {
    display: flex; justify-content: space-between; align-items: center; width: 100%;
    background-color: #ffffff; color: #3f3f47; padding: 3px 7px; border-radius: 5px;
}
.library-modal__dropdown-menu {
  display: none; position: absolute; top: 100%; left: 0;
  box-sizing: border-box; width: 100%; background-color: #fafafa;
  padding: 8px; border: 1px solid #bababa; border-radius: 5px; margin-top: 2px; box-shadow: 0 1px 2px #00000010, 0 2px 3px #00000030;
  overflow-y: auto; z-index: 10;
}
.library-modal__dropdown-menu.show { display: block; }
.library-modal__card-option input[type="radio"] { display: none; }
.library-modal__card-option { display: block; padding: 3px 7px; font-size: 90%; margin-bottom: 5px; transition: all 0.2s ease; }
.library-modal__card-option:last-child { margin-bottom: 0; }
.library-modal__card-option:hover { transform: scale(1.05); }
.library-modal__card-option:has(input:checked) { background-color: #dadada;}

.library-modal__stats { width: auto; font-size: 90%; border-collapse: separate; border-spacing: 0; margin: 0 auto 16px auto; }
.library-modal__stats th:first-child { border-top-left-radius: 7px; }
.library-modal__stats th:last-child { border-top-right-radius: 7px; }
.library-modal__stats tr:last-child td:first-child { border-bottom-left-radius: 7px; }
.library-modal__stats tr:last-child td:last-child { border-bottom-right-radius: 7px; }
.library-modal__stats th { background-color: #bababa; }
.library-modal__stats td { height: 30px; background-color: wheat }
.library-modal__stats th, .library-modal__stats td { border: 1px solid #bababa; padding: 3px 7px; }
.library-modal__stats td:first-of-type { width: 50%; text-align: center; }
.library-modal__stats td:nth-of-type(2) { width: 50%; text-align: center; }

.outline-shrlib { background-color: hsl(from #566d7e h s calc(l + 30)); color: #0b0b0e; padding: 5px; border-radius: 7px; }
.outline-publib { border: 1.25px solid seagreen; padding: 5px; border-radius: 7px; }
.outline-privlib { border: 1.25px solid #bababa; padding: 5px; border-radius: 7px; }

.bookcase-name { position: relative; }
.bookshelf-name { position: relative; }


/******************** SEARCH PAGE ********************/
.search-bar {
    position: relative; width: 80%; margin: 0 auto;
    justify-content: center; align-items: center;
    border: 1px solid #BABABA; border-radius: 7px;
    box-shadow: 0 1px 3px #00000010, 0 3px 5px #00000030;
    transition: all 0.2s ease;
}
.search-bar:hover { transform: scale(1.01); z-index: 10; }
.search-bar input {
    display: flex; width: 100%; height: 30px;
    padding-inline: 30px;
    border:0; border-radius: 7px;
}
.search-bar input:focus { outline: none; border: 1px solid #bababa; outline-offset: 2px; }

.search-bar .glyph {
    display: flex; position: absolute; top: 0; bottom: 0; left: 10px;
    justify-content: center; align-items: center;
}
.search-bar button {
    display: flex; position: absolute; top: 0; bottom: 0; right: 5px;
    justify-content: center; align-items: center;
    background-color: transparent; border:none;
}
.search-bar svg { color: #BABABA; width: 16px; height: 16px; flex-shrink: 0; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; fill: none; }

.search-results { display: table; width: 100%; margin-top: 5px }
.search-column-left { float: left; width: 70%; padding: 0 1% 0 2%; }
.search-column-right { float: right; width: 24%; padding: 0 2% 0 1%; }
.search-results-container {
    background-color: #e3e4e7;
    color: #3f3f47;
    padding: 10px;
    border: 1px solid #bababa;
    border-radius: 7px;
    box-shadow: inset 0 1px 0 #ffffff;
    background-image: radial-gradient(ellipse 120% 70% at 50% -30%, rgba(255, 255, 255, 0.7), transparent);
    transition: all 0.2s ease;
}
.search-results-container:hover { box-shadow: 0 1px 3px #00000010, 0 3px 5px #00000030; }
.search-more-libraries-link { font-size:90%; font-weight: bold; }
.search-result-card { margin: 12px; }

.search-results-library-name { font-size:150%; font-weight: bold; }
.search-results-container .library-page-actions { float: right; display: inline-flex; justify-content: center; align-items: center; margin: 0px; }
.library-page-description { display:flex; gap:3px; margin: 3px; }
.library-page-subjects { display:flex; gap:3px; margin: 3px; }
.search-results-libraries .library-page-subjects { font-size:90%; }
.library-page-subject { flex: 1; }


/******************** SHARE MODAL ********************/
.library-modal--share {
    min-width: min(90vw, 520px); max-width: min(90vw, 520px);
    padding: 18px 20px 20px;
    background-color: #ffffff;
    border-radius: 12px;
}
.share-modal__header {
    display: flex;
    align-items: center; justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}
.share-modal__title { margin: 0; }
.share-modal__close {
    display: inline-flex;
    width: 32px; height: 32px;
    align-items: center; justify-content: center;
    background: transparent;
    color: #3f3f47;
    border: 0; border-radius: 99px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.share-modal__close:hover { background-color: #e3e4e7; }
.share-modal__close svg {
    width: 18px; height: 18px;
    stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none;
}
.share-modal__library-name {
    font-weight: 600; font-size: 95%;
    margin: 0 0 12px 0;
}
.share-modal__hint { margin: 0 0 14px 0; }
.share-modal__platforms {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding: 4px 2px 12px;
    margin-bottom: 8px;
    scrollbar-width: thin;
}
.share-modal__platform {
    display: flex; flex-direction: column;
    min-width: 64px;
    align-items: center;
    gap: 6px;
    background: transparent;
    padding: 0;
    color: #3f3f47; font: inherit; text-decoration: none;
    border: 0;
    cursor: pointer;
    transition: all 0.2s ease;
}
.share-modal__platform:hover { transform: scale(1.06); }
.share-modal__icon {
    display: inline-flex;
    width: 52px; height: 52px;
    flex-shrink: 0;
    align-items: center; justify-content: center;
    border-radius: 99px;
}
.share-modal__icon svg {
    width: 24px; height: 24px;
    stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
    fill: none;
}
.share-modal__icon--img { background: transparent; overflow: hidden; }
.share-modal__icon--img img {
    display: block;
    width: 100%; height: 100%;
    object-fit: cover;
}
.share-modal__icon--copy { background: #e3e4e7; color: #3f3f47; }
.share-modal__icon--email { background: #dbe7f5; color: #2f5f98; }
.share-modal__icon--sms { background: #d9efe3; color: #2a7a57; }
.share-modal__label {
    font-size: 75%; line-height: 1.2;
    text-align: center;
    white-space: nowrap;
}
.share-modal__link-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 6px 6px 12px;
    border: 1px solid #d0d0d5; border-radius: 99px;
    background: #f3f3f5;
}
.share-modal__link-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    color: #2f5f98;
    font-size: 85%;
    border: 0;
    outline: none;
}
.share-modal__copy-btn {
    flex-shrink: 0;
    background: #ffffff;
    padding: 6px 14px;
    font-size: 85%;
    border: 1px solid #bababa; border-radius: 99px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.share-modal__copy-btn:hover {
    background-color: #e3e4e7;
    transform: scale(1.03);
}


/******************** PUBLIC PROFILE ********************/
.library-modal--public_profile {
    min-width: min(80vw, 700px);
    max-width: 80vw;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
    background-color: #fafafa;
}
.library-modal--public_profile .library-modal__title { flex-shrink: 0; }
.library-modal--public_profile .library-modal__actions { flex-shrink: 0; }
.public-profile-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #bababa;
    margin-bottom: 16px;
    flex-shrink: 0;
}
.public-profile-header__avatar img,
.public-profile-header__avatar-placeholder {
    width: 72px; height: 72px;
    flex-shrink: 0;
    background: #e3e4e7;
    border-radius: 50%;
}
.public-profile-header__avatar img { object-fit: cover; }
.public-profile-header__avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8b8b95;
    font-size: 1.75rem;
    font-weight: 600;
}
.public-profile-header__body { flex: 1; min-width: 0; }
.public-profile-header__top {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    align-items: baseline;
}
.public-profile-header__display-name { font-weight: bold; font-size: 110%; }
.public-profile-header__description {
    margin: 6px 0 0 0;
    color: #3f3f47;
    font-size: 90%;
    line-height: 1.4;
}
.public-profile-libraries__title {
    font-size: 110%; font-weight: bold;
    margin: 0 0 8px 0;
}
.public-profile-libraries {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 10px;
}
.public-profile-libraries__list .search-results-library-name {font-size: 120%; }
.public-profile-libraries__list .library-page-actions {
    float: right;
    display: inline-flex;
    justify-content: center; align-items: center;
    margin: 0;
}
.public-profile-libraries__list .search-library-result {
    padding-bottom: 8px;
    border-bottom: 1px solid #c8c8c8;
    margin-bottom: 8px;
}
.public-profile-libraries__list .search-library-result:last-child {
    padding-bottom: 0;
    border-bottom: none;
    margin-bottom: 0;
}


/******************** AI AGENT ********************/
.library-modal--ai_assist { min-width: min(40vw, 500px); max-width: 40vw; background-color: #dadada}

.toggle-chip input { display: none; /* Hide the default checkbox */ }
.toggle-chip .ai-button {
    display: inline-block; width: 70px; height: 20px; padding: 7px;
    background-origin: content-box; background-size: contain; background-position: center; background-repeat: no-repeat;
    background-color: #dadada; opacity: 50%;
    border: 2px solid #bababa; border-radius: 20px;
    margin: 0 3px;
    transition: all 0.2s ease;
}
.toggle-chip input:checked + .ai-button { background-color: #ffffff; opacity: 100%; border-color: #bababa; }
.button_claude { background-image: url('/static/library/img/button_claude.webp'); }
.button_perplexity { background-image: url('/static/library/img/button_perplexity.webp'); }
.button_grok { background-image: url('/static/library/img/button_grok.webp'); }
.button_chatgpt { background-image: url('/static/library/img/button_chatgpt.webp'); }

.site-selection-container input { display: none; }
.site-selection-container input:checked + .site-selection-card { background-color: #ffffff; opacity: 100%; border-color: #bababa; }
.site-selection-card {
    position: relative; width: 90px;
    display: inline-block; vertical-align: top;
    background-color: #dadada; opacity: 50%;
    padding: 3px 4px;
    text-align: center; color: #3f3f47;
    margin: 5px 3px 3px 3px;
    border-radius: 7px;
    box-shadow: 0 1px 2px #00000010, 0 2px 3px #00000030;
    transition: all 0.2s ease;
}
.site-selection-card img { height: 32px; width: 80px; background-color: #ffffff; border: none; }
.site-selection-card div { line-height: 135%; color: #3f3f47; font-size: 80%; }
.site-selection-card div:not(:empty) { margin: 1px; border-top: solid 1px #e3e4e7; }

.library-save-status {
    position: fixed;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1200;
    padding: 8px 16px;
    border-radius: 7px;
    font-size: 90%;
    color: #3f3f47;
    background-color: #ffffff;
    border: 1px solid #bababa;
    box-shadow: 0 1px 2px #00000010, 0 2px 6px #00000030;
    pointer-events: none;
}
.library-save-status[hidden] { display: none; }
.library-save-status--saving { border-color: #bababa; }
.library-save-status--saved { border-color: #6a9a6a; }
.library-save-status--error {
    color: #b00020;
    border-color: #b00020;
    pointer-events: auto;
}


/******************** FLASH MESSAGES ********************/
.flash-messages {
    max-width: min(1400px, 96vw);
    padding: 0.5rem 0 0;
    list-style: none;
    margin: 0 auto;
  }
  .flash-messages__item {
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    border-radius: 6px;
    margin-bottom: 0.5rem;
  }
  .flash-messages__item--success { background: #f5f5f6; color: #56575b; }
  .flash-messages__item--error { background: #fef2f2; color: #991b1b; }
  .flash-messages__item--info,
  .flash-messages__item--debug { background: #eff6ff; color: #1e40af; }
  .flash-messages__item--warning { background: #fffbeb; color: #92400e; }


/******************** HELP ********************/
.library-modal--help {
    display: flex; flex-direction: column;
    box-sizing: border-box;
    min-width: min(92vw, 560px); max-width: min(92vw, 560px); max-height: 80vh;
    background-color: #fafafa;
    padding: 20px 22px;
    margin: 8vh auto auto;
    overflow: hidden;
}
.library-modal--help .library-modal__title { flex-shrink: 0; margin-bottom: 6px; }
.library-modal--help .library-modal__actions { flex-shrink: 0; margin-top: 14px; }
.help-modal__intro {
    flex-shrink: 0;
    color: #3f3f47; font-size: 90%; line-height: 1.4;
    margin: 0 0 14px 0;
}
.help-accordion {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    background-color: #ffffff;
    border: 1px solid #dadada; border-radius: 10px;
}
.help-accordion__item { border-bottom: 1px solid #e3e4e7; }
.help-accordion__item:last-child { border-bottom: none; }
.help-accordion__trigger {
    display: flex;
    align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    list-style: none;
    color: #3f3f47; font-size: 95%; font-weight: 600; line-height: 1.35;
    transition: all 0.2s ease;
}
.help-accordion__trigger::-webkit-details-marker { display: none; }
.help-accordion__trigger::marker { content: ""; }
.help-accordion__trigger:hover { background-color: #f4f4f5; }
.help-accordion__chevron {
    position: relative; top: 3px;
    width: 18px; height: 18px;
    flex-shrink: 0;
    stroke: #8b8b95; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none;
    transition: all 0.2s ease;
}
.help-accordion__item[open] .help-accordion__chevron { transform: rotate(180deg); }
.help-accordion__panel {
    padding: 0 16px 14px 16px;
    color: #3f3f47; font-size: 90%; line-height: 1.45;
}
.help-accordion__panel p { margin: 0; }
.help-accordion__panel svg { color: #3f3f47; width: 11px; height: 11px; flex-shrink: 0; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.help-accordion__panel a { font-style: italic; }


/******************** FOOTER ********************/
.footer {
    width: 100%; bottom: 10px;
    text-align: center; font-size: 90%;
}

.legal-page {
    max-width: 720px;
    padding: 0 1.25rem;
    color: #3f3f47;
    margin: 2rem auto 3rem;
}
.legal-page__title {
    font-size: 150%;
    margin: 0 0 12px 0;
}
.legal-page__intro {
    font-size: 95%;
    line-height: 1.5;
    margin: 0;
}