/* The member site: recipes, page parts and motion, as designed in docs/core/design/site/. Every
   value comes from tokens.css. Only what most pages need is here: a page's own rules are in its own file, loaded
   by its template (docs/core/frontend-runtime.md, Stylesheets). */

body { margin: 0; background: var(--ld-surface-0); color: var(--ld-text); font: 400 14px/21px var(--font-sans); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
/* Moving between pages keeps the header still and cross-fades the rest, instead of repainting the whole page
   (cross-document view transitions; browsers without them load pages as before). */
@view-transition { navigation: auto; }
.hdr { view-transition-name: ld-header; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 150ms; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
/* A page swapped in without a reload (frontend/site/nav.ts) fades in, and a slow one shows a line under the header
   while it comes. */
.ld-nav-in { animation: ld-nav-in 120ms var(--ld-ease-out); }
@keyframes ld-nav-in { from { opacity: .35; } }
.ld-nav-busy body::before { content: ''; position: fixed; z-index: 1000; top: 0; left: 0; right: 0; height: 2px; background: var(--ld-green); transform-origin: 0 50%; animation: ld-nav-busy 2.4s var(--ld-ease-out) forwards; }
@keyframes ld-nav-busy { from { transform: scaleX(0); } to { transform: scaleX(.9); } }
@media (prefers-reduced-motion: reduce) { .ld-nav-in { animation: none; } .ld-nav-busy body::before { animation: none; transform: scaleX(.5); } }
/* The page fills the screen, so a short page's footer stays at the bottom instead of rising under its content. */
.ld-site #content { flex: 1 0 auto; }
* { box-sizing: border-box; }
a { color: var(--ld-text); text-decoration: none; }
a:hover { color: var(--ld-text-strong); }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); color: var(--ld-text-strong); }
p { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ld-green); outline-offset: 2px; }

/* Page frame */
.page { min-height: 100%; background: var(--ld-surface-1); overflow: hidden; }
/* Pages: the full window up to 1536px of content (laptops use every pixel), then centred; the header keeps its wider bar. */
.wrap { max-width: 1600px; margin: 0 auto; padding: 0 32px; }
.section { padding: 96px 0 0; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: var(--ld-radius-full); background: var(--ld-green-soft); border: 1px solid var(--ld-green-line); color: var(--ld-green); font: 600 12px/16px var(--font-sans); letter-spacing: .02em; }
.t-display { font: 800 36px/40px var(--font-display); letter-spacing: -0.01em; }
.t-title-lg { font: 800 28px/34px var(--font-display); }
.t-title { font: 700 22px/28px var(--font-display); }
.t-title-sm { font: 700 18px/24px var(--font-display); }
.t-title-xs { font: 700 15px/20px var(--font-display); }
.t-body-lg { font: 400 16px/24px var(--font-sans); }
.t-body-sm { font: 400 13px/19px var(--font-sans); }
.t-label { font: 600 13px/16px var(--font-sans); }
.t-label-sm { font: 600 12px/16px var(--font-sans); }
.t-caption { font: 600 11px/14px var(--font-sans); letter-spacing: .04em; text-transform: uppercase; }
.muted { color: var(--ld-text-muted); }
.secondary { color: var(--ld-text-secondary); }
.dim { color: var(--ld-text-dim); }
.num { font-variant-numeric: tabular-nums; }

/* Links: underline grows from the left */
.link { position: relative; display: inline-flex; align-items: center; gap: 6px; color: var(--ld-text); font: 600 13px/16px var(--font-sans); }
.link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--ld-ease); }
.link:hover { color: var(--ld-green); }
.link:hover::after { transform: scaleX(1); }
.link:hover .arrow { transform: translateX(3px); }
.arrow { transition: transform var(--ld-ease); }

/* Cards and panels */
.card { background: var(--ld-surface-2); border: 1px solid var(--ld-line); border-radius: var(--ld-radius-xl); }
.lift { transition: transform var(--ld-ease-enter), border-color var(--ld-ease-enter), box-shadow var(--ld-ease-enter); }
.lift:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--tier) 60%, transparent); box-shadow: 0 16px 40px rgba(0,0,0,.35), 0 0 0 1px color-mix(in srgb, var(--tier) 25%, transparent); }

/* Emblems: the still file shows; the animated one takes over on hover of its card */
.emblem { position: relative; display: inline-block; flex: none; }
.emblem img { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity var(--ld-ease); }
.emblem .anim { opacity: 0; }
.lift:hover .emblem .anim, .emblem.is-live .anim { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .emblem .anim { opacity: 0 !important; } }
.lift:hover .emblem .still, .emblem.is-live .still { opacity: 0; }

/* Avatars with tier ring; paying members get a rotating arc */
.avatar { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 50%; }
.avatar .face { position: absolute; inset: 3px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #2a3140, #151a22); color: var(--ld-text-strong); font: 700 12px/1 var(--font-display); }
.avatar .ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--tier); }
/* A picture's width and height attributes would hold it at the size printed, past a ring that CSS made smaller. */
.avatar img.face { width: calc(100% - 6px); height: calc(100% - 6px); object-fit: cover; }
.avatar .arc { position: absolute; inset: -3px; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 70%, var(--tier) 85%, transparent 100%); -webkit-mask: radial-gradient(circle, transparent calc(50% - 2px), #000 calc(50% - 1px)); mask: radial-gradient(circle, transparent calc(50% - 2px), #000 calc(50% - 1px)); animation: ld-spin 8s linear infinite; }
/* A member's name with their tier's emblem beside it (partials/site/name-emblem.html.twig, NameEmblem): the two stay on
   one line, and a long name shortens with an ellipsis before the emblem moves. */
.ld-name { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; vertical-align: middle; }
.ld-name-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-name-emblem { flex: none; }

/* Header */
.hdr { position: sticky; top: 0; z-index: 20; height: 64px; background: rgba(11,13,19,.8); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; }
.hdr.is-scrolled { border-bottom-color: var(--ld-line); }
.hdr-in { height: 100%; display: flex; align-items: center; gap: 8px; }
.hdr-logo { display: inline-flex; align-items: center; margin-right: auto; }
.hdr-logo img { height: 22px; width: auto; }
.bell { position: relative; }
.bell .badge { position: absolute; top: 4px; right: 3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--ld-green); color: var(--ld-on-green); font: 700 11px/18px var(--font-sans); text-align: center; }
.bell.is-ring svg { animation: ld-swing .7s ease-in-out; transform-origin: 50% 2px; }
.bell.is-ring .badge { animation: ld-pop .4s ease-out; }
.nudge { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 8px; border-radius: var(--ld-radius-full); border: 1px solid color-mix(in srgb, var(--ld-tier-spark) 60%, transparent); background: color-mix(in srgb, var(--ld-tier-spark) 14%, transparent); color: var(--ld-text-strong); font: 600 12px/16px var(--font-sans); }
.nudge img { width: 18px; height: 18px; }
.nudge::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent); animation: ld-glint 12s ease-in-out infinite; }
.who { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 4px; border-radius: var(--ld-radius-full); background: transparent; border: 0; cursor: pointer; color: var(--ld-text-muted); }
.who:hover { background: var(--ld-fill-hover); }

/* Image tiles: neutral placeholders only */
.tile { position: relative; display: block; overflow: hidden; isolation: isolate; border-radius: var(--ld-radius-lg); background: var(--ld-surface-3); aspect-ratio: 1 / 1; transition: transform var(--ld-ease-enter), box-shadow var(--ld-ease-enter); }
.tile .ph { position: absolute; inset: 0; backface-visibility: hidden; animation: ld-unblur .25s ease-out both; transition: transform var(--ld-ease-enter); }
.tile:hover, .tilecell:hover > .tile, .tile.is-hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.4); }
.tile:hover .ph, .tilecell:hover > .tile .ph, .tile.is-hover .ph { transform: scale(1.02); }
/* A pixel past the edges: while the tile lifts, the rounded clip leaves a hairline of picture showing under the title. */
.tile .over { position: absolute; left: -1px; right: -1px; bottom: -1px; display: flex; align-items: center; gap: 8px; padding: 28px 10px 10px; background: linear-gradient(transparent, rgba(5,6,8,.85)); opacity: 0; transition: opacity var(--ld-ease); }
.tile:hover .over, .tile.is-hover .over { opacity: 1; }
.tile .over .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ld-text-strong); font: 600 12px/16px var(--font-sans); }
.tile .dur { position: absolute; right: 8px; bottom: 8px; height: 20px; padding: 0 6px; border-radius: var(--ld-radius-sm); background: rgba(5,6,8,.72); color: #fff; font: 600 11px/20px var(--font-sans); }
.tile .play { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(5,6,8,.6); display: flex; align-items: center; justify-content: center; color: #fff; }
.tile.is-loading::before { content: ""; position: absolute; inset: 0; 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; }
.g4 { background: linear-gradient(135deg, #33281f, #15110d); }

/* Meters */
.meter { height: 8px; border-radius: 4px; background: var(--ld-surface-4); overflow: hidden; }
.meter > span { display: block; height: 100%; border-radius: 4px; background: var(--tier); transition: width .6s ease-out; }
.meter.warn > span { background: var(--ld-warning); }

/* Drop zone */
.drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 180px; padding: 24px; border-radius: var(--ld-radius-xl); border: 2px dashed var(--ld-line-strong); background: var(--ld-surface-2); text-align: center; transition: border-color var(--ld-ease), background-color var(--ld-ease); }
.drop .dico { color: var(--ld-text-muted); transition: transform var(--ld-ease-enter), color var(--ld-ease); }
.drop.is-over { border-style: solid; border-color: var(--ld-green); background: var(--ld-green-soft); }
.drop.is-over .dico { color: var(--ld-green); transform: translateY(-6px); animation: ld-bob 1s ease-in-out .25s infinite; }

/* Segmented control */
.seg { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: var(--ld-radius-md); background: var(--ld-surface-3); border: 1px solid var(--ld-line); }
.seg button { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 16px; border: 0; background: transparent; border-radius: var(--ld-radius-sm); color: var(--ld-text-muted); font: 600 13px/16px var(--font-sans); cursor: pointer; transition: color var(--ld-ease-enter); }
.seg button:hover:not([aria-pressed="true"]) { color: var(--ld-text-strong); }
.seg button[aria-pressed="true"] { color: var(--ld-on-green); }
.seg .thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: var(--ld-radius-sm); background: var(--ld-green); transition: transform var(--ld-ease-enter); }
.seg.is-right .thumb { transform: translateX(100%); }
.fade-swap { animation: ld-fade .25s ease-out; }

/* Accordion */
.acc { border-top: 1px solid var(--ld-line); }

/* Footer */
.foot { margin-top: 64px; border-top: 1px solid var(--ld-line); padding: 32px 0 32px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-left: auto; }
.foot-links a { color: var(--ld-text-muted); font: 600 13px/16px var(--font-sans); display: inline-flex; align-items: center; gap: 6px; }
.foot-links a:hover { color: var(--ld-text-strong); }

.foot-row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
@media (max-width: 760px) {
  .foot-row { align-items: flex-start; gap: 20px 24px; }
  .foot-row > a { margin-right: 0 !important; }
  /* Two columns filled top to bottom, so the five links read Terms, Privacy, Contact | API, Discord. */
  .foot-row .foot-links { flex: 1 1 0; width: auto; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, auto); grid-auto-flow: column; gap: 12px 16px; }
  .foot-row .foot-copy { order: 3; width: 100%; padding-top: 16px; border-top: 1px solid var(--ld-line); text-align: center; }
}

/* Scroll reveal (scroll-driven where supported; otherwise simply shown) */
@supports (animation-timeline: view()) {
  .reveal { animation: ld-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
}
.stagger > * { animation: ld-rise .45s ease-out both; }
.stagger > *:nth-child(2) { animation-delay: 60ms; } .stagger > *:nth-child(3) { animation-delay: 120ms; } .stagger > *:nth-child(4) { animation-delay: 180ms; } .stagger > *:nth-child(5) { animation-delay: 240ms; } .stagger > *:nth-child(6) { animation-delay: 300ms; }

/* Hero art layers */
.hero-ring { transform-box: fill-box; transform-origin: center; animation: ld-spin 60s linear infinite; }
.hero-sweep { animation: ld-leak 8s ease-in-out infinite; }

.hero { position: relative; min-height: clamp(640px, 40vw, 760px); background: var(--ld-surface-0); display: flex; align-items: center; overflow: hidden; }
/* The member's hero shows the whole lens, as the visitor's does (it was cut off at the top and right). */

/* The header and footer use more of a wide screen than the content does */
.hdr .wrap, .foot .wrap { max-width: 1844px; padding: 0 32px; }
@media (max-width: 760px) { .hdr .wrap, .foot .wrap { padding: 0 16px; } }
.upcard .state .a { animation: ld-up-a 8s linear infinite; color: var(--ld-text-muted); }
@keyframes ld-up-a { 0%, 46% { opacity: 1; } 48%, 100% { opacity: 0; } }

/* A dashed connector that draws itself from top to bottom */

/* A dashed connector that draws itself from left to right */

/* Demo panels */
.opt { width: 100%; display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 10px 14px; border-radius: var(--ld-radius-md); border: 1px solid var(--ld-line); background: var(--ld-surface-3); color: var(--ld-text); text-align: left; cursor: pointer; transition: border-color var(--ld-ease-enter), background-color var(--ld-ease-enter), transform var(--ld-ease); }
.opt:hover { border-color: var(--ld-line-strong); }
.opt .radio { width: 18px; height: 18px; margin-left: auto; flex: none; border-radius: 50%; border: 2px solid var(--ld-line-strong); transition: border-color var(--ld-ease-enter), box-shadow var(--ld-ease-enter); }
.opt.is-on { border-color: var(--ld-green-line); background: var(--ld-green-surface); }
.opt.is-on .radio { border-color: var(--ld-green); box-shadow: inset 0 0 0 4px var(--ld-green-surface), inset 0 0 0 10px var(--ld-green); }
.tabs { display: flex; gap: 4px; padding: 4px; border-radius: var(--ld-radius-md); background: var(--ld-surface-3); border: 1px solid var(--ld-line); flex-wrap: wrap; }
.tabs button { height: 32px; padding: 0 12px; border: 0; border-radius: var(--ld-radius-sm); background: transparent; color: var(--ld-text-muted); font: 600 12px/16px var(--font-sans); cursor: pointer; transition: background-color var(--ld-ease), color var(--ld-ease); }
.tabs button:hover { color: var(--ld-text-strong); }
.tabs button[aria-selected="true"] { background: var(--ld-surface-4); color: var(--ld-text-strong); box-shadow: inset 0 0 0 1px var(--ld-line-strong); }
.code { display: block; min-height: 72px; padding: 14px 16px; border-radius: var(--ld-radius-md); background: var(--ld-surface-0); border: 1px solid var(--ld-line); color: var(--ld-text-secondary); font: 400 13px/20px ui-monospace, Menlo, monospace; word-break: break-all; animation: ld-fade .25s ease-out; }

/* The lens art is sized by the height of its box, never by the page width, so a wide screen never blows the lens up
   past the hero. It fills the full height (no strip above or below); only the barrel's outer edge is trimmed. */
.lens-box { position: absolute; top: 0; bottom: 0; right: 0; height: 100%; aspect-ratio: 2560 / 1200; }
.lens-box img, .lens-box svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
@media (max-width: 760px) {
  .lens-box { top: 0; height: 100%; width: 100%; aspect-ratio: auto; transform: none; }
}

/* The hero lens's iris breathes: a slow quarter-turn of its blades */

/* Tier emblems (inline, from the site's animated emblems): still until live, then their own loop */

/* ---------- Batch 2: profile, album, file viewer ---------- */

/* The tab bar sticks right under the header, whose height is set here for each width (no script, no jump). */
.tabbar { position: sticky; top: 64px; z-index: 8; background: rgba(11,13,19,.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--ld-line); }

/* Toolbar: search, chips, sort, density */
.toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.search { position: relative; flex: 1 1 280px; max-width: 420px; }
.search input { width: 100%; height: 40px; padding: 0 12px 0 38px; border-radius: var(--ld-radius-md); border: 1px solid var(--ld-line-strong); background: var(--ld-surface-3); color: var(--ld-text); font: 400 14px/20px var(--font-sans); transition: border-color var(--ld-ease), box-shadow var(--ld-ease); }
.search input:focus { outline: none; border-color: var(--ld-green); box-shadow: var(--ld-focus-ring); }
.search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ld-text-muted); }
.select { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: var(--ld-radius-md); border: 1px solid var(--ld-line-strong); background: var(--ld-surface-3); color: var(--ld-text); font: 600 13px/16px var(--font-sans); cursor: pointer; }
.select:hover { border-color: rgba(255,255,255,.28); }


