/* SF-050/SF-053 / #3520 — tenant shell design tokens.
   APP showroom-dark colors, left-rail chrome, no portal newsprint. */

/* #6016 — TYPE, WEIGHT, LEADING and CONTROL GEOMETRY scales.

   MERGE NOTE (2026-09-04). Claude-0903-nrpc added a type scale to this file in
   d56efaec7 at the same time this branch added one, and git merged the two
   blocks WITHOUT reporting a conflict, because they sit in different parts of
   the file. Both used the SAME NAMES for DIFFERENT VALUES — their
   --nf-t-text-lg was 18px and this one is 16px — so the later block would have
   silently resized every migrated declaration in the product.

   Their measurement is the better statement of the problem and is kept: 228
   font-size declarations across 21 tenant stylesheets used ~30 distinct sizes,
   including the same size written two ways (12px and 0.75rem, 14px and
   0.875rem, 13px and 0.8125rem) and four steps inside 2px of each other (12,
   12.5, 13, 13.5, 14). "That is why the product reads as inconsistent at a
   glance: there was no scale to be consistent with."

   The two scales AGREE on the values 11/12/13/14/16/18/28 and differ only in
   where the names sit: theirs called 16px --nf-t-text-base and 18px
   --nf-t-text-lg, one step off this ladder. This one survives the merge for a
   single reason — it has 1,388 consumers across four surfaces and theirs had
   zero, by their own commit message ("migrating the 228 is per-surface visual
   work and is not done here"). --nf-t-text-base is dropped rather than aliased
   so there is exactly one name per size. Their --nf-t-radius-sm/-md, their
   --nf-t-font-body/-heading and all thirty of their dangling-token fixes are
   kept unchanged.
   Deliberately in their OWN :root block, separate from the themed colour
   blocks below, because these are theme-INVARIANT: a new theme reskins colour
   and must inherit type and density unchanged. Before this existed, colour was
   the only tokenised axis — the tenant stylesheets carried 201 hardcoded
   font-size declarations spanning 54 spellings of 31 distinct computed sizes
   (12px, 0.75rem, 12.5px, 0.78rem and 0.8rem were five ways to ask for roughly
   the same thing), 143 font-weights across eight values including the
   nonstandard 650/750/950, and 72 line-heights across fifteen. That is why no
   two panels agreed on type, and why a theme swap would have repainted colour
   while leaving type and density frozen.
   Same reasoning as the motion token at L101 below, applied to the rest of the
   system. build_tenant_ui.py --check enforces it. */
:root,
[data-theme="dark"] {
  --nf-t-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale. --text-md is the body and control default. */
  --nf-t-text-2xs: 11px;
  --nf-t-text-xs: 12px;
  --nf-t-text-sm: 13px;
  --nf-t-text-md: 14px;
  --nf-t-text-lg: 16px;
  --nf-t-text-xl: 18px;
  --nf-t-text-2xl: 20px;
  --nf-t-text-3xl: 24px;
  --nf-t-text-4xl: 28px;
  --nf-t-text-5xl: 32px;
  --nf-t-text-6xl: 40px;

  /* Weight scale. 650/750/900/950 collapse into these five. */
  --nf-t-weight-regular: 400;
  --nf-t-weight-medium: 500;
  --nf-t-weight-semibold: 600;
  --nf-t-weight-bold: 700;
  --nf-t-weight-black: 800;

  /* Leading. --leading-none is for single-line glyph controls. */
  --nf-t-leading-none: 1;
  --nf-t-leading-tight: 1.2;
  --nf-t-leading-snug: 1.35;
  --nf-t-leading-normal: 1.5;
  /* 1.65 is not decoration: cp set 1.55 on 41 declarations and the portal
     runs 1.6-1.65 on running prose. Without this step the scale would have
     crushed all of it to 1.5 and called the result consistency. */
  --nf-t-leading-relaxed: 1.65;

  /* Control geometry. --control-min is the 44px touch target that 60
     declarations already spell out by hand. */
  --nf-t-control-min: 44px;
  --nf-t-control-pad-y: 8px;
  --nf-t-control-pad-x: 12px;

  /* #6016 — DISPLAY SCALE. The fluid tier, and the last ad-hoc one.
     ----nf-t-text-* is a fixed ladder for UI text; a heading that has to work from a
     375px phone to a 1440px desktop needs a ramp, and before this every heading
     invented its own. Six steps, each reaching its floor at 375px and its
     ceiling at 1440px, so the ramp spans the viewport range instead of sitting
     clamped at both ends the way `clamp(2.4rem, 5.9vw, 4.15rem)` did.
     Surface-invariant on purpose, exactly like the type scale. */
  --nf-t-display-1: clamp(3rem, 2.648rem + 1.5vw, 4rem); /* 48 -> 64 */
  --nf-t-display-2: clamp(2.5rem, 2.324rem + 0.75vw, 3rem); /* 40 -> 48 */
  --nf-t-display-3: clamp(1.75rem, 1.486rem + 1.13vw, 2.5rem); /* 28 -> 40 */
  --nf-t-display-4: clamp(1.5rem, 1.324rem + 0.75vw, 2rem); /* 24 -> 32 */
  --nf-t-display-5: clamp(1.25rem, 1.074rem + 0.75vw, 1.75rem); /* 20 -> 28 */
  --nf-t-display-6: clamp(1rem, 0.824rem + 0.75vw, 1.5rem); /* 16 -> 24 */

  /* #6016 — FOCUS RING GEOMETRY. The ring's COLOUR has been a token since L046;
     its geometry never was, so a theme could recolour the ring but not resize it.
     Measured across the domain before this: 67 rules at outline 2px and 28 at 3px,
     with offsets spread over 1px, 2px, 3px and four negative insets. The most
     accessibility-critical affordance in the product was also its least consistent.
     2px/2px is the standing majority on two of three surfaces and clears WCAG
     2.4.13's 2px-perimeter minimum; --*-focus-ring-inset is the variant for a
     control whose outset ring would be clipped by its own container.
     INVARIANT: where a two-tone ring pairs this outline with a --*-focus-halo
     box-shadow, the halo's spread must EXCEED the outline width or the ring
     occludes itself. Enforced in type_scale_guard.assert_focus_geometry. */
  --nf-t-focus-ring-width: 2px;
  --nf-t-focus-ring-offset: 2px;
  --nf-t-focus-ring-inset: -2px;

  color-scheme: dark;
  --nf-t-bg: #0a1120;
  --nf-t-surface: #111b30;
  --nf-t-surface-raised: #182642;
  --nf-t-border: #2b3d60;
  --nf-t-text: #eef2fa;
  --nf-t-text-muted: #a9b6d1;
  --nf-t-accent: #b5202e;
  --nf-t-accent-hover: #c62838;
  --nf-t-accent-active: #8f1824;
  --nf-t-on-accent: #ffffff;

  /* #6016 — INK ON THE ACCENT PLANE. The hero, the spotlight and the inverted
     buttons sit on crimson in BOTH schemes, so their ink does not flip with the
     rest of the palette. --nf-t-on-accent is the primary; this is the secondary,
     and it replaces three different hardcoded whites (0.85, 0.92 and #cbc6ba). */
  --nf-t-on-accent-muted: rgba(255, 255, 255, 0.92);

  /* #6016 — the rest of the ink ladder on the accent/hero plane. Eight ad-hoc
     white alphas (0.28, 0.42, 0.72, 0.78, 0.85, 0.92) and three dark plates
     (0.34, 0.42, 0.48) collapse into four named levels plus one plate. */
  /* #6016 — 0.92, not the 0.76 this level shipped at. The hero eyebrow
     (.nf-tenant-hero__kick) is 12px, so it needs 4.5:1, and every module
     accent is a saturated mid-tone: 0.76 white measured 3.54:1 on the
     campaigns/notifications stop rgb(210,26,66) and never cleared 3.78 on
     any of the 21 accent stops. 0.92 measures 4.65:1 there and >=4.65 on
     all 20 routes, while staying visibly under pure white (5.28:1 worst
     case), which is what keeps this level distinct from --nf-t-on-accent. */
  --nf-t-on-accent-faint: rgba(255, 255, 255, 0.92);
  --nf-t-on-accent-edge: rgba(255, 255, 255, 0.36);
  --nf-t-on-accent-plate: rgba(20, 16, 26, 0.40);

  /* #6016 — INK ON THE FIXED LIGHT PLATE. The counterpart to the on-accent
     ladder. Three controls (the countdown badge, the inverted eBay button and
     the streak banner) are a light plate with dark ink in BOTH schemes, so
     neither half may flip. Before #6016 the plate was three near-identical
     whites (#ffffff twice, #fdfbf7 once) and the ink was the literal #1a1822 —
     which a token migration then mapped onto --nf-t-surface, inverting it to
     white-on-white in the light scheme. These two roles are scheme-invariant. */
  --nf-t-plate: #ffffff;
  --nf-t-on-plate: #0f1a37;

  /* #6016 — MODULE HERO GRADIENTS. Eleven two-stop gradients gave each module
     family its identity, and all twenty-two stops were literals in
     ui/tenant/styles/shared_module_hero.css — the single most theme-visible
     surface in the product, and the one a new theme could not reach at all.

     The values were then still the pasted Tailwind 600/700 ramp. The hero
     eyebrow and subtitle are 12px/800 — below the large-text threshold, so
     they need 4.5:1 against the white hero type, and five modules did not
     have it: pricing 3.19, finances 3.30, listings 3.56, catalog 3.74,
     events 4.10. The rest scattered up to 7.58, so the heroes also carried
     visibly different weight page to page.

     THE RULE, if you add or retune a hero: every gradient is scaled by a
     single factor in linear-light space so its BRIGHTEST stop lands on the
     brand's own home hero, luminance 0.14786 — 5.31:1 against white. One
     factor per gradient preserves the hue and the internal span exactly; it
     is clamped at 1.0 so a hero already above the band is never darkened
     into a worse ratio, which is why docs (6.29) and workspace (7.58) keep
     their original stops. Do not paste a palette ramp here: pick the hue,
     then put it on the band. */
  --nf-t-hero-listings-a: #bb4507;
  --nf-t-hero-listings-b: #b41538;
  --nf-t-hero-catalog-a: #09796f;
  --nf-t-hero-catalog-b: #095e75;
  --nf-t-hero-pricing-a: #a35803;
  --nf-t-hero-pricing-b: #b04006;
  --nf-t-hero-insights-a: #2461e7;
  --nf-t-hero-insights-b: #7a39e9;
  --nf-t-hero-solicitations-a: #892fda;
  --nf-t-hero-solicitations-b: #b323c5;
  --nf-t-hero-events-a: #0171ab;
  --nf-t-hero-events-b: #1e54cb;
  --nf-t-hero-finances-a: #0e7c37;
  --nf-t-hero-finances-b: #077067;
  --nf-t-hero-crm-a: #03679e;
  --nf-t-hero-crm-b: #2461e7;
  --nf-t-hero-campaigns-a: #d21a42;
  --nf-t-hero-campaigns-b: #892fda;
  --nf-t-hero-docs-a: #4f46e5;
  --nf-t-hero-docs-b: #475569;
  --nf-t-hero-workspace-a: #475569;
  --nf-t-hero-workspace-b: #334155;

  /* #6016 — EVENT SPOTLIGHT. Home's promo card was another pasted ramp —
     amber-400 to purple-500 to violet-900 — carrying white type. White on
     #fbbf24 is 1.67:1, and the title sits in the first fifth of the card,
     entirely inside the amber end. Same band rule as the heroes, but clamped
     PER STOP: one factor keyed to the amber stop would have crushed the
     violet stop to near-black, so each stop is capped at the band and the
     already-dark one is left alone. Warm-to-cool sweep preserved. */
  --nf-t-spotlight-a: #88660e;
  --nf-t-spotlight-b: #8e47d1;
  --nf-t-spotlight-c: #4c1d95;

  /* #6016 — DATA HUES. The home KPI tiles, the pipeline segments and the drill
     links were painted from a pasted Tailwind palette: nine hues that appear in
     no token file, that no theme can move, and that the light scheme never
     adjusted for contrast. They are a real design need — a category needs a
     colour that is not the brand accent — so they are roles now, with a light
     set chosen to clear AA on paper rather than the dark set reused. */
  --nf-t-hue-live: #06b6d4;
  --nf-t-hue-progress: #f97316;
  --nf-t-hue-sold: #22c55e;
  --nf-t-hue-catalog: #0d9488;
  --nf-t-hue-portfolio: #818cf8;
  --nf-t-hue-priced: #f59e0b;
  --nf-t-hue-info: #58a6ff;
  --nf-t-hue-neutral: #64748b;
  /* Crimson as TYPE on dark grounds only. --nf-t-accent #b5202e is the brand
     hue and does not move: it stays the fill, the border and light-mode type.
     But as type on the dark grounds it is 2.88 page / 2.62 surface / 2.30
     raised, against the 4.5 that 13px type needs. #ff5252 keeps the pure red
     hue (no pink cast: the owner banned the earlier salmon value on
     2026-09-25) and clears the same navy grounds every mirrored surface lands
     on: 5.78 page / 5.26 surface / 4.72 raised. */
  --nf-t-accent-text: #ff5252;
  --nf-t-accent-dim: #3a1a1e;
  --nf-t-danger: #d9724c;
  --nf-t-danger-hover: #e78361;
  --nf-t-danger-active: #b85737;
  --nf-t-on-danger: #000000;
  --nf-t-success: #1f8a4c;
  /* Dark takes TALK's existing green (--nf-green dark) rather than a new
     value. TALK had already lifted its dark green off #1f8a4c and beta never
     did; reusing that exact hex converges the two surfaces on one green
     instead of inventing a second. 7.25 raised, 8.26 surface, 9.07 ground. */
  --nf-t-success-text: #55c98a;
  --nf-t-warn: #c98a14;
  /* Dark needs no separate text value: #c98a14 is 6.40 on --nf-t-bg. */
  --nf-t-warn-text: #c98a14;
  --nf-t-focus: #8fb0ff;
  /* The second half of the focus indicator. No single colour clears 3:1 against
     both a light page and a #b5202e crimson fill, so the ring is sandwiched
     between two bands of opposite polarity and whichever one the ground allows
     carries it. Exactly one of the pair is load-bearing on any given ground.

     In dark the RING carries almost everywhere: #8fb0ff is 8.82 on the page,
     8.03 on a surface, 3.06 even on the crimson accent. The halo earns its
     place on LIGHT fills, where the ring cannot -- #8fb0ff is 2.14 on white and
     this is 18.85. It is deliberately --nf-t-bg's own value, so on the page
     itself it is invisible, which is correct: it is not needed there. */
  --nf-t-focus-halo: #0a1120;
  --nf-t-admin-accent: #9a8dd2;
  --nf-t-notification-unread: rgba(181, 32, 46, 0.08);
  --nf-t-popover-shadow: 0 14px 36px rgba(3, 6, 14, 0.28);
  /* Navy grounds (owner pick, 2026-09-11) share one ramp across APP, TALK, CP and public
     surfaces. Raised panels remain distinct from inset fields; chrome keeps
     the same text and border roles without enlarging its compact controls. */
  --nf-t-nav-bg: #07090e;
  --nf-t-nav-border: #2b3d60;
  --nf-t-nav-text: #eef2fa;
  --nf-t-nav-muted: #a9b6d1;
  --nf-t-nav-hover: #161c2a;
  --nf-t-topbar-bg: #111b30;
  --nf-t-control-bg: #1d2d4d;
  --nf-t-control-hover: #253555;
  --nf-t-control-active: #2b3d5d;
  --nf-t-control-border: #60779b;
  --nf-t-control-disabled-bg: #152039;
  --nf-t-control-disabled-text: #8794b0;
  --nf-t-control-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
  --nf-t-overlay-bg: #111b30;
  --nf-t-input-bg: #0c162a;
  --nf-t-scrim: rgba(3, 6, 14, 0.72);
  --nf-t-radius-sm: 6px;
  /* Temporary canonical propagation demonstration; restore to 8px after live
     APP, TALK and public adoption is observed from this one source change. */
  --nf-t-radius: 10px;
  --nf-t-radius-md: 12px;
  --nf-t-radius-lg: 14px;
  --nf-t-space-1: 4px;
  --nf-t-space-2: 8px;
  --nf-t-space-3: 12px;
  --nf-t-space-4: 16px;
  --nf-t-space-5: 24px;
  --nf-t-space-6: 32px;
  --nf-t-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --nf-t-font-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --nf-t-topbar-h: 56px;
  --nf-t-side-w: var(--nf-shell-rail-width);
  /* Motion — NFD design system, L101. beta writes ONE duration and writes it
     thirty-nine times: 0.12s across chrome_home.css and tenant_components.css,
     spelled three ways (0.12s, .12s, 120ms) which are all the same 120ms. This
     names it; it is a refactor and changes no rendered value.
     🔴 THIS IS NOT A SHARED SCALE, AND MUST NOT BE READ AS ONE. Measured across
     the product: beta 120ms x39 of 59 (66%), talk 140ms x4 of 5, portal 6
     distinct values in 17, cp 5 distinct in 7. Only beta and talk have a
     dominant duration to name. Giving portal and cp one would be CHOOSING a
     scale, which is a product decision and is not this entry's. */
  --nf-t-motion: 0.12s;

  /* #6016 — the SECOND interaction band. --*-motion (120ms) is the right length
     for a colour or a border changing under the pointer; a panel that slides in,
     a scrim that fades, a card that lifts, all read as clipped at 120ms and were
     independently written as 160ms, 180ms, 0.2s and 0.25s in five different
     files. One slower step, named, rather than four unnamed ones.
     Progress and meter FILLS are deliberately neither: a bar that fills is
     showing duration, not responding to a pointer. */
  --nf-t-motion-slow: 0.18s;
  --nf-t-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
  /* #5261: quiet product depth. Borders carry ordinary-panel structure; this
     minimal cast avoids turning every card into a floating overlay. */
  --nf-t-elev-panel: 0 1px 2px rgba(0, 0, 0, 0.12);
  --nf-t-elev-hero: 0 12px 30px rgba(0, 0, 0, 0.28);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --nf-t-bg: #e0e9f1;
    --nf-t-surface: #ffffff;
    --nf-t-surface-raised: #ffffff;
    --nf-t-border: #b9c5d8;
    --nf-t-text: #0f1a37;
    --nf-t-text-muted: #4a5878;
    --nf-t-accent: #b5202e;
    --nf-t-accent-hover: #c62838;
    --nf-t-accent-active: #8f1824;
    --nf-t-on-accent: #ffffff;

    /* #6016 — see the dark block. The hues darken here so a category colour
       clears AA on paper; the on-accent ink does not flip, because the plane it
       sits on does not. */
    --nf-t-on-accent-muted: rgba(255, 255, 255, 0.92);

    /* #6016 — the rest of the ink ladder on the accent/hero plane. Eight ad-hoc
       white alphas (0.28, 0.42, 0.72, 0.78, 0.85, 0.92) and three dark plates
       (0.34, 0.42, 0.48) collapse into four named levels plus one plate. */
    /* #6016 — 0.92, not the 0.76 this level shipped at. The hero eyebrow
       (.nf-tenant-hero__kick) is 12px, so it needs 4.5:1, and every module
       accent is a saturated mid-tone: 0.76 white measured 3.54:1 on the
       campaigns/notifications stop rgb(210,26,66) and never cleared 3.78 on
       any of the 21 accent stops. 0.92 measures 4.65:1 there and >=4.65 on
       all 20 routes, while staying visibly under pure white (5.28:1 worst
       case), which is what keeps this level distinct from --nf-t-on-accent. */
    --nf-t-on-accent-faint: rgba(255, 255, 255, 0.92);
    --nf-t-on-accent-edge: rgba(255, 255, 255, 0.36);
    --nf-t-on-accent-plate: rgba(20, 16, 26, 0.40);

    /* #6016 — INK ON THE FIXED LIGHT PLATE. The counterpart to the on-accent
       ladder. Three controls (the countdown badge, the inverted eBay button and
       the streak banner) are a light plate with dark ink in BOTH schemes, so
       neither half may flip. Before #6016 the plate was three near-identical
       whites (#ffffff twice, #fdfbf7 once) and the ink was the literal #1a1822 —
       which a token migration then mapped onto --nf-t-surface, inverting it to
       white-on-white in the light scheme. These two roles are scheme-invariant. */
    --nf-t-plate: #ffffff;
    --nf-t-on-plate: #0f1a37;

    /* #6016 — MODULE HERO GRADIENTS. Eleven two-stop gradients gave each module
       family its identity, and all twenty-two stops were literals in
       ui/tenant/styles/shared_module_hero.css — the single most theme-visible
       surface in the product, and the one a new theme could not reach at all. */
    --nf-t-hero-listings-a: #bb4507;
    --nf-t-hero-listings-b: #b41538;
    --nf-t-hero-catalog-a: #09796f;
    --nf-t-hero-catalog-b: #095e75;
    --nf-t-hero-pricing-a: #a35803;
    --nf-t-hero-pricing-b: #b04006;
    --nf-t-hero-insights-a: #2461e7;
    --nf-t-hero-insights-b: #7a39e9;
    --nf-t-hero-solicitations-a: #892fda;
    --nf-t-hero-solicitations-b: #b323c5;
    --nf-t-hero-events-a: #0171ab;
    --nf-t-hero-events-b: #1e54cb;
    --nf-t-hero-finances-a: #0e7c37;
    --nf-t-hero-finances-b: #077067;
    --nf-t-hero-crm-a: #03679e;
    --nf-t-hero-crm-b: #2461e7;
    --nf-t-hero-campaigns-a: #d21a42;
    --nf-t-hero-campaigns-b: #892fda;
    --nf-t-hero-docs-a: #4f46e5;
    --nf-t-hero-docs-b: #475569;
    --nf-t-hero-workspace-a: #475569;
    --nf-t-hero-workspace-b: #334155;

    /* #6016 — the light spotlight is correct as built: #312e81 ink on these
       pale stops measures 10.76 / 9.68 / 8.23. Values unchanged, now reachable. */
    --nf-t-spotlight-a: #fff7ed;
    --nf-t-spotlight-b: #f3e8ff;
    --nf-t-spotlight-c: #ddd6fe;
    --nf-t-hue-live: #0e7490;
    --nf-t-hue-progress: #c2410c;
    --nf-t-hue-sold: #15803d;
    --nf-t-hue-catalog: #0f766e;
    --nf-t-hue-portfolio: #4f46e5;
    --nf-t-hue-priced: #b45309;
    --nf-t-hue-info: #1668c4;
    --nf-t-hue-neutral: #475569;
    /* Light needs no companion: #b5202e is already 5.32 on the page ground and
       6.54 on white. Declared explicitly so the token resolves in every scheme
       rather than falling through to the dark value the way --nf-t-focus once
       did (L046). */
    --nf-t-accent-text: #b5202e;
    /* #7893: neutral selection surface; LN red remains the accent/border.
       A pale red fill reads as pink, contrary to the shared brand contract. */
    --nf-t-accent-dim: var(--nf-t-control-active);
    --nf-t-danger: #b54a2a;
    --nf-t-danger-hover: #9d3e23;
    --nf-t-danger-active: #82331d;
    --nf-t-on-danger: #ffffff;
    --nf-t-success: #1f8a4c;
    /* Success as TYPE only. --nf-t-success #1f8a4c is right as a fill and a
       border and stays put; it carries type once (the mapped GCD badge) and
       reads 3.21 there. #176839 clears 4.5 on every ground this token can land
       on - 6.83 white, 5.56 page ground, 4.98 even on --nf-t-accent-dim - so it
       is safe whichever surface ends up underneath it. */
    --nf-t-success-text: #176839;
    --nf-t-warn: #c98a14;
    /* Warn as TYPE only. --nf-t-warn #c98a14 is correct as a fill and a
       border, and passes as type in dark (6.40 / 5.83 / 5.11), but on the
       light grounds it is 2.40 on the page and 2.95 on white. Per rule 7 a
       hue that carries text gets its own value rather than dragging the fill
       darker. #81580d is 5.13 on the ground, 6.30 on white. */
      --nf-t-warn-text: #81580d;
    --nf-t-focus: #0b6bcb;
    /* Light inverts which half carries. #0b6bcb is 4.30 on the page and 5.28 on
       a card, but 1.24 on the crimson CTA -- the one ground a brand-coloured
       button guarantees. White is 6.54 there. See the dark block for the whole
       argument; the pair is the indicator, not either colour alone. */
    --nf-t-focus-halo: #ffffff;
    --nf-t-admin-accent: #6d5cae;
    --nf-t-notification-unread: rgba(181, 32, 46, 0.08);
    --nf-t-popover-shadow: 0 14px 36px rgba(15, 26, 55, 0.18);
    --nf-t-nav-bg: #11100f;
    --nf-t-nav-border: #2f2b28;
    --nf-t-nav-text: #f3f1ec;
    --nf-t-nav-muted: #aaa399;
    --nf-t-nav-hover: #2b2926;
    --nf-t-topbar-bg: #ffffff;
    --nf-t-control-bg: #ffffff;
    --nf-t-control-hover: #f1f3f9;
    --nf-t-control-active: #d3ddeb;
    --nf-t-control-border: #8595af;
    --nf-t-control-disabled-bg: #edf1f7;
    --nf-t-control-disabled-text: #6f7d98;
    --nf-t-control-shadow: 0 1px 2px rgba(15, 26, 55, 0.12);
    --nf-t-overlay-bg: #ffffff;
    --nf-t-input-bg: #ffffff;
    --nf-t-scrim: rgba(15, 26, 55, 0.38);
    --nf-t-shadow: 0 1px 0 rgba(15, 26, 55, 0.06);
    --nf-t-elev-panel: 0 1px 2px rgba(15, 26, 55, 0.05);
    --nf-t-elev-hero: 0 12px 30px rgba(15, 26, 55, 0.12);
  }
}

