/* ------------------------------- */
/* [Entity layout] (owner, 2026-10-20): the single profile, page, group and event pages in Facebook's arrangement,
   Niguro's look (structure only: every colour is a theme token). Loaded on those four pages (_head.tpl).
   profile.tpl, page.tpl, group.tpl, event.tpl: .ng-ent-frame > .row > .ng-ent-page (the column) >
     .ng-ent-hero (the cover + identity card .ng-ent, its tabs bar .ng-ent__bar) and .ng-ent-cols (the content).
   - From 768px the hero sits flush under the header in the column (1000px from 1024px, 680px on tablets), the cover
     with rounded bottom corners; behind it a full-width band in the cover's own colours (niguro-entity.js samples the
     cover's left and right edges into --ng-ent-l / --ng-ent-r; the brand's green without a cover or a readable image)
     fading down into the page.
   - The identity block: picture (overlapping the cover), name → counts line → bio → details line, actions on the
     right; a hairline; the tabs (the theme's segment pills) with Search, Report and Share on the right.
   - From 1024px two columns: the About cards on the left (~38%, sticky; when taller than the window they stick by
     their bottom, niguro-entity.js), the posts on the right. Groups swap them: the feed left, About right.
   - Phones (< 768px): the hero full bleed (cover edge to edge), the picture and the text centred, the actions in one
     row ([Header icon buttons], niguro.css), the pill tabs; the cards below keep 12px gutters.
   Every Sngine hook (js_* buttons, cover / avatar tools, routes) is untouched; this file only places things. */
/* ------------------------------- */

.ng-ent-frame {
  --ng-ent-max: 960px; /* (owner, 2026-10-20) was 1050, then 1000 */ --ng-ent-gap: 12px; --ng-ent-side: clamp(340px, 38%, 400px);
  --ng-ent-l: hsl(var(--primary)); --ng-ent-r: hsl(var(--primary) / .55);
  --ng-ent-mix: 72%;
  position: relative; margin-top: 0 !important; padding-left: 0; padding-right: 0; max-width: none;
}
body.night-mode .ng-ent-frame { --ng-ent-mix: 42%; }
@media (min-width: 768px) { .ng-ent-frame { --ng-ent-gap: 16px; } }

/* the column: no gutters of its own (the hero bleeds on phones; .ng-ent-cols adds the 12px) */
.ng-ent-frame > .row { margin-left: 0; margin-right: 0; }
.ng-single.ng-ent-page { max-width: none; width: 100%; padding-left: 0; padding-right: 0; }
@media (min-width: 768px) {
  .ng-single.ng-ent-page { width: min(680px, calc(100% - 32px)); margin-left: auto; margin-right: auto; }
  /* the band below is placed on the frame, so the column itself is not a positioned box here (Sngine's offcanvas
     only moves it on phones) */
  .ng-ent-frame .sg-offcanvas-mainbar.ng-ent-page { position: static; }
}
@media (min-width: 1024px) { .ng-single.ng-ent-page { width: min(var(--ng-ent-max), calc(100% - 32px)); } }

/* ---- the hero ---- */
.ng-ent-hero { position: static; }
@media (min-width: 768px) {
  /* the full-width band behind the cover: the cover's edge colours, left to right, fading down into the page */
  .ng-ent-hero::before {
    content: ""; position: absolute; z-index: 0; left: 0; right: 0; height: var(--ng-ent-band, 420px); pointer-events: none;
    background:
      linear-gradient(to bottom, transparent 0, hsl(var(--background) / .35) 45%, var(--ng-canvas) 100%),
      linear-gradient(to right, color-mix(in srgb, var(--ng-ent-l) var(--ng-ent-mix), var(--ng-canvas)), color-mix(in srgb, var(--ng-ent-r) var(--ng-ent-mix), var(--ng-canvas)));
  }
  .ng-ent-hero > .ng-ent { z-index: 1; }
}
@media (min-width: 1024px) { .ng-ent-hero::before { --ng-ent-band: 540px; } }

/* the card becomes the hero: no card of its own, on the page */
.ng-ent-hero > .ng-ent.card {
  overflow: visible; margin: 0; border: 0; border-radius: 0; background: transparent !important; box-shadow: none;
}
/* [Hero card] (owner, 2026-10-20): as Facebook, one card surface from the top (the cover) down to and including
   the tabs row, its bottom corners rounded; the tabs keep their style. Profile, page, group and event alike. */
