/*
 * [Post types] (owner, 2026-10-19): every post type the post box can publish, in the theme's look, in the feed, on
 * the single post and inside shared posts. Loaded on every page (_head.tpl), after niguro.css.
 * The patterns are the theme's: media edge to edge with square corners (niguro.css "Posts"), 18px cards
 * (--ng-r), 12px inner rows (--ng-r-sm), 28px chips (--ng-chip-*), pill buttons, tinted tiles (.ng-ctile look).
 * Sngine's own classes stay (its JS and the composer use them); only their default look is replaced here.
 * Colours are tokens only, so night mode follows body.night-mode through them.
 */

/* ------------------------------------------------------------------ */
/* [Poll] (__feeds_post.body.tpl .ng-poll, niguro-poll.js)              */
/* ------------------------------------------------------------------ */
.ng-poll {
  margin: 12px var(--ng-pg, 16px) 4px; padding: 14px 14px 12px;
  border: 1px solid var(--ng-line); border-radius: var(--ng-r); background: var(--ng-card);
}
.post-snippet .ng-poll { margin-left: 0; margin-right: 0; }
.ng-poll__head { margin: 0 2px 12px; }
.ng-poll__q .post-replace { margin: 0; }
.ng-poll__q .post-text { margin: 0; padding: 0; font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--ng-ink-strong); }
.ng-poll__meta { margin-top: 4px; font-size: 13px; line-height: 1.4; color: var(--ng-sub); }
.ng-poll__meta [data-ng-poll-total] { font-weight: 600; color: var(--ng-ink); font-variant-numeric: tabular-nums; }
.ng-poll .poll-options { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; }
.ng-poll__opt { position: relative; }
.ng-poll .poll-option {
  position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; margin: 0;
  padding: 10px 64px 10px 14px; border: 1.5px solid transparent; border-radius: var(--ng-r-sm, 12px);
  background: var(--ng-fill); font-weight: 600; overflow: hidden; cursor: pointer; user-select: none;
  -webkit-tap-highlight-color: transparent; transition: border-color .15s, transform .12s, box-shadow .15s;
}
.ng-poll__opt.has-faces .poll-option { padding-right: 124px; }
.ng-poll .poll-option:hover { background: var(--ng-fill); border-color: hsl(var(--primary) / .4); }
.ng-poll .poll-option:active { transform: scale(.985); }
.ng-poll .poll-option:focus-visible { outline: 2px solid var(--ng-brand); outline-offset: 2px; }
/* the fill: as wide as the option's share (Sngine's post.js sets the width), tinted by it (--ng-share 0..1) */
.ng-poll .percentage-bg {
  position: absolute; top: 0; bottom: 0; left: 0; height: auto; border-radius: 0; opacity: 1; z-index: 0;
  background: hsl(var(--primary) / calc(.08 + var(--ng-share, 0) * .16));
  transition: width .5s cubic-bezier(.2, .8, .2, 1), background-color .3s;
}
body.night-mode .ng-poll .percentage-bg { background: hsl(var(--primary) / calc(.14 + var(--ng-share, 0) * .2)); }
.ng-poll .poll-option > :not(.percentage-bg) { position: relative; z-index: 1; }
.ng-poll .ng-poll__radio { position: absolute !important; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.ng-poll__ico { flex: none; font-size: 18px; line-height: 1; }
.ng-poll__label { min-width: 0; font-size: 14.5px; font-weight: 600; line-height: 1.35; color: var(--ng-ink-strong); overflow-wrap: anywhere; }
.ng-poll__check {
  display: none; flex: none; align-items: center; justify-content: center; width: 18px; height: 18px;
  border-radius: 50%; background: var(--ng-brand); color: hsl(var(--primary-foreground));
}
.ng-poll__check .ng-ico, .ng-poll__check svg { width: 12px; height: 12px; stroke-width: 3; }
/* your vote: brand border and the check (the hidden radio is what Sngine's post.js checks) */
.ng-poll__opt:has(.ng-poll__radio:checked) .poll-option { border-color: var(--ng-brand); }
.ng-poll__opt:has(.ng-poll__radio:checked) .ng-poll__check { display: inline-flex; }
/* right side: up to three voters' faces (open who voted) and the percentage */
.ng-poll .poll-voters {
  position: absolute; top: 0; right: 14px; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 8px;
  padding: 0; pointer-events: none;
}
.ng-poll__faces { display: flex; align-items: center; pointer-events: auto; cursor: pointer; }
.ng-poll__faces:empty { display: none; }
.ng-poll__faces img {
  width: 24px; height: 24px; margin-left: -8px; border: 2px solid var(--ng-card); border-radius: 50%;
  object-fit: cover; background: var(--ng-fill);
}
.ng-poll__faces img:first-child { margin-left: 0; }
.ng-poll__faces:focus-visible { outline: 2px solid var(--ng-brand); outline-offset: 2px; border-radius: 999px; }
.ng-poll__pct { min-width: 38px; font-size: 13.5px; font-weight: 700; text-align: right; color: var(--ng-ink-strong); font-variant-numeric: tabular-nums; }
.ng-poll__opt.is-lead .ng-poll__pct { color: var(--ng-brand); }
@media (prefers-reduced-motion: reduce) {
  .ng-poll .percentage-bg, .ng-poll .poll-option { transition: none; }
  .ng-poll .poll-option:active { transform: none; }
}
/* ---- /[Poll] ---- */

/* ------------------------------------------------------------------ */
/* [Post types] shared bits                                             */
/* ------------------------------------------------------------------ */
/* the round badge Sngine floats half over a cover (funding, offer, job, course, event, group, merit): the cover's
   pill and the title already say what it is */
.post-body .post-media-image .icon { display: none; }
/* header flags (Subscriptions / Paid / Adult): small tinted pills instead of Bootstrap's light badge */
.post-time .badge.bg-light {
  padding: 3px 8px; border-radius: 999px; background: var(--ng-tint) !important; color: var(--ng-brand) !important;
  font-size: 10.5px; font-weight: 700; letter-spacing: .03em; vertical-align: 1px;
}
/* anonymous: the spy icon on a round tinted tile, the size of an avatar */
.post-avatar-anonymous { display: grid; place-items: center; width: 100%; height: 100%; aspect-ratio: 1; padding: 0; border-radius: 50%; background: var(--ng-tint); }
.post-avatar-anonymous .svg-container, .post-avatar-anonymous svg { width: 24px !important; height: 24px !important; }

/* details as chips (job, course; product's facts): icon + value, 28px */
.post-body .post-product-wrapper {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; font-size: 13px;
}
.post-body .post-product-details {
  flex: none; display: inline-flex; align-items: center; gap: var(--ng-chip-gap, 6px); height: var(--ng-chip-h, 28px);
  padding: var(--ng-chip-pad, 0 12px); border: 0; border-radius: var(--ng-chip-r, 999px); background: var(--ng-fill);
  color: var(--ng-ink); text-align: left; white-space: nowrap;
}
.post-body .post-product-details .title { display: inline-flex; align-items: center; margin: 0; font-size: 0; }
.post-body .post-product-details .title i { margin: 0 !important; width: auto; font-size: var(--ng-chip-ico, 14px); color: var(--ng-brand) !important; }
.post-body .post-product-details .description { font-size: var(--ng-chip-fs, 13px); font-weight: var(--ng-chip-fw, 500); color: var(--ng-ink); }
.post-body .post-product-details .description .badge {
  padding: 0; border-radius: 0; background: transparent !important; font-size: var(--ng-chip-fs, 13px); font-weight: 700;
}
.post-body .post-product-details .description .badge.bg-success { color: var(--ng-brand); }
.post-body .post-product-details .description .badge.bg-danger { color: var(--ng-red); }

/* job / course / funding: left-aligned under the cover, like a link card's text */
.post-body :is(.post-funding-meta, .post-job-meta, .post-course-meta) { padding: 12px var(--ng-pg, 16px) 2px; text-align: left; }
.post-body :is(.post-funding-meta .funding-title, .post-job-meta .job-title, .post-course-meta .course-title) {
  margin: 0 0 10px !important; font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--ng-ink-strong);
}
.post-body :is(.job-title, .course-title) a { color: inherit; text-decoration: none; }
.post-body :is(.job-title, .course-title) a:hover { color: var(--ng-brand); }
.post-body :is(.funding-description, .job-description, .course-description, .merit-description) {
  margin-top: 10px; padding: 0; border: 0; border-radius: 0; background: transparent !important; color: var(--ng-ink);
}
.post-body :is(.funding-description, .job-description, .course-description) .post-text,
.post-body :is(.funding-description, .job-description, .course-description) .post-replace { margin: 0; padding: 0; }
.post-body :is(.post-funding-meta, .post-job-meta, .post-course-meta, .post-product-container) .btn { min-height: var(--ng-field-h, 40px); }
.post-body :is(.post-funding-meta, .post-job-meta, .post-course-meta) .btn-success,
.post-body .post-product-container .btn-success {
  border-color: var(--ng-brand); background: var(--ng-brand); color: hsl(var(--primary-foreground));
}
.post-body :is(.post-funding-meta, .post-job-meta, .post-course-meta, .post-product-container) .btn-success:hover { filter: brightness(1.06); }

