/* df-bnb-farming-non-perishable-guide.css
   DF/BNB Farming Non Perishable Location Guide — Aug 2026

   Standalone .fnpg- namespace, mapped value-for-value to
   df-bnb-nuka-cola-spawns.css (the Aug 2026 activities port) so the page
   renders identically under both brands: warm tokens var(--accent) /
   var(--text) / var(--panel) + color-mix, never hardcoded neutrals. The
   warm-cream expand fills are the token-independent literals shared with
   the collectables/treasure-map/nuka-cola expand bodies.
*/

/* ── Top header card ─────────────────────────────────────────────────────── */
.fnpg-top {
  background: color-mix(in srgb, var(--text) 3%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  border-radius: 18px;
  padding: 18px 18px 16px;
  margin: 12px 0 14px;
}

.fnpg-top-title {
  font-weight: 950;
  letter-spacing: .04em;
  font-size: 21px;
  color: var(--accent);
}

.fnpg-top-desc {
  margin-top: 8px;
  opacity: .8;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
}
.fnpg-top-desc p { margin: 0 0 8px; }
.fnpg-top-desc p:last-child { margin-bottom: 0; }

.fnpg-count-line {
  margin: 0 0 6px;
  opacity: .85;
  font-size: 13px;
  line-height: 1.35;
  color: var(--text);
}
.fnpg-count-line b { font-weight: 900; }

.fnpg-top-divider {
  border: none;
  border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  margin: 10px 0 0;
}

/* ── Search bar (LIVE — Style B) ─────────────────────────────────────────── */
.fnpg-top-search {
  display: block;
  width: 100%;
  height: 44px;
  margin-top: 10px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--text) 8%, var(--panel));
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  outline: none;
  box-sizing: border-box;
}
.fnpg-top-search::placeholder {
  color: color-mix(in srgb, var(--text) 45%, transparent);
  font-weight: 600;
}
.fnpg-top-search:focus {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 12%, transparent);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.fnpg-top-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  width: 100%;
  margin-top: 6px;
}

.fnpg-btn {
  border: 1px solid color-mix(in srgb, var(--text) 18%, transparent);
  background: rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 400;
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
}
.fnpg-btn:hover { background: rgba(255, 255, 255, 0.75); }

/* Full-map download.
   The button is an <a>, and df-bnb-guide.css carries
       #df-bnb-shell[data-page="guide"] .dfbnb-guideBody a { color: var(--accent) !important }
   which beat .fnpg-btn's `color: var(--text)` - the button rendered
   accent-orange on a pale pill, underlined, and could not be read. That same
   rule also forces `text-decoration: underline 2px !important`. Beating an
   !important needs !important back, plus more specificity than that ID
   selector, which is why this rule looks heavier than it should. It pins the button to the same
   --text its Expand All / Close All siblings use; the accent tint is dropped
   from the fill and the accent border alone marks it out. */
#df-bnb-shell .dfbnb-guideBody a.fnpg-btn--map {
  color: var(--text) !important;
  text-decoration: none !important;
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: rgba(255, 255, 255, 0.55);
}
#df-bnb-shell .dfbnb-guideBody a.fnpg-btn--map:hover {
  background: rgba(255, 255, 255, 0.75);
}

/* Line pointing at the downloadable full map. Lives inside Fixed Spawn
   Locations, under the per-server count - the bottom margin separates it from
   the first region row. */