.ng-ent-hero > .ng-ent.card.ng-ent {
  background: var(--ng-card) !important; border-radius: 0 0 var(--ng-r) var(--ng-r); padding-bottom: 10px;
}
.ng-ent-hero > .ng-ent.card.ng-ent .profile-cover-wrapper { border-radius: 0 !important; } /* the cover and the card are one surface */
.ng-ent-hero .ng-ent .profile-avatar-wrapper.ng-ent__avatar { box-shadow: 0 0 0 4px var(--ng-card) !important; }
.ng-ent-hero .ng-ent-faces a { box-shadow: 0 0 0 2px var(--ng-card); }
.ng-ent-hero .ng-ent .profile-cover-wrapper { border-radius: 0; }
.ng-ent-hero .ng-ent .profile-cover-wrapper > img { border-radius: inherit; }
@media (min-width: 768px) {
  .ng-ent-hero .ng-ent .profile-cover-wrapper { height: auto; aspect-ratio: 2.7; max-height: 400px; border-radius: 0 0 var(--ng-r-sm) var(--ng-r-sm); }
}

/* identity: picture, name block, actions */
.ng-ent-hero .ng-ent__body { padding: 0 16px; }
.ng-ent-hero .ng-ent .profile-avatar-wrapper.ng-ent__avatar { box-shadow: 0 0 0 4px var(--ng-canvas); }
.ng-ent-hero .ng-ent__name { font-size: 26px; }
.ng-ent__alt { font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--ng-sub); }
.ng-ent__counts { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin-top: 4px; font-size: 14.5px; line-height: 1.45; color: var(--ng-sub); }
.ng-ent__counts a, .ng-ent__counts > span:not(.ng-ent__dot) { color: inherit; text-decoration: none; }
.ng-ent__counts a:hover { color: var(--ng-ink-strong); text-decoration: underline; }
.ng-ent__counts b { font-weight: 700; color: var(--ng-ink-strong); }
.ng-ent__dot { color: var(--ng-faint); }
.ng-ent-hero .ng-ent__bio { margin-top: 8px; font-size: 14.5px; line-height: 1.5; }
/* the details line: icon + text, no chip fill (the role keeps its tint) */
.ng-ent-hero .ng-ent__details { gap: 4px 14px; margin-top: 8px; }
.ng-ent-hero .ng-ent__details .ng-chip {
  display: inline-flex; align-items: center; gap: 6px; height: auto; padding: 0; background: none; border-radius: 0;
  font-size: 14px; line-height: 1.5; color: var(--ng-ink);
}
.ng-ent-hero .ng-ent__details .ng-chip:hover { background: none; }
.ng-ent-hero .ng-ent__details a.ng-chip:hover { text-decoration: underline; }
.ng-ent-hero .ng-ent__details .ng-chip--link { color: var(--ng-brand); font-weight: 600; }
.ng-ent-hero .ng-ent__details .ng-chip .ng-ico { width: 16px; height: 16px; }
.ng-ent-hero .ng-ent__details .ng-ent__role { margin: 0; }
/* the people row (a group's members, a page's likers, an event's guests) */
.ng-ent-faces { display: flex; align-items: center; margin-top: 10px; padding-left: 6px; }
.ng-ent-faces a { flex: none; margin-left: -6px; border-radius: 50%; box-shadow: 0 0 0 2px var(--ng-canvas); }
.ng-ent-faces img { display: block; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.ng-ent-faces__more { margin-left: 8px; font-size: 13px; font-weight: 600; color: var(--ng-sub); text-decoration: none; }
/* a notice in the hero (a group where only admins post): the theme's soft tint bar */
.ng-ent-note {
  display: flex; align-items: flex-start; gap: 10px; margin: 14px 16px 0; padding: 10px 14px; border-radius: var(--ng-r-sm);
  background: var(--ng-fill); color: var(--ng-ink); font-size: 13.5px; line-height: 1.45;
}
.ng-ent-note .ng-ico { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--ng-sub); }
.ng-ent-note b { display: block; color: var(--ng-ink-strong); font-weight: 700; }

