/* ==========================================================================
   nett.css — v2 "Lights Out": the X-native clearing house (dark only)
   Tokens + base + every shared component. No @import, no build step.
   Load after the Google Fonts link:
     https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400..800&family=Geist+Mono:wght@400;500&display=swap
   Pair with assets/nett.js (window.nett). Specimen + QA: site/components.html
   Art direction: design/brand.md (FR). v1 Paper Light is archived in git (b26b95e).

   GUARDRAILS (non-negotiable): no X logo or 𝕏 glyph, no X blue (#1D9BF0), no
   verified ticks, no Reply/Repost/Like/Share row, no "Post" button label, no
   real people or protocols. Non-affiliation line in every footer and receipt.
   SIMULATED / TESTNET DEMO on every live-looking figure.

   CLASS REFERENCE (prefix nt-, BEM-ish: block__element--modifier, is-* = state)
   --------------------------------------------------------------------------
   Shell (v2)  .nt-banner (status strip: .nt-dot + <b>sentence</b> + sentence)
               .nt-shell[data-nt-shell][data-nt-page] (.is-collapsed) > .nt-side + .nt-shell__main
               .nt-side > __top > __brand · __nav > __link[data-nt-nav] (> svg + .nt-side__label)
                       · __foot > __cta (.nt-btn--primary: svg + span) + .nt-account
               .nt-shell__main > .nt-top (> __brand (mobile) · __collapse[data-nt-shell-collapse]
                       · .nt-search · __actions (> __menu)) + main.nt-page + .nt-footer
               .nt-search > input.nt-search__input + svg.nt-search__icon
               .nt-tabbar > __link[data-nt-nav] (mobile bottom bar, 5 icons, sr labels)
               .nt-menu (mobile sheet) > __head (brand + [data-nt-menu-close]) · .nt-search · __list · __foot
               .nt-account > .nt-avatar + __who (> __name + __handle) + .nt-chip
   Utilities   .nt-sr .nt-skip .nt-mono .nt-num .nt-at (@handle, Inter) .nt-muted .nt-strong .nt-unit
               .nt-refunded .nt-nowrap .nt-trunc .nt-measure .nt-stack .nt-cluster .nt-icon
               .nt-only-sm .nt-hide-sm (<= 767)
   Type        .nt-hero (800, two-tone with .nt-tone) .nt-display .nt-title .nt-lead .nt-body .nt-ui
               .nt-small .nt-label (Geist Mono caps, Muted) .nt-kicker (same, Text) .nt-data .nt-prose
               .nt-monument (+ __meta) (v1 live line, kept)
   Layout      .nt-container (1070 content) .nt-grid > .nt-col-N / .nt-col-t-N / .nt-start-N
               .nt-section (--rule) .nt-section__head > __title + .nt-pilltabs + __end
   Rules       .nt-rule (--ink) .nt-double .nt-tear
   Logo        .nt-logo (> svg.nt-logo__lockup | svg.nt-logo__mark + .nt-logo__word) .nt-brand (> __div, __word)
               svg.nt-mark (> .nt-mark__fill) .is-solid .is-settling .nt-logo--settle
               svg.nt-netting (> __flow __flow--in __stem) .is-netting  (motion asset, nett.logo.netting)
   Buttons     .nt-btn + --primary (white pill, one per view) --secondary (outlined) --ghost --inverse
               --lg (44) --sm (32) --block --icon      .nt-iconbtn (--sm)  .nt-link (+ .nt-arrow)
               .nt-copy  .nt-filter (+ __value)  .nt-pause
   Forms       .nt-field __label __help __error  .nt-input (--app --mono)  .nt-textarea  .nt-handle + __at
               .nt-select  .nt-checkbox  .nt-seg + __opt (native radios)
   Status      .nt-marker[data-state] (Signal only when settled) .nt-status .nt-chip (+ __word)
               .nt-chip--demo (SIMULATED badge) .nt-livechip .nt-dot (.is-blink, [data-nt-blink]) .nt-paused
   Figures     .nt-figures (--app --3 --2) > .nt-figure __label __value __sub
               .nt-kpis (--nt-kpi-cols) > .nt-kpi (--hero) __label __value __sub   .nt-glow
   Counter     .nt-counter > .nt-counter__vis > __d > __s (odometer, built by nett.counter.roll)
   Post        .nt-posts > li > .nt-post (--compact --row, .is-new .is-open) > .nt-avatar + __body
               > __head (__name __handle __sep __time .nt-chip) __amount __line __meta (__facts __toggle)
               + __details (.nt-kv, .nt-timeline, __actions, __fine)   · row: __side, __side-foot
   Avatar      .nt-avatar (--sm --md --lg --nett), tone in --nt-av (nett.avatar)
   Marquee     .nt-marquee (--reverse, .is-paused) > __track > __group (+ aria-hidden clone)  __bar
   Charts      .nt-chartcard __label __value __sub + .nt-bars > __plot > __bar (.is-today .is-partial) + __axis
   Tabs        .nt-pilltabs > .nt-pilltab (+ __count)  .nt-tabs > .nt-tab (+ __count)  .nt-pager + __pos
   Tables      .nt-table (--app --dense --sticky --claim) --nt-cols / --nt-cols-md; .nt-table-wrap, .nt-table-card
               cells .nt-num .nt-cell--lead .nt-cell--amount .nt-cell--meta .nt-m1..m4; rows .is-new .is-leaving
               .is-selected .nt-row--link   .nt-tx .nt-ago .nt-deplete .nt-feedhead .nt-ledger-foot
   Countdown   .nt-countdown __time __flag .is-expiring .is-expired
   Receipt     .nt-receipt (--page --refunded .is-new) __head __id __sentence (__amount __to) __meta __foot __fine
               .nt-kv __row __row--total     Timeline .nt-timeline > .nt-tl (.is-done) __label __time __delta
   Code        .nt-code __bar __tabs __file __actions __body __pre __line · .tk-key .tk-str .tk-num .tk-lit .tk-punc .tk-com
   Sheet       dialog.nt-sheet __inner __head __top __amount __sub __actions __body __section
   Overlays    .nt-selbar __text __sep __earn   .nt-toaster > .nt-toast + __detail
   FAQ         .nt-faq > .nt-faq__item (<details>) __q __sign __a
   T-account   .nt-taccount __heads __head __body __side __row (--total) __via __net
   Steps       .nt-steps > .nt-step (.is-current) __num __title __text   .nt-checklist > __item (.is-done .is-current)
   Card        .nt-card (--raised) __label __value __foot   .nt-meter + __fill (--nt-value)   .nt-skeleton
   Legacy      .nt-nav __inner __links __link __end __menu · .nt-app .nt-rail __group __link .nt-main .nt-topbar
   Footer      .nt-footer __inner __top __cols __col __block __legal
   Motion      keyframes nt-row-in nt-row-out nt-tint nt-tint-hold nt-tint-card nt-post-in nt-blink nt-fill nt-flow nt-stem
               nt-marquee nt-sheet-in nt-sheet-up nt-rise nt-marker-in nt-sweep-in nt-sweep-fade
   ========================================================================== */

/* ==========================================================================
   0. TOKENS — exact mirror of design/tokens.css (keep in sync)
   ========================================================================== */
/* @tokens:start */
:root {
  color-scheme: dark;

  /* ---------- Colour (LOCK2) --------------------------------------------- */
  --nt-canvas: #000000;           /* Page background. */
  --nt-surface: #0F0F10;          /* Cards, sidebar hover, banner strip. */
  --nt-surface-2: #16181C;        /* Raised card, input fill, active row, sheet, toast. */
  --nt-surface-3: #1D1F23;        /* Hover on a Surface-2 element only. */
  --nt-border: #2F3336;           /* Hairlines, card borders, dividers. */
  --nt-border-strong: #3E4144;    /* Outlined pill buttons, chart bars, focused-idle edges. */
  --nt-text: #E7E9EA;             /* Body text. 17.2:1 on Canvas, 14.6:1 on Surface-2 */
  --nt-text-strong: #FFFFFF;      /* Amounts, headline line 1, names, primary labels. */
  --nt-muted: #7D8187;            /* Secondary text, @handles, headline lines 2+, times.
                                     LOCK2 asked #71767B; that is 4.2:1 on Surface and 3.9:1 on
                                     Surface-2 (fails AA), so we use the xAI muted: 5.4:1 on Canvas,
                                     4.9:1 on Surface, 4.5:1 on Surface-2. Never on Surface-3. */
  --nt-field: #62676C;            /* Documented exception: the edge of an input, select or checkbox
                                     at rest. 3.7:1 on Canvas, 3.1:1 on Surface-2 (WCAG 1.4.11).
                                     Never a divider or text colour. */
  --nt-disabled: #5C6166;         /* Disabled labels only (exempt from contrast). */
  --nt-signal: #FFD84D;           /* THE only hue. 15.2:1 on Canvas. */
  --nt-signal-tint: rgba(255, 216, 77, 0.12);  /* New post / row flash, fades out over 1.6s. */
  --nt-signal-glow: rgba(255, 216, 77, 0.16);  /* Monument sweep band (transient). */
  --nt-inverse-bg: #FFFFFF;       /* The primary pill. One per view. */
  --nt-inverse-fg: #000000;
  --nt-inverse-hover: #D7DBDC;
  --nt-inverse-active: #BFC4C6;
  --nt-scrim: rgba(0, 0, 0, 0.6); /* Behind sheets and the mobile menu. */
  --nt-glass: rgba(0, 0, 0, 0.72);/* Sticky top bar behind a 12px blur. */
  --nt-code-string: #B7BBC0;      /* Strings inside the code panel only. */

  /* Legacy names (v1 Paper Light). Kept so older page CSS still resolves; new code uses the
     names above. */
  --nt-paper: var(--nt-canvas);
  --nt-ink: var(--nt-text);
  --nt-graphite: var(--nt-surface-2);
  --nt-graphite-hover: var(--nt-surface-3);
  --nt-graphite-active: var(--nt-surface);
  --nt-stone: var(--nt-muted);
  --nt-hairline: var(--nt-border);
  --nt-mist: var(--nt-border);
  --nt-wash: var(--nt-surface);
  --nt-highlighter: var(--nt-signal);
  --nt-highlighter-tint: var(--nt-signal-tint);
  --nt-inverse-text: var(--nt-text-strong);
  --nt-inverse-muted: var(--nt-muted);
  --nt-inverse-hairline: var(--nt-border);

  /* ---------- Type families + weights ------------------------------------ */
  --nt-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --nt-font-mono: "Geist Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --nt-w-regular: 400;
  --nt-w-medium: 500;
  --nt-w-bold: 700;
  --nt-w-heavy: 800;              /* Wordmark only (the hero is 700, like X Money and UsePaid). */

  /* ---------- Type scale: size / line-height / tracking ------------------ */
  --nt-fs-hero: clamp(36px, 5.2vw, 68px);      /* Two-tone hero headline, 700 */
  --nt-lh-hero: 1.04;
  --nt-ls-hero: -0.03em;          /* LOCK2: -0.02 to -0.03em */

  --nt-fs-counter: clamp(48px, 7.4vw, 96px);   /* Hero rolling counter, 700, tnum */
  --nt-ls-counter: -0.03em;

  --nt-fs-display: clamp(30px, 3.8vw, 48px);   /* H1 / H2, 700 */
  --nt-lh-display: 1.06;
  --nt-ls-display: -0.03em;

  --nt-fs-title: 20px;            /* Section + card titles, 700 */
  --nt-lh-title: 1.25;
  --nt-ls-title: -0.012em;

  --nt-fs-kpi: clamp(32px, 3.6vw, 48px);       /* KPI counter in a card, 700, tnum */
  --nt-ls-kpi: -0.03em;
  --nt-fs-amount: 30px;           /* Receipt post amount (UsePaid 28–32), 700, tnum */
  --nt-ls-amount: -0.03em;
  --nt-fs-figure: 40px;           /* Statement figure, 700, tnum */
  --nt-lh-figure: 1.05;
  --nt-ls-figure: -0.03em;
  --nt-fs-figure-app: 28px;
  --nt-ls-figure-app: -0.03em;
  --nt-fs-sheet-amount: 40px;
  --nt-fs-sentence: 28px;
  --nt-ls-sentence: -0.025em;
  --nt-fs-monument: max(min(40px, calc((100vw - 32px) / 9.4)), min(6.4vw, 88px));
  --nt-lh-monument: 1.04;
  --nt-ls-monument: -0.03em;

  --nt-fs-lead: 18px;
  --nt-lh-lead: 1.45;
  --nt-ls-lead: -0.008em;

  --nt-fs-body: 15px;             /* X body */
  --nt-lh-body: 1.45;
  --nt-ls-body: 0;

  --nt-fs-nav: 20px;              /* Sidebar labels (UsePaid, X) */
  --nt-fs-question: 17px;
  --nt-fs-menu: 20px;

  --nt-fs-ui: 15px;               /* Buttons (700), tabs, handles */
  --nt-lh-ui: 1.33;
  --nt-fs-table: 14px;

  --nt-fs-small: 13px;
  --nt-lh-small: 1.4;
  --nt-fs-micro: 12px;
  --nt-fs-label: 11px;            /* Geist Mono UPPERCASE badge / label (xAI) */
  --nt-lh-label: 1.3;
  --nt-ls-label: 0.1em;

  --nt-fs-data: 13px;             /* Geist Mono facts: tx, IDs, blocks, times */
  --nt-lh-data: 1.4;
  --nt-fs-code: 13px;
  --nt-lh-code: 1.65;

  /* ---------- Spacing (4px base) ----------------------------------------- */
  --nt-s-1: 4px;
  --nt-s-2: 8px;
  --nt-s-3: 12px;
  --nt-s-4: 16px;                 /* card padding (X) */
  --nt-s-5: 20px;
  --nt-s-6: 24px;
  --nt-s-8: 32px;
  --nt-s-10: 40px;                /* section gap (X) */
  --nt-s-12: 48px;
  --nt-s-16: 64px;
  --nt-s-24: 96px;
  --nt-s-32: 128px;

  --nt-section-pad: 64px;         /* 48 tablet, 40 mobile */
  --nt-gutter: 24px;              /* main column side padding: 24 / 16 */
  --nt-grid-gap: 16px;
  --nt-content: 1070px;           /* main column max (Refero X) */
  --nt-frame: calc(var(--nt-content) + 2 * var(--nt-gutter));
  --nt-measure: 62ch;

  /* ---------- Component sizes -------------------------------------------- */
  --nt-banner-h: 40px;
  --nt-side-w: 275px;             /* sidebar >= 1100 */
  --nt-side-w-c: 72px;            /* collapsed icon rail 768–1099 (and on demand) */
  --nt-top-h: 64px;               /* top bar with the search pill */
  --nt-tabbar-h: 56px;            /* mobile bottom tab bar */
  --nt-nav-h: var(--nt-top-h);    /* legacy name */
  --nt-rail-w: 220px;             /* legacy text rail */
  --nt-sheet-w: 440px;
  --nt-selbar-h: 60px;
  --nt-row-feed: 52px;
  --nt-row-app: 48px;
  --nt-row-dense: 40px;
  --nt-row-stack: 64px;
  --nt-btn-h: 36px;
  --nt-btn-h-lg: 44px;
  --nt-btn-h-sm: 32px;
  --nt-pill-h: 36px;
  --nt-pill-h-sm: 32px;
  --nt-copy-h: 28px;
  --nt-chip-h: 24px;
  --nt-input-h: 48px;
  --nt-input-h-app: 40px;
  --nt-search-h: 44px;
  --nt-avatar: 40px;
  --nt-marker: 8px;

  /* ---------- Radius ------------------------------------------------------ */
  --nt-r-pill: 9999px;            /* buttons, search, chips, tabs, segmented, avatars */
  --nt-r-card: 16px;              /* cards, posts, sheet, code panel */
  --nt-r-input: 12px;             /* inputs, inner chart panel, toast */
  --nt-r-sm: 8px;
  --nt-r-square: 0;               /* legacy */

  /* ---------- Rules ------------------------------------------------------- */
  --nt-rule-w: 1px;
  --nt-rule-hair: 1px solid var(--nt-border);
  --nt-rule-ink: 1px solid var(--nt-border-strong);  /* legacy "starts here" rule */
  --nt-bar-w: 2px;
  --nt-double-gap: 2px;
  --nt-focus: 2px solid var(--nt-signal);
  --nt-focus-inverse: 2px solid var(--nt-signal);
  --nt-focus-offset: 2px;

  /* ---------- Motion ------------------------------------------------------ */
  --nt-ease: cubic-bezier(0.2, 0, 0, 1);         /* the curve. No bounce. */
  --nt-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --nt-d-hover: 120ms;
  --nt-d-marker: 160ms;
  --nt-d-insert: 200ms;           /* new post slides in */
  --nt-d-sheet: 240ms;
  --nt-d-roll: 700ms;             /* odometer digit roll */
  --nt-d-fill: 480ms;             /* hollow stem fills solid on settle */
  --nt-d-sweep-in: 480ms;
  --nt-d-sweep-hold: 900ms;
  --nt-d-sweep-out: 600ms;
  --nt-d-tint: 1600ms;            /* Signal-tint fade on a new post / row */
  --nt-d-tint-reduced: 1200ms;
  --nt-d-receipt-new: 2000ms;
  --nt-d-blink: 900ms;            /* live dot blinks once per settlement */
  --nt-d-copied: 1500ms;
  --nt-d-toast: 4000ms;
  --nt-d-marquee: 50s;            /* 40–60s loop */
  --nt-cadence-min: 2200ms;
  --nt-cadence-max: 4500ms;
  --nt-cadence-reduced: 10000ms;
  --nt-d-step: 3500ms;

  /* ---------- Layers ------------------------------------------------------ */
  --nt-z-sticky: 10;
  --nt-z-side: 40;
  --nt-z-nav: 50;
  --nt-z-tabbar: 55;
  --nt-z-selbar: 60;
  --nt-z-menu: 70;
  --nt-z-sheet: 80;
  --nt-z-toast: 90;
}

