/*-- /feed layout: hand-off to platform.
   tl-layout / tl-col-left / tl-col-mid / tl-col-right CSS removed in 1.6 along
   with the matching ClassName fields on SitePagePanels + SitePagePanelColumns.
   The platform renders panels + columns from SitePagePanelColumns.Width directly;
   the custom classes were duplicating the layout, breaking ContentTitle, and
   forcing every layout decision to live in CSS instead of admin-editable settings.
   Do not reintroduce a custom layout class on the /feed panel. */
/*-- /feed gap: take the column gap from the main column, not the sidebar.
   Platform default puts the 2rem gap on .has-prev .cell-content (sidebar's left
   padding), which eats 2rem out of the sidebar's 440px box. On /feed the sidebar
   width should be its effective content width, so swap the gap onto the main
   column's right edge instead. Scoped to body.pg-feed so other pages keep the
   default. */
body.pg-feed #PageManagerContent .panel .cell.has-prev .cell-content { padding-left: 0; }

body.pg-feed #PageManagerContent .panel .cell.has-next .cell-content { padding-right: 2rem; }

/*-- /feed sidebar: keep the tail of the sidebar on screen instead of letting it
   scroll off. The sidebar column is far shorter than the feed, so past its own
   end the reader gets thousands of pixels of empty gutter while posts keep
   coming. Sticky positioning does the pinning, but the inset is NOT something
   CSS can state here: a `bottom` inset pins the box while the page scrolls UP
   toward it, so scrolling down past the sidebar never engages it, and the inset
   that does what this page wants - pin once the sidebar's bottom edge reaches
   the bottom of the window - is `top: (window height - sidebar height)`, which
   is negative whenever the sidebar is taller than the window and which CSS
   cannot compute. So declare position only; tlFeedSidebarFollow() in feed.js
   sets the one number and keeps it current on resize and on late-settling ad
   frames. With no inset set, sticky is inert, so a browser that never runs that
   code gets exactly the old scroll behavior.
   The containing block is the .cell, which flex-stretches to the row height
   (the main column's height), so the pin releases exactly where the sidebar
   used to end and never rides over the footer. Nothing in the ancestor chain
   sets overflow, transform, filter or contain, so no ancestor scrollport
   captures it.
   Scoped to body.pg-feed and to the 931px desktop layout, matching the template
   breakpoint: below it the row is flex-direction:column, the cell collapses to
   content height, and there is no travel room to stick through. */
@media (min-width: 931px) {
body.pg-feed #PageManagerContent .panel .panel-table > .row > .cell.has-prev > .cell-wrapper { position: sticky; }

/*-- Pinned, the wrapper's bottom edge sits on the window's bottom edge, so this
   trailing padding is the only gap under the last sidebar block. 4rem is the
   page-bottom anchor and reads as dead space against the window; 1.5rem matches
   the spacing scale. */
body.pg-feed #PageManagerContent .panel .panel-table > .row > .cell.has-prev > .cell-wrapper > .cell-content:last-child { padding-bottom: var(--tl-space-6); }
}

/*-- Feed Header: title + sort dropdown row. Title uses .content-title for canonical page-title styling. */
.tl-feed-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2rem; flex-wrap: wrap; gap: 0.5rem; }

.tl-feed-header .content-title { margin-bottom: 0; }

/*-- Inline Feed Filter (collapsible <details> in feed header - post-paradigm 1.2) */
.tl-feed-filter { background: var(--white); border: 1px solid var(--sand-dark); border-radius: var(--tl-radius); margin-bottom: 1rem; padding: 0.4rem 0.8rem; font-size: 0.85rem; }

.tl-feed-filter > summary { cursor: pointer; font-weight: 600; color: var(--ink-mid); padding: 0.25rem 0; list-style: none; display: flex; align-items: center; gap: 0.4rem; }

.tl-feed-filter > summary::-webkit-details-marker { display: none; }

.tl-feed-filter > summary::before { content: "\25B8"; display: inline-block; transition: transform 0.15s; color: var(--ink-light); font-size: 0.75rem; }