/* Stats that link to their tab */
.stat { display: flex; flex-direction: column; gap: 2px; padding: 4px 0; }
.stat b { font: 800 22px/26px var(--font-display); color: var(--ld-text-strong); font-variant-numeric: tabular-nums; }
.stat span { font: 600 12px/16px var(--font-sans); color: var(--ld-text-muted); }
.stat:hover b { color: var(--ld-green); }

/* Follow button: Follow -> Following (check morph); hover on Following offers Unfollow */
.follow.is-on { background: var(--ld-surface-4); border-color: var(--ld-line-strong); color: var(--ld-text); }
.follow.is-on:hover { border-color: rgba(255,138,156,.5); color: var(--ld-danger); }
.follow.is-on .chk { animation: ld-pop .35s ease-out; color: var(--ld-green); }
.follow.is-on:hover .on-txt { display: none; }
.follow .off-txt { display: none; }
.follow.is-on:hover .off-txt { display: inline; }
.follow:not(.is-on) .on-txt, .follow:not(.is-on) .off-txt { display: none; }
.follow.is-on .add-txt { display: none; }
.follow .on-txt { display: inline-flex; align-items: center; gap: 6px; }
.follow.is-on:hover .on-txt { display: none; }
/* Requested: waiting for the member's answer; hover offers to take the request back. */
.follow .req-txt, .follow .cancel-txt { display: none; }
.follow.is-requested .add-txt { display: none; }
.follow.is-requested .req-txt { display: inline-flex; align-items: center; gap: 6px; }
.follow.is-requested:hover .req-txt { display: none; }
.follow.is-requested:hover .cancel-txt { display: inline; }

/* Like: the heart fills and bursts */
.like { position: relative; }
.like svg { transition: transform var(--ld-ease), fill var(--ld-ease), color var(--ld-ease); }
.like.is-on { color: var(--ld-danger); border-color: rgba(255,138,156,.45); }
.like.is-on svg { fill: currentColor; animation: ld-heart .45s cubic-bezier(.2,1.6,.4,1); }
.like.is-on::before { content: ""; position: absolute; left: 14px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%; box-shadow: 0 -14px 0 -7px #ff8a9c, 12px -8px 0 -7px #ffb21f, 13px 8px 0 -7px #ff8a9c, 0 14px 0 -7px #ffb21f, -13px 8px 0 -7px #ff8a9c, -12px -8px 0 -7px #ffb21f; animation: ld-burst .5s ease-out both; pointer-events: none; }
@keyframes ld-heart { 0% { transform: scale(.6); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes ld-burst { from { opacity: 1; transform: scale(.4); } to { opacity: 0; transform: scale(1.4); } }

/* Month groups with a year rail */
.month { display: flex; align-items: baseline; gap: 10px; margin: 28px 0 12px; }
.month h3 { font: 700 18px/24px var(--font-display); }

/* Selectable tiles and the selection bar */
.tile .tick { position: absolute; top: 8px; left: 8px; z-index: 3; 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; opacity: 0; transition: opacity var(--ld-ease), background-color var(--ld-ease), border-color var(--ld-ease); }
/* The tick is Select mode's: hovering a tile outside it shows none. */
.selecting .tile .tick { opacity: 1; }
/* Picked: a steady green inner ring and a light tint over the picture (it never shrinks, so tiles flipping during a
   drag don't jump), and the check easing in. */
.tile::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; box-shadow: inset 0 0 0 3px var(--ld-green); background: rgba(14,229,155,.14); opacity: 0; pointer-events: none; transition: opacity .14s ease-out; }
.ld-new { position: absolute; top: 8px; left: 8px; z-index: 3; height: 20px; padding: 0 8px; border-radius: var(--ld-radius-full); background: var(--ld-green); color: var(--ld-on-green); font: 700 11px/20px var(--font-sans); pointer-events: none; animation: ld-new-in .3s ease-out both; }
@keyframes ld-new-in { from { opacity: 0; transform: scale(.8); } }
@media (prefers-reduced-motion: reduce) { .ld-new { animation: none; } }
.tile.is-picked::after { opacity: 1; }
.tile .tick svg { transform: scale(.4); transition: transform .14s ease-out; }
.tile.is-picked .tick { opacity: 1; background: var(--ld-green); border-color: var(--ld-green); color: var(--ld-on-green); }
.tile.is-picked .tick svg { transform: none; }
/* Floats over the page near the bottom of the window while anything is selected */
.selbar { position: fixed; left: 0; right: 0; bottom: max(20px, env(safe-area-inset-bottom)); z-index: 30; margin: 0 auto; width: fit-content; max-width: calc(100% - 32px); display: flex; align-items: center; gap: 6px; padding: 8px 8px 8px 16px; border-radius: var(--ld-radius-full); background: var(--ld-surface-3); border: 1px solid var(--ld-line-strong); box-shadow: var(--ld-shadow-modal); animation: ld-selbar-in var(--ld-ease-enter) both; flex-wrap: wrap; }
.selbar .btn { height: 36px; border-radius: var(--ld-radius-full); }
@keyframes ld-selbar-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* File viewer */
.viewer { display: grid; grid-template-columns: minmax(0, 1fr) 400px; min-height: calc(100vh - 64px); background: var(--ld-surface-0); }
.stage { position: relative; display: flex; flex-direction: column; min-width: 0; }
.panel { background: var(--ld-surface-2); border-left: 1px solid var(--ld-line); padding: 20px; display: flex; flex-direction: column; gap: 18px; overflow-y: auto; animation: ld-panel-in var(--ld-ease-enter) both; }
@keyframes ld-panel-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; }
.facts dt { color: var(--ld-text-muted); font: 400 13px/19px var(--font-sans); display: flex; align-items: center; gap: 8px; }
.facts dd { margin: 0; color: var(--ld-text); font: 600 13px/19px var(--font-sans); text-align: right; font-variant-numeric: tabular-nums; }
.kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px; border: 1px solid var(--ld-line-strong); border-bottom-width: 2px; background: var(--ld-surface-3); color: var(--ld-text-secondary); font: 600 11px/1 var(--font-sans); }

/* Password gate */
.gate { min-height: 640px; display: flex; align-items: center; justify-content: center; padding: 48px 16px; background: radial-gradient(60% 60% at 50% 40%, rgba(14,229,155,.07), transparent 70%), var(--ld-surface-0); }

@media (max-width: 760px) {
  .viewer { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .panel { border-left: 0; border-top: 1px solid var(--ld-line); padding-bottom: 88px; }
  .tab { height: 44px; padding: 0 10px; }
  .selbar { border-radius: var(--ld-radius-lg); justify-content: center; }
}
.ac-meta .t { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* Tab bar with the search and sort inline on its right */
.tabrow .search { flex: 0 1 280px; }
.tabrow .select { height: 36px; }
@media (max-width: 760px) {
  .tabrow { flex-wrap: wrap; padding-bottom: 10px; }
  .tabrow .search { flex: 1 1 0; max-width: none; }
}

/* Per-file menu on tiles */
.tile .more { position: absolute; top: 8px; right: 8px; z-index: 3; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--ld-radius-sm); background: rgba(5,6,8,.6); color: #fff; opacity: 0; cursor: pointer; transition: opacity var(--ld-ease), background-color var(--ld-ease); }
.tile:hover .more, .tile.is-menu .more { opacity: 1; }
.tile .more:hover { background: var(--ld-green); color: var(--ld-on-green); }

/* Pager with a go-to-page box */
.pager { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 32px; flex-wrap: wrap; }
.pager .num { min-width: 36px; }
.pager .is-current { background: var(--ld-green-surface); border-color: var(--ld-green-line); color: var(--ld-green); }
.pager .goto { display: inline-flex; align-items: center; gap: 8px; margin-left: 12px; padding-left: 14px; border-left: 1px solid var(--ld-line); }
.pager .goto input { width: 72px; height: 32px; padding: 0 10px; border-radius: var(--ld-radius-md); border: 1px solid var(--ld-line-strong); background: var(--ld-surface-3); color: var(--ld-text); font: 600 13px/16px var(--font-sans); text-align: center; }
.pager .goto input:focus { outline: none; border-color: var(--ld-green); box-shadow: var(--ld-focus-ring); }
@media (max-width: 760px) { .pager .goto { margin-left: 0; padding-left: 0; border-left: 0; width: 100%; justify-content: center; } .pager .mid { display: none; } }

/* Pager: one editable box in the middle */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pager2 .pg-step { height: 44px; min-width: 44px; padding: 0 14px; }

/* Sub-albums inside an album: dense rows, because an album can hold hundreds */
.sub { display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 8px; border-radius: var(--ld-radius-md); background: var(--ld-surface-2); border: 1px solid var(--ld-line); color: var(--ld-text); transition: background-color var(--ld-ease), border-color var(--ld-ease), transform var(--ld-ease); }
.sub:hover { background: var(--ld-surface-3); border-color: var(--ld-line-strong); transform: translateY(-1px); }

/* Cover */
.cover { position: relative; overflow: hidden; background: var(--ld-surface-0); transition: box-shadow 300ms ease-out; }

/* Signup */
.steps { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.step { display: inline-flex; align-items: center; gap: 8px; color: var(--ld-text-dim); font: 600 13px/16px var(--font-sans); }
.step + .step::before { content: ""; width: 40px; height: 1px; background: var(--ld-line-strong); margin-right: 8px; }
.step.is-current { color: var(--ld-text-strong); }
.step.is-done { color: var(--ld-text-secondary); }
.paybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: rgba(15,18,22,.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--ld-line-strong); animation: ld-selbar-in var(--ld-ease-enter) both; }
.paybar-in { display: flex; align-items: center; gap: 12px; padding-top: 14px; padding-bottom: 14px; flex-wrap: wrap; }
.form { display: flex; flex-direction: column; gap: 14px; }
.fld { display: flex; flex-direction: column; gap: 6px; }
.fld > span { font: 600 13px/16px var(--font-sans); color: var(--ld-text-secondary); }
/* A small link under a field, at its right (Forgot it?) */
.fld-aside-link { align-self: flex-end; }
.fld input, .fld select { height: 48px; padding: 0 14px; border-radius: var(--ld-radius-md); border: 1px solid var(--ld-line-strong); background: var(--ld-surface-3); color: var(--ld-text); font: 400 16px/24px var(--font-sans); outline: none; transition: border-color var(--ld-ease), box-shadow var(--ld-ease); }
.fld input:focus, .fld select:focus { border-color: var(--ld-green); box-shadow: var(--ld-focus-ring); }
.fld small { color: var(--ld-text-dim); font: 400 12px/16px var(--font-sans); }
.fld-in { display: flex; align-items: center; height: 48px; border-radius: var(--ld-radius-md); border: 1px solid var(--ld-line-strong); background: var(--ld-surface-3); transition: border-color var(--ld-ease); }
.fld-in:focus-within { border-color: var(--ld-green); box-shadow: var(--ld-focus-ring); }
.fld-in input { flex: 1; min-width: 0; height: 46px; border: 0; background: transparent; padding: 0 6px 0 0; box-shadow: none !important; }
/* The .pre prefix supplies the left inset; a field without one needs its own. */
.fld-in input:first-child { padding-left: 14px; }
.fld-in.is-good { border-color: var(--ld-green-line); }
.fld-in.is-bad { border-color: var(--ld-danger); }
.fld-in .pre { padding-left: 14px; color: var(--ld-text-dim); font: 400 16px/24px var(--font-sans); }
.fld-in .fld-state { padding: 0 12px; font: 600 12px/16px var(--font-sans); }
.fld-in.is-good .fld-state { color: var(--ld-green); }
.fld-in.is-bad .fld-state { color: var(--ld-danger); }
.pwrules { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.pwrules li { display: inline-flex; align-items: center; gap: 6px; color: var(--ld-text-dim); font: 400 12px/16px var(--font-sans); transition: color var(--ld-ease); }
.pwrules li svg { opacity: .3; transition: opacity var(--ld-ease); }
.pwrules li.is-ok { color: var(--ld-green); } .pwrules li.is-ok svg { opacity: 1; }
.pwrules li.is-bad { color: var(--ld-danger); }
.check { display: flex; align-items: flex-start; gap: 10px; font: 400 14px/20px var(--font-sans); color: var(--ld-text-secondary); cursor: pointer; }
.check input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--ld-green); flex: none; }
.captcha { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--ld-radius-md); border: 1px solid var(--ld-line); background: var(--ld-surface-2); font: 600 13px/16px var(--font-sans); color: var(--ld-text-secondary); align-self: flex-start; }
.countdown { padding: 6px 10px; border-radius: var(--ld-radius-md); background: rgba(5,6,8,.5); color: var(--ld-green); font: 800 18px/1 var(--font-display); }

