/* ==========================================================================
   NairobiCity design system
   --------------------------------------------------------------------------
   Shared primitives for the "Know what's happening / Find what you need"
   redesign: page headers, cards, badges, chips, filters, empty states, image
   containers, feed cards and the bottom sheet.

   Every module reuses these classes so the platform reads as one product
   instead of a stack of separately-styled modules. Mobile is the primary
   target: layouts start single/two-column and widen up, and nothing is
   allowed to overflow horizontally.
   ========================================================================== */

:root {
  --nc-radius-sm: 10px;
  --nc-radius: 16px;
  --nc-radius-lg: 22px;

  --nc-gap-xs: 6px;
  --nc-gap-sm: 10px;
  --nc-gap: 14px;
  --nc-gap-lg: 22px;

  --nc-ink: #10161f;
  --nc-ink-soft: #5a6675;
  /* Was #8a94a2 - 3.07:1 on white, 2.86:1 on the sunk surface, below the
     4.5:1 WCAG AA floor for the small meta text (dates, competitions,
     counts) this token is used for everywhere. #667180 clears it on both
     (4.95 / 4.62) while still reading as the quietest ink. */
  --nc-ink-faint: #667180;
  --nc-line: #e4e8ee;
  --nc-surface: #ffffff;
  --nc-surface-sunk: #f5f7fa;

  --nc-accent: #0f7b6c;
  --nc-accent-ink: #ffffff;
  --nc-hot: #d7263d;
  --nc-warn: #b4690e;

  --nc-shadow-sm: 0 1px 2px rgba(16, 22, 31, .06), 0 2px 8px rgba(16, 22, 31, .04);
  --nc-shadow: 0 2px 6px rgba(16, 22, 31, .07), 0 10px 24px rgba(16, 22, 31, .06);

  /* Touch targets never drop below this. */
  --nc-touch: 44px;
}

/* The theme ships a dark mode toggle; mirror its variables so every primitive
   below follows along instead of staying stubbornly light. */
[data-theme="dark"],
body.dark-mode {
  --nc-ink: #eef2f7;
  --nc-ink-soft: #a8b3c1;
  --nc-ink-faint: #7c8797;
  --nc-line: #2a323d;
  --nc-surface: #171d25;
  --nc-surface-sunk: #10151b;
  --nc-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --nc-shadow: 0 2px 6px rgba(0, 0, 0, .45), 0 10px 24px rgba(0, 0, 0, .35);
  /* The light-theme accent (#0f7b6c) is only ~3.3:1 on these dark surfaces -
     fine as a button fill with light text, but every link, icon, stat value
     and section eyebrow that uses it as TEXT then fails WCAG AA. A lighter
     teal clears 6.4:1 on --nc-surface and 7:1 on --nc-surface-sunk; paired
     with a near-black ink it also stays readable the other way round, as a
     button fill. Every `background: var(--nc-accent)` rule in this file sets
     `color: var(--nc-accent-ink)`, so the pair flips cleanly. */
  --nc-accent: #25b39c;
  --nc-accent-ink: #0b0f14;
}

/* --------------------------------------------------------------- page header */

.nc-page-head {
  display: flex;
  flex-direction: column;
  gap: var(--nc-gap-sm);
  margin: 0 0 var(--nc-gap-lg);
}

.nc-page-head__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--nc-gap-sm) var(--nc-gap);
}

.nc-page-head__text {
  min-width: 0;
  flex: 1 1 260px;
}

.nc-page-head__title {
  display: flex;
  align-items: center;
  gap: var(--nc-gap-xs);
  margin: 0;
  font-size: clamp(1.45rem, 4.5vw, 2rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--nc-ink);
}

.nc-page-head__emoji {
  font-size: 1.1em;
  line-height: 1;
}

.nc-page-head__tagline {
  margin: 4px 0 0;
  color: var(--nc-ink-soft);
  font-size: .95rem;
}

.nc-page-head__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nc-gap-xs);
}

/* Page-scoped search: lives right under the page's own title so it reads as
   "search this" rather than the sitewide box in the navbar above it. */
.nc-page-search {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 480px;
  padding: 4px 6px 4px 14px;
  background: var(--nc-surface);
  border: 1px solid var(--nc-line);
  border-radius: 999px;
  box-shadow: var(--nc-shadow-sm);
}

.nc-page-search__icon {
  display: flex;
  flex: 0 0 auto;
  color: var(--nc-ink-soft);
}

.nc-page-search__icon-svg { display: block; }

.nc-page-search__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: .95rem;
  color: var(--nc-ink);
}

.nc-page-search__input::placeholder { color: var(--nc-ink-soft); }

.nc-page-search__btn {
  flex: 0 0 auto;
  padding: 9px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--nc-ink);
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
}

.nc-page-search__btn:hover { opacity: .92; }

@media (max-width: 560px) {
  .nc-page-search { max-width: none; }
}

/* --------------------------------------------------------------- section head */

.nc-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--nc-gap);
  margin: 0 0 var(--nc-gap);
}

.nc-section-head__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--nc-ink);
}
/* A smaller sub-heading for a group nested under a larger "nc-section-head"
   umbrella (e.g. "Captain / Vice-Captain" under "Before the Deadline") -
   same element, quieter weight, so the umbrella stays the visual anchor. */
.nc-section-head__title--sub { font-size: .88rem; color: var(--nc-ink-soft); }

.nc-section-head__link {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 4px;
  font-size: .875rem;
  font-weight: 600;
  white-space: nowrap;
}

/* -------------------------------------------------------------------- badges */

.nc-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.5;
  white-space: nowrap;
  background: var(--nc-surface-sunk);
  color: var(--nc-ink-soft);
}

/* One badge colour per content type, so a mixed feed stays legible at a glance. */
.nc-tag--tea          { background: #f3e8d8; color: #7a4b12; }
.nc-tag--now          { background: #e3ecfb; color: #14417e; }
.nc-tag--opportunity  { background: #e6effa; color: #17457c; }
.nc-tag--deal         { background: #fdeaea; color: #97202c; }
.nc-tag--event        { background: #f0e6fb; color: #5b2a94; }
.nc-tag--epic         { background: #fdf1d6; color: #7c5209; }
.nc-tag--keja         { background: #e4f3ec; color: #145b45; }
.nc-tag--shop         { background: #eaf0f5; color: #2b4a63; }
.nc-tag--service      { background: #eef1e6; color: #4b5b1c; }
.nc-tag--place        { background: #f5eae4; color: #7d3c1c; }
.nc-tag--sports       { background: #e1f0e6; color: #1c6b3a; }
.nc-tag--motors       { background: #eae4f7; color: #4a2e8c; }
.nc-tag--stays        { background: #fbeaf2; color: #97205e; }

/* Serious incidents never wear the playful Tea branding. */
.nc-tag--alert        { background: var(--nc-hot); color: #fff; }
.nc-tag--breaking     { background: #1c1f24; color: #fff; }
.nc-tag--update       { background: #dfe4ea; color: #2c3540; }

.nc-tag--expiring     { background: var(--nc-hot); color: #fff; }
.nc-tag--free         { background: var(--nc-accent); color: var(--nc-accent-ink); }

[data-theme="dark"] .nc-tag,
body.dark-mode .nc-tag { background: #222a34; color: var(--nc-ink-soft); }

/* --------------------------------------------------------------------- chips */

/* Horizontally scrolling filter row. Scrolls inside itself so the page body
   never picks up a horizontal scrollbar on narrow screens. */
.nc-pills {
  display: flex;
  gap: var(--nc-gap-xs);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 2px 0 var(--nc-gap-sm);
  margin: 0 0 var(--nc-gap);
  list-style: none;
}

.nc-pills::-webkit-scrollbar { display: none; }

.nc-pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 7px 14px;
  border: 1px solid var(--nc-line);
  border-radius: 999px;
  background: var(--nc-surface);
  color: var(--nc-ink-soft);
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}

.nc-pill:hover { color: var(--nc-ink); border-color: var(--nc-ink-faint); text-decoration: none; }

.nc-pill--date {
  position: relative;
  cursor: pointer;
}

/* The native date input sits invisibly on top of the pill label, so tapping
   anywhere on the pill opens the OS date picker - no custom calendar widget
   to build or keep accessible. */
.nc-pill--date__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}

.nc-pill.is-active {
  background: var(--nc-ink);
  border-color: var(--nc-ink);
  color: var(--nc-surface);
}

/* ---------------------------------------------------------- image containers */

/* Fixed aspect ratios keep card heights consistent no matter what the uploaded
   image is, which is what stops a grid from going ragged. */
.nc-media {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--nc-surface-sunk);
  border-radius: var(--nc-radius-sm);
}

.nc-media--wide   { aspect-ratio: 16 / 9; }
.nc-media--card   { aspect-ratio: 4 / 3; }
.nc-media--square { aspect-ratio: 1 / 1; }
.nc-media--tall   { aspect-ratio: 3 / 4; }

.nc-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Placeholder for a card whose item has no image — and for one whose image
   turned out to be missing, which the JS marks the same way so a 404 never
   leaves a blank frame mid-card. */
.nc-media--empty {
  display: grid;
  place-items: center;
  color: var(--nc-ink-faint);
  font-size: 1.8rem;
  background: var(--nc-surface-sunk);
}

.nc-media--empty::after {
  content: "";
  opacity: .5;
}

/* Where a real image is still present, no placeholder glyph. */
.nc-media--empty:has(img)::after { content: none; }

/* ---------------------------------------------------------- discovery cards */

.nc-discover {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--nc-gap-sm);
  margin: 0 0 var(--nc-gap-lg);
}

@media (min-width: 576px) { .nc-discover { gap: var(--nc-gap); } }
@media (min-width: 768px) { .nc-discover { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 992px) { .nc-discover { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.nc-discover__card {
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 4 / 3;
  padding: var(--nc-gap-sm);
  border-radius: var(--nc-radius);
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  background: #1b2129 center / cover no-repeat;
  box-shadow: var(--nc-shadow-sm);
  isolation: isolate;
}

@media (min-width: 768px) { .nc-discover__card { aspect-ratio: 3 / 2; } }

.nc-discover__card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform .35s ease;
}

.nc-discover__card:hover img { transform: scale(1.04); }

/* Gradient rather than a flat scrim: keeps the photograph readable while
   guaranteeing contrast for the label sitting on top of it. */
.nc-discover__card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(8, 12, 18, .88) 0%, rgba(8, 12, 18, .55) 42%, rgba(8, 12, 18, .12) 100%);
}

.nc-discover__body { min-width: 0; }

.nc-discover__label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .98rem;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
}

.nc-discover__tagline {
  margin: 3px 0 0;
  font-size: .76rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, .82);
  /* Two lines max keeps every card the same height. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nc-discover__card:hover { color: #fff; text-decoration: none; }

/* Quick-access category buttons (landing page) - plain icon + label, no
   photo behind them, so the whole set reads at a glance on a phone instead
   of one or two image cards per screen. Colors cycle through a small fixed
   palette (not per-category) purely to keep nine identical-shaped buttons
   visually distinct from each other. */
.nc-quick-cats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 var(--nc-gap-lg);
}
@media (min-width: 576px) { .nc-quick-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--nc-gap); } }
@media (min-width: 992px) { .nc-quick-cats { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); } }

.nc-quick-cats__btn {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 16px 6px 14px;
  border-radius: var(--nc-radius);
  background: var(--nc-surface);
  border: 1px solid var(--nc-line);
  box-shadow: var(--nc-shadow-sm);
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: transform .18s ease, box-shadow .18s ease;
}
.nc-quick-cats__btn:hover { transform: translateY(-3px); box-shadow: var(--nc-shadow); text-decoration: none; color: inherit; }

.nc-quick-cats__icon {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  font-size: 18px;
  color: #fff;
  background: linear-gradient(135deg, #ff8a2a, #ff6a1a);
}
.nc-quick-cats__btn:nth-child(5n+2) .nc-quick-cats__icon { background: linear-gradient(135deg, #2f74e8, #1e5bd6); }
.nc-quick-cats__btn:nth-child(5n+3) .nc-quick-cats__icon { background: linear-gradient(135deg, #22c08c, #15a06b); }
.nc-quick-cats__btn:nth-child(5n+4) .nc-quick-cats__icon { background: linear-gradient(135deg, #f7ba3e, #f5a623); }
.nc-quick-cats__btn:nth-child(5n+5) .nc-quick-cats__icon { background: linear-gradient(135deg, #3a5aa0, #0b2a5b); }

.nc-quick-cats__label {
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--nc-ink);
}

/* ----------------------------------------------------------- the feed card */

/* One card system for every content type. The type only changes the badge and
   the small print, never the layout — that is what makes a mixed feed feel
   like one product. */
.nc-feed { display: grid; gap: var(--nc-gap); }

.nc-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--nc-surface);
  border: 1px solid var(--nc-line);
  border-radius: var(--nc-radius);
  overflow: hidden;
  box-shadow: var(--nc-shadow-sm);
  transition: box-shadow .18s ease, transform .18s ease;
}

.nc-tile:hover { box-shadow: var(--nc-shadow); }

.nc-tile__media { flex: none; }

/* -------------------------------------------------------- right rail */

.nc-rail-card .card-body.nc-rail-stack {
  display: flex;
  flex-direction: column;
  gap: var(--nc-gap, 12px);
}
/* A stacked card in a ~300px column reads better short and wide than tall
   and square - the grid's 16:9 media crop is too deep here. */
.nc-rail-card .nc-tile .nc-media--wide { aspect-ratio: 16 / 7; }
.nc-rail-card .nc-tile__summary { display: none; }

/* Trending Now / Ending Soon - a lighter row than a full _nc_tile, since a
   ~300px column has no room for another image-led card without the rail
   turning into an endless scroll of its own. */
.nc-rail-compact-list { display: flex; flex-direction: column; gap: 10px; }
.nc-rail-compact-item {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: inherit; min-width: 0;
}
.nc-rail-compact-item__thumb {
  flex: none; width: 44px; height: 44px; border-radius: var(--nc-radius-sm);
  background: var(--nc-surface-sunk) center/cover no-repeat;
  display: flex; align-items: center; justify-content: center;
  color: var(--nc-accent); font-size: .85rem;
}
.nc-rail-compact-item__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nc-rail-compact-item__title {
  font-size: .85rem; font-weight: 700; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.nc-rail-compact-item__meta { font-size: .74rem; color: var(--nc-ink-faint); }
.nc-rail-compact-item__meta--urgent { color: #c9362a; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }

/* ------------------------------------------------------- mobile pulse */

/* The right rail has no mobile equivalent (there is no third column to
   squeeze onto a phone) - this reshapes the same Trending/Ending Soon data
   into horizontally-swipeable rows sitting right under the page head, a
   native mobile-web pattern instead of more vertical cards competing with
   the feed for the same scroll. Only ever visible below `lg` - the rail
   itself takes over from there. */
.nc-pulse { display: flex; flex-direction: column; gap: var(--nc-gap, 12px); margin-bottom: var(--nc-gap-lg, 18px); }
.nc-pulse__row-head {
  display: flex; align-items: center; gap: 6px;
  font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: var(--nc-ink-soft); margin-bottom: 8px;
}
.nc-pulse__row-head i { color: var(--nc-accent); }

.nc-pulse__scroll {
  display: flex; gap: 10px; overflow-x: auto; padding-bottom: 2px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.nc-pulse__scroll::-webkit-scrollbar { display: none; }

.nc-pulse__card {
  flex: none; width: 132px; scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 6px;
  text-decoration: none; color: inherit;
  background: var(--nc-surface); border: 1px solid var(--nc-line); border-radius: var(--nc-radius-sm);
  padding: 8px; box-shadow: var(--nc-shadow-sm);
}
.nc-pulse__card-img {
  width: 100%; aspect-ratio: 4 / 3; border-radius: 6px;
  background: var(--nc-surface-sunk) center/cover no-repeat;
  display: flex; align-items: center; justify-content: center; color: var(--nc-accent);
}
.nc-pulse__card-badge {
  font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
  color: var(--nc-accent);
}
/* #c9362a rather than the live-dot red (#e0432b, 4.19:1) - this is text. */
.nc-pulse__card--urgent .nc-pulse__card-badge--urgent {
  color: #c9362a; text-transform: none; letter-spacing: 0;
  display: inline-flex; align-items: center; gap: 4px;
}
.nc-pulse__card-title {
  font-size: .78rem; font-weight: 700; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.nc-tile__body {
  display: flex;
  flex-direction: column;
  gap: var(--nc-gap-xs);
  padding: var(--nc-gap);
  min-width: 0;
}

.nc-tile__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--nc-gap-xs);
  font-size: .78rem;
  color: var(--nc-ink-faint);
}

.nc-tile__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.32;
  color: var(--nc-ink);
  /* Long titles are clamped rather than allowed to blow the card apart. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.nc-tile__title a { color: inherit; text-decoration: none; }
.nc-tile__title a:hover { text-decoration: underline; }

.nc-tile__summary {
  margin: 0;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--nc-ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.nc-tile__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nc-gap-sm);
  margin-top: auto;
  padding-top: var(--nc-gap-xs);
  font-size: .8rem;
  color: var(--nc-ink-faint);
  min-width: 0;
}

.nc-tile__source {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nc-tile__actions {
  flex: none;
  display: flex;
  gap: 2px;
}

/* Icon-only actions still have to meet the touch-target floor. */
.nc-icon-btn {
  display: inline-grid;
  place-items: center;
  width: var(--nc-touch);
  height: var(--nc-touch);
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--nc-ink-faint);
  cursor: pointer;
  transition: background .15s, color .15s;
}

.nc-icon-btn:hover { background: var(--nc-surface-sunk); color: var(--nc-ink); }
.nc-icon-btn.is-on { color: var(--nc-accent); }

/* Controls inherited from the base theme that sit under the touch floor -
   flagged by the responsive sweep (scripts/qa.mjs) on every page they
   appear on. */

/* The product card's Save bubble. style.css sizes it 34px, then shrinks it
   to 30px under 768px - backwards, since a phone is exactly where the
   bigger target matters. 40px clears comfortably without the bubble
   dominating a card image on a two-up mobile grid. */
.market-product-card__save,
.market-product-card__save:where(*) {
  width: 40px;
  height: 40px;
}
@media (max-width: 767.98px) {
  .market-product-card__save { width: 40px; height: 40px; }
}

/* The post header's privacy selector (lock / friends / public) renders at
   24x24 - the smallest real control on the site. It lives in .post-time
   inside the post header, so scope it there rather than touching every
   .btn-group dropdown in the theme. */
.post-header .post-time .btn-group > .btn.dropdown-toggle {
  min-width: 36px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Featured Services rows were 21px tall - a tappable list item needs more
   than a line of text's worth of height. */
.sggm-gig-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--nc-touch);
}

/* Price / prize block used by Deals, Shop, Keja and Epic Answers. */
.nc-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}

.nc-price__now { font-size: 1.05rem; font-weight: 700; color: var(--nc-ink); }
.nc-price__was { font-size: .85rem; color: var(--nc-ink-faint); text-decoration: line-through; }
.nc-price__save { font-size: .78rem; font-weight: 700; color: var(--nc-accent); }

/* ---------------------------------------------------------------- card grid */

.nc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: var(--nc-gap);
}

.nc-grid--tight {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr));
  gap: var(--nc-gap-sm);
}

/* --------------------------------------------------------------- countdown */

.nc-countdown {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.nc-countdown--urgent { color: var(--nc-hot); }
.nc-countdown--closed { color: var(--nc-ink-faint); font-weight: 600; }

/* ------------------------------------------------------------ empty states */

/* No module is allowed to render a bare "No data to show." */
.nc-empty {
  display: grid;
  place-items: center;
  gap: var(--nc-gap-xs);
  padding: clamp(28px, 8vw, 56px) var(--nc-gap);
  text-align: center;
  border: 1px dashed var(--nc-line);
  border-radius: var(--nc-radius);
  background: var(--nc-surface-sunk);
}

.nc-empty__emoji { font-size: 2rem; line-height: 1; }
.nc-empty__title { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--nc-ink); }
.nc-empty__text  { margin: 0; max-width: 42ch; font-size: .9rem; color: var(--nc-ink-soft); }
.nc-empty__action { margin-top: var(--nc-gap-xs); }

/* ---------------------------------------------------------- loading states */

/* Skeletons stand in for content while a section loads, so the page does not
   reflow underneath the reader. */
.nc-skeleton {
  background: linear-gradient(90deg, var(--nc-surface-sunk) 25%, var(--nc-line) 37%, var(--nc-surface-sunk) 63%);
  background-size: 400% 100%;
  border-radius: var(--nc-radius-sm);
  animation: nc-shimmer 1.4s ease infinite;
}

.nc-skeleton--media { aspect-ratio: 16 / 9; border-radius: var(--nc-radius-sm) var(--nc-radius-sm) 0 0; }
.nc-skeleton--line { height: 12px; margin-bottom: 8px; }
.nc-skeleton--line:nth-child(odd) { width: 92%; }
.nc-skeleton--line:last-child { width: 60%; margin-bottom: 0; }

@keyframes nc-shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .nc-skeleton { animation: none; }
  .nc-discover__card img { transition: none; }
}

/* -------------------------------------------------------------- bottom sheet */

/* Used for the "+ Post" chooser and the Tea story reader. Behaves as a bottom
   sheet on phones and a centred dialog from tablet up. */
.nc-sheet {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: none;
}

.nc-sheet.is-open { display: block; }

.nc-sheet__scrim {
  position: absolute;
  inset: 0;
  background: rgba(8, 12, 18, .55);
  animation: nc-fade .18s ease;
}

.nc-sheet__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 88vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: var(--nc-gap-lg) var(--nc-gap) calc(var(--nc-gap-lg) + env(safe-area-inset-bottom, 0px));
  background: var(--nc-surface);
  border-radius: var(--nc-radius-lg) var(--nc-radius-lg) 0 0;
  box-shadow: var(--nc-shadow);
  animation: nc-rise .22s cubic-bezier(.2, .8, .3, 1);
}

@media (min-width: 768px) {
  .nc-sheet__panel {
    left: 50%;
    right: auto;
    bottom: auto;
    top: 50%;
    width: min(560px, calc(100vw - 48px));
    transform: translate(-50%, -50%);
    border-radius: var(--nc-radius-lg);
    animation: nc-fade .18s ease;
  }
}

.nc-sheet__grab {
  width: 42px;
  height: 4px;
  margin: -10px auto var(--nc-gap);
  border-radius: 999px;
  background: var(--nc-line);
}

@media (min-width: 768px) { .nc-sheet__grab { display: none; } }

.nc-sheet__title { margin: 0 0 4px; font-size: 1.15rem; font-weight: 700; color: var(--nc-ink); }
.nc-sheet__sub { margin: 0 0 var(--nc-gap); font-size: .9rem; color: var(--nc-ink-soft); }

@keyframes nc-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes nc-rise { from { transform: translateY(14%); opacity: .6; } to { transform: translateY(0); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .nc-sheet__panel, .nc-sheet__scrim { animation: none; }
}

/* --------------------------------------------------------------- post picker */

.nc-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--nc-gap-sm);
}

@media (min-width: 576px) { .nc-picker { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.nc-picker__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: var(--nc-touch);
  padding: var(--nc-gap-sm);
  border: 1px solid var(--nc-line);
  border-radius: var(--nc-radius-sm);
  background: var(--nc-surface);
  color: var(--nc-ink);
  text-decoration: none;
  transition: border-color .15s, background .15s;
}

.nc-picker__item:hover { border-color: var(--nc-accent); background: var(--nc-surface-sunk); text-decoration: none; color: var(--nc-ink); }
.nc-picker__emoji { font-size: 1.4rem; line-height: 1; }
.nc-picker__label { font-weight: 700; font-size: .92rem; }
.nc-picker__tagline { font-size: .75rem; color: var(--nc-ink-soft); line-height: 1.35; }

.nc-picker__group-label {
  padding: var(--nc-gap) 2px 6px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--nc-ink-faint);
}
.nc-picker__group-label:first-child { padding-top: 2px; }

/* ----------------------------------------------------------------- sidebar */

.nc-sidenav { list-style: none; margin: 0; padding: 0; }

.nc-sidenav__group-label {
  padding: var(--nc-gap) 12px 6px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--nc-ink-faint);
}

.nc-sidenav__item > a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--nc-touch);
  padding: 8px 12px;
  border-radius: var(--nc-radius-sm);
  color: var(--nc-ink);
  font-weight: 600;
  font-size: .93rem;
  text-decoration: none;
  transition: background .15s;
}

.nc-sidenav__item > a:hover { background: var(--nc-surface-sunk); text-decoration: none; }

.nc-sidenav__item.is-active > a {
  background: var(--nc-surface-sunk);
  color: var(--nc-accent);
}

.nc-sidenav__emoji {
  flex: none;
  width: 22px;
  text-align: center;
  font-size: 1.02rem;
  line-height: 1;
}

.nc-sidenav__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: var(--nc-touch);
  margin: var(--nc-gap-sm) 0;
  padding: 10px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--nc-accent);
  color: var(--nc-accent-ink);
  font-weight: 700;
  font-size: .95rem;
  cursor: pointer;
  text-decoration: none;
}

.nc-sidenav__cta:hover { color: var(--nc-accent-ink); filter: brightness(1.06); text-decoration: none; }

/* --------------------------------------------------------------------- hero */

.nc-hero-v2 {
  position: relative;
  overflow: hidden;
  border-radius: 0 0 var(--nc-radius-lg) var(--nc-radius-lg);
  /* Deliberately restrained on phones: the hero's job is to hand the reader
     straight to search, not to fill the first screen. The extra top padding
     clears the landing page's 68px fixed navbar, which sits transparently
     over the hero. */
  padding: calc(68px + clamp(20px, 6vw, 48px)) clamp(16px, 5vw, 44px) clamp(26px, 7vw, 56px);
  margin-bottom: 0;
  color: #fff;
  background: #10161f center / cover no-repeat;
  isolation: isolate;
}

.nc-hero-v2::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, rgba(8, 12, 18, .9) 0%, rgba(8, 12, 18, .62) 55%, rgba(8, 12, 18, .35) 100%);
}

.nc-hero-v2__title {
  margin: 0;
  max-width: 18ch;
  font-size: clamp(1.7rem, 7vw, 3rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.02em;
}

.nc-hero-v2__title span { display: block; }
.nc-hero-v2__title span + span { color: #ffd977; }

.nc-hero-v2__sub {
  margin: var(--nc-gap-sm) 0 var(--nc-gap-lg);
  max-width: 46ch;
  font-size: clamp(.92rem, 2.6vw, 1.05rem);
  color: rgba(255, 255, 255, .84);
}

.nc-hero-v2__search { max-width: 620px; }

.nc-search {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 6px 6px 16px;
  background: #fff;
  border-radius: 999px;
  box-shadow: var(--nc-shadow);
}

.nc-search__icon { flex: none; color: var(--nc-ink-faint); }

.nc-search__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 1rem;
  color: var(--nc-ink);
  min-height: var(--nc-touch);
}

.nc-search__btn {
  flex: none;
  min-height: var(--nc-touch);
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: var(--nc-accent);
  color: var(--nc-accent-ink);
  font-weight: 700;
  cursor: pointer;
}

/* On the narrowest phones the button label is dropped for an icon so the
   input keeps a usable width. */
@media (max-width: 400px) {
  .nc-search { padding-left: 12px; }
  .nc-search__btn { padding: 0 14px; }
  .nc-search__btn-label { display: none; }
}

.nc-hero-v2__hints {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--nc-gap-sm);
}

.nc-hero-v2__hint {
  display: inline-flex;
  align-items: center;
  /* Kept at a comfortable tap size — these are the fastest route into a
     search for someone who does not want to type. */
  min-height: 36px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .2);
  color: rgba(255, 255, 255, .92);
  font-size: .78rem;
  text-decoration: none;
}