.tl-feed-filter[open] > summary::before { transform: rotate(90deg); }

.tl-feed-filter-form { margin: 0; }

.tl-feed-filter-options { display: flex; gap: 1.1rem; padding: 0.55rem 0 0.35rem 0.95rem; flex-wrap: wrap; }

.tl-feed-filter-options label { display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; color: var(--ink-mid); font-weight: 500; }

.tl-feed-filter-options input[type="radio"] { accent-color: var(--clay); }

/*-- Cards */
.card-feed { background: var(--white); border-radius: var(--tl-radius); border: 1px solid var(--sand-dark); margin-bottom: 0.5rem; overflow: hidden; min-width: 0; max-width: 100%; box-sizing: border-box; }

/*-- Allow the WebItems flex column to shrink when wide content (e.g. multi-image
     gallery) lives inside. Flex items default to min-width:auto = min-content,
     which lets natural-size content push the column. The card-feed gallery has
     its own overflow:hidden so we never see actual horizontal overflow. */
.PageManagerContent .panel .cell:has(.card-feed) { min-width: 0; }

.card-feed-strip { height: 4px; width: 100%; }

.card-feed-body { padding: 1.1rem 1.2rem; min-width: 0; }

/*-- Card Meta */
.card-feed-meta { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.8rem; }

.card-feed-meta .tl-avatar { flex-shrink: 0; }

.card-feed-meta-info { flex: 1; min-width: 0; }

.card-feed-meta-name-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; min-width: 0; }

.card-feed-meta-name { font-weight: 600; font-size: 0.9rem; color: var(--ink); }

a.card-feed-meta-name { text-decoration: none; display: inline-block; }

a.card-feed-meta-name:hover { color: var(--clay); }

.card-feed-meta-sub { font-size: 0.75rem; color: var(--ink-light); }

/*-- Card Text - rich-text wrapper used on both feed cards (short blurb with a
     leading <strong> title line) and detail-page bodies (full Trix WYSIWYG
     output: businesses About, events/marketplace/news description). The
     * { margin:0 } global reset + webitems.css ul/ol/h1-h4 zeroing wipe the
     natural spacing of every block-level tag, so we have to put it back here. */
.card-feed-text { font-size: 0.93rem; line-height: 1.6; color: var(--ink-mid); margin-bottom: 0.9rem; }

/*-- Inline bold. Used to be `display:block` + display-font + bigger size, which
     hijacked every user-typed <strong> in rich-text bodies and turned mid-
     sentence bold into a pseudo-heading. The only caller that relied on the
     block treatment was the news-embed feed card; it now uses .card-news-title
     so we can let <strong> behave as plain inline bold here. */
.card-feed-text strong,
.card-feed-text b { color: var(--ink); font-weight: 700; }

/*-- Headings inside rich text. Match the strong-as-block treatment so a Trix
     h1/h2/h3 (from paste or imported content) reads as a section header with
     air above it instead of flush against the next paragraph. */
.card-feed-text h1,
.card-feed-text h2,
.card-feed-text h3,
.card-feed-text h4 {
	color: var(--ink); font-family: var(--font-display); font-weight: 700;
	line-height: 1.25; margin: 1.25rem 0 0.5rem 0;
}

.card-feed-text h1 { font-size: 1.35rem; }

.card-feed-text h2 { font-size: 1.2rem; }

.card-feed-text h3 { font-size: 1.05rem; }

.card-feed-text h4 { font-size: 0.95rem; text-transform: none; letter-spacing: 0; }

.card-feed-text h1:first-child,
.card-feed-text h2:first-child,
.card-feed-text h3:first-child,
.card-feed-text h4:first-child { margin-top: 0; }

/*-- Paragraphs. Drop the empty <p> Trix sometimes emits between blocks so it
     does not stack visible blank lines on top of the margin we already give p. */
.card-feed-text p { margin: 0 0 0.85rem 0; }

.card-feed-text p:last-child { margin-bottom: 0; }

.card-feed-text p:empty { display: none; }

/*-- Lists. Restore the standard ~1.5rem left indent and disc/decimal markers
     that the global resets killed. Empty <li> items get hidden so users who
     pressed Enter between bullets do not see phantom empty rows. */