[data-theme="light"] {
  color-scheme: light;
  --nf-t-bg: #e0e9f1;
  --nf-t-surface: #ffffff;
  --nf-t-surface-raised: #ffffff;
  --nf-t-border: #b9c5d8;
  --nf-t-text: #0f1a37;
  --nf-t-text-muted: #4a5878;
  --nf-t-accent: #b5202e;
  --nf-t-accent-hover: #c62838;
  --nf-t-accent-active: #8f1824;
  --nf-t-on-accent: #ffffff;

  /* #6016 — see the dark block. The hues darken here so a category colour
     clears AA on paper; the on-accent ink does not flip, because the plane it
     sits on does not. */
  --nf-t-on-accent-muted: rgba(255, 255, 255, 0.92);

  /* #6016 — the rest of the ink ladder on the accent/hero plane. Eight ad-hoc
     white alphas (0.28, 0.42, 0.72, 0.78, 0.85, 0.92) and three dark plates
     (0.34, 0.42, 0.48) collapse into four named levels plus one plate. */
  /* #6016 — 0.92, not the 0.76 this level shipped at. The hero eyebrow
     (.nf-tenant-hero__kick) is 12px, so it needs 4.5:1, and every module
     accent is a saturated mid-tone: 0.76 white measured 3.54:1 on the
     campaigns/notifications stop rgb(210,26,66) and never cleared 3.78 on
     any of the 21 accent stops. 0.92 measures 4.65:1 there and >=4.65 on
     all 20 routes, while staying visibly under pure white (5.28:1 worst
     case), which is what keeps this level distinct from --nf-t-on-accent. */
  --nf-t-on-accent-faint: rgba(255, 255, 255, 0.92);
  --nf-t-on-accent-edge: rgba(255, 255, 255, 0.36);
  --nf-t-on-accent-plate: rgba(20, 16, 26, 0.40);

  /* #6016 — INK ON THE FIXED LIGHT PLATE. The counterpart to the on-accent
     ladder. Three controls (the countdown badge, the inverted eBay button and
     the streak banner) are a light plate with dark ink in BOTH schemes, so
     neither half may flip. Before #6016 the plate was three near-identical
     whites (#ffffff twice, #fdfbf7 once) and the ink was the literal #1a1822 —
     which a token migration then mapped onto --nf-t-surface, inverting it to
     white-on-white in the light scheme. These two roles are scheme-invariant. */
  --nf-t-plate: #ffffff;
  --nf-t-on-plate: #0f1a37;

  /* #6016 — MODULE HERO GRADIENTS. Eleven two-stop gradients gave each module
     family its identity, and all twenty-two stops were literals in
     ui/tenant/styles/shared_module_hero.css — the single most theme-visible
     surface in the product, and the one a new theme could not reach at all. */
  --nf-t-hero-listings-a: #bb4507;
  --nf-t-hero-listings-b: #b41538;
  --nf-t-hero-catalog-a: #09796f;
  --nf-t-hero-catalog-b: #095e75;
  --nf-t-hero-pricing-a: #a35803;
  --nf-t-hero-pricing-b: #b04006;
  --nf-t-hero-insights-a: #2461e7;
  --nf-t-hero-insights-b: #7a39e9;
  --nf-t-hero-solicitations-a: #892fda;
  --nf-t-hero-solicitations-b: #b323c5;
  --nf-t-hero-events-a: #0171ab;
  --nf-t-hero-events-b: #1e54cb;
  --nf-t-hero-finances-a: #0e7c37;
  --nf-t-hero-finances-b: #077067;
  --nf-t-hero-crm-a: #03679e;
  --nf-t-hero-crm-b: #2461e7;
  --nf-t-hero-campaigns-a: #d21a42;
  --nf-t-hero-campaigns-b: #892fda;
  --nf-t-hero-docs-a: #4f46e5;
  --nf-t-hero-docs-b: #475569;
  --nf-t-hero-workspace-a: #475569;
  --nf-t-hero-workspace-b: #334155;

  /* #6016 — the light spotlight is correct as built: #312e81 ink on these
     pale stops measures 10.76 / 9.68 / 8.23. Values unchanged, now reachable. */
  --nf-t-spotlight-a: #fff7ed;
  --nf-t-spotlight-b: #f3e8ff;
  --nf-t-spotlight-c: #ddd6fe;
  --nf-t-hue-live: #0e7490;
  --nf-t-hue-progress: #c2410c;
  --nf-t-hue-sold: #15803d;
  --nf-t-hue-catalog: #0f766e;
  --nf-t-hue-portfolio: #4f46e5;
  --nf-t-hue-priced: #b45309;
  --nf-t-hue-info: #1668c4;
  --nf-t-hue-neutral: #475569;
  /* Light needs no companion: #b5202e is already 5.32 on the page ground and
     6.54 on white. Declared explicitly so the token resolves in every scheme
     rather than falling through to the dark value the way --nf-t-focus once
     did (L046). */
  --nf-t-accent-text: #b5202e;
  /* #7893: same neutral selection in explicit light and system-light modes. */
  --nf-t-accent-dim: var(--nf-t-control-active);
  --nf-t-danger: #b54a2a;
  --nf-t-danger-hover: #9d3e23;
  --nf-t-danger-active: #82331d;
  --nf-t-on-danger: #ffffff;
  --nf-t-success: #1f8a4c;
  /* Success as TYPE only. --nf-t-success #1f8a4c is right as a fill and a
     border and stays put; it carries type once (the mapped GCD badge) and
     reads 3.21 there. #176839 clears 4.5 on every ground this token can land
     on - 6.83 white, 5.56 page ground, 4.98 even on --nf-t-accent-dim - so it
     is safe whichever surface ends up underneath it. */
  --nf-t-success-text: #176839;
  --nf-t-warn: #c98a14;
  /* Warn as TYPE only. --nf-t-warn #c98a14 is correct as a fill and a
     border, and passes as type in dark (6.40 / 5.83 / 5.11), but on the
     light grounds it is 2.40 on the page and 2.95 on white. Per rule 7 a
     hue that carries text gets its own value rather than dragging the fill
     darker. #81580d is 5.13 on the ground, 6.30 on white. */
  --nf-t-warn-text: #81580d;
  --nf-t-focus: #0b6bcb;
  /* Light inverts which half carries. #0b6bcb is 4.30 on the page and 5.28 on a
     card, but 1.24 on the crimson CTA -- the one ground a brand-coloured button
     guarantees. White is 6.54 there. Declared here AND in the
     prefers-color-scheme block above, and the two must not drift: L046 found
     --nf-t-focus itself at 1.37:1 in one of them and correct in the other. */
  --nf-t-focus-halo: #ffffff;
  --nf-t-admin-accent: #6d5cae;
  --nf-t-notification-unread: rgba(181, 32, 46, 0.08);
  --nf-t-popover-shadow: 0 14px 36px rgba(15, 26, 55, 0.18);
  --nf-t-nav-bg: #11100f;
  --nf-t-nav-border: #2f2b28;
  --nf-t-nav-text: #f3f1ec;
  --nf-t-nav-muted: #aaa399;
  --nf-t-nav-hover: #2b2926;
  --nf-t-topbar-bg: #ffffff;
  --nf-t-control-bg: #ffffff;
  --nf-t-control-hover: #f1f3f9;
  --nf-t-control-active: #d3ddeb;
  --nf-t-control-border: #8595af;
  --nf-t-control-disabled-bg: #edf1f7;
  --nf-t-control-disabled-text: #6f7d98;
  --nf-t-control-shadow: 0 1px 2px rgba(15, 26, 55, 0.12);
  --nf-t-overlay-bg: #ffffff;
  --nf-t-input-bg: #ffffff;
  --nf-t-scrim: rgba(15, 26, 55, 0.38);
  --nf-t-shadow: 0 1px 0 rgba(15, 26, 55, 0.06);
  --nf-t-elev-panel: 0 1px 2px rgba(15, 26, 55, 0.05);
  --nf-t-elev-hero: 0 12px 30px rgba(15, 26, 55, 0.12);
}

/* ── Stacking layers — NFD design system, L083 ────────────────────────────────
 * Scheme-invariant on purpose: a layer is a structural fact, not a colour, so it
 * is declared once in :root and belongs to both schemes.
 *
 * 🔴 THESE EXIST BECAUSE NOT HAVING THEM SHIPPED A BUG. `.nf-skip-link` and
 *    `.nf-topbar` were BOTH z-index 100, in the same stacking context, with the
 *    skip link first in the DOM (shell.html:3 vs :27). Equal z-index is broken by
 *    paint order, so the topbar won -- and `.nf-skip-link:focus` moves the link to
 *    top-left, which is exactly where the topbar is. A keyboard user's very first
 *    Tab focused an element they could not see. Two numbers that had to relate,
 *    written 200 lines apart, with nothing naming the relationship.
 *
 * Ordering, low to high: content, chrome, the scrim that dims it, the panel above
 * the scrim, then the skip link, which must outrank all page chrome. It sits BELOW
 * the modal backdrop (420) deliberately: when a dialog is open, focus is trapped
 * inside it and the skip link is not reachable.
 */
:root {
  --nf-t-layer-raised: 1;
  --nf-t-layer-chrome: 100;
  --nf-t-layer-scrim: 290;
  --nf-t-layer-overlay: 300;
  --nf-t-layer-skip: 400;
}

/* #5103 reusable help surface. AppShell owns shortcuts, preference and lifecycle. */
.nf-shell-shortcut-help.nf-shortcut-help {
  inline-size: min(42rem, calc(100vw - 24px));
  max-inline-size: calc(100vw - 24px);
  max-block-size: calc(100vh - 24px);
  max-block-size: calc(100dvh - 24px);
  margin: auto;
  --nf-shortcut-help-pad: var(--nf-t-space-5);
  padding: var(--nf-shortcut-help-pad);
  overflow: auto;
  overscroll-behavior: contain;
  scroll-padding: var(--nf-t-space-3);
  border: 1px solid var(--nf-shell-border, var(--nf-t-control-border));
  border-radius: var(--nf-shell-radius, var(--nf-t-radius));
  background: var(--nf-shell-surface, var(--nf-t-overlay-bg));
  color: var(--nf-shell-text, var(--nf-t-text));
  box-shadow: var(--nf-t-elev-panel);
  font: inherit;
  font-size: var(--nf-shell-text-lg, var(--nf-t-text-lg));
  line-height: var(--nf-shell-leading-normal, var(--nf-t-leading-normal));
  overflow-wrap: anywhere;
  animation: none;
  transition: none;
}
.nf-shortcut-help,
.nf-shortcut-help *,
.nf-shortcut-help *::before,
.nf-shortcut-help *::after {
  box-sizing: border-box;
}
.nf-shortcut-help::backdrop {
  background: var(--nf-t-scrim);
}
/* #6016 -- this dialog is its own scroll region (598px of scroll at 1280x800
   with all shortcuts listed), and the header carrying the Close button was a
   normal block inside it, so reading down the list carried Close off the top:
   measured at scrollTop 599 the button sat at y=-561, 561px above the dialog.
   Esc still closes the dialog, so this was a reachability loss rather than a
   trap -- but the labelled control should not have to be scrolled back to.
   The band is pulled out to the dialog's edges and re-padded from
   --nf-shortcut-help-pad, the same variable the dialog's own padding reads, so
   it still spans the full width after the 440px breakpoint reduces that
   padding. Background uses the dialog's own token chain, which keeps the band
   matched to its surface on all four builders that ship this file. */
.nf-shortcut-help .nf-shortcut-help__header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--nf-t-space-3);
  margin-block-end: var(--nf-t-space-4);
  position: sticky;
  inset-block-start: calc(var(--nf-shortcut-help-pad) * -1);
  z-index: 1;
  margin-block-start: calc(var(--nf-shortcut-help-pad) * -1);
  margin-inline: calc(var(--nf-shortcut-help-pad) * -1);
  padding-block: var(--nf-shortcut-help-pad) var(--nf-t-space-3);
  padding-inline: var(--nf-shortcut-help-pad);
  background: var(--nf-shell-surface, var(--nf-t-overlay-bg));
}
.nf-shortcut-help .nf-shortcut-help__title {
  flex: 1 1 12rem;
  min-inline-size: 0;
  margin: 0;
  font-size: var(--nf-shell-text-3xl, var(--nf-t-text-3xl));
  line-height: var(--nf-shell-leading-snug, var(--nf-t-leading-snug));
  text-wrap: balance;
}
.nf-shortcut-help .nf-shortcut-help__close {
  flex: 0 1 auto;
  min-inline-size: 44px;
  min-block-size: var(--nf-t-control-min);
  max-inline-size: 100%;
  padding: var(--nf-t-space-2) var(--nf-t-space-3);
  white-space: normal;
  cursor: pointer;
  touch-action: manipulation;
}
.nf-shortcut-help .nf-shortcut-help__context {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--nf-t-space-2) var(--nf-t-space-4);
  margin-block: var(--nf-t-space-4);
}
.nf-shortcut-help .nf-shortcut-help__settings {
  margin-block: var(--nf-t-space-3);
  padding-inline: var(--nf-t-space-3);
  border: 1px solid var(--nf-shell-border, var(--nf-t-control-border));
  border-radius: var(--nf-shell-radius, var(--nf-t-radius));
}
.nf-shortcut-help .nf-shortcut-help__settings-summary {
  min-block-size: 44px;
  padding-block: var(--nf-t-space-3);
  font-weight: var(--nf-shell-weight-bold, var(--nf-t-weight-bold));
  cursor: pointer;
  touch-action: manipulation;
}
.nf-shortcut-help .nf-shortcut-help__context > div {
  min-inline-size: 0;
}
.nf-shortcut-help .nf-shortcut-help__context dt {
  font-weight: var(--nf-shell-weight-bold, var(--nf-t-weight-bold));
}
.nf-shortcut-help .nf-shortcut-help__context dd {
  margin: 0;
}
.nf-shortcut-help .nf-shortcut-help__preferences {
  margin-block: var(--nf-t-space-4);
  padding: var(--nf-t-space-3);
  border: 1px solid var(--nf-shell-border, var(--nf-t-control-border));
  border-radius: var(--nf-shell-radius, var(--nf-t-radius));
  background: var(--nf-t-control-bg);
}
.nf-shortcut-help .nf-shortcut-help__toggle {
  display: flex;
  align-items: center;
  gap: var(--nf-t-space-3);
  min-block-size: var(--nf-t-control-min);
  margin: 0;
  cursor: pointer;
}
.nf-shortcut-help .nf-shortcut-help__toggle > span {
  min-inline-size: 0;
}
.nf-shortcut-help .nf-shortcut-help__checkbox {
  flex: 0 0 auto;
  inline-size: 20px;
  block-size: 20px;
  margin: 0;
  accent-color: var(--nf-shell-focus, var(--nf-t-focus));
}
.nf-shortcut-help .nf-shortcut-help__checkbox:disabled {
  cursor: not-allowed;
}
.nf-shortcut-help .nf-shortcut-help__preference-status {
  margin-block: var(--nf-t-space-3) var(--nf-t-space-2);
  font-weight: var(--nf-shell-weight-bold, var(--nf-t-weight-bold));
}
.nf-shortcut-help .nf-shortcut-help__note,
.nf-shortcut-help .nf-shortcut-help__description,
.nf-shortcut-help .nf-shortcut-help__reason {
  margin-block: var(--nf-t-space-2);
  max-inline-size: 70ch;
  color: var(--nf-shell-text, var(--nf-t-text));
}
.nf-shortcut-help .nf-shortcut-help__notice {
  margin-block: var(--nf-t-space-3);
  color: var(--nf-shell-text, var(--nf-t-text));
  font-weight: var(--nf-shell-weight-bold, var(--nf-t-weight-bold));
}
.nf-shortcut-help .nf-shortcut-help__notice:empty {
  margin: 0;
}
.nf-shortcut-help .nf-shortcut-help__search-label {
  display: block;
  margin-block: var(--nf-t-space-4) var(--nf-t-space-2);
}
.nf-shortcut-help .nf-shortcut-help__search {
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: var(--nf-t-control-min);
  font-size: var(--nf-shell-text-lg, var(--nf-t-text-lg));
}
.nf-shortcut-help .nf-shortcut-help__search-status {
  margin-block: var(--nf-t-space-3);
}
.nf-shortcut-help .nf-shortcut-help__list {
  display: grid;
  gap: var(--nf-t-space-3);
  min-inline-size: 0;
  margin: var(--nf-t-space-4) 0 0;
  padding: 0;
  list-style: none;
}
.nf-shortcut-help .nf-shortcut-help__action {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--nf-t-space-2);
  min-inline-size: 0;
  padding: var(--nf-t-space-3);
  border: 1px solid var(--nf-shell-border, var(--nf-t-control-border));
  border-radius: var(--nf-shell-radius, var(--nf-t-radius));
}
.nf-shortcut-help .nf-shortcut-help__action[data-state="disabled"] {
  border-style: dashed;
}
.nf-shortcut-help .nf-shortcut-help__action-label {
  min-inline-size: 0;
  margin: 0;
  color: var(--nf-shell-text, var(--nf-t-text));
  font-size: var(--nf-shell-text-xl, var(--nf-t-text-xl));
  line-height: var(--nf-shell-leading-snug, var(--nf-t-leading-snug));
  text-wrap: balance;
}
.nf-shortcut-help .nf-shortcut-help__keys {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--nf-t-space-2);
  min-inline-size: 0;
}
.nf-shortcut-help .nf-shortcut-help__keys kbd {
  display: inline-block;
  min-inline-size: 2rem;
  max-inline-size: 100%;
  padding: var(--nf-t-space-1) var(--nf-t-space-2);
  border: 1px solid var(--nf-shell-border, var(--nf-t-control-border));
  border-radius: 4px;
  background: var(--nf-t-input-bg);
  color: var(--nf-shell-text, var(--nf-t-text));
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: var(--nf-shell-text-lg, var(--nf-t-text-lg));
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}
.nf-shortcut-help .nf-shortcut-help__action .nf-shortcut-help__description,
.nf-shortcut-help .nf-shortcut-help__action .nf-shortcut-help__reason,
.nf-shortcut-help .nf-shortcut-help__availability {
  margin: 0;
}
.nf-shortcut-help .nf-shortcut-help__availability {
  font-weight: var(--nf-shell-weight-bold, var(--nf-t-weight-bold));
}
.nf-shortcut-help .nf-shortcut-help__empty {
  padding: var(--nf-t-space-3);
  border: 1px dashed var(--nf-shell-border, var(--nf-t-control-border));
  border-radius: var(--nf-shell-radius, var(--nf-t-radius));
}
.nf-shortcut-help [hidden] {
  display: none !important;
}
/* #959 tip: optional detail behind a keyboard/touch "?" disclosure. The
   shared NFPopover closes it on Escape or an outside press. Used by this
   dialog and by tenant rows marked .nf-tip-row. */