/* Beside a video the arrows keep clear of the player's bar along its bottom. */
.over-out .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ld-text-strong); font: 600 12px/16px var(--font-sans); pointer-events: auto; text-decoration: none; text-underline-offset: 2px; }

/* Sign-up plan cards: full cards on desktop; on phones compact rows where the chosen one opens to show its limits */
@media (max-width: 760px) {
  .steps { gap: 4px; flex-wrap: nowrap; }
  .step + .step::before { width: 16px; margin-right: 4px; }
  .pick-head .emb { width: 36px !important; height: 36px !important; }
}
.subcard .sheet { display: none; position: absolute; height: 12px; border-radius: 8px 8px 0 0; border: 1px solid var(--ld-line-strong); border-bottom: 0; transition: transform var(--ld-ease-enter); }

/* Phones: secondary buttons drop their words so a row fits on one line (primary buttons keep theirs; counts stay) */
@media (max-width: 760px) {
  .icon-row { flex-wrap: nowrap !important; }
  .icon-row .btn:not(.btn-primary), .btn.ip { font-size: 0 !important; gap: 0; width: 44px; min-width: 44px !important; padding: 0 !important; justify-content: center; flex: none; }
  .icon-row .btn.like { width: auto; padding: 0 12px !important; }
  .icon-row .btn .num { font-size: 13px; margin-left: 6px; }
  .icon-row .btn .kbd, .btn.ip .kbd { display: none; }
  .selbar.icon-row { gap: 2px; padding: 6px 6px 6px 12px; }
  .selbar.icon-row .btn { width: 40px; min-width: 40px !important; }
}

/* Drag to select: the box on desktop; on touch, a held tile and a slide (no box is drawn) */
html.is-boxing, html.is-boxing * { user-select: none; -webkit-user-select: none; cursor: crosshair !important; }
.tile { -webkit-user-drag: none; }

/* Listing viewer: a file opened over the listing */
.lv { position: fixed; inset: 0; z-index: 60; display: grid; grid-template-columns: minmax(0, 1fr) 380px; background: rgba(5,6,8,.94); backdrop-filter: blur(6px); animation: ld-fade var(--ld-ease-enter) both; }
.lv .stage { animation: ld-pop-in var(--ld-ease-enter) both; }
@media (max-width: 760px) { .lv { grid-template-columns: minmax(0, 1fr); overflow-y: auto; } }

/* Keyframes */
@keyframes ld-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes ld-swing { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(12deg); } 50% { transform: rotate(-10deg); } 75% { transform: rotate(5deg); } }
@keyframes ld-pop { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.25); } }
@keyframes ld-glint { 0%, 88% { left: -60%; } 96%, 100% { left: 130%; } }
@keyframes ld-bob { 0%, 100% { transform: translateY(-6px); } 50% { transform: translateY(-10px); } }
@keyframes ld-sweep { from { background-position: 150% 0; } to { background-position: -50% 0; } }
@keyframes ld-unblur { from { filter: blur(12px); opacity: .6; } to { filter: none; opacity: 1; } }
@keyframes ld-leak { 0%, 55% { transform: translateX(-900px); opacity: 0; } 65% { opacity: .9; } 85%, 100% { transform: translateX(900px); opacity: 0; } }
@keyframes ld-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ld-fill { from { width: 0; } }

/* Phone */
@media (max-width: 760px) {
  .wrap { padding: 0 16px; }
  .section { padding-top: 56px; }
  .t-display { font-size: 28px; line-height: 34px; }
  .hdr { height: 56px; }
  .tabbar { top: 56px; }
  .hide-phone { display: none !important; }
  .grid-phone-1 { grid-template-columns: minmax(0, 1fr) !important; }
  .btn-phone-block { width: 100%; }
  .foot { margin-top: 40px; padding-bottom: 20px; }
  .hero { display: block; min-height: 0; }
  .foot-links { margin-left: 0; display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
}
@media (min-width: 761px) { .show-phone { display: none !important; } }

/* ---------- Closing motion, toasts and bulk actions ---------- */
@keyframes ld-selbar-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(16px); } }
@keyframes ld-tile-out { from { opacity: 1; transform: none; filter: none; } to { opacity: 0; transform: scale(.82); filter: blur(4px); } }
.selbar.is-closing { animation: ld-selbar-out 200ms ease-in both; }
.meter > span { animation: ld-fill 1s var(--ld-ease-out) both; }

/* Deleted tiles shrink away before the grid closes the gap */
.is-removing { animation: ld-tile-out 320ms ease-in both; pointer-events: none; }

/* Album picker in the Move and Create album dialogs */
.strip { display: flex; gap: 6px; }
.strip > span { width: 44px; height: 44px; border-radius: var(--ld-radius-sm); flex: none; animation: ld-pop-in var(--ld-ease-enter) both; }
.strip > span:nth-child(2) { animation-delay: 40ms; } .strip > span:nth-child(3) { animation-delay: 80ms; } .strip > span:nth-child(4) { animation-delay: 120ms; }
.strip .more { display: inline-flex; align-items: center; justify-content: center; background: var(--ld-surface-4); color: var(--ld-text-secondary); font: 700 12px/16px var(--font-sans); }
.selbar .flagpop { position: absolute; bottom: calc(100% + 8px); width: 230px; padding: 6px; transform-origin: bottom center; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .stagger > * { opacity: 1 !important; transform: none !important; }
}

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

  .tabs { flex-wrap: nowrap; }
  .tabs button { flex: 1 1 0; padding: 0 4px; white-space: nowrap; }

  /* Sign-up bar: what you pay, then Offers and Continue on one row; the code box lives in the Offers dialog */
  .paybar-in { gap: 10px; padding-top: 10px; padding-bottom: 12px; }
  .paybar-in > div:first-child { flex-basis: 100% !important; }
  .paybar-in > p { font-size: 12px; line-height: 16px; }
}
@media (max-width: 760px) {
  .hero-acts .btn { flex: 1 1 auto; min-width: 0; padding: 0 12px; white-space: nowrap; }
}

/* Server down page: one static file, so everything it needs is here and inline */
.down { position: relative; min-height: 100vh; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; padding: 28px 16px 40px; overflow: hidden; background: radial-gradient(50% 45% at 50% 32%, rgba(251,176,31,.07), transparent 70%), var(--ld-surface-0); }
.down.is-back { background: radial-gradient(50% 45% at 50% 32%, rgba(14,229,155,.09), transparent 70%), var(--ld-surface-0); transition: background .6s ease-out; }
@keyframes ld-iris-search { 0%, 100% { transform: rotate(0) scale(.9); opacity: .75; } 45% { transform: rotate(36deg) scale(1); opacity: 1; } 60% { transform: rotate(30deg) scale(.97); } }
@media (max-width: 760px) {
  .down { padding: 20px 16px 28px; }
}

/* In-page failures: the site is up, one request isn't */
.es-demo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 14px; border: 1px dashed var(--ld-line-strong); border-radius: var(--ld-radius-lg); }
.es-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; }
.es-cell { display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: var(--ld-radius-xl); background: var(--ld-surface-2); border: 1px solid var(--ld-line); }
.es-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.es-rows { display: flex; flex-direction: column; gap: 8px; }
.es-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--ld-radius-md); background: var(--ld-surface-3); border: 1px solid var(--ld-line); transition: border-color var(--ld-ease); }
.es-row.is-failed { border-color: rgba(255,138,156,.45); }
.es-th { width: 40px; height: 40px; border-radius: var(--ld-radius-sm); flex: none; }
.es-name { flex: 1; min-width: 0; display: flex; flex-direction: column; font: 600 14px/18px var(--font-sans); color: var(--ld-text-strong); }
.es-name small { font: 400 12px/16px var(--font-sans); color: var(--ld-text-muted); }
@media (max-width: 1100px) { .es-grid { grid-template-columns: minmax(0, 1fr); } }

/* Desktop: the hero and the three steps share the first screen. The title stays for screen readers only. */
@media (min-width: 761px) {
  .hero:not(.hero-member) { min-height: clamp(540px, calc(100svh - 64px - 196px), 760px); }
}

/* ---------- Frame on Lens core (theme site) ---------- */
html.ld-site { background: var(--ld-surface-1); }
.ld-site body { min-height: 100vh; display: flex; flex-direction: column; background: var(--ld-surface-1); }
.ld-site main { flex: 1 0 auto; }
.skip { position: absolute; left: 12px; top: -48px; z-index: 100; padding: 10px 14px; border-radius: var(--ld-radius-md); background: var(--ld-green); color: var(--ld-on-green); font: 700 13px/16px var(--font-sans); transition: top var(--ld-ease); }
.skip:focus { top: 12px; color: var(--ld-on-green); }
.foot-brand { display: flex; align-items: center; gap: 16px; margin-right: auto; }
.foot-brand img { width: 56px; height: 56px; flex: none; }
[hidden] { display: none !important; }