.card-feed-text ul,
.card-feed-text ol { margin: 0.5rem 0 0.85rem 1.5rem; padding-left: 0.5rem; }

.card-feed-text ul { list-style: disc outside; }

.card-feed-text ol { list-style: decimal outside; }

.card-feed-text li { margin: 0.2rem 0; }

.card-feed-text li:empty { display: none; }

.card-feed-text ul ul,
.card-feed-text ul ol,
.card-feed-text ol ul,
.card-feed-text ol ol { margin: 0.2rem 0 0.2rem 1.25rem; }

/*-- Inline formatting from Trix toolbar. <u> needs an explicit underline
     because the global reset on <u> removes the browser default in some
     stylesheets, and <s>/<del> get an explicit line-through for parity. */
.card-feed-text em,
.card-feed-text i { font-style: italic; }

.card-feed-text u { text-decoration: underline; }

.card-feed-text s,
.card-feed-text del,
.card-feed-text strike { text-decoration: line-through; }

/*-- Auto-linked URLs (Linkify) in feed bodies and About sections. --sky is the
     Links token; break long URLs so a pasted link can't overflow the card. */
.card-feed-text a {
	color: var(--sky);
	text-decoration: underline;
	overflow-wrap: break-word;
	word-break: break-word;
}

.card-feed-text a:hover { color: var(--clay); }

/*-- Card Image - fixed 180px tall, width follows aspect (small images stretch up, big images shrink down) */
.card-feed-image { height: 180px; width: auto; display: block; border-radius: var(--tl-radius); margin-bottom: 0.9rem; background: var(--sand); }

/*-- Card: Latest Comment Preview */
.card-feed-latest-comment-wrap { margin: 0.8rem -0.6rem -0.6rem; border-top: 1px solid var(--sand-dark); padding-top: 0.5rem; }

.card-feed-latest-comment { padding: 0.4rem 0.6rem; border-radius: 3px; font-size: 0.85rem; color: var(--ink-mid); line-height: 1.5; cursor: pointer; transition: background 0.15s; }

.card-feed-latest-comment:hover { background: var(--sand); }

.card-feed-comment-author { font-weight: 600; color: var(--ink); }

/*-- Card Actions */
.card-feed-actions { display: flex; align-items: center; gap: 0.3rem; padding-top: 0.8rem; border-top: 1px solid var(--sand); }

.card-feed-actions .tl-btn-action { flex-shrink: 0; }

.card-feed-actions-spacer { flex: 1; }

/*-- Hash-deep-link flash: feed card scrolled to from /#post-{id} or review
     card scrolled to from /businesses/{slug}#review-{id} pulses a subtle clay
     outline so the user's eye lands on the right item. Removed by JS after
     2 seconds. */
.card-feed.tl-hash-flash {
	box-shadow: 0 0 0 3px rgba(158, 74, 30, 0.35);
	transition: box-shadow 0.3s;
}

/*-- Members Module: Account Feed */
.tl-feed-compose { background: var(--white); border: 1px solid var(--sand-dark); border-radius: var(--tl-radius); padding: 1rem 1.2rem; margin-bottom: 1rem; }

.tl-feed-compose-input { width: 100%; border: 1px solid var(--sand-dark); border-radius: var(--tl-radius); padding: 0.75rem; font-family: var(--font-body); font-size: 0.9rem; resize: vertical; outline: none; }

.tl-feed-compose-input:focus { border-color: var(--clay); }

.tl-feed-compose-actions { display: flex; justify-content: flex-end; margin-top: 0.5rem; }

.tl-feed-list { display: flex; flex-direction: column; gap: 0.75rem; }

.tl-feed-item { background: var(--white); border: 1px solid var(--sand-dark); border-radius: var(--tl-radius); padding: 1rem 1.2rem; }

.tl-feed-item-date { font-size: 0.78rem; color: var(--ink-light); margin-bottom: 0.3rem; }

.tl-feed-item-text { font-size: 0.9rem; color: var(--ink); line-height: 1.5; }