.nf-tip-row {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nf-t-space-2);
}
/* A heading keeps its "?" beside it at 375px: the heading wraps inside its
   own box instead of pushing the tip onto a line of its own. Rows led by a
   label or control keep wrapping, so a wide select never overflows. */
.nf-tip-row:has(> :is(h1, h2, h3, h4, h5, h6):first-child) {
  flex-wrap: nowrap;
}
.nf-tip-row > :is(h1, h2, h3, h4, h5, h6) {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}
.nf-tip-row .nf-tip > summary {
  position: relative;
  display: inline-grid;
  place-items: center;
  inline-size: var(--nf-t-control-min);
  block-size: var(--nf-t-control-min);
  color: var(--nf-t-text-muted);
  font-size: var(--nf-shell-text-sm, var(--nf-t-text-sm));
  font-weight: var(--nf-shell-weight-semibold, var(--nf-t-weight-semibold));
  line-height: var(--nf-shell-leading-none, var(--nf-t-leading-none));
  list-style: none;
  cursor: pointer;
  touch-action: manipulation;
}
.nf-tip-row .nf-tip > summary::-webkit-details-marker {
  display: none;
}
.nf-tip-row .nf-tip > summary::marker {
  content: "";
}
.nf-tip-row .nf-tip > summary::before {
  content: none;
  display: none;
}
.nf-tip-row .nf-tip > summary::after {
  content: "";
  position: absolute;
  inset: 0;
  inline-size: 1.75em;
  block-size: 1.75em;
  margin: auto;
  border: 1px solid var(--nf-shell-border, var(--nf-t-control-border));
  border-radius: 50%;
}
.nf-tip-row .nf-tip[open] > summary {
  color: var(--nf-shell-text, var(--nf-t-text));
}
.nf-tip-row .nf-tip[open] > summary::after {
  border-color: var(--nf-shell-focus, var(--nf-t-focus));
}
.nf-tip-row .nf-tip > summary:focus-visible {
  outline: var(--nf-t-focus-ring-width) solid var(--nf-shell-focus, var(--nf-t-focus));
  outline-offset: var(--nf-t-focus-ring-offset);
}
.nf-tip-row .nf-tip > p {
  position: absolute;
  inset-inline: 0;
  inset-block-start: calc(100% + var(--nf-t-space-1));
  z-index: 1;
  margin: 0;
  padding: var(--nf-t-space-2) var(--nf-t-space-3);
  border: 1px solid var(--nf-shell-border, var(--nf-t-control-border));
  border-radius: var(--nf-shell-radius, var(--nf-t-radius));
  background: var(--nf-t-surface-raised);
  color: var(--nf-shell-text, var(--nf-t-text));
  font-size: var(--nf-shell-text-sm, var(--nf-t-text-sm));
  line-height: var(--nf-shell-leading-snug, var(--nf-t-leading-snug));
  box-shadow: var(--nf-t-elev-panel);
}
.nf-shortcut-help :focus-visible {
  outline: var(--nf-t-focus-ring-width) solid var(--nf-shell-focus, var(--nf-t-focus));
  outline-offset: var(--nf-t-focus-ring-offset);
  scroll-margin-block: var(--nf-t-space-3);
}
.nf-shortcut-help button,
.nf-shortcut-help input,
.nf-shortcut-help label {
  animation: none;
  transition: none;
}
@media (min-width: 600px) {
  .nf-shortcut-help .nf-shortcut-help__action {
    grid-template-columns: minmax(0, 1fr) minmax(0, 10rem);
    column-gap: var(--nf-t-space-4);
  }
  .nf-shortcut-help .nf-shortcut-help__keys {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-content: start;
    justify-content: flex-end;
  }
  .nf-shortcut-help .nf-shortcut-help__description,
  .nf-shortcut-help .nf-shortcut-help__availability,
  .nf-shortcut-help .nf-shortcut-help__reason {
    grid-column: 1;
  }
}
@media (max-width: 440px) {
  .nf-shell-shortcut-help.nf-shortcut-help {
    --nf-shortcut-help-pad: var(--nf-t-space-4);
  }
}
@media (prefers-reduced-motion: reduce) {
  .nf-shell-shortcut-help.nf-shortcut-help,
  .nf-shortcut-help *,
  .nf-shortcut-help::backdrop {
    animation: none;
    transition: none;
    scroll-behavior: auto;
  }
}
@media (forced-colors: active) {
  .nf-shell-shortcut-help.nf-shortcut-help,
  .nf-shortcut-help .nf-shortcut-help__preferences,
  .nf-shortcut-help .nf-shortcut-help__action,
  .nf-shortcut-help .nf-shortcut-help__keys kbd,
  .nf-shortcut-help .nf-shortcut-help__empty {
    border-color: CanvasText;
  }
  .nf-shortcut-help :focus-visible {
    outline-color: Highlight;
  }
}

/* #8281 C7 — shared low-priority outbound discovery treatment. */
.nf-comic-discovery {
  display: grid;
  gap: var(--nf-t-space-2);
  min-width: 0;
  margin: var(--nf-t-space-4) 0 0;
  padding: var(--nf-t-space-4);
  border: 1px solid var(--nf-t-border);
  border-radius: var(--nf-t-radius-lg);
  background: var(--nf-t-surface);
  color: var(--nf-t-text);
}
.nf-comic-discovery--compact {
  padding: var(--nf-t-space-3);
  border-radius: var(--nf-t-radius);
}
.nf-comic-discovery__title,
.nf-comic-discovery__context,
.nf-comic-discovery__disclosure {
  margin: 0;
  overflow-wrap: anywhere;
}
.nf-comic-discovery__title {
  color: var(--nf-t-text);
  font-size: var(--nf-t-text-md);
  font-weight: var(--nf-t-weight-bold);
  line-height: var(--nf-t-leading-tight);
}
.nf-comic-discovery__context {
  color: var(--nf-t-text);
  font-size: var(--nf-t-text-sm);
  line-height: var(--nf-t-leading-normal);
}
.nf-comic-discovery__disclosure {
  color: var(--nf-t-text-muted);
  font-size: var(--nf-t-text-xs);
  line-height: var(--nf-t-leading-normal);
}
.nf-comic-discovery__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  min-height: var(--nf-t-control-min);
  padding: 0 var(--nf-t-space-4);
  border: 1px solid var(--nf-t-control-border);
  border-radius: var(--nf-t-radius);
  background: var(--nf-t-control-bg);
  color: var(--nf-t-text);
  font-size: var(--nf-t-text-sm);
  font-weight: var(--nf-t-weight-semibold);
  line-height: var(--nf-t-leading-tight);
  text-align: center;
  text-decoration: none;
}
.nf-comic-discovery__action:hover {
  border-color: var(--nf-t-focus);
  background: var(--nf-t-control-hover);
}
.nf-comic-discovery__action:focus-visible {
  outline: var(--nf-t-focus-ring-width) solid var(--nf-t-focus);
  outline-offset: var(--nf-t-focus-ring-offset);
  box-shadow: 0 0 0 6px var(--nf-t-focus-halo);
}
@media (max-width: 680px) {
  .nf-comic-discovery__action {
    justify-self: stretch;
    width: 100%;
    box-sizing: border-box;
  }
}

.nf-conversations {
  color: var(--nf-t-text);
  background: var(--nf-t-surface);
  border: 1px solid var(--nf-t-border);
  border-block-start: 4px solid var(--nf-t-accent);
  border-radius: var(--nf-t-radius-lg);
  padding: var(--nf-t-space-5);
  font-family: var(--nf-t-font-body);
  font-size: var(--nf-t-text-lg);
  line-height: var(--nf-t-leading-normal);
  min-width: 0;
  margin-block: var(--nf-t-space-5);
}
.nf-conversations [hidden] { display: none; }
.nf-conversations__heading, .nf-conversations__actions, .nf-conversations__filters, .nf-conversations__byline {
  display: flex; flex-wrap: wrap; gap: var(--nf-t-space-2); align-items: center;
}
.nf-conversations__heading { justify-content: space-between; align-items: flex-start; }
.nf-conversations__eyebrow { margin: 0; color: var(--nf-t-accent-text); font-size: var(--nf-t-text-sm); font-weight: var(--nf-t-weight-bold); }
.nf-conversations__title { margin: var(--nf-t-space-1) 0; font-size: var(--nf-t-text-3xl); line-height: var(--nf-t-leading-tight); }
.nf-conversations__muted, .nf-conversations__footnote { color: var(--nf-t-text-muted); font-size: var(--nf-t-text-sm); }
.nf-conversations__status { min-height: 1.5em; font-size: var(--nf-t-text-md); }
.nf-conversations__status[data-tone="error"] { color: var(--nf-t-accent-text); }
.nf-conversations__layout { display: grid; grid-template-columns: minmax(200px, 0.8fr) minmax(0, 2fr); gap: var(--nf-t-space-5); }
.nf-conversations__layout--listing { grid-template-columns: minmax(0, 1fr); }
.nf-conversations__inbox, .nf-conversations__thread { min-width: 0; }
.nf-conversations__context { margin-block: 0 var(--nf-t-space-2); font-size: var(--nf-t-text-xl); }
.nf-conversations__list { display: grid; gap: var(--nf-t-space-2); margin-block: var(--nf-t-space-3); }
.nf-conversations__button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--nf-t-space-2);
  min-height: 44px; max-width: 100%; padding: var(--nf-t-space-2) var(--nf-t-space-3);
  background: var(--nf-t-control-bg); color: var(--nf-t-text);
  border: 1px solid var(--nf-t-control-border); border-radius: var(--nf-t-radius);
  font: inherit; font-size: var(--nf-t-text-md); line-height: var(--nf-t-leading-snug);
  text-align: center; text-decoration: none; cursor: pointer; overflow-wrap: anywhere;
  transition: background-color var(--nf-t-motion) ease, border-color var(--nf-t-motion) ease;
}
.nf-conversations__button:hover { background: var(--nf-t-control-hover); }
.nf-conversations__button--primary, .nf-conversations__button[aria-pressed="true"] {
  background: var(--nf-t-accent); border-color: var(--nf-t-accent); color: var(--nf-t-on-accent);
}
.nf-conversations__button--primary:hover { background: var(--nf-t-accent-hover); }
.nf-conversations__button:disabled { cursor: default; opacity: 0.6; }
.nf-conversations__button:focus-visible, .nf-conversations__input:focus-visible {
  outline: var(--nf-t-focus-ring-width) solid var(--nf-t-focus); outline-offset: var(--nf-t-focus-ring-offset);
}
.nf-conversations__conversation { display: flex; flex-direction: column; align-items: flex-start; text-align: start; }
.nf-conversations__timeline { list-style: none; padding: 0; margin-block: var(--nf-t-space-4); display: grid; gap: var(--nf-t-space-3); }
.nf-conversations__message {
  border: 1px solid var(--nf-t-border); border-radius: var(--nf-t-radius-md);
  padding: var(--nf-t-space-4); background: var(--nf-t-surface-raised); overflow-wrap: anywhere;
}
.nf-conversations__message[data-mine="true"] { border-inline-start: 3px solid var(--nf-t-accent); margin-inline-start: var(--nf-t-space-5); }
.nf-conversations__byline { justify-content: space-between; font-size: var(--nf-t-text-md); }
.nf-conversations__raw { white-space: pre-wrap; overflow-wrap: anywhere; margin-block: var(--nf-t-space-2) 0; }
.nf-conversations__unread { color: var(--nf-t-accent-text); border-block-end: 1px solid var(--nf-t-accent); font-size: var(--nf-t-text-sm); font-weight: var(--nf-t-weight-bold); }
.nf-conversations__empty { padding: var(--nf-t-space-5); border: 1px dashed var(--nf-t-border); border-radius: var(--nf-t-radius); }
.nf-conversations__composer { display: grid; gap: var(--nf-t-space-2); padding-block-start: var(--nf-t-space-4); border-block-start: 1px solid var(--nf-t-border); margin-block-start: var(--nf-t-space-4); }
.nf-conversations__label { font-weight: var(--nf-t-weight-semibold); font-size: var(--nf-t-text-md); }
.nf-conversations__input {
  display: block; box-sizing: border-box; width: 100%; min-height: 112px; resize: vertical;
  background: var(--nf-t-input-bg); color: var(--nf-t-text); border: 1px solid var(--nf-t-border);
  border-radius: var(--nf-t-radius); padding: var(--nf-t-space-3); font: inherit; font-size: var(--nf-t-text-lg);
}
.nf-conversations__footnote { margin-block-end: 0; }
@media (max-width: 700px) {
  .nf-conversations { padding: var(--nf-t-space-4); }
  .nf-conversations__layout { grid-template-columns: minmax(0, 1fr); }
  .nf-conversations__message[data-mine="true"] { margin-inline-start: var(--nf-t-space-2); }
}
@media (prefers-reduced-motion: reduce) { .nf-conversations__button { transition: none; } }

/* #5274 — public catalog storefront.
 *
 * Uses the BETA semantic token contract so signed-out catalog pages and the
 * authenticated product share the same light/dark palette, geometry, type and
 * interaction language. Every selector is scoped below the public root.
 */
.nf-public-storefront-root {
  min-width: 0;
}

/* A hidden feature must remain absent in every storefront mode. Author-level
 * grid/flex rules otherwise resurrect inactive controls (including the catalog
 * search in Marketplace and the empty seller-policy disclosure). */
.nf-public-storefront [hidden]:not([hidden="until-found"]) {
  display: none !important;
}

html,
body.nf-public-storefront-page {
  min-height: 100%;
  margin: 0;
  background: var(--nf-t-bg);
}

body.nf-public-storefront-page > noscript,
.nf-public-storefront-boot {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: var(--nf-t-space-5);
  background: var(--nf-t-bg);
  color: var(--nf-t-text);
  font-family: var(--nf-t-font-body);
  text-align: center;
}

.nf-public-store__boot-status {
  display: grid;
  justify-items: center;
  gap: var(--nf-t-space-3);
}

.nf-public-store__boot-status p {
  margin: 0;
}

.nf-public-storefront {
  min-height: 100vh;
  background: var(--nf-t-bg);
  color: var(--nf-t-text);
  font-family: var(--nf-t-font-body);
  line-height: var(--nf-t-leading-normal);
}

.nf-public-storefront *,
.nf-public-storefront *::before,
.nf-public-storefront *::after {
  box-sizing: border-box;
}

.nf-public-store__container {
  width: min(calc(100% - 32px), 1180px);
  margin-inline: auto;
}

.nf-public-store__skip {
  position: fixed;
  z-index: var(--nf-t-layer-skip);
  top: 0;
  left: -999px;
  min-height: var(--nf-t-control-min);
  padding: 10px var(--nf-t-space-4);
  border: 1px solid var(--nf-t-border);
  border-radius: 0 0 var(--nf-t-radius) 0;
  background: var(--nf-t-surface-raised);
  color: var(--nf-t-text);
  font-weight: var(--nf-t-weight-bold);
  text-decoration: none;
}

.nf-public-store__skip:focus {
  left: 0;
}

.nf-public-store__header {
  --nf-store-utility-size: 36px;
  position: sticky;
  z-index: var(--nf-t-layer-chrome);
  top: 0;
  min-height: var(--nf-t-topbar-h);
  border-bottom: 1px solid var(--nf-t-border);
  background: var(--nf-t-topbar-bg);
  box-shadow: var(--nf-t-shadow);
}

.nf-public-store__header-inner,
.nf-public-store__footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nf-t-space-4);
}
/* The footer's one outbound link measured 20px tall. It is a destination the
   reader aims at, not a phrase in a sentence, so it takes the control target. */
.nf-public-store__footer-inner a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--nf-t-control-min);
}

.nf-public-store__header-inner {
  min-height: var(--nf-t-topbar-h);
  padding-block: 6px;
}

/* #6016 — measured 38px: the brand mark set the height and nothing asked for the
   floor, exactly as on the tenant sidebar. It is a link home, so it is a control. */
.nf-public-store__brand {
  display: inline-flex;
  min-inline-size: var(--nf-t-control-min);
  justify-content: center;
  align-items: center;
  gap: 10px;
  min-block-size: var(--nf-t-control-min);
  color: var(--nf-t-text);
  text-decoration: none;
}

.nf-public-store__brand-media {
  position: relative;
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--nf-t-border);
  border-radius: var(--nf-t-radius);
  background: var(--nf-t-surface-raised);
}

.nf-public-store__brand-logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.nf-public-store__brand-fallback {
  display: none;
  color: var(--nf-t-accent-text);
  font-size: var(--nf-t-text-sm);
  font-weight: var(--nf-t-weight-black);
  letter-spacing: .04em;
}

.nf-public-store__brand-media[data-image-error="true"] .nf-public-store__brand-logo {
  display: none;
}

.nf-public-store__brand-media[data-image-error="true"] .nf-public-store__brand-fallback {
  display: inline;
}

.nf-public-store__brand-copy {
  display: grid;
  min-width: 0;
  line-height: var(--nf-t-leading-tight);
}