/* the tabs bar: a hairline, the tabs on the left, Search / Report / Share on the right */
.ng-ent__bar { display: flex; align-items: center; gap: 10px; margin: 16px 16px 0; padding-top: 10px; border-top: 1px solid var(--ng-line); }
.ng-ent-hero .ng-ent__tabs { flex: 0 1 auto; width: auto; min-width: 0; margin: 0; }
.ng-ent-hero .ng-ent__tabs a { flex: 0 0 auto; }
.ng-ent__bar-acts { display: flex; flex: none; align-items: center; gap: 6px; margin-left: auto; }
.ng-ent__bar .ng-ent__foot { padding: 0; border: 0; gap: 6px; }
.ng-ent__bar .ng-ent__report { margin-left: 0; }
.ng-ent__bar .ng-ent__share { margin-left: 0; }
.ng-ent__search {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 999px;
  background: var(--ng-fill); color: var(--ng-ink-strong); text-decoration: none; transition: background .15s;
}
.ng-ent__search:hover { background: var(--ng-fill-2); color: var(--ng-ink-strong); }
.ng-ent__search .ng-ico { width: 16px; height: 16px; }

/* phones: the hero full bleed, everything centred */
@media (max-width: 767.98px) {
  .ng-ent-hero .ng-ent__top { flex-direction: column; align-items: center; text-align: center; }
  .ng-ent-hero .ng-ent .profile-avatar-wrapper.ng-ent__avatar { margin-top: -70px; }
  .ng-ent-hero .ng-ent__avatar > img { width: 140px; height: 140px; }
  .ng-ent-hero.ng-ent-hero--square .ng-ent__avatar > img { width: 112px; height: 112px; }
  .ng-ent-hero .ng-ent__top > .ng-ent__id { order: 1; flex: none; width: 100%; margin-top: 10px; }
  .ng-ent-hero .ng-ent__name { justify-content: center; }
  .ng-ent-hero :is(.ng-ent__counts, .ng-ent__details, .ng-ent-faces) { justify-content: center; }
  .ng-ent-hero .ng-ent__bio .about-bio-header { justify-content: center; }
  .ng-ent-hero .ng-ent__bio .js_readmore { text-align: center; }
  /* the actions: one full-width row under the text ([Header icon buttons] keeps its own rules for someone else's
     profile; the owner's Edit Profile, pages, groups and events centre theirs) */
  .ng-ent-hero .ng-ent .profile-buttons-wrapper.ng-ent__actions { order: 3; flex: none; width: 100%; justify-content: center; min-height: 0; margin: 14px 0 0; padding: 0; }
  .ng-ent-hero .ng-ent__actions .btn.ng-ent__edit { flex: 1 1 auto; justify-content: center; }
  .ng-ent-hero .ng-ent__date { margin-top: -48px; }
  .ng-ent__bar { margin: 14px 12px 0; padding-top: 10px; }
  /* Report and Share as icons here, so the tabs keep the room */
  .ng-ent__bar :is(.ng-ent__report, .ng-ent__sharebtn) { width: 34px; padding: 0; justify-content: center; }
  .ng-ent__bar :is(.ng-ent__report, .ng-ent__sharebtn) > span { display: none; }
  .ng-ent__bar .ng-ent__search { display: none; }
  /* the owner's Change Cover: its icon only (the name stays for screen readers), clear of the centred picture */
  .ng-ent-hero .ng-cover-tools [data-bs-toggle="dropdown"].ng-cover-pill { width: 36px; padding: 0; justify-content: center; }
  .ng-ent-hero .ng-cover-tools [data-bs-toggle="dropdown"].ng-cover-pill > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (min-width: 768px) {
  .ng-ent-hero .ng-ent__body { padding: 0 24px; }
  .ng-ent-hero .ng-ent__top { flex-wrap: nowrap; align-items: flex-start; column-gap: 20px; padding-top: 0; }
  .ng-ent-hero .ng-ent .profile-avatar-wrapper.ng-ent__avatar { margin-top: -44px; }
  .ng-ent-hero .ng-ent__avatar > img { width: 132px; height: 132px; }
  .ng-ent-hero .ng-ent__top > .ng-ent__id { order: 1; flex: 1 1 auto; margin-top: 0; padding: 16px 0 0; }
  .ng-ent-hero .ng-ent .profile-buttons-wrapper.ng-ent__actions { order: 2; flex: 0 0 auto; flex-wrap: nowrap; align-self: flex-start; margin: 0 0 0 auto; padding: 18px 0 0; }
  .ng-ent-hero .ng-ent__date { margin-top: -40px; }
  .ng-ent__bar { margin: 16px 24px 0; }
  .ng-ent-note { margin: 16px 24px 0; }
}
/* tablets: the actions take their own row under the name block (beside the picture), never past the column */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .ng-ent-hero .ng-ent__top { flex-wrap: wrap; }
  .ng-ent-hero .ng-ent__top > .ng-ent__id { flex: 1 1 0; min-width: 0; }
  .ng-ent-hero .ng-ent .profile-buttons-wrapper.ng-ent__actions { order: 3; flex: 1 0 100%; flex-wrap: wrap; justify-content: flex-end; margin: 12px 0 0; padding: 0; }
}
@media (min-width: 1024px) {
  .ng-ent-hero .ng-ent .profile-avatar-wrapper.ng-ent__avatar { margin-top: -56px; }
  .ng-ent-hero .ng-ent__avatar > img { width: 168px; height: 168px; }
  .ng-ent-hero.ng-ent-hero--square .ng-ent__avatar > img { width: 140px; height: 140px; }
  .ng-ent-hero .ng-ent__name { font-size: 32px; }
}