/* funding: raised of goal, a plain brand bar on a tint */
.post-body .post-funding-meta .funding-completion {
  margin: 0 !important; padding: 12px 14px; border: 0; border-radius: var(--ng-r-sm, 12px); background: var(--ng-fill); font-size: 13.5px; color: var(--ng-ink);
}
.post-body .post-funding-meta .funding-completion .float-end { font-weight: 700; color: var(--ng-brand); }
.post-body .post-funding-meta .progress { height: 8px; margin-top: 8px !important; border-radius: 999px; background: hsl(var(--primary) / .15); }
.post-body .post-funding-meta .progress-bar { border-radius: 999px; background: var(--ng-brand) !important; background-image: none !important; animation: none; }

/* product: name, condition chips, price, facts; Sngine's badges as tinted pills */
.post-body .post-product-container { padding: 0 var(--ng-pg, 16px); }
.post-body .post-product-container > .text-xlg strong { font-size: 18px; font-weight: 700; color: var(--ng-ink-strong); }
.post-body .post-product-container > .text-xlg .badge,
.post-body .post-product-container .badge.badge-lg {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; vertical-align: 2px;
  background: var(--ng-fill) !important; color: var(--ng-ink) !important; font-size: 11.5px; font-weight: 700;
}
.post-body .post-product-container > .text-xlg .badge.bg-primary { background: var(--ng-tint) !important; color: var(--ng-brand) !important; }
.post-body .post-product-container .badge.text-success { color: var(--ng-brand) !important; }
.post-body .post-product-container .badge.text-danger { color: var(--ng-red) !important; }
.post-body .post-product-container .badge.text-primary { background: var(--ng-tint) !important; color: var(--ng-brand) !important; }
.post-body .post-product-container > .text-success { color: var(--ng-brand) !important; font-size: 17px; }
.post-body .post-product-container > div > .svg-container,
.post-body .post-product-container > div > svg { width: 18px !important; height: 18px !important; vertical-align: -3px; }