.nf-public-store__brand-title {
  overflow: hidden;
  font-size: var(--nf-t-text-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nf-public-store__brand-subtitle {
  color: var(--nf-t-text-muted);
  font-size: var(--nf-t-text-2xs);
  font-weight: var(--nf-t-weight-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.nf-public-store__utilities,
.nf-public-comic__actions,
.nf-public-store__state-actions,
.nf-public-store__pagination {
  display: flex;
  align-items: center;
  gap: var(--nf-t-space-2);
}

.nf-public-store__control,
.nf-public-social__button,
.nf-public-detail__close {
  display: inline-flex;
  min-height: var(--nf-t-control-min);
  align-items: center;
  justify-content: center;
  padding: 0 var(--nf-t-space-4);
  border: 1px solid var(--nf-t-control-border);
  border-radius: var(--nf-t-radius);
  background: var(--nf-t-control-bg);
  box-shadow: var(--nf-t-control-shadow);
  color: var(--nf-t-text);
  font: inherit;
  font-size: var(--nf-t-text-md);
  font-weight: var(--nf-t-weight-bold);
  line-height: var(--nf-t-leading-tight);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--nf-t-motion) ease,
    border-color var(--nf-t-motion) ease,
    color var(--nf-t-motion) ease,
    box-shadow var(--nf-t-motion) ease,
    transform var(--nf-t-motion) ease;
}

.nf-public-store__control:hover,
.nf-public-social__button:hover,
.nf-public-detail__close:hover {
  border-color: var(--nf-t-accent);
  background: var(--nf-t-control-hover);
}

/* Shared compact utility geometry; content actions keep their existing size. */
.nf-public-store__utilities > .nf-public-store__control {
  min-height: var(--nf-store-utility-size);
  height: var(--nf-store-utility-size);
}
.nf-public-store__utilities > .nf-public-store__header-control {
  width: var(--nf-store-utility-size);
  min-width: var(--nf-store-utility-size);
  padding: 0;
}
.nf-public-store__header-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nf-public-store__utilities > [data-portal-account-state="signed-in"] {
  display: none;
}

.nf-public-store__more {
  position: relative;
  flex: 0 0 var(--nf-store-utility-size);
}
.nf-public-store__more > summary {
  width: var(--nf-store-utility-size);
  min-width: var(--nf-store-utility-size);
  height: var(--nf-store-utility-size);
  padding: 0;
  list-style: none;
}
.nf-public-store__more summary::-webkit-details-marker { display: none; }
.nf-public-store__more-menu,
.nf-public-store__theme-choices {
  position: absolute;
  z-index: calc(var(--nf-t-layer-chrome) + 5);
  display: grid;
  gap: var(--nf-t-space-1);
  width: 220px;
  padding: var(--nf-t-space-2);
  border: 1px solid var(--nf-t-control-border);
  border-radius: var(--nf-t-radius-lg);
  background: var(--nf-t-surface-raised);
  box-shadow: var(--nf-t-shadow);
}
.nf-public-store__more-menu {
  inset-block-start: calc(100% + var(--nf-t-space-2));
  inset-inline-end: 0;
}
.nf-public-store__theme-submenu { position: relative; }
.nf-public-store__theme-choices {
  inset-block-start: calc(-1 * var(--nf-t-space-2));
  inset-inline-end: calc(100% + var(--nf-t-space-2));
}
.nf-public-store__theme-submenu:not([open]):not(:hover):not(:focus-within) > .nf-public-store__theme-choices {
  display: none;
}
.nf-public-store__more-row {
  display: flex;
  width: 100%;
  min-height: var(--nf-t-control-min);
  align-items: center;
  box-sizing: border-box;
  padding: 0 var(--nf-t-space-3);
  border: 1px solid transparent;
  border-radius: var(--nf-t-radius);
  background: transparent;
  color: var(--nf-t-text);
  font: inherit;
  font-weight: var(--nf-t-weight-bold);
  text-align: start;
  cursor: pointer;
  list-style: none;
}
.nf-public-store__theme-submenu > summary::after {
  content: "›";
  margin-inline-start: auto;
}
.nf-public-store__more-row:is(:hover, :focus-visible),
.nf-public-store__more-row[aria-checked="true"] {
  border-color: var(--nf-t-control-border);
  background: var(--nf-t-control-hover);
}
@media (max-width: 620px) {
  .nf-public-store__theme-choices {
    inset-block-start: calc(100% + var(--nf-t-space-1));
    inset-inline-end: 0;
  }
}

/* Signed-in SHOP uses the same persistent rail shape as APP, TALK, CP, and
   DEMO. APP's account-chrome projection controls whether this shell exists;
   these destinations remain ordinary links and never grant authorization. */
.nf-public-storefront[data-nf-shop-authenticated] {
  --nf-shop-rail-width: 232px;
  display: grid;
  grid-template-columns: var(--nf-shop-rail-width) minmax(0, 1fr);
}
.nf-public-storefront[data-nf-shop-authenticated][data-nf-shop-rail-collapsed] {
  --nf-shop-rail-width: 72px;
}
.nf-public-storefront[data-nf-shop-authenticated] > :is(.nf-public-store__header,
  .nf-public-store__main, .nf-public-store__footer) {
  grid-column: 2;
}
.nf-public-store__rail {
  position: sticky;
  z-index: calc(var(--nf-t-layer-overlay) + 20);
  top: 0;
  display: flex;
  grid-column: 1;
  grid-row: 1 / span 3;
  align-self: start;
  width: var(--nf-shop-rail-width);
  height: 100vh;
  min-height: 0;
  box-sizing: border-box;
  flex-direction: column;
  padding: var(--nf-t-space-3) var(--nf-t-space-2);
  overflow: visible;
  border-right: 1px solid var(--nf-t-nav-border);
  background: var(--nf-t-nav-bg);
  color: var(--nf-t-nav-text);
}
.nf-public-store__rail-brand,
.nf-public-store__rail-link,
.nf-public-store__rail-utility {
  display: flex;
  min-width: 0;
  min-height: var(--nf-t-control-min);
  box-sizing: border-box;
  align-items: center;
  gap: var(--nf-t-space-3);
  border: 0;
  border-radius: var(--nf-t-radius);
  background: transparent;
  color: var(--nf-t-nav-text);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}
.nf-public-store__rail-brand {
  padding: var(--nf-t-space-2);
  font-size: var(--nf-t-text-md);
}
.nf-public-store__rail-brand-icon,
.nf-public-store__rail-link svg,
.nf-public-store__rail-utility svg,
.nf-public-store__rail-utility-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nf-public-store__rail-nav {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  padding-block: var(--nf-t-space-2);
  /* Scrolling clips the shared 6px focus halo at flush inline edges. Extend
     the scrollport into the rail padding and return that space inside it,
     keeping links aligned while leaving the entire keyboard halo visible. */
  margin-inline: calc(-1 * var(--nf-t-space-2));
  padding-inline: var(--nf-t-space-2);
}
.nf-public-store__rail-section + .nf-public-store__rail-section {
  margin-top: var(--nf-t-space-3);
  padding-top: var(--nf-t-space-3);
  border-top: 1px solid var(--nf-t-nav-border);
}
.nf-public-store__rail-heading {
  margin: 0;
  padding: var(--nf-t-space-1) var(--nf-t-space-2);
  color: var(--nf-t-nav-muted);
  font-size: var(--nf-t-text-2xs);
  font-weight: var(--nf-t-weight-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.nf-public-store__rail-link {
  margin-block: 2px;
  padding: var(--nf-t-space-2);
}
.nf-public-store__rail-link:hover,
.nf-public-store__rail-utility:hover,
.nf-public-store__rail-link[aria-current="page"] {
  background: var(--nf-t-nav-hover);
}
.nf-public-store__rail-link[aria-current="page"] {
  font-weight: var(--nf-t-weight-bold);
}
.nf-public-store__rail-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nf-public-store__rail[data-collapsed="true"] .nf-public-store__rail-label {
  display: none;
}
.nf-public-store__rail[data-collapsed="true"] :is(.nf-public-store__rail-brand,
  .nf-public-store__rail-link, .nf-public-store__rail-utility) {
  justify-content: center;
  padding-inline: 0;
}
.nf-public-store__rail[data-collapsed="true"] .nf-public-store__rail-heading {
  height: 1px;
  padding: 0;
  overflow: hidden;
}
.nf-public-store__rail-foot {
  --nf-shell-utility-size: 36px;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: var(--nf-t-space-2);
  padding-top: var(--nf-t-space-3);
  border-top: 1px solid var(--nf-t-nav-border);
}
.nf-public-store__rail-tools {
  position: relative;
  flex: 0 0 var(--nf-shell-utility-size);
  z-index: calc(var(--nf-t-layer-overlay) + 20);
}
.nf-public-store__rail-foot .nf-public-store__rail-utility {
  width: var(--nf-shell-utility-size);
  min-width: var(--nf-shell-utility-size);
  height: var(--nf-shell-utility-size);
  min-height: var(--nf-shell-utility-size);
  flex: 0 0 var(--nf-shell-utility-size);
  justify-content: center;
  gap: 0;
  padding: 0;
  border: 1px solid var(--nf-t-nav-border);
}
.nf-public-store__rail-foot .nf-public-store__rail-utility :is(svg, .nf-public-store__rail-utility-icon) {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  stroke-width: 2;
}
.nf-public-store__rail-foot .nf-public-store__rail-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.nf-public-store__rail-menu {
  position: absolute;
  z-index: calc(var(--nf-t-layer-overlay) + 21);
  inset-inline-start: 0;
  bottom: calc(100% + var(--nf-t-space-2));
  display: grid;
  width: 244px;
  gap: var(--nf-t-space-1);
  padding: var(--nf-t-space-2);
  border: 1px solid var(--nf-t-nav-border);
  border-radius: var(--nf-t-radius-lg);
  background: var(--nf-t-nav-bg);
  box-shadow: var(--nf-t-shadow);
}
.nf-public-store__rail-menu-title {
  padding: var(--nf-t-space-1) var(--nf-t-space-2);
  color: var(--nf-t-nav-muted);
  font-size: var(--nf-t-text-2xs);
  font-weight: var(--nf-t-weight-bold);
  letter-spacing: .04em;
}
.nf-public-store__rail-menu-action,
.nf-public-store__rail-menu .nf-public-store__control {
  display: flex;
  width: 100%;
  min-height: var(--nf-t-control-min);
  align-items: center;
  justify-content: flex-start;
  padding: 0 var(--nf-t-space-3);
  border: 0;
  border-radius: var(--nf-t-radius);
  background: transparent;
  box-shadow: none;
  color: var(--nf-t-nav-text);
  font: inherit;
  font-weight: var(--nf-t-weight-bold);
  text-decoration: none;
}
.nf-public-store__rail-menu-action {
  gap: var(--nf-t-space-2);
}
.nf-public-store__rail-menu-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nf-public-store__rail-menu-action:hover,
.nf-public-store__rail-menu .nf-public-store__control:hover {
  background: var(--nf-t-nav-hover);
}
.nf-public-store__rail-scrim,
.nf-public-store__rail-mobile-trigger {
  display: none;
}

@media (max-width: 820px), (pointer: coarse) {
  .nf-public-store__header { --nf-store-utility-size: 44px; }

  /* Match the product shells: every compact header action keeps a 44px hit
   * target while its visible button plate is the same inset 40px square. */
  .nf-public-store__header-control {
    position: relative;
    isolation: isolate;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
  }
  .nf-public-store__header-control::after {
    content: "";
    position: absolute;
    inset: 2px;
    z-index: -1;
    border: 1px solid var(--nf-t-control-border);
    border-radius: var(--nf-t-radius);
    background: var(--nf-t-control-bg);
    box-shadow: var(--nf-t-control-shadow);
    pointer-events: none;
  }
  .nf-public-store__header-control:hover::after {
    border-color: var(--nf-t-accent);
    background: var(--nf-t-control-hover);
  }
  .nf-public-store__header-control:active::after {
    border-color: var(--nf-t-control-border);
    background: var(--nf-t-control-active);
    box-shadow: none;
  }
}

.nf-public-store__control:active,
.nf-public-social__button:active,
.nf-public-detail__close:active {
  transform: translateY(1px);
  background: var(--nf-t-control-active);
  box-shadow: none;
}

.nf-public-store__control--primary {
  border-color: var(--nf-t-accent);
  background: var(--nf-t-accent);
  color: var(--nf-t-on-accent);
}

.nf-public-store__control--primary:hover {
  border-color: var(--nf-t-accent-hover);
  background: var(--nf-t-accent-hover);
  color: var(--nf-t-on-accent);
}

.nf-public-store__control:disabled,
.nf-public-social__button:disabled,
.nf-public-detail__close:disabled {
  border-color: var(--nf-t-control-border);
  background: var(--nf-t-control-disabled-bg);
  box-shadow: none;
  color: var(--nf-t-control-disabled-text);
  cursor: not-allowed;
  transform: none;
}

/* One two-band focus indicator on every interactive public-store control. */
.nf-public-storefront :is(a, button, input):focus-visible {
  outline: var(--nf-t-focus-ring-width) solid var(--nf-t-focus);
  outline-offset: var(--nf-t-focus-ring-offset);
  box-shadow: 0 0 0 6px var(--nf-t-focus-halo);
}

.nf-public-storefront :is(.nf-public-store__control, .nf-public-social__button, .nf-public-detail__close):focus-visible {
  box-shadow: 0 0 0 6px var(--nf-t-focus-halo), var(--nf-t-control-shadow);
}

.nf-public-store__main {
  display: grid;
  gap: var(--nf-t-space-6);
  padding-block: 26px 48px;
}

.nf-public-store__toolbar,
.nf-public-store__state,
.nf-public-comic {
  border: 1px solid var(--nf-t-border);
  border-radius: var(--nf-t-radius-lg);
  background: var(--nf-t-surface);
  box-shadow: var(--nf-t-elev-panel);
}

.nf-public-store__marketplace-nav,
.nf-public-store__marketplace-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nf-t-space-2);
}

.nf-public-store__marketplace-nav {
  padding: var(--nf-t-space-2);
  border: 1px solid var(--nf-t-border);
  border-radius: var(--nf-t-radius-lg);
  background: var(--nf-t-surface);
  box-shadow: var(--nf-t-elev-panel);
}

.nf-public-store__marketplace-toolbar {
  display: grid;
  grid-template-columns: minmax(190px, 1.7fr) minmax(120px, .65fr) minmax(120px, .65fr) auto;
  align-items: end;
  gap: var(--nf-t-space-3);
  padding: var(--nf-t-space-4);
  border: 1px solid var(--nf-t-border);
  border-radius: var(--nf-t-radius-lg);
  background: var(--nf-t-surface);
  box-shadow: var(--nf-t-elev-panel);
}

.nf-public-store__marketplace-toolbar[hidden] {
  display: none;
}

.nf-public-store__filter-error-summary {
  grid-column: 1 / -1;
  padding: var(--nf-t-space-3) var(--nf-t-space-4);
  border: 1px solid var(--nf-t-danger);
  border-radius: var(--nf-t-radius);
  background: color-mix(in srgb, var(--nf-t-danger) 8%, var(--nf-t-surface));
  color: var(--nf-t-text);
  scroll-margin-block-start: calc(var(--nf-t-topbar-h) + var(--nf-t-space-3));
}

.nf-public-store__filter-error-summary[hidden] {
  display: none;
}

.nf-public-store__filter-error-summary:focus-visible {
  outline: var(--nf-t-focus-ring-width) solid var(--nf-t-focus);
  outline-offset: var(--nf-t-focus-ring-offset);
}

.nf-public-store__filter-error-title,
.nf-public-store__filter-error-guidance {
  margin: 0;
}

.nf-public-store__filter-error-title {
  font-size: var(--nf-t-text-md);
}

.nf-public-store__filter-error-list {
  margin: var(--nf-t-space-2) 0 0;
  padding-inline-start: var(--nf-t-space-5);
}

.nf-public-store__filter-error-list a {
  color: var(--nf-t-danger);
  font-weight: var(--nf-t-weight-bold);
}

.nf-public-store__marketplace-price {
  display: grid;
  gap: var(--nf-t-space-2);
  min-width: 0;
}

.nf-public-store__field-error {
  margin: 0;
  color: var(--nf-t-danger);
  font-size: var(--nf-t-text-sm);
  line-height: var(--nf-t-leading-normal);
}

.nf-public-store__field-error[hidden] {
  display: none;
}

.nf-public-store__input[aria-invalid="true"] {
  border-color: var(--nf-t-danger);
  box-shadow: 0 0 0 1px var(--nf-t-danger);
}

.nf-public-store__marketplace-more {
  grid-column: 1 / -1;
  min-width: 0;
  padding-block: var(--nf-t-space-1);
}

.nf-public-store__marketplace-more > summary {
  width: fit-content;
  min-height: 44px;
  padding: var(--nf-t-space-2) var(--nf-t-space-3);
  color: var(--nf-t-accent-text);
  font-weight: var(--nf-t-weight-bold);
  cursor: pointer;
}

.nf-public-store__marketplace-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--nf-t-space-3);
  padding-top: var(--nf-t-space-3);
}

.nf-public-marketplace-card__placeholder {
  min-height: 160px;
  color: var(--nf-t-accent-text);
}

.nf-public-marketplace-card__seller {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 24px;
  color: var(--nf-t-accent-text);
  font-size: var(--nf-t-text-sm);
  font-weight: var(--nf-t-weight-bold);
  overflow-wrap: anywhere;
}

.nf-public-marketplace-card__seller:hover {
  color: var(--nf-t-accent);
}

.nf-public-marketplace-card__checkout,
.nf-public-listing__checkout,
.nf-public-listing__checkout-copy,
.nf-public-listing__checkout-status,
.nf-public-listing__photo-empty,
.nf-public-listing__photo-caption {
  margin: 0;
  color: var(--nf-t-text-muted);
  font-size: var(--nf-t-text-sm);
  line-height: var(--nf-t-leading-relaxed);
  overflow-wrap: anywhere;
}

.nf-public-marketplace-card__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--nf-t-space-2);
}

.nf-public-marketplace-card__actions > * {
  width: 100%;
  min-width: 0;
}

.nf-public-listing__checkout-panel {
  display: grid;
  gap: var(--nf-t-space-3);
  margin-top: var(--nf-t-space-4);
  padding: var(--nf-t-space-4);
  border: 1px solid var(--nf-t-border);
  border-radius: var(--nf-t-radius-md);
  background: var(--nf-t-surface-raised);
}

.nf-public-listing__checkout-title,
.nf-public-listing__checkout-copy,
.nf-public-listing__checkout-status {
  margin: 0;
}

.nf-public-listing__checkout-title {
  font-family: var(--nf-t-font-heading);
  font-size: var(--nf-t-text-lg);
}

.nf-public-listing__checkout-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--nf-t-space-3);
}

.nf-public-listing__checkout-field,
.nf-public-listing__checkout-rates {
  display: grid;
  gap: var(--nf-t-space-2);
  min-width: 0;
  color: var(--nf-t-text-muted);
  font-size: var(--nf-t-text-sm);
  font-weight: var(--nf-t-weight-bold);
}

.nf-public-listing__checkout-form > :is(button, .nf-public-listing__checkout-rates, .nf-public-listing__checkout-status) {
  grid-column: 1 / -1;
}

.nf-public-listing__checkout-rates {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}

.nf-public-listing__checkout-rates .nf-public-listing__checkout-field {
  min-width: 0;
}

.nf-public-listing__checkout-status a {
  margin-top: var(--nf-t-space-2);
}

@media (max-width: 640px) {
  .nf-public-listing__checkout-form,
  .nf-public-listing__checkout-rates {
    grid-template-columns: 1fr;
  }

  .nf-public-listing__checkout-rates .nf-public-store__control {
    width: 100%;
  }
}

.nf-public-listing {
  display: grid;
  gap: var(--nf-t-space-5);
  padding: clamp(20px, 4vw, 38px);
  border: 1px solid var(--nf-t-border);
  border-radius: var(--nf-t-radius-lg);
  background: var(--nf-t-surface);
  box-shadow: var(--nf-t-elev-panel);
}

.nf-public-listing__section-nav {
  display: flex;
  max-width: 100%;
  gap: var(--nf-t-space-2);
  overflow-x: auto;
  padding-block: var(--nf-t-space-1);
  scrollbar-width: thin;
}

.nf-public-listing__section-link {
  display: inline-flex;
  min-height: var(--nf-t-control-min);
  flex: 0 0 auto;
  align-items: center;
  padding: var(--nf-t-space-2) var(--nf-t-space-3);
  border: 1px solid var(--nf-t-border);
  border-radius: var(--nf-t-radius);
  color: var(--nf-t-text);
  font-size: var(--nf-t-text-sm);
  font-weight: var(--nf-t-weight-bold);
  text-decoration: none;
}

.nf-public-listing__section-link:hover {
  border-color: var(--nf-t-accent);
  color: var(--nf-t-accent-text);
}

.nf-public-listing__layout {
  display: grid;
  grid-template-columns: minmax(260px, .9fr) minmax(0, 1.1fr);
  align-items: start;
  gap: clamp(22px, 4vw, 48px);
}

.nf-public-listing__gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--nf-t-space-3);
  scroll-margin-block-start: calc(var(--nf-t-topbar-h) + var(--nf-t-space-3));
}

.nf-public-listing__section-heading,
.nf-public-listing__body-section {
  display: grid;
  gap: var(--nf-t-space-2);
}

.nf-public-listing__section-heading {
  grid-column: 1 / -1;
}

.nf-public-listing__section-title,
.nf-public-listing__subheading,
.nf-public-listing__section-copy {
  margin: 0;
}

.nf-public-listing__section-title {
  font-family: var(--nf-t-font-heading);
  font-size: var(--nf-t-display-4);
  line-height: var(--nf-t-leading-tight);
}

.nf-public-listing__subheading {
  font-size: var(--nf-t-text-lg);
}

.nf-public-listing__section-copy {
  max-width: 70ch;
  color: var(--nf-t-text-muted);
  line-height: var(--nf-t-leading-relaxed);
}

.nf-public-listing__photo {
  display: grid;
  gap: var(--nf-t-space-2);
  margin: 0;
  padding: var(--nf-t-space-2);
  border: 1px solid var(--nf-t-border);
  border-radius: var(--nf-t-radius-md);
  background: var(--nf-t-surface-raised);
}

.nf-public-listing__photo--primary {
  grid-column: 1 / -1;
}

.nf-public-listing__image {
  display: block;
  width: 100%;
  max-height: 560px;
  object-fit: contain;
}

.nf-public-listing__photo[data-image-error="true"] {
  min-height: 180px;
  border-color: var(--nf-t-warn);
}

.nf-public-listing__copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--nf-t-space-3);
  scroll-margin-block-start: calc(var(--nf-t-topbar-h) + var(--nf-t-space-3));
}

.nf-public-listing__ask {
  display: grid;
  gap: var(--nf-t-space-1);
  padding-block: var(--nf-t-space-3);
  border-block: 1px solid var(--nf-t-border);
}

