/* Clipizo Library additions (since 2026-10-20), loaded by /library/ only after theme.css. The Library's base styles live
   in theme.css (the Library section at its end); rules the Library session adds on its own go here, theme tokens only, so
   a Library release never needs a theme.css ?v change across the site. */

/* Tweak: the numbers in an expression a member can drag or step before copying it. */
.library-num {
    border-bottom: var(--border-hairline) dashed currentColor;
    border-radius: 2px;
    color: var(--color-accent);
    cursor: ew-resize;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}
.library-num:hover,
.library-num:focus-visible,
.library-num.is-dragging { background: var(--color-accent-tint); }
.library-num:focus-visible { outline: var(--focus-width) solid var(--color-accent); outline-offset: 1px; }
.library-num.is-changed { color: var(--color-text); background: var(--color-accent-tint); }

/* The live preview takes the video's place while an expression is tweaked. */
.library-detail-media [hidden] { display: none; }
.library-tweak-canvas { display: block; width: 100%; aspect-ratio: 1; }

/* Script settings: the capitals at the top of a script as fields above its code. */
.library-settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--space-3); }
.library-settings[hidden] { display: none; }
.library-settings > .library-howto, .library-settings .form-group:has(.library-check) { grid-column: 1 / -1; }
.library-settings .form-group { display: grid; align-content: start; }
.library-settings .library-howto { margin: 0; }
/* With a form above it the code box is shorter, so the dialog (and its close button) still fits the screen. */
.library-settings:not([hidden]) + .library-code { max-height: min(14rem, 30dvh); }
.library-check { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; }
.library-check input { width: 18px; height: 18px; margin: 0; }

/* The dialog's close button stays in view when a tall item scrolls: its form sticks to the top of the dialog with no
   height of its own, and the button keeps its place in the top corner. */
.library-detail > form { position: sticky; top: 0; z-index: 2; height: 0; }

/* Likes (2026-10-26): a heart and count in each tile's top-left corner (Copy has the top right; the title and target keep
   their full width) and a Like button in the item window. A liked item's heart and any count always show (the counts help
   people find the best); a heart with nothing yet appears on hover or focus, like Copy, and always on touch screens. Lit
   (filled lime) when the member likes the item. */
.library-like { position: absolute; top: var(--space-2); left: var(--space-2); z-index: 1; display: inline-flex; align-items: center;
    gap: var(--space-1); min-height: 32px; padding: 0 var(--space-2); border: var(--border-hairline) solid var(--color-border);
    border-radius: var(--radius-pill); background: color-mix(in srgb, var(--color-canvas) 82%, transparent); color: var(--color-muted);
    font: var(--weight-semibold) var(--text-label) / 1 var(--font-body); font-variant-numeric: tabular-nums; text-decoration: none; cursor: pointer; }
.library-like .iconizo { width: 16px; height: 16px; }
.library-like:hover, .library-like:focus-visible { border-color: var(--color-accent); color: var(--color-text); }
.library-like[aria-pressed="true"], .library-detail-like[aria-pressed="true"] { color: var(--color-accent); }
.library-like[aria-pressed="true"] .iconizo, .library-detail-like[aria-pressed="true"] .iconizo { fill: currentColor; }
.library-like-count:empty { display: none; }
@media (hover: hover) and (pointer: fine) {
    .library-like { transition: opacity var(--duration-fast) var(--ease-standard); }
    .library-tile:not(:hover):not(:focus-within) .library-like:not([aria-pressed="true"]):has(.library-like-count:empty) { opacity: 0; }
}
.library-detail-like .library-like-count { margin-left: var(--space-1); color: var(--color-muted); }
@media (hover: none), (pointer: coarse) { .library-like { min-height: 40px; } }

@media (forced-colors: active) {
    .library-num { color: LinkText; }
    .library-num.is-changed { color: Highlight; }
}

/* How to use a copy (2026-10-27): right above the item window's Copy, in text colour, so members read it before
   they copy (it sat under the buttons in muted type and people missed it). */
.library-detail-info .library-howto:is([data-howto], [data-field="tip"]) { color: var(--color-text); }

/* Members' names on their shares (owner, 2026-10-27: "show users names on things they upload"): a line under the tile's
   title, and a link to their profile in the item window and the admin's list. */
.library-tile-by { overflow: hidden; color: var(--color-text); font-size: var(--text-label); line-height: var(--leading-heading); text-overflow: ellipsis; white-space: nowrap; }
.library-detail-kicker a, .library-requires-note a { color: var(--color-text); text-decoration: underline; text-decoration-color: var(--color-border-strong); text-underline-offset: 3px; }
.library-detail-kicker a:hover, .library-requires-note a:hover { text-decoration-color: currentColor; }