@media (max-width: 1023px) {
  :root {
    --nt-section-pad: 48px;
  }
}

@media (max-width: 767px) {
  :root {
    --nt-section-pad: 40px;
    --nt-gutter: 16px;
    --nt-grid-gap: 12px;
    --nt-fs-title: 19px;
    --nt-fs-amount: 28px;
    --nt-top-h: 56px;
  }
}
/* @tokens:end */

/* ==========================================================================
   1. BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--nt-canvas);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nt-banner-h) + var(--nt-top-h) + 16px);
}
body {
  margin: 0;
  min-height: 100vh;
  background: var(--nt-canvas);
  color: var(--nt-text);
  font-family: var(--nt-font-sans);
  font-size: var(--nt-fs-body);
  line-height: var(--nt-lh-body);
  letter-spacing: var(--nt-ls-body);
  font-weight: var(--nt-w-regular);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Pages without the status strip: nothing sits above the sticky bars. */
body:not(:has(> .nt-banner)) { --nt-banner-h: 0px; }

h1, h2, h3, h4, h5, h6 { margin: 0; font-size: inherit; font-weight: inherit; }
p, dl, dd, figure, blockquote, pre { margin: 0; }
:where(ul[class], ol[class]) { margin: 0; padding: 0; list-style: none; }
img, video { display: block; max-width: 100%; height: auto; }
svg { flex-shrink: 0; }
hr { margin: 0; border: 0; }
table { border-collapse: collapse; }
a { color: inherit; }
b, strong { font-weight: var(--nt-w-bold); }

button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { margin: 0; padding: 0; border: 0; background: none; cursor: pointer; text-align: inherit; }
a, button, input, select, textarea, summary, label { touch-action: manipulation; -webkit-tap-highlight-color: rgba(231, 233, 234, 0.08); }

:focus-visible { outline: var(--nt-focus); outline-offset: var(--nt-focus-offset); }
::selection { background: rgba(231, 233, 234, 0.24); color: var(--nt-text-strong); }
[hidden] { display: none !important; }
[id] { scroll-margin-top: calc(var(--nt-banner-h) + var(--nt-top-h) + 16px); }

/* ==========================================================================
   2. UTILITIES
   ========================================================================== */
.nt-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.nt-skip {
  position: absolute; left: 16px; top: -64px; z-index: 100;
  display: inline-flex; align-items: center;
  height: var(--nt-btn-h);
  padding: 0 16px;
  border-radius: var(--nt-r-pill);
  background: var(--nt-inverse-bg); color: var(--nt-inverse-fg);
  font-size: var(--nt-fs-ui); font-weight: var(--nt-w-bold); text-decoration: none;
}
.nt-skip:focus { top: 8px; }

.nt-mono { font-family: var(--nt-font-mono); letter-spacing: 0; }
.nt-num { font-variant-numeric: tabular-nums; }
/* @handle (X convention): Inter, never mono. Weight and colour come from the context:
   bold Text-strong inside a post line, Muted after a display name. */
.nt-at { font-family: var(--nt-font-sans); letter-spacing: 0; overflow-wrap: anywhere; }
.nt-muted { color: var(--nt-muted); }
.nt-stone { color: var(--nt-muted); }
.nt-strong { color: var(--nt-text-strong); font-weight: var(--nt-w-bold); }
.nt-refunded { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--nt-muted); }
.nt-nowrap { white-space: nowrap; }
.nt-nocaps { text-transform: none; letter-spacing: 0; }
.nt-trunc { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt-measure { max-width: var(--nt-measure); }
.nt-stack { display: flex; flex-direction: column; gap: var(--nt-gap, 16px); }
.nt-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nt-gap, 8px); }
.nt-icon { display: inline-block; width: 1.25em; height: 1.25em; vertical-align: -0.25em; flex: none; }
/* One stroke weight at every drawn size (LOCK2: outline, 1.75px): the stroke is measured in
   screen pixels, not in viewBox units, so a 16px chip icon and a 24px nav icon match. */
.nt-icon :is(path, circle, rect, line, polyline, polygon, ellipse) { vector-effect: non-scaling-stroke; }
.nt-only-sm { display: none; }
@media (max-width: 767px) {
  .nt-only-sm { display: revert; }
  .nt-hide-sm { display: none !important; }
}

/* ==========================================================================
   3. TYPOGRAPHY
   Two-tone headlines (X Money): the first sentence in Text-strong, the
   continuation in Muted, always whole sentences: <h1 class="nt-hero">Pay any
   handle. <span class="nt-tone">Settle in public.</span></h1>
   ========================================================================== */
.nt-hero {
  font-size: var(--nt-fs-hero);
  line-height: var(--nt-lh-hero);
  letter-spacing: var(--nt-ls-hero);
  font-weight: var(--nt-w-bold);          /* 700: X Money / UsePaid headline texture (LOCK2 allows 700–800) */
  color: var(--nt-text-strong);
  text-wrap: balance;
}
.nt-display {
  font-size: var(--nt-fs-display);
  line-height: var(--nt-lh-display);
  letter-spacing: var(--nt-ls-display);
  font-weight: var(--nt-w-bold);
  color: var(--nt-text-strong);
  text-wrap: balance;
}
.nt-title {
  font-size: var(--nt-fs-title);
  line-height: var(--nt-lh-title);
  letter-spacing: var(--nt-ls-title);
  font-weight: var(--nt-w-bold);
  color: var(--nt-text-strong);
  text-wrap: balance;
}
.nt-tone { color: var(--nt-muted); }
.nt-lead {
  font-size: var(--nt-fs-lead);
  line-height: var(--nt-lh-lead);
  letter-spacing: var(--nt-ls-lead);
  color: var(--nt-muted);
  text-wrap: pretty;
}
.nt-body { font-size: var(--nt-fs-body); line-height: var(--nt-lh-body); }
.nt-ui { font-size: var(--nt-fs-ui); line-height: var(--nt-lh-ui); }
.nt-small { font-size: var(--nt-fs-small); line-height: var(--nt-lh-small); }
.nt-label,
.nt-kicker {
  font-family: var(--nt-font-mono);
  font-size: var(--nt-fs-label);
  line-height: var(--nt-lh-label);
  letter-spacing: var(--nt-ls-label);
  font-weight: var(--nt-w-regular);
  text-transform: uppercase;
  color: var(--nt-muted);
}
.nt-kicker { color: var(--nt-text); }
.nt-data {
  font-family: var(--nt-font-mono);
  font-size: var(--nt-fs-data);
  line-height: var(--nt-lh-data);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.nt-prose { max-width: var(--nt-measure); color: var(--nt-muted); text-wrap: pretty; }
.nt-prose > * + * { margin-top: 12px; }
.nt-prose strong, .nt-prose b { color: var(--nt-text); }

/* Monument (v1 hero line), kept for compatibility: a live two-line settlement sentence. */
.nt-monument {
  position: relative;
  isolation: isolate;
  min-height: calc(2em * var(--nt-lh-monument));
  font-size: var(--nt-fs-monument);
  line-height: var(--nt-lh-monument);
  letter-spacing: var(--nt-ls-monument);
  font-weight: var(--nt-w-bold);
  font-variant-numeric: tabular-nums;
  color: var(--nt-text-strong);
  text-wrap: balance;
}
.nt-monument .nt-at::after { content: "\A"; white-space: pre; }
.nt-monument__meta {
  margin-top: 16px;
  min-height: calc(1em * var(--nt-lh-data));
  font-family: var(--nt-font-mono);
  font-size: var(--nt-fs-data);
  line-height: var(--nt-lh-data);
  color: var(--nt-muted);
  font-variant-numeric: tabular-nums;
}
.nt-monument__meta .nt-at { color: var(--nt-text); font-weight: var(--nt-w-medium); }
@media (max-width: 767px) { .nt-monument__meta { min-height: calc(2em * var(--nt-lh-data)); } }

/* ==========================================================================
   4. LAYOUT
   ========================================================================== */
.nt-container {
  width: 100%;
  max-width: var(--nt-frame);
  margin-inline: auto;
  padding-inline: var(--nt-gutter);
}
.nt-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--nt-grid-gap);
  row-gap: var(--nt-gap, 32px);
}
.nt-grid > * { grid-column-end: span 12; min-width: 0; }
@media (min-width: 640px) {
  .nt-col-t-1 { grid-column-end: span 1; }   .nt-col-t-2 { grid-column-end: span 2; }
  .nt-col-t-3 { grid-column-end: span 3; }   .nt-col-t-4 { grid-column-end: span 4; }
  .nt-col-t-5 { grid-column-end: span 5; }   .nt-col-t-6 { grid-column-end: span 6; }
  .nt-col-t-7 { grid-column-end: span 7; }   .nt-col-t-8 { grid-column-end: span 8; }
  .nt-col-t-9 { grid-column-end: span 9; }   .nt-col-t-10 { grid-column-end: span 10; }
  .nt-col-t-11 { grid-column-end: span 11; } .nt-col-t-12 { grid-column-end: span 12; }
}
@media (min-width: 1024px) {
  .nt-col-1 { grid-column-end: span 1; }   .nt-col-2 { grid-column-end: span 2; }
  .nt-col-3 { grid-column-end: span 3; }   .nt-col-4 { grid-column-end: span 4; }
  .nt-col-5 { grid-column-end: span 5; }   .nt-col-6 { grid-column-end: span 6; }
  .nt-col-7 { grid-column-end: span 7; }   .nt-col-8 { grid-column-end: span 8; }
  .nt-col-9 { grid-column-end: span 9; }   .nt-col-10 { grid-column-end: span 10; }
  .nt-col-11 { grid-column-end: span 11; } .nt-col-12 { grid-column-end: span 12; }
  .nt-start-1 { grid-column-start: 1; }   .nt-start-2 { grid-column-start: 2; }
  .nt-start-3 { grid-column-start: 3; }   .nt-start-4 { grid-column-start: 4; }
  .nt-start-5 { grid-column-start: 5; }   .nt-start-6 { grid-column-start: 6; }
  .nt-start-7 { grid-column-start: 7; }   .nt-start-8 { grid-column-start: 8; }
  .nt-start-9 { grid-column-start: 9; }   .nt-start-10 { grid-column-start: 10; }
  .nt-start-11 { grid-column-start: 11; } .nt-start-12 { grid-column-start: 12; }
}

/* Sections: rhythm by space and hairlines (X density), never background bands. */
.nt-section { padding-block: var(--nt-section-pad); }
.nt-section + .nt-section { padding-top: 0; }
.nt-section--rule { border-top: var(--nt-rule-hair); }
.nt-section + .nt-section--rule { padding-top: var(--nt-section-pad); }
/* Section head (UsePaid "Recent payments  All Burned Pending   ‹ 1/4 ›"):
   title, optional pill tabs, actions pushed right. */
.nt-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-bottom: 16px;
}
.nt-section__title {
  font-size: var(--nt-fs-title);
  line-height: var(--nt-lh-title);
  letter-spacing: var(--nt-ls-title);
  font-weight: var(--nt-w-bold);
  color: var(--nt-text-strong);
}
.nt-section__end { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* ==========================================================================
   5. RULES
   ========================================================================== */
.nt-rule { height: 1px; background: var(--nt-border); }
.nt-rule--ink { background: var(--nt-border-strong); }
/* Accounting double rule under a settled total (kept from v1, now two 1px Muted lines). */
.nt-double {
  position: relative;
  display: inline-block;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--nt-muted);
}
.nt-double::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  border-bottom: 1px solid var(--nt-muted);
}
.nt-tear {
  display: block;
  height: 1px;
  border: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='1'%3E%3Crect width='4' height='1' fill='%232F3336'/%3E%3C/svg%3E") repeat-x 0 0 / 8px 1px;
}

/* ==========================================================================
   6. LOGO — (a) double-struck n with entry spur. Monochrome only.
   Hollow stem = held in escrow; solid = settled (.nt-mark.is-solid, or the
   fill animation nett.logo.settle()). SVG strings: nett.logo.mark(size),
   nett.logo.lockup(), nett.logo.brand(). Files: design/logo.svg, mark*.svg.
   ========================================================================== */
.nt-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--nt-text-strong);
  text-decoration: none;
  white-space: nowrap;
}
.nt-logo__lockup { display: block; width: auto; height: 28px; }
.nt-logo__mark { display: block; flex: none; width: 24px; height: 24px; overflow: visible; }
.nt-logo__word { font-size: 20px; line-height: 1; font-weight: var(--nt-w-bold); letter-spacing: -0.02em; }
.nt-mark__disc, .nt-mark__rule { fill: currentColor; }           /* v1 markup, still resolves */
.nt-mark { display: block; flex: none; color: currentColor; }
.nt-mark__fill {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: scaleY(0);
}
.nt-mark.is-solid .nt-mark__fill { transform: none; }
.nt-logo--settle .nt-mark__fill,
.nt-mark.is-settling .nt-mark__fill { animation: nt-fill var(--nt-d-fill) var(--nt-ease) both; }

