/* =============================== */
/* UPDATES — Niguro Updates (updates.php; templates updates.tpl, __ng_updates_*.tpl). niguro.com's /updates
   (archive-niriv_update.php, single-niriv_update.php) with niguroapp's skin (assets/css/skins/cpt.css ›
   1. Updates), number for number, in Niguro tokens:
   - one 760px column in the page kit's frame, with the rail; 12px from the screen's edge under 1024
     (the frame's 8px + 4px, niguroapp's zz-mobile-gutters); 16px top / 48px bottom, 24 / 64 from 768;
   - every stacked block 12px apart, 16px from 768 (--upd-gap, niguroapp's --cx-gap);
   - the hero 24/20/22 padding (36/36/32 from 768), heading 30px (42px from 768), eyebrow pill 28px;
   - an update row 14px padding and gap (16 from 640), the square 84px (104 from 640), title 16px (17
     from 640), summary 13.5px, meta 12px, label badge and reactions pill 24px;
   - an update: News' reading card (css/pages/news.css .nwa-*: 16/28/36px sides at 0/640/1024, title
     26→34px, cover full bleed), with niguroapp's own line under the title (16→17px), the "/Updates" panel
     (15rem, 20rem from 768), the body 16px under the date, and the vote bar inset at the foot.
   The desk and the editor are the News desk's (news.css › 4. The desk). Night mode: tokens only.
   [Updates v2] (owner, 2026-10-19): the list is a product-updates / changelog page in the theme's patterns: the
   flush hero (niguro.css .ng-hero--flush), the label chips (.ng-chiprow with the shared scroll arrows), the cards
   (18px, cover 16:9, the newest larger from 768px, then two a row), the shared 420px "Load more" with skeleton
   cards; an update keeps its column and gets the byline, the share menu and a related strip. */
/* =============================== */

.ng-upd { --upd-gap: 12px; color: var(--ng-ink); }
@media (min-width: 768px) { .ng-upd { --upd-gap: 16px; } }
.ng-upd a { text-decoration: none; }

/* ---- the frame: a 760px column ---- */
/* [Updates v2] the list keeps the hub frame's 20px: its flush hero climbs over it (--ng-flush-gap's default) */
.ng-frame--hub.ng-upd--single { margin-top: 16px; }
@media (min-width: 768px) { .ng-frame--hub.ng-upd--single { margin-top: 24px; } }
/* the frame's column adds the row gutter (24px from 1024) to --ng-hub-max: 736 + 24 = niguroapp's 760 */
:is(.ng-upd--list, .ng-upd--single) .ng-hubwrap { --ng-hub-max: 736px; }
.ng-upd .upd-col { display: flex; flex-direction: column; gap: var(--upd-gap); padding-bottom: 48px; }
.ng-upd .upd-col > * { margin: 0; }
@media (min-width: 768px) { .ng-upd .upd-col { padding-bottom: 64px; } }
/* [Layout: gutters] phones and tablets: the frame's 8px a side only (user, 2026-10-18; was 8px + 4px) */
@media (max-width: 1023.98px) { .ng-upd .upd-col { padding-left: 0; padding-right: 0; } }

/* ---- [Updates v2] the list (begin) ---- */
/* the flush hero: the shared hero card; the eyebrow a small accent pill over the heading */
.ng-upd .upd-hero__eyebrow {
  display: inline-flex; align-items: center; height: 24px; margin-bottom: 10px; padding: 0 10px; border-radius: 999px;
  background: var(--ng-tile); color: var(--ng-brand); font-size: 11px; font-weight: 700; letter-spacing: .08em; white-space: nowrap;
}
.ng-upd .upd-hero .ng-hero__sub { max-width: 560px; }
/* Bhotu on the right (owner, 2026-10-19; the hero's art place): 96px on phones, 140px from 768px, 168px from
   1024px, centred on the text; the text keeps the rest of the width */
