/* No Cover Charge · Backstage styles. Owned by WS2 Backstage; Foundation owns ncc.css.
   Linked from both hosts (GuitarSuperSystem/wwwroot/index.html, GuitarSuperSystem.Web/Components/App.razor)
   after ncc/ncc.css with the shared build stamp, so it ships with every deploy and can use the tokens.
   Plain CSS (Tailwind does not compile this file): scope every rule under the feature's root class,
   use var(--n-*) tokens instead of raw colours, and keep motion to the ncc.css kit. */

/* ---- Page (Posts.razor) ----------------------------------------------------------------------- */
.bs-page { padding-bottom: var(--n-6); }
.bs-rail { margin-bottom: var(--n-4); }
.bs-main { min-width: 0; max-width: 680px; margin: 0 auto; }
.bs-side { display: none; }
@media (min-width: 1024px) {
  .bs-layout { display: grid; grid-template-columns: minmax(0, 1fr) 288px; gap: var(--n-8); align-items: start; }
  .bs-main { max-width: none; margin: 0; }
  .bs-side { display: grid; gap: var(--n-8); position: sticky; top: calc(var(--n-safe-t) + var(--n-topbar-h) + 64px); }
}

/* The header's compose button: the one round red control on the page. */
.n-icon-btn.bs-compose-btn { background: var(--n-red); color: var(--n-on-red); box-shadow: var(--n-shadow-card); }
.n-icon-btn.bs-compose-btn:active { background: var(--n-red-press); }
@media (hover: hover) { .n-icon-btn.bs-compose-btn:hover:not(:disabled) { background: var(--n-red-press); color: var(--n-on-red); } }
.n-ph__trail:has(> .bs-compose-btn) { margin-right: 0; }

/* ---- Feed list --------------------------------------------------------------------------------- */
.bs-feed { --bs-feed-gap: var(--n-4); display: flex; flex-direction: column; gap: var(--bs-feed-gap); }
@media (min-width: 1024px) { .bs-feed { --bs-feed-gap: var(--n-6); } }

/* Each card sits in a one-row grid so a delete can collapse it: the row shrinks to 0fr, the card
   fades, and the negative margin closes the gap before the post leaves the list (220ms). Overflow is
   clipped only while it folds: a card's menu popover (desktop) must be able to hang outside it. */
.bs-feed-item {
  display: grid; grid-template-rows: 1fr; min-width: 0;
  transition: grid-template-rows calc(220ms / var(--n-tempo)) var(--n-out),
              opacity calc(220ms / var(--n-tempo)) var(--n-out),
              margin-bottom calc(220ms / var(--n-tempo)) var(--n-out);
}
.bs-feed-item > * { min-height: 0; }
.bs-feed-item.is-collapsing { grid-template-rows: 0fr; opacity: 0; margin-bottom: calc(-1 * var(--bs-feed-gap)); pointer-events: none; }
.bs-feed-item.is-collapsing > * { overflow: hidden; }

/* The first page rises in with the kit's stagger, but filling backwards only: a filled-forwards
   translate would leave every card a containing block, and its sheets (menu, confirm) would open
   inside the card instead of over the screen. */
.bs-feed.n-stagger > * { animation-fill-mode: backwards; }

/* First-load skeleton card */
.bs-skel-card { display: grid; gap: var(--n-3); }
.bs-skel-card__head { display: flex; align-items: center; gap: var(--n-3); }
.bs-skel-card__meta { flex: 1 1 auto; display: grid; gap: 6px; }
.bs-skel-card__actions { display: flex; gap: var(--n-5); padding-top: var(--n-1); }


/* Under the list: the load-more spinner, the manual fallback, the retry button and the end marker. */
.bs-feed-foot { display: flex; justify-content: center; align-items: center; min-height: 64px; padding: var(--n-3) 0 var(--n-6); }
.bs-feed-end { margin: 0; text-align: center; }
.bs-feed-sentinel { height: 1px; }

/* ---- Composer ---------------------------------------------------------------------------------- */
.bs-composer { padding: var(--n-4); margin-bottom: var(--n-5); }
.bs-composer__row { display: flex; align-items: flex-start; gap: var(--n-3); }
.bs-composer__prompt {
  flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 18px; border: 1px solid var(--n-line); border-radius: var(--n-r-pill);
  background: var(--n-sunken); color: var(--n-text-3); font: 400 14px/1 var(--n-font-body); text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: text;
}
/* min-width:0 lets the column shrink below its content; the pickers used to push the whole composer
   past the right edge of a phone. */
.bs-composer__fields { flex: 1 1 auto; min-width: 0; display: grid; gap: var(--n-3); }
.bs-composer__fields .n-field { gap: 4px; }
/* Open on a phone, the fields take the card's whole width: beside the avatar they were a 261px column
   with the tag chips one per row and the title placeholder cut off. */
@media (max-width: 479px) { .bs-composer.is-open .bs-composer__row > .n-avatar { display: none; } }
textarea.n-input.bs-autogrow { min-height: 88px; max-height: 320px; resize: none; overflow-y: hidden; }
.bs-composer__acts { display: flex; gap: 4px; margin-top: var(--n-3); padding-top: var(--n-2); border-top: 1px solid var(--n-line); }
.bs-compose-act {
  flex: 1 1 0; min-width: 0; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 4px;
  border: 0; border-radius: var(--n-r-sm); background: none; color: var(--n-text-2); cursor: pointer; white-space: nowrap;
  font: 700 11px/1 var(--n-font-display); letter-spacing: var(--n-ls-btn); text-transform: uppercase;
  transition: background-color var(--n-dur) ease, color var(--n-dur) ease;
}
/* The icon carries the count (an NBadge on its corner) so the word stays one short word. On a phone the
   word sits under its icon, so the four fit a 320px screen with their counts and nothing is cut off. */