/* A plugin preset's plugin (owner, 2026-10-29: "have it more noticiabel that it rquires textizo"): a hairline panel right
   under the summary, as the product card frames things: "Requires <plugin>" in red with the plugin's name a link to its
   page (owner, 2026-11-04: "make this red, textizo underlines and takes users to that page"), "Free plugin · Watch the
   video" muted below it, and a plain Get <plugin> button (Copy stays the window's one lime action). Stacks on phones. */
.library-requires { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4); border: var(--border-hairline) solid var(--color-border); border-radius: var(--radius-control); background: var(--color-panel); }
.library-requires > p { display: grid; gap: var(--space-1); margin: 0; color: var(--color-text); line-height: var(--leading-body); }
.library-requires strong { font-weight: var(--weight-semibold); }
.library-requires-note { color: var(--color-muted); font-size: var(--text-small); }
.library-requires-note:not(:has(> :not([hidden]))) { display: none; }
.library-requires-note > :not([hidden]) ~ :not([hidden])::before { content: " · "; color: var(--color-subtle); }
.library-requires .btn { flex: none; }
.library-requires-line { color: var(--color-danger); }
/* What a script needs before it runs, in the same panel, its line orange (owner, 2026-11-09: "show that in orange on the
   page of the script"). */
.library-needs-line { color: var(--color-orange); }
.library-requires-line a, .library-tile-requires a { color: inherit; text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 3px; }
.library-requires-line a:hover, .library-tile-requires a:hover { text-decoration-thickness: 2px; }
/* The same line on a preset's tile ("same on the card from the outside"), in orange as "Studio required" is on
   community plugins (owner, later on 2026-11-04: "Make the requires textizo on the card orange or something. This looks
   like an error right now. Keep it red only inside the card"): drawn over the tile's own line, which keeps its room but
   hides, since the tile is one link and a link can't hold another. Only the plugin's name takes clicks:
   the rest of the line lets them through to the tile, which opens the item. */
.library-tile-target[data-requires-room] { visibility: hidden; }
.library-tile-requires { position: absolute; inset: auto var(--space-3) var(--space-3); margin: 0; overflow: hidden; color: var(--color-orange); font-size: var(--text-label); line-height: var(--leading-heading); text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
.library-tile-requires a { pointer-events: auto; text-underline-offset: 2px; }
.library-tile-requires-status { color: var(--color-muted); }
@media (max-width: 559px) {
    .library-tile-requires { inset: auto var(--space-2) var(--space-2); }
}
@media (max-width: 480px) {
    .library-requires { flex-direction: column; align-items: stretch; }
}

/* Locked items (owner, 2026-10-29: "just put the lock icon and no name for now"): an empty tile with a lock, nothing to
   open, copy or like. */
.library-locked-tile { position: relative; display: grid; place-items: center; aspect-ratio: 1; border: var(--border-control) solid var(--color-border-subtle); border-radius: var(--radius-panel); background: var(--color-canvas); color: var(--color-muted); }
.library-locked-tile .iconizo { --iconizo-size: 28px; }

/* Category chips (owner, 2026-10-29: "make these look less vibe coded"): quiet text filters, not outlined pills with a
   lime fill. The selected one is text colour on a hairline panel, the site's way of showing state; the others are
   muted text that brightens on hover. Overrides theme.css's pill chips. */
.library-chips { gap: var(--space-1); }
.library-chip { padding: 0 var(--space-3); border-color: transparent; border-radius: var(--radius-control); font-weight: var(--weight-medium); }
.library-chip:hover { border-color: transparent; color: var(--color-text); }
.library-chip[aria-pressed="true"] { border-color: var(--color-border); background: var(--color-panel); color: var(--color-text); }
.library-chip[aria-pressed="true"] .library-chip-count { color: var(--color-muted); }
@media (forced-colors: active) {
    .library-chip[aria-pressed="true"] { border-color: Highlight; }
}

/* AI Integration items (2026-10-29): an AI guide or a link has no preview, so its tile and its window show its icon on
   the canvas, the same muted icon as a lock tile; the tile's title sits at the foot as on every tile. */
.library-tile-icon { position: absolute; inset: 0 0 var(--space-8); display: grid; place-items: center; color: var(--color-muted); }
.library-tile-icon .iconizo { --iconizo-size: 40px; }
.library-detail-icon { display: grid; place-items: center; aspect-ratio: 1; color: var(--color-muted); }
.library-detail-icon .iconizo { --iconizo-size: 64px; }

/* Sort (owner, 2026-10-29: "sort by new"): the store's select with its Iconizo chevron, at the chips' compact height
   (32px on fine pointers, 44px on touch), beside the result count. */
.library-sort .store-filter-select { min-height: var(--library-control); padding-block: 0; }