@import url('colori.css');

/* ── Library browse page ────────────────────────────────────────────────
   Layout: header (fixed) with a centered search box; a main content area
   with the sort capsule (centered), a column-packed grid of effect cards,
   and a centred pagination row at the bottom. Each card is a fixed-aspect
   wipe preview that follows the mouse on hover and click-anywhere
   navigates to /community/library/view/<id> (except the author link). */

:root {
    --library-card-column: 320px;
    --library-card-row-gap: 42px;
    --library-card-column-gap: 36px;
    --library-content-max-width: 1700px;
}

.material-symbols-rounded {
    font-variation-settings: 'FILL' 1;
}

/* Header search styles live in community.css (shared with the View page). */

/* ── Page body ───────────────────────────────────────────────────────── */

.library {
    /* Header is position:fixed. Pad the content under it (+32px breathing room). */
    padding: calc(var(--community-header-height) + 32px) 32px 64px;
    max-width: var(--library-content-max-width);
    margin: 0 auto;
}

/* ── Author profile block ────────────────────────────────────────────── */

/* Pairs with .section (shared card chrome from colori.css) — only the
   inner layout (column flex, centred content) is library-specific. */
.author-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
}

.author-profile__avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background-color: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    font-weight: 600;
    text-transform: uppercase;
    user-select: none;
    margin-bottom: 14px;
    /* Trim the font's half-leading so the initials sit geometrically
       centred in the circle, matching .profile-avatar on the Manage page. */
    line-height: 1;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
}

.author-profile__name {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.3px;
    margin: 0;
    color: var(--text-color);
}

.author-profile__since {
    font-size: 13px;
    color: var(--text-muted);
}

/* ── Toolbar (sort only) ─────────────────────────────────────────────── */

.library-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 20px;
}

.library-toolbar__sort {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.library-toolbar__sort-options {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 9999px;
}

.library-toolbar__sort-option {
    display: inline-flex;
    align-items: center;
    padding: 12px 20px;
    border-radius: 9999px;
    color: var(--text-color);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    transition: color 0.15s ease, background-color 0.15s ease;
}

/* Hover/focus on inactive options: just shift the text colour — lighten
   in light mode (toward muted), brighten in dark mode (toward white). */
.library-toolbar__sort-option:hover,
.library-toolbar__sort-option:focus-visible {
    color: var(--text-muted);
    outline: none;
}

@media (prefers-color-scheme: dark) {
    .library-toolbar__sort-option:hover,
    .library-toolbar__sort-option:focus-visible {
        color: #fff;
    }
}

.library-toolbar__sort-option--active {
    background-color: rgb(96, 96, 96);
    color: #fff;
}

/* Active option's hover keeps the accent fill and white text — only
   inactive options participate in the text-only hover treatment. */
.library-toolbar__sort-option--active:hover,
.library-toolbar__sort-option--active:focus-visible {
    background-color: rgb(96, 96, 96);
    color: #fff;
}

/* ── Card grid — column-packed, not row-aligned ──────────────────────── */

/* CSS multi-column layout flows cards top-to-bottom within each column,
   then wraps to the next column. Each card carries its own bottom margin
   so the vertical gap is uniform inside every column, independent of the
   neighbouring column's tallest card. */
.library-grid {
    column-width: var(--library-card-column);
    column-gap: var(--library-card-column-gap);
}

@media (max-width: 480px) {
    .library {
        padding: calc(var(--community-header-height) + 32px) 16px 48px;
    }
}

.library-card {
    display: block;
    /* break-inside avoids a column splitting a card across boundaries.
       padding-bottom drives the per-column vertical gap. */
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    padding-top: 8px;
    padding-bottom: calc(var(--library-card-row-gap) - 8px);
    cursor: pointer;
}

/* ── Wipe preview ────────────────────────────────────────────────────── */

.library-card__wipe-link {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: 13px;
    overflow: hidden;
    margin-bottom: 10px;
    box-shadow: 0 0 8px rgba(128, 128, 128, 0.2);

    @supports (corner-shape: squircle) {
        border-radius: 24px;
        corner-shape: squircle;
    }
}

.library-card__wipe {
    position: relative;
    width: 100%;
    /* Square-ish 4:3 fallback before the without-image loads; JS overrides
       this with the actual image aspect ratio so the wipe scales to the
       column width with the source aspect preserved. */
    aspect-ratio: 4 / 3;
    overflow: hidden;
    /* Own compositing layer: inside the multi-column grid Safari otherwise
       drops or part-paints the divider on every card but the first. Keep this
       here and not on .library-card, where it blanks the top card of each
       later column. */
    transform: translateZ(0);
    background-color: var(--section-bg);
    user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
}

/* Smooth snap-back: the JS toggles --snap on while the pointer is OUT of
   the preview so the divider/clip-path can transition back to centre
   without the transition fighting active pointer-move updates. */
.library-card__wipe--snap .library-card__divider {
    transition: left 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.library-card__wipe--snap .library-card__img--with,
.library-card__wipe--snap .library-card__img--without {
    transition: clip-path 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.library-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    -webkit-user-drag: none;
}

/* Both halves are masked at the wipe boundary so neither image is drawn
   beneath the other — the seam is a single shared edge, avoiding the
   subpixel mismatch that comes from overlaying one image on top of the
   full other. clip-path values are updated by JS as the wipe moves. */
.library-card__img--without {
    clip-path: inset(0 56% 0 0);
}

.library-card__img--with {
    clip-path: inset(0 0 0 44%);
}

.library-card__label {
    position: absolute;
    top: 10px;
    font-size: 13px;
    font-weight: 500;
    pointer-events: none;
    /* Hidden by default; fades in only while the pointer is over the wipe.
       updateLabels() can override this with --hidden when the divider has
       crossed past the label even mid-hover. */
    opacity: 0;
    transition: opacity 0.25s ease;
    background-color: rgba(from var(--bg-color) r g b / 0.85);
    color: var(--text-color);
    padding: 3px 8px 4px;
    border-radius: 8px;
    backdrop-filter: blur(16px);
    max-width: 45%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.library-card__wipe:hover .library-card__label {
    opacity: 1;
}

/* Beats the hover rule above so the crossing logic still wins inside
   the hovered state. */
.library-card__wipe:hover .library-card__label--hidden {
    opacity: 0;
}

.library-card__label--left {
    left: 10px;
}

.library-card__label--right {
    right: 10px;
}

.library-card__divider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 44%;
    width: 2px;
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.45);
    transform: translateX(-50%);
    pointer-events: none;
}

/* ── Meta row ────────────────────────────────────────────────────────── */

.library-card__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 8px;
}