/* (b) "netting": a motion asset, never a logo. Two 3u flows draw up the foot and over the
   shoulder (720ms), then the solid stem drops in (280ms): gross in, net out. nett.logo.net(el). */
.nt-netting { display: block; flex: none; color: var(--nt-text-strong); overflow: visible; }
.nt-netting__flow { stroke-dasharray: 1; stroke-dashoffset: 0; }
.nt-netting__stem { transform-box: fill-box; transform-origin: 50% 0; }
.nt-netting.is-netting .nt-netting__flow { animation: nt-flow 720ms var(--nt-ease) both; }
.nt-netting.is-netting .nt-netting__flow--in { animation-delay: 80ms; }
.nt-netting.is-netting .nt-netting__stem { animation: nt-stem 280ms var(--nt-ease) 700ms both; }

/* X Money header pattern: mark | wordmark (mobile top bar, marketing header). */
.nt-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--nt-text-strong);
  text-decoration: none;
  border-radius: var(--nt-r-sm);
}
.nt-brand__div { width: 1px; height: 20px; background: var(--nt-border); }
.nt-brand__word { font-size: 19px; line-height: 1; font-weight: var(--nt-w-bold); letter-spacing: -0.02em; }

/* ==========================================================================
   7. APP SHELL (UsePaid pattern, every page)
   Desktop >= 1100: sidebar 275px + sticky top bar (search pill, actions).
   768–1099: icon rail 72px (also on demand >= 1100 via the collapse chevron).
   < 768: top bar (brand + Menu) + bottom tab bar. Status strip on top.
   ========================================================================== */
.nt-banner {
  position: sticky;
  top: 0;
  z-index: calc(var(--nt-z-nav) + 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--nt-banner-h);
  padding: 6px var(--nt-gutter);
  background: var(--nt-surface);
  border-bottom: var(--nt-rule-hair);
  font-size: var(--nt-fs-small);
  line-height: 1.35;
  color: var(--nt-text);
  text-align: center;
}
.nt-banner b, .nt-banner strong { color: var(--nt-text-strong); }
.nt-banner a { color: var(--nt-text-strong); text-underline-offset: 3px; }
.nt-banner > span { min-width: 0; }

.nt-shell {
  position: relative;
  display: grid;
  grid-template-columns: var(--nt-side-w) minmax(0, 1fr);
  min-height: calc(100vh - var(--nt-banner-h));
}
/* Full-height divider (the sticky sidebar is shorter than the page). */
.nt-shell::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: calc(var(--nt-side-w) - 1px);
  width: 1px;
  background: var(--nt-border);
  pointer-events: none;
}
.nt-shell__main { min-width: 0; display: flex; flex-direction: column; }
.nt-page { flex: 1 0 auto; width: 100%; max-width: var(--nt-frame); margin-inline: auto; padding: 24px var(--nt-gutter) 0; }

.nt-side {
  position: sticky;
  top: var(--nt-banner-h);
  z-index: var(--nt-z-side);
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--nt-banner-h));
  height: calc(100dvh - var(--nt-banner-h));
  padding: 8px 12px 16px;
  overflow-y: auto;
  scrollbar-width: none;
}
.nt-side::-webkit-scrollbar { display: none; }
.nt-side__top { display: flex; align-items: center; height: var(--nt-top-h); padding-left: 8px; margin-bottom: 4px; }
.nt-side__brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  padding: 0 16px 0 10px;
  border-radius: var(--nt-r-pill);
  color: var(--nt-text-strong);
  text-decoration: none;
  transition: background-color var(--nt-d-hover) var(--nt-ease);
}
.nt-side__brand:hover { background: var(--nt-surface-2); }
.nt-side__brand .nt-mark { width: 24px; height: 24px; }
.nt-side__brand .nt-brand__word { font-size: 21px; }
/* Sidebar status pill (marketing pages): same grammar as .nt-livechip. */
.nt-side__status {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 10px;
  height: 36px;
  margin-left: 4px;
  padding: 0 14px;
  border: var(--nt-rule-hair);
  border-radius: var(--nt-r-pill);
  font-family: var(--nt-font-mono);
  font-size: var(--nt-fs-label);
  letter-spacing: var(--nt-ls-label);
  text-transform: uppercase;
  line-height: 1;
  color: var(--nt-text);
  white-space: nowrap;
}
/* Nav items that are not in this preview say so before they are clicked. */
.nt-soon {
  display: inline-flex;
  align-items: center;
  height: 18px;
  margin-left: 10px;
  padding: 0 6px;
  border: var(--nt-rule-hair);
  border-radius: var(--nt-r-pill);
  font-family: var(--nt-font-mono);
  font-size: 10px;
  font-weight: var(--nt-w-regular);
  letter-spacing: var(--nt-ls-label);
  text-transform: uppercase;
  line-height: 1;
  color: var(--nt-muted);
  vertical-align: middle;
}
.nt-side__group { margin: 16px 0 6px 12px; }
/* Secondary nav group on app pages (Resources): smaller, Muted, under a hairline. */
.nt-side__nav--sub { margin-top: 12px; padding-top: 12px; border-top: var(--nt-rule-hair); }
.nt-side__nav--sub .nt-side__link { min-height: 44px; padding-block: 8px; font-size: 16px; color: var(--nt-muted); }
.nt-side__nav--sub .nt-side__link > svg { width: 22px; height: 22px; margin-inline: 1px; }
.nt-side__nav--sub .nt-side__link:hover { color: var(--nt-text-strong); }
.nt-side__nav { display: flex; flex-direction: column; gap: 2px; }
.nt-side__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 20px;
  min-height: 52px;
  padding: 12px 24px 12px 12px;
  border-radius: var(--nt-r-pill);
  color: var(--nt-text);
  font-size: var(--nt-fs-nav);
  line-height: 24px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--nt-d-hover) var(--nt-ease), color var(--nt-d-hover) var(--nt-ease);
}
.nt-side__link:hover { background: var(--nt-surface-2); color: var(--nt-text-strong); }
.nt-side__link > svg { width: 24px; height: 24px; }
.nt-side__link[aria-current]:not([aria-current="false"]),
.nt-side__link.is-active { color: var(--nt-text-strong); font-weight: var(--nt-w-bold); }
.nt-side__link[aria-current]:not([aria-current="false"]) > svg { stroke-width: 2.25; }
.nt-side__link:focus-visible { outline-offset: -2px; }
.nt-side__foot { display: flex; flex-direction: column; gap: 12px; margin-top: auto; padding: 16px 0 0; }
.nt-side__cta { width: 100%; }
.nt-side__cta > svg { display: none; }

/* Account mini card (app pages): avatar, name, @handle, Testnet. */
.nt-account {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 10px 12px;
  border-radius: var(--nt-r-pill);
  color: var(--nt-text);
  text-decoration: none;
  transition: background-color var(--nt-d-hover) var(--nt-ease);
}
a.nt-account:hover, button.nt-account:hover { background: var(--nt-surface-2); }
.nt-account__who { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.nt-account__name { font-size: var(--nt-fs-ui); font-weight: var(--nt-w-bold); color: var(--nt-text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt-account__handle { font-size: var(--nt-fs-ui); color: var(--nt-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt-account > .nt-chip { margin-left: auto; }

.nt-top {
  position: sticky;
  top: var(--nt-banner-h);
  z-index: var(--nt-z-nav);
  display: grid;
  /* lead · search · actions. Side tracks never shrink below their content; the search
     pill gives way first, and it stays centred whenever both sides fit (same x on every page). */
  grid-template-columns: minmax(max-content, 1fr) minmax(0, 500px) minmax(max-content, 1fr);
  align-items: center;
  gap: 12px;
  height: var(--nt-top-h);
  padding: 0 var(--nt-gutter);
  background: var(--nt-glass);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: var(--nt-rule-hair);
}
.nt-top > * { grid-row: 1; }
.nt-top__brand { display: none; }
.nt-top__lead { grid-column: 1; justify-self: start; display: flex; align-items: center; gap: 8px; min-width: 0; }
.nt-top__title { font-size: var(--nt-fs-title); font-weight: var(--nt-w-bold); letter-spacing: var(--nt-ls-title); color: var(--nt-text-strong); white-space: nowrap; }
.nt-top__actions { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 8px; flex: none; }
.nt-btn.nt-top__menu { display: none; }
/* Collapse chevron straddles the sidebar divider (UsePaid). */
.nt-top__collapse {
  position: absolute;
  left: -16px;
  top: 50%;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-top: -16px;
  border: var(--nt-rule-hair);
  border-radius: var(--nt-r-pill);
  background: var(--nt-canvas);
  color: var(--nt-text);
  transition: background-color var(--nt-d-hover) var(--nt-ease), color var(--nt-d-hover) var(--nt-ease);
}
.nt-top__collapse:hover { background: var(--nt-surface-2); color: var(--nt-text-strong); }
.nt-top__collapse > svg { width: 16px; height: 16px; transition: transform var(--nt-d-sheet) var(--nt-ease); }
.nt-shell.is-collapsed .nt-top__collapse > svg { transform: rotate(180deg); }

/* Search pill (centred in the top bar) */
.nt-search { position: relative; flex: 1 1 auto; min-width: 0; max-width: 560px; margin-inline: auto; }
.nt-top > .nt-search { grid-column: 2; width: 100%; max-width: none; }
.nt-search__icon {
  position: absolute;
  left: 16px;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  color: var(--nt-muted);
  pointer-events: none;
}
.nt-search__input {
  display: block;
  width: 100%;
  height: var(--nt-search-h);
  padding: 0 16px 0 44px;
  border: 1px solid var(--nt-border);
  border-radius: var(--nt-r-pill);
  background: var(--nt-canvas);
  color: var(--nt-text-strong);
  font-size: var(--nt-fs-ui);
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--nt-d-hover) var(--nt-ease), background-color var(--nt-d-hover) var(--nt-ease);
}
.nt-search__input::placeholder { color: var(--nt-muted); opacity: 1; }
.nt-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.nt-search__input:hover { border-color: var(--nt-border-strong); }
.nt-search__input:focus { border-color: var(--nt-text-strong); background: var(--nt-surface); outline: var(--nt-focus); outline-offset: 0; }
.nt-search__input:focus + .nt-search__icon,
.nt-search:focus-within .nt-search__icon { color: var(--nt-text); }

/* Bottom tab bar (X mobile pattern) */
.nt-tabbar { display: none; }

/* --- icon rail: generated twice (768–1099 always; >= 1100 when .is-collapsed) --- */
/* The icon-rail rules below exist twice on purpose: once for 768–1099 (always a rail) and once for
   >= 1100 when the user collapses the sidebar (.nt-shell.is-collapsed). Edit both. */
@media (min-width: 768px) and (max-width: 1099px) {
  .nt-shell { grid-template-columns: var(--nt-side-w-c) minmax(0, 1fr); }
  .nt-shell::before { left: calc(var(--nt-side-w-c) - 1px); }
  .nt-shell .nt-side { align-items: center; padding-inline: 12px; }
  .nt-shell .nt-side__top { padding-left: 0; justify-content: center; }
  .nt-shell .nt-side__brand { width: 44px; padding: 0; justify-content: center; }
  .nt-shell .nt-side__brand > :not(.nt-mark) { display: none; }
  .nt-shell .nt-side__status { align-self: center; width: 36px; margin: 0; padding: 0; justify-content: center; }
  .nt-shell .nt-side__status > :not(.nt-dot), .nt-shell .nt-side__group { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .nt-shell .nt-side__nav { align-items: center; }
  .nt-shell .nt-side__link { align-self: center; gap: 0; padding: 12px; }
  .nt-shell .nt-side__label {
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    z-index: 5;
    padding: 6px 10px;
    border-radius: var(--nt-r-sm);
    background: var(--nt-surface-2);
    border: var(--nt-rule-hair);
    font-size: var(--nt-fs-small);
    line-height: 1.2;
    font-weight: var(--nt-w-medium);
    color: var(--nt-text-strong);
    transform: translateY(-50%);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--nt-d-hover) var(--nt-ease);
  }
  .nt-shell .nt-side__link:is(:hover, :focus-visible) .nt-side__label { opacity: 1; }
  .nt-shell .nt-side { overflow: visible; }
  .nt-shell .nt-side__foot { align-items: center; }
  .nt-shell .nt-side__cta { width: 48px; height: 48px; padding: 0; }
  .nt-shell .nt-side__cta > svg { display: block; width: 22px; height: 22px; }
  .nt-shell .nt-side__cta > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .nt-shell .nt-account { padding: 4px; }
  .nt-shell .nt-account > :not(.nt-avatar) { display: none; }
}
@media (min-width: 1100px) {
  .nt-shell.is-collapsed { grid-template-columns: var(--nt-side-w-c) minmax(0, 1fr); }
  .nt-shell.is-collapsed::before { left: calc(var(--nt-side-w-c) - 1px); }
  .nt-shell.is-collapsed .nt-side { align-items: center; padding-inline: 12px; }
  .nt-shell.is-collapsed .nt-side__top { padding-left: 0; justify-content: center; }
  .nt-shell.is-collapsed .nt-side__brand { width: 44px; padding: 0; justify-content: center; }
  .nt-shell.is-collapsed .nt-side__brand > :not(.nt-mark) { display: none; }
  .nt-shell.is-collapsed .nt-side__status { align-self: center; width: 36px; margin: 0; padding: 0; justify-content: center; }
  .nt-shell.is-collapsed .nt-side__status > :not(.nt-dot), .nt-shell.is-collapsed .nt-side__group { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .nt-shell.is-collapsed .nt-side__nav { align-items: center; }
  .nt-shell.is-collapsed .nt-side__link { align-self: center; gap: 0; padding: 12px; }
  .nt-shell.is-collapsed .nt-side__label {
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    z-index: 5;
    padding: 6px 10px;
    border-radius: var(--nt-r-sm);
    background: var(--nt-surface-2);
    border: var(--nt-rule-hair);
    font-size: var(--nt-fs-small);
    line-height: 1.2;
    font-weight: var(--nt-w-medium);
    color: var(--nt-text-strong);
    transform: translateY(-50%);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--nt-d-hover) var(--nt-ease);
  }
  .nt-shell.is-collapsed .nt-side__link:is(:hover, :focus-visible) .nt-side__label { opacity: 1; }
  .nt-shell.is-collapsed .nt-side { overflow: visible; }
  .nt-shell.is-collapsed .nt-side__foot { align-items: center; }
  .nt-shell.is-collapsed .nt-side__cta { width: 48px; height: 48px; padding: 0; }
  .nt-shell.is-collapsed .nt-side__cta > svg { display: block; width: 22px; height: 22px; }
  .nt-shell.is-collapsed .nt-side__cta > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .nt-shell.is-collapsed .nt-account { padding: 4px; }
  .nt-shell.is-collapsed .nt-account > :not(.nt-avatar) { display: none; }
}
@media (min-width: 768px) and (max-width: 1099px) {
  .nt-top__collapse { display: none; }
}

@media (max-width: 767px) {
  .nt-banner {
    position: static;
    justify-content: flex-start;
    text-align: left;
    font-size: var(--nt-fs-micro);
    padding-block: 8px;
  }
  .nt-shell { display: block; min-height: 0; }
  .nt-shell::before { content: none; }
  .nt-side { display: none; }
  .nt-top { top: 0; display: flex; gap: 8px; }
  .nt-top__brand { display: inline-flex; }
  .nt-top__collapse { display: none; }
  .nt-top .nt-search, .nt-top__lead { display: none; }
  .nt-top__actions { margin-left: auto; }
  /* Phones keep Menu, plus an app page's one primary action when it is marked .nt-top__keep. */
  .nt-top__actions > :not(.nt-top__menu):not(.nt-top__keep) { display: none; }
  .nt-top__actions > .nt-btn.nt-top__keep { height: var(--nt-btn-h-sm); padding: 0 14px; font-size: 14px; }
  .nt-btn.nt-top__menu { display: inline-flex; }
  .nt-page { padding-top: 16px; }
  html { scroll-padding-top: calc(var(--nt-top-h) + 12px); }
  [id] { scroll-margin-top: calc(var(--nt-top-h) + 12px); }

  .nt-tabbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: var(--nt-z-tabbar);
    display: flex;
    height: calc(var(--nt-tabbar-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--nt-glass);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: var(--nt-rule-hair);
  }
  .nt-tabbar__link {
    position: relative;
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    color: var(--nt-muted);
    text-decoration: none;
    transition: color var(--nt-d-hover) var(--nt-ease);
  }
  .nt-tabbar__link > svg { width: 24px; height: 24px; }
  .nt-tabbar__link:hover { color: var(--nt-text); }
  .nt-tabbar__link[aria-current]:not([aria-current="false"]) { color: var(--nt-text-strong); }
  .nt-tabbar__link[aria-current]:not([aria-current="false"]) > svg { stroke-width: 2.25; }
  .nt-tabbar__link[aria-current]:not([aria-current="false"])::after {        /* not colour alone: a 4px bar marks the tab */
    content: "";
    position: absolute;
    bottom: 6px;
    left: 50%;
    width: 4px;
    height: 4px;
    margin-left: -2px;
    border-radius: 50%;
    background: currentColor;
  }
  .nt-tabbar__link:focus-visible { outline-offset: -4px; border-radius: var(--nt-r-input); }
  body:has(> .nt-tabbar) { padding-bottom: calc(var(--nt-tabbar-h) + env(safe-area-inset-bottom, 0px)); }
}

/* Mobile menu sheet (shell and legacy nav). Full screen, own header with Close. */
.nt-menu {
  position: fixed;
  inset: 0;
  z-index: var(--nt-z-menu);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 var(--nt-gutter) 32px;
  background: var(--nt-canvas);
}
.nt-menu__head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: var(--nt-top-h);
  margin: 0 calc(-1 * var(--nt-gutter)) 8px;
  padding: 0 var(--nt-gutter);
  background: var(--nt-canvas);
  border-bottom: var(--nt-rule-hair);
}
.nt-menu .nt-search { margin: 8px 0 16px; max-width: none; flex: none; }
.nt-menu__list { display: flex; flex-direction: column; }
.nt-menu__list a {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 56px;
  font-size: var(--nt-fs-menu);
  color: var(--nt-text);
  text-decoration: none;
}
.nt-menu__list a > svg { width: 24px; height: 24px; }
.nt-menu__list a[aria-current]:not([aria-current="false"]) { font-weight: var(--nt-w-bold); color: var(--nt-text-strong); }
.nt-menu__list a:focus-visible { outline-offset: 2px; border-radius: var(--nt-r-sm); }
.nt-menu__foot { display: flex; flex-direction: column; align-items: stretch; gap: 16px; margin-top: 24px; padding-top: 24px; border-top: var(--nt-rule-hair); }
html.nt-lock { overflow: hidden; }
@media (min-width: 768px) { .nt-shell ~ .nt-menu, .nt-shell .nt-menu { display: none !important; } }

/* ==========================================================================
   8. BUTTONS, LINKS, COPY, FILTERS — every control is a pill
   Primary = white filled pill, one per view. Secondary = outlined pill.
   Ghost = text (+ chevron). Focus = 2px Signal ring following the pill.
   ========================================================================== */
.nt-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--nt-btn-h);
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--nt-r-pill);
  font-family: var(--nt-font-sans);
  font-size: var(--nt-fs-ui);
  line-height: 1;
  font-weight: var(--nt-w-bold);
  letter-spacing: 0;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--nt-d-hover) var(--nt-ease),
              border-color var(--nt-d-hover) var(--nt-ease),
              color var(--nt-d-hover) var(--nt-ease),
              transform 90ms var(--nt-ease);
}
.nt-btn:active:not(:disabled) { transform: scale(0.98); }
.nt-btn > svg { width: 18px; height: 18px; }
.nt-btn--primary,
.nt-btn--inverse { background: var(--nt-inverse-bg); color: var(--nt-inverse-fg); }
.nt-btn--primary:hover,
.nt-btn--inverse:hover { background: var(--nt-inverse-hover); }
.nt-btn--primary:active,
.nt-btn--inverse:active { background: var(--nt-inverse-active); }
.nt-btn--secondary {
  border-color: var(--nt-border-strong);
  background: transparent;
  color: var(--nt-text-strong);
}
.nt-btn--secondary:hover { background: var(--nt-surface-2); }
.nt-btn--secondary[aria-pressed="true"],
.nt-btn--secondary[aria-expanded="true"] { background: var(--nt-surface-2); border-color: var(--nt-text); }
.nt-btn--ghost { padding: 0 12px; background: transparent; color: var(--nt-text); font-weight: var(--nt-w-medium); }
.nt-btn--ghost:hover { background: var(--nt-surface-2); color: var(--nt-text-strong); }
.nt-btn--ghost > svg { width: 16px; height: 16px; }
.nt-btn:disabled,
.nt-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.nt-btn--primary:disabled:hover { background: var(--nt-inverse-bg); }
.nt-btn--secondary:disabled:hover { background: transparent; }
.nt-btn--lg { height: var(--nt-btn-h-lg); padding: 0 22px; font-size: 16px; }
.nt-btn--sm { height: var(--nt-btn-h-sm); padding: 0 14px; font-size: 14px; }
.nt-btn--block { width: 100%; }
.nt-btn--icon { width: var(--nt-btn-h); padding: 0; }
.nt-btn--icon.nt-btn--sm { width: var(--nt-btn-h-sm); }