/* Header menus: a pop under the button on desktop, a bottom sheet on phones */
.hdr-menu { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
.hdr-menu > .pop { pointer-events: auto; position: absolute; top: var(--anchor-top, 60px); right: var(--anchor-right, 32px); width: 280px; padding: 8px; transform-origin: top right; }
.hdr-menu-who { display: flex; align-items: center; gap: 12px; padding: 8px 8px 12px; border-bottom: 1px solid var(--ld-line); margin-bottom: 6px; }
.hdr-menu.is-closing > .pop { animation: ld-pop-out 160ms ease-in both; }
.hdr-pop { position: fixed; z-index: 40; top: var(--anchor-top, 60px); right: var(--anchor-right, 80px); width: 360px; padding: 8px 8px 4px; transform-origin: top right; }
.hdr-pop.is-closing { animation: ld-pop-out 160ms ease-in both; }
.hdr-pop-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 10px; }
.hdr-pop-foot { border-top: 1px solid var(--ld-line); margin-top: 4px; padding: 10px 8px; text-align: center; }
@media (max-width: 760px) {
  .hdr-menu { pointer-events: auto; }
  .hdr-menu > .scrim { position: absolute; inset: 0; width: 100%; border: 0; }
  .hdr-menu > .pop { top: auto; left: 0; right: 0; bottom: 0; width: auto; padding: 0 12px 24px; border-radius: 20px 20px 0 0; border-bottom: 0; box-shadow: var(--ld-shadow-modal); animation: ld-sheet-in var(--ld-ease-enter) both; }
  .hdr-menu > .pop .menu-item { height: 48px; }
  /* The account menu as the Settings sheet's tiles (settings.css .st-tile): two columns of roomy tiles, easy to press. */
  #ld-account > .pop { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 16px 24px; }
  #ld-account > .pop > .handle, #ld-account > .pop > .hdr-menu-who, #ld-account > .pop > .menu-sep, #ld-account > .pop > .btn { grid-column: 1 / -1; }
  #ld-account > .pop > .hdr-menu-who { margin-bottom: 4px; }
  #ld-account > .pop > .menu-sep { display: none; }
  #ld-account > .pop .menu-item { height: auto; min-height: 52px; gap: 10px; padding: 0 14px; border-radius: var(--ld-radius-md); background: var(--ld-surface-3); color: var(--ld-text); font: 600 14px/18px var(--font-sans); }
  #ld-account > .pop > form, #ld-account > .pop > form .menu-item { width: 100%; }
  .hdr-menu.is-closing > .pop { animation: ld-sheet-out 220ms ease-in both; }
  .hdr-menu.is-closing > .scrim { animation: ld-fade-out 220ms ease-in both; }
  .hdr-pop { left: 12px; right: 12px; width: auto; }
}

/* ---------- File page on Lens core ---------- */
.page-file main { display: flex; flex-direction: column; }
.viewer.is-wide { grid-template-columns: minmax(0, 1fr) 0; }
/* The picture's box (.pic-box) fits the stage from the first paint, from the file's own width and height (--w, --wr,
   --ar), never enlarged; the preview and the full file fill it, the full file fading in once decoded. Large: the script
   sizes the box (zoom.ts) and the stage scrolls without scrollbars, dragged to look around. */
.page-file { --stage-h: max(320px, calc(100vh - 220px)); }
/* 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) {
  .page-file { --stage-h: max(320px, calc(100svh - 64px - 16px)); }
}
/* NSFW pictures are blurred only where the site's Blur NSFW setting is on (html.nsfw-blur). */
.nsfw-blur .filmstrip a[data-nsfw], .nsfw-blur .filmstrip img[data-nsfw] { filter: blur(6px); }