.library-card__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
}

.library-card__title {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 0 1 auto;
}

.library-card__stats {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    color: var(--text-muted);
}

.library-card__stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
}

.library-card__stat-icon {
    font-size: 16px;
    line-height: 1;
}

.library-card__stat-icon--outline {
    font-variation-settings: 'FILL' 0;
}

.library-card__stat-count {
    line-height: 1;
    margin-bottom: 2px;
}

.library-card__author {
    font-size: 12px;
    color: var(--text-muted);
    opacity: 0.6;
}

.library-card__author-link {
    color: var(--text-color);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    font-weight: 500;
    transition: border-color 0.15s ease;
}

.library-card__author-link:hover,
.library-card__author-link:focus-visible {
    border-bottom-color: currentColor;
    outline: none;
}

/* ── Empty state ─────────────────────────────────────────────────────── */

.library__empty {
    margin: 48px 0;
    text-align: center;
    color: var(--text-muted);
    font-size: 15px;
}

/* ── Pager ───────────────────────────────────────────────────────────── */

.library-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 48px 0 0;
    flex-wrap: wrap;
}

.library-pager__btn,
.library-pager__page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: 10px;
    background-color: transparent;
    color: var(--text-color);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.library-pager__btn .material-symbols-rounded {
    font-size: 20px;
}

.library-pager__btn:hover,
.library-pager__page:hover {
    background-color: var(--section-bg);
    border-color: var(--input-border);
}

.library-pager__page--current {
    background-color: var(--accent);
    color: #fff;
    cursor: default;
}

.library-pager__page--current:hover {
    background-color: var(--accent);
    border-color: transparent;
}

.library-pager__btn--disabled {
    opacity: 0.35;
    pointer-events: none;
}

.library-pager__ellipsis {
    color: var(--text-muted);
    padding: 0 4px;
    user-select: none;
}