/* offer: its picture fills the cover; the title in ink, the price in brand */
.post-body .post-media-meta .title.text-active { color: var(--ng-ink-strong) !important; margin-top: 0 !important; font-size: 17px; font-weight: 700; }
.post-body .post-media-meta .text-success { color: var(--ng-brand) !important; }

/* event: the date as a white tile with a brand month (Sngine: red), in the cover's corner */
.post-body .post-media-image .date {
  top: 12px; left: 12px; overflow: hidden; min-width: 52px; border-radius: var(--ng-r-sm, 12px);
  background: var(--ng-card); color: var(--ng-ink-strong); font-size: 18px; line-height: 1.1; box-shadow: var(--ng-card-shadow);
}
.post-body .post-media-image .date .day { padding: 6px 10px 4px; }
.post-body .post-media-image .date .month { padding: 3px 10px; border-radius: 0; background: var(--ng-brand); color: hsl(var(--primary-foreground)); font-size: 11px; letter-spacing: .06em; }
.post-body .post-media.module { border: 0; border-radius: 0; background: var(--ng-fill-2); }
.post-body .post-media.module .post-media-meta .title { margin-top: 0 !important; font-size: 17px; font-weight: 700; }
.post-body .post-media.module .post-media-meta .title a { color: var(--ng-ink-strong); text-decoration: none; }
.post-body .post-media.module .post-media-meta .description { margin-top: 4px !important; font-size: 14px; color: var(--ng-sub); }
.post-body .post-media.module .divider { margin: 12px 0 !important; }
.post-body .post-media-image .source { left: 12px; bottom: 12px; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; text-transform: none; }