/* Round icon button (close, pager, chevrons). 36px visual, label via aria-label. */
.nt-iconbtn {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: var(--nt-r-pill);
  color: var(--nt-text);
  transition: background-color var(--nt-d-hover) var(--nt-ease), color var(--nt-d-hover) var(--nt-ease);
}
.nt-iconbtn:hover { background: var(--nt-surface-2); color: var(--nt-text-strong); }
.nt-iconbtn:disabled { color: var(--nt-disabled); background: transparent; cursor: not-allowed; }
.nt-iconbtn > svg { width: 20px; height: 20px; }
.nt-iconbtn--sm { width: 32px; height: 32px; }
.nt-iconbtn--sm > svg { width: 18px; height: 18px; }

.nt-link {
  color: var(--nt-text-strong);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--nt-border-strong);
  transition: text-decoration-color var(--nt-d-hover) var(--nt-ease);
}
.nt-link:hover { text-decoration-color: var(--nt-text-strong); }
.nt-arrow { display: inline-block; margin-left: 4px; text-decoration: none; }

.nt-copy {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  height: var(--nt-copy-h);
  min-width: calc(6ch + 24px);
  padding: 0 12px;
  border: 1px solid var(--nt-border-strong);
  border-radius: var(--nt-r-pill);
  background: transparent;
  font-family: var(--nt-font-mono);
  font-size: var(--nt-fs-micro);
  line-height: 1;
  color: var(--nt-text);
  white-space: nowrap;
  transition: border-color var(--nt-d-hover) var(--nt-ease), background-color var(--nt-d-hover) var(--nt-ease);
}
.nt-copy:hover { background: var(--nt-surface-2); color: var(--nt-text-strong); }
.nt-copy.is-copied { background: var(--nt-surface-2); border-color: var(--nt-text); color: var(--nt-text-strong); }

.nt-filter {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--nt-pill-h-sm);
  padding: 0 14px;
  border: 1px solid var(--nt-border-strong);
  border-radius: var(--nt-r-pill);
  background: transparent;
  font-size: var(--nt-fs-small);
  font-weight: var(--nt-w-medium);
  color: var(--nt-text);
  white-space: nowrap;
  transition: border-color var(--nt-d-hover) var(--nt-ease), background-color var(--nt-d-hover) var(--nt-ease);
}
.nt-filter:hover { background: var(--nt-surface-2); }
.nt-filter[aria-pressed="true"] { background: var(--nt-border); border-color: var(--nt-border); color: var(--nt-text-strong); }
.nt-filter__value { font-family: var(--nt-font-mono); font-size: var(--nt-fs-micro); font-weight: var(--nt-w-regular); color: var(--nt-muted); }
.nt-filter[aria-pressed="true"] .nt-filter__value { color: var(--nt-text); }
.nt-pause { min-width: 88px; }                  /* a button: Inter like every pill (mono is for facts) */
.nt-pause > svg { width: 14px; height: 14px; }

/* ==========================================================================
   9. FORMS
   ========================================================================== */
.nt-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.nt-field__label { font-size: var(--nt-fs-small); line-height: var(--nt-lh-small); font-weight: var(--nt-w-medium); color: var(--nt-text); }
.nt-field__help { font-size: var(--nt-fs-small); line-height: var(--nt-lh-small); color: var(--nt-muted); }
.nt-field__error { font-size: var(--nt-fs-small); line-height: var(--nt-lh-small); font-weight: var(--nt-w-medium); color: var(--nt-text-strong); }
.nt-field__error::before { content: "\00D7\00A0"; }

.nt-input,
.nt-select select,
.nt-textarea {
  display: block;
  width: 100%;
  height: var(--nt-input-h);
  padding: 0 14px;
  border: 1px solid var(--nt-field);
  border-radius: var(--nt-r-input);
  background: var(--nt-surface-2);
  color: var(--nt-text-strong);
  font-family: var(--nt-font-sans);
  font-size: var(--nt-fs-body);
  line-height: 1.2;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--nt-d-hover) var(--nt-ease);
}
.nt-textarea { height: auto; min-height: 96px; padding: 12px 14px; line-height: var(--nt-lh-body); resize: vertical; }
.nt-input::placeholder, .nt-textarea::placeholder { color: var(--nt-muted); opacity: 1; }
.nt-input:hover, .nt-select select:hover, .nt-textarea:hover { border-color: var(--nt-muted); }
.nt-input:focus, .nt-select select:focus, .nt-textarea:focus {
  border-color: var(--nt-text-strong);
  outline: var(--nt-focus);
  outline-offset: 0;
}
.nt-input[readonly] { background: var(--nt-surface); border-color: var(--nt-border); color: var(--nt-text); }
.nt-input:disabled, .nt-select select:disabled { opacity: 0.5; cursor: not-allowed; }
.nt-input--app, .nt-select--app select { height: var(--nt-input-h-app); font-size: var(--nt-fs-ui); border-radius: 10px; }
.nt-input--mono { font-family: var(--nt-font-mono); font-size: 14px; font-variant-numeric: tabular-nums; }
/* Error: white edge + the "×" message. Never red. */
.nt-input[aria-invalid="true"],
.nt-select select[aria-invalid="true"],
.nt-textarea[aria-invalid="true"] { border-color: var(--nt-text); }

.nt-handle { position: relative; display: block; min-width: 0; }
.nt-handle__at {
  position: absolute;
  top: 0; bottom: 0; left: 14px;
  display: flex;
  align-items: center;
  font-size: var(--nt-fs-body);
  color: var(--nt-muted);
  pointer-events: none;
}
.nt-handle .nt-input { padding-left: 30px; }
.nt-handle:has(.nt-input--app) .nt-handle__at,
.nt-handle--app .nt-handle__at { font-size: var(--nt-fs-ui); }

.nt-select { position: relative; display: block; min-width: 0; }
.nt-select select {
  padding-right: 40px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23E7E9EA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 14px 14px;
}
.nt-select option { background: var(--nt-surface-2); color: var(--nt-text); }

.nt-checkbox {
  position: relative;
  display: inline-grid;
  place-content: center;
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1.5px solid var(--nt-field);
  border-radius: 5px;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  vertical-align: middle;
  transition: background-color var(--nt-d-hover) var(--nt-ease), border-color var(--nt-d-hover) var(--nt-ease);
}
.nt-checkbox:hover { border-color: var(--nt-text); }
.nt-checkbox:checked,
.nt-checkbox:indeterminate { background: var(--nt-text-strong); border-color: var(--nt-text-strong); }
.nt-checkbox:checked::before {
  content: "";
  width: 5px;
  height: 9px;
  margin-top: -2px;
  border-right: 2px solid var(--nt-inverse-fg);
  border-bottom: 2px solid var(--nt-inverse-fg);
  transform: rotate(45deg);
}
.nt-checkbox:indeterminate::before { content: ""; width: 8px; height: 2px; background: var(--nt-inverse-fg); }
.nt-checkbox:disabled { opacity: 0.4; cursor: not-allowed; }

/* Segmented control (UsePaid "24h 7d 30d All time"): native radios in a pill track. */
.nt-seg {
  display: inline-flex;
  align-self: flex-start;
  max-width: 100%;
  min-width: 0;
  gap: 2px;
  margin: 0;
  padding: 4px;
  border: var(--nt-rule-hair);
  border-radius: var(--nt-r-pill);
  background: var(--nt-surface);
  overflow-x: auto;
  scrollbar-width: none;
}
.nt-seg::-webkit-scrollbar { display: none; }
.nt-seg > legend { padding: 0; }
.nt-seg__opt { position: relative; display: inline-flex; flex: none; }
.nt-seg__opt input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.nt-seg__opt > span {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 16px;
  border-radius: var(--nt-r-pill);
  font-size: var(--nt-fs-ui);
  font-weight: var(--nt-w-medium);
  line-height: 20px;
  color: var(--nt-muted);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--nt-d-hover) var(--nt-ease), background-color var(--nt-d-hover) var(--nt-ease);
}
.nt-seg__opt > span::after { content: attr(data-label); height: 0; overflow: hidden; visibility: hidden; font-weight: var(--nt-w-bold); }
.nt-seg__opt:hover > span { color: var(--nt-text); }
.nt-seg__opt input:checked + span { background: var(--nt-border); color: var(--nt-text-strong); font-weight: var(--nt-w-bold); }
.nt-seg__opt input:focus-visible + span { outline: var(--nt-focus); outline-offset: 0; }

/* ==========================================================================
   10. STATUS — markers, chips, live dot
   5-state marker SVG (○ ◔ ◑ ◕ ●) in Text-strong; Signal only for Settled.
   ========================================================================== */