.ng-upd .upd-hero__bhotu { position: relative; z-index: 1; flex: none; width: 96px; height: 96px; margin-right: -4px; }
.ng-upd .upd-hero__bhotu img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 18px hsl(var(--primary) / .22)); }
@media (min-width: 768px) { .ng-upd .upd-hero__bhotu { width: 140px; height: 140px; margin-right: 8px; } }
@media (min-width: 1024px) { .ng-upd .upd-hero__bhotu { width: 168px; height: 168px; } }

/* the list's column: the chips, the cards and Load more, --upd-gap apart */
.ng-upd--list .upd-col { padding-bottom: 48px; }
@media (min-width: 768px) { .ng-upd--list .upd-col { padding-bottom: 64px; } }

/* the label chips: the shared pill row */
.ng-upd .upd-chips { margin: 0; }

/* page 2+ opened directly: back to the newer ones */
.ng-upd .upd-newer {
  align-self: center; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px;
  background: var(--ng-card); color: var(--ng-ink-strong); font-size: 13px; font-weight: 600;
}
.ng-upd .upd-newer:hover { background: var(--ng-fill); color: var(--ng-ink-strong); }
.ng-upd .upd-newer .ng-ico { width: 16px; height: 16px; }

/* the cards: one column on phones, two from 768px, the newest across both (cover left, text right) */
.ng-upd .upd-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--upd-gap); }
.ng-upd .upd-card {
  position: relative; display: flex; flex-direction: column; min-width: 0; margin: 0; overflow: hidden;
  border-radius: var(--ng-r); background: var(--ng-card); transition: box-shadow .15s ease; /* [Card radius] */
}
.ng-upd .upd-card:hover { box-shadow: var(--ng-shadow-lg); }
.ng-upd .upd-card__media { position: relative; display: block; flex: none; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ng-fill); }
.ng-upd .upd-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ng-upd .upd-card__ph {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(90% 90% at 100% 0%, hsl(var(--primary) / .30), transparent 70%), linear-gradient(135deg, hsl(var(--primary) / .16), hsl(var(--primary) / .06));
  color: var(--ng-brand); font-size: 13px; font-weight: 700; letter-spacing: .18em;
}
.ng-upd .upd-card__body { display: flex; flex: 1; flex-direction: column; min-width: 0; padding: 14px 16px 16px; }
/* the entry's badges: the type tag (the label, .ng-tag), the version, the date */
.ng-upd .upd-card__meta, .ng-upd .upd-meta--top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.ng-upd .upd-type { position: relative; z-index: 2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.ng-upd .upd-ver {
  display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; background: var(--ng-fill);
  color: var(--ng-ink-strong); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ng-upd .upd-date { margin-left: 2px; font-size: 12px; font-weight: 500; color: var(--ng-sub); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ng-upd .upd-date:first-child { margin-left: 0; }
.ng-upd .upd-card__title {
  margin: 10px 0 0; font-size: 16.5px; line-height: 1.32; font-weight: 700; letter-spacing: -.012em; color: var(--ng-ink-strong);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ng-upd .upd-card__link { color: inherit; }
/* the title's link covers the card; the tag and the author stay their own links above it */
.ng-upd .upd-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.ng-upd .upd-card:hover .upd-card__title { color: var(--ng-brand); }
.ng-upd .upd-card__link:focus-visible { outline: none; }
.ng-upd .upd-card__link:focus-visible::after { outline: 2px solid var(--ng-brand); outline-offset: -2px; }
.ng-upd .upd-card__ex {
  margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--ng-sub);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* the foot: the author (picture, name and badge, the job line) and the reading time / reactions */
.ng-upd .upd-card__foot { display: flex; align-items: center; gap: 10px; min-width: 0; margin-top: auto; padding-top: 14px; }
.ng-upd .upd-au { position: relative; z-index: 2; display: flex; flex: 0 1 auto; align-items: center; gap: 8px; min-width: 0; color: var(--ng-ink-strong); }
.ng-upd .upd-au__pic { flex: none; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: var(--ng-fill); }
.ng-upd .upd-au__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.ng-upd .upd-au__name { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 13px; font-weight: 600; }
.ng-upd .upd-au__n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ng-upd .upd-au:hover .upd-au__n { color: var(--ng-brand); }
.ng-upd .upd-au__work { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--ng-sub); }
.ng-upd .upd-verified { display: inline-flex; flex: none; align-items: center; margin: 0; line-height: 0; }
.ng-upd .upd-verified .svg-container, .ng-upd .upd-verified svg { display: block; width: 14px; height: 14px; }
.ng-upd .upd-card__stats { display: inline-flex; flex: none; align-items: center; gap: 10px; margin-left: auto; }
.ng-upd .upd-stat { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ng-sub); white-space: nowrap; }
.ng-upd .upd-stat .ng-ico { width: 14px; height: 14px; }
.ng-upd .upd-stat--rx .ng-ico { color: var(--ng-brand); }
@media (min-width: 768px) {
  .ng-upd .upd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ng-upd .upd-card--feat { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .ng-upd .upd-card--feat .upd-card__media { aspect-ratio: auto; height: auto; min-height: 250px; } /* the row's height; the picture covers it */
  .ng-upd .upd-card--feat .upd-card__media img { position: absolute; inset: 0; }
  .ng-upd .upd-card--feat .upd-card__body { justify-content: center; padding: 20px 22px; }
  .ng-upd .upd-card--feat .upd-card__title { font-size: 21px; line-height: 1.25; -webkit-line-clamp: 3; }
  .ng-upd .upd-card--feat .upd-card__ex { -webkit-line-clamp: 3; }
  .ng-upd .upd-card--feat .upd-card__foot { margin-top: 0; padding-top: 16px; }
}

/* Load more: the shared 420px button (niguro.css [load more]); busy while the next page comes */
.ng-upd .upd-loadmore[aria-busy="true"] { opacity: .6; pointer-events: none; }
/* the skeleton card (__ng_skeleton.tpl "upd"): the real card's boxes, the kit's fills */
.ng-upd .upd-card.ng-sk-item .upd-card__media { background: var(--ng-sk-fill); }
.ng-upd .upd-card.ng-sk-item .upd-sk-lines { display: flex; flex-direction: column; }
.ng-upd .upd-card.ng-sk-item .upd-card__meta .ng-sk { height: 24px; }
.ng-upd .upd-card.ng-sk-item .upd-sk-ava { width: 28px; height: 28px; }
.ng-upd .upd-card.ng-sk-item .upd-card__foot { gap: 8px; }

/* nothing yet: Bhotu reading (.ng-empty, in a card) */
.ng-upd .upd-empty { border-radius: var(--ng-r); background: var(--ng-card); /* [Card radius] */ }
.ng-upd .upd-empty__bhotu { display: block; width: 132px; height: 132px; object-fit: contain; }
.ng-upd .upd-empty > span { max-width: 360px; font-size: 14px; line-height: 1.5; }
.ng-upd .upd-empty .ng-pbtn { margin-top: 6px; }
/* ---- [Updates v2] phones: the timeline (begin) — (owner, 2026-10-19) under 768px the list is a changelog timeline,
   not a stack of full cards: the newest update stays the one large card, then sticky month headings (.upd-month,
   each heading the first child of its month's group, .upd-mgroup, so it scrolls away with its month) over compact rows on a thin line with a dot per row. A row: the 64px thumbnail
   (no cover: the type icon), the type tag with the version and the date on the right, the title (2 lines) and one
   line of summary; the whole row is the link (84px+ tall). 12px from the screen's edges (the frame's 8px + 4px,
   the hero's text too); Load more and "Newer updates" 44px tall. Tablets and desktop are unchanged. ---- */
.ng-upd .upd-month, .ng-upd .upd-card__dot, .ng-upd .upd-card__ph .ng-ico { display: none; }
/* a month's group (__ng_updates_list.tpl): no box of its own from 768px, its cards are the grid's */
.ng-upd .upd-mgroup { display: contents; }
@media (max-width: 767.98px) {
  .ng-upd--list .upd-col { padding-left: 4px; padding-right: 4px; }
  .ng-upd--list .upd-hero { --ng-flush-inset: 4px; }
  /* the month headings stick under the header: the frame clips without being a scroll box (overflow: clip keeps
     the phones' frame clip of niguro.css [Flush hero: phones' frame clip]; the hub frame has no off-canvas side) */
  .sg-offcanvas.ng-upd--list { overflow: clip; }
  .ng-upd .upd-loadmore.see-more.ng-dmore { min-height: 44px; } /* beats niguro.css [load more]'s 38px */
  .ng-upd .upd-newer { height: 44px; }

  .ng-upd .upd-grid { gap: 8px; }
  .ng-upd .upd-mgroup { display: flex; flex-direction: column; gap: 8px; }
  .ng-upd .upd-grid > .upd-card--feat { margin-bottom: 0; }
  /* the month heading: full width (it hides the rows' line as they pass under it), the label after the line */
  .ng-upd .upd-mgroup > .upd-month {
    position: sticky; top: var(--ng-top-offset, var(--ng-header-h, var(--ng-top, 56px))); /* [Smart header] */ z-index: 3; display: flex; align-items: center; min-height: 40px;
    margin: 8px 0 0; padding: 0 4px 0 30px; background: var(--ng-canvas);
    font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--ng-ink-strong);
  }
  .ng-upd .upd-mgroup > .upd-month::before { content: ""; position: absolute; left: 8px; top: 0; bottom: -8px; width: 2px; background: var(--ng-line); }
  .ng-upd .upd-grid > .upd-mgroup:first-child > .upd-month::before, .ng-upd .upd-card--feat + .upd-mgroup > .upd-month::before { top: 50%; }
  .ng-upd .upd-mgroup > .upd-month::after {
    content: ""; position: absolute; left: 5px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--ng-line);
  }

  /* the row */
  .ng-upd .upd-mgroup > .upd-card {
    flex-direction: row; align-items: flex-start; gap: 12px; min-height: 84px; margin-left: 22px; padding: 10px; overflow: visible;
  }
  .ng-upd .upd-mgroup > .upd-card::before { content: ""; position: absolute; left: -14px; top: 0; bottom: -8px; width: 2px; background: var(--ng-line); }
  .ng-upd .upd-mgroup > .upd-card:last-child::before { bottom: -16px; } /* on to the next month's heading */
  .ng-upd .upd-mgroup:last-child > .upd-card:last-child::before { bottom: calc(100% - 42px); } /* the list's end */
  .ng-upd .upd-mgroup > .upd-card .upd-card__dot {
    display: block; position: absolute; left: -19px; top: 42px; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%;
    background: var(--ng-canvas); box-shadow: inset 0 0 0 3px var(--ng-brand);
  }
  .ng-upd .upd-mgroup > .upd-card .upd-card__media { width: 64px; height: 64px; aspect-ratio: auto; border-radius: var(--ng-r-sm); }
  .ng-upd .upd-mgroup > .upd-card .upd-card__phtxt { display: none; }
  .ng-upd .upd-mgroup > .upd-card .upd-card__ph .ng-ico { display: block; width: 24px; height: 24px; }
  .ng-upd .upd-mgroup > .upd-card .upd-card__body { padding: 0; }
  .ng-upd .upd-mgroup > .upd-card .upd-card__meta { flex-wrap: nowrap; gap: 6px; }
  /* the tag reads as the row's type; the row is the one link (no 24px target inside a 44px+ one) */
  .ng-upd .upd-mgroup > .upd-card .upd-type { flex: 0 1 auto; min-width: 0; height: 22px; padding: 0 8px; font-size: 11.5px; pointer-events: none; }
  .ng-upd .upd-mgroup > .upd-card .upd-ver { flex: none; height: 22px; padding: 0 7px; font-size: 11.5px; }
  .ng-upd .upd-mgroup > .upd-card .upd-date { flex: none; margin-left: auto; font-size: 11.5px; }
  .ng-upd .upd-mgroup > .upd-card .upd-card__title { margin-top: 6px; font-size: 15px; line-height: 1.3; }
  .ng-upd .upd-mgroup > .upd-card .upd-card__ex { margin-top: 2px; font-size: 13px; line-height: 1.45; -webkit-line-clamp: 1; }
  .ng-upd .upd-mgroup > .upd-card .upd-card__foot { display: none; }
  /* the skeleton row: the same boxes, clipped (its shimmer stays inside), no line or dot */
  .ng-upd .upd-mgroup > .upd-card.ng-sk-item { overflow: hidden; }
  .ng-upd .upd-mgroup > .upd-card.ng-sk-item .upd-card__dot { display: none; }
  .ng-upd .upd-mgroup > .upd-card.ng-sk-item .upd-card__meta .ng-sk { height: 22px; }
}
/* ---- [Updates v2] phones: the timeline (end) ---- */
/* ---- [Updates v2] the list (end) ---- */

/* ---- an update ---- */
.ng-upd .upd-back {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px 0 10px; border-radius: 999px;
  background: var(--ng-card); font-size: 13px; font-weight: 600; color: var(--ng-ink);
}
.ng-upd .upd-back:hover { color: var(--ng-brand); }
.ng-upd .upd-back .ng-ico { width: 16px; height: 16px; }
.ng-upd .upd-status { margin: 0; }
.ng-upd .upd-article .nwa-body { padding-top: 20px; }
@media (min-width: 640px) { .ng-upd .upd-article .nwa-body { padding-top: 26px; } }
.ng-upd .upd-meta--top { min-height: 36px; margin-bottom: 12px; } /* [Updates v2] its flex: the list block above */
.ng-upd .upd-meta__end { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.ng-upd .upd-round { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 999px; background: var(--ng-fill); color: var(--ng-ink); cursor: pointer; }
.ng-upd .upd-round:hover { background: var(--ng-fill-2); color: var(--ng-ink); }
.ng-upd .upd-round .ng-ico { width: 18px; height: 18px; }
.ng-upd .upd-article .nwa-title { margin-top: 0; }
@media (min-width: 768px) { .ng-upd .upd-article .nwa-dek { font-size: 17px; } }
/* no cover: niguro.com's "/Updates" panel, full bleed */
.ng-upd .upd-ph {
  display: flex; align-items: center; justify-content: center; height: 15rem; margin: 18px calc(var(--sa-pad) * -1) 0;
  background: radial-gradient(circle at 28% 22%, hsl(var(--primary) / .65), transparent 62%), linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--primary) / .88) 55%, hsl(var(--primary) / .7) 100%);
}
@media (min-width: 768px) { .ng-upd .upd-ph { height: 20rem; } }
.ng-upd .upd-ph span { font-size: 48px; font-weight: 900; letter-spacing: 4px; color: hsl(0 0% 100% / .92); text-shadow: 0 2px 8px hsl(0 0% 0% / .35); }
.ng-upd .upd-content { margin-top: 16px; }
.ng-upd .upd-content > :last-child { margin-bottom: 0; }
.ng-upd .upd-content pre { max-width: 100%; overflow-x: auto; }
.ng-upd .upd-content table { display: block; max-width: 100%; overflow-x: auto; }
.ng-upd .upd-content iframe { display: block; max-width: 100%; }