/* file: a row card (type tile, name and type, Download) */
.post-body .post-downloader.ng-file {
  display: flex; align-items: center; gap: 12px; margin: 12px var(--ng-pg, 16px) 4px; padding: 12px;
  border: 1px solid var(--ng-line); border-radius: var(--ng-r); background: var(--ng-card);
}
.ng-file__ico {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px;
  background: var(--ng-tint); color: var(--ng-brand); font-size: 20px;
}
.ng-file__body { flex: 1; min-width: 0; }
.ng-file__name { display: block; font-size: 14.5px; font-weight: 700; color: var(--ng-ink-strong); }
.ng-file__type { display: block; font-size: 12.5px; color: var(--ng-sub); }
.ng-file .btn { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; font-size: 13px; }
.ng-file .btn .ng-ico { width: 16px; height: 16px; }

/* audio: the player in a card with a tile, like a file */
.post-body .ng-audio {
  display: flex; align-items: center; gap: 12px; margin: 12px var(--ng-pg, 16px) 4px; padding: 10px 12px;
  border: 1px solid var(--ng-line); border-radius: var(--ng-r); background: var(--ng-card);
}
.ng-audio__ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--ng-tint); color: var(--ng-brand); }
.ng-audio__ico .ng-ico { width: 22px; height: 22px; }
.ng-audio audio { flex: 1; min-width: 0; height: 40px; }
body.night-mode .ng-audio audio { color-scheme: dark; }

/* check-in: the place as a card (no map key: Admin › Geolocation) or the map, edge to edge */
.post-body .post-map { margin-top: 12px; }
.post-body .post-map iframe { display: block; border-radius: 0; }
.ng-place {
  display: flex; align-items: center; gap: 12px; margin: 12px var(--ng-pg, 16px) 4px; padding: 12px;
  border: 1px solid var(--ng-line); border-radius: var(--ng-r); background: var(--ng-card); color: var(--ng-ink); text-decoration: none;
}
.ng-place:hover { border-color: hsl(var(--primary) / .4); color: var(--ng-ink); }
.ng-place__ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--ng-tint); color: var(--ng-brand); }
.ng-place__ico .ng-ico { width: 22px; height: 22px; }
.ng-place__body { flex: 1; min-width: 0; }
.ng-place__name { display: block; font-size: 14.5px; font-weight: 700; color: var(--ng-ink-strong); overflow-wrap: anywhere; }
.ng-place__sub { display: block; font-size: 12.5px; color: var(--ng-sub); }

/* live: the stream's picture with a LIVE pill and the theme's round play (Sngine: a blue PNG) */
.post .youtube-player.with-live { padding-top: 56.25%; background: var(--ng-fill-2); }
.post .youtube-player.with-live img { height: 100%; object-fit: cover; }
.post .youtube-player.with-live .play {
  width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; background: hsl(0 0% 0% / .55) none;
  box-shadow: 0 0 0 2px hsl(0 0% 100% / .85) inset;
}
.post .youtube-player.with-live .play::before {
  content: ""; position: absolute; top: 50%; left: 50%; margin: -10px 0 0 -6px;
  border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent #fff;
}
.ng-livebadge {
  position: absolute; top: 12px; left: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px;
  border-radius: 999px; background: var(--ng-red); color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; pointer-events: none;
}
.ng-livebadge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; }

/* locked posts (paid, subscribers only, 18+): one card (templates _need_payment / _need_subscription /
   _need_age_verification), over the post's teaser picture when it has one */
/* (2026-10-19) not <html>: niguro.js marks the page html.ng-lock while the ☰ menu or the composer is open (the page
   scroll lock), and this padding moved the whole page by 8px / 16px / 12px then */