.bs-compose-act__ic { position: relative; flex: none; display: inline-grid; place-items: center; }
.bs-compose-act__ic:has(.n-badge) { margin-right: 6px; }
.bs-compose-act__n { position: absolute; top: -8px; left: calc(100% - 6px); }
.bs-compose-act__txt { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 479px) {
  .bs-compose-act { flex-direction: column; gap: 3px; padding: 4px 2px; }
  .bs-compose-act__ic:has(.n-badge) { margin-right: 0; }
}
.bs-compose-act.is-clip, .bs-compose-act.on { color: var(--n-pink); }
.bs-compose-act:disabled, .bs-compose-act.is-off { opacity: .45; cursor: not-allowed; }
@media (hover: hover) { .bs-compose-act:hover:not(:disabled):not(.is-off) { background: var(--n-card-2); } }
.bs-composer__submit { display: flex; align-items: center; justify-content: flex-end; gap: var(--n-2); margin-top: var(--n-3); }
.bs-composer__hint { margin-right: auto; }
.bs-composer__thumbs { display: flex; flex-wrap: wrap; gap: var(--n-2); }
.bs-composer__thumb { position: relative; width: 80px; height: 80px; border-radius: var(--n-r-sm); overflow: hidden; background: var(--n-card-2); }
.bs-composer__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bs-composer__thumb-x {
  position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 26px; height: 26px;
  border: 0; border-radius: 50%; background: var(--n-glass); color: var(--n-text-hi); cursor: pointer;
}
.bs-composer__thumb-x::after { content: ""; position: absolute; inset: -9px; }
.bs-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Lesson / backing-track pickers: a fixed-height list so many items never push the actions away. */
.bs-picker {
  display: flex; flex-direction: column; gap: var(--n-2); height: 260px; padding: var(--n-2);
  border: 1px solid var(--n-line-2); border-radius: var(--n-r-sm); background: var(--n-sunken);
}
.bs-picker__list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; align-content: start; gap: 2px; }
.bs-picker__row {
  display: flex; align-items: center; gap: var(--n-2); width: 100%; min-height: 40px; padding: 0 10px; border: 0; border-radius: var(--n-r-sm);
  background: none; color: var(--n-text); font: 400 14px/1.3 var(--n-font-body); text-align: left; cursor: pointer;
}
.bs-picker__row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bs-picker__row .n-icon { color: var(--n-text-3); }
.bs-picker__row.is-picked { color: var(--n-text-3); cursor: default; }
.bs-picker__row.is-picked .n-icon { color: var(--n-red); }
@media (hover: hover) { .bs-picker__row:hover:not(:disabled) { background: var(--n-card-2); } }
.bs-picker__empty { margin: 8px 4px; }

/* Field furniture shared by the composer and the edit page */
.bs-tagpick { display: flex; flex-wrap: wrap; gap: var(--n-2); }
.bs-field-foot { display: flex; align-items: baseline; gap: var(--n-2); }
.bs-field-foot:empty { display: none; }
.bs-field-error { color: var(--n-danger); font-size: var(--n-fs-meta); line-height: 1.4; }
.bs-counter { margin-left: auto; font: 500 var(--n-fs-meta)/1.4 var(--n-font-body); color: var(--n-text-3); font-variant-numeric: tabular-nums; }
.bs-counter.is-near { color: var(--n-amber); }
.bs-counter.is-full { color: var(--n-danger); }

/* Chips with a remove button (the composer's tagged lessons and tracks) */
.bs-chip-x { max-width: 100%; padding-right: 2px; }
.bs-chip-x__label { min-width: 0; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.bs-chip-x > button {
  position: relative; display: grid; place-items: center; width: 28px; height: 28px; padding: 0;
  border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer;
}
.bs-chip-x > button::after { content: ""; position: absolute; inset: -8px; }

/* ---- Today's lick pin ---------------------------------------------------------------------------- */
.bs-lickpin { display: grid; gap: var(--n-3); padding: var(--n-4); margin-bottom: var(--n-6); }
.bs-lickpin__hd { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--n-3); align-items: center; }
.bs-lickpin__thumb { display: block; width: 56px; border-radius: var(--n-r-sm); overflow: hidden; }
.bs-lickpin__titles { min-width: 0; display: grid; gap: 4px; }
.bs-lickpin__kick { display: inline-flex; align-items: center; gap: 4px; }
.bs-lickpin__title { font: 700 15px/1.25 var(--n-font-display); color: var(--n-text); text-decoration: none; }
/* Loading: a row of take tiles the size of TakesRow's (88px, 9:14). */
.bs-lickpin__skel-takes { display: flex; gap: 8px; overflow: hidden; padding-bottom: 2px; }
.bs-lickpin__skel-take { flex: none; }

/* The daily lick a take was posted on */
.bs-lickchip {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; max-width: 100%; min-height: 28px; padding: 3px 10px 3px 7px;
  border-radius: var(--n-r-pill); background: var(--n-red-wash); border: 1px solid var(--n-red-line);
  color: var(--n-text); font: 600 12px/1.2 var(--n-font-body); text-decoration: none;
}
.bs-lickchip .n-icon { color: var(--n-red); }
.bs-lickchip > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Feed card (Components/Backstage/FeedCard.razor) -------------------------------------------- */
.bs-card { display: grid; gap: var(--n-3); min-width: 0; padding: var(--n-4); cursor: pointer; }
@media (min-width: 1024px) { .bs-card { padding: var(--n-6); } }
.bs-card.is-pinned { border-color: var(--n-red-line); }
/* Pressing a control inside the card presses the control, not the whole card. */
.bs-card.n-press:has(.bs-actions :active, .bs-actions__layers :active, .bs-photos :active, .ncc-clip:active, .bs-attach :active, .bs-linkcard:active, .bs-lickchip:active) { scale: none; }
/* A sheet still inside the card (a confirm, the report or reactions sheet: nothing above traps it on the
   feed, so it isn't moved to <body>) must never be scaled with it: a scaled card becomes the containing
   block of its fixed descendants, and the sheet would jump into the card mid-tap. */
