/* Listings: profiles, albums, search and the feed. Album cards, the grid and stream, the pager, selecting and the
   listing viewer. */

/* Image tiles: neutral placeholders only */
.tile .qa { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--ld-radius-sm); background: rgba(255,255,255,.12); border: 0; color: #fff; cursor: pointer; }
.tile .qa:hover { background: var(--ld-green); color: var(--ld-on-green); }
.stream-pic .stream-full { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .25s ease-out; }
.stream-pic.is-full .stream-full { opacity: 1; }
.stream-pic .stream-sheen { display: none; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.07) 50%, transparent 70%); background-size: 250% 100%; animation: ld-sweep 1.4s linear infinite; }
/* The glass sheen runs from the first paint until the full picture is in (or failed: the medium stays). */
.stream-pic[data-full]:not(.is-full):not(.is-failed) .stream-sheen { display: block; }
@media (prefers-reduced-motion: reduce) { .stream-pic .stream-full { transition: none; } .stream-pic .stream-sheen { animation: none; } }

/* ---------- Round 2 fixes ---------- */

/* One album card everywhere. A plain album is one cover; an album with sub-albums shows two sheets stacked
   behind it and a sub-album badge, so the difference reads at a glance. */
.ac { position: relative; display: flex; flex-direction: column; gap: 12px; color: var(--ld-text); }
.ac-cover { position: relative; display: block; aspect-ratio: 4 / 3; }
.ac-has-subs .ac-cover { margin-top: 14px; }
.ac-sheet { position: absolute; border-radius: var(--ld-radius-lg); border: 1px solid var(--ld-line-strong); transition: transform var(--ld-ease-enter); }
.ac-sheet.s1 { left: 16px; right: 16px; top: -14px; height: 40px; background: #20252d; }
.ac-sheet.s2 { left: 8px; right: 8px; top: -7px; height: 40px; background: #191d24; }
.ac:hover .ac-sheet.s1 { transform: translateY(-4px); }
.ac:hover .ac-sheet.s2 { transform: translateY(-2px); }
.ac-img { position: absolute; inset: 0; display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; border-radius: var(--ld-radius-lg); overflow: hidden; background: var(--ld-surface-3); box-shadow: 0 1px 0 rgba(255,255,255,.04) inset; transition: transform var(--ld-ease-enter), box-shadow var(--ld-ease-enter); }
.ac-img > span { transition: transform 400ms ease-out; }
.ac-img > span:first-child { grid-row: span 2; }
.ac:hover .ac-img { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,.4); }
.ac:hover .ac-img > span { transform: scale(1.04); }
/* An album marked NSFW as a whole: its tile's and its page's chip. */
.ac-nsfw { position: absolute; right: 10px; bottom: 10px; z-index: 2; height: 22px; padding: 0 8px; display: inline-flex; align-items: center; border-radius: var(--ld-radius-full); background: rgba(251,176,31,.9); color: #14110a; font: 700 11px/14px var(--font-sans); letter-spacing: .04em; }
.ac-chip { position: absolute; left: 10px; bottom: 10px; z-index: 2; height: 24px; padding: 0 8px; display: inline-flex; align-items: center; gap: 6px; border-radius: var(--ld-radius-full); background: rgba(5,6,8,.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; font: 600 11px/14px var(--font-sans); }
.ac-subs { position: absolute; right: 10px; top: 10px; z-index: 2; height: 26px; padding: 0 9px; display: inline-flex; align-items: center; gap: 6px; border-radius: var(--ld-radius-full); background: var(--ld-green); color: var(--ld-on-green); font: 700 11px/14px var(--font-sans); box-shadow: 0 4px 12px rgba(0,0,0,.35); }
.ac-lock { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border-radius: var(--ld-radius-lg); background: rgba(5,6,8,.6); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--ld-text-strong); font: 600 12px/16px var(--font-sans); }
.ac-meta { display: flex; align-items: center; gap: 8px; padding: 0 2px; }
.ac-meta .t b { font: 700 15px/20px var(--font-display); color: var(--ld-text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-tick { position: absolute; top: 10px; left: 10px; z-index: 4; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--ld-radius-sm); border: 2px solid rgba(255,255,255,.75); background: rgba(5,6,8,.35); color: transparent; }
.ac.is-picked .ac-img { box-shadow: 0 0 0 2px var(--ld-green); }
.ac.is-picked .ac-tick { background: var(--ld-green); border-color: var(--ld-green); color: var(--ld-on-green); animation: ld-pop .3s ease-out; }

/* Pager: one editable box in the middle */
.pager2 { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 36px; }
.pg-box { position: relative; display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px 0 4px; border-radius: var(--ld-radius-md); background: var(--ld-surface-3); border: 1px solid var(--ld-line-strong); cursor: text; transition: border-color var(--ld-ease), box-shadow var(--ld-ease); }
.pg-box input { width: 64px; height: 36px; border: 0; border-radius: var(--ld-radius-sm); background: var(--ld-surface-4); color: var(--ld-text-strong); font: 800 18px/1 var(--font-display); text-align: center; font-variant-numeric: tabular-nums; outline: none; transition: background-color var(--ld-ease); }
.pg-box .pg-of { color: var(--ld-text-muted); font: 600 14px/1 var(--font-sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pg-box:hover { border-color: rgba(255,255,255,.28); }
.pg-box.is-editing, .pg-box:focus-within { border-color: var(--ld-green); box-shadow: var(--ld-focus-ring); }
.pg-box.is-editing input { background: var(--ld-green-surface); color: var(--ld-green); }
.pg-box.is-flash input { animation: ld-pop .45s ease-out; color: var(--ld-green); }
@media (max-width: 760px) { .pager2 { gap: 6px; } .pager2 .pg-step { padding: 0; width: 44px; } .pg-box input { width: 56px; } }

/* Listing viewer: strips above and below, the picture fitted between them; nothing overlaps it */
.lv3 { position: fixed; inset: 0; z-index: 60; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 56px minmax(0, 1fr); grid-template-areas: "top" "stage"; background: #000; animation: ld-fade var(--ld-ease-enter) both; }
.lv3.with-info { grid-template-columns: minmax(0, 1fr) 400px; grid-template-areas: "top top" "stage info"; }
.lv3-stage { grid-area: stage; position: relative; display: flex; align-items: center; justify-content: center; padding: 12px; min-height: 0; }
.lv3-zone { position: absolute; top: 0; bottom: 0; width: 22%; border: 0; background: transparent; padding: 0; cursor: pointer; }
.lv3-zone.left { left: 0; } .lv3-zone.right { right: 0; }

/* Beside a video the arrows keep clear of the player's bar along its bottom. */
.lv3-zone.left .lv3-arrow { left: 16px; } .lv3-zone.right .lv3-arrow { right: 16px; }
.lv3-zone:hover .lv3-arrow, .lv3-zone:focus-visible .lv3-arrow { background: rgba(11,13,16,.85); border-color: rgba(255,255,255,.3); }
.lv3-zone:active .lv3-arrow { transform: translateY(-50%) scale(.92); }
.lv3-zone:focus-visible { outline: none; }
.lv3-zone:focus-visible .lv3-arrow { box-shadow: 0 0 0 2px var(--ld-green); }
@media (max-width: 760px) {
  .lv3 { grid-template-rows: 52px minmax(0, 1fr) 60px; }
  .lv3.with-info { grid-template-columns: minmax(0, 1fr); grid-template-rows: 52px minmax(0, 1fr) minmax(0, 42vh); grid-template-areas: "top" "stage" "info"; }
  .lv3-stage { padding: 0; }
  .lv3-zone { width: 30%; } .lv3-zone.left .lv3-arrow { left: 8px; } .lv3-zone.right .lv3-arrow { right: 8px; }
}

/* Tile caption as its own layer, so the title can be a real link to the file page (a link can't sit inside the tile's link).
   The rest of the caption lets clicks through to the tile. */
.tilecell { position: relative; }
/* A pixel past the tile on three sides: the tile's light bottom edge never shows under the title, at any size. */
.over-out { position: absolute; left: -1px; right: -1px; bottom: -1px; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 28px 10px 10px; border-radius: 0 0 var(--ld-radius-lg) var(--ld-radius-lg); background: linear-gradient(transparent, rgba(5,6,8,.85)); opacity: 0; pointer-events: none; transition: opacity var(--ld-ease), transform var(--ld-ease-enter); }
.tilecell:hover .over-out, .tilecell .tile.is-hover ~ .over-out { opacity: 1; transform: translateY(-2px); }
.over-out .qa { pointer-events: auto; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--ld-radius-sm); background: rgba(255,255,255,.12); border: 0; color: #fff; cursor: pointer; }
.over-out .qa:hover { background: var(--ld-green); color: var(--ld-on-green); }
.qa.lk-heart { color: #ff5c7a; } .qa.lk-heart svg { fill: currentColor; } .qa.lk-heart.is-off { color: #fff; } .qa.lk-heart.is-off svg { fill: none; }
.ac-unlike { position: absolute; right: 2px; bottom: 6px; z-index: 2; background: var(--ld-surface-2); border: 1px solid var(--ld-line); }
.grid-albums.is-liked .ac-meta { padding-right: 40px; }
.selecting .over-out .name { pointer-events: none; }
.marquee { position: absolute; z-index: 6; pointer-events: none; border: 1px solid var(--ld-green); background: rgba(14,229,155,.1); border-radius: 4px; animation: ld-fade .1s ease-out both; transition: opacity .12s ease-out; }
.marquee.is-out { opacity: 0; }
@keyframes ld-row-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* The selected count pops each time it changes */
.selcount { display: inline-block; min-width: 1.2em; text-align: right; color: var(--ld-green); font-variant-numeric: tabular-nums; animation: ld-pop .3s ease-out; }

/* Album picker in the Move and Create album dialogs */
.pickrows { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; padding: 2px; }
.pickrow { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border-radius: var(--ld-radius-md); border: 1px solid var(--ld-line); background: var(--ld-surface-3); color: var(--ld-text); font: 600 14px/18px var(--font-sans); text-align: left; cursor: pointer; transition: border-color var(--ld-ease), background-color var(--ld-ease), transform var(--ld-ease); }
.pickrow:hover { border-color: var(--ld-line-strong); transform: translateX(2px); }
.pickrow[aria-checked="true"] { border-color: var(--ld-green-line); background: var(--ld-green-surface); }
.pickrow .pr-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pickrow:disabled { opacity: .45; cursor: not-allowed; }
.pickrow .pr-t small { font: 400 12px/16px var(--font-sans); color: var(--ld-text-muted); }
.pickrow .pr-ok { color: var(--ld-green); opacity: 0; transform: scale(.6); transition: opacity var(--ld-ease), transform var(--ld-ease); }
.pickrow[aria-checked="true"] .pr-ok { opacity: 1; transform: none; }
.pickrow.is-new { animation: ld-row-in var(--ld-ease-enter) both; }

/* The tag row in a listing's toolbar (profile, album) */
.toolbar .ld-tf { flex: 1 1 400px; }

/* ---------- Phone pass ---------- */
@media (max-width: 760px) {

  /* The tag row scrolls sideways instead of stacking up */
  .toolbar .ld-tf { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .toolbar .ld-tf::-webkit-scrollbar { display: none; }
}

/* ---------- Album page on Lens core ---------- */
.chip-i { width: 13px !important; height: 13px !important; }
.sortmenu { position: relative; }
@media (min-width: 761px) { .hdr-menu > .sortmenu-pop { width: 240px; padding: 6px; } }
.menu-label { flex: 1; min-width: 0; }
.menu-title { padding: 2px 12px 8px; color: var(--ld-text-strong); }
.menu-check { color: var(--ld-green) !important; }

/* Listings: a grid of square tiles (Grid) or the pictures at their own shape (Stream) */
.grid-files { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-albums { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px 20px; }
.ac-img--one { display: block; }
.ac-img--one img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.streamlist { list-style: none; margin: 4px auto 0; padding: 0; max-width: 880px; display: flex; flex-direction: column; gap: 32px; }
.stream-item { display: flex; flex-direction: column; gap: 12px; }
.stream-pic { aspect-ratio: auto; }
/* A tall picture fits the window below the header: narrower, centred, never taller than the screen. */
/* Each picture, with its title, fits the window below the header: as wide as the content allows while its height
   fits (landscape and portrait alike), centred. A hidden title takes no room. */
.streamlist { max-width: none; }
.stream-item { --head: 0px; }
.stream-item.has-title { --head: 52px; }
.streamlist .stream-pic { width: min(100%, calc((100svh - 64px - 16px - var(--head)) * var(--ar, 1))); align-self: center; }
@media (max-width: 760px) { .streamlist .stream-pic { width: min(100%, calc((100svh - 56px - 12px - var(--head)) * var(--ar, 1))); } }
.stream-head { display: flex; align-items: center; gap: 8px; min-height: 32px; min-width: 0; }
/* Each file reads as a section of the album: its title the heading, its description the text. */
.stream-h { flex: 1; min-width: 0; margin: 0; font: 700 24px/30px var(--font-display); color: var(--ld-text-strong); overflow-wrap: anywhere; }
.stream-h .stream-title { color: inherit; text-decoration: none; }
.stream-h .stream-title:hover { color: var(--ld-text-strong); text-decoration: underline; text-underline-offset: 3px; }
.stream-desc { margin: 4px 0 0; max-width: 72ch; font: 400 16px/26px var(--font-sans); color: var(--ld-text-secondary); white-space: pre-line; overflow-wrap: anywhere; }
@media (max-width: 760px) { .stream-h { font-size: 20px; line-height: 26px; } .stream-desc { font-size: 15px; line-height: 24px; } }
.stream-item[data-title-hidden] .stream-title { color: var(--ld-text-muted); font-style: italic; font-weight: 500; }
.stream-tt { margin-left: auto; flex: none; opacity: .6; transition: opacity var(--ld-ease); }
.stream-tt[aria-pressed="true"] .when-shown, .stream-tt[aria-pressed="false"] .when-hidden { display: none; }
.stream-stats { display: flex; align-items: center; gap: 16px; }
.stream-stats > span { display: inline-flex; align-items: center; gap: 6px; }
/* The ♡ is the posts' own button (media.css .ld-feed-act); its edge lines up with the text under the picture. */
.stream-stats .ld-feed-act.like { margin: -6px -6px -6px -10px; }
.listing.is-grid .streamlist, .listing.is-grid .stream-only { display: none; }
.listing.is-stream .grid-files, .listing.is-stream .grid-only { display: none; }
@media (max-width: 1100px) { .grid-files { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid-albums { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .grid-files { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .grid-files .tile { border-radius: var(--ld-radius-sm); }
  .grid-albums { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
  .grid-files .over-out { display: none; }
}
.pg-box.is-error { border-color: var(--ld-danger); animation: ld-shake .3s ease-in-out; }

/* Selecting in a listing */
.listing:not(.is-selecting) .ac .ac-tick:not(.is-on) { opacity: 0; }
.listing.is-selecting .over-out { pointer-events: none; }
.ac.is-picked .ac-img { box-shadow: 0 0 0 2px var(--ld-green); }
.marquee { position: absolute; z-index: 60; border: 1px solid var(--ld-green); background: rgba(14,229,155,.1); border-radius: 4px; pointer-events: none; animation: ld-fade .1s ease-out both; transition: opacity .12s ease-out; }
.marquee.is-out { opacity: 0; }
.tilecell.is-removing { animation: ld-tile-out 320ms ease-in both; pointer-events: none; }
/* The listing viewer. The page under it is locked and keeps its scrollbar's room (lv-gutter), so nothing moves. The
   picture's box (.lv3-frame) is sized by the script from the file's own width and height (Fit | Large); the preview and
   the full file fill it, the full file fading in over the preview once decoded. The scroll box shows no scrollbars: a
   Large picture is dragged to look around. */
html.lv-open { overflow: hidden; }
html.lv-gutter { scrollbar-gutter: stable; }
.lv3.is-closing { animation: ld-fade-out 180ms ease-in both; }
.lv3-stage { padding: 0; overflow: hidden; touch-action: none; }
.lv3.is-large .lv3-stage { touch-action: pan-x pan-y; }
.lv3-scroll { position: absolute; inset: 0; display: flex; overflow: auto; overscroll-behavior: contain; scrollbar-width: none; }
.lv3-scroll::-webkit-scrollbar { display: none; }
.lv3-stage.can-pan .lv3-scroll { cursor: grab; }
.lv3-stage.can-pan .lv3-scroll.is-panning { cursor: grabbing; }
.lv3-slide { flex: none; margin: auto; }
.lv3-frame { position: relative; }
/* A feed post's Open album slide: the album's next pictures blurred under "+N more", the album beside. */
.lv3-end { position: absolute; inset: 0; z-index: 1; overflow: hidden; animation: ld-fade var(--ld-ease-enter) both; }
.lv3-end-mosaic { position: absolute; inset: -16px; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); gap: 3px; filter: blur(12px) saturate(1.1); opacity: .7; }
.lv3-end-mosaic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lv3-end::after { content: ""; position: absolute; inset: 0; background: rgba(8,10,14,.45); }
.lv3-end-in { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; }
.lv3-end-n { font: 800 40px/44px var(--font-display); color: #fff; }
.lv3-end-name { color: rgba(255,255,255,.85); }
.lv3.is-end .lv3-zone { z-index: 2; }
.lv3-album-cover { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--ld-radius-lg); background: var(--ld-surface-3); }
.lv3-album-owner { color: var(--ld-text-strong); }
@media (prefers-reduced-motion: reduce) { .lv3-end { animation: none; } }
.lv3-frame:not([style]) { width: min(90vw, 1000px); aspect-ratio: 4 / 3; }
.lv3-media { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.lv3-frame.is-full .lv3-full { opacity: 1; }
.lv3-frame.is-loading::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.07) 50%, transparent 70%); background-size: 250% 100%; animation: ld-sweep 1.4s linear infinite; }
.lv3.is-large .lv3-zone { pointer-events: none; }
.lv3.is-large .lv3-arrow { pointer-events: auto; cursor: pointer; }
.lv3-pos { max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 8px; }
/* The picture has the whole screen: the bars float over it on a soft shade and fade after a
   pause (data-idle, viewer/idle.ts), with the arrows and the cursor; any move, tap or key brings them back. A video
   keeps its bars apart, clear of the player's own controls. */
.lv3:not(.is-video) { grid-template-rows: minmax(0, 1fr); grid-template-areas: "stage"; }
.lv3.with-info:not(.is-video) { grid-template-areas: "stage info"; }
.lv3:not(.is-video) .lv3-top { position: absolute; left: 0; right: 0; z-index: 5; border: 0; background: transparent; transition: opacity .25s ease-out; }
.lv3.with-info:not(.is-video) .lv3-top { right: 400px; }
.lv3:not(.is-video) .lv3-top { top: 0; height: 64px; background: linear-gradient(rgba(0,0,0,.72), rgba(0,0,0,.35) 60%, transparent); }
.lv3[data-idle]:not(.is-video) .lv3-top, .lv3[data-idle] .lv3-arrow { opacity: 0; pointer-events: none; }
.lv3[data-idle] .lv3-stage, .lv3[data-idle] .lv3-scroll { cursor: none; }
@media (max-width: 760px) {
  .lv3:not(.is-video) .lv3-top { height: 56px; }
  .lv3.with-info:not(.is-video) { grid-template-rows: minmax(0, 1fr) minmax(0, 42vh); grid-template-areas: "stage" "info"; }
  .lv3.with-info:not(.is-video) .lv3-top { right: 0; }
}
.lv3-pop { position: fixed; z-index: 70; min-width: 220px; max-width: min(340px, calc(100vw - 16px)); padding: 6px; }
.lv3-pop .menu-item.is-unavailable { opacity: .5; }
.seg-link { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 16px; border-radius: var(--ld-radius-sm); color: var(--ld-text-muted); font: 600 13px/16px var(--font-sans); }
.seg-link[aria-current="page"] { color: var(--ld-on-green); }
/* The viewer's side zones step aside for a video's controls (their round arrows stay). */
.lv3.is-video .lv3-zone { pointer-events: none; }
.lv3.is-video .lv3-arrow { pointer-events: auto; cursor: pointer; }
/* A video in Stream: the 88 px play button (72 on phones) on the picture; once started, the tile is the player. */
.stream-pic .play { width: 88px !important; height: 88px !important; border: 1px solid var(--ld-line-strong); background: var(--ld-scrim); transition: background-color var(--ld-ease), transform var(--ld-ease); }
.stream-pic .play svg { width: 36px; height: 36px; margin-left: 4px; }
.stream-pic:hover .play { background: color-mix(in srgb, var(--ld-surface-0) 80%, transparent); transform: translate(-50%, -50%) scale(1.06); }
@media (max-width: 760px) { .stream-pic .play { width: 72px !important; height: 72px !important; } .stream-pic .play svg { width: 30px; height: 30px; } }
/* The page search's chip */
.al-found { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; animation: ld-rise .3s ease-out both; }
.al-chip { height: 32px; padding: 0 6px 0 12px; gap: 6px; max-width: 100%; }
.al-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-chip-x { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.al-chip-x:hover { background: rgba(255,255,255,.12); }

/* The listing viewer: one file at a time (the feed) has no bar. */
.lv3-album { display: flex; flex-direction: column; gap: 8px; }
.lv3.is-single.is-video { grid-template-rows: 56px minmax(0, 1fr); grid-template-areas: "top" "stage"; }
.lv3.is-single.is-video.with-info { grid-template-areas: "top top" "stage info"; }
@media (max-width: 760px) {
  .lv3.is-single.is-video.with-info { grid-template-rows: 52px minmax(0, 1fr) minmax(0, 42vh); grid-template-areas: "top" "stage" "info"; }
}
.lv3-info.ld-fd-col { padding: 0; gap: 0; overflow: hidden; }
/* The listing viewer around the column: the picture on black with room around it, the bar (Close, where it is) over the
   picture's top. No blur behind: the picture and the column cover the whole screen. */
.lv3.ld-fd { background: rgba(3, 4, 6, .9); }
.lv3.ld-fd .lv3-stage { background: #000; }
.lv3.ld-fd:not(.is-video) .lv3-top { top: 10px; left: 12px; right: 12px; height: auto; padding: 0; background: none; }
.lv3.ld-fd.with-info:not(.is-video) .lv3-top { right: 412px; }
.lv3.ld-fd .lv3-frame { border-radius: 4px; overflow: hidden; }
.lv3.ld-fd.is-large .lv3-frame { border-radius: 0; }

/* The file page: one framed block under the site header, the same grid */
@media (max-width: 760px) {
  /* The viewer: the picture at 4:5 and the column under it, scrolling as one */
  .lv3.ld-fd, .lv3.ld-fd.with-info, .lv3.ld-fd.with-info:not(.is-video), .lv3.ld-fd.is-single.is-video.with-info { display: block; overflow-y: auto; overscroll-behavior: contain; background: var(--ld-surface-2); }
  .lv3.ld-fd .lv3-stage { position: relative; width: 100%; aspect-ratio: 4 / 5; }
  .lv3.ld-fd:not(.is-video) .lv3-top, .lv3.ld-fd.with-info:not(.is-video) .lv3-top { top: 0; left: 0; right: 0; height: 56px; padding: 0 4px; background: linear-gradient(rgba(0, 0, 0, .55), transparent); }
  .lv3.ld-fd .lv3-arrow { display: none; }
  .lv3.ld-fd .lv3-frame { border-radius: 0; }
  .lv3-info.ld-fd-col { overflow: visible; border-top: 0; animation: none; }
}

/* Endless listings (board 77, frontend/site/endless.ts). The links to the pages either side stay for search engines and
   pages without scripts; with scripts they are out of sight (the next page comes as they near the screen) and show
   only as Try again. The pager under the list moves into Go to page. */
.listing:not(.is-endless) .pg-js { display: none; }
.listing.is-endless .pg-bottom { display: none; }
.listing.is-endless .more-wrap.pg-edge { display: flex; }
.more-wrap.pg-edge { min-height: 44px; }
.more-wrap.pg-edge-prev { margin: 0 0 16px; }
.more-wrap.pg-edge.is-auto > a[data-auto-more]:not([data-auto-more="off"]):not(.is-busy) { opacity: 0; pointer-events: none; }
.more-wrap.pg-edge.is-auto > a.is-busy { border-color: transparent; background: none; color: var(--ld-text-muted); }
/* Its row: under the site header on wider screens; on phones it slides away with the tab strip and comes back with it. */
.lx-bar.toolbar { position: sticky; top: 64px; scroll-margin-top: 64px; z-index: 8; padding: 10px 0; background: rgba(11,13,19,.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.lx-tools { display: flex; flex: none; align-items: center; gap: 8px; }
.lx-tools .btn.ip { height: 36px; min-height: 36px; }
/* The album's row is the taller toolbar's: the Page button matches its Sort and Select. */
.lx-bar.toolbar .pg-jump { height: 40px; }
.lx-bar.toolbar .lx-tools { margin-left: auto; }
.pg-jump { height: 36px; padding: 0 10px 0 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pg-jump[aria-expanded="true"] { border-color: var(--ld-green); }
.pg-jump .muted { font-weight: 500; }
.pg-jump .pg-short { display: none; }
.hdr-menu > .pg-pop { width: max-content; max-width: calc(100vw - 32px); padding: 14px; }
.pg-pop-body { display: flex; flex-direction: column; gap: 10px; }
.pg-pop-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.pg-pop .pager2 { margin-top: 0; }
.pg-pop:focus { outline: none; }
.pg-end .btn { margin-top: 8px; }
@media (max-width: 760px) {
  .lx-bar.toolbar { top: 56px; scroll-margin-top: 56px; }
  .lx-bar { transition: transform .22s ease-out; }
  :root.is-tabbar-off .lx-bar.is-stuck { transform: translateY(calc(-100% - 56px)); }
  .pg-jump .pg-long { display: none; }
  .pg-jump .pg-short { display: inline; }
  .hdr-menu > .pg-pop { width: auto; max-width: none; padding: 0 16px 28px; }
  .pg-pop .handle { margin-bottom: 12px; }
  /* Icons alone, so the row never wraps (each keeps its name for screen readers). */
  .lx-tools { gap: 6px; }
  .lx-tools .sortmenu .select span, .lx-tools .sortmenu .select svg:last-child, .lx-tools .btn.ip > span, .lx-tools .pg-jump > svg:last-child { display: none; }
  .lx-tools .sortmenu .select, .lx-tools .btn.ip { width: 36px; min-width: 36px !important; height: 36px; padding: 0; justify-content: center; }
  .lx-tools .pg-jump { gap: 4px; padding: 0 8px; }
  .lx-bar.toolbar { row-gap: 8px; }
  .lx-bar.toolbar .lx-tools .select, .lx-bar.toolbar .lx-tools .btn.ip, .lx-bar.toolbar .pg-jump { height: 40px; width: auto; min-width: 40px !important; }
}
@media (prefers-reduced-motion: reduce) { .lx-bar { transition: none; } }
/* A share link of picked files, /s/<code> (pages/share-set.html.twig). */
.ld-ss { padding-top: 40px; padding-bottom: 96px; display: flex; flex-direction: column; gap: 20px; }
.ld-ss-head { display: flex; flex-direction: column; gap: 6px; }
.ld-ss-own { display: flex; gap: 8px; align-items: flex-start; margin-top: 6px; }
.ld-ss-own svg { flex: none; margin-top: 2px; }
/* While earlier pages load by themselves, the hidden Previous page holds no room (a hairline is enough for the
   watcher that loads them when scrolled up to) */
.more-wrap.pg-edge-prev.is-auto:not(:has(> a.is-busy)) { min-height: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; }

/* Post covers (the profile's Posts tab, Recently liked's Posts, search's posts): square covers, 4 a row on a computer, 3 edge to edge on a phone */
.grid-posts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pt-tile { border-radius: var(--ld-radius-md); }
.pt-tile:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ld-green); }
.pt-badges { position: absolute; top: 8px; right: 8px; z-index: 2; display: flex; gap: 4px; pointer-events: none; }
.pt-badge { height: 24px; min-width: 24px; padding: 0 7px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; border-radius: var(--ld-radius-full); background: rgba(5,6,8,.62); color: #fff; font: 600 11px/14px var(--font-sans); font-variant-numeric: tabular-nums; }
.pt-badge svg { width: 13px; height: 13px; }
.pt-hover { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 18px; background: rgba(5,6,8,.45); color: #fff; font: 700 14px/18px var(--font-sans); opacity: 0; pointer-events: none; transition: opacity 150ms ease-out; }
.pt-hover > span { display: inline-flex; align-items: center; gap: 6px; }
.pt-hover svg { fill: #fff; stroke: #fff; }
.pt-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 20px 10px 8px; background: linear-gradient(0deg, rgba(5,6,8,.7), transparent); color: #fff; font: 500 12px/16px var(--font-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.pt-liked { margin: 6px 2px 0; }
@media (hover: hover) and (pointer: fine) { .pt-tile:hover .pt-hover, .pt-tile:focus-visible .pt-hover { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pt-hover { transition: none; } }
@media (max-width: 760px) {
  .grid-posts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; margin: 0 -16px; }
  .grid-posts .pt-tile { border-radius: 0; }
  .grid-posts .pt-tile:hover, .grid-posts .tilecell:hover > .pt-tile { transform: none; box-shadow: none; }
  .pt-badges { top: 5px; right: 5px; }
  .pt-badge { height: 20px; min-width: 20px; padding: 0 5px; }
  .pt-cap { display: none; }
  .pt-liked { margin: 4px 6px 8px; font-size: 12px; }
}