/* the vote bar: a pill inset in the card (News' share bar), as wide as its buttons */
.ng-upd .upd-votes { width: max-content; max-width: calc(100% - var(--sa-pad) * 2); margin-top: 4px; gap: 2px; }
.ng-upd .upd-votes__n { min-width: 24px; padding: 0 4px; text-align: center; font-size: 14px; font-weight: 700; color: var(--ng-ink); font-variant-numeric: tabular-nums; }
.ng-upd .upd-vote { padding: 0; }
.ng-upd .upd-vote .ng-ico { width: 20px; height: 20px; }
.ng-upd .upd-vote--up.is-on { color: var(--ng-brand); }
.ng-upd .upd-vote--up.is-on .ng-ico { fill: hsl(var(--primary) / .25); }
.ng-upd .upd-vote--down.is-on { color: hsl(var(--destructive)); }
.ng-upd .upd-votes[aria-busy="true"] { opacity: .7; }

/* ---- [Updates v2] an update: byline, share, related strip (begin) ---- */
.ng-upd .upd-share { display: inline-flex; }
/* the byline under the line: picture, name and badge, the job line; the reading time on the right */
.ng-upd .upd-byline { display: flex; align-items: center; gap: 10px; min-width: 0; margin-top: 16px; }
.ng-upd .upd-byline__pic { flex: none; line-height: 0; }
.ng-upd .upd-byline__pic img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--ng-fill); }
.ng-upd .upd-byline__text { display: flex; flex: 1; flex-direction: column; min-width: 0; line-height: 1.3; }
.ng-upd .upd-byline__name { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 14px; font-weight: 600; }
.ng-upd .upd-byline__name a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ng-ink-strong); }
.ng-upd .upd-byline__name a:hover { color: var(--ng-brand); }
.ng-upd .upd-byline .upd-verified .svg-container, .ng-upd .upd-byline .upd-verified svg { width: 15px; height: 15px; }
.ng-upd .upd-byline__work { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--ng-sub); }
.ng-upd .upd-byline__read { display: inline-flex; flex: none; align-items: center; gap: 5px; margin-left: auto; font-size: 12.5px; color: var(--ng-sub); white-space: nowrap; }
.ng-upd .upd-byline__read .ng-ico { width: 14px; height: 14px; }