/* Requested: waiting for the member's answer; hover offers to take the request back. */
.follow.is-requested { background: var(--ld-surface-4); border-color: var(--ld-line-strong); color: var(--ld-text); }
.follow.is-requested:hover { border-color: rgba(255,138,156,.5); color: var(--ld-danger); }
dialog.modal .code { white-space: pre-wrap; word-break: break-all; }
.like.is-busy { pointer-events: none; opacity: .8; }
@media (max-width: 760px) {
  .page-file { --stage-h: 70vh; }
}
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.fld textarea { min-height: 96px; padding: 12px 14px; border-radius: var(--ld-radius-md); border: 1px solid var(--ld-line-strong); background: var(--ld-surface-3); color: var(--ld-text); font: 400 15px/22px var(--font-sans); resize: vertical; outline: none; }
.fld textarea:focus { border-color: var(--ld-green); box-shadow: var(--ld-focus-ring); }
.pop.is-closing { animation: ld-pop-out 160ms ease-in both; }
dialog.modal:not([open]) { display: none; }
.menu-item.danger, .menu-item.danger svg { color: var(--ld-danger); }
.subs { margin-top: 12px; }
.subs.is-all .subs-more { display: none; }
.subs.is-searching [data-subs-toggle], .subs.is-searching .subs-more { display: none; }
/* Listings: a grid of square tiles (Grid) or the pictures at their own shape (Stream) */
.listing { margin-top: 20px; }
.tilegrid { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.nsfw-blur .tile.is-nsfw img, .nsfw-blur .ld-pp-tile.is-nsfw img, .nsfw-blur .ac-img img.is-nsfw, .nsfw-blur .subcard-cover img.is-nsfw { filter: blur(14px); }

/* 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. */
.stream-item:hover .stream-tt, .stream-tt:focus-visible, .stream-tt[aria-pressed="true"] { opacity: 1; }
.more-wrap { display: flex; justify-content: center; margin-top: 28px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pager2 [aria-disabled="true"] { opacity: .4; pointer-events: none; }
a.is-busy { pointer-events: none; opacity: .85; }
/* Selecting in a listing */
.listing.is-selecting .tile .tick, .listing.is-selecting .ac .ac-tick { opacity: 1; }
.listing.is-selecting .tile, .listing.is-selecting .ac { cursor: pointer; user-select: none; -webkit-user-select: none; }
.strip > img { width: 44px; height: 44px; border-radius: var(--ld-radius-sm); object-fit: cover; flex: none; animation: ld-pop-in var(--ld-ease-enter) both; }
dialog.modal .search { flex: none; max-width: none; }
/* The password gate and the error pages: the dark area reaches down to the footer. */
.page-gate main, .page-error main { display: flex; }
.page-gate .gate, .page-error .gate { flex: 1; min-width: 0; }
.page-gate .foot, .page-error .foot { margin-top: 0; }
.gate-card { width: 440px; max-width: 100%; padding: 36px 32px 28px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; box-shadow: var(--ld-shadow-modal); animation: ld-rise .4s ease-out both; }
.gate-blades { transform-origin: 60px 60px; animation: ld-iris-search 4s ease-in-out infinite; }
.gate-form { width: 100%; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.gate-form .btn-block { margin-top: 8px; }
.pw-field { position: relative; }
.pw-field input { width: 100%; height: 48px; padding: 0 48px 0 14px; border-radius: var(--ld-radius-md); border: 1px solid var(--ld-line-strong); background: var(--ld-surface-3); color: var(--ld-text); font: 400 16px/24px var(--font-sans); outline: none; transition: border-color var(--ld-ease), box-shadow var(--ld-ease); }
.pw-field input:focus { border-color: var(--ld-green); box-shadow: var(--ld-focus-ring); }
.pw-field input[aria-invalid="true"] { border-color: var(--ld-danger); animation: ld-shake .3s ease-in-out; }
.pw-eye { position: absolute; right: 4px; top: 4px; width: 40px; height: 40px; border: 0; border-radius: var(--ld-radius-sm); background: transparent; color: var(--ld-text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.pw-eye:hover { background: var(--ld-fill-hover); color: var(--ld-text); }
.gate-captcha { display: flex; justify-content: center; }

/* A feed post's Open album slide: the album's next pictures blurred under "+N more", the album beside. */
.lv3-end-in .btn, .lv3-album-open { min-height: 44px; }
.lv3-album-open { align-self: flex-start; }

/* 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. */
.lv3-pop .menu-item { height: auto; min-height: 40px; padding: 8px 12px; white-space: normal; }
.lv3-pop .menu-item.is-on, .lv3-pop .menu-item.is-on svg { color: var(--ld-green); }
.pf-links .link { color: var(--ld-text-muted); }

/* The member's home on their profile: counts by the avatar, Your space, the people dialog */
.ld-people { width: 440px; gap: 12px; }
.ld-people-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 380px; min-height: 120px; overflow: auto; }
.ld-people-list li { display: flex; align-items: center; gap: 12px; padding: 8px 4px; }
.ld-people-list .btn { min-width: 96px; }
.ld-people-note { padding: 24px 4px; text-align: center; }
/* A member's row in these lists (profile people, Reposted by). */
.ld-people-face { display: flex; flex: none; }
.ld-people-list .who-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ld-people-list .who-t a, .ld-people-list .who-t > span.t-label { color: var(--ld-text-strong); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-reposters-body { display: flex; flex-direction: column; gap: 8px; }
.ld-reposters-more { align-self: center; min-height: 44px; }
.ld-reposters-sheet .ld-reposters-body { padding: 0 16px 16px; }
.ld-reposters-sheet .ld-people-list { max-height: none; }

/* Featured on the profile */
.seg-link .num { opacity: .8; }
.search-results { margin-bottom: 24px; transition: opacity .15s ease-out; }
.search-results.is-loading { opacity: .55; }
.search-results [data-search-note] { margin-bottom: 12px; }
.search.is-busy svg { color: var(--ld-green); }
.search-results > p { margin-bottom: 12px; }
.listing[hidden] { display: none; }
@media (max-width: 760px) {
  .ld-people { width: 100%; }
}

/* Home */
.home-close { position: relative; overflow: hidden; min-height: 240px; padding: 48px; display: flex; align-items: center; background: var(--ld-surface-0); }
.home-close-art { position: absolute; top: 0; right: 0; bottom: 0; width: 55%; opacity: .55; }
.home-close-fade { position: absolute; inset: 0; background: linear-gradient(90deg, var(--ld-surface-0), transparent 60%); }
a.drop { color: inherit; text-decoration: none; cursor: pointer; }
a.drop:hover { border-color: var(--ld-green-line); }
.promo-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--ld-surface-1) 92%, transparent); border-top: 1px solid var(--ld-green-line); backdrop-filter: blur(12px); }
@media (max-width: 760px) {
  .home-close { padding: 28px 20px; min-height: 0; }
}
.cmp > .cmp-row > .is-lit { background: color-mix(in srgb, var(--ld-green) 6%, transparent); }

/* Error pages */
.error-acts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.error-ref { font: 600 12px/16px ui-monospace, Menlo, monospace; color: var(--ld-text-secondary); background: var(--ld-surface-3); padding: 2px 6px; border-radius: var(--ld-radius-sm); }

/* Notifications and the bell's panel */
.nt-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.nt-item { position: relative; display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 12px 14px; border-radius: var(--ld-radius-lg); transition: background-color var(--ld-ease); }
.nt-item:hover { background: var(--ld-surface-3); }
.nt-item.is-unread { background: color-mix(in srgb, var(--ld-green) 5%, var(--ld-surface-2)); }
.nt-hit { position: absolute; inset: 0; border-radius: inherit; z-index: 0; }
.nt-who { position: relative; flex: none; width: 44px; height: 40px; display: flex; align-items: center; }
.nt-faces { display: flex; }
.nt-faces .avatar + .avatar { margin-left: -14px; box-shadow: 0 0 0 2px var(--ld-surface-1); border-radius: 50%; }
.nt-sys { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.nt-kind { position: absolute; left: 22px; bottom: -2px; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--ld-surface-1); }
.nt-item.is-system .nt-kind { display: none; }
.nt-text { position: relative; z-index: 1; pointer-events: none; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.nt-text b { color: var(--ld-text-strong); font-weight: 700; }
.nt-thumb { width: 44px; height: 44px; flex: none; border-radius: var(--ld-radius-sm); overflow: hidden; background: var(--ld-surface-4); }
.nt-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nt-thumb.is-nsfw img { filter: blur(6px); transform: scale(1.15); }
.nt-tools { position: relative; z-index: 1; display: flex; gap: 2px; opacity: 0; transition: opacity var(--ld-ease); }
.nt-item:hover .nt-tools, .nt-item:focus-within .nt-tools { opacity: 1; }
.nt-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: transparent; transition: background-color var(--ld-ease), transform var(--ld-ease-enter); }
.nt-item.is-unread .nt-dot { background: var(--ld-green); animation: ld-pop .3s ease-out; }
@media (max-width: 760px) {
  .nt-item { padding: 10px 8px; gap: 10px; }
  .nt-tools { opacity: 1; flex-direction: column; gap: 0; }
  .nt-tools .btn { width: 32px; height: 32px; }
  .nt-thumb { width: 40px; height: 40px; }
}
.up-switch { display: flex; align-items: center; gap: 12px; }
/* The album dialogs' privacy choices, each with what it does (frontend/site/ui/privacy-choices.tsx). */
.ld-pv { display: flex; flex-direction: column; gap: 6px; }
.ld-pv-row { display: flex; align-items: flex-start; gap: 12px; width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--ld-line); border-radius: var(--ld-radius-md); background: var(--ld-surface-3); color: var(--ld-text); text-align: left; cursor: pointer; transition: border-color var(--ld-ease), background-color var(--ld-ease); }
.ld-pv-row:hover:not(:disabled) { border-color: var(--ld-line-strong); }
.ld-pv-row.is-on { border-color: var(--ld-green); box-shadow: inset 0 0 0 1px var(--ld-green); background: var(--ld-green-surface); }
.ld-pv-row:disabled { opacity: .5; cursor: not-allowed; }
.ld-pv-dot { flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; border: 2px solid var(--ld-line-strong); }
.ld-pv-row.is-on .ld-pv-dot { border-color: var(--ld-green); box-shadow: inset 0 0 0 4px var(--ld-surface-2); background: var(--ld-green); }
.ld-pv-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ld-pv-t b { display: inline-flex; align-items: center; gap: 6px; font: 600 14px/18px var(--font-sans); color: var(--ld-text-strong); }
.ld-pv-t b .i { color: var(--ld-text-muted); }
.ld-pv-t small { font: 400 13px/18px var(--font-sans); color: var(--ld-text-secondary); }
.ld-pv-note { display: block; margin-top: 4px; }
/* "Also post to my followers" for a link-only album's uploads (upload/ui/post-options.tsx). */
.ld-fo { display: flex; flex-direction: column; gap: 12px; }
.ld-fo-more { display: flex; flex-direction: column; gap: 12px; overflow: hidden; animation: ld-fo-open 180ms ease-out backwards; }
.ld-fo-more.is-shown { overflow: visible; }
@keyframes ld-fo-open { from { max-height: 0; opacity: 0; } to { max-height: 260px; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ld-fo-more { animation: none; overflow: visible; } }
.ld-feed-fo { display: inline-flex; align-items: center; gap: 4px; }
/* A post that remembers a past day (On this day's Repost): "On this day · 24 Oct 2017 · 9 years ago". */
.ld-post-memory { margin: 0 0 6px; }
.ld-post-memory > span { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 12px; background: var(--ld-surface-3); color: var(--ld-text-muted); }
.ld-fo-thumb { display: block; width: 64px; height: 64px; border-radius: var(--ld-radius-md); object-fit: cover; }
.switch { position: relative; width: 44px; height: 26px; flex: none; border-radius: 13px; border: 1px solid var(--ld-line-strong); background: var(--ld-surface-4); cursor: pointer; transition: background-color var(--ld-ease-enter), border-color var(--ld-ease-enter); }
.switch > span { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--ld-text-muted); transition: transform var(--ld-ease-enter), background-color var(--ld-ease-enter); }
.switch.is-on { background: var(--ld-green); border-color: var(--ld-green); }
.switch.is-on > span { transform: translateX(18px); background: var(--ld-on-green); }
.nt-face { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: var(--ld-surface-4); color: var(--ld-text-strong); font: 700 12px/1 var(--font-sans); }
.nt-face img { width: 100%; height: 100%; object-fit: cover; }
.nt-faces .nt-face { width: 28px; height: 28px; font-size: 11px; }
.nt-faces .nt-face + .nt-face { margin-left: -14px; box-shadow: 0 0 0 2px var(--ld-surface-1); }
.nt-sys { background: var(--ld-surface-4); color: var(--ld-text-muted); }
.nt-sys--billing { background: rgba(251,176,31,.12); color: var(--ld-warning); }
.nt-sys--announcement { background: var(--ld-green-soft); color: var(--ld-green); }
.nt-kind--like, .nt-kind--comment_like { background: #ff5d7a; color: #fff; }
.nt-kind--follow { background: var(--ld-green); color: var(--ld-on-green); }
.nt-kind--follow_accepted { background: var(--ld-green); color: var(--ld-on-green); }
.nt-kind--comment, .nt-kind--reply, .nt-kind--mention, .nt-kind--repost { background: var(--ld-green); color: var(--ld-on-green); }
.nt-quote { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.nt-kind--follow_request { background: var(--ld-surface-4); color: var(--ld-green); }
.ld-follow-answer { pointer-events: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 2px; }
.ld-follow-answer .ld-follow-link { display: inline-flex; align-items: center; gap: 6px; color: var(--ld-text-muted); cursor: pointer; }
.ld-follow-answer .ld-follow-link input { accent-color: var(--ld-green); }
.ld-follow-answer.is-done .btn, .ld-follow-answer.is-done .ld-follow-link { display: none; }
.nt-kind .i { width: 10px; height: 10px; }
.nt-text a { pointer-events: auto; color: var(--ld-text-strong); font-weight: 700; }
.nt-text a.nt-notice { color: inherit; font-weight: inherit; }
.nt-text .t-body { overflow-wrap: anywhere; }
.nt-item.is-unread .nt-ic-unread, .nt-item:not(.is-unread) .nt-ic-read { display: none; }
/* The bell's rows fading to read once shown. */
.nt-list.is-settling .nt-item, .nt-list.is-settling .nt-dot { transition: background-color 1.5s ease; }
.nt-item.is-closing { animation: ld-fade-out .2s ease-in both; }
.nt-item[hidden] { display: none; }
.hdr-pop--bell { width: 380px; }
.hdr-pop--bell .hdr-pop-head { display: flex; align-items: center; justify-content: space-between; }
.hdr-pop--bell .hdr-pop-head .link { background: none; border: 0; padding: 0; cursor: pointer; }
.hdr-pop--bell .nt-list { max-height: min(60vh, 460px); overflow: auto; }
.hdr-pop--bell .nt-item { flex: none; min-height: 64px; padding: 10px 8px; }
.hdr-pop--bell .nt-tools { display: none; }
.hdr-pop--bell.is-loading .nt-item { opacity: .6; transition: opacity var(--ld-ease); }
.bell-wait { display: flex; justify-content: center; padding: 24px; color: var(--ld-text-muted); }
.bell-empty, .bell-error { padding: 16px 8px; text-align: center; }
.bell-error .link { background: none; border: 0; padding: 0; cursor: pointer; }
@media (max-width: 760px) { .hdr-pop--bell { width: auto; } .hdr-pop--bell .nt-list { max-height: calc(100dvh - 180px); } }
.ld-feed-owner .btn { min-height: 44px; }
.ld-post-end-in .btn { min-height: 44px; }

/* Upload page */
.switch:disabled { opacity: .5; cursor: default; }

/* The uploader's rows, options, edit dialog, results and panel (frontend-parity-upload.md) */
.ld-up-chipst { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--ld-radius-full); font: 600 12px/16px var(--font-sans); white-space: nowrap; border: 1px solid var(--ld-line); background: var(--ld-surface-4); color: var(--ld-text-secondary); }
.ld-up-chipst.is-ok { color: var(--ld-text-secondary); }
.ld-up-chipst.is-wait { color: var(--ld-text-muted); border-style: dashed; }
.ld-up-chipst.is-busy, .ld-up-chipst.is-good { color: var(--ld-green); border-color: var(--ld-green-line); background: var(--ld-green-surface); }
.ld-up-chipst.is-bad { color: var(--ld-danger); border-color: rgba(255,138,156,.4); background: rgba(255,93,122,.08); }
.ld-up-chipst.is-mute { color: var(--ld-text-dim); }
.meter.is-paused > span { background: var(--ld-text-muted) !important; }
.ld-up-input, .ld-up-form .fld > input { height: 48px; padding: 0 14px; border-radius: var(--ld-radius-md); border: 1px solid var(--ld-line-strong); background: var(--ld-surface-3); color: var(--ld-text); font: 400 16px/24px var(--font-sans); outline: none; }
.ld-up-bar, .ld-up-sheet-scrim { display: none; }
.ld-pick-row small { flex: 0 1 auto; min-width: 0; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-pick-row:has(small) .ld-pick-label { flex: 1 0 auto; max-width: 70%; }
.ld-pick-layer, .ld-pick-scrim { margin: 0; padding: 0; border: 0; width: auto; height: auto; max-width: none; max-height: none; overflow: visible; color: inherit; }
.ld-pick-layer { background: transparent; }
@media (max-width: 760px) {
  .ld-up-bar { display: flex; flex-direction: column; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(15,18,22,.96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--ld-line); }
  .ld-up-summary { height: 40px; font-size: 14px; }
  .ld-up-sheet-scrim { display: flex; }
  .page-upload main { padding-bottom: 160px; }
}

/* Sign in and the account pages */
.acc-alert { padding: 10px 12px; border-radius: var(--ld-radius-md); border: 1px solid rgba(255,138,156,.45); background: rgba(255,93,122,.08); color: #ffb3c0; font: 500 14px/20px var(--font-sans); animation: ld-shake .35s ease-out; }
/* A passkey that didn't work, under the heading: amber, with its icon. */
.acc-alert.is-warn { display: flex; align-items: center; gap: 10px; border-color: rgba(251,176,31,.4); background: rgba(251,176,31,.08); color: var(--ld-text); animation: ld-fade 200ms ease-out both; }
.acc-alert.is-warn[hidden] { display: none; }
.acc-alert.is-warn svg { flex: none; color: var(--ld-warning); }
@media (prefers-reduced-motion: reduce) { .acc-alert.is-warn { animation: none; } }
.acc-note { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--ld-radius-md); background: var(--ld-green-surface); border: 1px solid var(--ld-green-line); color: var(--ld-text); font: 500 14px/20px var(--font-sans); }
.acc-note .i { color: var(--ld-green); flex: none; margin-top: 2px; }
.btn.is-locked { opacity: .5; pointer-events: none; }

/* The typo hint under an email field (frontend/site/email-hint.ts). */
.ld-email-hint { margin: 4px 0 0; font: 500 13px/18px var(--font-sans); color: var(--ld-text-secondary); }
.ld-email-hint .link { font: inherit; color: var(--ld-warning); overflow-wrap: anywhere; }

/* A notice to act on (partials/site/notice): Settings › Account's delivery alert, the frame's one-time banner. */
.ld-notice { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border-radius: var(--ld-radius-lg); border: 1px solid rgba(251,176,31,.45); background: rgba(251,176,31,.08); color: var(--ld-text); animation: ld-fade 200ms ease-out both; }
.ld-notice > .i { flex: none; color: var(--ld-warning); margin-top: 1px; }
.ld-notice-body { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 2px; font: 500 14px/20px var(--font-sans); overflow-wrap: anywhere; }
.ld-notice-body b { font-weight: 600; }
.ld-notice-body span { color: var(--ld-text-secondary); }
.ld-notice-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ld-notice-acts:empty { display: none; }
.ld-notice-acts form { margin: 0; }
.ld-notice-acts .btn { min-height: 40px; }
.ld-notice-x { margin: -6px -8px 0 auto; }
.ld-notice.is-frame { margin: 12px auto 0; max-width: min(1200px, calc(100% - 32px)); }
.ld-notice[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .ld-notice { animation: none; } }

/* Sign-up, its offers and its account step */
.su-modal-head { display: flex; align-items: center; gap: 12px; } .su-modal-head h2 { flex: 1; }
.su-modal-foot { display: flex; justify-content: flex-end; gap: 8px; }
.su-offers { display: flex; flex-direction: column; gap: 8px; }
.su-offers .opt { flex-direction: column; align-items: flex-start; gap: 6px; }
.su-opt-head { display: flex; align-items: center; gap: 10px; width: 100%; }
.su-opt-head .t-label { font-size: 14px; }
.su-kind { height: 20px; font-size: 10px; letter-spacing: .06em; }
.su-break { color: var(--ld-green); }
/* The Offers window's code box: a standard field with its Apply button beside it, at the field's height. */
.su-code { flex-direction: row; align-items: center; gap: 8px; }
.su-code input { flex: 1; min-width: 0; }
.su-code.is-bad input { border-color: var(--ld-danger); animation: ld-shake .3s ease-in-out; }
[data-code-status]:empty { display: none; }
.countdown[data-state="soon"] { color: var(--ld-warning); }
.countdown[data-state="over"] { color: var(--ld-danger); }
/* The billing card's fields (the billing module's BillingDetailsForm, one card everywhere) */
.ld-billing-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; margin: 6px 0 4px; }
.ld-billing-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ld-billing-field.is-wide, .ld-billing-fields > .is-wide { grid-column: 1 / -1; }
.ld-billing-field label { font: 600 13px/16px var(--font-sans); color: var(--ld-text-secondary); }
.ld-billing-fields .ld-billing-field input, .ld-billing-fields .ld-billing-field select { width: 100%; min-width: 0; height: 48px; box-sizing: border-box; border: 1px solid var(--ld-line-strong); border-radius: var(--ld-radius-md); padding: 0 14px; background: var(--ld-surface-3); color: var(--ld-text); font: 400 16px/24px var(--font-sans); outline: none; }
.ld-billing-fields .ld-billing-field input:focus, .ld-billing-fields .ld-billing-field select:focus { border-color: var(--ld-green); box-shadow: var(--ld-focus-ring); }
.ld-billing-field small, .ld-billing-hint { margin: 0; font: 400 12px/16px var(--font-sans); color: var(--ld-text-dim); }
.ld-billing-req, .ld-billing-opt { font-weight: 400; font-size: 11px; color: var(--ld-text-dim); margin-left: 4px; }
.ld-billing-biz { display: flex; align-items: center; justify-content: space-between; gap: 14px; font: 600 13px/16px var(--font-sans); color: var(--ld-text-secondary); cursor: pointer; min-height: 44px; }
.ld-billing-bizfields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.ld-billing-fields:has(.ld-billing-biz input:not(:checked)) .ld-billing-bizfields { display: none; }
@media (max-width: 640px) {
  .ld-billing-fields, .ld-billing-bizfields { grid-template-columns: 1fr; }
}

/* Settings */
/* The on/off switch: Settings rows and the billing card's business box */
.st-switch { position: relative; width: 44px; height: 26px; flex: none; }
.st-switch input[type="checkbox"] { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.st-switch > span { position: absolute; inset: 0; border-radius: 13px; border: 1px solid var(--ld-line-strong); background: var(--ld-surface-4); transition: background-color var(--ld-ease-enter), border-color var(--ld-ease-enter); pointer-events: none; }
.st-switch > span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--ld-text-muted); transition: transform var(--ld-ease-enter), background-color var(--ld-ease-enter); }
.st-switch input:checked + span { background: var(--ld-green); border-color: var(--ld-green); }
.st-switch input:checked + span::after { transform: translateX(18px); background: var(--ld-on-green); }
.st-switch input:focus-visible + span { box-shadow: var(--ld-focus-ring); }
.st-row { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 18px; border-top: 1px solid var(--ld-line); color: inherit; text-decoration: none; }
.st-codelist li.is-used { color: var(--ld-text-dim); text-decoration: line-through; }

button.link { background: none; border: 0; padding: 0; font: inherit; color: var(--ld-green); cursor: pointer; text-align: left; }
/* Settings › Profile: follow requests and followers. */
.ld-people-list { list-style: none; margin: 0; padding: 0; }
.ld-people-list:empty { display: none; }
.ld-people-note { min-height: 0; }
.ld-people-more { justify-content: center; min-height: 52px; }

/* The site's dropdown (frontend/site/ui/picker.ts): a field-like button, its list in the .pop menu style, a sheet on phones */
select.ld-select-native { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; opacity: 0; pointer-events: none; }
.ld-select { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; height: 48px; padding: 0 12px 0 14px; border-radius: var(--ld-radius-md); border: 1px solid var(--ld-line-strong); background: var(--ld-surface-3); color: var(--ld-text); font: 400 16px/24px var(--font-sans); text-align: left; cursor: pointer; transition: border-color var(--ld-ease), box-shadow var(--ld-ease); }
.ld-select:hover { border-color: var(--ld-line-hover, var(--ld-text-dim)); }
.ld-select:focus-visible, .ld-select[aria-expanded="true"] { outline: none; border-color: var(--ld-green); box-shadow: var(--ld-focus-ring); }
.ld-select.is-placeholder .ld-select-text { color: var(--ld-text-dim); }
.ld-select.is-invalid { border-color: var(--ld-danger); }
.ld-select:disabled { opacity: .55; cursor: not-allowed; }
.ld-select-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-select svg { flex: none; color: var(--ld-text-muted); transition: transform var(--ld-ease-enter); }
/* Only the arrow at the end turns, not a leading icon */
.ld-select[aria-expanded="true"] > svg:last-child { transform: rotate(180deg); }
.ld-select.st-select, .ld-select.btn-sm { height: 40px; font-size: 14px; }
.ld-pick-layer { position: fixed; inset: 0; z-index: 70; pointer-events: none; }
.ld-pick-layer > .ld-pick { position: fixed; pointer-events: auto; }
.ld-pick { display: flex; flex-direction: column; max-height: 360px; padding: 6px; outline: none; }
.ld-pick-search { display: flex; align-items: center; gap: 8px; height: 40px; margin: 0 0 6px; padding: 0 10px; border-radius: var(--ld-radius-md); background: var(--ld-surface-3); border: 1px solid var(--ld-line); color: var(--ld-text-muted); flex: none; }
.ld-pick-search:focus-within { border-color: var(--ld-green); }
.ld-pick-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--ld-text); font: 400 15px/20px var(--font-sans); outline: none; }
.ld-list-search { margin: 0; width: 100%; padding-right: 4px; }
.ld-list-search input::-webkit-search-cancel-button { display: none; }
.ld-list-search-x { flex: none; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ld-text-secondary); cursor: pointer; }
.ld-list-search-x:hover { background: var(--ld-fill-hover); color: var(--ld-text); }
@media (max-width: 760px) { .ld-list-search { height: 44px; } .ld-list-search input { font-size: 16px; } }
.ld-pick-list { overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 1px; }
.ld-pick-row.is-off { opacity: .45; cursor: default; }
.ld-pick-row small { color: var(--ld-text-dim); font: 400 12px/16px var(--font-sans); flex: none; }
.ld-pick-tick { visibility: hidden; color: var(--ld-green) !important; flex: none; }
.ld-pick-row.is-on .ld-pick-tick { visibility: visible; }
.ld-pick-row.is-on { color: var(--ld-text-strong); }
.ld-pick-group { padding: 10px 12px 4px; letter-spacing: .06em; }
.ld-pick-none { padding: 12px; }
.ld-pick-action { flex: none; width: 100%; height: 44px; margin-top: 6px; border: 0; border-top: 1px solid var(--ld-line); border-radius: 0 0 var(--ld-radius-md) var(--ld-radius-md); background: transparent; color: var(--ld-green); cursor: pointer; text-align: left; }
.ld-pick-action:focus-visible { outline: none; background: var(--ld-fill-hover); box-shadow: inset 0 0 0 2px var(--ld-green); }
.ld-pick-action .ld-pick-label { font-weight: 600; }
.ld-pick-action svg { color: var(--ld-green); }
.ld-pick-scrim { position: fixed; inset: 0; z-index: 70; background: var(--ld-scrim); display: flex; align-items: flex-end; animation: ld-fade var(--ld-ease-enter) both; }
.ld-pick-sheet { width: 100%; max-height: 78vh; padding: 8px 12px calc(16px + env(safe-area-inset-bottom)); }
.ld-pick-sheet .ld-pick-row { min-height: 48px; font-size: 15px; }
.ld-pick-grab { display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--ld-line-strong); margin: 4px auto 10px; flex: none; }
.ld-pick-title { padding: 0 8px 10px; flex: none; }
.ld-pick.is-closing { animation: ld-pop-out 140ms ease-in both; }
.ld-pick-sheet.is-closing { animation: ld-sheet-out 200ms ease-in both; }
@media (prefers-reduced-motion: reduce) { .ld-pick, .ld-pick-scrim, .ld-select svg { animation: none !important; transition: none !important; } }
/* A member's header ends in their tier's colour with a soft glow (grey for Free), as the old site's header did. */
body[data-tier] { --hdr-tier: var(--ld-tier-free); }
body[data-tier="spark"] { --hdr-tier: var(--ld-tier-spark); }
body[data-tier="ember"] { --hdr-tier: var(--ld-tier-ember); }
body[data-tier="superhero"] { --hdr-tier: var(--ld-tier-superhero); }
body[data-tier="titan"] { --hdr-tier: var(--ld-tier-titan); }
body[data-tier="angel"] { --hdr-tier: var(--ld-tier-angel); }
body[data-tier] .hdr { border-bottom-color: color-mix(in srgb, var(--hdr-tier) 40%, transparent); box-shadow: 0 1px 14px color-mix(in srgb, var(--hdr-tier) 22%, transparent); }
.fld input[aria-invalid="true"], .fld-in:has(input[aria-invalid="true"]) { border-color: var(--ld-danger); }
[data-st-count].is-near { color: var(--ld-warning); }
[data-st-picture-status]:empty { display: none; }