.nt-marker {
  display: inline-block;
  flex: none;
  width: var(--nt-marker);
  height: var(--nt-marker);
  color: var(--nt-text-strong);
  vertical-align: middle;
  overflow: visible;
}
.nt-marker[data-state="settled"] { color: var(--nt-signal); }
.nt-marker[data-state="refunded"], .nt-marker[data-state="rejected"] { color: var(--nt-muted); }
.nt-marker.is-morph { animation: nt-marker-in var(--nt-d-marker) var(--nt-ease) both; }
.nt-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--nt-fs-small);
  line-height: 1;
  font-weight: var(--nt-w-medium);
  color: var(--nt-text);
  white-space: nowrap;
}
.nt-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--nt-chip-h);
  padding: 0 10px;
  border: var(--nt-rule-hair);
  border-radius: var(--nt-r-pill);
  background: var(--nt-surface-2);
  font-size: var(--nt-fs-micro);
  line-height: 1;
  font-weight: var(--nt-w-medium);
  color: var(--nt-text);
  white-space: nowrap;
}
.nt-chip[data-state="settled"] { color: var(--nt-text-strong); }
.nt-chip[data-state="refunded"], .nt-chip[data-state="rejected"] { color: var(--nt-muted); }
/* Honesty badges (xAI): Geist Mono caps, tracked, Muted, no fill. */
.nt-chip--demo {
  background: transparent;
  border-color: var(--nt-border);
  font-family: var(--nt-font-mono);
  font-size: var(--nt-fs-label);
  font-weight: var(--nt-w-regular);
  letter-spacing: var(--nt-ls-label);
  text-transform: uppercase;
  color: var(--nt-muted);
}
.nt-livechip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--nt-pill-h-sm);
  padding: 0 12px;
  border: 1px solid var(--nt-border-strong);
  border-radius: var(--nt-r-pill);
  font-family: var(--nt-font-mono);
  font-size: var(--nt-fs-label);
  letter-spacing: var(--nt-ls-label);
  text-transform: uppercase;
  line-height: 1;
  color: var(--nt-text);
  white-space: nowrap;
}
.nt-livechip .nt-marker { color: var(--nt-signal); }
.nt-dot {
  display: inline-block;
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--nt-signal);
  vertical-align: middle;
}
.nt-dot.is-blink { animation: nt-blink var(--nt-d-blink) var(--nt-ease) 1; }
.nt-paused {
  font-family: var(--nt-font-mono);
  font-size: var(--nt-fs-label);
  letter-spacing: var(--nt-ls-label);
  text-transform: uppercase;
  color: var(--nt-muted);
  visibility: hidden;
}
.is-paused .nt-paused, .nt-paused.is-on { visibility: visible; }

/* ==========================================================================
   11. FIGURES, KPI COUNTERS (rolling digits), HERO GLOW
   ========================================================================== */
.nt-figures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px 16px;
  margin: 0;
}
.nt-figures--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nt-figures--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nt-figure { display: flex; flex-direction: column; min-width: 0; container-type: inline-size; }
.nt-figure__label { font-size: var(--nt-fs-small); line-height: var(--nt-lh-small); font-weight: var(--nt-w-medium); color: var(--nt-muted); }
.nt-figure__value {
  margin-top: 6px;
  font-size: min(var(--nt-fs-figure), 15cqi);
  line-height: var(--nt-lh-figure);
  letter-spacing: var(--nt-ls-figure);
  font-weight: var(--nt-w-bold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--nt-text-strong);
}
.nt-unit { font-family: var(--nt-font-mono); font-size: var(--nt-fs-data); letter-spacing: 0; font-weight: var(--nt-w-regular); color: var(--nt-muted); }
.nt-figure__sub { margin-top: 6px; font-size: var(--nt-fs-micro); line-height: 1.4; color: var(--nt-muted); }
.nt-figures--app .nt-figure__value { font-size: min(var(--nt-fs-figure-app), 16cqi); letter-spacing: var(--nt-ls-figure-app); }
@media (max-width: 1023px) { .nt-figures, .nt-figures--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .nt-figure__value { font-size: min(var(--nt-fs-figure-app), 16cqi); letter-spacing: var(--nt-ls-figure-app); }
  .nt-figure--wide { grid-column: 1 / -1; }
}

/* KPI block (UsePaid "Protocol Analytics"): a card of big rolling totals. */
.nt-kpis {
  display: grid;
  grid-template-columns: repeat(var(--nt-kpi-cols, 2), minmax(0, 1fr));
  gap: 24px;
}
.nt-kpi { display: flex; flex-direction: column; min-width: 0; container-type: inline-size; }
.nt-kpi__label { font-size: var(--nt-fs-small); font-weight: var(--nt-w-medium); color: var(--nt-text); }
.nt-kpi__value {
  margin-top: 8px;
  font-size: min(var(--nt-fs-kpi), 14cqi);
  line-height: 1.08;
  letter-spacing: var(--nt-ls-kpi);
  font-weight: var(--nt-w-bold);
  font-variant-numeric: tabular-nums;
  color: var(--nt-text-strong);
  white-space: nowrap;
}
.nt-kpi__sub { margin-top: 6px; font-size: var(--nt-fs-micro); color: var(--nt-muted); }
.nt-kpi--hero .nt-kpi__value { font-size: min(var(--nt-fs-counter), 13cqi); letter-spacing: var(--nt-ls-counter); line-height: 1.02; }
@media (max-width: 767px) { .nt-kpis { grid-template-columns: minmax(0, 1fr); gap: 20px; } }

/* Odometer (nett.counter.roll): each digit is a 0–9 strip that slides. */
.nt-counter { display: inline-flex; align-items: baseline; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nt-counter__vis { display: inline-flex; line-height: 1.1; }
.nt-counter__c { display: inline-block; height: 1.1em; }
.nt-counter__d {
  display: inline-block;
  height: 1.1em;
  overflow: hidden;
  transition: color 900ms var(--nt-ease);
}
.nt-counter__s {
  display: flex;
  flex-direction: column;
  transform: translateY(calc(var(--d, 0) * -1.1em));
  transition: transform var(--nt-d-roll) var(--nt-ease);
}
.nt-counter__s > span { display: block; height: 1.1em; }
.nt-counter__d.is-tick { color: var(--nt-signal); transition: none; }

/* Optional glow behind a hero counter (xAI), <= 6% white. The only radial gradient. */
.nt-glow { position: relative; isolation: isolate; }
.nt-glow::before {
  content: "";
  position: absolute;
  inset: -20% -10%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0));
  pointer-events: none;
}

/* ==========================================================================
   12. TABLES (power users: console, desk) — dark, Border rows, no zebra,
   Geist Mono caps headers. Rows are grid so they can animate and collapse.
   Columns: style="--nt-cols: 96px minmax(0,1.4fr) 140px ..." (+ --nt-cols-md)
   ========================================================================== */
.nt-table {
  --nt-row-h: var(--nt-row-feed);
  --nt-row-total: calc(var(--nt-row-h) + 1px);
  display: block;
  width: 100%;
  font-size: var(--nt-fs-table);
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--nt-text);
}
.nt-table--app { --nt-row-h: var(--nt-row-app); }
.nt-table--dense { --nt-row-h: var(--nt-row-dense); }
.nt-table :is(thead, tbody, tfoot) { display: block; }
.nt-table caption { display: block; }
.nt-table tr {
  position: relative;
  display: grid;
  grid-template-columns: var(--nt-cols, none);
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  border-bottom: var(--nt-rule-hair);
}
.nt-table :is(th, td) {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  height: var(--nt-row-h);
  padding: 0 12px;
  overflow: hidden;
  white-space: nowrap;
  text-align: left;
  font-weight: var(--nt-w-regular);
}
.nt-table th {
  height: 36px;
  font-family: var(--nt-font-mono);
  font-size: var(--nt-fs-label);
  letter-spacing: var(--nt-ls-label);
  text-transform: uppercase;
  color: var(--nt-muted);
}
.nt-table .nt-num { justify-content: flex-end; text-align: right; }
.nt-table td.nt-num { font-weight: var(--nt-w-bold); font-variant-numeric: tabular-nums; color: var(--nt-text-strong); }
.nt-table td.nt-fee { font-family: var(--nt-font-mono); font-size: var(--nt-fs-data); font-weight: var(--nt-w-regular); color: var(--nt-text); }
.nt-table td > .nt-trunc,
.nt-table td > .nt-at { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nt-table td > .nt-at { font-weight: var(--nt-w-bold); color: var(--nt-text-strong); }
.nt-table .nt-settled-in { font-family: var(--nt-font-mono); font-size: var(--nt-fs-micro); color: var(--nt-muted); }
.nt-table tbody tr { transition: background-color var(--nt-d-hover) var(--nt-ease); }
.nt-table tbody tr:hover { background: var(--nt-surface); }
.nt-table tr.is-selected,
.nt-table tr[aria-selected="true"] { background: var(--nt-surface-2); }
.nt-table tr.is-selected::before,
.nt-table tr[aria-selected="true"]::before {
  content: "";
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--nt-text-strong);
}
.nt-table .nt-row--link { cursor: pointer; }
.nt-table .nt-row--link:focus-visible { outline-offset: -2px; }
.nt-table--sticky thead { position: sticky; top: calc(var(--nt-banner-h) + var(--nt-top-h)); z-index: var(--nt-z-sticky); background: var(--nt-canvas); }
.nt-table-wrap { position: relative; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; }
.nt-table-card { padding: 4px 4px 0; border: var(--nt-rule-hair); border-radius: var(--nt-r-card); background: var(--nt-surface); overflow: hidden; overflow: clip; }
.nt-table-card .nt-table tbody tr:last-child .nt-deplete { bottom: 0; }
.nt-table-card .nt-table tbody tr:last-child { border-bottom: 0; }
.nt-table-card .nt-table tbody tr:hover { background: var(--nt-surface-2); }
@media (min-width: 768px) and (max-width: 1023px) {
  .nt-table { min-width: var(--nt-min, 0); }
  .nt-table tr { grid-template-columns: var(--nt-cols-md, var(--nt-cols, none)); }
  .nt-table .nt-hide-md { display: none; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  :is(.nt-app .nt-table, .nt-shell .nt-table, .nt-table--claim) tr { grid-template-columns: var(--nt-cols-md, var(--nt-cols, none)); }
  :is(.nt-app .nt-table, .nt-shell .nt-table, .nt-table--claim) .nt-hide-md { display: none; }
}
/* Tablet widths give the recipient (the key identifier) the room: the fee drops its % sub-value. */
@media (min-width: 768px) and (max-width: 1279px) {
  .nt-shell .nt-table .nt-fee__pct { display: none; }
}
.nt-table tfoot tr { border-top: var(--nt-rule-ink); border-bottom: 0; }
.nt-table tfoot td { font-weight: var(--nt-w-bold); color: var(--nt-text-strong); }
.nt-table tfoot tr:hover { background: transparent; }

.nt-table tr.is-new {
  overflow: hidden;
  animation: nt-row-in var(--nt-d-insert) var(--nt-ease) backwards,
             nt-tint var(--nt-d-tint) var(--nt-ease) backwards;
}
.nt-table tr.is-leaving {
  overflow: hidden;
  pointer-events: none;
  animation: nt-row-out var(--nt-d-insert) var(--nt-ease) forwards;
}

.nt-tx {
  font-family: var(--nt-font-mono);
  font-size: var(--nt-fs-data);
  color: var(--nt-muted);
  text-decoration: none;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  white-space: nowrap;
}
a.nt-tx:hover { color: var(--nt-text-strong); text-decoration-line: underline; }
.nt-ago {
  font-family: var(--nt-font-mono);
  font-size: var(--nt-fs-micro);
  color: var(--nt-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.nt-deplete {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: var(--nt-bar-w);
  background: var(--nt-muted);
  transform-origin: left center;
  transform: scaleX(var(--nt-left, 1));
  pointer-events: none;
}
.nt-feedhead { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 12px; }
.nt-feedhead__end { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.nt-ledger-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  padding-top: 12px;
  font-size: var(--nt-fs-small);
  line-height: 1.5;
  color: var(--nt-muted);
  text-wrap: pretty;
}
.nt-ledger-foot [data-nt-chainline] { font-family: var(--nt-font-mono); font-size: var(--nt-fs-micro); font-variant-numeric: tabular-nums; }

/* Under 768px every row becomes a two-line entry: lead + amount, then mono facts.
   nett.table.fit() drops a fact that would start a third line (kept for screen readers). */
@media (max-width: 767px) {
  .nt-table .nt-hide-sm { display: none !important; }
  .nt-table .nt-only-sm { display: revert; }
  .nt-table .nt-fee__pct { display: none; }
  .nt-table { --nt-row-total: var(--nt-row-stack); }
  .nt-table thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .nt-table tbody { border-top: var(--nt-rule-hair); }
  .nt-table-card .nt-table tbody { border-top: 0; }
  .nt-table tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 6px;
    min-height: var(--nt-row-stack);
    padding: 12px;
  }
  .nt-table tr::after { content: ""; order: 2; flex-basis: 100%; height: 0; }
  .nt-table :is(th, td) { height: auto; padding: 0; order: 7; }
  .nt-table td.nt-cell--select { order: 1; padding-right: 12px; }
  .nt-table td.nt-cell--lead { order: 1; flex: 1 1 0; min-width: 0; padding-right: 12px; }
  .nt-table td.nt-cell--lead .nt-at { font-size: var(--nt-fs-ui); }
  .nt-table td.nt-cell--amount { order: 1; margin-left: auto; font-size: var(--nt-fs-ui); }
  .nt-table td.nt-cell--meta {
    justify-content: flex-start;
    font-family: var(--nt-font-mono);
    font-size: var(--nt-fs-micro);
    font-weight: var(--nt-w-regular);
    color: var(--nt-muted);
  }
  .nt-table td.nt-cell--meta :is(.nt-tx, .nt-ago, .nt-status, .nt-at, .nt-settled-in) { font-size: var(--nt-fs-micro); color: var(--nt-muted); font-weight: var(--nt-w-regular); }
  .nt-table td.nt-cell--meta .nt-status { font-family: var(--nt-font-sans); color: var(--nt-text); }
  .nt-table td.nt-cell--meta::before { content: "\00B7"; margin: 0 6px; color: var(--nt-muted); }
  .nt-table td.nt-cell--meta .nt-countdown { font-size: var(--nt-fs-micro); }
  .nt-table td.nt-m1 { order: 3; }
  .nt-table td.nt-m1::before,
  .nt-table tr:not(:has(> .nt-m1)) > td.nt-m2::before,
  .nt-table tr:not(:has(> .nt-m1, > .nt-m2)) > td.nt-m3::before,
  .nt-table tr:not(:has(> .nt-m1, > .nt-m2, > .nt-m3)) > td.nt-m4::before { content: none; }
  .nt-table td.is-dropped {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .nt-table td.nt-m2 { order: 4; }
  .nt-table td.nt-m3 { order: 5; }
  .nt-table td.nt-m4 { order: 6; }
  .nt-table tfoot tr { min-height: 56px; }
  .nt-table tfoot td { overflow: visible; }
  .nt-table tfoot td:first-child { order: 1; }
  .nt-table tfoot td.nt-num { order: 1; margin-left: auto; }
}

/* Countdown: mono, tabular, fixed width; under 1:00 = Text-strong 500 + "Expiring". */
.nt-countdown {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--nt-font-mono);
  font-size: var(--nt-fs-data);
  font-variant-numeric: tabular-nums;
  color: var(--nt-text);
  white-space: nowrap;
}
.nt-countdown.is-expiring,
.nt-countdown.is-expired { font-weight: var(--nt-w-medium); color: var(--nt-text-strong); }
.nt-countdown__flag { font-size: var(--nt-fs-label); letter-spacing: var(--nt-ls-label); text-transform: uppercase; }

/* ==========================================================================
   13. RECEIPT CARD (nett.receipt.html) + LABEL/VALUE ROWS
   ========================================================================== */
.nt-receipt {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 440px;
  min-width: 0;
  padding: 20px;
  border: var(--nt-rule-hair);
  border-radius: var(--nt-r-card);
  background: var(--nt-surface);
}
.nt-receipt.is-new { animation: nt-tint-card var(--nt-d-receipt-new) var(--nt-ease) backwards; }
.nt-receipt__head { display: flex; align-items: center; gap: 10px; min-height: 24px; }
.nt-receipt__head .nt-mark,
.nt-receipt__head .nt-logo__mark { width: 20px; height: 20px; color: var(--nt-text-strong); }
.nt-receipt__head .nt-chip,
.nt-receipt__head .nt-status { margin-left: auto; }
.nt-receipt__id {
  font-family: var(--nt-font-mono);
  font-size: var(--nt-fs-label);
  letter-spacing: var(--nt-ls-label);
  text-transform: uppercase;
  color: var(--nt-muted);
  white-space: nowrap;
}
.nt-receipt__sentence {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 20px;
  font-size: var(--nt-fs-ui);
  line-height: 1.35;
  font-weight: var(--nt-w-regular);
  color: var(--nt-text);
}
/* Legacy sentence markup ("@alice was paid $500.00") still reads as a headline. */
.nt-receipt__sentence:not(:has(.nt-receipt__amount)) {
  display: block;
  font-size: var(--nt-fs-sentence);
  line-height: 1.12;
  letter-spacing: var(--nt-ls-sentence);
  font-weight: var(--nt-w-bold);
  color: var(--nt-text-strong);
  font-variant-numeric: tabular-nums;
}
.nt-receipt__sentence:not(:has(.nt-receipt__amount)) .nt-at::after { content: "\A"; white-space: pre; }
.nt-receipt__amount {
  font-size: var(--nt-fs-amount);
  line-height: 1.08;
  letter-spacing: var(--nt-ls-amount);
  font-weight: var(--nt-w-bold);
  color: var(--nt-text-strong);
  font-variant-numeric: tabular-nums;
}
.nt-receipt__to .nt-at { font-weight: var(--nt-w-bold); color: var(--nt-text-strong); }
.nt-receipt__meta {
  margin-top: 8px;
  font-family: var(--nt-font-mono);
  font-size: var(--nt-fs-micro);
  line-height: 1.5;
  color: var(--nt-muted);
  font-variant-numeric: tabular-nums;
}
.nt-receipt__meta .nt-at { font-weight: var(--nt-w-medium); color: var(--nt-text); }
.nt-receipt .nt-tear { margin: 16px 0 4px; }
.nt-receipt__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
  font-size: var(--nt-fs-small);
}
.nt-receipt__fine {
  margin-top: 16px;
  padding-top: 12px;
  border-top: var(--nt-rule-hair);
  font-size: var(--nt-fs-micro);
  line-height: 1.5;
  color: var(--nt-muted);
}
.nt-receipt--page { max-width: 600px; padding: 28px; }
.nt-receipt--page .nt-receipt__amount { font-size: 48px; letter-spacing: -0.03em; }
.nt-receipt--page .nt-receipt__sentence { font-size: var(--nt-fs-lead); }
.nt-receipt--refunded .nt-receipt__amount s,
.nt-receipt--refunded .nt-receipt__amount .nt-refunded { color: var(--nt-muted); }
@media (max-width: 767px) {
  .nt-receipt { padding: 16px; }
  .nt-receipt--page { padding: 20px; }
  .nt-receipt--page .nt-receipt__amount { font-size: 36px; }
}

/* A row of facts (nett.facts): wraps between facts, never inside one; the separator leads
   each fact and the one at the start of a line is clipped, so no line ends on a dangling "·". */
.nt-facts { display: block; min-width: 0; overflow: hidden; }
.nt-facts__in { display: flex; flex-wrap: wrap; align-items: baseline; margin-left: -1.15em; }
.nt-fact { flex: none; white-space: nowrap; }
.nt-fact::before { content: "\00B7"; display: inline-block; width: 1.15em; text-align: center; }

.nt-kv { margin: 0; }
.nt-kv__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 38px;
  border-bottom: var(--nt-rule-hair);
}
.nt-kv__row:last-child { border-bottom: 0; }
.nt-kv__row > dt { flex: none; font-size: var(--nt-fs-small); color: var(--nt-muted); white-space: nowrap; }
.nt-kv__row > dd {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
  font-family: var(--nt-font-mono);
  font-size: var(--nt-fs-data);
  color: var(--nt-text);
  font-variant-numeric: tabular-nums;
}
.nt-kv__row > dd .nt-at { font-weight: var(--nt-w-bold); color: var(--nt-text-strong); font-size: var(--nt-fs-small); }
.nt-kv__row > dd :is(.nt-word, .nt-stone) { font-family: var(--nt-font-sans); font-size: var(--nt-fs-small); font-variant-numeric: normal; }
.nt-kv__row > dd .nt-tx { font-size: inherit; }
.nt-kv__row--total { position: relative; min-height: 52px; margin-top: -1px; border-top: var(--nt-rule-ink); border-bottom: 0; }
.nt-kv__row--total > dt { color: var(--nt-text); font-weight: var(--nt-w-medium); }
.nt-kv__row--total > dd { overflow: visible; font-family: var(--nt-font-sans); font-size: var(--nt-fs-lead); font-weight: var(--nt-w-bold); color: var(--nt-text-strong); }
.nt-receipt--refunded .nt-double { padding-bottom: 0; border-bottom: 0; }
.nt-receipt--refunded .nt-double::after { content: none; }