/* "More in …": a heading row and a sideways strip of cards (1.25 a view on phones, 2.4 from 640px), the shared
   scroll arrows over it (its .ng-strip__nav, niguro.js [Scroll arrows]) */
.ng-upd .upd-more { padding-top: 8px; }
.ng-upd .upd-more__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 2px 12px; }
.ng-upd .upd-more__head h2 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--ng-ink-strong); }
.ng-upd .upd-more__head a { flex: none; font-size: 13px; font-weight: 600; color: var(--ng-brand); }
.ng-upd .upd-rel__track {
  --upd-rel-n: 1.25;
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - var(--upd-gap)) / var(--upd-rel-n)); gap: var(--upd-gap);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.ng-upd .upd-rel__track::-webkit-scrollbar { display: none; }
.ng-upd .upd-rel__track > * { scroll-snap-align: start; }
@media (min-width: 640px) { .ng-upd .upd-rel__track { --upd-rel-n: 2.4; grid-auto-columns: calc((100% - 2 * var(--upd-gap)) / var(--upd-rel-n)); } }
.ng-upd .upd-card--mini .upd-card__body { padding: 12px 14px 14px; }
.ng-upd .upd-card--mini .upd-card__title { margin-top: 8px; font-size: 15px; }
.ng-upd .upd-card--mini .upd-card__foot { padding-top: 12px; }
/* ---- [Updates v2] an update (end) ---- */