.tl-modal-box:not(.tl-comment-modal) { width: 360px; }

/*-- Comment row needs to host its own kebab. Make it positioned and reserve
 *  trailing room so the icon doesn't overlap long comment text. */
.card-feed-comment { position: relative; }

/*-- Feed cards must be positioned for the absolute kebab to anchor correctly. */
.card-feed { position: relative; }

/*-- Compose Modal (header "+ New Post" trigger) */
.tl-compose-modal { width: 92%; max-width: 600px; }

/*-- "Make this post private" toggle (private accounts only, personal posts). */
.tl-compose-private { display: flex; align-items: center; gap: 0.5rem; margin: 0.6rem 0 0.2rem; font-family: var(--font-body); font-size: 0.85rem; color: var(--ink-mid); cursor: pointer; }

.tl-compose-private input { flex: 0 0 auto; }

.tl-compose-postas { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.7rem; }

.tl-compose-postas-label { font-family: var(--font-body); font-size: 0.85rem; font-weight: 600; color: var(--ink-mid); }

.tl-compose-postas #tl-compose-postas { flex: 1; padding: 0.45rem 0.6rem; font-family: var(--font-body); font-size: 0.9rem; }

.tl-compose-postas-avatar { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; }

.tl-compose-postas-avatar:empty { display: none; }

.tl-compose-postas-avatar .tl-avatar { width: 38px; height: 38px; font-size: 0.85rem; }

.tl-compose-modal #tl-compose-text { font-family: var(--font-body); resize: vertical; min-height: 110px; }

.tl-compose-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 0.5rem; margin-top: 0.85rem; }

.tl-compose-photos:empty { display: none; }

.tl-compose-photo { position: relative; border-radius: var(--tl-radius); overflow: hidden; background: var(--sand); aspect-ratio: 1 / 1; }

.tl-compose-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/*-- Override the global 44px touch-min on <button> so the close button stays a true circle. */
.tl-compose-photo-remove { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; min-width: 28px; min-height: 28px; padding: 0; border-radius: 50%; border: none; background: rgba(0,0,0,0.65); color: #fff; font-size: 0.95rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }

.tl-compose-photo-remove:hover { background: var(--error); }

.tl-compose-actions { display: flex; gap: 0.6rem; align-items: center; justify-content: flex-end; margin-top: 0.9rem; }

/*-- Add Photos uses the canonical .btn .btn-secondary outline styling. The
     .is-disabled state activates when MAX_PHOTOS is reached - kills hover and
     click but keeps layout stable. */
.tl-compose-photo-btn { cursor: pointer; }

.tl-compose-photo-btn.is-disabled { opacity: 0.2; pointer-events: none; }

.tl-compose-shortcuts { display: flex; flex-wrap: nowrap; gap: 0.45rem; margin-top: 1.1rem; padding-top: 0.9rem; border-top: 1px solid var(--sand-dark); overflow-x: auto; }

.tl-compose-shortcut { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.85rem; border: 1px solid var(--sand-dark); border-radius: var(--tl-radius-pill); font-size: 0.8rem; color: var(--ink-mid); background: var(--sand); text-decoration: none; white-space: nowrap; transition: background 0.15s, color 0.15s; }

.tl-compose-shortcut:hover { background: var(--clay); color: var(--white); border-color: var(--clay); }

.tl-compose-shortcut i { font-size: 0.95rem; }

@media (max-width: 600px) {
.tl-compose-modal { width: 96%; }

.tl-compose-shortcuts { flex-wrap: wrap; }

.tl-compose-shortcut { flex: 1 1 calc(50% - 0.25rem); justify-content: center; }
}

/*-- Inline composer (top of community feed, signed-in only).
     The composer wrapper itself is NOT clickable - only the prompt textbox is.
     Avatar links to the viewer's profile. Shortcut pills are individual links.
     This matches the rest of the site: hover effects ONLY on real click targets. */
.tl-feed-composer { background: var(--white); border: 1px solid var(--sand-dark); border-radius: var(--tl-radius); padding: 0.9rem 1rem; margin: 0 0 2rem; }

.tl-feed-composer-row { display: flex; align-items: center; gap: 0.75rem; }

.tl-feed-composer-row .tl-avatar { flex-shrink: 0; }

.tl-feed-composer-avatar-link { display: inline-flex; flex-shrink: 0; text-decoration: none; }

.tl-feed-composer-prompt { flex: 1; min-width: 0; padding: 0.55rem 0.95rem; background: var(--sand); border: 1px solid var(--sand-dark); border-radius: var(--tl-radius-pill); color: var(--ink-light); font-family: var(--font-body); font-size: 0.95rem; text-align: left; cursor: text; appearance: none; -webkit-appearance: none; transition: background 0.15s, border-color 0.15s, color 0.15s; }

.tl-feed-composer-prompt:hover,
.tl-feed-composer-prompt:focus-visible { background: var(--white); border-color: var(--clay-light); color: var(--ink-mid); }

.tl-feed-composer-prompt:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }

.tl-feed-composer-shortcuts { display: flex; flex-wrap: nowrap; gap: 0.45rem; margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px solid var(--sand-dark); overflow-x: auto; }

.tl-feed-composer-shortcuts .tl-compose-shortcut { flex-shrink: 0; }

@media (max-width: 600px) {
.tl-feed-composer-shortcuts { flex-wrap: wrap; }

.tl-feed-composer-shortcuts .tl-compose-shortcut { flex: 1 1 calc(50% - 0.25rem); justify-content: center; }
}

/*-- Feed variant: clamp the post body to exactly three lines instead of the
     ~12-line About cap. Same .tl-collapse machinery and toggle button - only
     the collapsed height differs. -webkit-line-clamp gives three full lines
     with a trailing ellipsis, so the cutoff reads as "there is more" rather
     than a hard mid-word slice; no fade gradient here (a 4rem fade would cover
     most of a 3-line box, and the ellipsis is already the cue). texomaland.js
     reveals the View More toggle only when the text overflows three lines.
     Expanded state drops the clamp and shows the full body. */
.tl-collapse-feed .tl-collapse-body { max-height: none; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.tl-collapse-feed .tl-collapse-body::after { content: none; }

.tl-collapse-feed.is-expanded .tl-collapse-body { display: block; -webkit-line-clamp: unset; }

/*-- Feed variant toggle: right-aligned with a slight gap below so it does not
     press against the engagement row beneath it. Scoped with .is-overflowing
     to match the base reveal rule's specificity (the button only appears once
     the body overflows three lines). fit-content + margin-left:auto pushes
     just the button to the right without right-aligning the clamped body. */
.tl-collapse-feed.is-overflowing .tl-collapse-toggle { display: block; width: -moz-fit-content; width: fit-content; margin-left: auto; margin-bottom: 0.6rem; }

/*-- Embedded module content is a compact link preview inside the feed post.
     The provider still owns the canonical card markup; these feed-only rules
     turn that card into an inset horizontal preview and keep a full spacing
     step between its border and the engagement controls below. */
.tl-feed-embedded-content { margin: var(--tl-space-3) 0 var(--tl-space-4); padding: var(--tl-space-2); border: 1px solid var(--sand-dark); border-radius: var(--tl-radius); background: var(--sand); overflow: hidden; }

.tl-feed-embedded-content .list-wrapper.card-style ul { display: block; }

.tl-feed-embedded-content .list-wrapper .item { border: 0; border-radius: var(--tl-radius); box-shadow: none; }

.tl-feed-embedded-content .list-wrapper .item:hover { box-shadow: var(--tl-shadow-card); transform: none; }

.tl-feed-embedded-content .list-wrapper .item .card-link { display: flex; flex-direction: row; align-items: stretch; min-width: 0; }

.tl-feed-embedded-content .list-wrapper .item .card-image,
.tl-feed-embedded-content .list-wrapper .item .card-image-bg { flex: 0 0 5.5rem; width: 5.5rem; height: auto; min-height: 5.5rem; border-radius: 0; }

.tl-feed-embedded-content .list-wrapper .item .card-image i { font-size: var(--tl-text-h2); }

.tl-feed-embedded-content .list-wrapper .item .card-data { flex: 1 1 auto; min-width: 0; padding: var(--tl-space-3); }

.tl-feed-embedded-content .list-wrapper .item .card-data > * + * { margin-top: var(--tl-space-1); }

.tl-feed-embedded-content .list-wrapper .item .card-text,
.tl-feed-embedded-content .list-wrapper .item .card-description { -webkit-line-clamp: 2; }

.tl-feed-embed-placeholder { margin: var(--tl-space-3) 0 var(--tl-space-4); padding: var(--tl-space-3); border: 1px solid var(--sand-dark); border-radius: var(--tl-radius); background: var(--sand); color: var(--ink-light); font-size: var(--tl-text-small); }

/*--===========================================================================
  Feed Card (shared)
  ---------------------------------------------------------------------------
  These styles back the cards rendered by App_Code/feed/FeedCardRenderer.cs.
  ANY page that calls FeedCardRenderer.RenderCard(...) needs these rules:
    - feed module home page
    - members module Activity tab
    - any future consumer
  Do not duplicate these rules into a module's option.ascx <style> block - that
  was the bug that made profile activity cards render with giant icons.
============================================================================*/
/*-- Feed: Card Strip Color Variants */
.card-feed-strip-personal { background: var(--sky); }

.card-feed-strip-business { background: var(--sage); }

.card-feed-strip-bizpost { background: var(--clay); }

.card-feed-strip-event { background: var(--gold); }

.card-feed-strip-product { background: var(--type-product); }

.card-feed-strip-news { background: var(--sky); }

.card-feed-meta-sub-right { margin-left: auto; }

/*-- Feed: Social Engagement Icons */
/* Negative margins on all four sides cancel the engagement button's own
   padding so the visible spacing above/below/around the icons matches the
   icon content, not the hover halo. The hover halo still bleeds slightly
   beyond the visible row - that's intentional, same trick as profile stats. */
.card-feed-engagement { display: flex; align-items: center; gap: 2px; margin: -0.4rem -0.6rem; }

.card-feed-engagement-item { display: flex; align-items: center; gap: 5px; color: var(--ink-light); font-size: 0.9rem; cursor: pointer; padding: 0.4rem 0.6rem; border-radius: 3px; transition: background 0.15s; }

.card-feed-engagement-item:hover { background: var(--sand); }

.card-feed-engagement-item svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }

.card-feed-engagement-count { font-weight: 500; font-size: 0.85rem; }

/*-- Feed: Liked state */
.card-feed-engagement-item.likes.liked svg { fill: var(--error); stroke: var(--error); }

.card-feed-engagement-item.likes.liked { color: var(--error); }

/*-- Feed: Commented state */
.card-feed-engagement-item.comments.commented svg { fill: var(--sky); stroke: var(--sky); }

.card-feed-engagement-item.comments.commented { color: var(--sky); }

/*-- Feed: Shared state */
.card-feed-engagement-item.shares.shared svg { fill: var(--sage); stroke: var(--sage); }

.card-feed-engagement-item.shares.shared { color: var(--sage); }

/*-- Feed: Clickable embedded content */
.card-feed-embed { display: block; text-decoration: none; color: inherit; border-radius: 3px; padding: 0.5rem 0.6rem; margin: 0 -0.6rem 1rem; transition: background 0.15s; }

.card-feed-embed:hover { background: var(--sand); color: inherit; }

.card-feed-embed .card-feed-text,
.card-feed-embed .card-product-row,
.card-feed-embed .card-biz-row,
.card-feed-embed .card-event-details { margin-bottom: 0; }

/*-- Feed: Comment modal */
.tl-comment-modal { width: 680px; max-width: 95vw; max-height: 80vh; display: flex; flex-direction: column; }

.tl-comment-modal .tl-modal-body { flex: 1; overflow-y: auto; padding: 0; display: flex; flex-direction: column; }

.tl-comment-modal-form { padding: 1rem 1.2rem; border-bottom: 1px solid var(--sand-dark); flex-shrink: 0; }