.nc-hero-v2__hint:hover { background: rgba(255, 255, 255, .24); color: #fff; text-decoration: none; }

/* ------------------------------------------------------------- utility bits */

.nc-stack   { display: grid; gap: var(--nc-gap-lg); }
.nc-muted   { color: var(--nc-ink-soft); }
.nc-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Belt-and-braces guard: nothing in the redesign may push the body sideways. */
.nc-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* A row of cards that scrolls sideways instead of wrapping — used for
   "Happening now" strips where vertical space is precious. */
.nc-rail {
  display: grid;
  grid-auto-flow: column;
  /* 78% left almost no peek of the next card on a phone, so a swipe felt like
     it was going nowhere. Narrower columns make "there's more" visible at a
     glance and cut the number of swipes needed to see everything. */
  grid-auto-columns: minmax(200px, 62%);
  gap: var(--nc-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: var(--nc-gap-xs);
}

.nc-rail::-webkit-scrollbar { display: none; }
.nc-rail > * { scroll-snap-align: start; }

@media (min-width: 576px) { .nc-rail { grid-auto-columns: minmax(260px, 46%); } }
@media (min-width: 992px) { .nc-rail { grid-auto-columns: minmax(280px, 31%); } }


/* ------------------------------------------------- landing-page integration */

/* The landing page's legacy .nc-section rhythm (90px, 64px on mobile) is built
   for long marketing blocks. The redesigned discovery, feed and rail sections
   are dense content, so they all share a tighter rhythm — otherwise a phone
   screen is mostly empty space between two grids, and the loose legacy gap
   reads as a jarring jump right in the middle of the new content. */
#discover.nc-section,
#happening-now.nc-section,
#things-to-do-rail.nc-section,
#opportunities-rail.nc-section {
  padding: clamp(28px, 7vw, 56px) 0;
}

/* The grid already carries the section's bottom spacing. */
#discover .nc-discover { margin-bottom: 0; }

/* Deals sits right above Discover; its own bottom padding plus Discover's top
   padding must land in the same tight rhythm, not stack into the page's
   biggest gap. */
.nc-featured-offers + #discover.nc-section { padding-top: clamp(16px, 4vw, 32px); }

/* Legacy landing "see more" links predate the redesign and sat at 16–18px
   tall. Lifted to a comfortable tap size without changing how they read. */
.nc-card__link,
.nc-live-col__link,
.nc-cookie-consent__link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
}

/* Divider between My NairobiCity groups. */
.nc-sidenav__divider {
  height: 1px;
  margin: var(--nc-gap-xs) 12px;
  background: var(--nc-line);
  list-style: none;
}

/* The sidebar list itself must never introduce list bullets or indentation. */
.nc-sidenav__item,
.nc-sidenav__group-label { list-style: none; }

/* The theme pins a floating back button at top-left (fixed, 42px, ~78px from
   the top) on every page except the homepage. A page header that starts flush
   left sits underneath it, so the title is indented to clear it. The button is
   only in the way while it overlaps the first row of content. */
.nc-page-head { padding-left: 56px; }

@media (min-width: 1200px) {
  /* Wide layouts put the main column well clear of the button. */
  .nc-page-head { padding-left: 0; }
}

/* Third-party controls that ship below the tap-target floor. */
.cc-link,
.js-sggm-carousel-prev,
.js-sggm-carousel-next {
  min-width: 36px;
  min-height: 36px;
}

/* ------------------------------------------------------------- Tea reader */

/* A button that has to read as a link — the Tea headline opens the reader in
   place rather than navigating, but it should look and behave like a headline. */
.nc-linkish {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.nc-linkish:hover { text-decoration: underline; }

.nc-tile__media.js-nc-tea-open {
  width: 100%;
  padding: 0;
  border: 0;
  cursor: pointer;
}

.nc-reader__title {
  margin: var(--nc-gap-xs) 0 var(--nc-gap);
  font-size: clamp(1.25rem, 4.5vw, 1.7rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--nc-ink);
}

.nc-reader__media { margin-bottom: var(--nc-gap); }

.nc-reader__block { margin-bottom: var(--nc-gap-lg); }

.nc-reader__heading {
  margin: 0 0 var(--nc-gap-xs);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--nc-ink-faint);
}

.nc-reader__block p { margin: 0; color: var(--nc-ink); line-height: 1.6; }

.nc-reader__points,
.nc-reader__sources {
  margin: 0;
  padding-left: 1.15em;
  color: var(--nc-ink);
  line-height: 1.6;
}

.nc-reader__points li,
.nc-reader__sources li { margin-bottom: var(--nc-gap-xs); }

.nc-reader__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nc-gap-sm);
  padding-top: var(--nc-gap-xs);
}

.nc-reader__actions .btn { min-height: var(--nc-touch); display: inline-flex; align-items: center; }

/* Reader close button. Floated to the top-right of the panel so it never
   sits on top of the badge row. */
.nc-sheet__close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  background: var(--nc-surface);
  border: 1px solid var(--nc-line);
}

.nc-sheet__panel { position: absolute; }

/* Leave room for the close button beside the first row of reader content. */
.nc-reader > .nc-tile__meta:first-child { padding-right: 52px; }

/* --------------------------------------------------------------- deals */

/* The saving, stamped on the image. Deliberately loud: the discount is the
   single thing someone scanning a deals grid is looking for. */
.nc-deal__flag {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--nc-hot);
  color: #fff;
  font-size: .85rem;
  font-weight: 800;
  letter-spacing: .01em;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

.nc-tile--deal .nc-tile__footer { flex-wrap: wrap; }
.nc-tile--deal .nc-tile__footer .btn { min-height: 38px; display: inline-flex; align-items: center; }

/* The floating back button also overlaps the theme's tab strip on the pages
   that keep one (Events, Market). Same clearance as the page header. */
.content-tabs > ul { padding-left: 56px; }

@media (min-width: 1200px) {
  .content-tabs > ul { padding-left: 0; }
}

/* Module-hero pages (Blogs, Groups, Watch, Movies, Courses, People, Pages,
   Directory) pull their tab card 25px up over the hero. On phones the hero
   kept only 16px of bottom padding, so that card sat on top of the page
   title, and the floating back button covered the eyebrow. market-browse.css
   already fixed both for Market; same values here for every hero page. The
   copy indent lines the title up with the tab strip's 56px clearance above. */
@media (max-width: 767.98px) {
  .module-hero { padding-bottom: 38px; }
  .module-hero__copy { padding-left: 52px; }
}

/* ------------------------------------------------------- event box cards */

/* The theme renders .ui-box images as a small 92px circular avatar floated
   above the card. That reads as a profile picture, not an event — and Things
   To Do is a visual discovery surface. Where the box carries an .nc-media
   wrapper, the image becomes a full-width 16:9 cover instead. */
.ui-box .img.nc-media {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  width: 100%;
  padding: 0;
  margin: 0 0 var(--nc-gap-sm);
  border-radius: var(--nc-radius-sm);
  overflow: hidden;
}

.ui-box .img.nc-media > a {
  display: block;
  width: 100%;
  height: 100%;
}

.ui-box .img.nc-media img {
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
}

/* The circular avatar needed 50px of clearance at the top of the card; a
   full-width cover does not. */
.ui-box:has(.img.nc-media) { padding-top: var(--nc-gap); margin-top: 0; }

/* Equal card heights in a row, and the action row pinned to the bottom
   instead of trailing wherever the text happens to end - the same
   treatment .nc-tile/.hh-card already have. */
.ui-box:has(.img.nc-media) {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-align: left;
}
.ui-box:has(.img.nc-media) > div:last-child { margin-top: auto; }

.ui-box .nc-card-author { margin-top: var(--nc-gap-xs); }

/* Opportunities cards reuse the base .card.product shell (not
   .market-product-card, which already has its own complete layout) -
   scoped with :not() so this never touches the Market product card. */