/* ---- [Updates type] New / Improved / Fixed (begin) — (owner, 2026-10-19) an update's type is its tag: the kit's
   .ng-tag tint (niguro.css [Page kit] --h: the day tint and ink, the night ones) in the type's colour — New the
   brand green (the accent: no --h), Improved indigo (232), Fixed amber (38); the label follows as muted secondary
   text, still a link to its list. --upd-tc is the type's ink for the phones' timeline dot, the chips' and the
   editor's dots. The editor's Type: the [Segments: one style] radios (as writer.css .ng-wr__seg). ---- */
.ng-upd .upd-t--new { --upd-tc: var(--ng-brand); }
.ng-upd .upd-t--improved { --h: 232; --upd-tc: hsl(232 68% 50%); }
.ng-upd .upd-t--fixed { --h: 38; --upd-tc: hsl(38 92% 40%); }
body.night-mode .ng-upd .upd-t--improved { --upd-tc: hsl(232 75% 70%); }
body.night-mode .ng-upd .upd-t--fixed { --upd-tc: hsl(38 85% 58%); }
/* the label after the type (and the version): muted, one line */
.ng-upd .upd-label {
  position: relative; z-index: 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12px; font-weight: 600; color: var(--ng-sub);
}
.ng-upd .upd-label:hover { color: var(--ng-brand); }
.ng-upd .upd-meta--top .upd-label { font-size: 12.5px; }
/* the phones' timeline: the row's dot in the type's colour; the label is text there (the row is the link) */
.ng-upd .upd-card[class*="upd-t--"] .upd-card__dot { box-shadow: inset 0 0 0 3px var(--upd-tc); }
@media (max-width: 767.98px) {
  .ng-upd .upd-mgroup > .upd-card .upd-label { flex: 0 1 auto; font-size: 11.5px; pointer-events: none; }
  .ng-upd .upd-mgroup > .upd-card .upd-type[class*="upd-t--"] { flex: none; } /* the type keeps its word; the label gives way */
}
/* a dot in the type's colour: the type chips and the editor's segments */
.ng-upd .upd-tdot { display: inline-block; flex: none; width: 8px; height: 8px; margin: -2px 6px 0 0; border-radius: 50%; background: var(--upd-tc); vertical-align: middle; }
.ng-upd .ng-chiprow > .active .upd-tdot { background: currentColor; }
/* the editor's Type: one row of segments (None, New, Improved, Fixed) */
.ng-upd .upd-typefield { min-width: 0; margin: 0 0 1rem; padding: 0; border: 0; }
.ng-upd .upd-typefield legend { float: none; width: auto; margin-bottom: .5rem; padding: 0; }
.ng-upd .upd-typeseg { display: flex; gap: var(--ng-seg-gap); max-width: 480px; padding: var(--ng-seg-pad); border-radius: var(--ng-seg-r); background: var(--ng-seg-bg); /* [Segments: one style] */ }
.ng-upd .upd-typeseg .button-label {
  display: inline-flex; flex: 1 1 0; align-items: center; justify-content: center; min-width: 0; height: var(--ng-seg-h); margin: 0; padding: 0 8px; border: 0; border-radius: var(--ng-seg-r); background: transparent; box-shadow: none; color: var(--ng-seg-ink); font-size: var(--ng-seg-fs); font-weight: var(--ng-seg-fw); line-height: 1; white-space: nowrap; cursor: pointer; transition: background .15s, color .15s; /* [Segments: one style] */
}
.ng-upd .upd-typeseg .button-label:hover { background: var(--ng-seg-hover-bg); color: var(--ng-seg-hover-ink); box-shadow: none; /* [Segments: one style] */ }
.ng-upd .upd-typeseg .upd-tdot { margin-top: 0; }
.ng-upd .upd-typeseg .input-label:checked + .button-label { background: var(--ng-seg-on-bg); color: var(--ng-seg-on-ink); box-shadow: var(--ng-seg-on-shadow); /* [Segments: one style] */ }
body.night-mode .ng-upd .upd-typeseg .button-label { box-shadow: none; color: var(--ng-seg-ink); }
body.night-mode .ng-upd .upd-typeseg .button-label:hover { color: var(--ng-seg-hover-ink); }
body.night-mode .ng-upd .upd-typeseg .input-label:checked + .button-label { background: var(--ng-seg-on-bg); box-shadow: var(--ng-seg-on-shadow); color: var(--ng-seg-on-ink); /* [Segments: one style] */ }
.ng-upd .upd-typeseg .input-label:focus-visible + .button-label { outline: var(--ng-seg-focus); outline-offset: 1px; /* [Segments: one style] */ }
/* [Editor height] the update's text: TinyMCE sized by niguro-editor-grow.js (460px, 60% of the screen on phones,
   then as tall as the text); the toolbar sticks under the header while the page scrolls past a long text */
.ng-upd--desk .nwd-form .tox-tinymce { min-height: 460px; }
@media (max-width: 767.98px) { .ng-upd--desk .nwd-form .tox-tinymce { min-height: 60vh; min-height: 60svh; } }
/* ---- [Updates type] (end) ---- */