/* A member's profile (pages/profile.html.twig). */

.tabbar-in { position: relative; display: flex; gap: 4px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.tabbar-in::-webkit-scrollbar { display: none; }
@media (max-width: 760px) {
  .tabbar-in { flex-wrap: wrap; overflow: visible; }
}

/* Tab bar with the search and sort inline on its right */
.tabrow { display: flex; align-items: center; gap: 12px; }
.tabrow .tabbar-in { flex: 1; min-width: 0; }
.tabrow .search input { height: 36px; }
@media (max-width: 760px) {
  .tabrow .tabbar-in { flex: 1 1 100%; }
}

/* Timeline scrubber: floats at the screen's right edge, outside the content, so the grid keeps its full width */
.scrub { position: fixed; right: 10px; top: 50%; z-index: 15; height: min(60vh, 520px); width: 44px; transform: translateY(-50%); display: flex; justify-content: flex-end; }
.scrub-track { position: relative; width: 4px; height: 100%; margin-right: 8px; border-radius: 2px; background: rgba(255,255,255,.10); transition: width var(--ld-ease), background-color var(--ld-ease); }
.scrub:hover .scrub-track { width: 6px; background: rgba(255,255,255,.16); }
.scrub-year { position: absolute; right: 14px; transform: translateY(-50%); padding: 2px 8px; border-radius: var(--ld-radius-full); background: rgba(15,18,22,.85); color: var(--ld-text-muted); font: 600 11px/16px var(--font-sans); font-variant-numeric: tabular-nums; white-space: nowrap; opacity: 0; transition: opacity var(--ld-ease), color var(--ld-ease); cursor: pointer; border: 0; }
.scrub-year::after { content: ""; position: absolute; right: -10px; top: 50%; width: 8px; height: 1px; background: rgba(255,255,255,.3); }
.scrub:hover .scrub-year { opacity: 1; }
.scrub-year:hover { color: var(--ld-text-strong); }
.scrub-handle { position: absolute; right: -4px; width: 14px; height: 32px; margin-top: -16px; border-radius: 7px; background: var(--ld-green); box-shadow: 0 2px 8px rgba(0,0,0,.4); transition: top 300ms var(--ld-ease-out); }
.scrub-bubble { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); padding: 6px 10px; border-radius: var(--ld-radius-md); background: var(--ld-green); color: var(--ld-on-green); font: 700 12px/16px var(--font-sans); white-space: nowrap; box-shadow: var(--ld-shadow-pop); }
@media (max-width: 760px) { .scrub { right: 2px; height: 50vh; } .scrub-year { display: none; } .scrub-bubble { font-size: 11px; } }

/* The scrubber lives in the files section's right gutter and sticks while that section scrolls past;
   it never shows over the cover or the header. */
.scrub-col { position: absolute; top: 0; bottom: 0; right: 10px; width: 44px; pointer-events: none; }
.scrub-col .scrub { position: sticky; top: 22vh; right: auto; transform: none; pointer-events: auto; }
.scrub-track { cursor: pointer; touch-action: none; }
.scrub-track::before { content: ""; position: absolute; top: 0; bottom: 0; left: -18px; right: -10px; }
.scrub-handle { cursor: grab; touch-action: none; }
.scrub-handle:focus-visible { outline: 2px solid var(--ld-green); outline-offset: 3px; }
.scrub.is-dragging .scrub-handle { cursor: grabbing; transition: none; transform: scaleX(1.25); }
.scrub.is-dragging .scrub-bubble { transform: translateY(-50%) scale(1.06); }
.scrub.is-dragging .scrub-year { opacity: 1; }
.scrub-bubble { transition: transform 150ms ease-out; }
@media (max-width: 760px) { .scrub-col { right: 2px; } }