.fnpg-top-mapline {
  margin: 8px 0 14px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text);
  opacity: 0.9;
}
.fnpg-top-mapline .fnpg-maplink {
  color: var(--accent);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.fnpg-top-mapline .fnpg-maplink:hover { text-decoration: none; }

/* ── Expand boxes (root level) ───────────────────────────────────────────── */
/* Brand-aware fills: DF keeps the warm-cream literals; BNB (dark) gets a
   black overlay so cards read darker than the panel. Blended via the
   shell's --mixPct (100% DF / 0% BNB). */
.fnpg-expand {
  border: 1px solid color-mix(in srgb, var(--text) 9%, transparent);
  border-radius: 14px;
  overflow: hidden;
  margin: 10px 0;
  background: color-mix(in srgb, rgba(0,0,0,0.25) calc(100% - var(--mixPct)), rgba(245,241,227,0.55) var(--mixPct));
}

.fnpg-expand__summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 14px;
  display: grid;
  gap: 4px;
  background: color-mix(in srgb, rgba(0,0,0,0.34) calc(100% - var(--mixPct)), rgba(245,241,227,0.35) var(--mixPct));
}
.fnpg-expand__summary::-webkit-details-marker { display: none; }

.fnpg-expand__summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.fnpg-expand__title {
  font-weight: 800;
  font-size: 15px;
  color: var(--accent);
}

.fnpg-expand__pill {
  font-size: 0.8em;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  background: color-mix(in srgb, var(--text) 8%, var(--panel));
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.fnpg-expand__body {
  padding: 12px 14px 14px;
  border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}

/* ── Nested expands (region sub-expands inside Vendors / Fixed Spawns) ─── */
.fnpg-expand .fnpg-expand {
  border-left: 3px solid rgba(0,0,0,0.06);
  border-radius: 0 14px 14px 0;
  background: color-mix(in srgb, rgba(0,0,0,0.15) calc(100% - var(--mixPct)), rgba(245,241,227,0.45) var(--mixPct));
}

/* ── Deeply nested expands (marker inside region inside root) ────────────── */
.fnpg-expand .fnpg-expand .fnpg-expand {
  border-left: 3px solid rgba(0,0,0,0.06);
  border-radius: 0 14px 14px 0;
  background: color-mix(in srgb, rgba(0,0,0,0.10) calc(100% - var(--mixPct)), rgba(245,241,227,0.35) var(--mixPct));
}

/* ── Empty state ─────────────────────────────────────────────────────────── */
.fnpg-empty {
  opacity: 0.7;
  font-size: 0.95em;
  font-style: italic;
  padding: 4px 0;
}

/* ── Location slots — overview image, directions, close-up image ─────────── */
.fnpg-loc-caption {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--text) 55%, transparent);
  margin: 12px 2px 5px;
}
.fnpg-loc-caption:first-child { margin-top: 2px; }

/* Image slots: full column width, capped at 900px, natural aspect (no crop).
   Must stay identical to .cs-loc-photo in df-bnb-collectables-spawns.css so the
   farming guides and the collectables spawn pages show photos at the same size. */
.fnpg-loc-photo {
  margin: 0;
  max-width: 900px;
  padding: 8px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  background: color-mix(in srgb, var(--text) 3%, transparent);
  box-sizing: border-box;
}
.fnpg-loc-photo__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}
.fnpg-loc-photo--empty {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--text) 22%, transparent);
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.fnpg-loc-photo__ph {
  font-size: 13px;
  font-style: italic;
  color: color-mix(in srgb, var(--text) 45%, transparent);
  padding: 24px 16px;
}

.fnpg-loc-directions { margin: 4px 0 2px; }
.fnpg-loc-directions__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  opacity: 0.9;
  /* Hand-authored directions are written as paragraphs and stored with real
     newlines. They render in one <p>, so without this every route collapses
     into a single wall of text. `pre-line` honours the newlines and still
     collapses runs of spaces, so the JSON stays readable either way. */
  white-space: pre-line;
}
.fnpg-loc-directions__text--empty {
  opacity: 0.6;
  font-style: italic;
}

/* ── Farming Tips and Tricks ────────────────────────────────────────────────── */
.fnpg-tips__text {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  opacity: .9;
}
.fnpg-tips__text:last-child { margin-bottom: 0; }
.fnpg-tips__text b { font-weight: 800; }
.fnpg-tips__link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  font-weight: 700;
}
.fnpg-tips__link:hover { opacity: .8; }
.fnpg-tips__heading {
  margin: 18px 0 6px;
  font-size: 15px;
  font-weight: 800;
  color: var(--accent);
}
.fnpg-tips__heading:first-child { margin-top: 0; }
.fnpg-tips__list {
  margin: 6px 0 10px 20px;
  padding: 0;
  list-style: disc;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  opacity: .9;
}
.fnpg-tips__list li { margin-bottom: 4px; }
.fnpg-tips__list b { font-weight: 800; }