.ng-lock:not(html) { padding: 8px var(--ng-pg, 16px) 12px; }
.ng-lock--image { display: flex; align-items: flex-end; min-height: 420px; padding: 16px; background-size: cover; background-position: center; }
.ng-lock__card {
  display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; padding: 20px 16px;
  border: 1px solid var(--ng-line); border-radius: var(--ng-r); background: var(--ng-card); text-align: center;
}
.ng-lock--image .ng-lock__card { border: 0; background: hsl(var(--card) / .92); backdrop-filter: blur(8px); box-shadow: var(--ng-card-shadow); }
.ng-lock__ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--ng-tint); color: var(--ng-brand); }
.ng-lock__ico .ng-ico, .ng-lock__ico svg { width: 26px; height: 26px; }
.ng-lock__title { font-size: 16px; font-weight: 700; color: var(--ng-ink-strong); }
.ng-lock__text { margin: 0; padding: 0; background: transparent !important; font-size: 14px; color: var(--ng-sub); }
.ng-lock__btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--ng-field-h, 40px); padding: 0 20px; }
.ng-lock__btn s { opacity: .7; font-weight: 500; }
/* ---- /[Post types] ---- */

/* ---- [Live card] (begin) — niguro (owner, 2026-10-19): a live news story in a feed (__ng_news_livecard.tpl, inside
   the story's link card; niguro-news-livecard.js keeps it fresh): the LIVE pill over the title (grey "Ended" after),
   then the 3 newest updates as a mini timeline — a hairline with a dot per update (the newest red while live, key
   updates in the brand colour), the relative time and a "Key" chip, the line (2 lines at most), a 44px picture —
   and "See all N updates". Insets are the card text's (var(--ng-pg) via .post-media-meta). Tokens only. ---- */