.bs-card.n-press:has(.n-sheet-root) { scale: none; transition: none; }

.bs-card__head { display: flex; align-items: center; gap: var(--n-3); min-width: 0; }
.bs-card__who { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.bs-card__line { display: flex; align-items: center; gap: 4px; min-width: 0; white-space: nowrap; }
.bs-card__name {
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
  font: 700 14px/1.3 var(--n-font-display); color: var(--n-text); text-decoration: none;
}
@media (hover: hover) { a.bs-card__name:hover { color: var(--n-pink); } }
.bs-card__line .ncc-member-badge { flex: none; }
.bs-card__dot { flex: none; color: var(--n-text-3); }
.bs-card__time { flex: none; }
.bs-card__pinned { display: inline-flex; align-items: center; gap: 2px; flex: none; color: var(--n-pink); font: 600 var(--n-fs-meta)/1.4 var(--n-font-body); }
.bs-card__tags { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bs-card__title { margin: 0; font: 700 16px/1.3 var(--n-font-display); color: var(--n-text); text-wrap: pretty; overflow-wrap: anywhere; }
@media (min-width: 768px) { .bs-card__title { font-size: 17px; } }
.bs-card__title a { color: inherit; text-decoration: none; }
.bs-card__body { color: var(--n-text-2); font-size: 14px; line-height: 1.55; }
.bs-card__clip { display: grid; gap: var(--n-2); justify-items: start; }

/* ---- Post text: links and @mentions (MentionHighlighterWithLinks) ------------------------------- */
.mention-content { overflow-wrap: anywhere; }
.mention-content .mention {
  padding: 0 4px; border-radius: var(--n-r-xs); background: var(--n-danger-wash);
  color: var(--n-pink); font-weight: 600; text-decoration: none;
}
.mention-content .ncc-link { color: var(--n-pink); text-decoration: underline; text-decoration-color: var(--n-red-line); text-underline-offset: 3px; }
@media (hover: hover) { .mention-content .ncc-link:hover { text-decoration-color: var(--n-pink); } .mention-content .mention:hover { background: var(--n-red-wash); } }
.bs-leave-url {
  margin: 12px 0 0; padding: 10px 12px; border-radius: var(--n-r-sm); background: var(--n-sunken);
  color: var(--n-text-2); font-size: var(--n-fs-small); line-height: 1.4; text-align: left; word-break: break-all;
}

/* ---- Photos (PostPhotos) ----------------------------------------------------------------------- */
.bs-photos { display: grid; gap: 4px; border-radius: var(--n-r-sm); overflow: hidden; }
.bs-photos--2, .bs-photos--3 { grid-template-columns: 1fr 1fr; }
.bs-photos--3 > :first-child { grid-column: 1 / -1; }
.bs-photos__cell { position: relative; display: block; padding: 0; border: 0; background: var(--n-card-2); cursor: zoom-in; overflow: hidden; aspect-ratio: 1; }
.bs-photos--3 > .bs-photos__cell:first-child { aspect-ratio: 16 / 9; }
.bs-photos__cell img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bs-photos--1 > .bs-photos__cell { aspect-ratio: auto; }
.bs-photos--1 > .bs-photos__cell img { height: auto; max-height: 384px; }
.bs-photos--large.bs-photos--1 > .bs-photos__cell img { max-height: 600px; }
/* Wide cards: squares would stand taller than the screen. */
@media (min-width: 768px) {
  .bs-photos--2 > .bs-photos__cell, .bs-photos--3 > .bs-photos__cell:not(:first-child) { aspect-ratio: 4 / 3; }
}

/* ---- Link preview card (LinkPreviewComponent) --------------------------------------------------- */
.bs-linkcard {
  display: block; overflow: hidden; border-radius: 12px; background: var(--n-card); border: 1px solid var(--n-line);
  color: inherit; text-decoration: none;
}
.bs-linkcard .n-img { border-radius: 0; }
.bs-linkcard__body { display: grid; gap: 4px; padding: 10px 12px 12px; }
.bs-linkcard__title {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  font: 600 14px/1.35 var(--n-font-body); color: var(--n-text);
}
.bs-linkcard__domain { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: var(--n-fs-meta); color: var(--n-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (hover: hover) { .bs-linkcard:hover { border-color: var(--n-line-2); } }

/* ---- Tagged lessons and tracks (AttachmentChips) ------------------------------------------------- */
.bs-attach { display: flex; flex-wrap: wrap; gap: var(--n-2); min-width: 0; }
.bs-attach .n-chip { max-width: 100%; }
.bs-attach__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bs-attach__loading { display: grid; }
.bs-attach__loading > .n-skel { border-radius: var(--n-r-md); }
.bs-attach__retry { margin-top: var(--n-3); }

/* ---- Action row (PostActionRow) ------------------------------------------------------------------ */
/* 44px targets; the outer margin lines the icons up with the card's text. */
.bs-actions {
  display: flex; align-items: center; gap: 2px; margin: 0 -10px -6px; padding-top: 4px;
  /* the hairline spans the text column, not the 10px the buttons hang out by */
  background: linear-gradient(var(--n-line), var(--n-line)) 10px 0 / calc(100% - 20px) 1px no-repeat;
}
.bs-actions__btn {
  display: inline-flex; align-items: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 0 10px;
  border: 0; border-radius: var(--n-r-pill); background: none; color: var(--n-text-2); cursor: pointer;
  font: 700 13px/1 var(--n-font-display); font-variant-numeric: tabular-nums;
  transition: background-color var(--n-dur) ease, color var(--n-dur) ease;
}
.bs-actions__btn:active { scale: .94; }
@media (hover: hover) { .bs-actions__btn:hover { color: var(--n-text); background: var(--n-card-2); } }
.bs-actions__spacer { flex: 1 1 auto; }
.bs-actions--detail { margin-top: var(--n-2); }
.bs-actions__layers { display: contents; }

/* ---- Post detail overlay (Posts.razor at /forums/{id}) -------------------------------------------- */
/* Open, it has no transform at all, so a sheet, a confirm or the photo viewer inside it measures
   against the real viewport (contain:paint and a lingering translate used to open them off-screen).
   Closed, it waits off to the right and hidden. */
.post-detail-overlay {
  position: fixed; inset: 0; z-index: var(--n-z-push); overflow-y: auto; overscroll-behavior: contain;
  background: var(--n-bg); padding-bottom: var(--n-safe-b);
  transform: translateX(100%); visibility: hidden; pointer-events: none;
  transition: transform calc(280ms / var(--n-tempo)) var(--n-glide), visibility 0s linear calc(280ms / var(--n-tempo));
}
.post-detail-overlay.is-open { transform: none; visibility: visible; pointer-events: auto; transition: transform calc(280ms / var(--n-tempo)) var(--n-glide); }
/* The thread's docked bar pads itself for the home indicator; a sticky bottom also stops short of the
   scroller's own padding, which put a second safe-area strip under the bar. */
.post-detail-overlay:has(.bs-thread__dock) { padding-bottom: 0; }

/* A column whose body fills it, so the docked composer sits on the screen's bottom edge even under a
   short thread (most posts have few comments), not under the last comment mid-screen. */
.bs-detail { min-height: 100%; display: flex; flex-direction: column; }
.bs-detail__bar {
  position: sticky; top: 0; z-index: var(--n-z-raised); display: flex; align-items: center; gap: var(--n-2);
  min-height: calc(var(--n-safe-t) + var(--n-topbar-h)); padding: var(--n-safe-t) var(--n-gutter) 0;
  background: var(--n-glass); -webkit-backdrop-filter: var(--n-glass-fx); backdrop-filter: var(--n-glass-fx);
  border-bottom: 1px solid var(--n-line);
}
.bs-detail__crumb { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bs-detail__body { max-width: 720px; margin: 0 auto; padding: var(--n-5) var(--n-gutter) var(--n-10); }
.bs-detail__post { display: grid; gap: var(--n-4); min-width: 0; }
.bs-detail__author { display: flex; align-items: center; gap: var(--n-3); min-width: 0; }
.bs-detail__title {
  margin: 0; font: 700 24px/1.2 var(--n-font-display); letter-spacing: var(--n-ls-title); color: var(--n-text);
  text-wrap: balance; overflow-wrap: anywhere;
}
@media (min-width: 768px) { .bs-detail__title { font-size: 28px; } }
.bs-detail__text { color: var(--n-text); font-size: 16px; line-height: 1.65; }
.bs-detail__links { display: grid; gap: var(--n-3); }
.bs-detail .bs-thread__list {
  margin-top: var(--n-6); padding-top: var(--n-6); border-top: 1px solid var(--n-line);
  scroll-margin-top: calc(var(--n-safe-t) + var(--n-topbar-h) + 8px);
}
/* The thread's composer bar is the body's last box (CommentList's root is display:contents) and sits on
   its bottom edge. */
.bs-detail__body:has(.bs-thread__dock) { padding-bottom: 0; flex: 1 0 auto; width: 100%; display: flex; flex-direction: column; }
/* Descendant, not child: the dock's parent (.bs-thread--docked) is display:contents, so the dock is a
   flex item of the body without being its DOM child. */
.bs-detail__body .bs-thread__dock { margin-top: auto; }
.bs-detail__body:has(.bs-thread__dock) .bs-thread__list { margin-bottom: var(--n-4); }
.bs-detail__skel { display: grid; gap: var(--n-4); }
.bs-detail__gone { display: flex; justify-content: center; }

/* Comment row placeholder (CommentSkeleton) */
.bs-skel-comment { display: flex; gap: var(--n-3); padding: var(--n-3) 0; }
.bs-skel-comment__main { flex: 1 1 auto; display: grid; gap: 8px; }

/* ---- Photo viewer (PhotoViewer.razor; gestures in js/backstage.js) -------------------------------- */
/* On <body>, above everything but the toasts' host. --bs-photo-dim follows a drag-down. */
.bs-photo {
  --bs-photo-dim: 1; position: fixed; inset: 0; z-index: var(--n-z-full); display: grid; place-items: center;
  overflow: hidden; touch-action: none; overscroll-behavior: contain; outline: none; -webkit-user-select: none; user-select: none;
  animation: n-fade calc(200ms / var(--n-tempo)) var(--n-out) backwards;
  transition: opacity calc(160ms / var(--n-tempo)) ease;
}
.bs-photo::before { content: ""; position: absolute; inset: 0; background: var(--n-sunken); opacity: var(--bs-photo-dim); }
.bs-photo.is-leaving { opacity: 0; pointer-events: none; }
.bs-photo__img {
  position: relative; display: block; max-width: 100vw; max-height: 100dvh; object-fit: contain; will-change: transform;
  -webkit-user-drag: none; animation: n-pop calc(200ms / var(--n-tempo)) var(--n-out) backwards;
}
.bs-photo__btn {
  position: absolute; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; background: var(--n-glass); color: var(--n-text-hi); cursor: pointer;
  -webkit-backdrop-filter: var(--n-glass-fx); backdrop-filter: var(--n-glass-fx);
}
.bs-photo__close { top: calc(var(--n-safe-t) + 8px); right: 12px; }
.bs-photo__prev, .bs-photo__next { top: 50%; translate: 0 -50%; }
.bs-photo__prev { left: 10px; }
.bs-photo__next { right: 10px; }
.bs-photo__count {
  position: absolute; z-index: 1; left: 50%; bottom: calc(var(--n-safe-b) + 16px); translate: -50% 0;
  padding: 4px 10px; border-radius: var(--n-r-pill); background: var(--n-glass);
  color: var(--n-text); font: 700 13px/1.2 var(--n-font-display); font-variant-numeric: tabular-nums;
}
@media (pointer: coarse) { .bs-photo__prev, .bs-photo__next { display: none; } }

/* ---- Edit post (EditPost.razor) ----------------------------------------------------------------- */
.bs-edit__form { display: grid; gap: var(--n-5); }
.bs-edit__clip { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--n-3); align-items: center; }
.bs-edit__clip .n-small { margin: 0; }
.bs-edit__actions { display: flex; justify-content: flex-end; gap: var(--n-2); }
.bs-check { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--n-text); cursor: pointer; }
.bs-check input { width: 18px; height: 18px; accent-color: var(--n-red); }

/* ---- Desktop sidebar ---------------------------------------------------------------------------- */
.bs-side__sec { min-width: 0; }
.bs-trend { display: grid; gap: var(--n-3); }
.bs-trend__item { display: grid; gap: 2px; min-width: 0; color: inherit; text-decoration: none; }
.bs-trend__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 14px/1.3 var(--n-font-display); color: var(--n-text); }
@media (hover: hover) { .bs-trend__item:hover .bs-trend__title { color: var(--n-pink); } }
.bs-board { padding: var(--n-5); }
.bs-board__flame { color: var(--n-red); }
.bs-board__list { display: grid; gap: var(--n-4); margin: 0; padding: 0; list-style: none; }
.bs-board__row { display: flex; align-items: center; gap: var(--n-3); }
.bs-board__rank { flex: none; width: 26px; font: italic 700 18px/1 var(--n-font-display); color: var(--n-text-3); font-variant-numeric: tabular-nums; }
.bs-board__row.is-top .bs-board__rank { color: var(--n-pink); }
.bs-board__who { flex: 1 1 auto; min-width: 0; display: grid; gap: 4px; }
.bs-board__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 13px/1.2 var(--n-font-display); color: var(--n-text); }
.bs-board__bar { display: block; height: 4px; overflow: hidden; border-radius: 2px; background: var(--n-card-3); }
.bs-board__bar > span { display: block; height: 100%; border-radius: 2px; background: var(--n-text-3); }
.bs-board__row.is-top .bs-board__bar > span { background: var(--n-red); }
.bs-board__days { flex: none; font: 700 13px/1 var(--n-font-display); color: var(--n-text-2); font-variant-numeric: tabular-nums; }
.bs-board__days small { font-size: 11px; font-weight: 400; }

/* ---- Member badge (MemberBadge.razor, an NBadge) ----------------------------------------------------- */
.n-badge.ncc-member-badge { flex: none; height: 18px; margin-left: 4px; padding: 0 6px; }
.n-badge.ncc-member-badge.is-crew { background: var(--n-red); color: var(--n-on-red); }

/* ---- Reactions (ReactionBar, ReactionTray) ---------------------------------------------------------- */
.bs-react { position: relative; display: inline-flex; align-items: center; --bs-react-ring: var(--n-card); }
.n-icon-btn.bs-react__btn { color: var(--n-text-2); }
.n-icon-btn.bs-react__btn.is-on { color: var(--n-red); }
.bs-react__emoji { display: block; font-size: 22px; line-height: 1; }
.bs-react__sum {
  display: inline-flex; align-items: center; gap: 6px; min-width: 28px; min-height: 44px; margin-left: -8px; padding: 0 6px;
  border: 0; background: none; cursor: pointer; color: var(--n-text-2);
  font: 700 13px/1 var(--n-font-display); font-variant-numeric: tabular-nums;
}
.bs-react__sum:disabled { cursor: default; }
@media (hover: hover) { .bs-react__sum:hover:not(:disabled) { color: var(--n-text); } }
.bs-react__stack { display: inline-flex; }
.bs-react__dot {
  display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--n-card-2); box-shadow: 0 0 0 2px var(--bs-react-ring); font-size: 12px; line-height: 1;
}
.bs-react__dot + .bs-react__dot { margin-left: -5px; }