.nf-public-listing__ask-label,
.nf-public-listing__ask-price,
.nf-public-listing__ask-status {
  margin: 0;
}

.nf-public-listing__ask-label {
  color: var(--nf-t-text-muted);
  font-size: var(--nf-t-text-sm);
  font-weight: var(--nf-t-weight-bold);
}

.nf-public-listing__ask-price {
  color: var(--nf-t-text);
  font-family: var(--nf-t-font-heading);
  font-size: var(--nf-t-display-3);
  font-weight: var(--nf-t-weight-black);
  line-height: var(--nf-t-leading-none);
}

.nf-public-listing__ask-status {
  color: var(--nf-t-accent-text);
  font-size: var(--nf-t-text-sm);
  font-weight: var(--nf-t-weight-bold);
}

.nf-public-listing__terms-summary {
  display: grid;
  gap: var(--nf-t-space-2);
  padding: var(--nf-t-space-3);
  border: 1px solid var(--nf-t-border);
  border-radius: var(--nf-t-radius-md);
  background: var(--nf-t-surface-raised);
}

.nf-public-detail__facts--compact {
  margin-top: 0;
}

.nf-public-listing__body-section {
  scroll-margin-block-start: calc(var(--nf-t-topbar-h) + var(--nf-t-space-3));
  padding-top: var(--nf-t-space-5);
  border-top: 1px solid var(--nf-t-border);
}

.nf-public-listing__body-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nf-t-space-2);
}

.nf-public-order {
  display: grid;
  gap: var(--nf-t-space-5);
  padding: clamp(20px, 4vw, 38px);
  border: 1px solid var(--nf-t-border);
  border-radius: var(--nf-t-radius-lg);
  background: var(--nf-t-surface);
  box-shadow: var(--nf-t-elev-panel);
}

.nf-public-order__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nf-t-space-3);
}

.nf-public-order__reference,
.nf-public-order__evidence,
.nf-public-order__shipment small {
  margin: 0;
  color: var(--nf-t-text-muted);
  font-size: var(--nf-t-text-sm);
  line-height: var(--nf-t-leading-relaxed);
  overflow-wrap: anywhere;
}

.nf-public-order__layout {
  display: grid;
  grid-template-columns: minmax(260px, .9fr) minmax(0, 1.1fr);
  align-items: start;
  gap: clamp(22px, 4vw, 48px);
}

.nf-public-order__gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--nf-t-space-3);
}

.nf-public-order__details,
.nf-public-order__section,
.nf-public-order__shipment {
  display: grid;
  gap: var(--nf-t-space-2);
}

.nf-public-order__details {
  min-width: 0;
  gap: var(--nf-t-space-4);
}

.nf-public-order__section {
  padding-top: var(--nf-t-space-3);
  border-top: 1px solid var(--nf-t-border);
}

.nf-public-order__section h3,
.nf-public-order__state {
  margin: 0;
}

.nf-public-order__state {
  color: var(--nf-t-accent-text);
  font-weight: var(--nf-t-weight-bold);
  text-transform: capitalize;
}

.nf-public-order__amounts {
  display: grid;
  gap: var(--nf-t-space-1);
  margin: 0;
}

.nf-public-order__shipment {
  padding: var(--nf-t-space-3);
  border: 1px solid var(--nf-t-border);
  border-radius: var(--nf-t-radius-md);
  background: var(--nf-t-surface-raised);
}

.nf-public-order__shipment a {
  width: fit-content;
  color: var(--nf-t-accent-text);
  overflow-wrap: anywhere;
}

/* UI02: every storefront route uses a compact content introduction. The
   existing title, public/catalog state, seller policy, and controls remain in
   normal document flow instead of occupying a decorative welcome banner. */
.nf-public-store__hero {
  display: flex;
  min-height: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--nf-t-space-4);
  padding: 0 0 var(--nf-t-space-3);
  border-bottom: 1px solid var(--nf-t-border);
}

.nf-public-store__hero-copy {
  max-width: 760px;
}

.nf-public-store__eyebrow,
.nf-public-comic__meta {
  margin: 0;
  color: var(--nf-t-accent-text);
  font-size: var(--nf-t-text-xs);
  font-weight: var(--nf-t-weight-black);
  letter-spacing: .09em;
  text-transform: uppercase;
}

.nf-public-store__store-identity {
  display: flex;
  align-items: center;
  gap: var(--nf-t-space-3);
  margin: var(--nf-t-space-1) 0 var(--nf-t-space-2);
}

.nf-public-store__seller-logo {
  display: block;
  width: 48px;
  height: 48px;
  max-width: 100%;
  flex: 0 0 48px;
  object-fit: contain;
  border-radius: var(--nf-t-radius);
}

.nf-public-store__seller-logo[hidden] {
  display: none;
}

.nf-public-store__store-identity .nf-public-store__title {
  min-width: 0;
  margin: 0;
}

.nf-public-store__title {
  max-width: 18ch;
  margin: var(--nf-t-space-1) 0 var(--nf-t-space-2);
  font-family: var(--nf-t-font-heading);
  font-size: var(--nf-t-display-3);
  line-height: var(--nf-t-leading-none);
  letter-spacing: -.035em;
  text-wrap: balance;
}

.nf-public-store__lede {
  max-width: 66ch;
  margin: 0;
  color: var(--nf-t-text-muted);
  font-size: var(--nf-t-text-md);
}

.nf-public-store__seller-policy {
  display: grid;
  gap: var(--nf-t-space-3);
  margin-top: var(--nf-t-space-4);
  padding-top: var(--nf-t-space-3);
  border-top: 1px solid var(--nf-t-border);
}

.nf-public-store__seller-policy > summary {
  min-block-size: var(--nf-t-control-min);
  padding-block: var(--nf-t-space-2);
  color: var(--nf-t-text);
  font-size: var(--nf-t-text-md);
  font-weight: var(--nf-t-weight-bold);
  cursor: pointer;
}

.nf-public-store__seller-policy-facts {
  display: grid;
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--nf-t-border);
}

.nf-public-store__hero-meta {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--nf-t-space-3);
}

.nf-public-store__pill,
.nf-public-comic__fact {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: var(--nf-t-space-1) 10px;
  border: 1px solid var(--nf-t-border);
  border-radius: 999px;
  background: var(--nf-t-surface-raised);
  color: var(--nf-t-text);
  font-size: var(--nf-t-text-xs);
  font-weight: var(--nf-t-weight-bold);
}

.nf-public-store__hero-count {
  color: var(--nf-t-text-muted);
  font-size: var(--nf-t-text-sm);
  font-weight: var(--nf-t-weight-bold);
  white-space: nowrap;
}

/* The Marketplace hub repeats its name in the global destination, page title,
   and status pill. Keep the full editorial hero for individual stores and
   listing/order detail, but let the high-traffic hub behave as a compact page
   introduction so useful inventory controls enter the first viewport. */
.nf-public-storefront-root[data-storefront-mode="marketplace"] .nf-public-store__main {
  gap: var(--nf-t-space-4);
}

.nf-public-storefront-root[data-storefront-mode="marketplace"] .nf-public-store__hero {
  align-items: flex-start;
}

.nf-public-storefront-root[data-storefront-mode="marketplace"] .nf-public-store__title {
  max-width: none;
  margin: var(--nf-t-space-1) 0 var(--nf-t-space-2);
  font-size: var(--nf-t-display-3);
}

.nf-public-storefront-root[data-storefront-mode="marketplace"] .nf-public-store__hero-meta {
  display: none;
}

.nf-public-store__toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--nf-t-space-5);
  padding: var(--nf-t-space-5);
}

.nf-public-store__search {
  display: grid;
  width: min(100%, 620px);
  gap: var(--nf-t-space-2);
}

.nf-public-store__label {
  color: var(--nf-t-text);
  font-size: var(--nf-t-text-sm);
  font-weight: var(--nf-t-weight-bold);
}

.nf-public-store__search-row {
  display: flex;
  gap: var(--nf-t-space-2);
}

.nf-public-store__input {
  width: 100%;
  min-width: 0;
  min-height: var(--nf-t-control-min);
  padding: 9px var(--nf-t-space-3);
  border: 1px solid var(--nf-t-control-border);
  border-radius: var(--nf-t-radius);
  background: var(--nf-t-input-bg);
  color: var(--nf-t-text);
  font: inherit;
  font-size: var(--nf-t-text-lg);
}

.nf-public-store__input::placeholder {
  color: var(--nf-t-text-muted);
  opacity: 1;
}

.nf-public-store__result-summary {
  margin: 0;
  color: var(--nf-t-text-muted);
  font-size: var(--nf-t-text-sm);
  text-align: right;
}

.nf-public-store__result-summary[tabindex="-1"] {
  scroll-margin-block-start: calc(var(--nf-t-topbar-h) + var(--nf-t-space-3));
}

.nf-public-store__result-summary[tabindex="-1"]:focus-visible {
  outline: var(--nf-t-focus-ring-width) solid var(--nf-t-focus);
  outline-offset: var(--nf-t-focus-ring-offset);
  border-radius: var(--nf-t-radius);
}

.nf-public-store__summary-group {
  display: grid;
  min-width: min(100%, 280px);
  justify-items: end;
  gap: var(--nf-t-space-1);
}

.nf-public-store__status-host:empty,
.nf-public-store__pagination:empty {
  display: none;
}

.nf-public-store__state {
  display: grid;
  justify-items: center;
  gap: var(--nf-t-space-2);
  padding: clamp(28px, 6vw, 56px) var(--nf-t-space-4);
  color: var(--nf-t-text-muted);
  text-align: center;
}

.nf-public-store__state[data-tone="error"] {
  border-color: var(--nf-t-danger);
  background: color-mix(in srgb, var(--nf-t-danger) 6%, var(--nf-t-surface));
}

.nf-public-store__state-title {
  margin: 0;
  color: var(--nf-t-text);
  font-family: var(--nf-t-font-heading);
  font-size: var(--nf-t-display-5);
}

.nf-public-store__state-body {
  max-width: 56ch;
  margin: 0;
  font-size: var(--nf-t-text-md);
}

.nf-public-store__state-actions {
  margin-top: var(--nf-t-space-3);
  justify-content: center;
}

.nf-public-store__loader-mark {
  position: relative;
  display: grid;
  width: 58px;
  height: 58px;
  margin-bottom: var(--nf-t-space-2);
  border-radius: 50%;
  place-items: center;
  isolation: isolate;
  background: var(--nf-t-surface-raised);
  box-shadow: 0 0 0 1px var(--nf-t-border), var(--nf-t-elev-panel);
  animation: nf-public-store-mark-pulse 1.15s ease-in-out infinite alternate;
}

.nf-public-store__loader-mark::before {
  position: absolute;
  z-index: -1;
  inset: -4px;
  border: 2px solid color-mix(in srgb, var(--nf-t-accent) 56%, transparent);
  border-radius: inherit;
  content: "";
}

.nf-public-store__loader-image {
  display: block;
  width: 50px;
  height: 50px;
  object-fit: contain;
}

.nf-public-store__loader-fallback {
  display: none;
  color: var(--nf-t-accent-text);
  font-size: var(--nf-t-text-md);
  font-weight: var(--nf-t-weight-black);
  letter-spacing: .04em;
}

/* The platform entry points have no seller identity to show during boot. */
[data-storefront-mode="marketplace"] .nf-public-store__loader-image,
[data-storefront-mode="order"] .nf-public-store__loader-image,
[data-storefront-mode="missing"] .nf-public-store__loader-image {
  display: none;
}

[data-storefront-mode="marketplace"] .nf-public-store__loader-fallback,
[data-storefront-mode="order"] .nf-public-store__loader-fallback,
[data-storefront-mode="missing"] .nf-public-store__loader-fallback {
  display: inline;
}

.nf-public-store__loader-mark[data-image-error="true"] .nf-public-store__loader-image {
  display: none;
}

.nf-public-store__loader-mark[data-image-error="true"] .nf-public-store__loader-fallback {
  display: inline;
}

@keyframes nf-public-store-mark-pulse {
  from { transform: scale(.94); opacity: .72; }
  to { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .nf-public-store__loader-mark {
    animation: none;
  }
}

.nf-public-store__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
  gap: var(--nf-t-space-5);
}

.nf-public-comic {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  transition: border-color var(--nf-t-motion) ease,
    box-shadow var(--nf-t-motion) ease,
    transform var(--nf-t-motion) ease;
}

.nf-public-comic:hover {
  border-color: var(--nf-t-control-border);
  box-shadow: var(--nf-t-popover-shadow);
  transform: translateY(-2px);
}

.nf-public-comic__cover {
  position: relative;
  display: grid;
  aspect-ratio: 4 / 5;
  min-height: 220px;
  place-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--nf-t-border);
  background: var(--nf-t-accent-dim);
}

/* Missing or failed copy photos need an honest compact state, not a full
 * blank cover that pushes the listing identity out of the mobile viewport. */
.nf-public-marketplace-card__placeholder:not(:has(img)),
.nf-public-marketplace-card__placeholder[data-image-error="true"] {
  aspect-ratio: auto;
  min-height: 128px;
  padding: var(--nf-t-space-4);
}

.nf-public-comic__image {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nf-public-comic__cover-fallback {
  display: grid;
  place-items: center;
  gap: var(--nf-t-space-2);
  color: var(--nf-t-accent-text);
  text-align: center;
}

.nf-public-comic__monogram {
  font-family: var(--nf-t-font-heading);
  /* allow-fluid: a placeholder monogram sized to its own card, not to the
     page heading hierarchy — it is a graphic that happens to be a glyph. */
  font-size: clamp(3rem, 8vw, 5rem);
  font-weight: var(--nf-t-weight-black);
  line-height: var(--nf-t-leading-none);
  letter-spacing: -.06em;
}

.nf-public-comic__issue {
  font-size: var(--nf-t-text-xs);
  font-weight: var(--nf-t-weight-black);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.nf-public-comic__cover[data-image-error="true"] .nf-public-comic__image {
  display: none;
}

/* Detail covers carry their own report link so a takedown starts from the
 * exact image, not from a footer hunt. It sits over the image corner and
 * disappears with a failed image, which leaves nothing to report. */
.nf-public-comic__report {
  position: absolute;
  z-index: 2;
  inset-inline-end: var(--nf-t-space-2);
  inset-block-end: var(--nf-t-space-2);
  display: inline-flex;
  align-items: center;
  min-block-size: 32px;
  padding: 0 var(--nf-t-space-2);
  border: 1px solid var(--nf-t-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--nf-t-surface) 90%, transparent);
  color: var(--nf-t-text);
  font-size: var(--nf-t-text-sm);
  font-weight: var(--nf-t-weight-bold);
  line-height: var(--nf-t-leading-tight);
  text-decoration: none;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.16);
  opacity: 0.88;
  transition: opacity var(--nf-t-motion);
}

.nf-public-comic__report:hover,
.nf-public-comic__report:focus-visible {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.nf-public-comic__cover[data-image-error="true"] .nf-public-comic__report {
  display: none;
}

.nf-public-comic__body {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: var(--nf-t-space-2);
  padding: var(--nf-t-space-4);
}

.nf-public-comic__title {
  margin: 0;
  overflow-wrap: anywhere;
  font-family: var(--nf-t-font-heading);
  font-size: var(--nf-t-text-xl);
  line-height: var(--nf-t-leading-tight);
}

.nf-public-comic__cover-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.nf-public-comic__cover-link:focus-visible,
.nf-public-comic__title-link:focus-visible {
  outline: var(--nf-t-focus-ring-width) solid var(--nf-t-focus);
  outline-offset: var(--nf-t-focus-ring-offset);
}

.nf-public-comic__title-link {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: inherit;
  text-decoration: none;
}

.nf-public-comic__title-link:hover {
  color: var(--nf-t-accent-text);
  text-decoration: underline;
  text-underline-offset: .18em;
}

.nf-public-comic__identity,
.nf-public-comic__condition {
  margin: 0;
  color: var(--nf-t-text-muted);
  font-size: var(--nf-t-text-sm);
}

.nf-public-comic__identity {
  color: var(--nf-t-text);
  font-weight: var(--nf-t-weight-bold);
}

.nf-public-comic__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--nf-t-space-1);
}

.nf-public-comic__fact--sold {
  border-color: var(--nf-t-warn);
  color: var(--nf-t-warn-text);
}

.nf-public-comic__fact--archived {
  border-style: dashed;
  color: var(--nf-t-text-muted);
}

.nf-public-comic__fact--unavailable {
  border-style: dashed;
  color: var(--nf-t-text-muted);
}

/* A sold copy stays on the shelf as a trophy: the same card with a warm edge
 * and no stock facts. An archived copy is retired and reads quieter than
 * stock; its badge, not the tint alone, names the state. */
.nf-public-comic--trophy {
  border-color: var(--nf-t-warn);
}

.nf-public-comic--trophy .nf-public-comic__cover {
  border-bottom-color: var(--nf-t-warn);
}

.nf-public-comic--archived .nf-public-comic__cover {
  filter: grayscale(1);
  opacity: 0.85;
}

.nf-public-comic--archived .nf-public-comic__title-link {
  color: var(--nf-t-text-muted);
}

.nf-public-comic--unavailable .nf-public-comic__cover {
  filter: grayscale(1);
  opacity: 0.85;
}

.nf-public-comic__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  margin-top: auto;
  padding-top: var(--nf-t-space-3);
}

.nf-public-comic__actions > * {
  width: 100%;
  min-width: 0;
}

.nf-public-discussion__link {
  grid-column: 1 / -1;
  border-color: var(--nf-t-accent);
  background: var(--nf-t-accent-dim);
  color: var(--nf-t-accent-text);
}

.nf-public-discussion__link:hover {
  border-color: var(--nf-t-accent-hover);
  background: var(--nf-t-control-hover);
  color: var(--nf-t-accent-text);
}

.nf-public-social__button.is-liked {
  border-color: var(--nf-t-accent);
  background: var(--nf-t-accent-dim);
  color: var(--nf-t-accent-text);
}

.nf-public-social__reactions {
  display: grid;
  width: min(100%, 390px);
  gap: var(--nf-t-space-2);
  padding: var(--nf-t-space-3);
  border: 1px solid var(--nf-t-border);
  border-radius: var(--nf-t-radius-md);
  background: var(--nf-t-surface);
}

.nf-public-social__summary {
  margin: 0;
  color: var(--nf-t-text-muted);
  font-size: var(--nf-t-text-xs);
}

.nf-public-social__choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nf-t-space-2);
}

.nf-public-social__reaction,
.nf-public-social__retry {
  display: inline-flex;
  min-height: var(--nf-t-control-min);
  align-items: center;
  justify-content: center;
  padding: 0 var(--nf-t-space-3);
  border: 1px solid var(--nf-t-control-border);
  border-radius: var(--nf-t-radius-sm);
  background: var(--nf-t-control-bg);
  box-shadow: var(--nf-t-control-shadow);
  color: var(--nf-t-text);
  cursor: pointer;
  font: inherit;
  font-size: var(--nf-t-text-sm);
  font-weight: var(--nf-t-weight-semibold);
  transition:
    background var(--nf-t-motion) ease,
    border-color var(--nf-t-motion) ease,
    color var(--nf-t-motion) ease,
    box-shadow var(--nf-t-motion) ease;
}

.nf-public-social__reaction:hover,
.nf-public-social__retry:hover {
  border-color: var(--nf-t-accent);
  background: var(--nf-t-control-hover);
}

.nf-public-social__reaction.is-selected {
  border-color: var(--nf-t-accent);
  background: var(--nf-t-accent-dim);
  color: var(--nf-t-accent-text);
}

.nf-public-social__reaction:disabled,
.nf-public-social__retry:disabled {
  border-color: var(--nf-t-control-border);
  background: var(--nf-t-control-disabled-bg);
  box-shadow: none;
  color: var(--nf-t-control-disabled-text);
  cursor: not-allowed;
}

.nf-public-social__retry {
  margin-top: var(--nf-t-space-2);
}

.nf-public-social__button {
  min-width: 132px;
  gap: 7px;
}

.nf-public-social__icon {
  display: block;
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.nf-public-social__button.is-liked .nf-public-social__icon {
  fill: currentColor;
}

.nf-public-social__label {
  white-space: nowrap;
}

.nf-public-store__social-status {
  min-height: 18px;
  margin: 0;
  color: var(--nf-t-text-muted);
  font-size: var(--nf-t-text-xs);
  line-height: var(--nf-t-leading-snug);
  text-align: right;
}

.nf-public-store__social-status:empty {
  visibility: hidden;
}

.nf-public-social__notice {
  padding: 9px 11px;
  border-left: 3px solid var(--nf-t-accent);
  background: var(--nf-t-accent-dim);
  color: var(--nf-t-text);
  font-size: var(--nf-t-text-xs);
}

.nf-public-social__notice[hidden] {
  display: none;
}

.nf-public-social__notice a,
.nf-public-store__footer a {
  color: var(--nf-t-accent-text);
  font-weight: var(--nf-t-weight-bold);
  text-underline-offset: 3px;
}

.nf-public-store__pagination {
  justify-content: center;
  padding-top: var(--nf-t-space-2);
}

.nf-public-store__page-summary {
  min-width: 110px;
  color: var(--nf-t-text-muted);
  font-size: var(--nf-t-text-sm);
  font-weight: var(--nf-t-weight-bold);
  text-align: center;
}

/* #2977: a store's own mailing-list signup, just above the footer. */
.nf-public-store__signup {
  border-top: 1px solid var(--nf-t-border);
  background: var(--nf-t-surface-raised);
}

.nf-public-store__signup[hidden] {
  display: none;
}

.nf-public-store__signup-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--nf-t-space-3) var(--nf-t-space-5);
  padding-block: var(--nf-t-space-5);
}