/* Change cover's preview while it uploads. The cover's frame and its editor are in frame-editor.css. */
.coverprev { position: relative; aspect-ratio: 5 / 1.4; border-radius: var(--ld-radius-lg); overflow: hidden; border: 1px solid var(--ld-line-strong); }

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

  /* Profile: a short cover, a smaller avatar with Follow and Share beside it, then the name and bio full width */
  .pf-cover { height: calc(390px / var(--ld-cover-phone)) !important; }
  .pf-id { margin-top: -42px !important; }
  .pf-id.is-locked { margin-top: 24px !important; }
  .pf-row { display: grid !important; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "av act" "who who"; align-items: end !important; gap: 14px 12px !important; }
  .pf-act { grid-area: act; justify-content: flex-end; padding-bottom: 0 !important; }
  .pf-act .follow { min-width: 0 !important; }
  .pf-who { grid-area: who; gap: 6px !important; padding-bottom: 0 !important; }
  .pf-who h1 { font-size: 24px; line-height: 30px; }
  .pf-who .t-body-lg { font-size: 15px; line-height: 22px; }

  /* One row: the tabs (count over the label) scroll sideways, the listing's tools stay on their right */
  .pf-tabs { margin-top: 20px !important; }
  .pf-tabs .tabrow { padding-bottom: 0; flex-wrap: nowrap; gap: 8px; }
  .pf-tabs .tabbar-in { display: flex; flex: 1 1 auto; flex-wrap: nowrap; min-width: 0; gap: 0; overflow-x: auto; overflow-y: hidden; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .pf-tabs .tab { flex: 0 0 auto; flex-direction: column-reverse; justify-content: center; gap: 0; height: 56px; padding: 0 9px; font: 500 12px/16px var(--font-sans); }
  .pf-tabs .tab::after { left: 22%; right: 22%; }
  .pf-tb { flex-wrap: nowrap; }
  .pf-tb .ld-tf { flex: 1 1 0; }
  .scrub-col { top: 64px; }

  /* The month bubble only shows while the handle is dragged */
  .scrub:not(.is-dragging) .scrub-bubble { opacity: 0; }
}
/* A month's heading is a cell of the file grid spanning its row; the grid's gap makes up the rest of .month's margins */
.tilegrid > .ld-month { grid-column: 1 / -1; margin: 18px 0 2px; }
.tilegrid > .ld-month:first-child { margin-top: 8px; }
@media (max-width: 760px) { .grid-files > .ld-month { margin: 24px 0 8px; } .grid-files > .ld-month:first-child { margin-top: 8px; } }