/* Comments: 40px targets on the page ink. */
.bs-react--sm { --bs-react-ring: var(--n-bg); }
.bs-react--sm .n-icon-btn.bs-react__btn { width: 40px; height: 40px; --n-icon-size: 18px; }
.bs-react--sm .bs-react__emoji { font-size: 17px; }
.bs-react--sm .bs-react__sum { min-height: 40px; margin-left: -6px; font-size: 12px; }
.bs-react--sm .bs-react__dot { width: 18px; height: 18px; font-size: 11px; }
.bs-react--sm .bs-tray__opt { width: 40px; height: 40px; font-size: 22px; }

/* The takes viewer's rail: icon over count, white on the video. */
.bs-react--overlay { flex-direction: column; gap: 2px; }
.bs-react--overlay .n-icon-btn.bs-react__btn { width: 48px; height: 48px; color: var(--n-text-hi); --n-icon-size: 30px; filter: drop-shadow(0 1px 3px var(--n-scrim)); }
.bs-react--overlay .n-icon-btn.bs-react__btn.is-on { color: var(--n-red); }
.bs-react--overlay .bs-react__emoji { font-size: 30px; }
.bs-react--overlay .bs-react__sum { min-height: 0; margin: 0; padding: 0; color: var(--n-text-hi); font-size: 12px; text-shadow: 0 1px 3px var(--n-scrim); }
.bs-react--overlay .bs-react__stack { display: none; }