/* ==========================================================================
   14. TIMELINE (Posted, Claimed, Paid via X Money, Proven, Settled)
   ========================================================================== */
.nt-timeline { position: relative; margin: 0; padding: 0; list-style: none; }
.nt-tl {
  position: relative;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  grid-template-rows: 20px 16px;
  column-gap: 12px;
  height: 52px;
}
.nt-tl > .nt-marker { grid-column: 1; grid-row: 1; align-self: center; justify-self: center; }
.nt-tl__label { grid-column: 2; grid-row: 1; font-size: var(--nt-fs-small); line-height: 20px; font-weight: var(--nt-w-medium); color: var(--nt-text-strong); }
.nt-tl__label .nt-at { font-weight: var(--nt-w-bold); }
.nt-tl__time { grid-column: 2; grid-row: 2; font-family: var(--nt-font-mono); font-size: var(--nt-fs-micro); line-height: 16px; color: var(--nt-muted); font-variant-numeric: tabular-nums; }
.nt-tl__delta { grid-column: 3; grid-row: 1; font-family: var(--nt-font-mono); font-size: var(--nt-fs-micro); line-height: 20px; color: var(--nt-muted); text-align: right; font-variant-numeric: tabular-nums; }
.nt-tl + .nt-tl::before {
  content: "";
  position: absolute;
  left: 7.5px;
  top: -36px;
  height: 38px;
  width: 1px;
  background: var(--nt-border);
}
.nt-tl.is-done + .nt-tl.is-done::before { background: var(--nt-muted); }
.nt-tl:not(.is-done) > .nt-marker { color: var(--nt-border-strong); }
.nt-tl:not(.is-done) .nt-tl__label { color: var(--nt-muted); font-weight: var(--nt-w-regular); }
.nt-tl:last-child { height: 36px; }

/* ==========================================================================
   15. RECEIPT POST — the signature component (nett.post.html)
   avatar · Name @handle · 2m · status chip / $500.00 / paid to @alice via
   X Money · filled by @northdesk / mono facts + Details chevron (expands).
   Variants: --compact (marquee), --row (UsePaid payment row).
   ========================================================================== */
.nt-posts { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.nt-posts > li { min-width: 0; }
.nt-post {
  position: relative;
  display: grid;
  grid-template-columns: var(--nt-avatar) minmax(0, 1fr);
  column-gap: 12px;
  min-width: 0;
  padding: 16px;
  border: var(--nt-rule-hair);
  border-radius: var(--nt-r-card);
  background: var(--nt-surface);
  color: var(--nt-text);
  transition: border-color var(--nt-d-hover) var(--nt-ease);
}
.nt-post:hover { border-color: var(--nt-border-strong); }
.nt-post > .nt-avatar { grid-row: 1 / span 2; }
.nt-post__body { min-width: 0; }
.nt-post__head { display: flex; align-items: center; gap: 4px; min-width: 0; min-height: 24px; font-size: var(--nt-fs-ui); line-height: 20px; }
.nt-post__name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--nt-w-bold); color: var(--nt-text-strong); }
.nt-post__handle { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--nt-muted); }
.nt-post__sep, .nt-post__time { flex: none; color: var(--nt-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.nt-post__head > .nt-chip { flex: none; margin-left: auto; }
.nt-post__amount {
  margin-top: 4px;
  font-size: var(--nt-fs-amount);
  line-height: 1.12;
  letter-spacing: var(--nt-ls-amount);
  font-weight: var(--nt-w-bold);
  color: var(--nt-text-strong);
  font-variant-numeric: tabular-nums;
}
.nt-post__amount s { text-decoration-thickness: 2px; text-decoration-color: var(--nt-muted); color: var(--nt-muted); }
.nt-post__line { margin-top: 2px; font-size: var(--nt-fs-ui); line-height: 1.4; color: var(--nt-text); text-wrap: pretty; }
.nt-post__line .nt-at { font-weight: var(--nt-w-bold); color: var(--nt-text-strong); }
.nt-post__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  font-family: var(--nt-font-mono);
  font-size: var(--nt-fs-micro);
  line-height: 1.45;
  color: var(--nt-muted);
  font-variant-numeric: tabular-nums;
}
.nt-post__facts { flex: 1 1 auto; min-width: 0; }
.nt-post__facts .nt-tx { font-size: inherit; }
/* The desk in a compact card's meta row: a handle, so Inter (LOCK2), in the row's size. */
.nt-post__by { font-family: var(--nt-font-sans); font-size: var(--nt-fs-small); }
.nt-post__by .nt-at { color: var(--nt-text); font-weight: var(--nt-w-medium); }
.nt-post__toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  height: 28px;
  margin: -4px -6px -4px auto;
  padding: 0 8px 0 10px;
  border-radius: var(--nt-r-pill);
  font-family: var(--nt-font-sans);
  font-size: var(--nt-fs-small);
  font-weight: var(--nt-w-medium);
  color: var(--nt-muted);
  transition: background-color var(--nt-d-hover) var(--nt-ease), color var(--nt-d-hover) var(--nt-ease);
}
.nt-post__toggle:hover { background: var(--nt-surface-2); color: var(--nt-text-strong); }
.nt-post__toggle > svg { width: 16px; height: 16px; transition: transform var(--nt-d-insert) var(--nt-ease); }
.nt-post__toggle[aria-expanded="true"] { color: var(--nt-text-strong); }
.nt-post__toggle[aria-expanded="true"] > svg { transform: rotate(180deg); }
.nt-post__details { grid-column: 1 / -1; margin-top: 14px; padding-top: 8px; border-top: var(--nt-rule-hair); }
.nt-post__details .nt-timeline { margin-top: 12px; }
.nt-post__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 12px; font-size: var(--nt-fs-small); }
.nt-post__fine { margin-top: 12px; font-size: var(--nt-fs-micro); line-height: 1.5; color: var(--nt-muted); }
.nt-post.is-new { animation: nt-post-in var(--nt-d-insert) var(--nt-ease) backwards, nt-tint-card var(--nt-d-tint) var(--nt-ease) backwards; }
.nt-post.is-new :is(.nt-post__head, .nt-post__amountrow) > .nt-chip .nt-marker { animation: nt-blink var(--nt-d-blink) var(--nt-ease) 1; }
.nt-post[data-state="refunded"] .nt-post__amount { color: var(--nt-muted); }

/* Compact: marquee cards, fixed width, no details, one line per fact.
   Head keeps the post anatomy (Name @handle · time), line 2 is only "paid to @x"
   (UsePaid "claimed by Name" length), the desk rides in the mono meta row. */
.nt-post--compact { width: min(360px, calc(100vw - 72px)); flex: none; padding: 14px 16px; }
.nt-post--compact .nt-post__name { flex: 0 1 auto; }
.nt-post--compact .nt-post__handle { flex: 0 10 auto; }
.nt-post__amountrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.nt-post__amountrow > .nt-post__amount { margin-top: 0; min-width: 0; }
.nt-post__amountrow > .nt-chip { flex: none; }
.nt-post--compact .nt-post__amount { font-size: 26px; }
.nt-post--compact .nt-post__line { font-size: var(--nt-fs-table); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt-post--compact .nt-post__meta { margin-top: 10px; }
.nt-post--compact .nt-facts__in { flex-wrap: nowrap; }
.nt-post--compact .nt-fact:last-child { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Row (UsePaid payments list): amount + line left, avatar centre-right, chip + time right. */
.nt-post--row {
  /* Equal side tracks: the avatar sits on the card's centre line in every row, whatever the
     chip and time on the right (a content-sized side track made it drift row to row). */
  grid-template-columns: minmax(0, 1fr) var(--nt-avatar) minmax(168px, 1fr);
  align-items: center;
  column-gap: 16px;
  padding: 12px 12px 12px 16px;
}
.nt-post--row > .nt-avatar { grid-row: auto; grid-column: 2; }
.nt-post--row .nt-post__amount { margin-top: 0; font-size: 28px; }
.nt-post--row .nt-post__line { margin-top: 0; }
.nt-post__side { grid-column: 3; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 10px; align-self: stretch; }
.nt-post__side .nt-post__toggle { margin: 0 -2px 0 0; padding: 0; width: 28px; justify-content: center; }
.nt-post__side-foot { display: flex; align-items: center; gap: 8px; font-size: var(--nt-fs-small); color: var(--nt-muted); white-space: nowrap; }
.nt-post--row .nt-post__details { margin-top: 12px; }
@media (max-width: 479px) {
  .nt-post--row { grid-template-columns: minmax(0, 1fr) auto; }
  .nt-post--row > .nt-avatar { display: none; }
  .nt-post--row .nt-post__side { grid-column: 2; }
  .nt-post { padding: 14px; column-gap: 10px; }
  /* The status keeps its word at every width (a marker is never alone). */
  .nt-post .nt-post__head > .nt-chip { padding: 0 8px; gap: 5px; }
  .nt-post__handle { display: none; }                 /* name · time · chip; the payer @handle stays in Details */
  .nt-post--compact .nt-post__handle { display: block; }   /* compact: the chip sits on the amount line, so the head keeps its @handle */
}

/* Avatar: generated monogram, deterministic greyscale (nett.avatar). Never a photo,
   never a white disc (the white disc is reserved for nett's own avatar). */
.nt-avatar {
  --nt-av-size: var(--nt-avatar);
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--nt-av-size);
  height: var(--nt-av-size);
  border-radius: 50%;
  background: var(--nt-av, var(--nt-surface-2));
  box-shadow: inset 0 0 0 1px rgba(231, 233, 234, 0.08);
  color: var(--nt-text);
  font-size: calc(var(--nt-av-size) * 0.36);
  line-height: 1;
  font-weight: var(--nt-w-bold);
  letter-spacing: -0.01em;
  user-select: none;
}
.nt-avatar--sm { --nt-av-size: 24px; font-size: 10px; }
.nt-avatar--md { --nt-av-size: 32px; }
.nt-avatar--lg { --nt-av-size: 48px; }
.nt-avatar--nett { background: var(--nt-canvas); box-shadow: inset 0 0 0 1px var(--nt-border); color: var(--nt-text-strong); }
.nt-avatar--nett .nt-mark { width: 55%; height: 55%; }

/* ==========================================================================
   16. MARQUEE (nett.marquee.mount) — a wall of receipt posts, 40–60s loop.
   Pauses on hover, focus, off-screen, hidden tab and the Pause control.
   Reduced motion: no movement, the row scrolls by hand.
   ========================================================================== */
.nt-marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}
.nt-marquee__track {
  display: flex;
  gap: 12px;
  width: max-content;
  animation: nt-marquee var(--nt-marquee-d, var(--nt-d-marquee)) linear infinite;
}
.nt-marquee--reverse .nt-marquee__track { animation-direction: reverse; }
.nt-marquee__group { display: flex; flex: none; gap: 12px; align-items: stretch; }
.nt-marquee.is-paused .nt-marquee__track { animation-play-state: paused; }
.nt-marquee + .nt-marquee { margin-top: 12px; }
.nt-marquee__bar { display: flex; align-items: center; gap: 12px; margin-top: 12px; }