/* Album tree: the panel beside the album's files on desktop; below 1024px a "Browse" pill opens it as a bottom sheet. */
.al-body.is-tree-off > .al-tree { display: none; }
.al-tree { position: sticky; top: 80px; max-height: calc(100vh - 96px); display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--ld-radius-lg); background: var(--ld-surface-2); border: 1px solid var(--ld-line); animation: ld-tree-in .25s ease-out both; }
@keyframes ld-tree-in { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
.al-tog svg { width: 14px; height: 14px; transition: transform .2s ease-out; }
.al-tree-show, .al-body.is-tree-off .al-tree-show { display: none; }
.al-browse, .al-tree-phone { display: none; }

/* Hidden on desktop, the tree folds into the Browse pill at the bottom left (as the old page); it opens the panel again. */
@media (max-width: 1023px) {
  .al-body > .al-tree, .al-tree-show, .al-body.is-tree-off .al-tree-show { display: none; }
  .al-browse { display: none !important; position: fixed; z-index: 30; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; height: 44px; max-width: calc(100vw - 32px); padding: 0 18px; border-radius: 999px; border: 1px solid var(--ld-line-strong); background: var(--ld-surface-3); box-shadow: var(--ld-shadow-modal); color: var(--ld-text-strong); font: 600 14px/20px var(--font-sans); white-space: nowrap; cursor: pointer; animation: ld-browse-in .3s ease-out both; transition: transform .2s ease-out, opacity .2s ease-out; }
}
@media (max-width: 1023px) {
  .al-body > .al-tree.is-open { display: flex; position: fixed; z-index: 61; left: 0; right: 0; top: auto; bottom: 0; max-height: 85vh; padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); border-radius: var(--ld-radius-xl) var(--ld-radius-xl) 0 0; border-bottom: 0; box-shadow: var(--ld-shadow-modal); animation: ld-sheet-in .28s var(--ld-ease-out) both; }
}
@keyframes ld-browse-in { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .al-tree, .al-browse { animation: none; } .al-tog svg, .al-browse { transition: 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-check svg { color: var(--ld-green); }
.ld-pl-key { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px; color: var(--ld-text-secondary); font: 400 13px/18px var(--font-sans); white-space: nowrap; }
.ld-pl-key > span { display: flex; gap: 4px; min-width: 96px; }
.ld-pl-key kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border: 1px solid var(--ld-line-strong); border-bottom-width: 2px; border-radius: var(--ld-radius-sm); background: var(--ld-surface-3); color: var(--ld-text-strong); font: 600 11px/1 var(--font-sans); }
.toast .act + .act { margin-left: 0; }

/* The command bar and scoped search */
dialog.cb { width: 680px; max-width: calc(100% - 32px); max-height: calc(100dvh - 160px); margin: 110px auto auto; padding: 0; gap: 0; overflow: hidden; }
dialog.cb::backdrop { background: var(--ld-scrim); }
.cb-box { display: flex; flex-direction: column; min-height: 0; max-height: inherit; }
.cb-field { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--ld-line); }
.cb-field input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ld-text-strong); font: 500 17px/24px var(--font-sans); }
.cb-field input::placeholder { color: var(--ld-text-dim); }
/* While results load the magnifier turns green and breathes; it never spins. */
.cb-busy { color: var(--ld-green); animation: ld-cb-busy .9s ease-in-out infinite alternate; }
@keyframes ld-cb-busy { from { opacity: 1; } to { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .cb-busy { animation: none; } }
.cb-scope { height: 28px; gap: 4px; cursor: pointer; border: 0; flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-esc { cursor: pointer; }
.cb-list { list-style: none; margin: 0; padding: 8px; overflow: auto; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 2px; }
.cb-group, .cb-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.cb-gh { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cb-title { padding: 10px 12px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.cb-action { min-height: 44px; padding: 0 12px; border: 0; background: none; color: var(--ld-green); font: 600 13px/16px var(--font-sans); cursor: pointer; }
.cb-blank { padding: 20px 12px; }
.cb-peek { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; padding: 4px 12px 8px; }
.cb-peek img, .cb-peek span { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; background: var(--ld-surface-3); display: block; }
.cb-peek a { display: block; border-radius: 8px; transition: opacity var(--ld-ease), box-shadow var(--ld-ease); }
.cb-peek a:hover { opacity: .85; box-shadow: 0 0 0 2px var(--ld-green); }
.cb-none { padding: 4px 12px 8px; }
.cb-row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 12px; border-radius: var(--ld-radius-md); cursor: pointer; transition: background .12s ease-out; -webkit-tap-highlight-color: transparent; }
.cb-row[aria-selected="true"], .cb-row:active { background: var(--ld-fill-hover, var(--ld-surface-3)); }
.cb-row.is-main .cb-name { color: var(--ld-green); }
.cb-ico { width: 40px; height: 40px; flex: none; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--ld-surface-3); color: var(--ld-text-secondary); overflow: hidden; }
.cb-ico img { width: 100%; height: 100%; object-fit: cover; }
.cb-ico.is-face { background: none; overflow: visible; }
.cb-ico.is-face img { width: 40px; height: 40px; }
.cb-row.is-recent .cb-ico { border-radius: 50%; }
.cb-remove { flex: none; width: 44px; height: 44px; margin-right: -8px; border-radius: 50%; }
.cb-remove.btn { min-height: 44px; }
.cb-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cb-name { color: var(--ld-text-strong); font: 600 14px/20px var(--font-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-sub > svg { vertical-align: -2px; margin-right: 4px; }
.cb-empty { padding: 32px 12px 28px; text-align: center; list-style: none; }
.cb-note { padding: 8px 12px; list-style: none; }
.cb-foot { display: flex; align-items: center; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--ld-line); flex-wrap: wrap; }
.cb-foot > span { display: inline-flex; align-items: center; gap: 6px; }
.cb-foot-end { margin-left: auto; }
/* Phones, and short touch screens (a phone on its side): the bar fills what the keyboard leaves, the box stays at the
   top and only the results scroll. */
@media (max-width: 760px), (hover: none) and (pointer: coarse) and (max-height: 600px) {
  dialog.cb { width: 100%; max-width: 100%; max-height: var(--cb-vh, 100dvh); height: var(--cb-vh, 100dvh); margin: 0; top: var(--cb-top, 0px); border-radius: 0; border: 0; }
  dialog.cb .cb-list { max-height: none; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .cb-field { padding: 12px 14px; }
  .cb-foot { display: none; }
}
@media (max-width: 760px) {
  .cb-peek { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.ld-sp-box { flex: 1; min-width: 0; height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 4px 0 14px; box-sizing: border-box; border: 1px solid var(--ld-line-strong); border-radius: var(--ld-radius-md); background: var(--ld-surface-2); transition: border-color .15s ease-out, box-shadow .15s ease-out; }
:root.is-search-open .ld-tabbar { transform: translateY(100%); }
:root.is-search-open .foot { display: none; }

/* With nothing typed: the picks (People you may like, Suggested for you, Albums, Popular on Lensdump) */
.ld-pick-sec { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ld-pick-head { display: flex; flex-direction: column; gap: 2px; }
.ld-picks-grid.listing { margin-top: 0; }
.ld-pick-by { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 6px 2px 0; }
.ld-pick-owner { min-width: 0; display: inline-flex; align-items: center; gap: 4px; color: var(--ld-text-strong); text-decoration: none; }
.ld-pick-owner:hover { text-decoration: underline; text-underline-offset: 2px; }
.ld-pick-likes { flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }
.ld-pick-albums { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.has-tiles .follow { min-height: 44px; }
.ld-pick-guest { align-self: center; width: min(520px, 100%); box-sizing: border-box; margin-top: 12px; padding: 32px 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.ld-pick-guest-art { width: 56px; height: 56px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--ld-green-surface); color: var(--ld-green); }
.ld-pick-guest-acts { display: flex; gap: 12px; margin-top: 8px; }
.ld-pick-guest-acts .btn { min-height: 44px; }
@media (max-width: 760px) {
  .ld-pick-by { display: none; }
  .ld-pick-albums { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .ld-pick-guest-acts { flex-direction: column; align-self: stretch; }
}
@media (prefers-reduced-motion: reduce) {
  .ld-sp-box, .cb-row { transition: none; }
}

/* Report, Block and Hide (spec section 4): menus, the report sheet, the block confirm. */
.menu-item.is-reported, .menu-item[aria-disabled="true"] { color: var(--ld-text-dim); cursor: default; }
.menu-item.is-reported:hover, .menu-item[aria-disabled="true"]:hover { background: none; color: var(--ld-text-dim); }
.ld-report { display: flex; flex-direction: column; gap: 12px; }
.ld-report-top { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; }
.ld-report-top h2 { text-align: center; }
.ld-report-spacer { width: 44px; }
.ld-report-rows { display: flex; flex-direction: column; border-top: 1px solid var(--ld-line); }
.ld-report-row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 4px; border: 0; border-bottom: 1px solid var(--ld-line); background: none; color: var(--ld-text); font: 600 14px/20px var(--font-sans); text-align: left; cursor: pointer; }
.ld-report-row > span { flex: 1; min-width: 0; }
.ld-report-row:hover { color: var(--ld-text-strong); background: var(--ld-fill-hover); }
.ld-report-row:focus-visible { outline: none; box-shadow: var(--ld-focus-ring); }
.ld-report-row svg { color: var(--ld-text-muted); flex: none; }
.ld-report-row.is-action strong { color: var(--ld-text-strong); }
.ld-report-row:disabled { cursor: default; opacity: .7; }
.ld-report-form { display: flex; flex-direction: column; gap: 14px; }
.ld-report-field { display: flex; flex-direction: column; gap: 6px; }
.ld-report .input, .ld-composer .input { width: 100%; padding: 12px 14px; border-radius: var(--ld-radius-md); border: 1px solid var(--ld-line-strong); background: var(--ld-surface-3); color: var(--ld-text); font: 400 15px/22px var(--font-sans); outline: none; }
.ld-report input.input { height: 48px; }
.ld-report .input:focus, .ld-composer .input:focus { border-color: var(--ld-green); box-shadow: var(--ld-focus-ring); }
.ld-report-check { display: flex; gap: 10px; align-items: flex-start; min-height: 44px; }
.ld-report-check input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--ld-green); }
.ld-report-urgent { color: var(--ld-warning); }
.ld-report-error { color: var(--ld-danger); }
.ld-report-send { width: 100%; min-height: 48px; }
.ld-report-done { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 8px 0; }
.ld-report-tick { width: 56px; height: 56px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--ld-green-surface); color: var(--ld-green); animation: ld-pop-in var(--ld-ease-enter) both; }

/* The file page's tabs: sticky on phones. */
@media (max-width: 900px) {
}

/* Comments (spec 2.3). */
.ld-comments-head .chip.is-on, .ld-tag-choice .chip.is-on { background: var(--ld-green-surface); border-color: var(--ld-green-line); color: var(--ld-green); }
.seg-pills { display: inline-flex; gap: 6px; }
.ld-composer-foot .btn { min-height: 36px; }
.ld-album-cm-h .btn { min-width: 44px; min-height: 44px; }
@media (min-width: 1024px) {
  [data-page="album"].is-cm-open { padding-right: 420px; }
}
@media (prefers-reduced-motion: reduce) { .ld-report-tick { animation: none; } }
@media (max-width: 760px) {
  .lv3-top .btn { min-height: 44px; }
}
/* The phone tab strip (spec 0.4, partials/site/tabbar.html.twig): 56px plus the safe area, over the page's foot. While it
   shows, --ld-tabbar lifts what sits at the bottom of the screen above it; scrolling down slides it away and the
   bottom bars follow it down. Full-screen layers (the viewer, sheets with a scrim) stack above it. */
:root { --ld-tabbar: 0px; }
.ld-tabbar { display: none; }
@media (max-width: 760px) {
  :root { --ld-tabbar: calc(56px + env(safe-area-inset-bottom)); }
  :root.is-tabbar-off { --ld-tabbar: 0px; }
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
  .ld-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 34; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); height: calc(56px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--ld-surface-1); border-top: 1px solid var(--ld-line); transition: transform .22s ease-out; }
  :root.is-tabbar-off .ld-tabbar { transform: translateY(100%); }
  .ld-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; min-height: 44px; padding: 0; border: 0; background: none; color: var(--ld-text-muted); font: 600 10.5px/12px var(--font-sans); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .ld-tab > svg { width: 22px; height: 22px; }
  .ld-tab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
  .ld-tab[aria-current="page"] { color: var(--ld-green); }
  .ld-tab[aria-current="page"] > svg { stroke-width: 2.4; }
  .ld-tab[aria-current="page"][data-tab="home"] > svg { fill: currentColor; fill-opacity: .18; }
  .ld-tab:focus-visible { outline: 2px solid var(--ld-green); outline-offset: -4px; border-radius: var(--ld-radius-md); }
  .ld-tab-me .avatar { width: 26px !important; height: 26px !important; }
  /* The avatar's own tier ring marks the tab; the label takes the tier colour. */
  .ld-tab-me[aria-current="page"] { color: var(--me-tier, var(--ld-text)); }
  /* What sits at the bottom of the screen goes above the strip, and follows it when it slides away. */
  .paybar, .promo-sticky, .ld-up-bar { bottom: var(--ld-tabbar); transition: bottom .22s ease-out; }
  .selbar { bottom: calc(max(20px, env(safe-area-inset-bottom)) + var(--ld-tabbar)); transition: bottom .22s ease-out; }
  .toasts { bottom: calc(16px + var(--ld-tabbar)); }
  .al-browse, .al-body.is-tree-off ~ .al-browse { bottom: calc(16px + env(safe-area-inset-bottom) + var(--ld-tabbar)); transition: bottom .22s ease-out; }
  :root .ld-legal-top { bottom: calc(16px + var(--ld-tabbar)); }
}
@media (prefers-reduced-motion: reduce) { .ld-tabbar, .paybar, .promo-sticky, .ld-up-bar, .selbar, .al-browse { transition: none; } }

/* Copy buttons (copy.ts, partials/site/copy-button.html.twig). The labels share one
   grid cell so the width is the widest from the start; the pulse is an inner glow, so it never grows past the button. */
.ld-copy { overflow: hidden; min-height: 44px; height: auto; gap: 8px; transition: background-color 200ms ease-out, border-color 200ms ease-out, color 200ms ease-out; }
.ld-copy-ico { position: relative; display: inline-grid; width: 16px; height: 16px; flex: none; }
.ld-copy-ico svg { grid-area: 1 / 1; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: opacity 180ms ease-out, transform 240ms cubic-bezier(.3, 1.4, .5, 1); }
.ld-copy-ico .k { opacity: 0; transform: rotate(-90deg) scale(.6); }
.ld-copy-ico .x { opacity: 0; transform: scale(.6); }
.ld-copy-l { display: inline-grid; text-align: center; }
.ld-copy-l > span { grid-area: 1 / 1; transition: opacity 160ms ease-out; }
.ld-copy-l .b, .ld-copy-l .c { opacity: 0; }
.ld-copy.is-copied { background: var(--ld-green-surface); border-color: var(--ld-green-line); color: var(--ld-green); animation: ld-copy-pulse 600ms ease-out; }
.ld-copy.is-copied .ld-copy-ico .c, .ld-copy.is-failed .ld-copy-ico .c { opacity: 0; transform: rotate(90deg) scale(.6); }
.ld-copy.is-copied .ld-copy-ico .k { opacity: 1; transform: none; }
.ld-copy.is-copied .ld-copy-l .a, .ld-copy.is-failed .ld-copy-l .a { opacity: 0; }
.ld-copy.is-copied .ld-copy-l .b { opacity: 1; }
.ld-copy.is-failed { border-color: rgba(255,138,156,.5); color: var(--ld-danger); animation: ld-copy-shake 380ms ease-in-out; }
.ld-copy.is-failed .ld-copy-ico .x { opacity: 1; transform: none; }
.ld-copy.is-failed .ld-copy-l .c { opacity: 1; }
.ld-copy.is-icon { width: 44px; padding: 0; justify-content: center; }
@keyframes ld-copy-pulse { 0% { box-shadow: inset 0 0 0 0 rgba(14,229,155,0); } 30% { box-shadow: inset 0 0 0 2px rgba(14,229,155,.55), inset 0 0 14px rgba(14,229,155,.22); } 100% { box-shadow: inset 0 0 0 1px rgba(14,229,155,0); } }
@keyframes ld-copy-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-3px); } 40% { transform: translateX(3px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(1px); } }
@media (prefers-reduced-motion: reduce) { .ld-copy, .ld-copy-ico svg, .ld-copy-l > span { transition: none; } .ld-copy.is-copied, .ld-copy.is-failed { animation: none; } }
/* 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-copyfield { display: flex; align-items: center; gap: 6px; min-height: 48px; padding: 3px 3px 3px 13px; box-sizing: border-box; border: 1px solid var(--ld-line-strong); border-radius: var(--ld-radius-md); background: var(--ld-surface-3); min-width: 0; }
.ld-copyfield:focus-within { border-color: var(--ld-green); box-shadow: var(--ld-focus-ring); }
.ld-copyfield > input, .ld-copyfield > code, .ld-copyfield > span { flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; border: 0; outline: 0; background: none; color: var(--ld-text); font: 500 14px/20px var(--font-mono); overflow-wrap: anywhere; }
.ld-copyfield > input { height: 40px; text-overflow: ellipsis; }
.ld-copyfield > .ld-copy { min-height: 40px; height: 40px; }
.ld-copyfield > .ld-copy.is-icon { width: 40px; }
.ld-copyfield > :last-child { flex: none; }
.ld-copyfield.is-block { align-items: flex-start; }
.ld-copyfield.is-block > code, .ld-copyfield.is-block > pre { white-space: pre-wrap; padding: 6px 0; }

/* The sign-in sheet (frontend/site/ui/sign-in.tsx): a visitor's Like, Comment or Follow. */
.ld-signin-head { display: flex; align-items: center; gap: 12px; text-align: left; }
.ld-signin-sheet .ld-signin-head { padding: 4px 8px 4px 16px; }
.ld-signin-ico { flex: none; width: 44px; height: 44px; border-radius: var(--ld-radius-md); display: inline-flex; align-items: center; justify-content: center; background: var(--ld-green-surface); color: var(--ld-green); }
.ld-signin-title { flex: 1; min-width: 0; }
.ld-signin { display: flex; flex-direction: column; gap: 16px; }
.ld-signin-sheet .ld-signin { padding: 4px 16px calc(16px + env(safe-area-inset-bottom)); }
.ld-signin-plans { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ld-signin-plans.is-loading { min-height: 152px; align-items: center; justify-content: center; }
.ld-signin-plan { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 14px; border-radius: var(--ld-radius-md); border: 1px solid var(--ld-line); background: var(--ld-surface-3); color: var(--ld-text); text-decoration: none; transition: background-color 150ms ease-out; }
.ld-signin-plan:hover { background: var(--ld-surface-4); }
.ld-signin-plan:focus-visible { outline: none; box-shadow: var(--ld-focus-ring); }
.ld-signin-plan.is-top { border-color: var(--tier, var(--ld-green)); box-shadow: inset 0 0 0 1px var(--tier, var(--ld-green)); }
.ld-signin-plan img { flex: none; }
.ld-signin-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--tier, var(--ld-tier-free)); }
.ld-signin-name { flex: 1; min-width: 0; font: 600 14px/20px var(--font-sans); color: var(--ld-text-strong); }
.ld-signin-price { font: 400 13px/18px var(--font-sans); white-space: nowrap; }
.ld-signin-price b { font-weight: 700; color: var(--ld-text-strong); }
.ld-signin-ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font: 400 13px/18px var(--font-sans); color: var(--ld-text-secondary); }
.ld-signin-ticks li { display: flex; align-items: flex-start; gap: 8px; }
.ld-signin-ticks svg { flex: none; margin-top: 1px; color: var(--ld-green); }
.ld-signin-ticks b { color: var(--ld-text-strong); font-weight: 600; }
.ld-signin-btns { display: flex; gap: 8px; }
.ld-signin-btns .btn { flex: 1; }
@media (max-width: 760px) { .ld-signin-btns { flex-direction: column; } }
.ld-signin-passkey { min-height: 44px; height: auto; gap: 8px; }
.ld-signin-passkey.is-busy { opacity: .8; }
.ld-signin-alert { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(251,176,31,.4); background: rgba(251,176,31,.08); color: var(--ld-text); font: 500 13.5px/19px var(--font-sans); animation: ld-fade 200ms ease-out both; }
.ld-signin-alert svg { flex: none; color: var(--ld-warning); }
@media (prefers-reduced-motion: reduce) { .ld-signin-alert { animation: none; } }
@media (prefers-reduced-motion: reduce) { .ld-signin-plan { transition: none; } }