/* The tray springs up over the button; each reaction rises in a beat after the last. The transparent
   scrim under it takes the tap that closes it. */
.bs-tray__scrim { position: fixed; inset: 0; z-index: calc(var(--n-z-raised) + 8); }
.bs-tray {
  position: absolute; left: -4px; bottom: calc(100% + 4px); z-index: calc(var(--n-z-raised) + 9);
  display: flex; gap: 2px; padding: 4px; border-radius: var(--n-r-pill);
  background: var(--n-card-2); border: 1px solid var(--n-line-2); box-shadow: var(--n-shadow-float);
  transform-origin: 24px 100%; animation: n-pop calc(240ms / var(--n-tempo)) var(--n-pop) backwards;
}
.bs-tray--end { left: auto; right: -4px; transform-origin: calc(100% - 24px) 100%; }
.bs-tray--side { left: auto; right: calc(100% + 6px); bottom: 0; transform-origin: 100% 50%; }
.bs-tray__opt {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: none; font-size: 26px; line-height: 1; cursor: pointer; --rise: 10px;
  animation: n-rise calc(320ms / var(--n-tempo)) var(--n-pop) backwards; animation-delay: calc(var(--i, 0) * 28ms / var(--n-tempo));
  transition: scale var(--n-dur-fast) var(--n-pop), background-color var(--n-dur-fast) ease;
}
.bs-tray__opt:active { scale: 1.3; }
@media (hover: hover) { .bs-tray__opt:hover { scale: 1.2; } }
.bs-tray__opt.is-mine { background: var(--n-red-wash); }