/* ==========================================================================
   17. BAR CHART CARD (nett.chart.bars) — 14 grey bars, today in Text-strong.
   ========================================================================== */
.nt-chartcard { display: flex; flex-direction: column; min-width: 0; padding: 20px; border: var(--nt-rule-hair); border-radius: var(--nt-r-card); background: var(--nt-surface); }
.nt-chartcard__label { font-size: var(--nt-fs-small); font-weight: var(--nt-w-medium); color: var(--nt-text); }
.nt-chartcard__value { margin-top: 4px; font-size: var(--nt-fs-figure-app); line-height: 1.1; letter-spacing: var(--nt-ls-figure-app); font-weight: var(--nt-w-bold); color: var(--nt-text-strong); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nt-chartcard__sub { margin-top: 6px; font-size: var(--nt-fs-micro); line-height: 1.45; color: var(--nt-muted); }
.nt-chartcard .nt-bars { margin-top: 20px; }
.nt-bars {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 16px 16px 12px;
  border-radius: var(--nt-r-input);
  background: var(--nt-surface-2);
}
.nt-bars__plot { display: flex; align-items: flex-end; gap: 6px; height: var(--nt-bars-h, 148px); }
.nt-bars__bar {
  flex: 1 1 0;
  min-width: 3px;
  height: max(2px, var(--h, 0%));
  border-radius: 3px 3px 1px 1px;
  background: var(--nt-border-strong);
  transition: height 480ms var(--nt-ease), background-color var(--nt-d-hover) var(--nt-ease);
}
.nt-bars__bar.is-today { background: var(--nt-text-strong); }
.nt-bars__bar.is-partial { background: transparent; box-shadow: inset 0 0 0 1px var(--nt-border-strong); }
.nt-bars__bar.is-today.is-partial { background: var(--nt-text-strong); box-shadow: none; }
.nt-bars__plot:hover .nt-bars__bar:not(:hover):not(.is-today) { background: var(--nt-border); }
.nt-bars__axis { display: flex; justify-content: space-between; gap: 8px; font-family: var(--nt-font-mono); font-size: var(--nt-fs-label); letter-spacing: 0.02em; color: var(--nt-muted); }

/* ==========================================================================
   18. TABS — pill tabs (UsePaid filters), underline tabs (X), pager
   ========================================================================== */
.nt-pilltabs { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.nt-pilltabs::-webkit-scrollbar { display: none; }
.nt-pilltab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--nt-r-pill);
  font-size: var(--nt-fs-small);
  font-weight: var(--nt-w-medium);
  color: var(--nt-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--nt-d-hover) var(--nt-ease), color var(--nt-d-hover) var(--nt-ease);
}
.nt-pilltab:hover { color: var(--nt-text); background: var(--nt-surface); }
.nt-pilltab:is([aria-selected="true"], [aria-pressed="true"], [aria-current="page"], .is-active) { background: var(--nt-border); color: var(--nt-text-strong); }
.nt-pilltab__count { position: relative; top: 1px; font-family: var(--nt-font-mono); font-size: var(--nt-fs-micro); color: inherit; opacity: 0.8; font-variant-numeric: tabular-nums; }

.nt-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: var(--nt-rule-hair);
}
.nt-tabs::-webkit-scrollbar { display: none; }
.nt-tab {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 52px;
  padding: 0 16px;
  font-size: var(--nt-fs-ui);
  font-weight: var(--nt-w-medium);
  color: var(--nt-muted);
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--nt-d-hover) var(--nt-ease), background-color var(--nt-d-hover) var(--nt-ease);
}
.nt-tab:hover { color: var(--nt-text); background: var(--nt-surface); }
.nt-tab[aria-selected="true"],
.nt-tab[aria-current="page"] { color: var(--nt-text-strong); font-weight: var(--nt-w-bold); }
.nt-tab[aria-selected="true"]::after,
.nt-tab[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 16px; right: 16px; bottom: 0;
  height: 3px;
  border-radius: var(--nt-r-pill);
  background: var(--nt-text-strong);
}
.nt-tab:focus-visible { outline-offset: -2px; }
.nt-tab__count { font-family: var(--nt-font-mono); font-size: var(--nt-fs-micro); font-weight: var(--nt-w-regular); color: var(--nt-muted); font-variant-numeric: tabular-nums; }
.nt-tab[aria-selected="true"] .nt-tab__count { color: var(--nt-text); }

.nt-pager { display: inline-flex; align-items: center; gap: 4px; font-family: var(--nt-font-mono); font-size: var(--nt-fs-micro); color: var(--nt-text); font-variant-numeric: tabular-nums; }
.nt-pager__pos { min-width: 5ch; text-align: center; }

/* ==========================================================================
   19. CODE PANEL — dark Surface card, Geist Mono 13, pill tabs.
   Monochrome syntax: keys white, strings light grey, punctuation Muted.
   ========================================================================== */
.nt-code { min-width: 0; border: var(--nt-rule-hair); border-radius: var(--nt-r-card); background: var(--nt-surface); overflow: hidden; }
.nt-code__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 12px; border-bottom: var(--nt-rule-hair); }
.nt-code__tabs { display: flex; gap: 4px; }
.nt-code__tabs.nt-tabs { border-bottom: 0; overflow: visible; }
.nt-code__tabs .nt-tab { height: 32px; padding: 0 12px; border-radius: var(--nt-r-pill); font-size: var(--nt-fs-small); font-weight: var(--nt-w-medium); }
.nt-code__tabs .nt-tab[aria-selected="true"] { background: var(--nt-border); font-weight: var(--nt-w-medium); }
.nt-code__tabs .nt-tab[aria-selected="true"]::after { content: none; }
.nt-code__file { font-family: var(--nt-font-mono); font-size: var(--nt-fs-micro); color: var(--nt-muted); white-space: nowrap; }
.nt-code__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.nt-code__body { overflow-x: auto; padding: 16px 0; overscroll-behavior-x: contain; }
.nt-code__body:focus-visible { outline-offset: -2px; border-radius: 0 0 var(--nt-r-card) var(--nt-r-card); }
.nt-code__pre {
  min-width: max-content;
  margin: 0;
  counter-reset: nt-ln;
  font-family: var(--nt-font-mono);
  font-size: var(--nt-fs-code);
  line-height: var(--nt-lh-code);
  color: var(--nt-text);
  tab-size: 2;
}
.nt-code__line { display: block; min-height: 1.65em; padding-right: 24px; white-space: pre; }
.nt-code__line::before {
  counter-increment: nt-ln;
  content: counter(nt-ln);
  display: inline-block;
  width: 3ch;
  margin: 0 16px 0 12px;
  text-align: right;
  color: var(--nt-muted);
  opacity: 0.7;
  user-select: none;
}
.tk-key { color: var(--nt-text-strong); font-weight: var(--nt-w-medium); }
.tk-str { color: var(--nt-code-string); }
.tk-num, .tk-lit { color: var(--nt-text-strong); }
.tk-punc, .tk-com { color: var(--nt-muted); }
@media (max-width: 767px) {
  .nt-code__actions { width: 100%; margin-left: 0; }
  .nt-code__actions .nt-code__file { margin-right: auto; }
}

/* ==========================================================================
   20. SHEET (<dialog class="nt-sheet">) — Surface-2, 16px, scrim 60%
   ========================================================================== */
.nt-sheet {
  position: fixed;
  inset: 8px 8px 8px auto;
  width: min(var(--nt-sheet-w), calc(100vw - 16px));
  max-width: none;
  height: auto;
  max-height: none;
  margin: 0;
  padding: 0;
  border: var(--nt-rule-hair);
  border-radius: var(--nt-r-card);
  background: var(--nt-surface-2);
  color: var(--nt-text);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.nt-sheet::backdrop { background: var(--nt-scrim); }
.nt-sheet[open] { animation: nt-sheet-in var(--nt-d-sheet) var(--nt-ease); }
.nt-sheet__inner { min-height: 100%; display: flex; flex-direction: column; }
.nt-sheet__head { padding: 16px 20px 20px; border-bottom: var(--nt-rule-hair); }
.nt-sheet__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* When the close row sits directly in __inner it stays on screen while the sheet scrolls. */
.nt-sheet__inner > .nt-sheet__top { position: sticky; top: 0; z-index: 2; padding: 12px 20px; background: var(--nt-surface-2); }
.nt-sheet__inner > .nt-sheet__top + .nt-sheet__head { padding-top: 4px; }
.nt-sheet__amount {
  margin-top: 16px;
  font-size: var(--nt-fs-sheet-amount);
  line-height: 1.05;
  letter-spacing: var(--nt-ls-figure);
  font-weight: var(--nt-w-bold);
  color: var(--nt-text-strong);
  font-variant-numeric: tabular-nums;
}
.nt-sheet__sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 8px; font-size: var(--nt-fs-small); color: var(--nt-muted); }
.nt-sheet__sub .nt-at { font-weight: var(--nt-w-bold); color: var(--nt-text-strong); }
.nt-sheet__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 20px; }
.nt-sheet__body { padding: 4px 20px 28px; }
.nt-sheet__section { padding-top: 20px; }
.nt-sheet__section > .nt-label { display: block; padding-bottom: 8px; }
@media (max-width: 767px) {
  .nt-sheet { inset: auto 0 0 0; width: 100%; max-height: 92dvh; border-radius: var(--nt-r-card) var(--nt-r-card) 0 0; border-bottom: 0; }
  .nt-sheet[open] { animation-name: nt-sheet-up; }
  .nt-sheet__head { padding: 12px 16px 16px; }
  .nt-sheet__inner > .nt-sheet__top { padding: 10px 16px; }
  .nt-sheet__body { padding: 4px 16px 28px; }
}

/* ==========================================================================
   21. SELECTION BAR + TOAST — dark floating surfaces
   ========================================================================== */
.nt-selbar {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: var(--nt-z-selbar);
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: var(--nt-selbar-h);
  max-width: calc(100vw - 32px);
  padding: 8px 8px 8px 24px;
  border: 1px solid var(--nt-border-strong);
  border-radius: var(--nt-r-pill);
  background: var(--nt-surface-2);
  color: var(--nt-text-strong);
  transform: translateX(-50%);
  animation: nt-rise var(--nt-d-insert) var(--nt-ease);
}
.nt-selbar__text { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; min-width: 0; font-size: var(--nt-fs-ui); line-height: 1.4; font-weight: var(--nt-w-bold); font-variant-numeric: tabular-nums; }
.nt-selbar__sep { color: var(--nt-muted); }
.nt-selbar__earn { color: var(--nt-muted); font-weight: var(--nt-w-regular); }
.nt-selbar .nt-btn { flex: none; }

.nt-toaster {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: var(--nt-z-toast);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  max-width: calc(100vw - 32px);
  pointer-events: none;
}
.nt-has-selbar .nt-toaster { bottom: calc(24px + var(--nt-selbar-h) + 12px); }
.nt-toast {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 10px;
  max-width: 440px;
  padding: 12px 16px;
  border: 1px solid var(--nt-border-strong);
  border-radius: var(--nt-r-input);
  background: var(--nt-surface-2);
  color: var(--nt-text-strong);
  font-size: var(--nt-fs-ui);
  line-height: 1.4;
  font-weight: var(--nt-w-medium);
  pointer-events: auto;
  animation: nt-rise var(--nt-d-insert) var(--nt-ease);
  transition: opacity var(--nt-d-insert) var(--nt-ease);
}
.nt-toast.is-leaving { opacity: 0; }
.nt-toast__detail { font-family: var(--nt-font-mono); font-size: var(--nt-fs-micro); font-weight: var(--nt-w-regular); color: var(--nt-muted); }
.nt-sheet .nt-toaster {
  right: calc(min(var(--nt-sheet-w), 100vw) + 24px);
  max-width: calc(100vw - min(var(--nt-sheet-w), 100vw) - 48px);
}
@media (max-width: 767px) {
  .nt-selbar {
    left: 12px; right: 12px;
    bottom: calc(12px + var(--nt-tabbar-h) + env(safe-area-inset-bottom, 0px));
    gap: 12px;
    max-width: none;
    padding-left: 18px;
    border-radius: 28px;
    transform: none;
  }
  body:not(:has(> .nt-tabbar)) .nt-selbar { bottom: 12px; }
  .nt-selbar__text { font-size: var(--nt-fs-small); }
  .nt-selbar__earn { flex-basis: 100%; }
  .nt-selbar__sep:has(+ .nt-selbar__earn) { display: none; }
  .nt-toaster,
  .nt-sheet .nt-toaster { left: 12px; right: 12px; bottom: calc(12px + var(--nt-tabbar-h)); align-items: stretch; max-width: none; }
  body:not(:has(> .nt-tabbar)) .nt-toaster { bottom: 12px; }
  .nt-has-selbar .nt-toaster { bottom: calc(12px + var(--nt-tabbar-h) + 76px); }
  .nt-toast { max-width: none; }
}

/* ==========================================================================
   22. FAQ (<details>)
   ========================================================================== */
.nt-faq { border-top: var(--nt-rule-hair); }
.nt-faq__item { border-bottom: var(--nt-rule-hair); }
.nt-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 60px;
  padding: 16px 0;
  font-size: var(--nt-fs-question);
  line-height: 1.35;
  font-weight: var(--nt-w-bold);
  color: var(--nt-text-strong);
  list-style: none;
  cursor: pointer;
}
.nt-faq__q::-webkit-details-marker { display: none; }
.nt-faq__q:focus-visible { outline-offset: 2px; border-radius: var(--nt-r-sm); }
.nt-faq__sign { flex: none; width: 16px; font-family: var(--nt-font-mono); font-size: 18px; line-height: 1; text-align: center; color: var(--nt-muted); }
.nt-faq__sign::before { content: "+"; }
.nt-faq__item[open] .nt-faq__sign::before { content: "\2013"; }
.nt-faq__a { max-width: var(--nt-measure); padding: 0 40px 20px 0; font-size: var(--nt-fs-body); color: var(--nt-muted); text-wrap: pretty; }
.nt-faq__a > * + * { margin-top: 10px; }
@supports (interpolate-size: allow-keywords) {
  .nt-faq { interpolate-size: allow-keywords; }
  .nt-faq__item::details-content { height: 0; overflow: clip; transition: height var(--nt-d-insert) var(--nt-ease), content-visibility var(--nt-d-insert) allow-discrete; }
  .nt-faq__item[open]::details-content { height: auto; }
}

/* ==========================================================================
   23. T-ACCOUNT (netting)
   ========================================================================== */