/* ---- the content ---- */
.ng-ent-cols.row { display: block; margin: 0; padding: var(--ng-ent-gap) 12px 0; }
.ng-ent-cols.row > * { padding-left: 0; padding-right: 0; }
@media (min-width: 768px) { .ng-ent-cols.row { padding-left: 0; padding-right: 0; } }
/* both halves always show here (niguro.css's Posts / About switch is not used on these pages) */
.ng-ent-cols > .ng-ent__about, .ng-ent-cols > .ng-ent__posts { display: block !important; animation: none !important; }
.ng-ent-cols.is-about > .ng-ent__posts { display: none !important; } /* a closed group you are not in: About only */
.ng-ent-cols > .ng-ent__about { display: flex !important; flex-direction: column; gap: var(--ng-ent-gap); margin-bottom: var(--ng-ent-gap); }
.ng-ent-cols > .ng-ent__about > * { margin-top: 0 !important; margin-bottom: 0 !important; }
.ng-ent-cols > .ng-ent__about > .d-grid > .btn { margin-bottom: 0 !important; }
@media (min-width: 1024px) {
  .ng-ent-cols.row:has(> .ng-ent__about) {
    display: grid; grid-template-columns: var(--ng-ent-side) minmax(0, 1fr); gap: var(--ng-ent-gap); align-items: start;
  }
  .ng-ent-cols > .ng-ent__about {
    position: sticky; margin-bottom: 0;
    top: var(--ng-ent-stick, calc(var(--ng-top-offset, var(--ng-header-h, 56px)) + 16px));
    transition: top .22s ease;
  }
  .ng-ent-cols.is-about:has(> .ng-ent__about) { grid-template-columns: minmax(0, 1fr); }
  .ng-ent-cols.is-about > .ng-ent__about { position: static; }
  /* groups: the feed first (wider), About on the right */
  .ng-ent-page--group .ng-ent-cols.row:has(> .ng-ent__about) { grid-template-columns: minmax(0, 1fr) var(--ng-ent-side); }
  .ng-ent-page--group .ng-ent-cols > .ng-ent__posts { order: -1; }
}
@media (prefers-reduced-motion: reduce) { .ng-ent-cols > .ng-ent__about { transition: none; } }