/* ---- Who reacted (LikersModal, an NSheet) ------------------------------------------------------------- */
.bs-who__chips { padding: 0 12px 8px; }
.bs-who__list { display: grid; gap: 2px; margin: 0; padding: 0 0 8px; list-style: none; }
.bs-who__row { display: flex; align-items: center; gap: var(--n-3); min-height: 52px; padding: 0 12px; }
.bs-who__name { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 4px; font: 700 14px/1.3 var(--n-font-display); color: var(--n-text); }
.bs-who__name a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; text-decoration: none; }
@media (hover: hover) { .bs-who__name a:hover { color: var(--n-pink); } }
.bs-who__kind { flex: none; font-size: 20px; line-height: 1; }
.bs-who__more { margin: 0; padding: 8px; text-align: center; }

/* ---- Report sheet (ReportSheet) ------------------------------------------------------------------------ */
.bs-report__lede { margin: 0 0 var(--n-3); }
.bs-report__list { display: grid; gap: 2px; }
.bs-report__opt {
  display: flex; align-items: center; gap: var(--n-3); width: 100%; min-height: 56px; padding: 8px 10px;
  border: 1px solid transparent; border-radius: var(--n-r-sm); background: none; color: var(--n-text); text-align: left; cursor: pointer;
  transition: background-color var(--n-dur-fast) ease, border-color var(--n-dur-fast) ease;
}
.bs-report__opt.is-on { background: var(--n-red-wash); border-color: var(--n-red-line); }
@media (hover: hover) { .bs-report__opt:hover:not(.is-on) { background: var(--n-card-2); } }
.bs-report__icon { flex: none; color: var(--n-text-2); }
.bs-report__txt { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.bs-report__label { font: 600 15px/1.3 var(--n-font-body); }
.bs-report__radio { flex: none; color: var(--n-text-3); }
.bs-report__opt.is-on .bs-report__radio { color: var(--n-red); }
.bs-report__more { margin-top: var(--n-3); }

/* ---- Comments (CommentList, CommentItem, CommentForm) ------------------------------------------------- */
.bs-thread__list { display: grid; gap: var(--n-3); min-width: 0; }
.bs-thread__head { margin: 0; }
/* Docked: no box of its own, so the composer bar belongs to whatever holds the thread (the post body, the
   sheet body) and stays on screen across all of it. */
.bs-thread--docked { display: contents; }
.bs-thread__items { display: grid; gap: var(--n-1); }
.bs-thread__group { display: grid; min-width: 0; }
.bs-thread__replies { display: grid; padding-left: 44px; }
.bs-thread__replies > .bs-cform { margin-top: var(--n-2); }
.bs-thread__more {
  justify-self: start; display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0;
  border: 0; background: none; color: var(--n-text-2); font: 600 13px/1 var(--n-font-body); cursor: pointer;
}
@media (hover: hover) { .bs-thread__more:hover { color: var(--n-text); } }
.bs-thread__rule { width: 24px; height: 1px; background: var(--n-line-2); }
.bs-thread__list > .bs-cform { margin-bottom: var(--n-2); }
.bs-thread__dock {
  position: sticky; bottom: 0; z-index: var(--n-z-raised);
  margin: var(--n-4) calc(-1 * var(--bs-dock-inset, var(--n-gutter))) 0;
  padding: var(--n-2) var(--bs-dock-inset, var(--n-gutter)) max(var(--n-2), var(--n-safe-b));
  background: var(--n-glass); -webkit-backdrop-filter: var(--n-glass-fx); backdrop-filter: var(--n-glass-fx);
  border-top: 1px solid var(--n-line);
}
.bs-thread__signin {
  display: flex; align-items: center; justify-content: space-between; gap: var(--n-3);
  padding: var(--n-3) var(--n-4); border-radius: var(--n-r-md); background: var(--n-card);
}
.bs-thread__signin.is-docked { padding: 4px 0; background: none; }

.bs-comment {
  display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--n-3); padding-top: var(--n-3);
  border-radius: var(--n-r-sm); scroll-margin: 96px 0;
}
/* The crew's comments: a red edge down the left, outside the text column. */
.bs-comment.is-crew { box-shadow: inset 2px 0 0 var(--n-red); margin-left: calc(-1 * var(--n-3)); padding-left: var(--n-3); }
/* The comment a notification opened. */
.bs-comment.is-focus { background: var(--n-red-wash); margin-inline: calc(-1 * var(--n-2)); padding-inline: var(--n-2); }
.bs-comment__main { min-width: 0; display: grid; gap: 4px; }
.bs-comment__line { display: flex; align-items: center; gap: 4px; min-width: 0; min-height: 20px; white-space: nowrap; }
.bs-comment__name {
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
  font: 700 13px/1.3 var(--n-font-display); color: var(--n-text); text-decoration: none;
}
@media (hover: hover) { a.bs-comment__name:hover { color: var(--n-pink); } }
.bs-comment__time { flex: none; }
.bs-comment__text { color: var(--n-text); font-size: 14px; line-height: 1.55; }
.bs-comment__acts { display: flex; align-items: center; gap: 2px; margin-left: -10px; }
.bs-comment__act {
  min-width: 40px; min-height: 40px; padding: 0 10px; border: 0; border-radius: var(--n-r-pill); background: none; cursor: pointer;
  color: var(--n-text-2); font: 700 12px/1 var(--n-font-display); letter-spacing: .02em;
}
@media (hover: hover) { .bs-comment__act:hover { color: var(--n-text); background: var(--n-card); } }
.n-icon-btn.bs-comment__more { width: 40px; height: 40px; --n-icon-size: 20px; color: var(--n-text-3); }
.bs-comment__edit { display: grid; gap: var(--n-2); margin-top: 2px; }
.bs-comment__editacts { display: flex; justify-content: flex-end; gap: var(--n-2); }
.bs-comment__error { margin-top: 2px; }