.nt-taccount { margin: 0; min-width: 0; }
.nt-taccount__heads, .nt-taccount__body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nt-taccount__heads { border-bottom: var(--nt-rule-ink); }
.nt-taccount__head { padding: 0 16px 12px 0; font-size: var(--nt-fs-ui); font-weight: var(--nt-w-bold); color: var(--nt-text-strong); }
.nt-taccount__head + .nt-taccount__head { padding-left: 16px; }
.nt-taccount__head span { display: block; font-weight: var(--nt-w-regular); color: var(--nt-muted); }
.nt-taccount__side { min-width: 0; padding: 4px 16px 0 0; }
.nt-taccount__side + .nt-taccount__side { padding: 4px 0 0 16px; border-left: var(--nt-rule-ink); }
.nt-taccount__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 12px;
  min-height: 36px;
  padding: 8px 0;
  border-bottom: var(--nt-rule-hair);
  font-size: var(--nt-fs-small);
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.nt-taccount__row > :first-child { min-width: 0; color: var(--nt-muted); overflow-wrap: anywhere; }
.nt-taccount__row .nt-at { font-weight: var(--nt-w-bold); color: var(--nt-text-strong); }
.nt-taccount__via { display: block; font-family: var(--nt-font-mono); font-size: var(--nt-fs-micro); color: var(--nt-muted); }
.nt-taccount__row > :last-child { color: var(--nt-text-strong); font-weight: var(--nt-w-medium); text-align: right; white-space: nowrap; }
.nt-taccount__row--total { margin-top: -1px; border-top: var(--nt-rule-ink); border-bottom: 0; font-weight: var(--nt-w-bold); }
.nt-taccount__row--total > :first-child { color: var(--nt-text); }
.nt-taccount__net {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: var(--nt-rule-ink);
  font-size: var(--nt-fs-body);
}
.nt-taccount__net > :last-child { margin-left: auto; font-size: var(--nt-fs-title); font-weight: var(--nt-w-bold); color: var(--nt-text-strong); font-variant-numeric: tabular-nums; }
@media (max-width: 479px) {
  .nt-taccount__head { padding-right: 12px; }
  .nt-taccount__head + .nt-taccount__head { padding-left: 12px; }
  .nt-taccount__side { padding-right: 12px; }
  .nt-taccount__side + .nt-taccount__side { padding-left: 12px; }
  .nt-taccount__row { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  .nt-taccount__row > :last-child { justify-self: end; }
}

/* ==========================================================================
   24. STEPS + CHECKLIST — current = Surface-2 + 3px white bar (never Signal)
   ========================================================================== */
.nt-steps { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.nt-step {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 4px;
  padding: 16px;
  border-radius: var(--nt-r-input);
  transition: background-color var(--nt-d-hover) var(--nt-ease);
}
button.nt-step, a.nt-step { width: 100%; text-align: left; text-decoration: none; color: inherit; }
button.nt-step:hover { background: var(--nt-surface); }
.nt-step__num { grid-row: 1 / span 2; padding-top: 4px; font-family: var(--nt-font-mono); font-size: var(--nt-fs-label); letter-spacing: var(--nt-ls-label); color: var(--nt-muted); }
.nt-step__title { font-size: var(--nt-fs-question); line-height: 1.35; font-weight: var(--nt-w-bold); color: var(--nt-text-strong); }
.nt-step__text { grid-column: 2; font-size: var(--nt-fs-body); color: var(--nt-muted); max-width: 52ch; text-wrap: pretty; }
.nt-step__text .nt-at { color: var(--nt-text); font-weight: var(--nt-w-bold); }
.nt-step:is(.is-current, [aria-current="step"], [aria-selected="true"]),
.nt-checklist__item:is(.is-current, [aria-current="step"]) { background: var(--nt-surface-2); }
.nt-step:is(.is-current, [aria-current="step"], [aria-selected="true"])::before,
.nt-checklist__item:is(.is-current, [aria-current="step"])::before {
  content: "";
  position: absolute;
  left: 0; top: 12px; bottom: 12px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--nt-text-strong);
}
.nt-step:is(.is-current, [aria-current="step"], [aria-selected="true"]) .nt-step__num { color: var(--nt-text-strong); }

.nt-checklist { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.nt-checklist__item {
  position: relative;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  min-height: 56px;
  padding: 10px 16px;
  border-radius: var(--nt-r-input);
}
.nt-checklist__item + .nt-checklist__item:not(.is-current)::after { content: none; }
.nt-checklist__item > .nt-marker { justify-self: center; color: var(--nt-text-strong); }   /* a done step is not money: no Signal */
.nt-checklist__title { font-size: var(--nt-fs-ui); line-height: 1.4; color: var(--nt-text-strong); font-weight: var(--nt-w-medium); }
.nt-checklist__meta { font-family: var(--nt-font-mono); font-size: var(--nt-fs-micro); color: var(--nt-muted); white-space: nowrap; }
.nt-checklist__meta .nt-at { font-family: var(--nt-font-sans); color: var(--nt-text); }
.nt-checklist__item.is-done .nt-checklist__title { color: var(--nt-muted); font-weight: var(--nt-w-regular); }
.nt-checklist__item:not(.is-done):not(.is-current) > .nt-marker { color: var(--nt-border-strong); }

/* ==========================================================================
   25. CARD + METER + SKELETON
   ========================================================================== */
.nt-card { display: flex; flex-direction: column; min-width: 0; padding: 20px; border: var(--nt-rule-hair); border-radius: var(--nt-r-card); background: var(--nt-surface); }
.nt-card--raised { background: var(--nt-surface-2); }
.nt-card__label { font-size: var(--nt-fs-small); font-weight: var(--nt-w-medium); color: var(--nt-text); }
.nt-card__value {
  margin-top: 6px;
  font-size: var(--nt-fs-figure-app);
  line-height: 1.1;
  letter-spacing: var(--nt-ls-figure-app);
  font-weight: var(--nt-w-bold);
  color: var(--nt-text-strong);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.nt-card__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 20px; }
@media (max-width: 767px) { .nt-card { padding: 16px; } }
.nt-meter { position: relative; height: 6px; overflow: hidden; border-radius: var(--nt-r-pill); background: var(--nt-border); }
.nt-meter__fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--nt-value, 0) * 100%); border-radius: var(--nt-r-pill); background: var(--nt-text-strong); }
.nt-skeleton { display: block; height: 12px; border-radius: 4px; background: var(--nt-surface-2); }

/* ==========================================================================
   26. LEGACY FRAMES (v1 markup, restyled dark until each page moves to the shell)
   .nt-nav (top nav) · .nt-app / .nt-rail / .nt-main / .nt-topbar (text rail)
   ========================================================================== */
.nt-nav {
  position: sticky;
  top: var(--nt-banner-h);
  z-index: var(--nt-z-nav);
  background: var(--nt-glass);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: var(--nt-rule-hair);
}
.nt-nav__inner { display: flex; align-items: center; gap: 32px; height: var(--nt-top-h); }
.nt-nav__links { display: flex; align-items: center; gap: 4px; margin-inline: auto; }
.nt-nav__link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 12px;
  border-radius: var(--nt-r-pill);
  font-size: var(--nt-fs-ui);
  line-height: 20px;
  color: var(--nt-text);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--nt-d-hover) var(--nt-ease);
}
.nt-nav__link::after { content: attr(data-label); height: 0; overflow: hidden; visibility: hidden; font-weight: var(--nt-w-bold); pointer-events: none; }
.nt-nav__link:hover { background: var(--nt-surface-2); }
.nt-nav__link[aria-current="page"], .nt-nav__link.is-active { color: var(--nt-text-strong); font-weight: var(--nt-w-bold); }
.nt-nav__end { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.nt-nav__links + .nt-nav__end { margin-left: 0; }
.nt-btn.nt-nav__menu { display: none; min-width: 72px; }
.nt-nav .nt-menu { top: calc(var(--nt-top-h) + var(--nt-banner-h) + 1px); padding-top: 8px; }
@media (max-width: 1023px) {
  .nt-nav__links { display: none; }
  .nt-nav__end, .nt-nav__links + .nt-nav__end { margin-left: auto; }
  .nt-btn.nt-nav__menu { display: inline-flex; }
}
@media (max-width: 767px) {
  .nt-nav { top: 0; }
  .nt-nav .nt-menu { top: calc(var(--nt-top-h) + 1px); }
  .nt-nav__end > .nt-livechip, .nt-nav__end > .nt-btn--primary { display: none; }
}
@media (min-width: 1024px) { .nt-nav .nt-menu { display: none !important; } }

.nt-app { display: grid; grid-template-columns: var(--nt-rail-w) minmax(0, 1fr); min-height: 100vh; }
.nt-rail {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100vh;
  padding: 16px 12px;
  border-right: var(--nt-rule-hair);
  overflow-y: auto;
}
.nt-rail > .nt-logo { padding: 0 12px; min-height: 32px; }
.nt-rail__group { display: flex; flex-direction: column; gap: 2px; }
.nt-rail__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  border-radius: var(--nt-r-pill);
  font-size: var(--nt-fs-ui);
  color: var(--nt-text);
  text-decoration: none;
  transition: background-color var(--nt-d-hover) var(--nt-ease);
}
.nt-rail__link:hover { background: var(--nt-surface-2); }
.nt-rail__link[aria-current="page"] { color: var(--nt-text-strong); font-weight: var(--nt-w-bold); background: var(--nt-surface); }
.nt-rail__link:focus-visible { outline-offset: -2px; }
.nt-main { min-width: 0; }
.nt-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  min-height: var(--nt-top-h);
  padding: 12px var(--nt-gutter);
  border-bottom: var(--nt-rule-hair);
}
.nt-topbar__title { margin-right: auto; font-size: var(--nt-fs-title); font-weight: var(--nt-w-bold); color: var(--nt-text-strong); }
@media (max-width: 1023px) {
  .nt-app { grid-template-columns: minmax(0, 1fr); }
  .nt-rail { display: none; }
}

/* ==========================================================================
   27. FOOTER — lockup, columns, chain line, non-affiliation (every page)
   ========================================================================== */
.nt-footer { margin-top: var(--nt-section-pad); padding-block: 32px 40px; border-top: var(--nt-rule-hair); }
.nt-shell .nt-footer { padding-inline: var(--nt-gutter); }
.nt-shell .nt-footer > .nt-container { padding-inline: 0; }
.nt-footer__inner { max-width: var(--nt-content); margin-inline: auto; }
.nt-footer__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.nt-footer__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 16px; margin-top: 32px; }
.nt-footer__col > h2, .nt-footer__col > .nt-label { margin-bottom: 10px; }
.nt-footer__col a {
  display: inline-block;
  padding: 4px 0;
  font-size: var(--nt-fs-small);
  color: var(--nt-muted);
  text-decoration: none;
  transition: color var(--nt-d-hover) var(--nt-ease);
}
.nt-footer__col a:hover { color: var(--nt-text-strong); text-decoration: underline; text-underline-offset: 3px; }
.nt-footer__block { margin-top: 32px; padding-top: 16px; border-top: var(--nt-rule-hair); font-family: var(--nt-font-mono); font-size: var(--nt-fs-micro); color: var(--nt-muted); font-variant-numeric: tabular-nums; }
.nt-footer__legal { max-width: 88ch; margin-top: 10px; font-size: var(--nt-fs-micro); line-height: 1.55; color: var(--nt-muted); }
@media (max-width: 767px) { .nt-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ==========================================================================
   28. MOTION — one settlement event drives everything; reduced motion honoured
   ========================================================================== */
.nt-sweep {
  position: absolute;
  inset: 0;
  z-index: -1;
  color: transparent;
  pointer-events: none;
  user-select: none;
  animation: nt-sweep-fade calc(var(--nt-d-sweep-in) + var(--nt-d-sweep-hold) + var(--nt-d-sweep-out)) var(--nt-ease) forwards;
}
.nt-sweep__ink {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'%3E%3Crect width='1' height='1' fill='%23FFD84D' fill-opacity='0.18'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 0% 62%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  animation: nt-sweep-in var(--nt-d-sweep-in) var(--nt-ease) forwards;
}

@keyframes nt-sweep-in   { to { background-size: 100% 62%; } }
@keyframes nt-sweep-fade { 0%, 69.7% { opacity: 1; } 100% { opacity: 0; } }
@keyframes nt-row-in     { from { height: 0; opacity: 0; border-bottom-width: 0; } to { height: var(--nt-row-total); opacity: 1; border-bottom-width: 1px; } }
@keyframes nt-row-out    { from { height: var(--nt-row-total); opacity: 1; } to { height: 0; min-height: 0; padding-block: 0; opacity: 0; border-bottom-width: 0; } }
@keyframes nt-tint       { from { background-color: var(--nt-signal-tint); } to { background-color: transparent; } }
@keyframes nt-tint-hold  { from, to { background-color: var(--nt-signal-tint); } }
@keyframes nt-tint-card  { 0%, 40% { background-color: color-mix(in srgb, var(--nt-signal) 12%, var(--nt-surface)); border-color: rgba(255, 216, 77, 0.32); } 100% { background-color: var(--nt-surface); border-color: var(--nt-border); } }
@keyframes nt-post-in    { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes nt-blink      { 0% { opacity: 1; } 30% { opacity: 0.15; } 60%, 100% { opacity: 1; } }
@keyframes nt-fill       { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes nt-flow       { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes nt-stem       { from { transform: scaleY(0); } to { transform: none; } }
@keyframes nt-marquee    { to { transform: translateX(calc(-50% - 6px)); } }
@keyframes nt-sheet-in   { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes nt-sheet-up   { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes nt-rise       { from { translate: 0 8px; opacity: 0; } to { translate: 0 0; opacity: 1; } }
@keyframes nt-marker-in  { from { opacity: 0.2; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .nt-sweep { display: none; }
  .nt-table tr.is-new { animation: nt-tint-hold var(--nt-d-tint-reduced) linear backwards; }
  .nt-table tr.is-leaving { animation: none; display: none; }
  .nt-receipt.is-new,
  .nt-post.is-new { animation: nt-tint-hold var(--nt-d-tint-reduced) linear backwards; }
  .nt-post.is-new .nt-post__head > .nt-chip .nt-marker,
  .nt-dot.is-blink,
  .nt-sheet[open],
  .nt-selbar,
  .nt-toast,
  .nt-marker.is-morph,
  .nt-logo--settle .nt-mark__fill,
  .nt-mark.is-settling .nt-mark__fill,
  .nt-netting.is-netting .nt-netting__flow,
  .nt-netting.is-netting .nt-netting__stem { animation: none; }
  .nt-logo--settle .nt-mark__fill, .nt-mark.is-settling .nt-mark__fill { transform: none; }
  .nt-counter__s { transition: none; }
  .nt-counter__d.is-tick { color: inherit; }
  .nt-marquee { overflow-x: auto; scrollbar-width: thin; }
  .nt-marquee__track { animation: none; }
  .nt-marquee__group[aria-hidden="true"] { display: none; }
  .nt-marquee__bar [data-nt-marquee-pause] { display: none; }
  .nt-faq__item::details-content { transition: none; }
  .nt-btn:active:not(:disabled) { transform: none; }
  .nt-bars__bar, .nt-post__toggle > svg, .nt-top__collapse > svg { transition: none; }
}

/* Print: receipts print as black on white statements. */
@media print {
  :root { color-scheme: light; }
  html, body { background: #fff !important; color: #000 !important; }
  .nt-banner, .nt-side, .nt-top, .nt-tabbar, .nt-nav, .nt-menu, .nt-selbar, .nt-toaster, .nt-pause, .nt-copy, .nt-post__toggle, .nt-marquee { display: none !important; }
  .nt-shell { display: block; }
  .nt-shell::before { content: none; }
  .nt-receipt, .nt-post, .nt-card, .nt-code { background: #fff !important; border-color: #bbb !important; color: #000 !important; }
  .nt-receipt *, .nt-post *, .nt-card * { color: #000 !important; }
  .nt-sweep { display: none; }
}