.nf-public-store__signup-title {
  margin: 0;
  font-family: var(--nf-t-font-heading);
  font-size: var(--nf-t-text-lg);
  font-weight: var(--nf-t-weight-bold);
  color: var(--nf-t-text);
}

.nf-public-store__signup-lede {
  margin: var(--nf-t-space-1) 0 0;
  color: var(--nf-t-text-muted);
  font-size: var(--nf-t-text-sm);
}

.nf-public-store__signup-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nf-t-space-2);
  flex: 1 1 20rem;
  max-inline-size: 32rem;
}

.nf-public-store__signup-form .nf-public-store__input {
  flex: 1 1 14rem;
  width: auto;
}

.nf-public-store__signup-status {
  flex-basis: 100%;
  margin: 0;
  color: var(--nf-t-text-muted);
  font-size: var(--nf-t-text-sm);
}

.nf-public-store__signup-status:empty {
  display: none;
}

.nf-public-store__footer {
  border-top: 1px solid var(--nf-t-border);
  background: var(--nf-t-surface);
  color: var(--nf-t-text-muted);
  font-size: var(--nf-t-text-sm);
}

.nf-public-store__footer-inner {
  min-height: 72px;
}

.nf-public-store__dialog {
  width: min(920px, calc(100vw - 32px));
  max-width: none;
  max-height: min(760px, calc(100vh - 32px));
  padding: 0;
  overflow: auto;
  border: 1px solid var(--nf-t-border);
  border-radius: var(--nf-t-radius-lg);
  background: var(--nf-t-surface-raised);
  box-shadow: var(--nf-t-popover-shadow);
  color: var(--nf-t-text);
}

.nf-public-store__dialog::backdrop {
  background: var(--nf-t-scrim);
}

.nf-public-detail {
  position: relative;
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  min-width: 0;
}

.nf-public-comic__cover--detail {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  align-self: start;
  border-right: 1px solid var(--nf-t-border);
  border-bottom: 0;
}

.nf-public-detail__copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--nf-t-space-3);
  padding: clamp(28px, 5vw, 48px);
}

.nf-public-detail__close {
  position: absolute;
  z-index: 2;
  top: var(--nf-t-space-3);
  right: var(--nf-t-space-3);
  min-width: 44px;
  padding-inline: var(--nf-t-space-3);
}

.nf-public-detail__title {
  max-width: 20ch;
  margin: 0;
  padding-right: 64px;
  overflow-wrap: anywhere;
  font-family: var(--nf-t-font-heading);
  font-size: var(--nf-t-display-3);
  line-height: var(--nf-t-leading-none);
  letter-spacing: -.03em;
}

.nf-public-detail__identity {
  margin: 0;
  color: var(--nf-t-text-muted);
  font-size: var(--nf-t-text-lg);
  font-weight: var(--nf-t-weight-bold);
}

.nf-public-detail__facts,
.nf-public-store__seller-policy-facts {
  display: grid;
  gap: 0;
  margin: var(--nf-t-space-2) 0 0;
  border-top: 1px solid var(--nf-t-border);
}

.nf-public-detail__fact {
  display: grid;
  grid-template-columns: minmax(110px, .7fr) minmax(0, 1fr);
  gap: var(--nf-t-space-3);
  padding: 11px 0;
  border-bottom: 1px solid var(--nf-t-border);
  font-size: var(--nf-t-text-md);
}

.nf-public-detail__fact dt {
  color: var(--nf-t-text-muted);
  font-weight: var(--nf-t-weight-bold);
}

.nf-public-detail__fact dd {
  margin: 0;
  color: var(--nf-t-text);
  font-weight: var(--nf-t-weight-bold);
  overflow-wrap: anywhere;
}

.nf-public-detail__social {
  display: grid;
  gap: var(--nf-t-space-2);
  margin-top: auto;
  padding-top: var(--nf-t-space-4);
}

.nf-public-quick-view__note {
  margin: 0;
  color: var(--nf-t-text-muted);
  font-size: var(--nf-t-text-sm);
  line-height: var(--nf-t-leading-relaxed);
}

.nf-public-quick-view .nf-public-comic__cover--detail {
  max-height: 460px;
}

.nf-public-copy-page .nf-public-comic__cover--detail {
  border: 0;
  border-radius: var(--nf-t-radius-md);
}

.nf-public-discussion {
  grid-column: 1 / -1;
  min-width: 0;
  padding: clamp(18px, 4vw, 40px);
  border-top: 1px solid var(--nf-t-border);
}

.nf-public-discussion[hidden] { display: none; }

.nf-public-discussion__heading {
  margin: 0 0 var(--nf-t-space-3);
  font-family: var(--nf-t-font-heading);
  font-size: var(--nf-t-text-xl);
}

.nf-public-discussion__context,
.nf-public-discussion__status {
  color: var(--nf-t-text-muted);
  font-size: var(--nf-t-text-md);
  line-height: var(--nf-t-leading-relaxed);
  overflow-wrap: anywhere;
}

.nf-public-discussion__posts {
  display: grid;
  gap: var(--nf-t-space-4);
  padding: 0;
  list-style: none;
}

.nf-public-discussion__post {
  min-width: 0;
  padding: var(--nf-t-space-4);
  border: 1px solid var(--nf-t-border);
  border-radius: var(--nf-t-radius-md);
  background: var(--nf-t-surface);
  overflow-wrap: anywhere;
}

.nf-public-discussion__time {
  display: block;
  margin-top: var(--nf-t-space-1);
  color: var(--nf-t-text-muted);
  font-size: var(--nf-t-text-sm);
}

.nf-public-discussion__raw {
  margin-bottom: 0;
  white-space: pre-wrap;
  font-size: var(--nf-t-text-md);
  line-height: var(--nf-t-leading-relaxed);
}

.nf-public-discussion__composer {
  display: grid;
  gap: var(--nf-t-space-3);
  margin-block: var(--nf-t-space-4);
  padding: var(--nf-t-space-2);
  min-width: 0;
}

.nf-public-discussion__input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 140px;
  padding: var(--nf-t-space-3);
  resize: vertical;
  border: 1px solid var(--nf-t-border);
  border-radius: var(--nf-t-radius-md);
  background: var(--nf-t-surface);
  color: var(--nf-t-text);
  font: inherit;
  font-size: var(--nf-t-text-md);
}

.nf-public-discussion__input:focus-visible {
  outline: var(--nf-t-focus-ring-width) solid var(--nf-t-focus);
  outline-offset: var(--nf-t-focus-ring-offset);
  box-shadow: 0 0 0 6px var(--nf-t-focus-halo);
}

.nf-public-discussion__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nf-t-space-3);
}

.nf-public-discussion__safety {
  display: grid;
  gap: var(--nf-t-space-3);
  margin-top: var(--nf-t-space-3);
  padding: var(--nf-t-space-4);
  border: 1px solid var(--nf-t-border);
  border-radius: var(--nf-t-radius-md);
  background: var(--nf-t-surface-raised);
}

.nf-public-discussion__safety-heading,
.nf-public-discussion__relationship {
  margin: 0;
}

.nf-public-discussion__safety-heading {
  font-family: var(--nf-t-font-heading);
  font-size: var(--nf-t-text-lg);
}

.nf-public-discussion__relationship {
  font-weight: var(--nf-t-weight-bold);
}

.nf-public-discussion__safety-row {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--nf-t-space-2);
}

.nf-public-discussion__safety-row label {
  width: 100%;
  color: var(--nf-t-text-muted);
  font-size: var(--nf-t-text-sm);
  font-weight: var(--nf-t-weight-bold);
}

.nf-public-discussion__select {
  min-width: min(100%, 210px);
  min-height: 44px;
  padding: 9px 36px 9px 12px;
  border: 1px solid var(--nf-t-border);
  border-radius: var(--nf-t-radius-sm);
  background: var(--nf-t-surface);
  color: var(--nf-t-text);
  font: inherit;
}

.nf-public-discussion__select:focus-visible {
  outline: var(--nf-t-focus-ring-width) solid var(--nf-t-focus);
  outline-offset: var(--nf-t-focus-ring-offset);
  box-shadow: 0 0 0 6px var(--nf-t-focus-halo);
}

.nf-public-discussion__appeal {
  padding: 0;
  border: 0;
  background: transparent;
  width: fit-content;
  color: var(--nf-t-accent-text);
  cursor: pointer;
  font: inherit;
  font-weight: var(--nf-t-weight-bold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.nf-public-listing__report {
  display: grid;
  gap: var(--nf-t-space-3);
  margin-top: var(--nf-t-space-5);
  padding: var(--nf-t-space-4);
  border: 1px solid var(--nf-t-border);
  border-radius: var(--nf-t-radius-md);
  background: var(--nf-t-surface-raised);
}

.nf-public-listing__report-title,
.nf-public-listing__report-status {
  margin: 0;
}

.nf-public-listing__report-title {
  font-family: var(--nf-t-font-heading);
  font-size: var(--nf-t-text-lg);
}

.nf-public-listing__report-status {
  color: var(--nf-t-text-muted);
  line-height: var(--nf-t-leading-relaxed);
}

.nf-public-listing__report-form {
  display: grid;
  gap: var(--nf-t-space-3);
  min-width: 0;
}

.nf-public-listing__report-form label {
  color: var(--nf-t-text-muted);
  font-size: var(--nf-t-text-sm);
  font-weight: var(--nf-t-weight-bold);
}

.nf-public-store__skeleton-grid {
  margin-top: calc(var(--nf-t-space-6) * -1);
}

.nf-public-comic--skeleton {
  pointer-events: none;
}

.nf-public-comic--skeleton:hover {
  border-color: var(--nf-t-border);
  box-shadow: var(--nf-t-elev-panel);
  transform: none;
}

.nf-public-comic--skeleton .nf-public-comic__cover,
.nf-public-store__skeleton-line {
  background: var(--nf-t-surface-raised);
  animation: nf-public-store-pulse 1.4s ease-in-out infinite;
}

.nf-public-store__skeleton-line {
  display: block;
  width: 100%;
  height: 13px;
  border-radius: 4px;
}

.nf-public-store__skeleton-line--short {
  width: 42%;
}

@keyframes nf-public-store-pulse {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}

@media (max-width: 820px) {
  .nf-public-store__rail-foot { --nf-shell-utility-size: 44px; }
  .nf-public-storefront[data-nf-shop-authenticated],
  .nf-public-storefront[data-nf-shop-authenticated][data-nf-shop-rail-collapsed] {
    display: block;
  }

  .nf-public-storefront[data-nf-shop-authenticated] > :is(.nf-public-store__header,
    .nf-public-store__main, .nf-public-store__footer) {
    grid-column: auto;
  }

  .nf-public-store__rail {
    position: fixed;
    z-index: calc(var(--nf-t-layer-overlay) + 20);
    inset: 0 auto 0 0;
    width: min(86vw, 280px);
    height: 100vh;
    height: 100dvh;
    transform: translateX(-102%);
    transition: transform var(--nf-t-motion) ease;
  }

  .nf-public-storefront[data-nf-shop-rail-open] .nf-public-store__rail {
    transform: translateX(0);
  }

  .nf-public-store__rail[data-collapsed="true"] .nf-public-store__rail-label {
    display: initial;
  }

  .nf-public-store__rail[data-collapsed="true"] :is(.nf-public-store__rail-brand,
    .nf-public-store__rail-link, .nf-public-store__rail-utility) {
    justify-content: flex-start;
    padding-inline: var(--nf-t-space-2);
  }

  .nf-public-store__rail[data-collapsed="true"] .nf-public-store__rail-heading {
    height: auto;
    padding: var(--nf-t-space-1) var(--nf-t-space-2);
    overflow: visible;
  }

  .nf-public-store__rail-scrim {
    position: fixed;
    z-index: calc(var(--nf-t-layer-chrome) + 4);
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: rgb(0 0 0 / .58);
  }

  .nf-public-storefront[data-nf-shop-authenticated] .nf-public-store__rail-mobile-trigger {
    display: inline-flex;
  }

  .nf-public-store__container {
    width: min(calc(100% - 24px), 1180px);
  }

  .nf-public-store__main {
    gap: var(--nf-t-space-5);
    padding-block: 18px 36px;
  }

  .nf-public-store__hero {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--nf-t-space-2);
    padding: 0 0 var(--nf-t-space-3);
  }

  .nf-public-store__hero-meta {
    width: 100%;
    justify-content: space-between;
  }

  .nf-public-store__toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: var(--nf-t-space-3);
    padding: var(--nf-t-space-4);
  }

  .nf-public-store__marketplace-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
  }

  .nf-public-store__marketplace-toolbar > :first-child,
  .nf-public-store__marketplace-actions {
    grid-column: 1 / -1;
  }

  .nf-public-listing__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .nf-public-order__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .nf-public-store__summary-group {
    width: 100%;
    justify-items: start;
  }

  .nf-public-store__result-summary,
  .nf-public-store__social-status {
    text-align: left;
  }

  .nf-public-store__search {
    width: 100%;
  }

  .nf-public-store__result-summary {
    text-align: left;
  }

  .nf-public-store__grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--nf-t-space-4);
  }

  .nf-public-detail {
    grid-template-columns: minmax(0, 1fr);
  }

  .nf-public-comic__cover--detail {
    width: min(100%, 380px);
    min-height: 360px;
    margin-inline: auto;
    border-right: 0;
    border-bottom: 1px solid var(--nf-t-border);
  }

  .nf-public-detail__copy {
    padding: 28px var(--nf-t-space-5);
  }
}

@media (max-width: 560px) {
  .nf-public-store__container {
    width: min(calc(100% - 16px), 1180px);
  }

  .nf-public-store__brand-subtitle {
    display: none;
  }

  /* The product mark is still a full-sized home control at this width, but
     keeping a truncated product name beside it makes the header look broken.
     The global SHOP destination and the Marketplace page title retain the
     product context; reveal the complete local wordmark again above this
     narrow-layout breakpoint. */
  .nf-public-store__brand-copy {
    display: none;
  }

  .nf-public-store__header-inner {
    gap: var(--nf-t-space-2);
  }

  .nf-public-store__hero,
  .nf-public-storefront-root[data-storefront-mode="marketplace"] .nf-public-store__hero {
    padding: 0 0 var(--nf-t-space-3);
  }

  .nf-public-store__hero-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--nf-t-space-2);
  }

  .nf-public-store__search-row {
    align-items: stretch;
    flex-direction: column;
  }

  .nf-public-store__marketplace-toolbar,
  .nf-public-listing,
  .nf-public-order {
    padding: var(--nf-t-space-4);
  }

  .nf-public-store__marketplace-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nf-public-store__marketplace-toolbar > :first-child,
  .nf-public-store__marketplace-toolbar > .nf-public-store__search,
  .nf-public-store__marketplace-more,
  .nf-public-store__marketplace-actions {
    grid-column: 1 / -1;
  }

  .nf-public-store__marketplace-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nf-public-store__marketplace-actions,
  .nf-public-store__marketplace-actions .nf-public-store__control,
  .nf-public-store__marketplace-nav .nf-public-store__control,
  .nf-public-listing__body-actions,
  .nf-public-listing__body-actions .nf-public-store__control {
    width: 100%;
  }

  .nf-public-listing__body-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .nf-public-listing__ask-price {
    font-size: var(--nf-t-display-4);
  }

  .nf-public-store__marketplace-nav {
    align-items: stretch;
  }

  .nf-public-comic__actions {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .nf-public-marketplace-card__actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .nf-public-discussion__link {
    grid-column: auto;
  }

  .nf-public-store__search-row .nf-public-store__control,
  .nf-public-comic__actions > *,
  .nf-public-store__state-actions .nf-public-store__control {
    width: 100%;
  }

  .nf-public-store__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .nf-public-comic__cover {
    min-height: 280px;
  }

  .nf-public-store__dialog {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
  }

  .nf-public-comic__cover--detail {
    width: 100%;
    min-height: 320px;
  }

  .nf-public-quick-view .nf-public-comic__cover--detail {
    width: min(100%, 190px);
    height: 250px;
    min-height: 0;
    margin-top: var(--nf-t-space-4);
    border: 0;
  }

  .nf-public-quick-view .nf-public-detail__copy {
    gap: var(--nf-t-space-2);
    padding-top: var(--nf-t-space-3);
  }

  .nf-public-quick-view .nf-public-store__control--primary {
    width: 100%;
  }

  .nf-public-detail__copy {
    padding: var(--nf-t-space-5) 18px;
  }

  .nf-public-detail__title {
    padding-right: 58px;
  }

  .nf-public-detail__fact {
    grid-template-columns: minmax(88px, .65fr) minmax(0, 1fr);
  }

  .nf-public-discussion__safety-row,
  .nf-public-discussion__safety-row .nf-public-store__control,
  .nf-public-discussion__select,
  .nf-public-listing__report-form .nf-public-store__control {
    width: 100%;
  }

  .nf-public-store__footer-inner {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    gap: var(--nf-t-space-1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nf-public-storefront *,
  .nf-public-storefront *::before,
  .nf-public-storefront *::after {
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }

  .nf-public-comic:hover {
    transform: none;
  }
}

/* All component-owned scrollers retain wheel, keyboard, touch, and programmatic
   scrolling without drawing a second scrollbar inside the browser viewport. */
.nf-public-storefront :where(*) {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.nf-public-storefront :where(*)::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
/* Canonical universal site bar. Stack adapters only place this component. */
:root {
  /* The physical gap on every main-content edge is intentionally larger than
     the interior rhythm. Keeping this separate prevents a wider canvas from
     inflating card gaps while the rail, topbar and content edges stay aligned. */
  --nf-content-edge-gap: var(--nf-t-space-6);
  --nf-layout-gap: var(--nf-t-space-4);
  /* Card collections use this shared floor instead of fixed column counts.
     The browser adds tracks when space permits and wraps whole cards before
     their content becomes cramped. */
  --nf-content-card-min: 18rem;
  --nf-content-card-max: 25rem;
  /* Stable surface and ink for reviewed dark photos and illustration plates.
     They are intentionally independent of page and accent palettes. */
  --nf-graphic-surface: #060e1b;
  --nf-graphic-ink: #fff5e8;
  --nf-graphic-ink-muted: #ddd2e2;
}

/* #9495 — left navigation remains pure black in light, dark, and device
 * appearance. This shared shell source is emitted into APP, TALK, CP, SHOP,
 * Demo, portal, and gallery theme assets, so no surface can keep a faded rail. */
:root { --nf-global-navigation-bg: #000000; }
:root,
:root[data-theme],
:root[data-theme="light"],
:root[data-theme="dark"],
:root:not([data-theme]) {
  --nf-t-nav-bg: var(--nf-global-navigation-bg);
  --nav-bg: var(--nf-global-navigation-bg);
  --nf-rail: var(--nf-global-navigation-bg);
  --d-sidebar-background: var(--nf-global-navigation-bg);
}
@media (max-width: 820px) {
  :root { --nf-layout-gap: var(--nf-t-space-3); }
}

/* SHOP shares the rail-to-content geometry of every authenticated shell.
   These rules stay here rather than in the storefront sheet so the global
   layout contract has one owner. */
.nf-public-store__main {
  width: calc(100% - (2 * var(--nf-content-edge-gap)));
  margin-inline: var(--nf-content-edge-gap);
  padding-block: var(--nf-content-edge-gap);
}
/* At most three flexible cards per row: a fixed 25rem track left a two-card
   row and an empty third of the canvas when the width fell just short. The
   track floor is a third of the row, so a fourth card never fits. */
.nf-public-store__grid {
  --nf-public-store-grid-gap: var(--nf-t-space-5);
  gap: var(--nf-public-store-grid-gap);
  grid-template-columns: repeat(auto-fill, minmax(max(min(100%, var(--nf-content-card-min)), calc(((100% - (2 * var(--nf-public-store-grid-gap))) / 3) - 1px)), 1fr));
}
@media (max-width: 820px) {
  .nf-public-store__main {
    gap: var(--nf-t-space-5);
  }
  .nf-public-store__grid { --nf-public-store-grid-gap: var(--nf-t-space-4); }
}

/* One outer rhythm: the rail-to-content gap is a physical four-edge inset.
   Route blocks may arrange their children but cannot add a second outer margin. */
body #nf-tenant-app[data-nf-shell-structure="static"] .nf-content > main#nf-main {
  box-sizing: border-box;
  padding: var(--nf-content-edge-gap);
}
#nf-tenant-app :is(#nf-view-root, .nf-page-rhythm, [data-nf3615-home],
  [data-nf3983-marketing-body], [data-nf4001-finances-body],
  [data-nf3992-insights-body], [data-nf4018-crm-body].nf-crm-body--rhythm) {
  gap: var(--nf-layout-gap);
}
#nf-tenant-app :is(#nf-view-root, .nf-page-rhythm,
  [data-nf3983-marketing-body], [data-nf4001-finances-body],
  [data-nf3992-insights-body], [data-nf4018-crm-body].nf-crm-body--rhythm) > * {
  margin-block: 0;
}
#nf-tenant-app .nf-drill-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: var(--nf-t-space-3);
  align-items: start;
}
#nf-tenant-app .nf-drill-val {
  white-space: nowrap;
  min-width: max-content;
}
#nf-tenant-app .nf-drill-val--muted { white-space: normal; min-width: 0; }
#nf-tenant-app :is(.nf-field textarea, textarea.nf-input, textarea.nf-textarea) {
  min-block-size: 6em;
  padding-block: var(--nf-t-space-2);
  resize: vertical;
}
#nf-tenant-app .nf-drill-row:has(> .nf-drill-val--muted) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
@media (max-width: 600px) {
  #nf-tenant-app .nf-drill-row:has(> .nf-drill-val--muted) {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--nf-t-space-1);
  }
  #nf-tenant-app .nf-drill-val--muted { text-align: start; }
  #nf-tenant-app .nf-ebaystore-card {
    flex-direction: column;
    align-items: stretch;
    gap: var(--nf-layout-gap);
    padding: var(--nf-home-card-pad, var(--nf-t-space-3));
  }
  #nf-tenant-app .nf-ebaystore-main,
  #nf-tenant-app .nf-ebaystore-main > div { min-width: 0; }
  #nf-tenant-app .nf-ebaystore-btn {
    align-self: stretch;
    width: auto;
    text-align: center;
    justify-content: center;
  }
  #nf-tenant-app .nf-drill-panel { padding: var(--nf-home-card-pad, var(--nf-t-space-3)); }
}

