/* What the pages that show files share: the file and post pages, the feed, profiles, albums and search. Tiles,
   the column beside a file, the video player, comments, share links and the feed's cards. */

.tile .ph::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 1.5px solid rgba(255,255,255,.14); box-shadow: inset 0 0 0 10px rgba(255,255,255,.03); }
.tile.is-loading .ph { display: none; }

/* NSFW notice */
.nsfwbar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--ld-radius-lg); background: rgba(251,176,31,.08); border: 1px solid rgba(251,176,31,.35); color: var(--ld-text); flex-wrap: wrap; }
.stage-top { display: flex; align-items: center; gap: 8px; padding: 12px 16px; }
li.has-menu { position: relative; z-index: 20; }
.lv3-top { grid-area: top; display: flex; align-items: center; gap: 12px; padding: 0 12px; background: var(--ld-surface-1); border-bottom: 1px solid var(--ld-line); }

/* Beside a video the arrows keep clear of the player's bar along its bottom. */

.lv3-arrow { position: absolute; top: 50%; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(255,255,255,.16); background: rgba(11,13,16,.6); color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transform: translateY(-50%); transition: background-color .15s ease-out, transform .15s ease-out, opacity .15s ease-out; }
.lv3-info { grid-area: info; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 14px; background: var(--ld-surface-2); border-left: 1px solid var(--ld-line); animation: ld-panel-in var(--ld-ease-enter) both; }
@media (max-width: 760px) {
  .lv3-arrow { width: 40px; height: 40px; }
  .lv3-info { border-left: 0; border-top: 1px solid var(--ld-line); animation: ld-rise var(--ld-ease-enter) both; }
}

/* ---------- Phone pass ---------- */
@media (max-width: 760px) {
  .pf-tabs .tab .count { font: 700 15px/20px var(--font-sans); color: var(--ld-text-secondary); }
  .pf-tb .btn.ip { width: 36px; min-width: 36px !important; height: 36px; min-height: 36px; }
}
.es-fail { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--ld-radius-lg); border: 1px solid rgba(251,176,31,.3); background: rgba(251,176,31,.05); }
@media (max-width: 760px) { .es-fail { flex-wrap: wrap; } }
.viewer.is-wide .ld-fd-col { display: none; }

/* On a computer the picture has the height below the site header: the stage's bar floats over it
   on a soft shade and fades after a pause with the arrows (data-idle, viewer/idle.ts). Phones keep the bar above. */
@media (min-width: 761px) {
  .stage-top { position: absolute; top: 0; left: 0; right: 0; z-index: 4; padding: 12px 16px 24px; background: linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.3) 60%, transparent); transition: opacity .25s ease-out; }
  .stage[data-idle] .stage-top, .stage[data-idle] .stage-arrow .lv3-arrow { opacity: 0; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) { .stage-top { transition: none; } }
.stage-img .pic-box.is-loading::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; 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; }

/* NSFW pictures are blurred only where the site's Blur NSFW setting is on (html.nsfw-blur). */
@media (max-width: 760px) {
  .stage-top { padding: 8px 12px; }
}
.stage-back { min-width: 0; max-width: 40%; }
.stage-back { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-flex; }
@media (max-width: 760px) { .stage-back { max-width: 55%; } }
.tile > img.ph { width: 100%; height: 100%; object-fit: cover; }
.tile .ph::after { display: none; }
.stream-stats .link { margin-left: auto; }
.lv3-full { opacity: 0; transition: opacity .2s ease-out; }
.lv3-arrow { transition: background-color .15s ease-out, transform .15s ease-out, opacity .25s ease-out; }
@media (prefers-reduced-motion: reduce) { .lv3-top, .lv3-arrow { transition: none; } }
/* Fit | Large, in the listing viewer's bar and on the file page: one button, each press switches (the old viewers'
   toggle), on Grid | Stream's segmented look. */