/* ── Rate info blocks ───────────────────────────────────────────────────────── */
.fnpg-rate-info {
  margin: 0 0 18px;
  padding: 12px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 14%, transparent);
}
.fnpg-rate-info__text {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}
.fnpg-rate-info__text:last-child { margin-bottom: 0; }
.fnpg-rate-info__text b { font-weight: 800; color: var(--accent); }
.fnpg-rate-info__detail {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.4;
  opacity: .55;
  color: var(--text);
}
.fnpg-rate-info__detail code {
  font-family: "SF Mono", "Fira Code", monospace;
  font-size: 11px;
  padding: 1px 5px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--text) 6%, transparent);
}

/* ── Per-marker breakdown note (counts + per-type %) ─────────────────────── */
.fnpg-bd {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 12%, transparent);
}
.fnpg-bd__lead { font-weight: 800; color: var(--accent); margin-right: 4px; }
.fnpg-bd__row { white-space: nowrap; }
.fnpg-bd__row b { font-weight: 800; }

/* ── Used For ────────────────────────────────────────────────────────────── */
.fnpg-uf-block { margin: 0 0 18px; }
.fnpg-uf-block:last-child { margin-bottom: 0; }
.fnpg-uf-heading {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--accent);
}
.fnpg-uf-effects {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.fnpg-uf-effects li {
  font-size: 13px;
  line-height: 1.3;
  color: var(--text);
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.fnpg-uf-dur { opacity: .6; font-weight: 600; }
/* Type / Value / Weight pills — neutral, to read apart from effect pills. */
.fnpg-uf-meta-pills { margin-top: 8px; }
.fnpg-uf-meta-pills li {
  border-color: color-mix(in srgb, var(--text) 18%, transparent);
  background: color-mix(in srgb, var(--text) 6%, transparent);
}
/* Mutation diet — static text under the pills. */
.fnpg-uf-diet {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
}
.fnpg-uf-diet b { font-weight: 800; color: var(--accent); }
.fnpg-uf-recipe { margin-top: 12px; }
.fnpg-uf-meta {
  margin: 0 0 18px;
  font-size: 12.5px;
  line-height: 1.4;
  opacity: .7;
  color: var(--text);
}
/* Ingredients and Effects are stacked vertically (no side-by-side cols), with
   a clear gap between each sub-section so they don't read as one block. */
.fnpg-uf-h {
  margin: 20px 0 8px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  opacity: .65;
  color: var(--text);
}
.fnpg-uf-h:first-child { margin-top: 0; }
.fnpg-uf-ing {
  margin: 0;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text);
}
.fnpg-uf-ing li { margin: 0 0 2px; }
.fnpg-uf-ing li.fnpg-uf-cream { font-weight: 800; color: var(--accent); }
/* Daily & event challenges — "Daily - Collect Deathclaw eggs (1)". */
.fnpg-uf-chal li { margin: 0 0 6px; }
.fnpg-uf-chal b { font-weight: 800; color: var(--accent); }
.fnpg-uf-chal-req { opacity: .6; font-weight: 600; }
.fnpg-uf-obtain {
  margin: 18px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}
.fnpg-uf-obtain b { color: var(--accent); font-weight: 800; }
/* Effect pills sit right under their heading — the gap comes from .fnpg-uf-h. */
.fnpg-uf-h + .fnpg-uf-effects { margin-top: 0; }

/* ── Vendors flat table ──────────────────────────────────────────────────── */
.fnpg-vtable-wrap { margin: 0 0 16px; }
.fnpg-vt-subheading { margin-top: 18px; }
.fnpg-vtable {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  color: var(--text);
  margin-top: 4px;
}
.fnpg-vtable th, .fnpg-vtable td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  vertical-align: top;
}
.fnpg-vtable thead th {
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--accent);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}
.fnpg-vtable tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--text) 2.5%, transparent);
}
.fnpg-vt-name { font-weight: 700; }
.fnpg-vt-loc { font-weight: 400; }
.fnpg-vt-mult {
  font-size: 11px;
  font-weight: 800;
  color: var(--accent);
  padding: 1px 5px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}