body[data-nf-navigation-open="true"],
body:has([data-nf-navigation-open="true"]) { overflow: hidden; }

/* Discourse landing pages consume the same outer rhythm as APP. */
body:is(.navigation-topics, .navigation-categories, .navigation-category) #main-outlet {
  padding-block: var(--nf-content-edge-gap);
}
body:is(.navigation-topics, .navigation-categories, .navigation-category) #nf-module-hero {
  margin-block: 0 var(--nf-layout-gap);
}
body:is(.navigation-topics, .navigation-categories, .navigation-category) .list-controls > .container::before,
body:is(.navigation-topics, .navigation-categories, .navigation-category) .list-controls > .container::after {
  /* Native clearfix boxes become empty, spaced items in the flex toolbar. */
  content: none;
}
body:is(.navigation-topics, .navigation-categories, .navigation-category) .navigation-container {
  margin-block: 0;
}
body:is(.navigation-topics, .navigation-categories, .navigation-category) #category-events-calendar {
  margin-block: var(--nf-layout-gap);
}
body:is(.navigation-topics, .navigation-categories, .navigation-category) #category-events-calendar:not(:has(.fc-event)) {
  min-block-size: 0;
  padding: var(--nf-t-space-3) var(--nf-t-space-4);
}
body:is(.navigation-topics, .navigation-categories, .navigation-category) #list-area { margin-bottom: 0; }
body .search-container button.btn.advanced-filters__toggle {
  /* Discourse marks this text-labelled button as no-text. */
  width: auto;
  inline-size: auto;
  min-width: var(--nf-t-control-min);
  max-width: 100%;
  padding-inline: var(--nf-t-space-3);
  gap: var(--nf-t-space-2);
}
@media (max-width: 820px) {
  body.navigation-categories .category-list.with-topics table.topic-list {
    table-layout: fixed;
    width: 100%;
  }
  body.navigation-categories .category-list.with-topics table.topic-list th.main-link {
    width: 85%;
  }
  body.navigation-categories .category-list :is(.badge-category__wrapper,
    .badge-category, .badge-category__name) {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  body.navigation-categories .category-list .badge-category {
    border-radius: var(--nf-t-radius);
  }
}

#nf-crossnav {
  /* The product switcher is intentionally quieter than a workspace toolbar.
     Its logo and account outlet stay full-size internally, while the bar itself
     uses the compact desktop rhythm that frames the app and forum chrome.
     Owner 2026-09-12: the strip is black on every site and in every theme, so
     it reads as the one global bar above each product's own header. */
  --nf-crossnav-bg: #000;
  --nf-crossnav-control: var(--nf-t-control-min);
  --nf-crossnav-identity-aperture: 44%;
  --nf-crossnav-ring-inset: 1px;
  /* This bar is black in every appearance. Keep its ink local to the black
     surface instead of inheriting page text roles from Light or seasonal
     palettes. These two graphic-ink roles are also available to reviewed dark
     artwork elsewhere in the shared UI. */
  --nf-t-nav-text: var(--nf-graphic-ink);
  --nf-t-nav-muted: var(--nf-graphic-ink-muted);
  --nf-t-nav-hover: #171717;
  --nf-t-nav-border: #383838;
  --nav-text: var(--nf-t-nav-text);
  --nav-muted: var(--nf-t-nav-muted);
  background: var(--nf-crossnav-bg);
  background-image: var(--nf-crossnav-art, none);
  background-position: var(--nf-crossnav-art-x, 50%) var(--nf-crossnav-art-y, 50%);
  background-size: cover;
  background-repeat: no-repeat;
  color: var(--nf-t-nav-text);
  font-family: var(--nf-t-font-body);
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--nf-t-space-1);
  min-block-size: calc(var(--nf-crossnav-control) + var(--nf-t-space-1));
  padding: calc(var(--nf-t-space-1) * 0.5) var(--nf-t-space-3);
  font-size: var(--nf-t-text-sm);
  line-height: var(--nf-t-leading-none);
  border-bottom: 1px solid var(--nf-t-nav-border);
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  scroll-padding-inline: calc(var(--nf-crossnav-control) + var(--nf-t-space-2));
  scrollbar-width: none;
}
#nf-crossnav::-webkit-scrollbar { display: none; }
#nf-crossnav a {
  color: var(--nf-t-nav-muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: var(--nf-t-space-5);
  min-height: var(--nf-crossnav-control);
  padding-inline: var(--nf-t-space-2);
  font-weight: var(--nf-t-weight-medium);
  white-space: nowrap;
}
#nf-crossnav a[hidden],
#nf-crossnav [data-nf-admin-link][hidden],
#nf-crossnav [data-nf-demo-link][hidden] { display: none; }
/* Guest discovery links also occur in public menus and page CTAs. */
a[data-nf-demo-link][hidden] { display: none !important; }
#nf-crossnav a:hover { color: var(--nf-t-nav-text); }
#nf-crossnav .nf-crossnav-label-short { display: none; }
#nf-crossnav > a:not(.nf-x-logo):not([hidden]):has(~ a:not(.nf-x-logo):not([hidden])) {
  position: relative;
}
#nf-crossnav > a:not(.nf-x-logo):not([hidden]):has(~ a:not(.nf-x-logo):not([hidden]))::before {
  /* These separators belong to their preceding visible link, so access-based
     hidden destinations never leave a dangling mark in the product switcher. */
  content: "";
  position: absolute;
  inset-inline-end: calc(var(--nf-t-space-1) * -0.5);
  inset-block-start: 50%;
  inline-size: 1px;
  block-size: var(--nf-t-space-3);
  transform: translateY(-50%);
  background: color-mix(in srgb, var(--nf-t-nav-muted) 42%, transparent);
}
/* Brand and account are the same circular control; only their content and
   destinations differ. Keep the frame and interaction ring in one rule. */
#nf-crossnav :is(.nf-x-logo, .nf-crossnav-account-slot :is(a, button)) {
  position: relative;
  box-sizing: border-box;
  flex: 0 0 var(--nf-crossnav-control);
  width: var(--nf-crossnav-control);
  min-width: var(--nf-crossnav-control);
  height: var(--nf-crossnav-control);
  min-height: var(--nf-crossnav-control);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  outline: none;
  box-shadow: none;
}
#nf-crossnav .nf-x-logo + a {
  /* Equal automatic gutters center product links between the two icons. */
  margin-inline-start: auto;
}
#nf-crossnav > .nf-x-logo {
  /* Keep the brand boundary stable while only the product destinations scroll. */
  position: sticky;
  inset-inline-start: 0;
  z-index: 2;
  /* The themed rail artwork must remain visible around the circular mark. */
  background: transparent;
}
#nf-crossnav .nf-x-logo img {
  position: relative;
  z-index: 1;
  display: block;
  width: var(--nf-crossnav-control);
  height: var(--nf-crossnav-control);
  object-fit: contain;
  /* The aperture hides only the PNG rim; the Trove mark stays within it.
     The one live ring belongs to CSS. */
  clip-path: circle(var(--nf-crossnav-identity-aperture));
  animation: none;
  transform: none;
}
#nf-crossnav :is(.nf-x-logo, .nf-crossnav-account-slot :is(a, button))::after {
  content: "";
  position: absolute;
  inset: var(--nf-crossnav-ring-inset);
  z-index: 2;
  border: 1px solid color-mix(in srgb, var(--nf-t-nav-text) 32%, transparent);
  border-radius: 50%;
  pointer-events: none;
}
/* Both identity controls share readiness and interaction feedback. Animate
   their rings only, never the LN artwork, portrait or bar. */
html:not([data-nf-site-ready="true"]) #nf-crossnav :is(.nf-x-logo, .nf-crossnav-account-slot :is(a, button))::after,
#nf-crossnav :is(.nf-x-logo, .nf-crossnav-account-slot :is(a, button)):is(:hover, :focus-visible, :active)::after {
  border-top-color: var(--nf-t-accent);
  animation: nf-crossnav-loader-spin 900ms linear infinite;
}
#nf-crossnav :is(.nf-x-logo, .nf-crossnav-account-slot :is(a, button)):focus-visible::after {
  /* The same single ring supplies a complete, persistent focus boundary. */
  border-color: var(--nf-t-accent);
}
#nf-crossnav :is(.nf-x-logo, .nf-crossnav-account-slot :is(a, button)):focus-visible {
  outline: none;
  box-shadow: none;
}
@keyframes nf-crossnav-loader-spin {
  to { transform: rotate(1turn); }
}
/* The 44px control and existing bar height are shared in every appearance.
   At rest the ring is muted; document readiness ends only the loading state.
   Hover, keyboard focus and press remain usable after the page is ready.
   Reduced motion below retains the highlight without any rotation. */

#nf-crossnav .nf-crossnav-account-slot {
  /* Keep the signed-in outlet usable when the product links need their
     horizontal overflow region. It remains in normal flow (so it still
     reserves the same compact control footprint), but sticks to the bar's
     inline end instead of disappearing past that region at intermediate
     desktop widths. A guest intentionally keeps this reserved slot blank. */
  position: sticky;
  inset-inline-end: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--nf-crossnav-control);
  width: var(--nf-crossnav-control);
  min-width: var(--nf-crossnav-control);
  min-height: var(--nf-crossnav-control);
  margin: 0;
  margin-inline-start: auto;
  padding: 0;
  list-style: none;
  /* Do not paint a square plate behind the circular avatar. Product links
     reserve this slot in normal flow, so the transparent edge remains safe. */
  background: transparent;
}
#nf-crossnav .nf-crossnav-account-slot > li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--nf-crossnav-control);
  min-width: var(--nf-crossnav-control);
  min-height: var(--nf-crossnav-control);
  margin: 0;
  padding: 0;
  list-style: none;
}
#nf-crossnav .nf-crossnav-account-slot > li[hidden] { display: none; }
#nf-crossnav .nf-crossnav-account-slot :is(a, button) {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--nf-crossnav-control);
  min-width: var(--nf-crossnav-control);
  height: var(--nf-crossnav-control);
  min-height: var(--nf-crossnav-control);
  margin: 0;
  padding: 0;
  overflow: visible;
  background: transparent;
  color: var(--nf-t-nav-text);
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  cursor: pointer;
  text-decoration: none;
}
#nf-crossnav .nf-crossnav-account-slot :is(a, button):hover {
  background: transparent;
  color: var(--nf-t-nav-text);
}
#nf-crossnav .nf-crossnav-account-slot img,
#nf-crossnav .nf-crossnav-account-slot .avatar,
#nf-crossnav .nf-crossnav-account-slot svg,
#nf-crossnav .nf-crossnav-account-initials {
  display: block;
  flex: 0 0 var(--nf-crossnav-control);
  width: var(--nf-crossnav-control);
  height: var(--nf-crossnav-control);
  max-width: var(--nf-crossnav-control);
  max-height: var(--nf-crossnav-control);
  border-radius: 50%;
  object-fit: cover;
  clip-path: circle(var(--nf-crossnav-identity-aperture));
  animation: none;
  transform: none;
  border: 0;
  box-shadow: none;
  outline: none;
}
/* APP wraps its portrait and presence indicator together. Clip only the
   artwork, so the independent presence badge stays readable. */
#nf-crossnav .nf-crossnav-account-initials:has(.nf-own-avatar) {
  clip-path: none;
  background: transparent;
}
#nf-crossnav .nf-own-avatar--header {
  background: transparent;
}
#nf-crossnav .nf-own-avatar__fallback:not([hidden]) {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  clip-path: circle(var(--nf-crossnav-identity-aperture));
  background: var(--nf-t-accent-dim);
}
#nf-crossnav .nf-shell-account-avatar > .nf-shell-account-presence {
  z-index: 3;
}
#nf-crossnav .nf-crossnav-account-slot svg {
  padding: 7px;
  box-sizing: border-box;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  background: color-mix(in srgb, var(--nf-t-nav-text) 10%, transparent);
}
#nf-crossnav .nf-crossnav-account-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--nf-t-accent) 62%, var(--nf-crossnav-bg));
  color: var(--nf-t-nav-text);
  font-size: var(--nf-t-text-xs);
  font-weight: var(--nf-t-weight-semibold);
  line-height: var(--nf-t-leading-none);
  letter-spacing: 0.02em;
}

/* Community remains in the shared product bar. Theme now stays in each
   product's own sub-navigation, including this public portal header. */
.site-header .nav-primary > a[href="/community/"] { display: none; }

/* The bar scrolls horizontally, and overflow-x: auto also computes
   overflow-y to auto, so it clips at its padding box: 2px above and below the
   44px controls. An outward ring loses its top and bottom edges; draw it
   inward, as the account chip below does. */
#nf-crossnav > a:focus-visible {
  outline: var(--nf-t-focus-ring-width) solid var(--nf-t-nav-text);
  outline-offset: var(--nf-t-focus-ring-inset);
}
#nf-crossnav > a:not(.nf-x-logo):focus-visible {
  border-radius: var(--nf-t-space-1);
}
#nf-crossnav > a:not(.nf-x-logo)[aria-current="location"] {
  position: relative;
  color: var(--nf-t-nav-text);
  font-weight: var(--nf-t-weight-semibold);
}
#nf-crossnav > a:not(.nf-x-logo)[aria-current="location"]::after {
  content: "";
  position: absolute;
  inset-inline: var(--nf-t-space-2);
  /* Lift only the accent rule for optical centering; labels stay put. */
  inset-block-end: calc(var(--nf-t-space-1) + 5px);
  block-size: 2px;
  border-radius: 999px;
  background: var(--nf-t-accent);
}
@media (max-width: 820px) {
  #nf-crossnav {
    --nf-crossnav-control: var(--nf-t-control-min);
    gap: var(--nf-t-space-1);
    padding-inline: var(--nf-t-space-3);
    font-size: var(--nf-t-text-xs);
  }
  #nf-crossnav a {
    min-width: var(--nf-t-control-min);
    min-height: var(--nf-t-control-min);
    padding-inline: var(--nf-t-space-2);
  }
  #nf-crossnav > a:not(.nf-x-logo):not([hidden]):not(:has(~ a:not(.nf-x-logo):not([hidden]))) {
    margin-inline-end: 0;
  }
  #nf-crossnav .nf-crossnav-label-full { display: none; }
  #nf-crossnav .nf-crossnav-label-short { display: inline; }
}
@media (max-width: 480px) {
  #nf-crossnav {
    gap: var(--nf-t-space-1);
    padding-inline: var(--nf-t-space-2);
  }
  #nf-crossnav > a:not(.nf-x-logo):not([hidden]) {
    /* At phone widths, five short product labels plus two identity controls
       use equal columns. The labels remain centered while the identity slots
       retain their full 44px pointer and touch targets. */
    flex: 0 0 var(--nf-crossnav-control);
    inline-size: var(--nf-crossnav-control);
    min-inline-size: var(--nf-crossnav-control);
    padding-inline: 0;
  }
  #nf-crossnav .nf-x-logo + a { margin-inline-start: 0; }
}
@media (max-width: 360px) {
  #nf-crossnav {
    gap: calc(var(--nf-t-space-1) * 0.5);
    padding-inline: var(--nf-t-space-1);
  }
}
@media (max-width: 340px) {
  #nf-crossnav {
    gap: 0;
    padding-inline: var(--nf-t-space-1);
  }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-nf-site-ready="true"]) #nf-crossnav :is(.nf-x-logo, .nf-crossnav-account-slot :is(a, button))::after,
  #nf-crossnav :is(.nf-x-logo, .nf-crossnav-account-slot :is(a, button)):is(:hover, :focus-visible, :active)::after {
    animation: none;
    border-color: var(--nf-t-accent);
  }
  /* The untouched resting rule stays muted. Highlight only real loading or
     interaction; motion preference does not hide readiness or focus feedback.
     Neither identity image animates in either motion setting. */
}

/* APP and TALK share footer presentation; their adapters retain rail placement. */
body #nf-footer,
#nf-tenant-app .nf-tenant-footer {
  margin-block-start: var(--nf-shell-footer-margin-top);
  border-top: 1px solid var(--nf-t-border);
  background: transparent;
  color: var(--nf-t-text);
  font-family: var(--nf-t-font-body);
  font-size: var(--nf-t-text-xs);
  font-weight: var(--nf-t-weight-regular);
  line-height: var(--nf-t-leading-normal);
  letter-spacing: normal;
  box-sizing: border-box;
  min-width: 0;
}
body #nf-footer,
#nf-tenant-app .nf-tenant-footer > nav {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--nf-shell-footer-gap);
  padding: var(--nf-shell-footer-padding-block-start) var(--nf-shell-footer-padding-inline) var(--nf-shell-footer-padding-block-end);
}
#nf-tenant-app .nf-tenant-footer > nav {
  color: inherit;
  font: inherit;
}
body #nf-footer a,
#nf-tenant-app .nf-tenant-footer > nav a {
  color: inherit;
  font: inherit;
  font-weight: var(--nf-t-weight-regular);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: var(--nf-shell-footer-target);
  min-width: var(--nf-shell-footer-target);
  min-block-size: var(--nf-shell-footer-target);
  min-inline-size: var(--nf-shell-footer-target);
}
body #nf-footer a:hover,
body #nf-footer a:focus-visible,
#nf-tenant-app .nf-tenant-footer > nav a:hover,
#nf-tenant-app .nf-tenant-footer > nav a:focus-visible {
  color: var(--nf-t-text);
  text-decoration: underline;
}
body #nf-footer a:focus-visible,
#nf-tenant-app .nf-tenant-footer > nav a:focus-visible {
  outline: var(--nf-t-focus-ring-width) solid var(--nf-t-focus);
  outline-offset: var(--nf-t-focus-ring-offset);
  box-shadow: 0 0 0 calc(var(--nf-t-focus-ring-width) + var(--nf-t-space-1)) var(--nf-t-focus-halo);
}

/* Keep data columns readable inside Catalog's existing keyboard-scrollable region. */
#nf-view-root .nf-catalog-table { min-width: 1100px; table-layout: auto; }
#nf-view-root .nf-catalog-table :is(th, td) { overflow-wrap: normal; word-break: normal; }
#nf-view-root .nf-catalog-table th,
#nf-view-root .nf-catalog-table :is(th, td):last-child { white-space: nowrap; }
#nf-view-root .nf-catalog-table .nf-catalog-col-title { min-width: 200px; }
#nf-view-root .nf-catalog-table .nf-catalog-col-publisher { min-width: 144px; }
#nf-view-root .nf-catalog-table .nf-catalog-col-issue,
#nf-view-root .nf-catalog-table .nf-catalog-col-year { min-width: 56px; }
#nf-view-root .nf-catalog-table td:last-child > .nf-btn + .nf-btn { margin-inline-start: var(--nf-t-space-2); }
body.navigation-category .category-heading:not(:has(> *)) { display: none; }