/* ---------- Profile on Lens core ---------- */
.pf-cover { position: relative; aspect-ratio: var(--ld-cover-pc); overflow: hidden; background: var(--ld-surface-0); }
.pf-cover.is-lens .cover-pic { object-fit: cover; object-position: right center; opacity: .9; }
.pf-cover .cover-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, var(--ld-surface-1) 0%, rgba(11,13,19,.12) 50%, transparent 100%); }
.pf-cover .cover-tools { position: relative; z-index: 2; height: 100%; display: flex; align-items: flex-start; justify-content: flex-end; gap: 8px; padding-top: 16px; }
/* The owner's round camera buttons over a picture: the cover's on touch screens, the avatar's always. */
.ld-cam.btn { width: 40px; height: 40px; min-height: 40px; padding: 0; border-radius: 50%; background: rgba(5,6,8,.6); border-color: rgba(255,255,255,.18); color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
/* The owner's cover buttons: with a mouse they show while the cover is hovered or holds the keyboard focus; touch
   screens get one round button opening #ld-cover-menu instead. */
.pf-cover .cover-tools-touch { display: none; }
@media (hover: hover) and (pointer: fine) {
  .pf-cover .cover-tools .btn { opacity: 0; transition: opacity 150ms ease-out; }
  .pf-cover:hover .cover-tools .btn, .pf-cover:focus-within .cover-tools .btn { opacity: 1; }
}
@media (hover: none) {
  .pf-cover .cover-tools .btn { display: none; }
  .pf-cover .cover-tools .cover-tools-touch { display: inline-flex; }
}
.pf-id { position: relative; margin-top: -72px; }
/* A private profile's locked header has no cover to sit on (D-177). */
.pf-id.is-locked { margin-top: 40px; }
.pf-row { display: flex; align-items: flex-end; gap: 24px; }
.pf-av { position: relative; flex: none; display: flex; }
.pf-av > .avatar { background: var(--ld-surface-1); }
/* The avatar's camera button sits on its ring, low on the right; its press area reaches 44 px. */
.pf-av-edit.btn { position: absolute; right: 4px; bottom: 4px; z-index: 2; }
.pf-av-edit::before { content: ""; position: absolute; inset: -2px; border-radius: 50%; }
/* Its menu opens under it, kept on the screen: the avatar sits at the left. */
@media (min-width: 761px) {
  .pf-av-menu > .pop { width: 240px; right: auto; left: max(8px, calc(100% - var(--anchor-right, 32px) - 240px)); transform-origin: top left; }
}
.pf-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding-bottom: 6px; }
.pf-who .chip-tier img { width: 20px; height: 20px; }
.pf-bio { max-width: 640px; }
.pf-links { display: flex; gap: 16px; flex-wrap: wrap; }
.pf-act { display: flex; gap: 8px; padding-bottom: 6px; flex-wrap: wrap; }
.pf-nudge { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 20px; padding: 14px 16px; border-radius: var(--ld-radius-lg); border: 1px solid color-mix(in srgb, var(--ld-tier-spark) 45%, transparent); background: color-mix(in srgb, var(--ld-tier-spark) 10%, var(--ld-surface-2)); }
.pf-tabs { margin-top: 28px; }
.pf-tabs .tab::after { background: var(--pf-tab, var(--ld-green)); }
.pf-tabs .tab[aria-current="page"] .count { color: var(--pf-tab, var(--ld-green)); }
/* The member's home on their profile: counts by the avatar, Your space, the people dialog */
.pf-counts { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px 28px; flex-wrap: wrap; }
.pf-counts li, .pf-counts a { font: inherit; color: inherit; text-decoration: none; }
.pf-counts b { color: var(--ld-text-strong); font-weight: 600; }
.pf-counts a { border-radius: var(--ld-radius-sm); }
.pf-counts a:hover .secondary { color: var(--ld-text-strong); }
.pf-people-t { margin-bottom: 16px; }
/* Featured on the profile: six across on wider screens; on phones one row of small tiles scrolling sideways, so the
   listing starts on the first screen */