.card.product:not(.market-product-card) {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.card.product:not(.market-product-card) .product-info {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.card.product:not(.market-product-card) .nc-card-author {
  margin-top: auto;
  padding-top: var(--nc-gap-xs);
}

/* ---------------------------------------------------- shop category groups */

/* Group tiles are shorter than the homepage discovery cards — they carry a
   label only, so they do not need room for a tagline. */
.nc-discover--compact { margin-bottom: var(--nc-gap); }
.nc-discover--compact .nc-discover__card { aspect-ratio: 3 / 2; }

@media (min-width: 768px) {
  .nc-discover--compact .nc-discover__card { aspect-ratio: 2 / 1; }
}

/* "View all categories" — the full taxonomy stays reachable, just not in the
   way of the six groups most people want. */
.nc-more { margin-bottom: var(--nc-gap); }

.nc-more__summary {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 4px;
  color: var(--nc-accent);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.nc-more__summary::-webkit-details-marker { display: none; }

/* Inside the disclosure the pills wrap instead of scrolling — the whole point
   is to see the full list at once. */
.nc-pills--wrap {
  flex-wrap: wrap;
  overflow-x: visible;
}

.nc-pills--filter { margin-bottom: var(--nc-gap-lg); }
.nc-pills--filter .nc-pill { font-size: .82rem; }

/* Marketplace and Keja controls that shipped below the tap-target floor. */
.market-product-card__seller,
.market-product-card__whatsapp,
.hh-chip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
}

.market-product-card__whatsapp { min-width: 36px; justify-content: center; }
.hh-chip { padding-top: 4px; padding-bottom: 4px; }
.js-hh-compare-link { display: inline-flex; align-items: center; min-height: 36px; }

/* Product card spacing pass - the base rules (style.css) packed every
   element with only a 6px gap, so title/brand/price/chips all ran
   together. Loosened the vertical rhythm and gave the chip row and footer
   a touch more room, without touching the base component's structure. */
.market-product-card__body { gap: 9px; }
.market-product-card__title { margin-bottom: 1px; }
.market-product-card__vehicle-chips,
.nc-vehicle-detail .market-product-card__vehicle-chips { gap: 6px; margin: 2px 0 3px; }
.market-product-card__meta { margin-top: 1px; }
.market-product-card__foot { margin-top: 10px; padding-top: 13px; }
@media (max-width: 767.98px) {
  .market-product-card__body { padding: 12px; gap: 8px; }
  .market-product-card__foot { margin-top: 8px; padding-top: 11px; }
}

/* Product / deal detail page (post.product.tpl, post.offer.tpl). Three
   columns: the site nav sidebar on the left, the main content in the
   middle, the "Featured Services" widget on the far right.

   The whole middle column is ONE framed card so the image, details, price
   and seller read as a single product page rather than a stack of separate
   boxes. Inside that frame the sub-sections are divided only by a light
   rule - none of them carries its own border/background. */
.nc-product-detail {
  background: var(--nc-surface, #fff);
  border: 1px solid var(--nc-line, #e2e8f0);
  border-radius: var(--nc-radius, 16px);
  box-shadow: var(--nc-shadow-sm);
  padding: 22px;
  margin-bottom: 20px;
}
@media (max-width: 575.98px) {
  .nc-product-detail { padding: 14px; border-radius: 14px; }
}

.nc-product-section { margin-bottom: 1.25rem; }
.nc-product-section h3 {
  font-size: 1rem; font-weight: 750; margin: 0 0 .6rem;
  color: var(--hh-ink, #0f172a);
}
.nc-product-section + .nc-product-section {
  padding-top: 1.25rem; border-top: 1px solid var(--hh-line, #e2e8f0);
}

/* De-box the panels that ship as their own cards (the price/contact panel,
   the seller card) so inside the frame they read as further sections of the
   one card, separated by the same light rule. */
.nc-product-detail .hh-section,
.nc-product-detail .nc-seller-card {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 1.25rem 0 0;
  margin: 1.25rem 0 0;
  border-top: 1px solid var(--hh-line, #e2e8f0);
}

/* The spec tiles lose their own outline too - a subtle sunk fill is enough
   to group label + value without adding another visible box. */
.nc-product-detail .nc-vehicle-fact {
  border-color: transparent;
  background: var(--nc-surface-sunk, #f5f7fa);
}

/* Far-right column. The Gig Marketplace hook injects its card right after
   `<div class="col-lg-4 js_sticky-sidebar">`; that bare col-lg-4 has no
   .row parent here, so pin it to the column's full width instead of the
   third it would otherwise claim. Empty (no gigs) - the column collapses. */
.nc-product-right { margin-top: 28px; }
.nc-product-right > .col-lg-4 { flex: 0 0 100%; max-width: 100%; width: 100%; padding: 0; }
/* Hidden only when it would be truly empty - no Featured Services card AND
   no related-listings rail. */
.nc-product-right:not(:has(.sggm-card)):not(:has(.nc-related-rail)) { display: none; }
.nc-product-right .sggm-card { margin-top: 0; }
@media (min-width: 992px) {
  .nc-product-right { margin-top: 0; }
  .nc-product-right > .col-lg-4 { position: sticky; top: 84px; }
  /* The rail follows the sticky marker; keep it stuck too. */
  .nc-product-right > .nc-related-rail { position: sticky; top: 84px; }
  .nc-product-right:has(.sggm-card) > .nc-related-rail { position: static; }
}

/* Compact related-listings list for the right column. */
.nc-related-rail__item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; text-decoration: none; color: inherit;
  border-top: 1px solid var(--nc-line);
}
.nc-related-rail .card-body > .nc-related-rail__item:first-child { border-top: 0; }
.nc-related-rail__thumb {
  flex: none; width: 46px; height: 46px; border-radius: var(--nc-radius-sm);
  background: var(--nc-surface-sunk) center / cover no-repeat;
  display: grid; place-items: center; color: var(--nc-ink-faint); font-size: .85rem;
}
.nc-related-rail__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nc-related-rail__title {
  font-size: .82rem; font-weight: 700; line-height: 1.3; color: var(--nc-ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.nc-related-rail__price { font-size: .78rem; font-weight: 700; color: var(--nc-accent); }
.nc-related-rail__item:hover .nc-related-rail__title { text-decoration: underline; }

/* post.product.tpl - a real dedicated page, not the generic social-post
   template: no card box, no author-avatar header, no comments/reactions/
   rating. .post--bare only strips the native .post card chrome (it still
   carries class="post" data-id="..." because post.js's delegated owner-
   management handlers - mark sold, boost, pin, delete - find the post id
   by walking up to the nearest .post[data-id], not by page structure). */
.post--bare { background: none; box-shadow: none; border-radius: 0; margin-bottom: 0; }

/* Right-aligned, deliberately - the sitewide floating back button sits
   fixed top-left on every page (_header.tpl), so nothing of this page's
   own header row should compete with it for that corner. */
.nc-product-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; min-height: 36px; }
.nc-product-toolbar__actions { display: flex; align-items: center; gap: 8px; }

.nc-product-gallery .pg_wrapper { border-radius: var(--hh-radius, 14px); overflow: hidden; }

.nc-product-byline { font-size: .88rem; color: var(--hh-muted, #64748b); }
.nc-product-byline__author { font-weight: 700; color: var(--hh-ink, #0f172a); text-decoration: none; }
.nc-product-byline__author:hover { text-decoration: underline; }

/* Product card footer: the base rules cap the seller name at a fixed
   86-92px, truncating most real names down to a single letter - let it
   use whatever room .market-product-card__foot's own space-between
   already gives it (more, now that WhatsApp/Share are off this card)
   instead of a guessed pixel width. */
.market-product-card__seller { flex: 1 1 auto; min-width: 0; }
.market-product-card__seller-name { max-width: none; }

/* Fixed card shape: every product card is the same height regardless of
   how much data the listing happens to carry - one line of chips that
   never wraps, a two-line title slot, single-line brand/price/location.
   Everything else belongs on the product's own page. */
.market-product-card { height: 100%; display: flex; flex-direction: column; }
.market-product-card__body { flex: 1 1 auto; }
.market-product-card__vehicle-chips--fixed {
  flex-wrap: nowrap;
  overflow: hidden;
  min-height: 22px;
  margin: 2px 0 3px;
}
.market-product-card__vehicle-chips--fixed .nc-vehicle-chip { flex: 0 0 auto; white-space: nowrap; }
.market-product-card__brand,
.market-product-card__location { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.market-product-card__foot { margin-top: auto; }

/* --------------------------------------- listing gallery + seller card */

/* Shared by the Marketplace and Deals detail pages: one large image with
   thumbnails under it that swap it in place (nairobicity.js). */
.nc-gallery { margin-bottom: 20px; }
.nc-gallery__main {
  display: block; border-radius: var(--hh-radius, 14px); overflow: hidden;
  background: var(--nc-surface-sunk, #f1f5f9);
}
.nc-gallery__main img {
  display: block; width: 100%; max-height: 460px;
  object-fit: contain; background: var(--nc-surface-sunk, #f1f5f9);
}
.nc-gallery__thumbs {
  display: flex; gap: 8px; margin-top: 8px;
  overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x proximity;
}
.nc-gallery__thumb {
  flex: 0 0 auto; width: 74px; height: 60px; padding: 0;
  border: 2px solid transparent; border-radius: 10px; overflow: hidden;
  background: var(--nc-surface-sunk, #f1f5f9); cursor: pointer;
  scroll-snap-align: start; transition: border-color .15s ease, opacity .15s ease;
  opacity: .75;
}
.nc-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nc-gallery__thumb:hover { opacity: 1; }
.nc-gallery__thumb.is-active { border-color: var(--hh-blue, #0f76d7); opacity: 1; }

/* Product / deal detail pages: the image fills the width of the frame it
   sits in - a clear look at the item, but not a full-bleed hero. Still a
   real lightbox link, still swappable by thumbnail. */
.nc-gallery--compact { max-width: 100%; margin-bottom: 18px; }
.nc-gallery--compact .nc-gallery__main img { max-height: 400px; }
.nc-gallery--compact .nc-gallery__thumb { width: 64px; height: 52px; }
@media (max-width: 575.98px) {
  .nc-gallery--compact .nc-gallery__main img { max-height: 300px; }
}

.nc-seller-card { margin-top: 12px; }
.nc-seller-card__head { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; margin-bottom: 12px; }
.nc-seller-card__head:hover { text-decoration: none; color: inherit; }
.nc-seller-card__avatar {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  background: var(--nc-surface-sunk, #f1f5f9) center / cover no-repeat;
}
.nc-seller-card__id { min-width: 0; display: grid; gap: 2px; }
.nc-seller-card__name { font-weight: 800; font-size: .95rem; color: var(--hh-ink, #0f172a); }
.nc-seller-card__verified { color: var(--hh-blue, #0f76d7); font-size: .8rem; margin-left: 2px; }
.nc-seller-card__sub { font-size: .78rem; color: var(--hh-muted, #64748b); }
.nc-seller-card__stats { display: flex; gap: 18px; margin-bottom: 14px; }
.nc-seller-card__stat { display: grid; gap: 1px; }
.nc-seller-card__stat strong { font-size: .95rem; font-weight: 800; color: var(--hh-ink, #0f172a); }
.nc-seller-card__stat span { font-size: .72rem; color: var(--hh-muted, #64748b); text-transform: uppercase; letter-spacing: .03em; }

.nc-deal-expiry { font-size: .85rem; font-weight: 700; color: #c2410c; }

/* The post menu (mark sold, edit, boost, hide, report...) was a 24x24
   chevron - present on mobile, just too small to notice or hit. Give it a
   real tap target. */
.post-meta .dropdown .dropdown-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; min-height: 40px;
}

/* ------------------------------------------------ comments drawer */

/* Tapping Comment opens the thread in a bottom sheet instead of expanding
   it inline: the conversation scrolls inside the panel and the compose box
   stays pinned at the bottom, within thumb reach. The panel is filled with
   the post's own .post-footer, moved in and back out again by
   nairobicity.js - so there is only ever one copy of a thread. */
.nc-comments-drawer { position: fixed; inset: 0; z-index: 1200; }
.nc-comments-drawer[hidden] { display: none !important; }
.nc-comments-drawer__backdrop {
  position: absolute; inset: 0;
  background: rgba(8, 12, 18, .5);
  opacity: 0; transition: opacity .22s ease;
}
.nc-comments-drawer.is-open .nc-comments-drawer__backdrop { opacity: 1; }
.nc-comments-drawer__panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column;
  max-height: 85vh;
  background: var(--nc-surface, #fff);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -12px 40px rgba(15, 23, 42, .22);
  transform: translateY(100%);
  transition: transform .26s cubic-bezier(.22, .61, .36, 1);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.nc-comments-drawer.is-open .nc-comments-drawer__panel { transform: translateY(0); }
.nc-comments-drawer__head {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 16px 48px 12px;
  border-bottom: 1px solid var(--nc-line, #e2e8f0);
}
.nc-comments-drawer__grip {
  position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
  width: 38px; height: 4px; border-radius: 999px;
  background: var(--nc-line, #e2e8f0);
}
.nc-comments-drawer__title { font-size: .95rem; font-weight: 800; }
.nc-comments-drawer__close {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: transparent; color: var(--nc-ink-soft, #64748b);
  font-size: 24px; line-height: 1; cursor: pointer;
}
.nc-comments-drawer__close:hover { background: var(--nc-surface-sunk, #f1f5f9); }
.nc-comments-drawer__body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 6px 12px 12px; }
/* The borrowed .post-footer is the drawer's whole content - drop the card
   chrome it carried while it lived inside the post. */
.nc-comments-drawer__body > .post-footer { border: 0; margin: 0; padding: 0; background: none; }
/* Keep the native compose row reachable at the bottom of the sheet. */
.nc-comments-drawer__body .js_comment-form,
.nc-comments-drawer__body .post-comment-form { position: sticky; bottom: 0; background: var(--nc-surface, #fff); padding-top: 8px; }
body.nc-drawer-open { overflow: hidden; }
@media (min-width: 768px) {
  .nc-comments-drawer__panel { left: 50%; right: auto; width: min(560px, 94vw); transform: translate(-50%, 100%); border-radius: 20px 20px 0 0; }
  .nc-comments-drawer.is-open .nc-comments-drawer__panel { transform: translate(-50%, 0); }
}

/* ------------------------------------------- fixed-chrome clearance */

/* Two pieces of chrome are position:fixed on every page and nothing was
   reserving room for either: the bottom nav bar (70px tall, mobile only)
   was covering the last 70px of every page's content, and the floating
   back button (top-left, just under the header) was sitting on top of
   whatever text a page opened with. */
@media (max-width: 767.98px) {
  body { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
  .sg-offcanvas-mainbar { padding-top: 32px; }
}

/* --------------------------------------------------------- Epic Answers */

/* The prize is the reason to answer, so it gets weight the other chips do not. */
.sgnqa-index-chip.prize.is-prominent {
  background: #fdf1d6;
  color: #7c5209;
  font-weight: 700;
  border-color: #f0d9a4;
}

/* A question past its deadline reads as closed, not open. */
.sgnqa-status-pill.closed {
  background: #ece9f7;
  color: #4a3d80;
}

.sgnqa-index-chip.deadline { color: var(--nc-hot); font-weight: 700; }
.sgnqa-index-chip.closed { color: var(--nc-ink-faint); }

.sgnqa-index-cta {
  margin-left: auto;
  font-weight: 700;
  color: var(--nc-accent);
}

/* Landing footer links and the logo were 18–21px tall — fine as text, but they
   are navigation, so they get a proper tap box. */
.nc-flinks a,
.nc-logo {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
}

/* The footer column stacks links vertically; the taller boxes would otherwise
   double the gap between them. */
.nc-flinks { gap: 2px; }

/* Event box actions: keep both buttons at a comfortable size on every width. */
.ui-box .btn-sm { min-height: 36px; display: inline-flex; align-items: center; }

/* ------------------------------------------------------------- filter bar */

/* Used by Motors and Stays. Wraps into as many rows as it needs rather than
   scrolling — these are deliberate choices someone sets before searching, not
   a browse rail, so all of them should be visible at once. */
.nc-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--nc-gap-sm);
  padding: var(--nc-gap);
  margin: 0 0 var(--nc-gap-lg);
  background: var(--nc-surface);
  border: 1px solid var(--nc-line);
  border-radius: var(--nc-radius);
}

.nc-filters__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* Two per row on phones, more as space allows. */
  flex: 1 1 calc(50% - var(--nc-gap-sm));
  min-width: 0;
}

@media (min-width: 576px) { .nc-filters__field { flex-basis: calc(33.333% - var(--nc-gap-sm)); } }
@media (min-width: 992px) { .nc-filters__field { flex-basis: 150px; flex-grow: 0; } }

.nc-filters__label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--nc-ink-faint);
}

.nc-filters__select,
.nc-filters__input {
  width: 100%;
  min-height: var(--nc-touch);
  padding: 8px 12px;
  border: 1px solid var(--nc-line);
  border-radius: var(--nc-radius-sm);
  background: var(--nc-surface);
  color: var(--nc-ink);
  font-size: .92rem;
}

.nc-filters__select:focus,
.nc-filters__input:focus {
  outline: 2px solid var(--nc-accent);
  outline-offset: 1px;
}

.nc-filters__actions {
  display: flex;
  gap: var(--nc-gap-xs);
  flex: 1 1 100%;
}

@media (min-width: 992px) { .nc-filters__actions { flex: 0 0 auto; } }

.nc-filters__actions .btn {
  min-height: var(--nc-touch);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
}

@media (min-width: 992px) { .nc-filters__actions .btn { flex: 0 0 auto; } }

/* --------------------------------------------------------- header wordmark */

/* With no uploaded logo image the header falls back to the site title as 32px
   text, inside a wrapper with overflow:hidden and a 48px left inset for the
   menu button. On a 360px screen "Nairobi City" is clipped mid-word. Scaling
   the fallback down keeps the whole name visible; an uploaded logo image is
   unaffected. */
@media (max-width: 575.98px) {
  .main-header .logo {
    font-size: 20px;
    line-height: 70px;
    white-space: nowrap;
  }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .main-header .logo { font-size: 26px; }
}

/* Breaking mid-word is never the right fallback for a name. */
.main-header .logo-wrapper { word-break: normal; }


/* ======================================================================
   Card type variation (visual redesign pass)
   ----------------------------------------------------------------------
   The shared card kept every content type in an identical white rectangle,
   differing only by badge colour. These rules give each type a genuine
   visual signature - a wash, a highlight pill, an icon treatment - while
   keeping the same underlying markup and the same predictable tap targets.
   ====================================================================== */

/* -------------------------------------------------------- highlight pill */

.nc-tile__highlight {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  padding: 5px 12px;
  margin: 12px 12px 0;
  border-radius: 999px;
  font-weight: 800;
  font-size: .92rem;
  letter-spacing: -.005em;
  line-height: 1.3;
}

.nc-tile__highlight i { font-size: .85em; }

.nc-tile__highlight--gold   { background: #FDF1D6; color: #7C5209; }
.nc-tile__highlight--hot    { background: #FBE3E1; color: #92281F; }
.nc-tile__highlight--blue   { background: #E3ECFB; color: #14417E; }
.nc-tile__highlight--neutral{ background: var(--nc-surface-sunk); color: var(--nc-ink-soft); }

body.dark-mode .nc-tile__highlight--gold   { background: #3a2c0d; color: #f2cf7d; }
body.dark-mode .nc-tile__highlight--hot    { background: #3a1a17; color: #f0968b; }
body.dark-mode .nc-tile__highlight--blue   { background: #172742; color: #a9c4ef; }
body.dark-mode .nc-tile__highlight--neutral{ background: var(--nc-surface-sunk); color: var(--nc-ink-soft); }

/* When a highlight sits above an icon-avatar card (no photo), it does not
   need its own top margin - the avatar already gave the card room to breathe. */
.nc-tile--iconic .nc-tile__highlight { margin-top: 14px; }

/* ------------------------------------------------------------ icon avatar */

.nc-tile__icon-avatar {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: 16px 16px 0;
  border-radius: 14px;
  font-size: 1.65rem;
  line-height: 1;
  text-decoration: none;
}

.nc-tile__icon-avatar--hot     { background: #FBE3E1; }
.nc-tile__icon-avatar--blue    { background: #E3ECFB; }
.nc-tile__icon-avatar--gold    { background: #FDF1D6; }
.nc-tile__icon-avatar--neutral,
.nc-tile__icon-avatar--purple  { background: var(--nc-surface-sunk); }

body.dark-mode .nc-tile__icon-avatar--hot   { background: #3a1a17; }
body.dark-mode .nc-tile__icon-avatar--blue  { background: #172742; }
body.dark-mode .nc-tile__icon-avatar--gold  { background: #3a2c0d; }
body.dark-mode .nc-tile__icon-avatar--neutral,
body.dark-mode .nc-tile__icon-avatar--purple { background: var(--nc-surface-sunk); }

/* Iconic cards (no photo) read shorter and denser - they are status notices,
   not stories, and should not force the same tall rhythm as an image card. */
.nc-tile--iconic .nc-tile__body { padding-top: 10px; gap: 6px; }
.nc-tile--iconic .nc-tile__summary {
  -webkit-line-clamp: 2;
  font-size: .85rem;
}

/* -------------------------------------------------------------- deal wash */

/* Deals get a warm, unmistakable tint - the whole point is that it should
   not read as "just another card" among Tea and Keja listings. */
.nc-tile--deal {
  background: linear-gradient(180deg, #FFF9F0 0%, var(--nc-surface) 130px);
  border-color: #F3E3C4;
}

body.dark-mode .nc-tile--deal {
  background: linear-gradient(180deg, #241d0f 0%, var(--nc-surface) 130px);
  border-color: #3d3117;
}

/* ------------------------------------------------------------- epic wash */

.nc-tile--epic {
  background: linear-gradient(180deg, #FFFBEF 0%, var(--nc-surface) 160px);
  border-color: #F0E2B8;
}

body.dark-mode .nc-tile--epic {
  background: linear-gradient(180deg, #2a2410 0%, var(--nc-surface) 160px);
  border-color: #40350f;
}

/* -------------------------------------------------------------- now card */

.nc-tile--now {
  background: var(--nc-surface-sunk);
  border-style: dashed;
}

body.dark-mode .nc-tile--now { background: var(--nc-surface); }


/* ------------------------------------------------------- discover picker */

/* Denser than .nc-picker's default post-type grid (no tagline per item, so
   three-up fits comfortably even on a 360px phone) - this is a jump list,
   not a decision that needs explaining. */
.nc-picker--discover {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.nc-picker--discover .nc-picker__item {
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: var(--nc-gap) var(--nc-gap-xs);
}

.nc-picker--discover .nc-picker__emoji { font-size: 1.7rem; }
.nc-picker--discover .nc-picker__label { font-size: .82rem; }


/* ==================================================================
   Filter bottom sheet (Stage 11)
   ------------------------------------------------------------------
   Motors and Stays previously showed the full filter form permanently,
   pushing every listing below the fold. It now lives behind a compact
   trigger and opens in the same bottom sheet used elsewhere on the
   platform, closing with Clear / Show results like a real mobile filter.
   ================================================================== */

.nc-filter-bar {
  display: flex;
  align-items: center;
  gap: var(--nc-gap-sm);
  margin: 0 0 var(--nc-gap);
}

/* Stays/Motors: search grouped with the Filter trigger on the far right,
   same principle as .market-toolbar__actions.ms-auto elsewhere. */
.nc-filter-bar--end {
  justify-content: flex-end;
}
.nc-filter-bar--end .market-toolbar__inline-search {
  flex: 0 1 260px;
  min-width: 140px;
}
@media (max-width: 575.98px) {
  .nc-filter-bar--end {
    flex-wrap: wrap;
  }
  .nc-filter-bar--end .market-toolbar__inline-search {
    flex: 1 1 100%;
    order: -1;
  }
}

/* Predictions/Track Record: gameweek picker on one side, outcome pills on
   the other. Wraps to two stacked rows on a phone rather than squeezing the
   select down to nothing. */
.nc-filter-bar--split {
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--nc-gap-sm) var(--nc-gap);
}

.nc-gw-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 1 auto;
}
.nc-gw-filter__label {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--nc-ink-soft);
}
.nc-gw-filter__select {
  min-width: 190px;
  min-height: var(--nc-touch);
  padding: 0 12px;
  border-radius: var(--nc-radius-sm);
  border: 1px solid var(--nc-line);
  background: var(--nc-surface);
  color: var(--nc-ink);
  font-weight: 700;
}
.nc-gw-filter__jump {
  font-size: 13px;
  font-weight: 700;
  color: var(--nc-accent);
  text-decoration: none;
  white-space: nowrap;
}
.nc-gw-filter__jump:hover { text-decoration: underline; }

@media (max-width: 575.98px) {
  .nc-gw-filter { flex: 1 1 100%; }
  .nc-gw-filter__select { flex: 1 1 auto; min-width: 0; }
  .nc-filter-bar--split .nc-pills--filter { width: 100%; }
}

.nc-filter-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--nc-touch);
  padding: 0 16px;
  border: 1px solid var(--nc-line);
  border-radius: 999px;
  background: var(--nc-surface);
  color: var(--nc-ink);
  font-weight: 700;
  font-size: .92rem;
  cursor: pointer;
}

.nc-filter-trigger:hover { border-color: var(--nc-ink-faint); }

.nc-filter-trigger__count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--nc-accent);
  color: var(--nc-accent-ink);
  font-size: .72rem;
  font-weight: 800;
}

.nc-filter-clear {
  font-size: .88rem;
  font-weight: 700;
  color: var(--nc-ink-soft);
}

/* Inside the sheet, the filter form drops its own card chrome - the sheet
   panel already provides the surface, border-radius and shadow. */
.nc-filters--sheet {
  padding: 0;
  margin: 0 0 var(--nc-gap-lg);
  border: 0;
  background: transparent;
  box-shadow: none;
}

.nc-filters__actions--sheet {
  position: sticky;
  bottom: -20px;
  margin: var(--nc-gap) -20px -20px;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  background: var(--nc-surface);
  border-top: 1px solid var(--nc-line);
}


/* --------------------------------------------------------- Keja Rent/Buy */

.hh-tenure {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin: 0 0 var(--nc-gap);
  border-radius: 999px;
  background: var(--nc-surface-sunk);
}

.hh-tenure__tab {
  min-width: 88px;
  min-height: 38px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 700;
  font-size: .9rem;
  color: var(--nc-ink-soft);
  text-decoration: none;
}

.hh-tenure__tab.is-active {
  background: var(--nc-surface);
  color: var(--nc-ink);
  box-shadow: var(--nc-shadow-sm);
}

.hh-tenure__tab:hover { color: var(--nc-ink); text-decoration: none; }

/* Social-marketplace product direction */
.nc-home-hero { padding: clamp(24px, 5vw, 52px); border-radius: 24px; background: linear-gradient(135deg, #102f25 0%, #176b4d 58%, #d7a326 160%); color: #fff; overflow: hidden; position: relative; }
.nc-home-hero__eyebrow { font-size: .75rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #f6d979; }
.nc-home-hero h1 { font-size: clamp(2rem, 5vw, 4rem); line-height: 1; margin: 10px 0 4px; color: #fff; }
.nc-home-hero > p { font-size: clamp(1.15rem, 2vw, 1.55rem); margin: 0 0 24px; color: rgba(255,255,255,.84); }
.nc-home-search { max-width: 760px; display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 14px; padding: 7px 8px 7px 16px; color: #344; }
.nc-home-search input { border: 0; outline: 0; flex: 1; min-width: 0; font-size: 1rem; padding: 10px 0; }
.nc-home-search button { border: 0; border-radius: 10px; background: #e7aa20; color: #17251f; font-weight: 800; padding: 11px 18px; }
.nc-home-hero__actions { display: flex; gap: 10px; margin-top: 16px; }
.nc-market-doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 10px; }
.nc-market-doors a { display: flex; min-height: 100px; flex-direction: column; justify-content: center; align-items: center; gap: 8px; border: 1px solid var(--bs-border-color); background: var(--bs-body-bg); border-radius: 16px; color: inherit; text-decoration: none; transition: .18s ease; }
.nc-market-doors a:hover { transform: translateY(-2px); border-color: #1f805e; box-shadow: 0 8px 24px rgba(20,70,50,.1); }
.nc-market-doors span { font-size: 1.7rem; line-height: 1; }
/* Two-word labels ("House Hunting", "Things To Do") were wrapping into the
   tile's padding and sitting lower than the single-word ones. Give the
   label its own fixed two-line box so every tile lines up whether its name
   wraps or not. */
.nc-market-doors a { padding: 12px 8px; }
.nc-market-doors strong {
  display: flex; align-items: center; justify-content: center;
  min-height: 2.4em; width: 100%;
  font-size: .82rem; line-height: 1.2; text-align: center;
  overflow-wrap: anywhere;
}
.nc-feed-lenses { display: flex; gap: 6px; border-bottom: 1px solid var(--bs-border-color); margin: -4px 0 14px; }
.nc-feed-lenses a { padding: 12px 18px; text-decoration: none; color: var(--bs-secondary-color); font-weight: 700; border-bottom: 3px solid transparent; }
.nc-feed-lenses a.is-active { color: #176b4d; border-color: #176b4d; }
.nc-native-composer { margin-bottom: 16px; }
.nc-social-stream { max-width: 720px; }
.nc-social-stream > .post { margin-bottom: 16px; }
/* __feeds_post.tpl wraps each post in an <li> for the theme's <ul> streams;
   For You's stream is a <section>, so the browser drew a list bullet just
   outside the card's left edge. */
.nc-social-stream > li { list-style: none; }

/* ---------------------------------------- feed cards (For You + Home)

   The social post card in the two main feeds, restyled to the reference the
   user supplied:
   - one rounded, lightly lifted card
   - a round avatar in a dashed ring
   - the photo inset with its own rounded corners, not edge to edge
   - the actions as separate pills carrying their own counts, with Save as a
     bookmark pill on the far right
   Scoped to .nc-feed-cards, so profiles, groups and the single-post page
   keep the standard card. The count spans and the Save pill are rendered by
   __feeds_post.tpl everywhere but only switched on in this scope. */
.post-actions .action-btn__count,
.post-actions .action-btn--save { display: none; }

.nc-feed-cards .post {
  border-radius: 28px;
  background: linear-gradient(180deg, #ffffff 0%, #f7f8ff 100%);
  border: 1px solid rgba(99, 102, 241, .08);
  box-shadow: 0 1px 2px rgba(16, 22, 31, .04), 0 14px 34px -16px rgba(76, 81, 191, .28);
  margin-bottom: 18px;
}
[data-theme="dark"] .nc-feed-cards .post,
body.dark-mode .nc-feed-cards .post { background: var(--nc-surface); border-color: var(--nc-line); box-shadow: var(--nc-shadow); }
body.night-mode .nc-feed-cards .post { background: var(--card-dark-color); border-color: var(--card-dark-divider); }

/* Header: avatar | name, what they did, when | menu */
.nc-feed-cards .post-header { display: flex; align-items: center; gap: 12px; padding: 16px 16px 0; margin-bottom: 12px; }
.nc-feed-cards .post-avatar { display: block; flex: 0 0 auto; padding: 0; }
.nc-feed-cards .post-avatar-picture,
.nc-feed-cards .post-avatar-anonymous {
  width: 48px; height: 48px; min-width: 48px; min-height: 48px; padding: 0;
  border-radius: 50%;
  outline: 2px dashed rgba(99, 102, 241, .45); outline-offset: 3px;
}
.nc-feed-cards .post-avatar-anonymous { display: flex; align-items: center; justify-content: center; }
.nc-feed-cards .post-avatar .online-dot { top: 34px; right: -2px; }
.nc-feed-cards .post-meta { display: block; flex: 1 1 auto; min-width: 0; }
.nc-feed-cards .post-author { font-size: 1rem; font-weight: 800; color: var(--nc-ink); }
.nc-feed-cards .post-title { font-size: .88rem; color: var(--nc-ink-soft); }
.nc-feed-cards .post-time,
.nc-feed-cards .post-time a { font-size: .8rem; color: var(--nc-ink-faint); }
.nc-feed-cards .post-meta .dropdown .dropdown-toggle { border-radius: 50%; color: var(--nc-ink); font-size: 1.1rem; }

.nc-feed-cards .post-text { padding: 0 18px; font-size: .97rem; line-height: 1.55; color: var(--nc-ink-soft); }

/* Media sits inside the card with its own rounded corners. */
.nc-feed-cards .pg_wrapper { margin: 0 16px; border-radius: 22px; overflow: hidden; }
.nc-feed-cards .post-media,
.nc-feed-cards .post-snippet { border-radius: 22px; overflow: hidden; }
/* A single photo fills the frame. Portrait shots used to render at their
   natural height (up to 680px) between grey bars. Landscape photos still
   show whole; taller ones are cropped at 520px and open in full in the
   lightbox. */
.nc-feed-cards .pg_1x img { display: block; width: 100%; height: auto; max-height: min(520px, calc((100vw - 60px) * 1.25)); object-fit: cover; }
/* (min(): on a phone a flat 520px made a portrait photo 1.7x taller than
   the card is wide. Now nothing is taller than 4:5 of the card's width.) */

/* The card's own text padding must not stack on containers that already
   pad (the product body) or deliberately don't (link previews). */
.nc-feed-cards .post-product-container .post-text,
.nc-feed-cards .post-media-meta .post-text { padding: 0; }

/* Product posts: the product page's full body (Details, At a glance, chips,
   Additional Information) made each feed card several screens long, under
   a page-sized title and with no price. In the feed a product reads like
   any other post - title, where, price, description - and the rest is one
   tap away on the product page. */
.nc-feed-price { display: none; }
.nc-feed-cards .post-product-container { padding: 0 18px; }
.nc-feed-cards .post-product-container .hh-detail__title { font-size: 1.1rem; line-height: 1.3; letter-spacing: -.01em; margin: 14px 0 4px; }
.nc-feed-cards .post-product-container .hh-detail__location { font-size: .85rem; color: var(--nc-ink-faint); margin-bottom: 6px; }
.nc-feed-cards .nc-feed-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.nc-feed-cards .nc-feed-price__now { font-size: 1.05rem; font-weight: 800; color: var(--nc-ink); }
.nc-feed-cards .nc-feed-price__was { font-size: .85rem; color: var(--nc-ink-faint); text-decoration: line-through; }
.nc-feed-cards .nc-feed-price__save { font-size: .75rem; font-weight: 800; color: #fff; background: var(--nc-hot); border-radius: 999px; padding: 2px 8px; }
.nc-feed-cards .post-product-container .nc-product-section { display: none; }
.nc-feed-cards .post-product-container .nc-product-section:has(.post-text) { display: block; margin: 0; padding: 0; border: 0; }
.nc-feed-cards .post-product-container .nc-product-section:has(.post-text) > h3 { display: none; }

/* The pill look, shared by the action row and - for signed-out visitors,
   who get no action row - the stats line. */
.nc-feed-cards .post-actions .action-btn,
.nc-feed-cards .post-stats .reactions-stats,
.nc-feed-cards .post-stats > .float-end > span {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 42px; padding: 0 16px; margin: 0;
  border-radius: 999px;
  background: var(--nc-surface);
  border: 1px solid var(--nc-line);
  box-shadow: 0 1px 2px rgba(16, 22, 31, .05), 0 6px 14px -8px rgba(76, 81, 191, .3);
  color: var(--nc-ink); font-size: .9rem; font-weight: 700; line-height: 1;
}
body.night-mode .nc-feed-cards .post-actions .action-btn,
body.night-mode .nc-feed-cards .post-stats .reactions-stats,
body.night-mode .nc-feed-cards .post-stats > .float-end > span { background: var(--card-dark-color); border-color: var(--card-dark-divider); color: #c1d4e3; }

/* Counts moved into the pills, so the separate stats line goes - unless
   there are no pills (signed out), where the stats line becomes the row. */
.nc-feed-cards .post-stats.post-stats--with-actions { display: none; }
.nc-feed-cards .post-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 0; padding: 0 16px 16px; font-size: .85rem; color: var(--nc-ink-soft); }
.nc-feed-cards .post-stats::after { content: none; }
.nc-feed-cards .post-stats > .float-start,
.nc-feed-cards .post-stats > .float-end { float: none !important; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.nc-feed-cards .post-stats .x-hidden { display: none !important; }

.nc-feed-cards .post-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 0 0; padding: 0 16px 16px; border-top: 0; }
.nc-feed-cards .post-actions .action-btn { flex: 0 0 auto; min-width: 42px; }
.nc-feed-cards .post-actions .action-btn:hover { background: var(--nc-surface-sunk); }
body.night-mode .nc-feed-cards .post-actions .action-btn:hover { background: var(--card-dark-hover); }
.nc-feed-cards .post-actions .action-btn .action-icon { width: 20px; height: 20px; margin: 0 !important; }
.nc-feed-cards .post-actions .reaction-btn { gap: 6px; }
/* Icon and number only, as in the reference; the words stay as tooltips
   (title) and, for Save, as the hidden accessible label. */
.nc-feed-cards .post-actions .reaction-btn-name,
.nc-feed-cards .post-actions .action-btn > span:not(.action-btn__count):not(.nc-sr-label) { display: none !important; }
.nc-feed-cards .post-actions .action-btn__count { display: inline; }
.nc-feed-cards .post-actions .action-btn__count:empty { display: none; }
.nc-feed-cards .post-actions .action-btn--save { display: inline-flex; margin-left: auto; width: 42px; padding: 0; }
.nc-feed-cards .post-actions .action-btn--save .fa-bookmark { font-size: 1.05rem; }
.nc-feed-cards .post-actions .action-btn--save.js_unsave-post .fa-bookmark { font-weight: 900; color: var(--nc-accent); }

/* For You's "More to discover" grid mixes three different card components
   (info/event tiles, native product/deal/job cards) - all still had the
   flatter, sharp-cornered treatment from before this pass while the social
   posts above them got the rounded, lifted look. Scoped to .nc-grid--feed
   (for-you.tpl only) so Market/Tea/Deals keep their own denser grids. */
.nc-grid--feed .nc-tile,
.nc-grid--feed .market-product-card {
  border-radius: 22px;
  border-color: rgba(99, 102, 241, .1);
  box-shadow: 0 1px 2px rgba(16, 22, 31, .04), 0 10px 24px -12px rgba(76, 81, 191, .3);
}
.nc-grid--feed .nc-tile:hover,
.nc-grid--feed .market-product-card:hover {
  box-shadow: 0 2px 4px rgba(16, 22, 31, .06), 0 16px 32px -14px rgba(76, 81, 191, .36);
}
[data-theme="dark"] .nc-grid--feed .nc-tile,
[data-theme="dark"] .nc-grid--feed .market-product-card,
body.dark-mode .nc-grid--feed .nc-tile,
body.dark-mode .nc-grid--feed .market-product-card {
  border-color: var(--nc-line);
  box-shadow: var(--nc-shadow);
}
/* The tile's own Save/Share row was two bare ghost icons - give it the same
   small white pill button the social-post actions use. */
.nc-grid--feed .nc-tile__actions .nc-icon-btn {
  background: var(--nc-surface);
  border: 1px solid var(--nc-line);
  box-shadow: 0 1px 2px rgba(16, 22, 31, .05);
}
/* For You's feed column is narrower than any other page's main column - it
   sits between the nav sidebar and the right rail (col-lg-6), about 570px.
   Two tracks in there gave every card a 266px-wide, 560px-tall sliver: a
   question's title and summary had nowhere to go, and a product card meant
   for a 3-up Market grid came out visibly shrunken. So the number of tracks
   follows the width the column really has. */
.nc-grid--feed { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* __feeds_product.tpl/__feeds_job.tpl ship their own Bootstrap column
   wrapper (col-6 col-md-6 col-xl-4, meant for a .row) - inside a CSS grid
   that wrapper's own width rules fight .nc-grid's track sizing. Both the
   .nc-grid-native-item hook AND the template's own column div have to leave
   layout for the card itself to become the grid item: taking out only the
   outer one left `col-xl-4` still in force, so a product card in a 546px
   feed column rendered 182px wide - the visibly shrunken card. */
.nc-grid-native-item,
.nc-grid-native-item > [class*="col-"] { display: contents; }

/* Desktop: the column is at its narrowest exactly where the viewport is
   widest, because both sidebars appear. One card per row, laid out
   horizontally - image beside the text rather than above it - fits more
   information into less height than two shrunken columns did. */
@media (min-width: 992px) {
  .nc-grid--feed { grid-template-columns: 1fr; }

  /* .nc-grid-native-item is display:contents, so its child is the grid item
     for layout - but selectors still see the wrapper as the parent, which is
     why the native product/job cards need their own path here rather than
     matching `.nc-grid--feed > .card`. */
  .nc-grid--feed > .nc-tile,
  .nc-grid--feed .card.product {
    flex-direction: row;
    align-items: stretch;
  }

  /* Fixed-width media rail; the body takes whatever is left. */
  .nc-grid--feed > .nc-tile > .nc-tile__media,
  .nc-grid--feed > .nc-tile > .nc-tile__icon-avatar,
  .nc-grid--feed .card.product > .product-image,
  .nc-grid--feed .card.product > .market-product-card__image {
    flex: none;
    /* Proportional, so the text side keeps a usable width at 992px (where
       the column is only ~456px) without the image shrinking to a stamp on
       a wide screen. */
    width: clamp(160px, 34%, 220px);
    align-self: stretch;
  }
  /* The media rail fills the row's height, so the text side decides how
     tall the card is. The image must therefore contribute no intrinsic
     height of its own - left in flow it would resolve height:100% against
     an auto-height box and fall back to its natural ratio, which is what
     turned a 210px-wide photo into a 373px-tall card. */
  .nc-grid--feed > .nc-tile > .nc-tile__media,
  .nc-grid--feed .card.product > .product-image,
  .nc-grid--feed .card.product > .market-product-card__image {
    position: relative;
    aspect-ratio: auto;
    height: auto;
    min-height: 150px;
    overflow: hidden;
  }
  .nc-grid--feed > .nc-tile > .nc-tile__media > img,
  .nc-grid--feed .card.product > .product-image > img,
  .nc-grid--feed .card.product > .market-product-card__image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* The icon avatar is a circle, not a photo - it keeps its own size and
     just gets centred in the media rail. */
  .nc-grid--feed > .nc-tile > .nc-tile__icon-avatar {
    width: 84px;
    height: 84px;
    align-self: center;
    margin-left: var(--nc-gap);
  }

  .nc-grid--feed > .nc-tile > .nc-tile__body,
  .nc-grid--feed .card.product > .product-info,
  .nc-grid--feed .card.product > .market-product-card__body {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* With a full column of width to work in, a card can afford to actually
     say something - the 3-line clamps were sized for a 266px sliver. */
  .nc-grid--feed > .nc-tile .nc-tile__title { -webkit-line-clamp: 2; }
  .nc-grid--feed > .nc-tile .nc-tile__summary { -webkit-line-clamp: 4; }
  .nc-grid--feed .market-product-card__title {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* The full-bleed link mask is sized off the card, which is now a row -
     that is still correct, it just must not sit above the action buttons. */
  .nc-grid--feed .market-product-card__link-mask { z-index: 0; }
}

/* Tablet: no sidebars, so the main column is the whole page - two real
   cards fit side by side there and the vertical layout is right. */
@media (min-width: 576px) and (max-width: 991.98px) {
  .nc-grid--feed { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) { .nc-market-doors { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 575.98px) {
  .nc-home-hero { border-radius: 0; margin-left: -12px; margin-right: -12px; padding: 28px 18px; }
  .nc-home-search button { padding: 10px 12px; }
  .nc-home-hero__actions { flex-wrap: wrap; }
  .nc-market-doors { display: flex; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; }
  .nc-market-doors a { min-width: 96px; scroll-snap-align: start; }
  .nc-grid--feed { grid-template-columns: 1fr; }
  .nc-feed-lenses { position: sticky; top: 56px; background: var(--bs-body-bg); z-index: 5; }
}

/* --------------------------------------------------------- home feed */

/* One column, real cards stacked top to bottom - a feed reads as a
   sequence of things to scroll past, not a grid of things to compare
   side by side. Reuses _nc_card.tpl as-is (image, price, Save/Share
   already wired up) rather than a thinner list-row treatment. */
.nc-feed-stack { display: flex; flex-direction: column; gap: 14px; }
.nc-feed-stack__label {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--nc-ink-soft, #6b7280);
  padding: 4px 2px;
}
.nc-feed-stack__label a { font-size: .78rem; font-weight: 600; text-transform: none; letter-spacing: normal; }
/* A single full-width feed card can afford a shorter, wider crop than the
   3-up grid's tall 16:9 - keeps one card from towering over the column. */
.nc-feed-stack .nc-tile .nc-media--wide { aspect-ratio: 16 / 8; }

/* The navbar search box in night mode was nearly invisible: style.css sets
   its background to --body-bg-color-dark (#1E252B) with no border, against
   a header background of --header-bg-color-dark (#262D34) - two colors
   about 8-9 RGB units apart. Give it its own visible surface + a real
   border instead of relying on a background difference alone. */
body.night-mode .main-header .search-wrapper .form-control {
  background: #333d47;
  border: 1px solid rgba(255, 255, 255, .14);
}

/* Shared card author/merchant row (_nc_card_author.tpl) - adapted from the
   already-shipped .market-product-card__seller treatment so every card
   type shows "who posted this" the same way. */
.nc-card-author {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  text-decoration: none;
}

.nc-card-author__avatar {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  padding-top: 0;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  border: 2px solid #fff;
  box-shadow: 0 4px 10px rgba(15, 23, 42, .1);
}

.nc-card-author__copy {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.nc-card-author__name {
  font-size: 12px;
  font-weight: 700;
  color: #334155;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

.nc-card-author__label {
  font-size: 10.5px;
  color: #94a3b8;
}

a.nc-card-author:hover .nc-card-author__name {
  color: var(--bs-primary);
}

body.night-mode .nc-card-author__name { color: #e2e8f0; }
body.night-mode .nc-card-author__label { color: #7c8896; }

/* Every page here is still a real, full server-rendered navigation - no
   client-side router - but browsers that support the View Transitions API
   (Chrome/Edge; others just ignore this, no fallback needed) cross-fade
   the old page into the new one instead of a hard flash-to-white, so
   clicking a sidebar link feels like the content is updating in place even
   though a full page load is genuinely happening underneath. Paired with
   the hover-prefetch in nairobicity.js so the next page is often most of
   the way loaded before the transition even starts. */
@view-transition {
  navigation: auto;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}


/* ---------------------------------------------------------- support bot */

.nc-support-bot__launcher {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1050;
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 50%;
  background: var(--nc-accent);
  color: var(--nc-accent-ink);
  font-size: 22px;
  box-shadow: 0 8px 24px rgba(15, 123, 108, .35);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform .18s ease;
}

.nc-support-bot__launcher:hover { transform: translateY(-2px); }

/* Clear of the sitewide bottom nav bar, which sits over the same corner on
   a phone. */
@media (max-width: 767.98px) {
  .nc-support-bot__launcher { bottom: 84px; right: 14px; width: 50px; height: 50px; font-size: 19px; }
}

/* The bottom-right corner is shared property. Sngine docks its chat widget
   there from 992px up (bottom: 0, right: 10px, 340px wide) and pins a chat
   rail down the right edge from 1200px (right: 10px, 65px wide) - the
   support launcher used to sit straight on top of both, which is what made
   those buttons unclickable. It gets its own lane instead: lifted above the
   chat widget's docked head, and shifted inboard of the rail. */
@media (min-width: 992px) {
  .nc-support-bot__launcher { bottom: 56px; }
  .nc-support-bot__panel { bottom: 124px; }
}
@media (min-width: 1200px) {
  .nc-support-bot__launcher { right: 88px; }
  .nc-support-bot__panel { right: 88px; }
}

.nc-support-bot__panel {
  position: fixed;
  right: 18px;
  bottom: 86px;
  z-index: 1051;
  width: min(360px, calc(100vw - 28px));
  max-height: min(560px, calc(100vh - 120px));
  display: flex;
  flex-direction: column;
  background: var(--nc-surface);
  border-radius: var(--nc-radius-lg);
  box-shadow: var(--nc-shadow), 0 20px 50px rgba(0,0,0,.18);
  overflow: hidden;
  border: 1px solid var(--nc-line);
}

@media (max-width: 767.98px) {
  .nc-support-bot__panel {
    right: 8px;
    left: 8px;
    bottom: 148px;
    width: auto;
    max-height: min(70vh, 520px);
  }
}

.nc-support-bot__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 14px 12px;
  /* Deliberately the fixed brand green in both themes, not var(--nc-accent):
     this is a coloured header panel with white text on it, and the lighter
     dark-mode accent would drop the contrast under it. */
  background: linear-gradient(120deg, #0f7b6c, #0a5c50);
  color: #fff;
  flex: 0 0 auto;
}

.nc-support-bot__title { font-weight: 800; font-size: .98rem; }
.nc-support-bot__subtitle { font-size: .78rem; opacity: .9; margin-top: 2px; }

.nc-support-bot__close {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.nc-support-bot__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--nc-surface-sunk);
  min-height: 160px;
}

.nc-support-bot__msg {
  max-width: 86%;
  padding: 9px 12px;
  border-radius: 14px;
  font-size: .88rem;
  line-height: 1.42;
}

.nc-support-bot__msg--bot {
  align-self: flex-start;
  background: var(--nc-surface);
  border: 1px solid var(--nc-line);
  color: var(--nc-ink);
  border-bottom-left-radius: 4px;
}

.nc-support-bot__msg--user {
  align-self: flex-end;
  background: var(--nc-accent);
  color: var(--nc-accent-ink);
  border-bottom-right-radius: 4px;
}

.nc-support-bot__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.nc-support-bot__action {
  border: 1px solid var(--nc-line);
  background: var(--nc-surface);
  color: var(--nc-accent);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
}

.nc-support-bot__action:hover { background: var(--nc-surface-sunk); }

.nc-support-bot__typing { display: flex; gap: 4px; align-items: center; padding: 11px 12px; }
.nc-support-bot__typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--nc-ink-faint);
  animation: nc-support-bot-bounce 1.1s infinite ease-in-out;
}
.nc-support-bot__typing span:nth-child(2) { animation-delay: .15s; }
.nc-support-bot__typing span:nth-child(3) { animation-delay: .3s; }

@keyframes nc-support-bot-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.nc-support-bot__human {
  flex: 0 0 auto;
  padding: 8px 14px;
  border-top: 1px solid var(--nc-line);
  background: var(--nc-surface);
}

.nc-support-bot__human-btn {
  width: 100%;
  border: 1px dashed var(--nc-line);
  background: transparent;
  color: var(--nc-ink-soft);
  border-radius: 10px;
  padding: 7px 10px;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.nc-support-bot__human-btn:hover { color: var(--nc-accent); border-color: var(--nc-accent); }

.nc-support-bot__form {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--nc-line);
  background: var(--nc-surface);
}

.nc-support-bot__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--nc-line);
  border-radius: 999px;
  padding: 0 14px;
  min-height: 40px;
  font-size: .88rem;
  color: var(--nc-ink);
  background: var(--nc-surface-sunk);
}

.nc-support-bot__input:focus { outline: 2px solid var(--nc-accent); outline-offset: 1px; }

.nc-support-bot__send {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--nc-accent);
  color: var(--nc-accent-ink);
  cursor: pointer;
  display: grid;
  place-items: center;
}

.nc-support-bot__send:hover { opacity: .92; }

/* -------------------------------------------------------- explained / topics */

.nc-topic-back {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--nc-ink-soft); font-size: .85rem; font-weight: 700;
  margin-bottom: var(--nc-gap); text-decoration: none;
}
.nc-topic-back:hover { color: var(--nc-ink); }

.nc-topic__status-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.nc-topic__category { font-size: .8rem; font-weight: 700; color: var(--nc-ink-soft); }

.nc-topic-status {
  display: inline-flex; align-items: center; padding: 4px 11px;
  border-radius: 999px; font-size: .72rem; font-weight: 800;
  letter-spacing: .03em; text-transform: uppercase;
}
.nc-topic-status--developing { background: #fff3cd; color: #7a5e08; }
.nc-topic-status--updated { background: #d9e7ff; color: #1c4fa3; }
.nc-topic-status--resolved { background: #d7f3e3; color: #146c43; }
.nc-topic-status--explainer { background: var(--nc-surface-sunk); color: var(--nc-ink-soft); }

.nc-topic__headline {
  font-size: clamp(1.5rem, 4vw, 2.15rem);
  font-weight: 800; line-height: 1.2; margin: 0 0 12px; color: var(--nc-ink);
}

.nc-topic__updated {
  display: flex; align-items: center; gap: 6px;
  font-size: .85rem; color: var(--nc-ink-soft); margin-bottom: var(--nc-gap);
}

.nc-topic__cover { margin-bottom: var(--nc-gap); border-radius: var(--nc-radius); overflow: hidden; }
.nc-topic__cover img { width: 100%; display: block; max-height: 420px; object-fit: cover; }

.nc-topic__latest-banner {
  background: var(--nc-surface-sunk);
  border-left: 4px solid var(--nc-accent);
  border-radius: 0 var(--nc-radius-sm) var(--nc-radius-sm) 0;
  padding: 14px 16px;
  margin-bottom: var(--nc-gap-lg);
}
.nc-topic__latest-label {
  display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--nc-accent); margin-bottom: 4px;
}
.nc-topic__latest-banner p { margin: 0; color: var(--nc-ink); }

.nc-topic__section { margin-bottom: var(--nc-gap-lg); }
.nc-topic__section h2 { font-size: 1.1rem; font-weight: 800; margin: 0 0 10px; color: var(--nc-ink); }
.nc-topic__summary { font-size: 1.02rem; line-height: 1.55; }
.nc-topic__body { line-height: 1.7; color: var(--nc-ink); }

.nc-topic-timeline { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--nc-line); }
.nc-topic-timeline__item { position: relative; padding: 0 0 16px 20px; }
.nc-topic-timeline__item::before {
  content: ""; position: absolute; left: -5px; top: 4px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--nc-accent);
}
.nc-topic-timeline__time { display: block; font-size: .78rem; font-weight: 800; color: var(--nc-ink-soft); margin-bottom: 2px; }
.nc-topic-timeline__text { color: var(--nc-ink); }

.nc-topic-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.nc-topic-facts__item { display: flex; align-items: flex-start; gap: 10px; }
.nc-topic-fact-label {
  flex: 0 0 auto; padding: 3px 10px; border-radius: 999px;
  font-size: .68rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  margin-top: 1px;
}
.nc-topic-fact-label--confirmed { background: #d7f3e3; color: #146c43; }
.nc-topic-fact-label--reported { background: #fff3cd; color: #7a5e08; }
.nc-topic-fact-label--unverified { background: #fde2e2; color: #9c2626; }

.nc-topic-sources { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.nc-topic-sources li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nc-topic-sources a { color: var(--nc-accent); font-weight: 700; text-decoration: none; }
.nc-topic-sources a:hover { text-decoration: underline; }
.nc-topic-sources__date { font-size: .78rem; color: var(--nc-ink-faint); }

.nc-topic__interaction { border-top: 1px solid var(--nc-line); border-bottom: 1px solid var(--nc-line); padding: var(--nc-gap) 0; }

.nc-topic-related__card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px; border-radius: var(--nc-radius-sm);
  background: var(--nc-surface); border: 1px solid var(--nc-line);
  text-decoration: none; color: var(--nc-ink);
}
.nc-topic-related__card:hover { border-color: var(--nc-accent); color: var(--nc-ink); }
.nc-topic-related__label { font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--nc-accent); }
.nc-topic-related__title { font-weight: 700; font-size: .92rem; }

/* explained index */
.nc-topic-list { display: flex; flex-direction: column; gap: var(--nc-gap); }
.nc-topic-list__item {
  display: flex; gap: 14px; padding: 14px;
  border: 1px solid var(--nc-line); border-radius: var(--nc-radius);
  background: var(--nc-surface); text-decoration: none; color: var(--nc-ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.nc-topic-list__item:hover { border-color: var(--nc-accent); box-shadow: var(--nc-shadow-sm); color: var(--nc-ink); }
.nc-topic-list__image { flex: 0 0 auto; width: 120px; height: 90px; border-radius: var(--nc-radius-sm); overflow: hidden; }
.nc-topic-list__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nc-topic-list__body { min-width: 0; flex: 1 1 auto; }
.nc-topic-list__meta { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.nc-topic-list__featured { font-size: .72rem; font-weight: 800; color: #9a5a0c; display: inline-flex; align-items: center; gap: 4px; }
.nc-topic-list__headline { font-size: 1.02rem; font-weight: 800; margin: 0 0 4px; line-height: 1.3; }
.nc-topic-list__summary { font-size: .85rem; color: var(--nc-ink-soft); margin: 0 0 6px; }
.nc-topic-list__updated { font-size: .76rem; color: var(--nc-ink-faint); display: flex; align-items: center; gap: 5px; }

@media (max-width: 560px) {
  .nc-topic-list__image { width: 84px; height: 72px; }
}

.nc-tile__topic-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .78rem; font-weight: 800; color: var(--nc-accent);
  text-decoration: none; margin: 2px 0 8px;
}
.nc-tile__topic-link:hover { text-decoration: underline; }

.nc-tile__reason {
  display: flex; align-items: center; gap: 6px;
  font-size: .72rem; font-weight: 600; color: var(--nc-ink-faint);
  margin: 2px 0 6px;
}
.nc-tile__reason i { color: var(--nc-accent); }

/* -------------------------------------------------------------------- sports */

.nc-track-record-strip {
  display: flex; align-items: center; gap: var(--nc-gap-lg);
  padding: 14px 18px; border-radius: var(--nc-radius);
  background: var(--nc-surface-sunk); margin-bottom: var(--nc-gap-lg);
  flex-wrap: wrap;
}
.nc-track-record-strip__stat { display: flex; flex-direction: column; }
.nc-track-record-strip__value { font-size: 1.3rem; font-weight: 800; color: var(--nc-ink); line-height: 1; }
.nc-track-record-strip__label { font-size: .72rem; color: var(--nc-ink-soft); text-transform: uppercase; letter-spacing: .03em; margin-top: 2px; }
.nc-track-record-strip__link { margin-left: auto; font-size: .85rem; font-weight: 700; color: var(--nc-accent); text-decoration: none; }
.nc-track-record-strip__link:hover { text-decoration: underline; }

.nc-fixture-list { display: flex; flex-direction: column; gap: 8px; }
.nc-fixture {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; border-radius: var(--nc-radius-sm);
  background: var(--nc-surface); border: 1px solid var(--nc-line);
}
.nc-fixture__competition { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--nc-ink-faint); flex: 0 0 100%; }
.nc-fixture__teams { font-weight: 700; color: var(--nc-ink); display: inline-flex; align-items: center; gap: 6px; }
.nc-fixture__time { margin-left: auto; font-size: .82rem; color: var(--nc-ink-soft); }

/* Compact fixture cards, not full-width bars - a round is 10 matches, and
   at one stretched-edge-to-edge strip each, that read as "a whole page per
   game" on a phone. Same auto-fill grid idiom as .nc-prediction-grid, just
   a narrower minimum since a fixture card carries far less than a
   prediction card does. */
.nc-epl-fixture-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr));
  gap: var(--nc-gap-sm);
}
.nc-epl-fixture {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px; border-radius: var(--nc-radius-sm);
  background: var(--nc-surface); border: 1px solid var(--nc-line);
}
.nc-epl-fixture__gw {
  font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
  color: var(--nc-ink-faint); display: flex; align-items: center; gap: 4px;
}
.nc-epl-fixture__match { display: flex; flex-direction: column; gap: 4px; font-weight: 700; color: var(--nc-ink); font-size: .85rem; }
.nc-epl-fixture__side { display: flex; align-items: center; gap: 6px; min-width: 0; }
.nc-epl-fixture__side span:not(.nc-epl-fixture__score) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nc-epl-fixture__badge { width: 18px; height: 18px; object-fit: contain; flex: none; }
.nc-epl-fixture__score { margin-left: auto; font-weight: 800; font-variant-numeric: tabular-nums; flex: none; }
.nc-epl-fixture__time { font-size: .72rem; color: var(--nc-ink-soft); }

/* Trending sports news - a row, not a card grid, since a headline+summary
   reads better wide than squeezed into a tile. */
.nc-sports-trending-list { display: flex; flex-direction: column; gap: 8px; }
.nc-sports-trending-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--nc-radius-sm);
  background: var(--nc-surface); border: 1px solid var(--nc-line);
  text-decoration: none; color: inherit;
  transition: border-color .15s ease;
}
.nc-sports-trending-item:hover { border-color: var(--nc-accent); }
.nc-sports-trending-item__media { flex: none; width: 56px; height: 56px; border-radius: var(--nc-radius-sm); overflow: hidden; }
.nc-sports-trending-item__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nc-sports-trending-item__title {
  font-weight: 700; font-size: .9rem; color: var(--nc-ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.nc-sports-trending-item__summary {
  font-size: .8rem; color: var(--nc-ink-soft);
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.nc-sports-trending-item__meta { font-size: .74rem; color: var(--nc-ink-faint); }

.nc-result-list { display: flex; flex-direction: column; gap: 8px; }
.nc-result {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; border-radius: var(--nc-radius-sm);
  background: var(--nc-surface); border: 1px solid var(--nc-line);
}
.nc-result__main { display: flex; flex-direction: column; gap: 4px; }
.nc-result__competition { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--nc-ink-faint); }
.nc-result__score-row { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--nc-ink); }
.nc-result__score {
  font-variant-numeric: tabular-nums; font-weight: 800; padding: 2px 10px;
  border-radius: 999px; background: var(--nc-surface-sunk); color: var(--nc-ink);
}
.nc-result__outcome {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .78rem; font-weight: 700; text-decoration: none;
  padding: 6px 12px; border-radius: 999px; white-space: nowrap;
}
.nc-result__outcome--pending { background: var(--nc-surface-sunk); color: var(--nc-ink-soft); }
.nc-result__outcome--correct { background: #e1f0e6; color: #1c6b3a; }
.nc-result__outcome--incorrect { background: #fdeaea; color: #97202c; }
.nc-result__outcome--partial { background: #fdf1d6; color: #7c5209; }
.nc-result__outcome:hover { text-decoration: underline; }

.nc-prediction-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--nc-gap); }

.nc-prediction-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 16px; border-radius: var(--nc-radius); border: 1px solid var(--nc-line);
  background: var(--nc-surface); text-decoration: none; color: var(--nc-ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.nc-prediction-card:hover { border-color: var(--nc-accent); box-shadow: var(--nc-shadow-sm); color: var(--nc-ink); }
.nc-prediction-card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nc-prediction-card__competition { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--nc-ink-faint); }
.nc-prediction-card__teams { font-size: 1.05rem; font-weight: 800; }
.nc-prediction-card__type { font-size: .88rem; color: var(--nc-ink-soft); }
.nc-prediction-card__confidence { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.nc-prediction-card__confidence-bar { flex: 1 1 auto; height: 6px; border-radius: 999px; background: var(--nc-line); overflow: hidden; }
.nc-prediction-card__confidence-bar span { display: block; height: 100%; background: var(--nc-accent); border-radius: 999px; }
.nc-prediction-card__confidence span:last-child { flex: 0 0 auto; font-size: .74rem; color: var(--nc-ink-soft); font-weight: 700; }
.nc-prediction-card__result { font-size: .82rem; color: var(--nc-ink-soft); }
.nc-prediction-card__time { font-size: .76rem; color: var(--nc-ink-faint); display: flex; align-items: center; gap: 5px; margin-top: auto; padding-top: 4px; }

.nc-prediction-locked { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 700; color: var(--nc-ink-faint); }
.nc-prediction-locked--open { color: var(--nc-accent); }

.nc-prediction-outcome { padding: 3px 10px; border-radius: 999px; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.nc-prediction-outcome--correct { background: #d7f3e3; color: #146c43; }
.nc-prediction-outcome--incorrect { background: #fde2e2; color: #9c2626; }
.nc-prediction-outcome--partial { background: #fff3cd; color: #7a5e08; }

.nc-prediction-detail__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.nc-prediction-detail__teams { font-size: clamp(1.4rem, 3.5vw, 1.9rem); font-weight: 800; margin: 0 0 8px; }
.nc-prediction-detail__time { font-size: .9rem; color: var(--nc-ink-soft); margin-bottom: var(--nc-gap-lg); display: flex; align-items: center; gap: 6px; }
.nc-prediction-detail__box {
  padding: 18px; border-radius: var(--nc-radius); background: var(--nc-surface-sunk);
  margin-bottom: var(--nc-gap-lg);
}
.nc-prediction-detail__type { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--nc-ink-faint); margin-bottom: 4px; }
.nc-prediction-detail__text { font-size: 1.15rem; font-weight: 800; color: var(--nc-ink); margin-bottom: 8px; }
.nc-prediction-detail__score { font-size: .95rem; color: var(--nc-ink-soft); margin-bottom: 8px; }
.nc-prediction-detail__result {
  padding: 14px 16px; border-radius: var(--nc-radius-sm); margin-bottom: var(--nc-gap-lg);
  border-left: 4px solid var(--nc-ink-faint);
}
.nc-prediction-detail__result--correct { background: #d7f3e3; border-left-color: #146c43; }
.nc-prediction-detail__result--incorrect { background: #fde2e2; border-left-color: #9c2626; }
.nc-prediction-detail__result--partial { background: #fff3cd; border-left-color: #7a5e08; }
.nc-prediction-detail__result-label { font-weight: 800; margin-bottom: 4px; }

.nc-track-record-summary {
  display: flex; align-items: center; gap: var(--nc-gap-lg); flex-wrap: wrap;
  padding: 20px; border-radius: var(--nc-radius); background: var(--nc-surface-sunk);
  margin-bottom: var(--nc-gap-lg);
}
.nc-track-record-summary__accuracy { display: flex; flex-direction: column; }
.nc-track-record-summary__value { font-size: 2.2rem; font-weight: 800; color: var(--nc-accent); line-height: 1; }
.nc-track-record-summary__label { font-size: .8rem; color: var(--nc-ink-soft); margin-top: 4px; max-width: 22ch; }
.nc-track-record-summary__breakdown { display: flex; gap: var(--nc-gap); flex-wrap: wrap; font-size: .9rem; color: var(--nc-ink-soft); }

/* ---------------------------------------------------------------------- fpl */

/* Pulsing dot used wherever a fixture/gameweek is genuinely in progress -
   Sports Home's fixture list, the FPL Companion gameweek head, My FPL's
   points panel. */
.nc-live-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #e0432b; vertical-align: middle;
  animation: nc-live-pulse 1.6s ease-in-out infinite;
}
@keyframes nc-live-pulse {
  0%, 100% { opacity: 1; } 50% { opacity: .35; }
}
@media (prefers-reduced-motion: reduce) {
  .nc-live-dot { animation: none; }
}

/* Sports Home's "Premier League - Gameweek N" round block: a fixture that
   has kicked off or finished shows its score in place, rather than the
   card only ever reading as an upcoming kickoff time. */
.nc-epl-fixture--live { border-color: #e0432b33; background: color-mix(in srgb, #e0432b 6%, var(--nc-surface)); }
.nc-epl-fixture--finished { opacity: .85; }

/* My FPL's "how did this gameweek go" panel - deliberately visually
   distinct from the Team Rating block right below it, which is forward
   -looking advice for the next deadline, not a report on this one. */
.nc-fpl-points-panel {
  padding: 16px 18px; border-radius: var(--nc-radius);
  background: var(--nc-surface); border: 1px solid var(--nc-line);
}
.nc-fpl-points-panel__head {
  display: flex; align-items: center; gap: 8px;
  font-size: .8rem; font-weight: 700; color: var(--nc-ink-soft);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 12px;
}
.nc-fpl-points-panel__row { display: flex; gap: var(--nc-gap-lg); flex-wrap: wrap; }
.nc-fpl-points-panel__stat { display: flex; flex-direction: column; gap: 2px; }
.nc-fpl-points-panel__value { font-size: 2rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.nc-fpl-points-panel__label { font-size: .85rem; font-weight: 700; color: var(--nc-ink-soft); margin-top: 4px; }
.nc-fpl-points-panel__note { font-size: .75rem; color: var(--nc-ink-faint); }
.nc-fpl-points-panel__hint { font-size: .8rem; color: var(--nc-ink-faint); margin: 10px 0 0; }

/* Every player's own points - a collapsible roster under the panel total,
   not a permanently expanded wall the rest of the page has to scroll past. */
.nc-fpl-roster {
  border: 1px solid var(--nc-line); border-radius: var(--nc-radius);
  padding: 4px 16px 12px;
}
.nc-fpl-roster__summary {
  padding: 12px 0; font-weight: 700; cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between;
}
.nc-fpl-roster__summary::-webkit-details-marker { display: none; }
.nc-fpl-roster__summary::after { content: "\25BE"; color: var(--nc-ink-faint); }
.nc-fpl-roster[open] .nc-fpl-roster__summary::after { content: "\25B4"; }
.nc-fpl-roster__group-label {
  font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: var(--nc-ink-faint); margin: 10px 0 6px;
}
.nc-fpl-roster__list { display: flex; flex-direction: column; gap: 4px; }
.nc-fpl-roster__row {
  display: flex; align-items: center; gap: 10px; padding: 6px 4px;
  border-radius: var(--nc-radius-sm); font-size: .88rem;
}
.nc-fpl-roster__row--bench { opacity: .7; }
.nc-fpl-roster__photo { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: none; background: var(--nc-surface-sunk); }
.nc-fpl-roster__name { font-weight: 700; }
.nc-fpl-roster__team { font-size: .76rem; color: var(--nc-ink-faint); margin-left: auto; }
.nc-fpl-roster__points {
  min-width: 26px; text-align: right; font-weight: 800; font-variant-numeric: tabular-nums;
}

/* Post-gameweek review - a real record of what was said before the
   deadline and how it turned out. */
.nc-fpl-review-panel {
  padding: 14px 18px; border-radius: var(--nc-radius);
  background: var(--nc-surface-sunk); border: 1px solid var(--nc-line);
}
.nc-fpl-review-panel__head {
  font-size: .8rem; font-weight: 700; color: var(--nc-ink-soft);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px;
  display: flex; align-items: center; gap: 6px;
}
.nc-fpl-review-panel__verdict { margin: 0 0 10px; font-size: .92rem; line-height: 1.5; }
.nc-fpl-review-panel__transfer {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-size: .88rem; font-weight: 700;
}
.nc-fpl-review-panel__vs { font-weight: 600; color: var(--nc-ink-soft); font-variant-numeric: tabular-nums; }
.nc-fpl-review-panel__outcome {
  margin-left: auto; padding: 2px 10px; border-radius: 999px;
  font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
}
.nc-fpl-review-panel__outcome--excellent, .nc-fpl-review-panel__outcome--good { background: #d7f2df; color: #1c6b3a; }
.nc-fpl-review-panel__outcome--neutral { background: var(--nc-surface); color: var(--nc-ink-soft); border: 1px solid var(--nc-line); }
.nc-fpl-review-panel__outcome--poor, .nc-fpl-review-panel__outcome--miss { background: #f8d7da; color: #97202c; }
body.dark-mode .nc-fpl-review-panel__outcome--excellent, body.dark-mode .nc-fpl-review-panel__outcome--good { background: #163a24; color: #6fd695; }
body.dark-mode .nc-fpl-review-panel__outcome--poor, body.dark-mode .nc-fpl-review-panel__outcome--miss { background: #3a1a1d; color: #f0968b; }

.nc-fpl-gw-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-radius: var(--nc-radius);
  background: var(--nc-surface-sunk); margin-bottom: var(--nc-gap-lg); flex-wrap: wrap; gap: 10px;
}
.nc-fpl-gw-head__title { font-size: 1.2rem; font-weight: 800; }
.nc-fpl-gw-head__deadline { font-size: .85rem; color: var(--nc-ink-soft); margin-top: 2px; }
.nc-fpl-gw-head__sync { font-size: .75rem; color: var(--nc-ink-faint); }
.nc-fpl-countdown {
  display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px;
  background: var(--nc-accent); color: var(--nc-accent-ink); font-weight: 800; font-size: .78rem;
}

.nc-fpl-brief {
  padding: 12px 16px; border-radius: var(--nc-radius-sm); background: var(--nc-surface);
  border: 1px solid var(--nc-line); font-size: .88rem; color: var(--nc-ink-soft); margin-bottom: var(--nc-gap-lg);
}

.nc-fpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--nc-gap); }
.nc-fpl-card { padding: 14px; border-radius: var(--nc-radius-sm); border: 1px solid var(--nc-line); background: var(--nc-surface); }
.nc-fpl-card__player { font-weight: 800; font-size: 1rem; }
.nc-fpl-card__team { font-size: .78rem; color: var(--nc-ink-faint); margin-bottom: 6px; }
.nc-fpl-card__reasoning { font-size: .85rem; color: var(--nc-ink-soft); margin: 0 0 6px; }
.nc-fpl-card__points { font-size: .85rem; color: var(--nc-accent); font-weight: 700; }

.nc-fpl-pick-card {
  display: block; padding: 14px; border-radius: var(--nc-radius-sm);
  border: 1px solid var(--nc-line); background: var(--nc-surface);
  text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s;
}
.nc-fpl-pick-card:hover { border-color: var(--nc-accent); box-shadow: var(--nc-shadow-sm); text-decoration: none; color: inherit; }
.nc-fpl-pick-card__photo {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: top center;
  background: var(--nc-surface-sunk); border: 1px solid var(--nc-line); margin-bottom: 8px;
}
.nc-fpl-pick-card__player { font-weight: 800; font-size: 1rem; }
.nc-fpl-pick-card__team { font-size: .78rem; color: var(--nc-ink-faint); margin-bottom: 6px; display: flex; align-items: center; gap: 5px; }
.nc-fpl-pick-card__score { font-size: .85rem; color: var(--nc-ink-soft); }
.nc-fpl-pick-card__score strong { color: var(--nc-accent); }
.nc-fpl-pick-card__reason { font-size: .78rem; color: var(--nc-ink-soft); margin-top: 4px; }
.nc-fpl-pick-card--sell .nc-fpl-pick-card__score strong { color: #97202c; }
.nc-fpl-pick-card--buy .nc-fpl-pick-card__score strong { color: #1c6b3a; }

/* Real FPL points - season total plus this-gameweek, distinct from our own
   Buy Score / Sell Risk / Captain Score model metrics right below it. */
.nc-fpl-pick-card__points {
  display: flex; align-items: center; gap: 6px;
  font-size: .82rem; color: var(--nc-ink);
}
.nc-fpl-pick-card__points strong { font-size: 1rem; }
.nc-fpl-pick-card__gw-points {
  font-size: .72rem; font-weight: 700; color: #1c6b3a;
  background: #e3f5e8; border-radius: 999px; padding: 1px 8px;
}
body.dark-mode .nc-fpl-pick-card__gw-points { background: #163a24; color: #6fd695; }
.nc-fpl-pick-card__points-unavailable { font-size: .8rem; color: var(--nc-ink-faint); }
.nc-fpl-section-note {
  font-size: .82rem; color: var(--nc-ink-faint); margin: -6px 0 var(--nc-gap);
}

/* Generic collapsible section group - the same disclosure pattern
   .nc-fpl-roster already used for the squad list, reused wherever a
   whole section (not just one card) needs to start collapsed so the
   page does not force every visitor to scroll past every stat. */
.nc-fpl-section-group {
  border: 1px solid var(--nc-line); border-radius: var(--nc-radius);
  padding: 4px 16px 16px; margin-bottom: var(--nc-gap-lg);
}
.nc-fpl-section-group__summary {
  padding: 14px 0; font-weight: 700; font-size: 1.05rem; cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.nc-fpl-section-group__summary::-webkit-details-marker { display: none; }
.nc-fpl-section-group__summary::after { content: "\25BE"; color: var(--nc-ink-faint); font-weight: 400; }
.nc-fpl-section-group[open] .nc-fpl-section-group__summary::after { content: "\25B4"; }
.nc-fpl-section-group__hint {
  font-size: .78rem; font-weight: 400; color: var(--nc-ink-faint); margin-left: auto; margin-right: 10px;
}
.nc-fpl-section-group > .nc-fpl-grid:first-of-type,
.nc-fpl-section-group > div > .nc-fpl-grid:first-of-type { margin-top: 0; }

.nc-fpl-glossary {
  border: 1px solid var(--nc-line); border-radius: var(--nc-radius);
  padding: 4px 16px 4px; margin-bottom: var(--nc-gap-lg); background: var(--nc-surface);
}
.nc-fpl-glossary__summary {
  padding: 12px 0; font-weight: 700; cursor: pointer; list-style: none; font-size: .9rem;
  display: flex; align-items: center; gap: 8px; justify-content: space-between;
}
.nc-fpl-glossary__summary::-webkit-details-marker { display: none; }
.nc-fpl-glossary__summary::after { content: "\25BE"; color: var(--nc-ink-faint); }
.nc-fpl-glossary[open] .nc-fpl-glossary__summary::after { content: "\25B4"; }
.nc-fpl-glossary__list { margin: 0 0 14px; font-size: .84rem; }
.nc-fpl-glossary__list dt { font-weight: 700; margin-top: 10px; }
.nc-fpl-glossary__list dt:first-child { margin-top: 0; }
.nc-fpl-glossary__list dd { margin: 2px 0 0; color: var(--nc-ink-soft); }

.nc-fpl-hub-cta {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 18px; border-radius: var(--nc-radius); margin-bottom: var(--nc-gap-lg);
  background: var(--nc-surface); border: 1px solid var(--nc-line);
}
.nc-fpl-hub-cta__icon {
  width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%;
  background: var(--nc-surface-sunk); color: var(--nc-accent);
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
.nc-fpl-hub-cta__body { flex: 1 1 220px; min-width: 0; }
.nc-fpl-hub-cta__title { font-weight: 700; font-size: .92rem; }
.nc-fpl-hub-cta__text { font-size: .82rem; color: var(--nc-ink-soft); margin-top: 2px; }

/* Small glanceable facts (Team Rating / Free Transfers / This Gameweek) as
   their own distinct cards rather than paragraphs - the point is to be
   skimmed in a second, not read. */
.nc-fpl-stat-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--nc-gap); margin-bottom: var(--nc-gap);
}
.nc-fpl-stat-card {
  padding: 14px 16px; border: 1px solid var(--nc-line); border-radius: var(--nc-radius);
  background: var(--nc-surface); display: flex; flex-direction: column; gap: 4px;
}
.nc-fpl-stat-card__value { font-size: 1.6rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: var(--nc-ink); }
.nc-fpl-stat-card__value span { font-size: 1rem; color: var(--nc-ink-faint); font-weight: 700; }
.nc-fpl-stat-card__label { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--nc-ink-soft); }
.nc-fpl-stat-card__note { font-size: .78rem; color: var(--nc-ink-faint); }
.nc-fpl-stat-card__note--above { color: #1c6b3a; font-weight: 700; }
.nc-fpl-stat-card__note--below { color: #97202c; font-weight: 700; }
body.dark-mode .nc-fpl-stat-card__note--above { color: #6fd695; }
body.dark-mode .nc-fpl-stat-card__note--below { color: #f0968b; }

/* The hero heading above the Suggested Lineup - deliberately the biggest,
   plainest heading on the page, so the lineup reads as THE answer rather
   than one section among many equally-weighted ones. */
.nc-fpl-hero-head { margin: 0 0 2px; font-size: 1.4rem; font-weight: 800; color: var(--nc-ink); letter-spacing: -.01em; }
.nc-fpl-hero-sub { font-size: .86rem; color: var(--nc-ink-soft); margin-bottom: var(--nc-gap); }

.nc-fpl-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: .8rem;
  padding: 6px 12px; border-radius: 999px; background: var(--nc-surface-sunk);
  color: var(--nc-ink-soft); margin: 2px 0 var(--nc-gap-lg);
}

.nc-fpl-points-panel__compare {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .82rem; font-weight: 700; border-radius: 999px;
  padding: 4px 12px; margin-top: 12px;
}
.nc-fpl-points-panel__compare--above { background: #e3f5e8; color: #1c6b3a; }
.nc-fpl-points-panel__compare--below { background: #f8d7da; color: #97202c; }
.nc-fpl-points-panel__compare--even { background: var(--nc-surface); color: var(--nc-ink-soft); border: 1px solid var(--nc-line); }
body.dark-mode .nc-fpl-points-panel__compare--above { background: #163a24; color: #6fd695; }
body.dark-mode .nc-fpl-points-panel__compare--below { background: #3a1a1d; color: #f0968b; }

.nc-fpl-history { display: flex; flex-direction: column; gap: 6px; }
.nc-fpl-history__row {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 14px; border-radius: var(--nc-radius-sm); background: var(--nc-surface); border: 1px solid var(--nc-line);
  font-size: .88rem;
}

/* -------------------------------------------------- projection & captaincy */

/* "Are we going to beat the average" - the one comparison a manager
   actually cares about, given the width of a headline rather than a line
   of prose buried in a paragraph. */
.nc-fpl-projection-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--nc-gap);
  padding: 14px 18px; border: 1px solid var(--nc-line); border-radius: var(--nc-radius);
  background: var(--nc-surface);
}
.nc-fpl-projection-bar__stat { display: flex; flex-direction: column; gap: 2px; min-width: 88px; }
.nc-fpl-projection-bar__value {
  font-size: 1.5rem; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--nc-ink);
}
.nc-fpl-projection-bar__label {
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--nc-ink-soft);
}
.nc-fpl-projection-bar__verdict {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: .84rem; font-weight: 700; border-radius: 999px; padding: 6px 14px;
  background: var(--nc-surface-sunk); color: var(--nc-ink-soft);
}
.nc-fpl-projection-bar__verdict.is-above { background: #e3f5e8; color: #1c6b3a; }
.nc-fpl-projection-bar__verdict.is-below { background: #f8d7da; color: #97202c; }
body.dark-mode .nc-fpl-projection-bar__verdict.is-above { background: #163a24; color: #6fd695; }
body.dark-mode .nc-fpl-projection-bar__verdict.is-below { background: #3a1a1d; color: #f0968b; }

/* Several captain options that differ in KIND, side by side, so the choice
   between "protect a lead" and "chase one" is visible at a glance rather
   than being made for the manager. */
.nc-fpl-captain-options {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--nc-gap);
}
.nc-fpl-captain-option {
  padding: 12px 14px; border: 1px solid var(--nc-line); border-radius: var(--nc-radius);
  background: var(--nc-surface); display: flex; flex-direction: column; gap: 5px;
}
/* Only the headline pick is emphasised - the rest are genuine alternatives,
   not lesser versions of it. */
.nc-fpl-captain-option--best { border-color: var(--nc-ink); }
.nc-fpl-captain-option__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.nc-fpl-captain-option__kind {
  font-size: 10px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--nc-ink-soft);
}
.nc-fpl-captain-option__proj {
  font-size: .8rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--nc-ink);
}
.nc-fpl-captain-option__player {
  font-size: 1.02rem; font-weight: 800; color: var(--nc-ink);
  display: flex; align-items: center; gap: 6px;
}
.nc-fpl-captain-option__why { font-size: .76rem; color: var(--nc-ink-soft); line-height: 1.35; }

/* ------------------------------------------------------- transfer options */

/* Points gained is the headline of a transfer card, because points are the
   only unit that can be weighed against the 4-point cost of a hit. */
.nc-transfer-card__gain { font-size: .95rem; font-weight: 800; color: #1c6b3a; font-variant-numeric: tabular-nums; }
body.dark-mode .nc-transfer-card__gain { color: #6fd695; }
.nc-transfer-card__warn { color: #97202c; font-weight: 700; }
body.dark-mode .nc-transfer-card__warn { color: #f0968b; }

.nc-transfer-card__notes { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
.nc-transfer-card__note-pill {
  font-size: .7rem; padding: 2px 9px; border-radius: 999px;
  background: var(--nc-surface-sunk); color: var(--nc-ink-soft);
}

/* The case for KEEPING the outgoing player, shown next to the suggestion to
   drop him rather than hidden - the engine weighs it, so the manager gets
   to weigh it too. */
.nc-transfer-card__hold {
  font-size: .76rem; color: var(--nc-ink-soft); margin-top: 4px;
  padding-top: 6px; border-top: 1px dashed var(--nc-line);
}

.nc-transfer-alts { display: flex; flex-direction: column; gap: 4px; padding-left: 12px; }
.nc-transfer-alt {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-size: .8rem; color: var(--nc-ink-soft);
  padding: 7px 12px; border-radius: var(--nc-radius-sm);
  background: var(--nc-surface-sunk);
}
.nc-transfer-alt__name { font-weight: 700; color: var(--nc-ink); }
.nc-transfer-alt__gain { font-weight: 700; font-variant-numeric: tabular-nums; }
.nc-transfer-alt__note { margin-left: auto; font-size: .74rem; color: var(--nc-ink-faint); }

/* Transfer urgency, next to the transfers themselves rather than buried in
   a collapsed panel - it is the reason to read the section. */
.nc-fpl-urgency { font-weight: 800; }
.nc-fpl-urgency--critical, .nc-fpl-urgency--high { color: #97202c; }
.nc-fpl-urgency--medium { color: #7c5209; }
body.dark-mode .nc-fpl-urgency--critical, body.dark-mode .nc-fpl-urgency--high { color: #f0968b; }

/* ------------------------------------------------------ evidence on cards */

/* The short, factual notes behind a pick ("started 5 in a row", "3.1 pts
   better at home"). These replace the paragraphs of hedged prose the cards
   used to carry: same information, a quarter of the reading. */
.nc-fpl-pick-card__notes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.nc-fpl-pick-card__note {
  font-size: .68rem; padding: 2px 8px; border-radius: 999px;
  background: var(--nc-surface-sunk); color: var(--nc-ink-soft);
}
.nc-fpl-pick-card__proj {
  font-size: .78rem; font-weight: 800; color: var(--nc-ink);
  font-variant-numeric: tabular-nums; margin-top: 3px;
}
.nc-fpl-pick-card__proj span { font-weight: 600; color: var(--nc-ink-faint); }

/* Price movement - synced all along, never once shown. A rise or fall is
   one of the few things every manager checks daily. */
.nc-fpl-price-move { font-size: .72rem; font-weight: 700; }
.nc-fpl-price-move--up { color: #1c6b3a; }
.nc-fpl-price-move--down { color: #97202c; }
body.dark-mode .nc-fpl-price-move--up { color: #6fd695; }
body.dark-mode .nc-fpl-price-move--down { color: #f0968b; }

/* Blank / double gameweek flags. Computed by the fixture engine from the
   real fixture table since day one, and never surfaced until now - they are
   the highest-value fixture facts a manager can be told. */
.nc-fpl-gw-flag {
  display: inline-block; font-size: .68rem; font-weight: 800; letter-spacing: .03em;
  padding: 2px 8px; border-radius: 999px; text-transform: uppercase;
}
.nc-fpl-gw-flag--blank { background: #f8d7da; color: #97202c; }
.nc-fpl-gw-flag--double { background: #e3f5e8; color: #1c6b3a; }
body.dark-mode .nc-fpl-gw-flag--blank { background: #3a1a1d; color: #f0968b; }
body.dark-mode .nc-fpl-gw-flag--double { background: #163a24; color: #6fd695; }

/* ------------------------------------------------- the call on a prediction */

/* The structured pick, given the weight the prose used to take. A card whose
   first line is "Both Teams To Score: goals at both ends in a tight one"
   buries the actual call inside a sentence; this states it and lets the
   write-up support it. */
.nc-prediction-card__pick {
  font-size: 1.02rem; font-weight: 800; color: var(--nc-ink); line-height: 1.25;
}
.nc-prediction-card__blurb { font-size: .84rem; color: var(--nc-ink-soft); margin-top: 2px; }
.nc-prediction-detail__pick {
  font-size: 1.5rem; font-weight: 800; color: var(--nc-ink);
  line-height: 1.2; margin-bottom: 4px; letter-spacing: -.01em;
}

/* ------------------------------------------------------ form and head-to-head */

.nc-form-compare {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--nc-gap);
}
.nc-form-side {
  border: 1px solid var(--nc-line); border-radius: var(--nc-radius);
  background: var(--nc-surface); padding: 14px 16px;
}
.nc-form-side__name { font-weight: 800; color: var(--nc-ink); margin-bottom: 8px; }
.nc-form-side__meta { font-size: .78rem; color: var(--nc-ink-soft); margin-top: 6px; }

.nc-form-run { display: flex; gap: 5px; }
/* W/D/L pips. Colour carries the meaning, but the letter is always present -
   a run of coloured dots alone is unreadable to anyone who cannot separate
   the greens from the reds. */
.nc-form-pip {
  width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 800; color: #fff; flex-shrink: 0;
}
.nc-form-pip--w { background: #1c6b3a; }
.nc-form-pip--d { background: #8a8f98; }
.nc-form-pip--l { background: #97202c; }

.nc-form-list { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 6px; }
.nc-form-list li {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: .82rem; color: var(--nc-ink-soft);
  padding: 6px 10px; border-radius: var(--nc-radius-sm); background: var(--nc-surface-sunk);
}
.nc-form-list li strong { color: var(--nc-ink); font-variant-numeric: tabular-nums; }

.nc-h2h-summary {
  display: flex; gap: var(--nc-gap); align-items: stretch;
  border: 1px solid var(--nc-line); border-radius: var(--nc-radius);
  background: var(--nc-surface); padding: 14px 16px;
}
.nc-h2h-summary__stat { flex: 1 1 0; text-align: center; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nc-h2h-summary__value {
  font-size: 1.6rem; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--nc-ink);
}
.nc-h2h-summary__label {
  font-size: .74rem; color: var(--nc-ink-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ------------------------------------------------------------- live scores */

/* A match actually in play. The dot pulses, but the word "LIVE" is there
   too - motion alone is not a label, and it is invisible to anyone running
   reduced motion. */
.nc-live-strip { display: flex; flex-direction: column; gap: 8px; }
.nc-live-match {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; border-radius: var(--nc-radius-sm);
  background: var(--nc-surface); border: 1px solid var(--nc-line);
  font-size: .88rem;
}
.nc-live-match__badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #97202c;
}
body.dark-mode .nc-live-match__badge { color: #f0968b; }
.nc-live-match__dot {
  width: 7px; height: 7px; border-radius: 50%; background: currentColor;
  animation: nc-live-pulse 1.6s ease-in-out infinite;
}
@keyframes nc-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) {
  .nc-live-match__dot { animation: none; }
}
.nc-live-match__teams { flex: 1 1 auto; min-width: 0; }
.nc-live-match__score {
  font-weight: 800; font-variant-numeric: tabular-nums; font-size: 1.05rem; color: var(--nc-ink);
}
.nc-live-match__comp { font-size: .74rem; color: var(--nc-ink-faint); }

/* Live scoreline on a prediction detail page. */
/* Uses the real theme tokens (--nc-line / --nc-surface-sunk / --nc-ink-soft).
   --nc-border, --nc-accent-soft and --nc-muted were never defined, so these
   always fell back to hard-coded light colours - a pale chip under light
   text in dark mode. */
.nc-prediction-live{display:inline-flex;align-items:center;gap:10px;margin:10px 0 4px;padding:6px 12px;
  border:1px solid var(--nc-line);border-radius:999px;background:var(--nc-surface);}
.nc-prediction-live__state{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;color:#c0392b;}
.nc-prediction-live__score{font-size:1.05rem;font-weight:700;font-variant-numeric:tabular-nums;}

/* Bookmaker odds shown alongside a pick. */
.nc-odds-chip{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;
  background:var(--nc-surface-sunk);border:1px solid var(--nc-line);color:var(--nc-ink);
  font-size:.78rem;font-weight:700;font-variant-numeric:tabular-nums;}
.nc-prediction-detail__implied{margin-top:6px;font-size:.82rem;color:var(--nc-ink-soft);}

/* ------------------------------------------------------------- onboarding */

.nc-onboarding { max-width: 640px; margin: 0 auto; }
.nc-onboarding__head { text-align: center; margin-bottom: var(--nc-gap-lg); }
.nc-onboarding__title { font-size: 1.6rem; font-weight: 800; margin: 0 0 6px; }
.nc-onboarding__tagline { color: var(--nc-ink-soft); font-size: .92rem; margin: 0; }

.nc-onboarding__form {
  background: var(--nc-surface); border: 1px solid var(--nc-line); border-radius: var(--nc-radius-lg);
  padding: 20px; display: flex; flex-direction: column; gap: var(--nc-gap-lg);
}
.nc-onboarding__section { display: flex; flex-direction: column; gap: 10px; }
.nc-onboarding__label { font-weight: 700; font-size: .92rem; }
.nc-onboarding__row { display: flex; gap: 10px; flex-wrap: wrap; }
.nc-onboarding__row .form-control { flex: 1 1 200px; }

.nc-chip-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.nc-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--nc-line);
  background: var(--nc-surface-sunk); font-size: .85rem; font-weight: 600; color: var(--nc-ink-soft);
  cursor: pointer; user-select: none; transition: background .15s, border-color .15s, color .15s;
}
.nc-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.nc-chip:has(input:checked) {
  background: var(--nc-accent); border-color: var(--nc-accent); color: var(--nc-accent-ink);
}
.nc-chip--sm { padding: 6px 12px; font-size: .8rem; }
/* The real checkbox is visually hidden inside the chip, so without this a
   keyboard user tabbing through the interests had no idea where they were. */
.nc-chip:has(input:focus-visible) { outline: 2px solid var(--nc-accent); outline-offset: 2px; }

/* Two equal buttons that wrap rather than overflow - at 360px "Save and
   continue" used to run off the card's right edge. */
.nc-onboarding__actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; }
.nc-onboarding__actions .btn { flex: 1 1 140px; white-space: normal; }

/* /welcome has no sg-offcanvas-mainbar, so it missed that column's
   clearance for the fixed floating back button, which sat on the first
   letters of the heading. */
@media (max-width: 767.98px) {
  .nc-onboarding { padding-top: 40px; }
}
/* On a phone two half-width buttons wrapped their labels onto three lines;
   stack them full width instead, the primary action on top. */
@media (max-width: 575.98px) {
  .nc-onboarding__actions { flex-direction: column-reverse; }
  .nc-onboarding__actions .btn { flex: none; width: 100%; }
}

/* ------------------------------------------------------- FPL Companion */

.nc-fpl-connect-note {
  padding: 10px 14px; border-radius: var(--nc-radius-sm); background: var(--nc-surface-sunk);
  color: var(--nc-ink-soft); font-size: .82rem; margin-bottom: var(--nc-gap-lg);
  display: flex; align-items: center; gap: 8px;
}

.nc-team-rating {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  padding: 20px; border-radius: var(--nc-radius); background: var(--nc-surface);
  border: 1px solid var(--nc-line); margin-bottom: var(--nc-gap);
}
.nc-team-rating__score { font-size: 2.4rem; font-weight: 800; color: var(--nc-accent); line-height: 1; }
.nc-team-rating__score span { font-size: 1.1rem; color: var(--nc-ink-faint); font-weight: 700; }
.nc-team-rating__band { font-size: 1rem; font-weight: 700; color: var(--nc-ink-soft); margin-top: 4px; }
.nc-team-rating__meta { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--nc-ink-soft); }

.nc-fpl-gw-report {
  padding: 20px; border-radius: var(--nc-radius); background: var(--nc-surface);
  border: 1px solid var(--nc-line); display: flex; flex-direction: column; gap: 12px;
}
.nc-fpl-gw-report__headline { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.nc-fpl-gw-report__score { font-size: 2.4rem; font-weight: 800; color: var(--nc-accent); line-height: 1; }
.nc-fpl-gw-report__score span { font-size: 1.1rem; color: var(--nc-ink-faint); font-weight: 700; }
.nc-fpl-gw-report__meta { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--nc-ink-soft); }
.nc-fpl-gw-report__row { font-size: .88rem; padding-top: 10px; border-top: 1px solid var(--nc-line); display: flex; align-items: center; gap: 8px; }
.nc-fpl-gw-report__row--best { color: #1c6b3a; }
.nc-fpl-gw-report__row--worst { color: #97202c; }
.nc-fpl-gw-report__row a { color: inherit; text-decoration: underline; }

.nc-rating-breakdown { display: flex; flex-direction: column; gap: 10px; }
.nc-rating-breakdown__row { display: grid; grid-template-columns: 160px 1fr 40px; align-items: center; gap: 10px; }
.nc-rating-breakdown__label { font-size: .82rem; color: var(--nc-ink-soft); }
.nc-rating-breakdown__bar { height: 8px; border-radius: 999px; background: var(--nc-surface-sunk); overflow: hidden; }
.nc-rating-breakdown__bar span { display: block; height: 100%; background: var(--nc-accent); border-radius: 999px; }
.nc-rating-breakdown__value { font-size: .8rem; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .nc-rating-breakdown__row { grid-template-columns: 110px 1fr 36px; }
}

/* Simple, single style throughout - no colour-coding by state (primary /
   marginal / alternative / roll all look the same card, small and plain);
   the words say what changed, not the colour. */
.nc-transfer-card {
  padding: 10px 14px; border-radius: var(--nc-radius-sm); background: var(--nc-surface);
  border: 1px solid var(--nc-line); display: flex; flex-direction: column; gap: 3px;
  font-size: .86rem;
}
.nc-transfer-card__label {
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--nc-ink-faint);
}
.nc-transfer-card__move { font-weight: 700; display: flex; align-items: center; gap: 8px; }
.nc-transfer-card__meta { font-size: .78rem; color: var(--nc-ink-soft); }
.nc-transfer-card__note { font-size: .76rem; color: var(--nc-ink-faint); }

/* Still used by the Last Gameweek Review panel's transfer-out/in line. */
.nc-transfer-suggestion__out { color: #97202c; }
.nc-transfer-suggestion__in { color: #1c6b3a; }

/* How many free transfers the squad actually has, next to the section
   title - the reason there might be two of these below, not one. */
.nc-fpl-free-transfers {
  font-size: .78rem; font-weight: 700; color: var(--nc-ink-soft);
  background: var(--nc-surface-sunk); border-radius: 999px; padding: 3px 12px;
}

/* "Transfer 1" / "Transfer 2" - only shown at all once there is more than
   one to tell apart. */
.nc-transfer-suggestion__slot-label {
  font-size: .8rem; font-weight: 800; color: var(--nc-ink); margin-bottom: 6px;
}

.nc-fpl-player-head {
  display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  margin: 10px 0 16px;
}
.nc-fpl-player-head__photo {
  width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: top center;
  background: var(--nc-surface-sunk); border: 1px solid var(--nc-line); flex-shrink: 0;
}
.nc-fpl-player-head__body { flex: 1 1 auto; min-width: 0; }
.nc-fpl-player-head__name { font-size: 1.7rem; font-weight: 800; margin: 0; }
.nc-fpl-player-head__meta { color: var(--nc-ink-soft); font-size: .88rem; margin-top: 2px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nc-fpl-team-badge { width: 18px; height: 18px; object-fit: contain; vertical-align: middle; }
.nc-fpl-player-head__status {
  padding: 6px 14px; border-radius: 999px; font-weight: 700; font-size: .82rem;
  background: var(--nc-surface-sunk); color: var(--nc-ink-soft);
}
.nc-fpl-player-head__status--a { background: #e1f0e6; color: #1c6b3a; }
.nc-fpl-player-head__status--d { background: #fdf1d6; color: #7c5209; }
.nc-fpl-player-head__status--i, .nc-fpl-player-head__status--s, .nc-fpl-player-head__status--u { background: #fdeaea; color: #97202c; }

.nc-fpl-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.nc-fpl-stat {
  padding: 12px; border-radius: var(--nc-radius-sm); background: var(--nc-surface);
  border: 1px solid var(--nc-line); text-align: center;
}
.nc-fpl-stat__value { display: block; font-size: 1.3rem; font-weight: 800; }
.nc-fpl-stat__label { display: block; font-size: .72rem; color: var(--nc-ink-faint); text-transform: uppercase; letter-spacing: .03em; margin-top: 2px; }

.nc-fpl-score-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.nc-fpl-score-card {
  padding: 14px; border-radius: var(--nc-radius-sm); background: var(--nc-surface);
  border: 1px solid var(--nc-line); text-align: center;
}
.nc-fpl-score-card__label { font-size: .74rem; color: var(--nc-ink-faint); text-transform: uppercase; letter-spacing: .03em; }
.nc-fpl-score-card__value { font-size: 1.4rem; font-weight: 800; color: var(--nc-accent); margin-top: 4px; }
.nc-fpl-score-card--rec .nc-fpl-score-card__value { font-size: 1.1rem; }

.nc-fpl-reason-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.nc-fpl-reason-list li { padding: 8px 12px; border-radius: var(--nc-radius-sm); font-size: .85rem; }
.nc-fpl-reason-list__item--positive { background: #e1f0e6; color: #1c6b3a; }
.nc-fpl-reason-list__item--risk { background: #fdeaea; color: #97202c; }

.nc-fdr-badge { padding: 2px 8px; border-radius: 999px; font-weight: 700; color: #fff; }
.nc-fdr-badge--1, .nc-fdr-badge--2 { background: #1c6b3a; }
.nc-fdr-badge--3 { background: #7c5209; }
.nc-fdr-badge--4, .nc-fdr-badge--5 { background: #97202c; }

.nc-fpl-connect-card {
  max-width: 480px; margin: 30px auto; padding: 28px; text-align: center;
  border-radius: var(--nc-radius-lg); background: var(--nc-surface); border: 1px solid var(--nc-line);
}
.nc-fpl-connect-card__icon {
  width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 50%;
  background: var(--nc-surface-sunk); color: var(--nc-accent);
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
}
.nc-fpl-connect-card__title { font-size: 1.3rem; font-weight: 800; margin: 0 0 8px; }
.nc-fpl-connect-card__body { color: var(--nc-ink-soft); font-size: .9rem; margin: 0 0 18px; }
.nc-fpl-connect-card__form { display: flex; gap: 8px; margin-bottom: 14px; }
.nc-fpl-connect-card__form input { flex: 1; }
.nc-fpl-connect-card__hint { font-size: .76rem; color: var(--nc-ink-faint); text-align: left; margin: 0; }

/* Scraped-job detail sections: responsibilities, requirements, benefits -
   whatever the source posting actually stated. */
.nc-job-section__title {
  margin: 0 0 6px;
  font-size: .95rem;
  font-weight: 800;
  color: var(--nc-ink);
}
.nc-job-section__body {
  font-size: .9rem;
  line-height: 1.6;
  color: var(--nc-ink-soft);
  white-space: normal;
}

/* ------------------------------------------- admin fixture picker (cards)

   Publishing a prediction used to start with a <select> of hand-typed
   matches. These are the real fixtures for a gameweek, straight off the
   synced Premier League calendar - the whole round at a glance, with the
   ones already predicted or already kicked off visibly out of play. */
.nc-fixture-picker__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.nc-fixture-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  gap: var(--nc-gap-sm);
}

.nc-fixture-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--nc-line);
  border-radius: var(--nc-radius);
  background: var(--nc-surface);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.nc-fixture-card:hover { border-color: var(--nc-accent); box-shadow: var(--nc-shadow-sm); }

/* The radio is the control; the card is its label. Kept reachable by
   keyboard rather than display:none'd out of the tab order. */
.nc-fixture-card input[type="radio"] {
  position: absolute;
  top: 10px;
  right: 10px;
  margin: 0;
}
.nc-fixture-card:focus-within { border-color: var(--nc-accent); box-shadow: 0 0 0 3px rgba(15, 123, 108, .18); }
.nc-fixture-card:has(input:checked) {
  border-color: var(--nc-accent);
  background: var(--nc-surface-sunk);
  box-shadow: 0 0 0 1px var(--nc-accent) inset;
}

/* Already covered: still selectable (a match can carry one prediction per
   type), just visibly accounted for - "which of this round have we
   covered?" is the question an editor is actually asking. */
.nc-fixture-card.is-taken { border-style: dashed; }

/* Kicked off: genuinely out of play, and the server refuses it too. */
.nc-fixture-card.is-started { opacity: .5; cursor: default; }
.nc-fixture-card.is-started:hover { border-color: var(--nc-line); box-shadow: none; }

.nc-fixture-card__gw {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--nc-ink-faint);
}
.nc-fixture-card__teams {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .9rem;
}
.nc-fixture-card__side {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.nc-fixture-card__side img { width: 20px; height: 20px; object-fit: contain; flex: none; }
.nc-fixture-card__v { color: var(--nc-ink-faint); font-size: .78rem; }

/* FPL's own 1-5 fixture difficulty rating, in its own colours - the number
   is the real synced one, not a judgement of ours. */
.nc-fixture-card__fdr {
  display: inline-grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  color: #0b3b2e;
  background: var(--nc-surface-sunk);
}
.nc-fixture-card__fdr--1, .nc-fixture-card__fdr--2 { background: #C7F6C9; }
.nc-fixture-card__fdr--3 { background: #E9E9E9; color: #333; }
.nc-fixture-card__fdr--4 { background: #FF9E9E; color: #4a1010; }
.nc-fixture-card__fdr--5 { background: #E4526B; color: #fff; }

.nc-fixture-card__foot {
  font-size: .76rem;
  color: var(--nc-ink-soft);
  font-variant-numeric: tabular-nums;
}

/* Best XI budget receipt - the three numbers that prove the suggested XI is
   one you could actually build inside FPL's 100.0m. */
.nc-fpl-budget {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nc-gap-sm) var(--nc-gap);
  padding: 14px 16px;
  margin-bottom: var(--nc-gap-sm);
  border: 1px solid var(--nc-line);
  border-radius: var(--nc-radius);
  background: var(--nc-surface);
}
.nc-fpl-budget__stat { display: flex; flex-direction: column; gap: 2px; }
.nc-fpl-budget__value {
  font-size: 1.05rem; font-weight: 800; color: var(--nc-ink);
  font-variant-numeric: tabular-nums;
}
.nc-fpl-budget__label {
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--nc-ink-soft);
}
.nc-fpl-budget__note {
  flex: 1 1 220px; margin: 0; font-size: .78rem; color: var(--nc-ink-faint);
}

.nc-fpl-gw-picker {
  display: flex; align-items: center; gap: 10px; margin-bottom: var(--nc-gap);
}
.nc-fpl-gw-picker__select {
  flex: 1; padding: 8px 12px; border-radius: var(--nc-radius-sm);
  border: 1px solid var(--nc-line); background: var(--nc-surface); color: var(--nc-ink); font-weight: 700;
}
.nc-fpl-gw-picker__nav {
  width: 36px; height: 36px; flex: none; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--nc-line); background: var(--nc-surface); color: var(--nc-ink);
  text-decoration: none;
}
.nc-fpl-gw-picker__nav:hover { border-color: var(--nc-accent); color: var(--nc-accent); }
.nc-fpl-gw-picker__nav--disabled { opacity: .35; pointer-events: none; }

.nc-fpl-reconstructed-note {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px; margin-bottom: var(--nc-gap);
  border-radius: var(--nc-radius-sm); background: #fdf1d6; color: #7c5209; font-size: .82rem;
}

/* ------------------------------------------------ cookie notice

   The one cookie banner (see _nc_cookie_consent.tpl). Chrome, not content:
   a fixed dark pill regardless of light/dark theme, so it reads the same on
   the standalone landing page and inside the app shell. */
.nc-cookie-consent {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 1090;
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-radius: 18px;
  background: #0b1220;
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 18px 44px rgba(8, 12, 18, .4);
  color: #fff;
  transform: translateY(140%);
  transition: transform .25s cubic-bezier(.22, .61, .36, 1);
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
}
.nc-cookie-consent.is-visible { transform: translateY(0); }
.nc-cookie-consent[hidden] { display: none; }
.nc-cookie-consent__text { display: block; min-width: 0; }
.nc-cookie-consent__title { display: block; font-size: 14px; font-weight: 800; margin-bottom: 3px; }
.nc-cookie-consent__copy { display: block; font-size: 12.5px; line-height: 1.5; color: rgba(255, 255, 255, .78); }
.nc-cookie-consent__actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.nc-cookie-consent__link { color: #ffbf7a; font-size: 13px; font-weight: 700; white-space: nowrap; text-decoration: none; }
.nc-cookie-consent__link:hover { text-decoration: underline; color: #ffbf7a; }
.nc-cookie-consent__accept {
  border: 0;
  border-radius: 999px;
  padding: 10px 18px;
  background: linear-gradient(135deg, #ff8a2a, #ff6a1a);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}
.nc-cookie-consent__accept:hover { filter: brightness(1.05); }

@media (max-width: 600px) {
  .nc-cookie-consent { flex-direction: column; align-items: flex-start; gap: 12px; border-radius: 16px; }
  .nc-cookie-consent__actions { width: 100%; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
  .nc-cookie-consent { transition: none; }
}

/* Screen-reader-only page heading for the pages whose visible identity is a
   one-tab content-tabs bar (Market, Deals, Services, Opportunities, Places,
   Epic Questions...). Positioned off-screen rather than clipped to a 1px
   box, so it keeps its natural text width - a clipped-width box reads as
   "clipped text" to layout-audit tooling and to some AT heuristics. */
/* .nc-sr-label: the same treatment for any other screen-reader-only label
   (e.g. the feed cards' Save pill). */
.nc-page-h1-sr,
.nc-sr-label {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  /* clip/clip-path already hide it; overflow:visible keeps a clipped-width
     box from reading as "clipped text" to the layout sweep. */
  overflow: visible;
}

/* -------------------------------------------- listing gallery slider */

.nc-gallery__stage { position: relative; }

.nc-gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(15, 23, 42, .55);
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  z-index: 2;
  transition: background .15s ease;
}
.nc-gallery__nav:hover { background: rgba(15, 23, 42, .78); }
.nc-gallery__nav--prev { left: 8px; }
.nc-gallery__nav--next { right: 8px; }

.nc-gallery__count {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .6);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------- "More like this" strip */

.nc-related { margin-top: 26px; }
.nc-related__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.nc-related__title { font-size: 1.05rem; font-weight: 800; margin: 0; color: var(--nc-ink); }
.nc-related__nav { display: flex; gap: 8px; flex: none; }
.nc-related__arrow {
  width: 36px; height: 36px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--nc-line);
  border-radius: 50%;
  background: var(--nc-surface);
  color: var(--nc-ink);
  cursor: pointer;
}
.nc-related__arrow:hover { border-color: var(--nc-accent); color: var(--nc-accent); }
.nc-related__arrow:disabled { opacity: .35; cursor: default; border-color: var(--nc-line); color: var(--nc-ink); }
/* Nothing to page through - hide the arrows entirely. */
.nc-related:not(.nc-carousel--scrollable) .nc-related__nav { display: none; }

.nc-related__track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 4px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.nc-related__track::-webkit-scrollbar { display: none; }
/* Collapse the Bootstrap column wrapper each card ships with; give each a
   fixed slice of the strip instead. */
.nc-related__track > [class*="col-"] {
  flex: 0 0 clamp(190px, 62vw, 240px);
  max-width: none;
  width: auto;
  margin: 0;
  padding: 0;
  scroll-snap-align: start;
}
@media (min-width: 768px) {
  .nc-related__track > [class*="col-"] { flex-basis: clamp(200px, 30%, 250px); }
}
@media (min-width: 992px) {
  .nc-related__track > [class*="col-"] { flex-basis: clamp(200px, 23%, 250px); }
}