/* Native TALK forms and profile summaries adapt to their available width. */
@media (max-width: 767px) {
  body .user-main .summary-category-list table {
    width: 100%;
    table-layout: fixed;
  }
  body .user-main .summary-category-list th.topic-count,
  body .user-main .summary-category-list td.topic-count,
  body .user-main .summary-category-list th.reply-count,
  body .user-main .summary-category-list td.reply-count {
    width: 32px;
    padding-inline: var(--nf-t-space-1);
    font-size: var(--nf-t-text-xs);
    white-space: nowrap;
  }
  body .user-main .summary-category-list td.category-link { padding-inline: var(--nf-t-space-1); }
  body .user-main .summary-category-list .badge-category__wrapper,
  body .user-main .summary-category-list .badge-category {
    max-width: 100%;
    white-space: normal;
  }
  body .user-main .summary-category-list .badge-category { flex-wrap: wrap; }
  body .user-main .summary-category-list .badge-category__name {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: var(--nf-t-text-xs);
  }
  body #user-content .badge-group-list {
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
  }
  body #user-content .badge-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  body .user-preferences .control-group.color-scheme > .controls {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: var(--nf-t-space-3);
  }
  body .user-preferences .control-group.color-scheme > .controls > .control-subgroup {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    flex: 0 0 auto;
  }
  body .user-preferences .control-group.color-scheme .control-subgroup .select-kit {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  body #reply-control.open .composer-fields,
  body #reply-control.open .composer-fields > div.title-and-category {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    height: auto;
    min-height: 0;
    flex-shrink: 0;
    gap: var(--nf-t-space-2);
  }
  body #reply-control.open .title-and-category > div.title-input,
  body #reply-control.open .title-and-category > div.category-input,
  body #reply-control.open .title-and-category > div.tags-input {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
    margin: 0;
  }
  body #reply-control.open .title-input #reply-title {
    flex: 1 1 auto;
    height: var(--nf-t-control-min);
    min-height: var(--nf-t-control-min);
    margin: 0;
  }
  body #reply-control.open .category-input .select-kit,
  body #reply-control.open .tags-input .select-kit {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex: 1 1 auto;
  }
}

@media (min-width: 768px) {
  body .user-main .top-section:has(> .top-sub-section + .top-sub-section)::before,
  body .user-main .top-section:has(> .top-sub-section + .top-sub-section)::after {
    content: none;
    display: none;
  }
  body .user-main .top-section:has(> .top-sub-section + .top-sub-section) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--nf-t-space-4);
    align-items: start;
  }
  body .user-main .top-section:has(> .top-sub-section + .top-sub-section) > .top-sub-section {
    float: none;
    width: auto;
    min-width: 0;
    margin: 0;
  }
}

/* Opt-in scrolling for long selection lists; every row stays mounted. */
.nf-scroll-region--bounded {
  min-inline-size: 0;
  max-inline-size: 100%;
  max-block-size: min(60vh, 32rem);
  max-block-size: min(60dvh, 32rem);
  overflow: auto;
  overscroll-behavior-block: contain;
  scrollbar-gutter: stable;
  padding: var(--nf-t-space-2);
  scroll-padding-block: var(--nf-t-space-2);
}

#nf-tenant-app [data-nf4044-help-body] .nf-help-controls > .nf-btn {
  align-self: end;
}

/* An explicit grid rhythm replaces the panel's child margins. */
.nf-panel.nf-page-rhythm > *:not(:first-child),
.nf-panel.nf-form-stack > *:not(:first-child) {
  margin-block-start: 0;
}

/* Empty deferred status mounts and action groups do not reserve a grid row. */
.nf-form-stack > div:not([class]):empty,
.nf-form-stack > section:not([class]):empty,
.nf-form-stack > .nf-actions:empty {
  display: none;
}

/* Wide data tables scroll within their wrapper; mobile card tables stay fluid. */
.nf-table-wrap > table.nf-table:where(:not(.nf4286-batch-table)) {
  table-layout: auto;
  min-width: max(100%, 640px);
}
.nf-table-wrap > table.nf-table:where(:not(.nf4286-batch-table)) :is(th, td) {
  overflow-wrap: normal;
  word-break: normal;
}
.nf-table-wrap > table.nf-table:where(:not(.nf4286-batch-table)) th {
  white-space: nowrap;
}
.nf-solicitations {
  grid-template-columns: minmax(0, 1fr);
}
.nf-solicitations > * {
  min-width: 0;
}
.nf-solicitations[data-nf3568-tab="order"] .nf-table {
  min-width: max(100%, 1000px);
}
.nf-solicitations[data-nf3568-tab="order"] .nf-table :is(th, td):first-child {
  min-width: 220px;
}

/* Stacked event headings use the available mobile width. */
@media (max-width: 700px) {
  .nf-events-feed__heading > p {
    max-width: none;
    width: 100%;
  }
}
.nf-events-discovery__error:empty {
  display: none;
}

/* Keep the Guest heading outside the separately scrolling dialog body. */
body .nf-guest-modal {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
body .nf-guest-modal__header {
  position: static;
  flex: none;
}
body .nf-guest-modal__content {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Native TALK calendar, navigation and viewport adapters. */
#main-outlet .event-date.event-relative-date.future {
  color: var(--nf-t-text);
}

/* Native topic cells use the control-hover surface while retaining visited
   and metadata ink. Light palettes make that pairing fall below AA, so the
   hovered cell and its compact metadata return to the primary text role. */
body .topic-list .topic-list-data:hover :is(
  .raw-topic-link,
  .raw-topic-link .sr-only,
  .badge-category__name,
  .relative-date,
  .badge-posts .number
) {
  color: var(--nf-t-text);
}

/* Chat core paints the active compact footer label with the raw brand fill.
   Use the theme's contrast-safe accent text role on the dark chat ground. */
body.has-full-page-chat .c-footer .c-footer__item.--active :is(.d-icon, .d-button-label) {
  color: var(--nf-red-text);
}

#main-outlet .fc button.fc-button-primary:not(:disabled).fc-button-active,
#main-outlet .fc button.fc-button-primary:not(:disabled):active {
  /* The installed calendar theme has an !important color using this variable. */
  --d-button-primary-text-color: var(--nf-t-text);
  --fc-button-text-color: var(--nf-t-text);
  color: var(--nf-t-text);
}

/* The calendar plugin fades past events to opacity 0.3, which leaves their
   titles at about 1.7:1 on the dark ground while they remain links. Mark them
   past with the muted text token at full opacity; the category dot stays dim. */
#main-outlet .fc .fc-event-past { opacity: 1; }
#main-outlet .fc .fc-event-past :is(.fc-event-title, .fc-event-time, .fc-list-event-title, .fc-list-event-time) {
  color: var(--nf-t-text-muted);
}
#main-outlet .fc .fc-event-past .fc-daygrid-event-dot { opacity: 0.5; }

/* FullCalendar dims the day numbers of the leading and trailing other-month
   cells to opacity 0.3, about 2.5:1 on dark and 1.9:1 on light, and they
   remain links. Show them in the muted text token at full opacity instead. */
#main-outlet .fc .fc-day-other .fc-daygrid-day-top { opacity: 1; }
#main-outlet .fc .fc-day-other .fc-daygrid-day-number { color: var(--nf-t-text-muted); }

/* Core colours the notifications Filter By value with --tertiary, the brand
   fill (#b5202e), which is 2.6:1 as text on the dark panel. */
body .select-kit.dropdown-select-box.notifications-filter .notifications-filter-header .header-text {
  color: var(--nf-t-accent-text);
}

@media (min-width: 768px) {
  html.has-full-page-chat #main-chat-outlet { grid-template-rows: minmax(0, 1fr); }
  html.has-full-page-chat .full-page-chat .c-routes.--channel {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
  }
  html.has-full-page-chat .full-page-chat .c-routes.--channel > .chat-channel {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
  }
  html.has-full-page-chat body #main-outlet-wrapper {
    height: calc(100dvh - var(--header-offset, 95px));
    min-height: 0;
    grid-template-rows: minmax(0, 1fr) auto;
  }
  html.has-full-page-chat body #main-outlet { min-height: 0; }
  html.has-full-page-chat body #main-outlet-wrapper > .sidebar-wrapper {
    height: calc(100dvh - var(--header-offset, 95px) + var(--header-height, 56px));
    min-height: 0;
  }
}
@media (max-width: 767px) {
  body.tags-page .tag-box {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  body .user-main .user-navigation { min-width: 0; max-width: 100%; margin-block: 0 12px; }
  body .user-main .user-navigation .horizontal-overflow-nav { min-width: 0; max-width: 100%; }
  body .user-main .user-navigation .nav-pills {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--nf-t-space-2);
    overflow-x: auto;
    max-width: 100%;
    padding-block: 0 4px;
    margin: 0;
  }
  body .user-main .user-navigation .nav-pills > li { flex: 0 0 auto; width: auto; min-width: 0; }
  body .user-main .user-navigation .nav-pills > li > a {
    display: inline-flex;
    align-items: center;
    min-height: var(--nf-t-control-min);
    min-width: var(--nf-t-control-min);
    width: auto;
    white-space: nowrap;
    gap: var(--nf-t-space-2);
  }
  body .user-main .user-navigation-primary .nav-pills.main-nav > li > a > span { display: inline; }
  body .fc .fc-col-header-cell { padding: 0; }
  body .fc .fc-col-header-cell-cushion {
    padding: 2px 1px;
    font-size: var(--nf-t-text-xs);
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
  }
  body .fc .fc-header-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nf-t-space-2);
    align-items: center;
  }
  body .fc .fc-header-toolbar .fc-toolbar-chunk { display: contents; }
  body .fc .fc-header-toolbar .fc-toolbar-title { flex: 1 0 100%; margin: 0; }
  body .fc .fc-header-toolbar .fc-button-group { flex: 0 0 auto; max-width: 100%; margin: 0; }
  body .fc .fc-header-toolbar .fc-button {
    flex: 0 0 auto;
    min-width: var(--nf-t-control-min);
    min-height: var(--nf-t-control-min);
    font-size: var(--nf-t-text-md);
    padding-inline: var(--nf-t-space-2);
    white-space: nowrap;
  }
}

/* The in-flow cross-product bar occupies viewport space only while visible.
   The rail stays sticky at zero and expands as that bar scrolls out of view. */
@media (min-width: 821px) {
  #nf-tenant-app[data-nf-shell-structure="static"] .nf-side {
    height: calc(100vh - var(--nf-shell-visible-crossnav, 0px));
    height: calc(var(--nf-shell-rail-height, 100dvh) - var(--nf-shell-visible-crossnav, 0px));
  }
}

/* Only native single-cell Discourse rows use the stacked mobile layout.
   A compressed desktop window can retain multi-cell rows below767px. */
@media (max-width: 767px) {
  body:is(.navigation-topics, .navigation-category) .topic-list:has(> tbody > tr > .topic-list-data:only-child),
  body:is(.navigation-topics, .navigation-category) .topic-list:has(> tbody > tr > .topic-list-data:only-child) > tbody,
  body:is(.navigation-topics, .navigation-category) .topic-list:has(> tbody > tr > .topic-list-data:only-child) > tbody > tr,
  body:is(.navigation-topics, .navigation-category) .topic-list:has(> tbody > tr > .topic-list-data:only-child) > tbody > tr > td {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  body.navigation-topics .topic-list .badge-category__wrapper,
  body.navigation-topics .topic-list .badge-category,
  body.navigation-topics .topic-list .badge-category__name,
  body.navigation-category .topic-list .badge-category__wrapper,
  body.navigation-category .topic-list .badge-category,
  body.navigation-category .topic-list .badge-category__name {
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* Keep specialized data-table width floors above the ordinary table baseline. */
[data-nf4100-definition-table] table.nf-table { min-width: 960px; }
table.nf-table.nf-solicitations__table { min-width: 900px; }

/* Checkbox labels remain one wrapping row with a full touch target. */
.nf-field.nf-field--checkbox {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  min-block-size: var(--nf-t-control-min);
}
.nf-field.nf-field--checkbox > .nf-checkbox { margin: 0; }

/* Live-previewed at320,390 and1440px. Hide only the redundant page-title link;
   retain native header actions, sidebar navigation and topic controls. */
@media (max-width: 379px) {
  .d-header .title > a:has(> .nf-talk-page-title) {
    display: none;
  }

  .d-header .title:has(> a > .nf-talk-page-title) {
    min-width: 0;
  }
}

/* Three-child catalog choices: checkbox, identity, publisher metadata. */
#nf-tenant-app [data-nf4357-existing-list] > .nf-drill-row {
  grid-template-columns: var(--nf-t-control-min) minmax(0, 1fr);
  column-gap: var(--nf-t-space-2);
  row-gap: var(--nf-t-space-1);
  min-block-size: var(--nf-t-control-min);
  align-items: start;
}
#nf-tenant-app [data-nf4357-existing-list] > .nf-drill-row > input {
  grid-column: 1;
  grid-row: 1 / span 2;
  justify-self: center;
  margin: 0;
}
#nf-tenant-app [data-nf4357-existing-list] > .nf-drill-row > span {
  min-inline-size: 0;
  max-inline-size: 100%;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}
#nf-tenant-app [data-nf4357-existing-list] > .nf-drill-row > span:first-of-type {
  grid-column: 2;
  grid-row: 1;
}
#nf-tenant-app [data-nf4357-existing-list] > .nf-drill-row > span:last-of-type {
  grid-column: 2;
  grid-row: 2;
}

/* A closed off-screen drawer must not shade the visible mobile page. */
#nf-tenant-app[data-nf-navigation-open="false"] #nf-primary-navigation[aria-hidden="true"] {
  box-shadow: none;
}

/* Admitted action links in a Settings card grid use its existing title roles. */
#nf-tenant-app [data-sf1023-settings-links] > a.nf-btn {
  justify-content: flex-start;
  align-items: flex-start;
  min-width: 0;
  padding: var(--nf-t-space-3) var(--nf-t-space-4);
  border-color: var(--nf-t-border);
  background: var(--nf-t-surface-raised);
  color: var(--nf-t-text);
  font-family: var(--nf-t-font-heading);
  font-size: var(--nf-t-display-5);
  font-weight: var(--nf-t-weight-black);
  line-height: var(--nf-t-leading-tight);
  text-align: left;
  white-space: normal;
  overflow-wrap: break-word;
  box-shadow: none;
}
#nf-tenant-app [data-sf1023-settings-links] > a.nf-btn:hover {
  background: var(--nf-t-control-hover);
  border-color: var(--nf-t-accent);
}

/* Wide aging rows retain readable identity and a44px action without a full row of button. */
@media (min-width: 761px) {
  #nf-insights-aging-records > li {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--nf-t-space-4);
    align-items: center;
  }
  #nf-insights-aging-records > li > strong {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }
  #nf-insights-aging-records > li > span {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
  }
  #nf-insights-aging-records > li > a {
    grid-column: 2;
    grid-row: 1 / span 2;
    white-space: nowrap;
  }

  /* Keep countdown identity in flow, clear of the event's route controls. */
  #nf-tenant-app .nf-event-countdown-tile:not([hidden]) {
    position: relative;
    inset: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--nf-t-space-2);
    width: max-content;
    min-width: 0;
    min-height: 0;
    max-width: calc(100% - 2 * var(--nf-t-space-5));
    margin: var(--nf-t-space-5) var(--nf-t-space-5) 0 auto;
    padding: var(--nf-t-space-2) var(--nf-t-space-3);
    border-width: 3px;
    border-radius: var(--nf-t-radius-lg);
  }
  #nf-tenant-app .nf-event-countdown-tile .nf-event-countdown__value {
    font-size: var(--nf-t-text-3xl);
  }
  #nf-tenant-app .nf-event-countdown-tile .nf-event-countdown__label {
    margin: 0;
  }
  #nf-tenant-app .nf-event-countdown-tile:not([hidden]) + .nf-event-card__content {
    padding: var(--nf-t-space-4) var(--nf-t-space-5) var(--nf-t-space-5);
    max-width: none;
  }
}

/* Browser-previewed Tracking preferences at320/390/1440px. */
.user-preferences__tracking-topics-wrapper {
  margin-bottom: var(--nf-t-space-4);
}

.user-preferences__tracking-categories-tags-wrapper {
  gap: var(--nf-t-space-4);
}

.user-preferences__tracking-categories-tags-wrapper > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
}

/* Native blank line between currently empty plugin mounts. The mounts remain. */
.user-preferences__tracking-categories-tags-wrapper > div > br {
  display: none;
}

@media (max-width: 767px) {
  .user-preferences__tracking-topics-wrapper {
    margin-bottom: var(--nf-t-space-3);
  }

  .user-preferences__tracking-categories-tags-wrapper {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--nf-t-space-3);
  }

  .user-preferences__tracking-categories-tags-wrapper :is(.category-notifications, .tag-notifications) {
    min-width: 0;
    max-width: 100%;
  }
}

/* Browser-previewed About hierarchy at320/390/1440px. */
.body-page .about__main-content {
  gap: var(--nf-t-space-4);
  align-items: flex-start;
}

.body-page .about__left-side {
  display: flex;
  flex-direction: column;
  gap: var(--nf-t-space-4);
}

.body-page section.about__admins,
.body-page section.about__moderators,
.body-page .about__right-side,
.body-page .about__stats,
.body-page .about__activities {
  margin-block: 0;
}

.body-page .about__stats,
.body-page .about__activities {
  gap: var(--nf-t-space-4);
}

.body-page .about__stats > .about__stats-item,
.body-page .about__activities > .about__activities-item {
  margin: 0;
}

@media (max-width: 767px) {
  .body-page .about__main-content,
  .body-page .about__left-side,
  .body-page .about__stats,
  .body-page .about__activities {
    gap: var(--nf-t-space-3);
  }
}

/* Product-owned scroll regions retain wheel, touch, keyboard and focus
   scrolling. The document root stays outside this selector, leaving the
   browser viewport scrollbar as the only visible scrollbar. */
body :where(*) {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  scrollbar-gutter: auto !important;
}

body :where(*)::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* A route focused into view stopped flush with the rail's clip edge, which
   cut its ring and halo on that side (#7893). Reserve the ring's full reach
   whenever focus scrolls a rail. */
body .sidebar-wrapper .sidebar-sections,
body .sidebar-hamburger-dropdown .sidebar-sections,
body .hamburger-panel .panel-body {
  scroll-padding-block: calc(var(--nf-t-focus-ring-width) + var(--nf-t-space-1));
}

/* Keep native dark icon treatment while mapping every rail paint layer to
   the same global navigation role used by APP. */
body .sidebar-wrapper {
  --nf-rail: var(--nf-t-nav-bg);
}

body .sidebar-wrapper,
body .sidebar-wrapper .sidebar-container {
  background: var(--nf-t-nav-bg);
  --d-sidebar-background: var(--nf-t-nav-bg);
}

@media (min-width: 821px) {
  body #nf-footer::before {
    background: var(--nf-t-nav-bg);
    top: -1px;
  }
}

/* #10094 — shared Support Session banner foundation for APP, SHOP, and portal
   projections. Canonical shared tokens keep future registry themes aligned. */
.nf-support-session {
  position: sticky;
  inset-block-start: 0;
  z-index: 11;
  background: var(--nf-t-surface-raised);
  border-block: 1px solid var(--nf-t-warn);
  color: var(--nf-t-text);
}

html[data-nf-support-visible] {
  scroll-padding-top: calc(
    var(--nf-support-banner-height, 0px) + var(--nf-t-topbar-h) + var(--nf-t-space-2)
  );
}

.nf-support-session__content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--nf-t-space-2) var(--nf-t-space-3);
  max-width: 960px;
  min-block-size: var(--nf-t-control-min);
  margin: 0 auto;
  padding: var(--nf-t-space-2) var(--nf-t-space-4);
  font-size: var(--nf-t-text-sm);
  line-height: var(--nf-t-leading-normal);
}

.nf-support-session__label {
  color: var(--nf-t-warn-text);
  font-weight: var(--nf-t-weight-bold);
}

.nf-support-session__target {
  font-weight: var(--nf-t-weight-semibold);
}

.nf-support-session__mode,
.nf-support-session__countdown {
  color: var(--nf-t-text-muted);
  font-variant-numeric: tabular-nums;
}

.nf-support-session__mode::before,
.nf-support-session__countdown::before {
  content: "·";
  color: var(--nf-t-border);
  margin-inline-end: var(--nf-t-space-2);
}

.nf-support-session__exit {
  min-inline-size: 44px;
  min-block-size: var(--nf-t-control-min);
  padding: var(--nf-t-control-pad-y) var(--nf-t-control-pad-x);
  border: 1px solid var(--nf-t-control-border);
  border-radius: var(--nf-t-radius-sm);
  background: var(--nf-t-control-bg);
  color: var(--nf-t-text);
  cursor: pointer;
  font: inherit;
  font-weight: var(--nf-t-weight-semibold);
}

.nf-support-session__exit:hover:not(:disabled) {
  background: var(--nf-t-control-hover);
}

.nf-support-session__exit:disabled {
  cursor: wait;
  color: var(--nf-t-control-disabled-text);
}

.nf-support-session__exit:focus-visible {
  outline: var(--nf-t-focus-ring-width) solid var(--nf-t-focus);
  outline-offset: var(--nf-t-focus-ring-offset);
}

.nf-support-session__problem {
  color: var(--nf-t-danger);
}

.nf-support-session__target,
.nf-support-session__workspace {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.nf-support-session__content > span {
  max-inline-size: 100%;
}

.nf-support-session__exit {
  flex-shrink: 0;
}

.nf-support-session__announcement {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 320px) {
  .nf-support-session__content {
    flex-direction: column;
    align-items: stretch;
    gap: var(--nf-t-space-1);
    padding-inline: var(--nf-t-space-3);
  }

  .nf-support-session__mode::before,
  .nf-support-session__countdown::before {
    content: "";
    margin: 0;
  }

  .nf-support-session__exit {
    align-self: flex-start;
  }
}