.seg.zoomseg { padding: 3px; cursor: pointer; font: inherit; }
.zoomseg .thumb { top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); }
.zoomseg .seg-l { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 14px; color: var(--ld-text-muted); font: 600 13px/16px var(--font-sans); transition: color var(--ld-ease-enter); }
.zoomseg:hover .seg-l { color: var(--ld-text); }
.zoomseg:not(.is-right) .seg-l:nth-child(2), .zoomseg.is-right .seg-l:nth-child(3) { color: var(--ld-on-green); }
.zoomseg:focus-visible { outline: 2px solid var(--ld-green); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .lv3-frame.is-loading::after, .stage-img .pic-box.is-loading::after { animation: none; background-position: 50% 0; }
  .lv3-full, .zoomseg .thumb { transition: none; }
}
.pf-cover .cover-tools .btn { background: rgba(15,18,22,.72); backdrop-filter: blur(10px); }
@media (max-width: 760px) {
  .pf-act .btn:not(.btn-primary) { font-size: 0; gap: 0; width: 44px; min-width: 44px; padding: 0; }
}
.fl-otd[hidden], .fl-otd-year[hidden] { display: none; }
.fl-otd-grid .tile { position: relative; display: block; aspect-ratio: 1; border-radius: var(--ld-radius-md); overflow: hidden; }
/* The feed's cards (ld-feed-card) */
.ld-feed-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 28px; }
.ld-feed-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.ld-feed-why { display: flex; align-items: center; gap: 6px; margin: 0; padding: 12px 16px 0; font: 500 12px/16px var(--font-sans); color: var(--ld-text-secondary); }
.ld-spark { color: var(--ld-green); }
.ld-feed-owner { display: flex; align-items: center; gap: 12px; padding: 12px 8px 12px 16px; position: relative; }
.ld-feed-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ld-feed-name { align-self: flex-start; max-width: 100%; display: inline-flex; align-items: center; gap: 6px; color: var(--ld-text-strong); font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-feed-line { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-feed-owner .btn-icon { width: 44px; }
.ld-feed-menu { position: absolute; z-index: 30; right: 8px; top: calc(100% - 4px); min-width: 200px; padding: 6px; display: flex; flex-direction: column; }
.ld-feed-menu[hidden] { display: none; }
:is(.ld-feed-card, .ld-pp-carousel) .ld-feed-media { aspect-ratio: 4 / 5; border-radius: 0; }
:is(.ld-feed-card, .ld-pp-carousel) .ld-feed-media:hover { transform: none; box-shadow: none; }
:is(.ld-feed-card, .ld-pp-carousel) .ld-feed-media .ph { width: 100%; height: 100%; object-fit: cover; }
.ld-feed-acts { display: flex; align-items: center; gap: 4px; padding: 4px 8px 0; }
.ld-feed-act { display: inline-flex; align-items: center; gap: 6px; min-width: 44px; height: 44px; padding: 0 10px; border: 0; border-radius: var(--ld-radius-md); background: transparent; color: var(--ld-text); font: 600 14px/1 var(--font-sans); cursor: pointer; text-decoration: none; }
.ld-feed-act:hover { background: var(--ld-fill-hover); color: var(--ld-text-strong); }
.ld-feed-act.like.is-on { color: #ff5d7a; }
.ld-feed-act.like.is-on svg { fill: currentColor; animation: ld-like-pop 200ms cubic-bezier(.3, 1.5, .5, 1) both; }
.ld-feed-act { transition: background-color 150ms ease-out, color 150ms ease-out; font-variant-numeric: tabular-nums; }
.ld-feed-act > svg { width: 22px; height: 22px; stroke-width: 2; }
.ld-feed-act:focus-visible { outline: none; box-shadow: var(--ld-focus-ring); }
.ld-feed-act .num:empty { display: none; }
@keyframes ld-like-pop { 0% { transform: scale(1); } 50% { transform: scale(1.12); } 100% { transform: scale(1); } }
/* Repost: green while on; a press turns the icon half round with the like's pop (the shape is the same after 180°), undo turns it back. Never on first paint (is-quiet). */
.ld-feed-act.repost.is-on { color: var(--ld-green); }
.ld-feed-act.repost > svg { animation: ld-repost-back 300ms ease-out both; }
.ld-feed-act.repost.is-on > svg { animation: ld-repost-go 260ms cubic-bezier(.3, 1.5, .5, 1) both; }
.ld-feed-act.repost.is-quiet > svg { animation: none; }
.ld-feed-act[disabled] { opacity: .45; cursor: default; }
.ld-feed-act[disabled]:hover { background: transparent; color: var(--ld-text); }
@keyframes ld-repost-go { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(100deg) scale(1.12); } 100% { transform: rotate(180deg) scale(1); } }
@keyframes ld-repost-back { 0% { transform: rotate(180deg); } 100% { transform: rotate(0); } }
/* "↻ mira reposted" over a card the members you follow reposted. */
.ld-feed-repost { display: flex; align-items: center; gap: 6px; margin: 0; padding: 10px 12px 0 16px; font: 600 12.5px/16px var(--font-sans); color: var(--ld-text-secondary); }
.ld-feed-repost > svg { width: 14px; height: 14px; flex: none; color: var(--ld-green); }
.ld-feed-repost a { color: var(--ld-text-strong); text-decoration: none; }
.ld-feed-repost a:hover { text-decoration: underline; }
/* The member's own new post at the top of their feed: a green line naming whom it went to */
.ld-feed-mine { display: flex; align-items: center; gap: 6px; margin: 0; padding: 12px 16px 0; font: 600 12px/16px var(--font-sans); color: var(--ld-green); }
.ld-feed-mine > svg { width: 14px; height: 14px; flex: none; }
@media (prefers-reduced-motion: reduce) { .ld-feed-act { transition: none; } .ld-feed-act.like.is-on svg { animation: none; } .ld-feed-act.repost > svg, .ld-feed-act.repost.is-on > svg { animation: none; } }
.ld-feed-text { display: flex; flex-direction: column; gap: 4px; padding: 4px 16px 16px; }
.ld-feed-title { color: var(--ld-text-strong); font-weight: 600; text-decoration: none; }
/* Under the actions (D-185 addendum): "Liked by" with the liker's 20px picture; the caption led by the owner's name, on
   two lines with "more"; the time with the album on a day post. A card without a caption keeps the line hidden. */
.ld-feed-likedby { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--ld-text); }
.ld-feed-likedby img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; flex: none; }
.ld-feed-likedby a, .ld-feed-capby a, .ld-post-time a { color: inherit; text-decoration: none; }
.ld-feed-likedby a:hover, .ld-feed-capby a:hover, .ld-post-time a:hover { text-decoration: underline; }
.ld-feed-capby { color: var(--ld-text-strong); font-weight: 600; }
.ld-post-cap.is-two:has(> .ld-post-cap-text > [data-post-caption][hidden]) { display: none; }
.ld-post-cap.is-two:not(.is-open) { display: block; }
.ld-post-cap.is-two:not(.is-open) .ld-post-cap-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; overflow-wrap: anywhere; }
/* The cards' Follow (and the suggested accounts'): 28px tall, a 44px target around it. */
.btn-sm.follow, .ld-feed-owner a.btn-sm { position: relative; height: 28px; min-height: 28px; padding: 0 10px; }
.btn-sm.follow::after, .ld-feed-owner a.btn-sm::after { content: ''; position: absolute; inset: -8px -2px; }
/* The caption (as Instagram's): the title and description on one line, cut with "… more"; open, it wraps in full. */
.ld-post-cap { display: flex; align-items: baseline; gap: 4px; margin: 0; color: var(--ld-text); }
.ld-post-cap-text { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-post-cap.is-open { display: block; }
.ld-post-cap.is-open .ld-post-cap-text { white-space: pre-line; overflow-wrap: anywhere; }
.ld-post-more { flex: none; padding: 0; border: 0; background: none; color: var(--ld-text-secondary); font: inherit; cursor: pointer; }
.ld-post-more[hidden] { display: none; }
.ld-post-more:hover { color: var(--ld-text-strong); }
/* "2 adult pictures hidden" under the title (partials/site/post-hidden.html.twig) */
.ld-post-hidden { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; }
.ld-post-hidden svg { flex: none; }
/* A post's views under its actions, shown to its owner (partials/site/post-views.html.twig). */
.ld-post-views { display: flex; align-items: center; gap: 6px; margin: 0; }
.ld-post-views svg { flex: none; }
.ld-fd-views { flex: none; padding: 0 16px 10px; }
/* A post's slides: one track that scrolls and snaps, no slider library. A computer has the arrows
   always; a phone swipes, the next slide peeking at the edge. Slides move in 220 ms (feed-posts.ts), at once with reduced
   motion. Pictures past the first wait for their turn (data-src). */
.ld-post-media { position: relative; aspect-ratio: var(--ld-frame, 0.8); background: var(--ld-surface-3); }
.ld-post-track { position: absolute; inset: 0; display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ld-post-track::-webkit-scrollbar { display: none; }
.ld-post-track.is-gliding { scroll-snap-type: none; }
.ld-post-slide { position: relative; flex: 0 0 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; }
:is(.ld-feed-card, .ld-pp-carousel) .ld-post-slide .ld-feed-media { position: absolute; inset: 0; aspect-ratio: auto; }
.ld-post-slide .ld-feed-media img:not([src]) { visibility: hidden; }
.ld-post-slide .ld-feed-media:has(img:not([src]))::before, .ld-post-slide .ld-feed-media.is-loading::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, var(--ld-surface-3) 30%, var(--ld-surface-4) 50%, var(--ld-surface-3) 70%); background-size: 300% 100%; animation: ld-post-shim 1.2s linear infinite; }
@keyframes ld-post-shim { from { background-position: 100% 0; } to { background-position: 0 0; } }
.ld-post-count { position: absolute; top: 12px; right: 12px; z-index: 3; height: 26px; padding: 0 10px; display: inline-flex; align-items: center; border-radius: var(--ld-radius-full); background: rgba(5,6,8,.62); color: #fff; font: 600 12px/16px var(--font-sans); font-variant-numeric: tabular-nums; pointer-events: none; }
.ld-post-count[hidden] { display: none; }
/* A post that grew since the member saw it: "5 new" over its new pictures, which lead the slides. */
.ld-post-new { position: absolute; top: 12px; left: 12px; z-index: 3; height: 26px; padding: 0 10px; display: inline-flex; align-items: center; border: 1.5px solid var(--ld-green); border-radius: var(--ld-radius-full); background: rgba(11,13,19,.7); color: var(--ld-green); font: 700 12px/16px var(--font-sans); font-variant-numeric: tabular-nums; pointer-events: none; animation: ld-post-new 220ms ease-out both; }
.ld-post-new[hidden] { display: none; }
@keyframes ld-post-new { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
.ld-post-arrow { position: absolute; top: 50%; z-index: 3; width: 44px; height: 44px; margin-top: -22px; padding: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: rgba(11,13,16,.62); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 150ms ease-out, opacity 150ms ease-out; }
.ld-post-arrow:hover { background: rgba(11,13,16,.85); }
.ld-post-arrow:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ld-green); }
.ld-post-arrow[disabled] { opacity: .35; cursor: default; }
.ld-post-arrow.prev { left: 12px; } .ld-post-arrow.next { right: 12px; }
.ld-post-dots { display: flex; justify-content: center; align-items: center; gap: 6px; height: 16px; padding-top: 8px; }
.ld-post-dots i { display: block; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--ld-line-strong); transform: translateX(var(--ld-dots-x, 0px)) scale(var(--ld-dot, 1)); transition: transform 200ms ease-out, background-color 200ms ease-out; }
.ld-post-dots i.on { background: var(--ld-green); }
/* Over five slides: a window of seven slots (a small dot, five full, a small dot) the dots slide through, one slot of
   12px per step, the window's first full dot (--ld-dots-from, feed-posts.ts) in the second slot. */