/* The file type chips under a search box (ui/search-results.tsx, pages/search.html.twig) and the command bar's picks
   before anything is typed: People you may like (the search page's cards, below), Popular on Lensdump. */
.cb-typebar { flex: none; }
.cb-types { display: flex; gap: 8px; padding: 12px 18px 4px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.cb-types::-webkit-scrollbar { display: none; }
.cb-type { position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px 0 10px; border: 1px solid var(--ld-line-strong); border-radius: var(--ld-radius-full); background: transparent; color: var(--ld-text); font: 600 13px/16px var(--font-sans); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out; }
.cb-type::after { content: ""; position: absolute; inset: -6px -2px; }
.cb-type svg { width: 16px; height: 16px; flex: none; }
.cb-type:hover { color: var(--ld-text-strong); border-color: var(--ld-text-muted); }
.cb-type.is-on { padding-right: 6px; border-color: var(--ld-green); background: var(--ld-green); color: var(--ld-on-green); }
.cb-type:focus-visible { outline: 2px solid var(--ld-green); outline-offset: 2px; }
.cb-tip { margin: 0; padding: 4px 18px 6px; font: 400 12px/16px var(--font-sans); color: var(--ld-text-muted); }
.cb-tip code { font: 600 12px/16px var(--font-mono, ui-monospace, monospace); color: var(--ld-text-secondary); }
@media (min-width: 761px) { .cb-list { max-height: 80vh; } }
.cb-sp .ld-suggest-people { gap: 0; }
.cb-sp .ld-sp-all { padding: 0 12px; }
.cb-sp .ld-sp-row { padding: 4px 12px 8px; scroll-padding-inline: 12px; }
.cb-tiles { list-style: none; margin: 0; padding: 4px 12px 8px; display: grid; grid-template-columns: repeat(auto-fill, 96px); gap: 8px; justify-content: space-between; }
.cb-tile { display: block; width: 96px; height: 96px; border-radius: var(--ld-radius-md); overflow: hidden; background: var(--ld-surface-4); }
.cb-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cb-tile:focus-visible { outline: 2px solid var(--ld-green); outline-offset: 2px; }
.cb-picks { display: flex; flex-direction: column; gap: 2px; }
.cb-picks .ld-pick-sec { gap: 0; }
.cb-picks a.cb-row { color: inherit; text-decoration: none; }
.cb-picks a.cb-row:hover { background: var(--ld-fill-hover, var(--ld-surface-3)); }
.cb-picks a.cb-row:focus-visible { outline: 2px solid var(--ld-green); outline-offset: -2px; }
@media (max-width: 760px) {
  .cb-types { padding: 10px 14px 4px; }
  .cb-tip { padding: 4px 14px 6px; }
  .cb-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); justify-content: stretch; }
  .cb-tile { width: 100%; height: auto; aspect-ratio: 1; }
}
@media (prefers-reduced-motion: reduce) { .cb-type { transition: none; } }