.bs-cform { display: grid; gap: 6px; min-width: 0; }
.bs-cform__row { display: flex; align-items: flex-end; gap: var(--n-2); }
.bs-cform__row > .bs-mention { flex: 1 1 auto; min-width: 0; }
textarea.n-input.bs-cform__input {
  display: block; width: 100%; min-height: 44px; max-height: 160px; padding: 11px 16px;
  border-radius: 22px; line-height: 1.4; resize: none; overflow-y: hidden;
}
.n-icon-btn.bs-send { background: var(--n-red); color: var(--n-on-red); --n-icon-size: 22px; }
.n-icon-btn.bs-send:active { background: var(--n-red-press); }
.n-icon-btn.bs-send:disabled { background: var(--n-card-3); color: var(--n-text-3); opacity: 1; }
@media (hover: hover) { .n-icon-btn.bs-send:hover:not(:disabled) { background: var(--n-red-press); color: var(--n-on-red); } }
.bs-cform__replying { display: flex; align-items: center; justify-content: space-between; gap: var(--n-2); padding-left: 16px; }
.bs-cform__replying strong { color: var(--n-pink); font-weight: 600; }
.bs-cform__x {
  position: relative; display: grid; place-items: center; width: 28px; height: 28px; padding: 0;
  border: 0; border-radius: 50%; background: var(--n-card-2); color: var(--n-text-2); cursor: pointer;
}
.bs-cform__x::after { content: ""; position: absolute; inset: -8px; }
.bs-cform__foot { padding: 0 16px; }
.bs-cform__cancel { display: flex; justify-content: flex-end; }

/* @mention suggestions (SimpleMentionTextArea) */
.bs-mention { position: relative; min-width: 0; }
.bs-mention__list {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: calc(var(--n-z-raised) + 10);
  max-height: 240px; overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 4px; list-style: none;
  background: var(--n-card-2); border: 1px solid var(--n-line-2); border-radius: var(--n-r-md); box-shadow: var(--n-shadow-float);
  animation: n-fade calc(160ms / var(--n-tempo)) var(--n-out) backwards;
}
.bs-mention__list--above { top: auto; bottom: calc(100% + 4px); }
.bs-mention__item { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px; border-radius: var(--n-r-sm); cursor: pointer; }
.bs-mention__item.is-active { background: var(--n-card-3); }
.bs-mention__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 14px/1.2 var(--n-font-display); color: var(--n-text); }

/* ---- Crew announcement, intro card, new-posts pill, this week's streaks ------------------------------ */
.bs-card.is-announcement { border-color: var(--n-red-line); }
.bs-card__announce { display: inline-flex; align-items: center; gap: 4px; }
.bs-announce__notify { margin-top: var(--n-2); text-align: left; }

.bs-intro { position: relative; display: grid; justify-items: start; gap: var(--n-2); padding: var(--n-5) var(--n-4) var(--n-4); margin-bottom: var(--n-4); }
.bs-intro__x { position: absolute; top: 6px; right: 6px; }
.bs-intro__title { margin: 0; font: 700 var(--n-fs-h2)/1.2 var(--n-font-display); letter-spacing: var(--n-ls-title); color: var(--n-text); }
.bs-intro__copy { margin: 0 0 var(--n-2); max-width: 46ch; }

.bs-newpill-wrap {
  position: fixed; left: 0; right: 0; top: calc(var(--n-safe-t) + var(--n-topbar-h) + 60px); z-index: calc(var(--n-z-topbar) - 1);
  display: flex; justify-content: center; pointer-events: none;
}
.bs-newpill {
  pointer-events: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px;
  border: 0; border-radius: var(--n-r-pill); background: var(--n-red); color: var(--n-on-red); cursor: pointer;
  font: 700 13px/1 var(--n-font-display); box-shadow: var(--n-shadow-float);
}
.bs-newpill:active { background: var(--n-red-press); scale: .97; }

.bs-week { margin-bottom: var(--n-5); }
@media (min-width: 1024px) { .bs-week { display: none; } }
.bs-week__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--n-2); margin-bottom: var(--n-2); }
.bs-week__list {
  display: flex; gap: var(--n-3); margin: 0 calc(-1 * var(--n-gutter)); padding: 2px var(--n-gutter); list-style: none;
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
}
.bs-week__list::-webkit-scrollbar { display: none; }
.bs-week__item { flex: none; }
.bs-week__who { display: grid; justify-items: center; gap: 4px; width: 64px; color: inherit; text-decoration: none; }
.bs-week__name { max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 12px/1.2 var(--n-font-body); color: var(--n-text-2); }
.bs-week__item.is-top .bs-week__name { color: var(--n-pink); }
.bs-week__days { display: inline-flex; align-items: center; gap: 2px; font: 700 12px/1 var(--n-font-display); color: var(--n-text); font-variant-numeric: tabular-nums; }
.bs-week__days .n-icon { color: var(--n-red); }