.tl-comment-modal-list { padding: 0.5rem 1.2rem 1rem; flex: 1; overflow-y: auto; }

.tl-comment-modal-list:empty::after { content: 'No comments yet. Be the first!'; display: block; text-align: center; color: var(--ink-light); font-size: 0.85rem; padding: 2rem 0; }

/*-- Feed: Comment section (legacy inline - hidden) */
.card-feed-comments { padding: var(--tl-space-2) 0; border-top: 1px solid var(--sand-dark); display: none; }

.card-feed-comments.open { display: block; }

.card-feed-comment { display: flex; gap: 10px; padding: 8px 0; align-items: flex-start; }

.card-feed-comment .tl-avatar { width: 28px; height: 28px; min-width: 28px; font-size: 0.7rem; }

.card-feed-comment-body { flex: 1; line-height: 1.4; }

.card-feed-comment-name { font-weight: 600; font-size: 0.85rem; line-height: 1; }

.card-feed-comment-text { font-size: 0.85rem; color: var(--ink-mid); margin-top: 0.3rem; line-height: 1.45; }

.card-feed-comment-time { font-size: 0.75rem; color: var(--ink-light); line-height: 1; margin-left: 0.35rem; }

.card-feed-comment-form { display: flex; gap: 8px; margin-top: 8px; }

.card-feed-comment-form input { flex: 1; border: 1px solid var(--sand-dark); border-radius: var(--tl-radius-pill); padding: 6px 14px; font-size: 0.85rem; outline: none; }

.card-feed-comment-form input:focus { border-color: var(--sky); }

.card-feed-comment-form button { display: inline-flex; align-items: center; gap: 0.35rem; background: var(--clay); color: #fff; border: 1.5px solid var(--clay); border-radius: var(--tl-radius-pill); padding: 0.35rem 0.9rem; font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; cursor: pointer; transition: background 0.15s, border-color 0.15s; }

.card-feed-comment-form button:hover { background: var(--clay-dark); border-color: var(--clay-dark); }

/*-- Feed: Image gallery - horizontal stack at fixed 180px height, no scroll, fade indicates more.
     The min-width:0 chain (cell -> card-feed -> card-feed-body -> gallery) defeats flexbox's
     default min-content sizing so N natural-width images don't stretch the parent column. */
.card-feed-gallery { position: relative; overflow: hidden; margin: 0 0 0.9rem; padding: 4px 0 8px; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }

.card-feed-gallery::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 64px; background: linear-gradient(to right, rgba(255,255,255,0), var(--white) 80%); pointer-events: none; z-index: 1; }

.card-feed-gallery-track { display: flex; gap: var(--tl-space-2); overflow: hidden; width: 100%; max-width: 100%; min-width: 0; }

.card-feed-gallery-item { flex: 0 0 auto; display: block; text-decoration: none; cursor: pointer; border-radius: var(--tl-radius); transition: transform 0.15s ease, box-shadow 0.15s ease; }

.card-feed-gallery-item:hover { transform: translateY(-2px); box-shadow: var(--tl-shadow-hover); }

.card-feed-gallery-item img { width: auto; height: 180px; max-width: none; border-radius: var(--tl-radius); display: block; }

.card-feed-gallery-count { position: absolute; top: var(--tl-space-2); right: var(--tl-space-2); background: rgba(0,0,0,0.6); color: #fff; font-size: 0.75rem; font-weight: 600; padding: 4px 8px; border-radius: var(--tl-radius-pill); z-index: 2; pointer-events: none; }

/*-- Feed: Single image clickable for lightbox - link wraps tight to the image, hover lifts + shadows */
.card-feed-image-link { display: block; width: -moz-fit-content; width: fit-content; max-width: 100%; margin-bottom: 0.9rem; text-decoration: none; cursor: pointer; border-radius: var(--tl-radius); transition: transform 0.15s ease, box-shadow 0.15s ease; }

.card-feed-image-link:hover { transform: translateY(-2px); box-shadow: var(--tl-shadow-hover); }

.card-feed-image-link .card-feed-image { margin-bottom: 0; }