/* The "Suggested for you" accounts row (ld-suggest-people) */
.ld-suggest-people { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ld-sp-row { list-style: none; margin: 0; padding: 0 0 6px; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.ld-sp-card { flex: none; width: 180px; padding: 20px 14px 14px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; scroll-snap-align: start; }
.ld-sp-name { color: var(--ld-text-strong); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-sp-why { min-height: 40px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* The row with each member's newest files (the search page and the command bar's picks) */
.has-tiles .ld-sp-card { width: 208px; padding: 14px; gap: 10px; align-items: stretch; text-align: left; }
.has-tiles .ld-sp-skip { width: 44px; height: 44px; top: 0; right: 0; }
.ld-sp-top { display: flex; align-items: center; gap: 10px; min-width: 0; padding-right: 26px; }
.ld-sp-face { flex: none; display: inline-flex; }
.ld-sp-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.has-tiles .ld-sp-why { min-height: 32px; }
.ld-sp-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.ld-sp-tile { display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--ld-radius-sm); background: var(--ld-surface-3); }
.ld-sp-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 760px) {
  .has-tiles .ld-sp-card { width: 180px; }
}
/* The accounts row's ✕ and See all, and the See all dialog (spec 1.6) */
.ld-sp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ld-sp-all { background: none; border: 0; cursor: pointer; min-height: 44px; }
.ld-sp-card { position: relative; }
.ld-sp-skip { position: absolute; top: 6px; right: 6px; }
.ld-sp-dialog { width: min(480px, calc(100vw - 32px)); }
.ld-sp-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ld-sp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; max-height: 60vh; overflow-y: auto; }
@media (max-width: 760px) { .ld-sp-skip { width: 44px; height: 44px; top: 0; right: 0; } }
.ld-sp-item { display: flex; align-items: center; gap: 12px; }
.ld-sp-item-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ld-sp-item .btn { flex: none; min-height: 44px; }

/* The @ list of a text box (comments/mentions.tsx): comments, and a post's caption at upload and in Edit caption. */
.ld-mention-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; max-height: 260px; overflow: auto; padding: 6px; animation: ld-pop-in 150ms ease-out both; }
.ld-mention-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 6px 10px; border: 0; border-radius: var(--ld-radius-md); background: transparent; color: var(--ld-text); font: inherit; text-align: left; cursor: pointer; }
.ld-mention-row:hover, .ld-mention-row.is-active { background: var(--ld-fill-hover); color: var(--ld-text-strong); }
.ld-mention-none { padding: 10px; }
.ld-mention { color: var(--ld-green); font-weight: 600; text-decoration: none; }
.ld-mention:hover { text-decoration: underline; }
/* A post's caption box (ui/caption-box.tsx): grows to six lines, the count past 2,000 characters. */
.ld-cap-field { position: relative; display: flex; flex-direction: column; gap: 6px; }
.ld-cap-label { font: 600 13px/18px var(--font-sans); color: var(--ld-text); }
.ld-cap-label small { margin-left: 6px; font-weight: 500; color: var(--ld-text-dim); }
.ld-cap-box { position: relative; display: flex; flex-direction: column; padding: 10px 12px; border: 1px solid var(--ld-line-strong); border-radius: var(--ld-radius-md); background: var(--ld-surface-3); transition: border-color 150ms ease-out, box-shadow 150ms ease-out, opacity 150ms ease-out; }
.ld-cap-box.is-focus { border-color: var(--ld-green); box-shadow: var(--ld-focus-ring); }
.ld-cap-box.is-dim { opacity: .5; }
.ld-cap-box textarea { min-height: 40px; max-height: 120px; padding: 0; border: 0; outline: 0; resize: none; background: none; color: var(--ld-text); font: 400 15px/20px var(--font-sans); overflow-y: auto; }
.ld-cap-box textarea::placeholder { color: var(--ld-text-muted); }
/* The prompt goes as soon as the box has the focus, not only once something is typed */
.ld-cap-box textarea:focus::placeholder { color: transparent; }
.ld-cap-count { align-self: flex-end; font: 500 11px/14px var(--font-sans); color: var(--ld-warning); }
.ld-mention-row .ld-tag { color: var(--ld-green); }
/* On a phone the caption's list takes its place under the box, so a scrolling panel can't cut it off; four rows show. */
@media (max-width: 760px) {
  .ld-cap-field > .ld-mention-list { position: static; max-height: 196px; }
}
/* Edit caption: the dialog on a computer, the sheet on a phone. */
.ld-edit-cap { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.ld-edit-cap-note { margin: -6px 0 0; }
.ld-edit-cap-row { display: flex; justify-content: flex-end; gap: 8px; }
.ld-edit-cap-row .btn { min-height: 44px; }
.ld-edit-cap-sheet .ld-edit-cap { margin-top: 0; padding: 0 16px 24px; }
.ld-edit-cap-sheet .ld-edit-cap-row .btn { flex: 1; }
@media (prefers-reduced-motion: reduce) {
  .ld-cap-box { transition: none; }
  .ld-mention-list { animation: none; }
}

/* A tier's celebration (partials/site/celebrate.html.twig, ui/celebrate.ts): the activated page's welcome and the
   thank-you after a member's payment. --tier is the tier's colour token. */
.cele { position: relative; display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 64px); overflow: hidden;
  background: radial-gradient(60% 55% at 50% 42%, color-mix(in srgb, var(--tier) 22%, transparent), transparent 70%), var(--ld-surface-0); color: var(--ld-text); }
.cele-in { position: relative; display: flex; flex-direction: column; align-items: center; gap: 20px; max-width: 640px; padding: 48px 24px; text-align: center; }
.cele-em { position: relative; display: grid; place-items: center; animation: cele-pop 700ms cubic-bezier(.2, 1.4, .4, 1) both; }
.cele-ring { position: absolute; left: 50%; top: 50%; width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--tier) 35%, transparent); animation: cele-ring 1600ms ease-out 200ms both; pointer-events: none; }
.cele-title { margin: 8px 0 0; font: 800 44px/52px var(--font-display); color: var(--ld-text-strong); animation: cele-up 500ms 350ms ease-out both; }
.cele-msg { margin: 0; font: 400 18px/28px var(--font-sans); color: var(--ld-text-secondary); animation: cele-up 500ms 500ms ease-out both; }
.cele-acts { display: flex; gap: 12px; margin-top: 12px; animation: cele-up 500ms 650ms ease-out both; }
.cele--over { position: fixed; inset: 0; z-index: 10040; min-height: 0; cursor: pointer; transition: opacity 400ms ease; }
.cele--over.is-leaving { opacity: 0; }
@keyframes cele-pop { 0% { transform: scale(.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes cele-up { 0% { transform: translateY(10px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes cele-ring { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
@media (max-width: 760px) {
  .cele-em .emblem { width: 160px !important; height: 160px !important; }
  .cele-ring { width: 220px; height: 220px; margin: -110px 0 0 -110px; }
  .cele-title { font-size: 32px; line-height: 40px; }
  .cele-msg { font-size: 16px; line-height: 24px; }
  .cele-acts { flex-direction: column; width: 100%; }
  .cele-acts .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .cele-em, .cele-title, .cele-msg, .cele-acts { animation: none; }
  .cele-ring { display: none; }
  .cele-em .emblem .anim { display: none; }
  .cele-em .emblem .still { opacity: 1; }
  .cele--over { transition: none; }
}

/* Endless listings (frontend/site/endless.ts adds these on any page with one): the script keeps the screen in place
   itself, the spacers and empty cells stand for pages unloaded. The footer waits while any endless list (these, the
   search's, Popular on Lensdump) still has pages to come: its link to the next page, taken over by the script
   (is-auto; without scripts the footer stays), and not inside something hidden (the profile's listing while its
   search shows, a search with nothing after it). */
.listing.is-endless { overflow-anchor: none; }
.pg-spacer { grid-column: 1 / -1; list-style: none; pointer-events: none; }
.pg-filler { visibility: hidden; list-style: none; }
body:has(.pg-edge.is-auto:not(.pg-edge-prev) > [data-auto-more]:not([hidden] *)) > footer.foot { display: none; }
/* The Share menu's windows (frontend/site/share): Share as post's warning and notes, Share links for picked files' note. */
.ld-sp-warn, .ld-ss-note { display: flex; gap: 10px; padding: 12px; border-radius: var(--ld-radius-md); font: 500 13px/18px var(--font-sans); color: var(--ld-text); }
.ld-sp-warn { background: color-mix(in srgb, var(--ld-warning) 12%, transparent); border: 1px solid color-mix(in srgb, var(--ld-warning) 45%, transparent); }
.ld-ss-note { background: color-mix(in srgb, var(--ld-green) 10%, transparent); border: 1px solid var(--ld-green-line); }
.ld-sp-warn svg, .ld-ss-note svg, .ld-sp-note svg { flex: none; margin-top: 1px; }
.ld-sp-note { display: flex; gap: 8px; }
.ld-codes-rows { display: flex; flex-direction: column; gap: 12px; }
/* A picker whose hints explain each choice: the hint in full on its own line under the label, the tick beside both */
.ld-pick-list.is-stacked .ld-pick-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 2px; padding-top: 8px; padding-bottom: 8px; }
.ld-pick-list.is-stacked .ld-pick-label { grid-column: 1; max-width: none; }
.ld-pick-list.is-stacked .ld-pick-row small { grid-column: 1; grid-row: 2; max-width: none; white-space: normal; overflow: visible; }
.ld-pick-list.is-stacked .ld-pick-tick { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
/* A parent shown only as context for a match below it */
.ld-pick-row.is-context .ld-pick-label { color: var(--ld-text-secondary); }