/* the cards (.ng-lcard, as the gift shelf): a title row without its rule, then the body */
.ng-ent-cols .ng-lcard__head { min-height: 0; padding: 14px 16px 6px; border-bottom: 0; font-size: 16px; }
.ng-ent-card__n { font-weight: 600; color: var(--ng-sub); }
.ng-ent-card__n::before { content: "· "; }
.ng-ent-card__body { padding: 4px 16px 16px; }
.ng-ent-card__sub { display: block; margin: -4px 16px 4px; padding: 0; border: 0; background: none; font-size: 13px; color: var(--ng-sub); cursor: pointer; text-align: left; }
.ng-ent-card__sub:hover { color: var(--ng-ink-strong); text-decoration: underline; }
/* facts: an icon and a line each */
.ng-ent-facts { display: grid; gap: 12px; margin: 0; padding: 6px 16px 16px; list-style: none; }
.ng-ent-facts > li { display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; line-height: 1.4; color: var(--ng-ink); }
.ng-ent-facts > li > .ng-ico { flex: none; width: 20px; height: 20px; color: var(--ng-sub); }
.ng-ent-facts > li > span { min-width: 0; overflow-wrap: anywhere; }
.ng-ent-facts b { font-weight: 600; color: var(--ng-ink-strong); }
.ng-ent-facts small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ng-sub); }
.ng-ent-facts a { color: var(--ng-brand); font-weight: 600; text-decoration: none; }
.ng-ent-facts a:hover { text-decoration: underline; }
/* the social links in Contact info */
.ng-ent-card__body .ng-ent__chips { margin-top: 0; }
/* photos: 3 × 3 (2 × 2 for a group's Recent media) */
.ng-ent-pgrid.ng-mgrid2 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 4px; padding: 6px 16px 16px; }
.ng-ent-pgrid--2.ng-mgrid2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.ng-ent-pgrid .ng-mtile__link { border-radius: 0; }
.ng-ent-pgrid > li:first-child .ng-mtile__link { border-top-left-radius: var(--ng-r-sm); }
.ng-ent-pgrid > li:nth-child(3) .ng-mtile__link { border-top-right-radius: var(--ng-r-sm); }
.ng-ent-pgrid--2 > li:nth-child(2) .ng-mtile__link { border-top-right-radius: var(--ng-r-sm); }
.ng-ent-pgrid--2 > li:nth-child(3) .ng-mtile__link { border-top-right-radius: 0; }
.ng-ent-pgrid { overflow: hidden; }
.ng-ent-pgrid .ng-mtile__tools { display: none; } /* pin / delete stay on the Photos tab */
/* people: a 3-column grid from 768px; a sideways row of cards on phones */
.ng-ent-people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; margin: 0; padding: 6px 16px 16px; list-style: none; }
.ng-ent-people a { display: block; color: var(--ng-ink-strong); text-decoration: none; }
.ng-ent-people img { display: block; width: 100%; aspect-ratio: 1; border-radius: var(--ng-r-sm); object-fit: cover; background: var(--ng-fill); }
.ng-ent-people span { display: -webkit-box; margin-top: 6px; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 13px; font-weight: 600; line-height: 1.3; }
.ng-ent-people a:hover span { text-decoration: underline; }
@media (max-width: 767.98px) {
  .ng-ent-people { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
  .ng-ent-people::-webkit-scrollbar { display: none; }
  .ng-ent-people > li { flex: 0 0 104px; scroll-snap-align: start; }
}

/* the Posts header card */
.ng-ent-postshead { margin: 0 0 var(--ng-ent-gap) !important; }
.ng-ent-postshead .ng-lcard__head { padding: 14px 16px; }

/* Sngine's own panels in the About column keep the theme's side-rail card look (niguro.css); the search box is
   where the tabs bar's Search lands */
.ng-ent-cols #ng-ent-search { scroll-margin-top: calc(var(--ng-top-offset, var(--ng-header-h, 56px)) + 16px); }
.ng-ent-cols #ng-ent-about { scroll-margin-top: calc(var(--ng-top-offset, var(--ng-header-h, 56px)) + 16px); }

/* [Entity counts] (owner, 2026-10-20) the handle under the name; counts of 0 aren't printed, the dot sits between the ones that are */
.ng-ent__handle { margin-top: 2px; font-size: 15px; font-weight: 500; color: var(--ng-sub); }
.ng-ent__counts > * + *::before { content: "•"; display: inline-block; margin: 0 6px; color: var(--ng-sub); font-weight: 400; }
.ng-ent__counts:empty { display: none; }

/* [News cards] (owner, 2026-10-20) the News tab (/{username}/news) is the timeline's frame: the About column on the left
   from 1024px, the stories as feed post cards beside it; phones and tablets show the stories only. A story without its
   own post keeps its row, as a card (news.css [News cards]). */
@media (max-width: 1023.98px) { .ng-ent-cols--news > .ng-ent__about { display: none !important; } }
.ng-ent-cols--news .nwx-pager { margin: 4px 0 var(--ng-ent-gap); }