.fnpg-vt-rate { font-weight: 800; color: var(--accent); white-space: nowrap; }
/* Full-width descriptive sub-row under a manual/quest or random-encounter row. */
.fnpg-vtable tbody tr.fnpg-vt-noterow,
.fnpg-vtable tbody tr.fnpg-vt-noterow:nth-child(even) { background: transparent; }
.fnpg-vt-note {
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.5;
  color: color-mix(in srgb, var(--text) 78%, transparent);
  padding-top: 2px;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}
@media (max-width: 560px) {
  .fnpg-vtable { font-size: 12.5px; }
  .fnpg-vtable th, .fnpg-vtable td { padding: 6px 6px; }
}

/* ── Mobile (breaks per DF style guide: 760 / 560 / 520) ─────────────────── */
@media (max-width: 760px) {
  .fnpg-top-title { font-size: 18px; }
}
@media (max-width: 560px) {
  .fnpg-top { padding: 14px; }
  .fnpg-top-actions { justify-content: stretch; flex-direction: column; }
  .fnpg-top-actions > * { width: 100%; text-align: center; }
  .fnpg-btn { width: 100%; }
}
@media (max-width: 520px) {
  .fnpg-expand__summary-row { flex-wrap: wrap; }
  .fnpg-expand__pill { margin-left: 0; }
}

/* Region index (combined multi-item pages, e.g. Salt/Pepper/Sugar & Spices) */
.fnpg-region-index { list-style: none; margin: 8px 0 0; padding: 0; }
.fnpg-region-index__row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 9%, transparent);
}
.fnpg-region-index__row:last-child { border-bottom: none; }
.fnpg-region-link { color: var(--accent); text-decoration: none; font-weight: 600; }
.fnpg-region-link:hover { text-decoration: underline; }

/* ── CAMP producer cards (Collectrons + Resource Generators) ─────────────── */
/* One card per station: name (links to its camp-items page), obtain route,
   then one row per produced item with its rate. Brand-aware fills only. */
.fnpg-prod-link { margin: 0 0 10px; font-size: 14px; }
.fnpg-prod-link__a { color: var(--accent); text-decoration: none; font-weight: 600; }
.fnpg-prod-link__a:hover { text-decoration: underline; }

.fnpg-prod {
  margin: 0 0 10px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  background: color-mix(in srgb, rgba(0,0,0,0.18) calc(100% - var(--mixPct)), rgba(245,241,227,0.45) var(--mixPct));
}
.fnpg-prod:last-child { margin-bottom: 0; }
.fnpg-prod__head { margin: 0 0 4px; }
.fnpg-prod__name {
  color: var(--accent);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border-bottom: 1px dotted color-mix(in srgb, var(--accent) 55%, transparent);
}
.fnpg-prod__name:hover { border-bottom-style: solid; }
.fnpg-prod__obtain {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--text) 75%, transparent);
}
.fnpg-prod__obtain b { color: var(--text); font-weight: 600; }
.fnpg-prod__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  font-size: 14px;
}
.fnpg-prod__row + .fnpg-prod__row { margin-top: 6px; }
.fnpg-prod__item { color: var(--text); }
.fnpg-prod__rate { color: var(--accent); font-weight: 600; white-space: nowrap; }
.fnpg-prod__rate--none {
  color: color-mix(in srgb, var(--text) 55%, transparent);
  font-style: italic;
  font-weight: 400;
}