.ld-ft { margin-top: 32px; display: flex; flex-direction: column; gap: 14px; }
.ld-ft-head { display: flex; align-items: center; gap: 12px; }
.ld-ft-head h2 { flex: 1; }
.ld-ft-star { color: var(--ld-green); }
.ld-ft-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.ld-ft-cell { display: flex; flex-direction: column; gap: 8px; min-width: 0; animation: ld-rise .35s ease-out both; }
.ld-ft-tile { aspect-ratio: 4 / 5; }
.ld-ft-chip { position: absolute; left: 10px; bottom: 10px; height: 26px; background: rgba(5,6,8,.72); color: #fff; border-color: transparent; }
.ld-ft-only { position: absolute; left: 10px; top: 10px; z-index: 2; height: 24px; padding: 0 8px; display: inline-flex; align-items: center; gap: 6px; border-radius: var(--ld-radius-full); background: rgba(5,6,8,.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; font: 600 11px/14px var(--font-sans); }
.ld-ft-name { color: var(--ld-text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-ft-more { width: 100%; aspect-ratio: 4 / 5; border-radius: var(--ld-radius-lg); border: 2px dashed var(--ld-line-strong); background: transparent; color: var(--ld-text-muted); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; cursor: pointer; font: 600 13px/16px var(--font-sans); transition: color var(--ld-ease), border-color var(--ld-ease); }
.ld-ft-more:hover { color: var(--ld-text-strong); border-color: var(--ld-green-line); }
@media (max-width: 760px) {
  .ld-ft { margin-top: 20px; gap: 10px; }
  .ld-ft-head { gap: 10px; }
  .ld-ft-grid { margin: -4px 0; padding: 4px 0; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 104px; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain; }
  .ld-ft-grid::-webkit-scrollbar { display: none; }
  .ld-ft-cell { scroll-snap-align: start; }
  .ld-ft + .pf-tabs, [data-island="featured"] + .pf-tabs { margin-top: 16px; }
  .ld-ft-chip { left: 6px; bottom: 6px; height: 22px; padding: 0 7px; }
  .ld-ft-only { left: 6px; top: 6px; }
}
.ld-fe-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ld-fe-row { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 10px; border-radius: var(--ld-radius-md); }
.ld-fe-row { position: relative; background: var(--ld-surface-2); }
.ld-fe-row.is-dragging { z-index: 2; box-shadow: var(--ld-shadow-modal); border-color: var(--ld-green-line); }
.ld-fe-grip { cursor: grab; touch-action: none; }
.ld-fe-row.is-dragging .ld-fe-grip { cursor: grabbing; }
.ld-fe-thumb { width: 40px; height: 40px; border-radius: var(--ld-radius-sm); flex: none; object-fit: cover; background: var(--ld-surface-3); }
.ld-fe-found .ld-fe-thumb { width: 28px; height: 28px; border-radius: 6px; }
.ld-fe-text { flex: 1; min-width: 0; }
.ld-fe-text b { display: block; color: var(--ld-text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-fe-found { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ld-fe-found .menu-item { width: 100%; }
.ld-fe-found .menu-item > span:not(.ld-fe-thumb) { flex: 1; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.listing-wrap { position: relative; padding-top: 20px; }
.listing-wrap .toolbar { margin-bottom: 20px; }
.tag-i { width: 12px !important; height: 12px !important; }
.liked-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.liked-bar .seg { grid-template-columns: auto auto; }
.grid-members { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.member-card { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--ld-radius-lg); border: 1px solid var(--ld-line); background: var(--ld-surface-2); transition: border-color var(--ld-ease), transform var(--ld-ease); }
a.member-card:hover { border-color: var(--ld-line-strong); transform: translateY(-2px); }
.member-card-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.member-card-t b { font: 700 14px/18px var(--font-display); color: var(--ld-text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-card-n { display: inline-flex; align-items: center; gap: 4px; }
@media (max-width: 1100px) { .grid-members { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .pf-cover { height: calc(390px / var(--ld-cover-phone)); aspect-ratio: auto; }
  .pf-cover .cover-tools .btn span { display: none; }
  .pf-id { margin-top: -42px; }
  .pf-row { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "av act" "who who"; align-items: end; gap: 14px 12px; }
  .pf-row > .pf-av { grid-area: av; }
  .pf-av > .avatar { width: 84px !important; height: 84px !important; }
  .pf-av > .avatar .face { font-size: 22px !important; }
  .pf-av-edit.btn { width: 32px; height: 32px; min-height: 32px; right: -2px; bottom: -2px; }
  .pf-av-edit.btn svg { width: 16px; height: 16px; }
  .pf-av-edit::before { inset: -6px; }
  .pf-act { grid-area: act; justify-content: flex-end; padding-bottom: 0; flex-wrap: nowrap; }
  .pf-who { grid-area: who; gap: 6px; padding-bottom: 0; }
  .pf-who h1 { font-size: 24px; line-height: 30px; }
  .pf-counts { gap: 6px 18px; }
  .grid-members { grid-template-columns: minmax(0, 1fr); }
}
.pf-act { position: relative; }
/* Recently liked (the owner's /<username>/liked): its own heading over the likes */
.ld-rl-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.ld-rl-head h1 { display: flex; align-items: center; gap: 12px; }
.ld-rl-head h1 svg { color: var(--ld-text-muted); }

/* Share sits with Edit profile and Follow: the same 40 px height as theirs. */
.pf-act .ld-copy { min-height: 0; }
/* Jumped to (#tabs, as On this day's See that day does): clear of the sticky header */
.pf-tabs { scroll-margin-top: 64px; }

/* Recently liked's three kinds: Posts | Files | Albums */
.liked-bar .seg.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.liked-bar .seg.is-three .thumb { width: calc((100% - 6px) / 3); }
.liked-bar .seg.is-three.is-mid .thumb { transform: translateX(100%); }
.liked-bar .seg.is-three.is-right .thumb { transform: translateX(200%); }