.ng-nlc__pill { display: flex; margin: 0 0 6px; }
.ng-live-pill--ended { background: var(--ng-fill); color: var(--ng-sub); }
.ng-live-pill--ended::before { animation: none; opacity: .7; }
.ng-nlc { margin: 6px 0 0; }
.ng-nlc__list { position: relative; margin: 0; padding: 0; list-style: none; }
.ng-nlc__list[hidden] { display: none; }
.ng-nlc__item { position: relative; margin: 0; padding: 0 0 0 20px; }
/* the line: from this dot to the next one (none after the last) */
.ng-nlc__item::before { content: ""; position: absolute; left: 4px; top: 10px; bottom: -6px; width: 2px; border-radius: 1px; background: var(--ng-line); }
.ng-nlc__item:last-child::before { display: none; }
.ng-nlc__item::after {
  content: ""; position: absolute; left: 0; top: 4px; width: 10px; height: 10px; border-radius: 50%;
  box-sizing: border-box; border: 2px solid var(--ng-faint); background: var(--ng-card);
}
.ng-nlc__item.is-key::after { border-color: var(--ng-brand); background: var(--ng-brand); }
.ng-nlc:not(.is-ended) .ng-nlc__item:first-child::after { border-color: var(--ng-red); background: var(--ng-red); }
.ng-nlc__link { display: flex; align-items: flex-start; gap: 10px; padding: 0 0 10px; color: var(--ng-ink); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.ng-nlc__link:hover { color: var(--ng-ink); }
.ng-nlc__link:hover .ng-nlc__text { text-decoration: underline; text-underline-offset: 2px; }
.ng-nlc__link:focus-visible { outline: 2px solid var(--ng-brand); outline-offset: 2px; border-radius: 6px; }
.ng-nlc__body { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.ng-nlc__meta { display: flex; align-items: center; gap: 6px; min-height: 18px; font-size: 12px; line-height: 1.3; color: var(--ng-faint); }
.ng-nlc__key {
  display: inline-flex; align-items: center; height: 17px; padding: 0 6px; border-radius: 999px; background: var(--ng-tint);
  color: var(--ng-brand); font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.ng-nlc__text {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  font-size: 14px; line-height: 1.4; color: var(--ng-ink); overflow-wrap: anywhere;
}
.ng-nlc__item.is-key .ng-nlc__text { font-weight: 600; color: var(--ng-ink-strong); }
.ng-nlc__thumb { flex: none; width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: var(--ng-fill); }
.ng-nlc__all { display: inline-flex; align-items: center; gap: 2px; margin: 0; font-size: 13.5px; font-weight: 600; color: var(--ng-brand); text-decoration: none; }
.ng-nlc__all:hover { color: var(--ng-brand); text-decoration: underline; text-underline-offset: 2px; }
.ng-nlc__all .ng-ico { width: 16px; height: 16px; }
.ng-nlc__list[hidden] + .ng-nlc__all { margin-top: 2px; }
@media (min-width: 768px) { .ng-nlc__text { font-size: 14.5px; } .ng-nlc__thumb { width: 52px; height: 52px; } }
/* ---- /[Live card] (end) ---- */

/* ---- [Live now] + [Live reshare] (begin) — niguro (owner, 2026-10-19): the live card on its own (__ng_news_livecard.tpl
   _part="card"; the list above is the same timeline). Home "Live now" (__ng_home_live.tpl): the pill and the title,
   a 72px cover at the end. A reshared live story in a feed (_feed, __feeds_post.body.tpl): a small "<Name> shared a
   live story" line, then the card edge to edge like the feed's link cards — the cover 16:9 with square corners on
   top, the pill and the title at the post's inset, the timeline, "See all N updates". Tokens only. ---- */
.ng-nlc-card { min-width: 0; }
.ng-nlc-card__head { display: flex; align-items: center; gap: 12px; color: var(--ng-ink-strong); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.ng-nlc-card__head:hover { color: var(--ng-ink-strong); }
.ng-nlc-card__head:hover .ng-nlc-card__title { text-decoration: underline; text-underline-offset: 2px; }
.ng-nlc-card__head:focus-visible { outline: 2px solid var(--ng-brand); outline-offset: 2px; border-radius: 8px; }
.ng-nlc-card__txt { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.ng-nlc-card__title {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
  font-size: 15.5px; font-weight: 700; line-height: 1.35; color: var(--ng-ink-strong); overflow-wrap: anywhere;
}
.ng-nlc-card__cover { order: 2; flex: none; width: 64px; height: 64px; border-radius: 12px; object-fit: cover; background: var(--ng-fill); }
.ng-nlc-card .ng-nlc { margin-top: 10px; }
/* the feed's reshare */
.ng-nlc-card--feed .ng-nlc-card__head { display: block; }
.ng-nlc-card--feed .ng-nlc-card__cover { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 0; }
.ng-nlc-card--feed .ng-nlc-card__txt { padding: 12px var(--ng-pg, 16px) 0; }
.ng-nlc-card--feed .ng-nlc-card__title { font-size: 17px; -webkit-line-clamp: 3; }
.ng-nlc-card--feed .ng-nlc { margin: 10px 0 0; padding: 0 var(--ng-pg, 16px) 14px; }
.ng-lshare { display: flex; align-items: center; gap: 8px; padding: 12px var(--ng-pg, 16px) 0; font-size: 13px; line-height: 1.4; color: var(--ng-sub); }
.ng-lshare__av { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ng-fill) center / cover no-repeat; }
.ng-lshare__by { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ng-lshare__name { font-weight: 600; color: var(--ng-ink-strong); text-decoration: none; }
a.ng-lshare__name:hover { color: var(--ng-ink-strong); text-decoration: underline; }
.ng-lshare__time { color: var(--ng-sub); text-decoration: none; }
.ng-lshare__time:hover { color: var(--ng-ink); }
/* the post menu: the posts' own toggle (niguro.css .post-meta > .float-end.dropdown: 36px round; the ⋯ is .fa-ellipsis-h, niguro-icons.css) */
.ng-lshare__menu { flex: none; margin: -6px -8px -6px auto; }
.ng-lshare__menu > .dropdown-toggle { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: var(--ng-sub); cursor: pointer; transition: background .15s, color .15s; }
.ng-lshare__menu > .dropdown-toggle::after { display: none; }
.ng-lshare__menu > .dropdown-toggle:hover, .ng-lshare__menu > .dropdown-toggle[aria-expanded="true"] { background: var(--ng-fill); color: var(--ng-ink); }
.ng-lshare__menu > .dropdown-toggle .fa { font-size: 16px; }
.ng-lshare__card { margin-top: 10px; }
.post-body > .post-replace + .ng-lshare__card { margin-top: 12px !important; }
.post-body > .ng-lshare__card + .post-actions { margin-top: 0; }
@media (min-width: 768px) { .ng-nlc-card--feed .ng-nlc-card__title { font-size: 18px; } .ng-nlc-card__cover { width: 72px; height: 72px; } }
/* ---- /[Live now] + [Live reshare] (end) ---- */