/* ── Per-spawn blocks inside a marker ────────────────────────────────────── */
/* A marker holding several spawns renders one block per spawn, each with its
   own map shot, directions and in-place photo. */
.fnpg-spawn {
  margin: 14px 0 0;
  padding: 12px 14px 14px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  background: color-mix(in srgb, rgba(0,0,0,0.14) calc(100% - var(--mixPct)), rgba(245,241,227,0.35) var(--mixPct));
}
.fnpg-spawn:first-of-type { margin-top: 10px; }
.fnpg-spawn__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px;
  padding: 0 0 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
}
.fnpg-spawn__name { color: var(--accent); font-weight: 600; font-size: 15px; }
.fnpg-spawn__note {
  font-size: 13px;
  color: color-mix(in srgb, var(--text) 65%, transparent);
}
.fnpg-spawn .fnpg-loc-caption:first-of-type { margin-top: 0; }

/* ── Honey Beast fold-in (Honeycomb page only) ───────────────────────────── */
.fnpg-hb-intro { margin: 0 0 10px; }
.fnpg-hb-stats {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  color: color-mix(in srgb, var(--text) 78%, transparent);
}
/* Divider heading that separates the Honey Beast creature spawns from the item's */
.fnpg-hb-spawns { margin-top: 18px; padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--text) 12%, transparent); }
.fnpg-hb-heading { margin-bottom: 6px; }
/* Drop leaf rows (name + rate) */
.fnpg-hb-leaf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 6%, transparent);
  font-size: 14px;
}
.fnpg-hb-leaf:last-child { border-bottom: 0; }
.fnpg-hb-leaf__rate {
  font-weight: 800;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Containers type+rate list (container TYPE -> rng76 drop rate). Added Aug 2026. */
.fnpg-cont-list{list-style:none;margin:8px 0 0;padding:0;}
.fnpg-cont-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:6px 10px;border-bottom:1px solid rgba(128,128,128,.18);}
.fnpg-cont-row:last-child{border-bottom:none;}
.fnpg-cont-name{font-weight:600;}
.fnpg-cont-rate{font-variant-numeric:tabular-nums;opacity:.92;white-space:nowrap;}

/* ── Effects tables (spawn-guide §9h) ──────────────────────────────────────
   Replaces the old effect pills (.fnpg-uf-effects / .ncs-uf-pills).

   Brand tokens ONLY. These tables render on the BNB dark panel AND the DF
   cream panel, so every colour is var(--accent) / var(--text) + color-mix.
   Do NOT introduce a literal "rads green" for the ghoul table — it vanishes
   against DF's cream. The rads table is told apart by its heading, not by a
   colour of its own. */
.dfx-table { width: 100%; border-collapse: collapse; margin-bottom: 6px; }
.dfx-table th,
.dfx-table td {
  text-align: left;
  padding: 10px 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  vertical-align: top;
}
.dfx-table thead th {
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
}
.dfx-table thead th.dfx-num { color: var(--accent); }
.dfx-table tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--text) 3%, transparent);
}
.dfx-table th.dfx-num,
.dfx-table td.dfx-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dfx-table th + th,
.dfx-table td + td {
  border-left: 1px solid color-mix(in srgb, var(--text) 6%, transparent);
}
.dfx-lbl { font-weight: 700; }
.dfx-dur,
.dfx-sub {
  display: block;
  font-size: 11.5px;
  font-weight: 400;
  color: color-mix(in srgb, var(--text) 62%, transparent);
}
.dfx-dur { margin-top: 2px; }
.dfx-zero { color: color-mix(in srgb, var(--text) 38%, transparent); }
.dfx-note {
  font-size: 12px;
  color: color-mix(in srgb, var(--text) 62%, transparent);
  margin: 4px 0 0;
}
.dfx-note b {
  color: color-mix(in srgb, var(--text) 62%, transparent);
  font-weight: 700;
}

/* Rads sub-table — ghoul players */
.dfx-rads { margin-top: 20px; }
.dfx-h {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 62%, transparent);
  margin: 0 0 8px;
}
.dfx-rads .dfx-table td.dfx-num { font-weight: 700; }
.dfx-rads .dfx-table td.dfx-num.dfx-base { font-weight: 400; }