/* ---- Takes viewer (TakesViewer.razor; the feed itself is nccLickFeed in main.js) ----------------------- */
/* Its own classes: the lick feed's .dl-slide styles never reach it. Slides are 100% of the fixed viewer,
   not 100dvh, so the browser chrome can't make them taller than the screen. */
.tkv {
  position: fixed; inset: 0; z-index: var(--n-z-sheet); overflow-y: auto; overflow-x: hidden;
  scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none;
  background: #000; color: var(--n-text-hi);
}
.tkv::-webkit-scrollbar { display: none; }
.tkv-slide { position: relative; height: 100%; overflow: hidden; scroll-snap-align: start; scroll-snap-stop: always; background: #000; }
.tkv-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.tkv-paused { position: absolute; inset: 0; display: none; place-items: center; pointer-events: none; color: var(--n-text-hi); opacity: .85; --n-icon-size: 72px; }
.tkv-slide.is-paused .tkv-paused { display: grid; }
/* Double tap: a big heart pops and fades (the kit's n-like, then n-fade run backwards). */
.tkv-heart {
  position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; pointer-events: none;
  color: var(--n-red); --n-icon-size: 112px; filter: drop-shadow(0 4px 16px var(--n-scrim));
  animation: n-like calc(520ms / var(--n-tempo)) var(--n-pop) 1, n-fade calc(360ms / var(--n-tempo)) ease-in calc(560ms / var(--n-tempo)) reverse forwards;
}
.tkv-meta {
  position: absolute; left: var(--n-4); right: 84px; bottom: calc(var(--n-safe-b) + 24px); z-index: 2;
  display: grid; gap: 6px; text-shadow: 0 1px 3px var(--n-scrim);
}
.tkv-lick { justify-self: start; text-shadow: none; }
.tkv-who { display: flex; align-items: center; gap: 8px; min-width: 0; font: 700 15px/1.2 var(--n-font-display); }
.tkv-who a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; text-decoration: none; }
.tkv-cap { margin: 0; font-size: 14px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tkv-rail { position: absolute; right: 8px; bottom: calc(var(--n-safe-b) + 24px); z-index: 3; display: grid; gap: var(--n-3); justify-items: center; }
.tkv-act { display: grid; justify-items: center; gap: 2px; }
.tkv-act > small { font: 700 12px/1 var(--n-font-display); text-shadow: 0 1px 3px var(--n-scrim); }
.n-icon-btn.tkv-act__btn { width: 48px; height: 48px; color: var(--n-text-hi); --n-icon-size: 30px; filter: drop-shadow(0 1px 3px var(--n-scrim)); }
.tkv-skel { width: min(72%, 320px); }
.tkv-skel > .n-skel { border-radius: var(--n-r-lg); }
.tkv-end { display: grid; place-items: center; background: radial-gradient(120% 80% at 50% 0%, var(--n-red-wash), transparent 60%), var(--n-sunken); }
.tkv-endcard { max-width: 320px; padding: var(--n-6); display: grid; justify-items: center; gap: var(--n-3); text-align: center; color: var(--n-text); }
.tkv-endtitle { margin: 0; font: 700 var(--n-fs-title)/1.1 var(--n-font-display); letter-spacing: var(--n-ls-title); }
.tkv-endcard .n-small { margin: 0; }
/* The close and sound buttons: a copy of ws/licks' .ncc-feed-chrome (ncc-licks.css, shared by every
   full-screen video feed), so they sit in the top corners even before that file is merged. Same values,
   and :where() keeps it at that rule's specificity; delete it once ws/licks is in. */
:where(.tkv) .ncc-feed-chrome {
  position: fixed; top: calc(var(--n-safe-t) + 10px); z-index: calc(var(--n-z-full) + 1);
  width: 40px; height: 40px; min-width: 40px; min-height: 40px; border-radius: 50%; border: 0;
  background: rgba(0,0,0,.45); color: var(--n-text-hi); --n-icon-size: 20px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
:where(.tkv) .ncc-feed-chrome--start { left: 12px; }
:where(.tkv) .ncc-feed-chrome--end { right: 12px; }
/* The comments sheet over a take: the thread's composer bar runs edge to edge at the bottom. */
.n-sheet__body.tkv-comments { padding-bottom: 0; --bs-dock-inset: 20px; }
.tkv-comments .bs-react--sm { --bs-react-ring: var(--n-card); }
.tkv-comments .bs-thread__dock { padding-bottom: var(--n-2); background: var(--n-card); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---- Admin review queue (Pages/Admin/Moderation.razor) ----------------------------------------------- */
.bs-mod__state { display: grid; place-items: center; padding: var(--n-10) 0; }
.bs-mod__sec { margin-top: var(--n-section); }
.bs-mod__card { display: flex; gap: var(--n-3); padding: var(--n-4); margin-top: var(--n-3); }
.bs-mod__thumb { flex: none; width: 72px; height: 90px; object-fit: cover; border-radius: var(--n-r-sm); background: var(--n-sunken); }
.bs-mod__body { flex: 1 1 auto; min-width: 0; display: grid; gap: 4px; }
.bs-mod__title { font: 700 15px/1.3 var(--n-font-display); color: var(--n-text); text-decoration: none; }
.bs-mod__text { margin: 4px 0 0; color: var(--n-text); overflow-wrap: anywhere; }
.bs-mod__reason { margin: 0; font-size: var(--n-fs-small); color: var(--n-pink); }
.bs-mod__acts { display: flex; flex-wrap: wrap; gap: var(--n-2); margin-top: var(--n-2); }
.bs-mod .n-meta a { color: var(--n-pink); }