.ld-post-dots.is-window { justify-content: flex-start; width: 78px; margin: 0 auto; overflow: hidden; --ld-dots-x: calc((1 - var(--ld-dots-from, 0)) * 12px); }
.ld-post-dots i.edge { --ld-dot: .5; }
.ld-post-dots i.out { --ld-dot: 0; }
.ld-post-dots.is-fresh i.on { background: var(--ld-text-strong); }
.ld-post-dots i.new { background: var(--ld-green-line); }
.ld-post-dots i.on.new { background: var(--ld-green); }
/* The last slide of a post over 20: the album's next pictures, blurred, under "+N more" and Open album. */
.ld-post-end { background: var(--ld-surface-2); }
.ld-post-mosaic { position: absolute; inset: -12px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 3px; filter: blur(10px) saturate(1.1); opacity: .7; }
.ld-post-mosaic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ld-post-mosaic img:not([src]) { visibility: hidden; }
.ld-post-end::after { content: ""; position: absolute; inset: 0; background: rgba(8,10,14,.45); }
.ld-post-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; }
.ld-post-end-n { font: 800 36px/40px var(--font-display); color: #fff; }
.ld-post-end-name { color: rgba(255,255,255,.85); }
.ld-post-talk { display: flex; flex-direction: column; gap: 4px; }
.ld-post-talk[hidden] { display: none; }
/* Phones: one slide at a time, and posts run edge to edge with no card frame, like Instagram. */
@media (max-width: 760px) {
  .ld-post-slide { flex-basis: 100%; border-radius: 0; }
  .ld-post-arrow { display: none; }
  .ld-feed-list { gap: 16px; }
  .ld-feed-card { margin: 0 -16px; border: 0; border-radius: 0; background: transparent; }
}
@media (prefers-reduced-motion: reduce) { .ld-post-dots i, .ld-post-arrow { transition: none; } .ld-post-new { animation: none; } .ld-post-slide .ld-feed-media::before { animation: none; } }

/* ---------- The video player (frontend/site/viewer/player.ts) ----------
   Our controls over a video's box, wherever a video plays: the listing viewer, the file page and a Stream tile. A
   floating bar inside the picture (track, play, time, sound, More, full screen), the big play button while paused, a
   green ring while waiting, a thin green line while the bar is hidden. */
.ld-pl { position: absolute; inset: 0; z-index: 2; overflow: hidden; color: var(--ld-text-strong); font: var(--ld-type-label); -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.ld-pl button { font: inherit; }
.ld-pl-hit { position: absolute; inset: 0; cursor: pointer; }
.ld-pl:not(.is-shown):not(.is-paused) .ld-pl-hit { cursor: none; }
.ld-pl-big { position: absolute; left: 50%; top: 50%; display: none; align-items: center; justify-content: center; width: 88px; height: 88px; margin: -44px 0 0 -44px; padding: 0; border: 1px solid var(--ld-line-strong); border-radius: var(--ld-radius-full); background: var(--ld-scrim); color: var(--ld-text-strong); cursor: pointer; transition: background-color var(--ld-ease), transform var(--ld-ease); }
.ld-pl-big svg { width: 36px; height: 36px; margin-left: 4px; }
.ld-pl-big:hover { background-color: color-mix(in srgb, var(--ld-surface-0) 78%, transparent); transform: scale(1.06); }
.ld-pl.is-paused:not(.is-starting) .ld-pl-big { display: flex; }
.ld-pl.is-tiny .ld-pl-big { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
.ld-pl-spin { position: absolute; left: 50%; top: 50%; display: none; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: var(--ld-radius-full); background: var(--ld-scrim); pointer-events: none; }
.ld-pl-spin::after { content: ""; position: absolute; inset: 14px; border: 3px solid color-mix(in srgb, var(--ld-text-strong) 16%, transparent); border-top-color: var(--ld-green); border-radius: 50%; animation: ld-spin .8s linear infinite; }
.ld-pl.is-waiting:not(.is-paused) .ld-pl-spin, .ld-pl.is-starting .ld-pl-spin { display: block; }
.ld-pl-seek { position: absolute; top: 0; bottom: 0; width: 38%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: color-mix(in srgb, var(--ld-text-strong) 10%, transparent); opacity: 0; pointer-events: none; transition: opacity var(--ld-ease-enter); }
.ld-pl-seek.is-back { left: 0; border-radius: 0 50% 50% 0 / 0 50% 50% 0; }
.ld-pl-seek.is-forward { right: 0; border-radius: 50% 0 0 50% / 50% 0 0 50%; }
.ld-pl-seek.is-on { opacity: 1; }
.ld-pl-seek svg { width: 28px; height: 28px; }
.ld-pl-line { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: color-mix(in srgb, var(--ld-text-strong) 16%, transparent); pointer-events: none; transition: opacity var(--ld-ease-enter); }
.ld-pl-line i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ld-green); }
.ld-pl.is-shown .ld-pl-line, .ld-pl.is-paused .ld-pl-line { opacity: 0; }
.ld-pl-bar { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; border: 1px solid var(--ld-line); border-radius: var(--ld-radius-lg); background: color-mix(in srgb, var(--ld-surface-0) 78%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity var(--ld-ease-enter), transform var(--ld-ease-enter), visibility 0s linear .25s; }
.ld-pl.is-shown .ld-pl-bar { opacity: 1; visibility: visible; transform: none; transition: opacity var(--ld-ease), transform var(--ld-ease), visibility 0s; }
.ld-pl-row { display: flex; align-items: center; gap: 4px; height: 40px; }
.ld-pl-btn { display: flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--ld-radius-md); background: none; color: var(--ld-text-strong); cursor: pointer; }
.ld-pl-btn:hover, .ld-pl-btn[aria-expanded="true"] { background: color-mix(in srgb, var(--ld-text-strong) 10%, transparent); }
.ld-pl-btn svg { width: 20px; height: 20px; }
.ld-pl :is(button, [role="slider"]):focus-visible { outline: 2px solid var(--ld-green); outline-offset: 2px; }
.ld-pl-time { padding: 0 8px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ld-pl-time b { font-weight: 600; }
.ld-pl-time span { color: var(--ld-text-muted); }
.ld-pl-sp { flex: 1; }
.ld-pl-track { position: relative; height: 16px; margin: 0 6px; cursor: pointer; touch-action: none; }
.ld-pl-track :is(.ld-pl-base, .ld-pl-buf, .ld-pl-played) { position: absolute; left: 0; top: 6px; height: 4px; border-radius: var(--ld-radius-full); transition: top var(--ld-ease), height var(--ld-ease); }
.ld-pl-base { right: 0; background: color-mix(in srgb, var(--ld-text-strong) 16%, transparent); }
.ld-pl-buf { width: 0; background: color-mix(in srgb, var(--ld-text-strong) 34%, transparent); }
.ld-pl-played { width: 0; background: var(--ld-green); }
.ld-pl-track:is(.is-hover, .is-drag, :focus-visible) :is(.ld-pl-base, .ld-pl-buf, .ld-pl-played) { top: 5px; height: 6px; }
.ld-pl-thumb { position: absolute; top: 8px; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--ld-text-strong); box-shadow: var(--ld-focus-ring); opacity: 0; transition: opacity var(--ld-ease); pointer-events: none; }
.ld-pl-track:is(.is-hover, .is-drag, :focus-visible) .ld-pl-thumb { opacity: 1; }
.ld-pl-hl { position: absolute; top: 2px; display: none; width: 2px; height: 12px; margin-left: -1px; border-radius: var(--ld-radius-full); background: var(--ld-text-strong); pointer-events: none; }
.ld-pl-tip { position: absolute; bottom: 22px; display: none; padding: 4px 8px; border: 1px solid var(--ld-line-strong); border-radius: var(--ld-radius-sm); background: var(--ld-surface-3); font: 600 12px/16px var(--font-sans); font-variant-numeric: tabular-nums; white-space: nowrap; transform: translateX(-50%); pointer-events: none; }
.ld-pl-track.is-hover :is(.ld-pl-hl, .ld-pl-tip) { display: block; }
.ld-pl-vol { display: flex; flex-direction: row-reverse; align-items: center; }
.ld-pl-slider { position: relative; width: 0; height: 16px; overflow: hidden; cursor: pointer; touch-action: none; transition: width var(--ld-ease), margin var(--ld-ease); }
.ld-pl-vol:is(:hover, :focus-within) .ld-pl-slider, .ld-pl-slider.is-drag { width: 84px; margin: 0 4px 0 8px; overflow: visible; }
.ld-pl-vbase, .ld-pl-vfill { position: absolute; left: 0; top: 6px; height: 4px; border-radius: var(--ld-radius-full); }
.ld-pl-vbase { right: 0; background: color-mix(in srgb, var(--ld-text-strong) 16%, transparent); }
.ld-pl-vfill { background: var(--ld-green); }
.ld-pl-knob { position: absolute; top: 8px; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--ld-text-strong); }
.ld-pl.is-soft [data-pl="mute"] path:nth-child(3) { display: none; }
.ld-pl-menu { position: absolute; right: 8px; bottom: calc(100% + 8px); min-width: 220px; max-height: 60vh; overflow: auto; padding: 6px; border: 1px solid var(--ld-line-strong); border-radius: var(--ld-radius-lg); background: var(--ld-surface-2); box-shadow: var(--ld-shadow-pop); animation: ld-pop-in var(--ld-ease-enter) both; }
.ld-pl.has-menu { overflow: visible; }
.ld-pl-mi { display: flex; align-items: center; gap: 10px; width: 100%; height: 40px; padding: 0 10px; border: 0; border-radius: var(--ld-radius-md); background: none; color: var(--ld-text); text-align: left; cursor: pointer; }
.ld-pl-mi:hover, .ld-pl-mi.is-on { background: var(--ld-surface-3); }
.ld-pl-mi svg { width: 18px; height: 18px; flex: none; color: var(--ld-text-secondary); }
.ld-pl-mv, .ld-pl-check { margin-left: auto; color: var(--ld-text-muted); display: flex; }
.ld-pl-sw { position: relative; flex: none; width: 34px; height: 20px; margin-left: auto; border-radius: var(--ld-radius-full); background: var(--ld-surface-4); box-shadow: inset 0 0 0 1px var(--ld-line-strong); }
.ld-pl-sw::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--ld-text-secondary); transition: left var(--ld-ease); }
.ld-pl-mi[aria-checked="true"] .ld-pl-sw { background: var(--ld-green); box-shadow: none; }
.ld-pl-mi[aria-checked="true"] .ld-pl-sw::after { left: 16px; background: var(--ld-on-green); }
.ld-pl-sep { display: block; height: 1px; margin: 6px 4px; background: var(--ld-line); }
.ld-pl.is-narrow .ld-pl-time span, .ld-pl.is-tiny [data-pl="more"] { display: none; }
.ld-pl.is-narrow .ld-pl-bar { left: 8px; right: 8px; bottom: 8px; padding: 4px; }
.ld-pl.is-narrow .ld-pl-row { gap: 0; }
.ld-pl.is-narrow .ld-pl-time { padding: 0 4px; }
@media (pointer: coarse) {
  .ld-pl-btn { width: 44px; height: 44px; }
  .ld-pl-row { height: 44px; }
  .ld-pl-slider { display: none; }
  .ld-pl-mi { height: 44px; }
}
/* Full screen: the video's box fills the screen, the video contained in it. */
.ld-pl-full { background: #000 !important; width: 100vw !important; height: 100vh !important; max-width: none !important; border-radius: 0 !important; }
.ld-pl-full > video { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: contain; }
@media (prefers-reduced-motion: reduce) { .ld-pl-spin::after { animation-duration: 2.4s; } .ld-pl-bar, .ld-pl-line { transition: none; } }

/* A video in Stream: the 88 px play button (72 on phones) on the picture; once started, the tile is the player. */
.stream-video { position: relative; display: block; }
.stream-video .play { display: none; }
.stream-video .stream-media { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain; background: var(--ld-surface-0); }
.listing.is-selecting .stream-video .ld-pl { pointer-events: none; }

/* Share links: the dialog's link cards and its New link panel. */
.ld-share-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ld-sl-card { padding: 12px 12px 12px 16px; display: flex; flex-direction: column; gap: 10px; border-radius: var(--ld-radius-lg); transition: opacity .25s ease-out, box-shadow .6s ease-out; }
.ld-sl-card.is-ended { opacity: .6; }
.ld-sl-card.is-fresh { box-shadow: 0 0 0 2px var(--ld-green); }
.ld-sl-row { display: flex; align-items: center; gap: 12px; }
.ld-sl-row .t-label, .ld-sl-name .t-label { color: var(--ld-text-strong); }
.ld-sl-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ld-sl-name .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-sl-copy { min-width: 92px; }
.ld-sl-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ld-sl-card .ld-sl-chips .chip { height: 26px; }
.ld-sl-grow { flex: 1; }
.ld-sl-new { padding: 16px; display: flex; flex-direction: column; gap: 14px; border-radius: var(--ld-radius-lg); animation: ld-rise .25s ease-out both; }
.ld-sl-new .spinner { width: 12px; height: 12px; }
.ld-sl-ends { display: flex; flex-direction: column; gap: 8px; }
.ld-sl-input { width: 160px; height: 36px; padding: 0 10px; border-radius: var(--ld-radius-md); border: 1px solid var(--ld-line-strong); background: var(--ld-surface-1); color: var(--ld-text-strong); }
.ld-sl-views { width: 96px; }

/* Report, Block and Hide (spec section 4): menus, the report sheet, the block confirm. */
.ld-item-menu { position: absolute; z-index: 30; min-width: 220px; padding: 6px; display: flex; flex-direction: column; }
/* Lifted into the top layer where the box that holds it would clip it (frame.ts flip): placed on the screen by the script. */
.ld-item-menu.is-lifted { position: fixed; inset: auto; top: var(--lift-top); left: var(--lift-left); right: auto; bottom: auto; margin: 0; z-index: auto; overflow: visible; }

/* Comments (spec 2.3). */
.ld-comments { display: flex; flex-direction: column; gap: 16px; }
.ld-comments-head { display: flex; align-items: center; gap: 8px; }
.ld-comments-head .chip { height: 32px; cursor: pointer; }
.ld-comments-off { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--ld-radius-md); background: var(--ld-surface-3); }
.ld-comments-off span { flex: 1; }
.ld-comments-signin { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: var(--ld-radius-md); background: var(--ld-surface-3); }
.ld-comments-signin span { flex: 1; }
.ld-comments-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 24px 0; color: var(--ld-text-muted); text-align: center; }
.ld-comments-loading { display: flex; align-items: center; gap: 8px; padding: 12px 0; }
.ld-comments-skel { display: flex; flex-direction: column; gap: 16px; padding: 12px 0; }
.ld-comments-skel-row { display: flex; gap: 10px; align-items: flex-start; }
.ld-comments-skel-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; padding-top: 2px; }
.ld-comments-more { align-self: flex-start; }
.ld-composer { display: flex; flex-direction: column; gap: 8px; }
.ld-composer-box { position: relative; }
.ld-composer-input { min-height: 72px; resize: vertical; }
.ld-composer-foot { display: flex; align-items: center; gap: 8px; }
.ld-threads, .ld-replies { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.ld-thread { display: flex; flex-direction: column; gap: 12px; }
.ld-replies { padding-left: 48px; gap: 14px; }
.ld-comment { display: flex; gap: 12px; align-items: flex-start; }
.ld-comment[hidden] { display: none; }
.ld-comment-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ld-comment-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ld-comment-name { color: var(--ld-text-strong); }
.ld-author-chip { height: 20px; font-size: 11px; }
.ld-comment-text { white-space: pre-wrap; overflow-wrap: anywhere; }
/* On the album's comments, the post one was written on; the tap area reaches 44px past the line. */
.ld-comment-on { position: relative; align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; color: var(--ld-text-muted); font: 500 12px/16px var(--font-sans); text-decoration: none; }
.ld-comment-on::after { content: ""; position: absolute; inset: -14px -6px; }
.ld-comment-on:hover { color: var(--ld-text-strong); }
.ld-comment-on:focus-visible { outline: 2px solid var(--ld-green); outline-offset: 2px; border-radius: 4px; }
.ld-comment-tools { position: relative; display: flex; align-items: center; gap: 18px; min-height: 22px; margin-top: 2px; }
/* Text-weight actions with a 44px tap area around them (the ::after), so the row stays short. */
.ld-comment-tool { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: transparent; color: var(--ld-text-muted); font: 600 12.5px/18px var(--font-sans); cursor: pointer; }
.ld-comment-tool::after { content: ""; position: absolute; inset: -12px -8px; }
.ld-comment-tool:hover { color: var(--ld-text-strong); }
.ld-comment-tool:focus-visible { outline: 2px solid var(--ld-green); outline-offset: 3px; border-radius: 4px; }
.ld-comment-tool.like.is-on { color: var(--ld-danger); }
.ld-comment-tool:disabled { cursor: default; }
.ld-comment-tools .ld-item-menu { top: 100%; left: 0; }
.ld-comment.is-deleted { align-items: center; }
.ld-comment-gone { width: 36px; height: 36px; border-radius: 50%; background: var(--ld-surface-4); flex: none; }
.ld-replies-toggle { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; margin-left: 48px; min-height: 32px; padding: 0; border: 0; background: none; color: var(--ld-text-muted); cursor: pointer; }
/* A short rule before "View N replies", as Instagram's. */
.ld-replies-toggle::before { content: ""; width: 24px; height: 1px; background: var(--ld-line-strong); }
.ld-replies-toggle > svg { display: none; }
.ld-replies-toggle:hover { color: var(--ld-text-strong); }
.ld-reply-box { padding-left: 48px; }
/* The comment a link named (#comment-<id>): a soft green wash fading out (comments/focus.ts); a still one without motion. */
.ld-comment.is-flash { border-radius: var(--ld-radius-md); animation: ld-comment-flash 1.2s ease-out; }
.ld-comment[tabindex="-1"]:focus { outline: none; }
@keyframes ld-comment-flash {
  from { background: var(--ld-green-soft); box-shadow: 0 0 0 6px var(--ld-green-soft); }
  to { background: transparent; box-shadow: 0 0 0 6px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .ld-comment.is-flash { animation: none; background: var(--ld-green-soft); box-shadow: 0 0 0 6px var(--ld-green-soft); }
}

/* Phones: the header's actions on one line (Upload and Share as icons, the counts kept), the ⋯ menu at the right end */
@media (max-width: 760px) {
  .ld-replies, .ld-reply-box { padding-left: 44px; }
  .ld-replies-toggle { margin-left: 44px; }
}

/* A feed card's newest comments and its Add a comment row (spec 1.5). */
.ld-feed-comments { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.ld-feed-comments b { color: var(--ld-text-strong); }
.ld-feed-comments [hidden] { display: none; }

/* Settings › Comments and tags. */
.pf-act > .ld-item-menu { right: 0; top: calc(100% + 6px); }
.ld-comments-head { position: relative; }
.ld-comments-head > .ld-item-menu { right: 0; top: 100%; }

/* The listing viewer: one file at a time (the feed) has no bar. */
.lv3-skel { display: block; border-radius: var(--ld-radius-md); background: var(--ld-surface-3); }
.lv3-skel-avatar { width: 44px; height: 44px; border-radius: 50%; flex: none; }
.lv3-skel-line { height: 14px; width: 50%; }
/* The viewer's top strip on phones: its buttons (Close, Hide details, the owner's tools) at full tap size */
@media (max-width: 760px) { .lv3-top .btn-sm { height: 44px; min-width: 44px; } }
/* The column beside a file (viewer/details.tsx in the listing viewer, partials/site/file-column.html.twig on the file
   page): 400px, the owner on top, then caption, Details and comments scrolling together, the actions and the comment
   box pinned at the foot. On phones it stacks under the picture in another order: owner, actions, caption, Details,
   "View all N comments" (the comments open in the sheet). */
.ld-fd-col { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; background: var(--ld-surface-2); border-left: 1px solid var(--ld-line); }
.ld-fd-head { position: relative; flex: none; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 8px 10px 16px; border-bottom: 1px solid var(--ld-line); }
.ld-fd-head > a:not(.ld-fd-name) { flex: none; display: flex; }
/* Only the name is the profile's link, not the row's empty width: a stray tap beside it does nothing. */
.ld-fd-name { flex: 0 1 auto; margin-right: auto; min-width: 0; display: inline-flex; align-items: center; gap: 6px; color: var(--ld-text-strong); overflow: hidden; white-space: nowrap; }
.ld-fd-head .btn-sm { flex: none; min-height: 36px; }
.ld-fd-more { flex: none; width: 44px; height: 44px; min-width: 44px; }
.ld-fd-menu { right: 8px; top: calc(100% - 6px); width: 220px; min-width: 0; padding: 6px; }
.ld-fd-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 16px; display: flex; flex-direction: column; gap: 18px; }
.ld-fd-scroll > * { flex: none; }
.ld-fd-cap { display: flex; flex-direction: column; gap: 8px; }
.ld-fd-cap .ld-post-cap { font: 400 14px/20px var(--font-sans); color: var(--ld-text); }
.ld-fd-title { display: inline; margin: 0; font: inherit; font-weight: 600; color: var(--ld-text-strong); }
.ld-fd-age { font: 400 12px/16px var(--font-sans); color: var(--ld-text-dim); }
.ld-fd-details { border-top: 1px solid var(--ld-line); border-bottom: 1px solid var(--ld-line); }
.ld-fd-details-btn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0; border: 0; background: none; color: var(--ld-text); font: 600 13px/18px var(--font-sans); text-align: left; cursor: pointer; }
.ld-fd-details-btn > span { flex: 1; }
.ld-fd-details-btn > svg { flex: none; color: var(--ld-text-muted); }
.ld-fd-details-btn:hover { color: var(--ld-text-strong); }
.ld-fd-details-btn:focus-visible { outline: none; box-shadow: var(--ld-focus-ring); border-radius: var(--ld-radius-sm); }
.ld-fd-chev { transition: transform 200ms ease-out; }
.ld-fd-details-btn[aria-expanded="true"] .ld-fd-chev { transform: rotate(180deg); }
.ld-fd-details-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 220ms ease-out; }
.ld-fd-details-btn[aria-expanded="true"] + .ld-fd-details-panel { grid-template-rows: 1fr; }
.ld-fd-details-in { min-height: 0; overflow: hidden; visibility: hidden; display: flex; flex-direction: column; gap: 12px; transition: visibility 0s 220ms; }
.ld-fd-details-btn[aria-expanded="true"] + .ld-fd-details-panel .ld-fd-details-in { visibility: visible; transition: none; }
.ld-fd-details-in > :last-child { margin-bottom: 14px; }
.ld-fd-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; margin: 0; font: 400 13px/18px var(--font-sans); }
.ld-fd-facts dt { color: var(--ld-text-muted); }
.ld-fd-facts dd { margin: 0; color: var(--ld-text); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.ld-fd-facts a { color: var(--ld-green); }
.ld-fd-cta { display: flex; flex-wrap: wrap; gap: 8px; }
.ld-fd-cta .btn { min-height: 36px; }
/* About's own sections inside Details: Camera and, for staff, Staff, below the facts */
.ld-about-part { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--ld-line); padding-top: 12px; }
.ld-about-part h3 { margin: 0; }
.ld-fd-talk { display: none; align-self: flex-start; min-height: 44px; padding: 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.ld-fd-talk:hover { color: var(--ld-text-strong); }
.ld-fd-acts { flex: none; padding: 4px 8px; border-top: 1px solid var(--ld-line); }
.ld-fd-gap { flex: 1; }
.ld-fd-compose { flex: none; }
.ld-fd-compose:empty { display: none; }
.ld-fd-details-btn[data-fd-auto] .ld-fd-chev, .ld-fd-details-btn[data-fd-auto] + .ld-fd-details-panel, .ld-fd-details-btn[data-fd-auto] + .ld-fd-details-panel .ld-fd-details-in { transition: none; }
@media (prefers-reduced-motion: reduce) { .ld-fd-chev, .ld-fd-details-panel { transition: none; } }
/* Share under the Share icon: a menu above it on a computer, the sheet's rows on a phone (column/share.tsx) */
.ld-share-menu { position: fixed; z-index: 80; min-width: 210px; padding: 6px; display: flex; flex-direction: column; transform-origin: bottom left; animation: ld-pop-in 150ms ease-out both; }
.ld-share-menu .menu-item, .ld-fd-menu .menu-item { min-height: 40px; height: auto; gap: 10px; font: 600 13px/16px var(--font-sans); }
.ld-share-menu .menu-item svg { color: var(--ld-text-muted); }
.ld-share-rows { display: flex; flex-direction: column; padding: 4px 8px 12px; }
.ld-share-row { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 12px; border: 0; border-radius: var(--ld-radius-md); background: none; color: var(--ld-text); font: 600 15px/20px var(--font-sans); text-align: left; cursor: pointer; }
.ld-share-row:hover, .ld-share-row:focus-visible { background: var(--ld-fill-hover); color: var(--ld-text-strong); outline: none; }
.ld-share-row svg { color: var(--ld-text-muted); }
@media (prefers-reduced-motion: reduce) { .ld-share-menu { animation: none; } }
.ld-fd-top { gap: 10px; color: rgba(255, 255, 255, .75); }
.ld-fd-top .btn-icon { width: 44px; height: 44px; min-width: 44px; }
/* The file page: one framed block under the site header, the same grid */
.viewer.ld-fd { --fd-h: max(560px, calc(100svh - 64px)); width: 100%; height: var(--fd-h); min-height: 0; margin: 0 0 40px; border: 0; border-bottom: 1px solid var(--ld-line); border-radius: 0; overflow: hidden; background: #05060a; }
.viewer.ld-fd .stage { min-height: 0; background: #000; }
@media (min-width: 761px) {
  .viewer.ld-fd .stage-top { top: 10px; left: 12px; right: 12px; padding: 0; background: none; }
}
@media (max-width: 760px) {
  .ld-fd-col { overflow: visible; border-left: 0; }
  .ld-fd-head { order: 1; min-height: 0; padding: 8px 4px 8px 12px; border-bottom: 0; }
  .ld-fd-acts { order: 2; padding: 2px 4px; border-top: 0; background: transparent; }
  .ld-fd-scroll { display: contents; }
  .ld-fd-cap { order: 3; padding: 4px 16px 24px; gap: 14px; }
  .ld-fd-details { order: 4; margin: 0 16px; }
  .ld-fd-talk { order: 5; display: block; margin: 8px 16px 24px; }
  .ld-fd-comments, .ld-fd-compose { display: none !important; }
  .viewer.ld-fd { --fd-h: auto; width: 100%; height: auto; margin: 0; border: 0; border-radius: 0; background: var(--ld-surface-2); }
}
/* A feed video playing muted in its card (frontend/site/feed-video.ts): over the still, the tap still the card's */
.ld-feed-media .ld-feed-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; background: #000; }

/* A value with its copy button inside the field: as tall as the site's other fields (48 px), with a standard 40 px
   button centred 4 px from the outer edge (a 56 px field looked too big). */

.ld-comments.is-compact { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0; }
.ld-comments.is-compact.is-inline { flex: none; gap: 14px; }
.ld-comments-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 16px 16px; display: flex; flex-direction: column; gap: 14px; }
.ld-comments-bar { flex: none; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--ld-line); background: var(--ld-surface-2); }
.ld-composer.is-compact { gap: 4px; }
.ld-composer-row { display: flex; align-items: flex-end; gap: 10px; }
.ld-composer-row > .ld-composer-box { flex: 1; min-width: 0; }
.ld-composer-me { flex: none; display: flex; margin-bottom: 6px; }
.ld-composer.is-compact .ld-composer-box { display: flex; align-items: flex-end; min-height: 44px; padding: 0 4px 0 16px; border: 1px solid var(--ld-line-strong); border-radius: 22px; background: var(--ld-surface-3); }
.ld-composer.is-compact .ld-composer-box:focus-within { border-color: var(--ld-green); box-shadow: var(--ld-focus-ring); }
.ld-composer.is-compact .input { min-height: 0; resize: none; border: 0; background: transparent; box-shadow: none; border-radius: 0; padding: 11px 4px 11px 0; font: 400 15px/20px var(--font-sans); overflow-y: auto; }
.ld-composer.is-compact .input:focus { box-shadow: none; }
.ld-composer-send { flex: none; align-self: stretch; max-height: 44px; border: 0; background: none; color: var(--ld-green); font: 700 14px/20px var(--font-sans); padding: 0 12px; min-height: 42px; cursor: pointer; }
.ld-composer-send:disabled { opacity: .6; cursor: default; }
.ld-composer-count { font: 500 11px/14px var(--font-sans); color: var(--ld-text-dim); }
.ld-composer-count.is-low { color: var(--ld-warning); }
.ld-composer.is-compact .ld-mention-list { top: auto; bottom: calc(100% + 4px); }
.ld-composer-meta { display: flex; align-items: center; gap: 12px; padding: 0 16px; }
.ld-composer-meta .link { margin-left: auto; }
/* The same comments in the dialog on a computer (comments/overlay.tsx): the list scrolls, the box stays at the foot. */
.ld-comments-dialog { display: flex; flex-direction: column; height: min(70vh, 640px); margin: 0 -24px -24px; border-top: 1px solid var(--ld-line); }
.ld-comments-dialog .ld-comments-bar { border-radius: 0 0 var(--ld-radius-xl) var(--ld-radius-xl); }
/* "Replying to @name" over the box, lined up with the pill, and its × */
.ld-comments-bar .ld-replying { display: flex; align-items: center; gap: 4px; margin: -4px 0 6px; padding-left: 42px; color: var(--ld-text-muted); font: 500 12.5px/16px var(--font-sans); animation: ld-fade 150ms ease-out both; }
.ld-replying-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-replying-text b { color: var(--ld-text-strong); font-weight: 600; }
.ld-comments-bar .ld-replying-stop { width: 28px; height: 28px; min-width: 28px; min-height: 28px; padding: 0; }
@media (prefers-reduced-motion: reduce) { .ld-comments-bar .ld-replying { animation: none; } }
.ld-composer.is-compact .input { min-height: 42px; }

/* A slide whose shape is far from its post's frame shows whole on the dark frame (feed-card.html.twig). */
:is(.ld-feed-card, .ld-pp-carousel) .ld-feed-media.is-fit { background: #000; overflow: hidden; }
.ld-feed-fill { position: absolute; inset: -32px; background: var(--ld-fill, none) center / cover no-repeat; filter: blur(28px) brightness(.45); }
:is(.ld-feed-card, .ld-pp-carousel) .ld-feed-media.is-fit :is(.ph, .ld-feed-video) { position: relative; z-index: 1; object-fit: contain; }
:is(.ld-feed-card, .ld-pp-carousel) .ld-feed-media.is-fit .play { z-index: 2; }
/* Settings › Your files › Share links (islands/share-links). */
.ld-msl { display: flex; flex-direction: column; gap: 12px; }
.ld-msl-back { align-self: flex-start; }
.ld-msl-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 32px 16px; text-align: center; }
.ld-msl-more { align-self: center; }
/* The Share menu's items: a name and a line under it (column/share.tsx, board 79). */
.ld-share-menu { width: 300px; }
.ld-share-menu .menu-item { align-items: flex-start; padding-top: 10px; padding-bottom: 10px; }
.ld-share-menu .menu-item svg { flex: none; margin-top: 2px; }
.ld-share-menu .menu-item small, .ld-share-row small { display: block; margin-top: 2px; color: var(--ld-text-muted); font: 400 12px/16px var(--font-sans); }
.ld-share-menu .menu-sep { height: 1px; margin: 4px 8px; background: var(--ld-line); }
.ld-share-row { align-items: flex-start; padding-top: 12px; padding-bottom: 12px; text-align: left; }
.ld-share-row svg { flex: none; margin-top: 2px; }