/* Long header / short header pair. "Carnivore + SIN (×2.5)" does not fit on a
   phone, so below 520px the header collapses to "+ SIN (×2.5)". Both spans are
   always in the DOM — the swap is CSS only, so nothing depends on JS width. */
.dfx-short { display: none; }

@media (max-width: 760px) {
  .dfx-table thead th { font-size: 12px; }
}
@media (max-width: 560px) {
  .dfx-table th,
  .dfx-table td { padding: 9px 6px; }
}
@media (max-width: 520px) {
  .dfx-table { font-size: 12.5px; }
  .dfx-table th,
  .dfx-table td { padding: 8px 4px; }
  .dfx-table thead th { font-size: 10.5px; }
  .dfx-full { display: none; }
  .dfx-short { display: inline; }
  .dfx-dur,
  .dfx-sub { font-size: 10.5px; }
}

/* Random-encounter NAME cell link -> that encounter's type guide. Same
   treatment as the producer-card station name so the two read as the same kind
   of "go read the full thing" link. The Type column beside it stays plain. */
.fnpg-vt-relink {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dotted color-mix(in srgb, var(--accent) 55%, transparent);
}
.fnpg-vt-relink:hover { border-bottom-style: solid; }

/* ── Gallery + lightbox ──────────────────────────────────────────────────────
   Bottom-of-page thumbnail strip. Values are the style-guide gallery spec
   (13px/800/uppercase/.75 title, 10px gap, scroll-snap strip, 120x80 thumbs at
   10px radius, hover scale 1.05, 100x66 under 640px) mapped onto this page's
   own `fnpg-` namespace. The lightbox is the activities variant: 0.85 backdrop,
   z-index 99999, 8px radius, no white border, 44px round close button. */
.fnpg-gallery { margin-top: 14px; }

.fnpg-gallery__title {
  font-size: 13px;
  font-weight: 800;
  opacity: 0.75;
  margin: 0 0 8px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.fnpg-gallery__strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 6px;
}
.fnpg-gallery__strip::-webkit-scrollbar { height: 6px; }
.fnpg-gallery__strip::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.06);
  border-radius: 999px;
}
.fnpg-gallery__strip::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 999px;
}

.fnpg-gallery__thumb {
  width: 120px;
  height: 80px;
  flex-shrink: 0;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.04);
  overflow: hidden;
  cursor: pointer;
  scroll-snap-align: start;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.fnpg-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fnpg-gallery__thumb:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}

.fnpg-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.85);
}
.fnpg-lightbox[hidden] { display: none; }
.fnpg-lightbox__img {
  max-width: 95vw;
  max-height: 95vh;
  object-fit: contain;
  border-radius: 8px;
  display: block;
}
.fnpg-lightbox__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
}
.fnpg-lightbox__close:hover { background: rgba(255, 255, 255, 0.25); }

@media (max-width: 640px) {
  .fnpg-gallery__thumb { width: 100px; height: 66px; }
}

/* Credited gallery shots (gallery entries with a `credit`): a wider 16:9 thumb
   with the item name and image credit as text underneath. Mirrors the
   .ci-gallery-item block in df-bnb-camp-items.css. */
.fnpg-gallery__item {
  flex-shrink: 0;
  width: 180px;
  margin: 0;
  scroll-snap-align: start;
}
.fnpg-gallery__item .fnpg-gallery__thumb {
  width: 180px;
  height: 101px;
}
.fnpg-gallery__cap {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--text);
}
.fnpg-gallery__cap-name {
  display: block;
  font-weight: 700;
}
.fnpg-gallery__cap-credit {
  display: block;
  opacity: 0.75;
}
@media (max-width: 560px) {
  .fnpg-gallery__item { width: 150px; }
  .fnpg-gallery__item .fnpg-gallery__thumb { width: 150px; height: 84px; }
}