/* NexMizan product UI ("nx"): design tokens.
   Used by the four interactive demonstrations. Everything is scoped to .nx so the site CSS and Bootstrap are untouched.
   Logical properties only (works for Arabic RTL and English LTR). No letter-spacing anywhere: it breaks Arabic joining. */

/* Tabular figures for every digit, comma, point and percent sign (Inter, SIL OFL, digits only). Letters stay in Readex Pro. */
@font-face {
  font-family: "NX Num";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/nx-num-400.f0aa266b.woff2") format("woff2");
  unicode-range: U+0025, U+002B-002F, U+0030-003A, U+2212;
}
@font-face {
  font-family: "NX Num";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/nx-num-500.7f7c534d.woff2") format("woff2");
  unicode-range: U+0025, U+002B-002F, U+0030-003A, U+2212;
}
@font-face {
  font-family: "NX Num";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url("/assets/nx-num-600.97fae18b.woff2") format("woff2");
  unicode-range: U+0025, U+002B-002F, U+0030-003A, U+2212;
}

.nx {
  --nx-dir: ltr;
  /* Type */
  --nx-font: "NX Num", "Readex Pro", system-ui, -apple-system, "Segoe UI", Tahoma, "Noto Sans Arabic", "Helvetica Neue", Arial, sans-serif;
  --nx-fs-xs: 0.75rem;
  --nx-fs-sm: 0.8125rem;
  --nx-fs-base: 0.875rem;
  --nx-fs-md: 1rem;
  --nx-fs-lg: 1.125rem;
  --nx-fs-xl: 1.375rem;
  --nx-fs-2xl: 1.75rem;
  --nx-fs-3xl: 2.25rem;
  --nx-lh: 1.5;

  /* Space: 4px grid */
  --nx-s-1: 0.25rem;
  --nx-s-2: 0.5rem;
  --nx-s-3: 0.75rem;
  --nx-s-4: 1rem;
  --nx-s-5: 1.25rem;
  --nx-s-6: 1.5rem;
  --nx-s-8: 2rem;
  --nx-s-10: 2.5rem;

  /* Shape */
  --nx-r-sm: 4px;
  --nx-r-md: 6px;
  --nx-r-lg: 10px;
  --nx-r-xl: 14px;
  --nx-ctl-h: 2.125rem;
  --nx-ctl-h-sm: 1.75rem;
  --nx-ctl-h-lg: 2.5rem;

  /* Motion: calm, short, always answers an action */
  --nx-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --nx-d-fast: 120ms;
  --nx-d-base: 180ms;
  --nx-d-slow: 320ms;
  --nx-d-chart: 700ms;

  /* Light theme (default) */
  color-scheme: light;
  --nx-bg: #f2f5fa;
  --nx-surface: #ffffff;
  --nx-surface-2: #f7f9fc;
  --nx-surface-3: #edf1f8;
  --nx-line: #dde4f0;
  --nx-line-strong: #c2cde2;
  --nx-ink: #14213f;
  --nx-ink-2: #44526f;
  --nx-ink-3: #5f6d89;
  --nx-ink-inv: #ffffff;
  --nx-brand: #0a54c9;
  --nx-brand-hover: #0846a8;
  --nx-brand-ink: #06205e;
  --nx-brand-soft: #e8f0fd;
  --nx-brand-line: #b9d0f6;
  --nx-accent: #b88a2e; /* brass: always means "target" or "benchmark" */
  --nx-accent-ink: #7a5a12;
  --nx-accent-soft: #f6ecd2;
  --nx-pos: #0f7a4a;
  --nx-pos-soft: #e1f3e9;
  --nx-neg: #b3261e;
  --nx-neg-soft: #fbe8e6;
  --nx-warn: #8f6200;
  --nx-warn-soft: #fcf0cf;
  --nx-info: #0a54c9;
  --nx-info-soft: #e8f0fd;
  --nx-wa: #128c7e;
  --nx-focus: #0a54c9;
  --nx-overlay: rgb(10 20 44 / 0.5);
  --nx-shadow-pop: 0 10px 28px -8px rgb(20 33 63 / 0.22), 0 0 0 1px rgb(20 33 63 / 0.06);
  --nx-shadow-dialog: 0 28px 70px -14px rgb(6 32 94 / 0.4), 0 0 0 1px rgb(20 33 63 / 0.06);
  --nx-shadow-panel: 0 1px 2px rgb(20 33 63 / 0.04);

  /* Chart series (categorical). Blue is "actual", dashed slate is "previous period", brass is "target". */
  --nx-c1: #1f6fe5;
  --nx-c2: #0b2f80;
  --nx-c3: #0f9a87;
  --nx-c4: #7a5cc7;
  --nx-c5: #c8487a;
  --nx-c6: #d9622b;
  --nx-c7: #4f9a3b;
  --nx-c8: #6b7a99;
  --nx-prev: #8a97b1;
  --nx-grid: #e3e9f4;
  --nx-heat-0: #eef4fd;
  --nx-heat-1: #bcd3f7;
  --nx-heat-2: #6aa0ee;
  --nx-heat-3: #1f6fe5;
  --nx-heat-4: #06205e;
}

.nx[dir="rtl"] {
  --nx-dir: rtl;
}

/* Dark theme: same roles, lifted so contrast stays above 4.5:1 for text and 3:1 for marks. */
.nx[data-theme="dark"] {
  color-scheme: dark;
  --nx-bg: #0a1220;
  --nx-surface: #111b2f;
  --nx-surface-2: #16223a;
  --nx-surface-3: #1c2b47;
  --nx-line: #25344f;
  --nx-line-strong: #364a6e;
  --nx-ink: #e8edf7;
  --nx-ink-2: #b6c2da;
  --nx-ink-3: #8f9db9;
  --nx-ink-inv: #0a1220;
  --nx-brand: #6ba3ff;
  --nx-brand-hover: #8bb8ff;
  --nx-brand-ink: #cfe0ff;
  --nx-brand-soft: #172a4d;
  --nx-brand-line: #2c4a80;
  --nx-accent: #e0b24f;
  --nx-accent-ink: #f0cd85;
  --nx-accent-soft: #3a2f14;
  --nx-pos: #4ec58a;
  --nx-pos-soft: #12301f;
  --nx-neg: #ff8a80;
  --nx-neg-soft: #3b1a18;
  --nx-warn: #f0bf5b;
  --nx-warn-soft: #3a2d0e;
  --nx-info: #6ba3ff;
  --nx-info-soft: #172a4d;
  --nx-focus: #8bb8ff;
  --nx-overlay: rgb(2 6 16 / 0.62);
  --nx-shadow-pop: 0 10px 28px -8px rgb(0 0 0 / 0.55), 0 0 0 1px rgb(255 255 255 / 0.07);
  --nx-shadow-dialog: 0 28px 70px -14px rgb(0 0 0 / 0.7), 0 0 0 1px rgb(255 255 255 / 0.08);
  --nx-shadow-panel: none;
  --nx-c1: #5b9bff;
  --nx-c2: #8fa8ff;
  --nx-c3: #3fd1bb;
  --nx-c4: #a68cf0;
  --nx-c5: #ee7fa6;
  --nx-c6: #ff9560;
  --nx-c7: #86c96f;
  --nx-c8: #9aa8c4;
  --nx-prev: #6f7f9e;
  --nx-grid: #22314c;
  --nx-heat-0: #14233f;
  --nx-heat-1: #1f3d70;
  --nx-heat-2: #2f66bd;
  --nx-heat-3: #5b9bff;
  --nx-heat-4: #cfe0ff;
}

@media (prefers-reduced-motion: reduce) {
  .nx {
    --nx-d-fast: 0.01ms;
    --nx-d-base: 0.01ms;
    --nx-d-slow: 0.01ms;
    --nx-d-chart: 0.01ms;
  }
}

/* nx base: a scoped reset (the site CSS and Bootstrap style bare elements, so everything inside .nx is neutralised first),
   plus typography and small layout helpers. */

.nx,
.nx *,
.nx *::before,
.nx *::after {
  box-sizing: border-box;
}
.nx {
  font-family: var(--nx-font);
  font-size: var(--nx-fs-base);
  font-weight: 400;
  line-height: var(--nx-lh);
  color: var(--nx-ink);
  text-align: start;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}
html[lang="ar"] .nx,
.nx[dir="rtl"] {
  line-height: 1.7;
}
.nx[dir="ltr"] {
  line-height: var(--nx-lh);
}
.nx :is(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dt, dd, figure, blockquote, fieldset, legend, pre) {
  margin: 0;
  padding: 0;
  max-width: none;
  font: inherit;
  color: inherit;
  letter-spacing: 0;
  text-wrap: auto;
  font-variation-settings: normal;
  float: none;
  width: auto;
}
.nx :is(ul, ol) {
  list-style: none;
}
.nx a {
  color: inherit;
  text-decoration: none;
}
.nx a:hover {
  color: inherit;
}
.nx :is(button, input, select, textarea) {
  font: inherit;
  color: inherit;
  margin: 0;
  letter-spacing: 0;
  text-transform: none;
}
.nx button {
  background: none;
  border: 0;
  padding: 0;
  text-align: inherit;
  cursor: pointer;
}
.nx button:disabled,
.nx [aria-disabled="true"] {
  cursor: not-allowed;
}
.nx table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  caption-side: top;
}
.nx :is(th, td) {
  padding: 0;
  text-align: start;
  font-weight: inherit;
  vertical-align: middle;
}
.nx :is(svg, img) {
  max-width: none;
  vertical-align: middle;
}
.nx [hidden] {
  display: none !important;
}
.nx :focus-visible {
  outline: 2px solid var(--nx-focus);
  outline-offset: 2px;
  border-radius: var(--nx-r-sm);
}
.nx ::selection {
  background: var(--nx-brand-soft);
  color: var(--nx-brand-ink);
}
.nx :is(small) {
  font-size: inherit;
}
.nx :is(strong, b) {
  font-weight: 600;
}
.nx :is(mark) {
  background: var(--nx-accent-soft);
  color: inherit;
  padding: 0 2px;
  border-radius: 2px;
}
.nx hr {
  border: 0;
  border-block-start: 1px solid var(--nx-line);
  margin: 0;
  opacity: 1;
}

/* Icons: <svg class="nx-i"><use href="#i-name"/></svg> */
.nx .nx-i {
  width: 1.125em;
  height: 1.125em;
  fill: currentColor;
  flex: none;
  vertical-align: -0.2em;
}
.nx .nx-i-sm {
  width: 0.9375em;
  height: 0.9375em;
}
.nx .nx-i-lg {
  width: 1.375em;
  height: 1.375em;
}
.nx .nx-i-xl {
  width: 2em;
  height: 2em;
}
.nx .nx-flip-rtl:dir(rtl) {
  transform: scaleX(-1);
}
.nx[dir="rtl"] .nx-flip {
  transform: scaleX(-1);
}

/* Text helpers */
.nx .nx-muted {
  color: var(--nx-ink-3);
}
.nx .nx-soft {
  color: var(--nx-ink-2);
}
.nx .nx-xs {
  font-size: var(--nx-fs-xs);
}
.nx .nx-sm {
  font-size: var(--nx-fs-sm);
}
.nx .nx-md {
  font-size: var(--nx-fs-md);
}
.nx .nx-strong {
  font-weight: 600;
}
.nx .nx-num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.nx .nx-ltr {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}
.nx .nx-trunc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
/* Names that identify something (products, indicators) wrap onto a second line before they are cut. */
.nx .nx-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
  white-space: normal;
  min-width: 0;
}
.nx .nx-pos {
  color: var(--nx-pos);
}
.nx .nx-neg {
  color: var(--nx-neg);
}
.nx .nx-warn {
  color: var(--nx-warn);
}
.nx .nx-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Layout helpers */
.nx .nx-row {
  display: flex;
  align-items: center;
  gap: var(--nx-s-2);
  min-width: 0;
}
.nx .nx-row-wrap {
  flex-wrap: wrap;
}
.nx .nx-row-between {
  justify-content: space-between;
}
.nx .nx-col {
  display: flex;
  flex-direction: column;
  gap: var(--nx-s-2);
  min-width: 0;
}
.nx .nx-grow {
  flex: 1 1 0;
  min-width: 0;
}
.nx .nx-spacer {
  flex: 1 1 auto;
}
.nx .nx-grid {
  display: grid;
  gap: var(--nx-s-4);
  min-width: 0;
}

/* nx controls: buttons, fields, chips, badges, small indicators. */

/* ---- Buttons ---------------------------------------------------------------------------- */
.nx .nx-btn {
  --b-bg: var(--nx-surface);
  --b-fg: var(--nx-ink);
  --b-bd: var(--nx-line-strong);
  --b-bg-h: var(--nx-surface-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: var(--nx-ctl-h);
  padding: 0 0.85rem;
  border: 1px solid var(--b-bd);
  border-radius: var(--nx-r-md);
  background: var(--b-bg);
  color: var(--b-fg);
  font-weight: 500;
  font-size: var(--nx-fs-base);
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  text-align: center;
  transition: background-color var(--nx-d-fast) var(--nx-ease), border-color var(--nx-d-fast) var(--nx-ease), color var(--nx-d-fast) var(--nx-ease), box-shadow var(--nx-d-fast) var(--nx-ease);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.nx .nx-btn:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--b-bg-h);
}
.nx .nx-btn:active:not(:disabled) {
  transform: translateY(0.5px);
}
.nx .nx-btn-primary {
  --b-bg: var(--nx-brand);
  --b-fg: #fff;
  --b-bd: var(--nx-brand);
  --b-bg-h: var(--nx-brand-hover);
}
.nx[data-theme="dark"] .nx-btn-primary {
  --b-fg: #07122a;
}
.nx .nx-btn-ghost {
  --b-bg: transparent;
  --b-bd: transparent;
  --b-bg-h: var(--nx-surface-3);
  color: var(--nx-ink-2);
}
.nx .nx-btn-danger {
  --b-bg: var(--nx-neg);
  --b-fg: #fff;
  --b-bd: var(--nx-neg);
  --b-bg-h: #8f1d17;
}
.nx[data-theme="dark"] .nx-btn-danger {
  --b-fg: #1c0705;
  --b-bg-h: #ffa59e;
}
.nx .nx-btn-soft {
  --b-bg: var(--nx-brand-soft);
  --b-fg: var(--nx-brand-ink);
  --b-bd: var(--nx-brand-line);
  --b-bg-h: var(--nx-brand-line);
}
.nx .nx-btn-sm {
  min-height: var(--nx-ctl-h-sm);
  padding: 0 0.6rem;
  font-size: var(--nx-fs-sm);
  border-radius: var(--nx-r-sm);
}
.nx .nx-btn-lg {
  min-height: var(--nx-ctl-h-lg);
  padding: 0 1.1rem;
  font-size: var(--nx-fs-md);
}
.nx .nx-btn-icon {
  width: var(--nx-ctl-h);
  padding: 0;
}
.nx .nx-btn-icon.nx-btn-sm {
  width: var(--nx-ctl-h-sm);
}
.nx .nx-btn:disabled,
.nx .nx-btn[aria-disabled="true"] {
  opacity: 0.5;
}
.nx .nx-btn[aria-busy="true"] {
  position: relative;
  color: transparent;
  pointer-events: none;
}
.nx .nx-btn[aria-busy="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--b-fg);
  border-inline-end-color: transparent;
  border-radius: 50%;
  animation: nx-spin 0.7s linear infinite;
}
.nx .nx-btn-ghost[aria-busy="true"]::after {
  border-color: var(--nx-ink-2);
  border-inline-end-color: transparent;
}
@keyframes nx-spin {
  to {
    transform: rotate(360deg);
  }
}
.nx .nx-link {
  color: var(--nx-brand);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}
.nx .nx-link:hover {
  color: var(--nx-brand-ink);
}

/* ---- Fields ------------------------------------------------------------------------------ */
.nx .nx-field {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
}
.nx .nx-label {
  font-size: var(--nx-fs-sm);
  font-weight: 500;
  color: var(--nx-ink-2);
}
.nx .nx-hint {
  font-size: var(--nx-fs-xs);
  color: var(--nx-ink-3);
}
.nx .nx-input,
.nx .nx-select,
.nx .nx-textarea {
  width: 100%;
  min-height: var(--nx-ctl-h);
  padding: 0 0.7rem;
  background: var(--nx-surface);
  color: var(--nx-ink);
  border: 1px solid var(--nx-line-strong);
  border-radius: var(--nx-r-md);
  font-size: var(--nx-fs-base);
  transition: border-color var(--nx-d-fast) var(--nx-ease), box-shadow var(--nx-d-fast) var(--nx-ease);
}
.nx .nx-textarea {
  padding-block: 0.5rem;
  min-height: 5.5rem;
  resize: vertical;
  line-height: 1.55;
}
.nx .nx-select {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='%2366748f'%3E%3Cpath d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 0.75rem;
}
.nx[dir="rtl"] .nx-select {
  background-position: left 0.7rem center;
}
.nx .nx-input::placeholder,
.nx .nx-textarea::placeholder {
  color: var(--nx-ink-3);
  opacity: 1;
}
.nx .nx-input:hover,
.nx .nx-select:hover,
.nx .nx-textarea:hover {
  border-color: var(--nx-ink-3);
}
.nx .nx-input:focus,
.nx .nx-select:focus,
.nx .nx-textarea:focus {
  outline: none;
  border-color: var(--nx-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nx-brand) 22%, transparent);
}
.nx .nx-input[aria-invalid="true"],
.nx .nx-select[aria-invalid="true"],
.nx .nx-textarea[aria-invalid="true"] {
  border-color: var(--nx-neg);
}
.nx .nx-input[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nx-neg) 22%, transparent);
}
.nx .nx-input:disabled,
.nx .nx-input[readonly] {
  background: var(--nx-surface-2);
  color: var(--nx-ink-2);
}
.nx .nx-error {
  display: flex;
  gap: 0.35rem;
  align-items: flex-start;
  font-size: var(--nx-fs-sm);
  color: var(--nx-neg);
}
.nx .nx-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.nx .nx-input-wrap > .nx-i {
  position: absolute;
  inset-inline-start: 0.65rem;
  color: var(--nx-ink-3);
  pointer-events: none;
}
.nx .nx-input-wrap > .nx-input {
  padding-inline-start: 2.15rem;
}
.nx .nx-input-wrap > .nx-input-clear {
  position: absolute;
  inset-inline-end: 0.3rem;
}

/* Checkbox and radio rows */
.nx .nx-check {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  min-height: 1.5rem;
}
.nx .nx-check input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 1.0625rem;
  height: 1.0625rem;
  margin: 0;
  border: 1.5px solid var(--nx-line-strong);
  border-radius: 4px;
  background: var(--nx-surface);
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: background-color var(--nx-d-fast) var(--nx-ease), border-color var(--nx-d-fast) var(--nx-ease);
}
.nx .nx-check input[type="radio"] {
  border-radius: 50%;
}
.nx .nx-check input::before {
  content: "";
  width: 0.5rem;
  height: 0.3rem;
  border-inline-start: 2px solid #fff;
  border-block-end: 2px solid #fff;
  transform: rotate(-45deg) scale(0);
  margin-top: -2px;
  transition: transform var(--nx-d-fast) var(--nx-ease);
}
.nx .nx-check input[type="radio"]::before {
  width: 0.4rem;
  height: 0.4rem;
  border: 0;
  border-radius: 50%;
  background: #fff;
  transform: scale(0);
  margin: 0;
}
.nx .nx-check input:checked,
.nx .nx-check input:indeterminate {
  background: var(--nx-brand);
  border-color: var(--nx-brand);
}
.nx .nx-check input:checked::before {
  transform: rotate(-45deg) scale(1);
}
.nx .nx-check input[type="radio"]:checked::before {
  transform: scale(1);
}
.nx .nx-check input:indeterminate::before {
  width: 0.5rem;
  height: 0;
  border-inline-start: 0;
  transform: scale(1);
  margin: 0;
}
.nx[data-theme="dark"] .nx-check input::before {
  border-color: #07122a;
}
.nx[data-theme="dark"] .nx-check input[type="radio"]::before {
  background: #07122a;
}
.nx .nx-check input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Switch */
.nx .nx-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
}
.nx .nx-switch input {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: none;
  width: 2.125rem;
  height: 1.25rem;
  margin: 0;
  border-radius: 999px;
  background: var(--nx-line-strong);
  cursor: pointer;
  transition: background-color var(--nx-d-base) var(--nx-ease);
}
.nx .nx-switch input::after {
  content: "";
  position: absolute;
  inset-block-start: 2px;
  inset-inline-start: 2px;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.25);
  transition: inset-inline-start var(--nx-d-base) var(--nx-ease);
}
.nx .nx-switch input:checked {
  background: var(--nx-brand);
}
.nx .nx-switch input:checked::after {
  inset-inline-start: calc(100% - 1rem - 2px);
}
.nx .nx-switch input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Segmented control */
.nx .nx-seg {
  display: inline-flex;
  flex-wrap: wrap;
  max-width: 100%;
  padding: 2px;
  gap: 2px;
  background: var(--nx-surface-3);
  border-radius: var(--nx-r-md);
  min-width: 0;
}
.nx .nx-seg > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: calc(var(--nx-ctl-h) - 6px);
  padding: 0 0.7rem;
  border-radius: calc(var(--nx-r-md) - 2px);
  font-size: var(--nx-fs-sm);
  font-weight: 500;
  color: var(--nx-ink-2);
  white-space: nowrap;
  transition: background-color var(--nx-d-fast) var(--nx-ease), color var(--nx-d-fast) var(--nx-ease);
}
.nx .nx-seg > button:hover {
  color: var(--nx-ink);
}
.nx .nx-seg > button[aria-pressed="true"],
.nx .nx-seg > button[aria-checked="true"],
.nx .nx-seg > button.is-on {
  background: var(--nx-surface);
  color: var(--nx-brand-ink);
  box-shadow: 0 1px 2px rgb(20 33 63 / 0.12), 0 0 0 1px var(--nx-line);
}
.nx[data-theme="dark"] .nx-seg > button.is-on,
.nx[data-theme="dark"] .nx-seg > button[aria-pressed="true"] {
  background: var(--nx-surface-3);
  box-shadow: 0 0 0 1px var(--nx-line-strong);
}

/* ---- Chips: filters ----------------------------------------------------------------------- */
.nx .nx-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: var(--nx-ctl-h);
  padding: 0 0.7rem;
  border: 1px solid var(--nx-line-strong);
  border-radius: 999px;
  background: var(--nx-surface);
  color: var(--nx-ink);
  font-size: var(--nx-fs-sm);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  max-width: 100%;
  transition: background-color var(--nx-d-fast) var(--nx-ease), border-color var(--nx-d-fast) var(--nx-ease);
}
.nx .nx-chip:hover {
  background: var(--nx-surface-3);
}
.nx .nx-chip .nx-chip-k {
  color: var(--nx-ink-3);
  font-weight: 400;
}
.nx .nx-chip .nx-chip-v {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* In a narrow app the preset name is enough; the full range stays in the page heading and for screen readers. */
@container nxapp (max-width: 480px) {
  .nx .nx-chip.has-preset {
    position: relative;
  }
  .nx .nx-chip.has-preset .nx-chip-v {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
.nx .nx-chip.is-active {
  background: var(--nx-brand-soft);
  border-color: var(--nx-brand-line);
  color: var(--nx-brand-ink);
}
.nx .nx-chip.is-active .nx-chip-k {
  color: var(--nx-brand);
}
.nx .nx-chip-x {
  display: inline-grid;
  place-content: center;
  width: 1.1rem;
  height: 1.1rem;
  margin-inline-end: -0.3rem;
  border-radius: 50%;
  color: inherit;
  opacity: 0.7;
}
.nx .nx-chip-x:hover {
  background: color-mix(in srgb, currentColor 14%, transparent);
  opacity: 1;
}

/* ---- Badges, tags, avatars ------------------------------------------------------------------- */
.nx .nx-badge {
  --bd-fg: var(--nx-ink-2);
  --bd-bg: var(--nx-surface-3);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  background: var(--bd-bg);
  color: var(--bd-fg);
  font-size: var(--nx-fs-xs);
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
}
.nx .nx-badge.is-dot::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: currentColor;
}
.nx .nx-badge.pos {
  --bd-fg: var(--nx-pos);
  --bd-bg: var(--nx-pos-soft);
}
.nx .nx-badge.neg {
  --bd-fg: var(--nx-neg);
  --bd-bg: var(--nx-neg-soft);
}
.nx .nx-badge.warn {
  --bd-fg: var(--nx-warn);
  --bd-bg: var(--nx-warn-soft);
}
.nx .nx-badge.info,
.nx .nx-badge.brand {
  --bd-fg: var(--nx-brand-ink);
  --bd-bg: var(--nx-brand-soft);
}
.nx .nx-badge.accent {
  --bd-fg: var(--nx-accent-ink);
  --bd-bg: var(--nx-accent-soft);
}
.nx .nx-tag {
  display: inline-flex;
  align-items: center;
  padding: 0 0.45rem;
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-sm);
  background: var(--nx-surface-2);
  color: var(--nx-ink-2);
  font-size: var(--nx-fs-xs);
  line-height: 1.6;
  white-space: nowrap;
}
.nx .nx-avatar {
  --av: 2rem;
  display: inline-grid;
  place-content: center;
  flex: none;
  width: var(--av);
  height: var(--av);
  border-radius: 50%;
  background: var(--av-bg, var(--nx-brand-soft));
  color: var(--av-fg, var(--nx-brand-ink));
  font-size: calc(var(--av) * 0.38);
  font-weight: 600;
  line-height: 1;
  overflow: hidden;
}
.nx .nx-avatar.sm {
  --av: 1.5rem;
}
.nx .nx-avatar.lg {
  --av: 2.75rem;
}
.nx .nx-avatar.xl {
  --av: 4rem;
}
.nx .nx-avatars {
  display: inline-flex;
}
.nx .nx-avatars > .nx-avatar + .nx-avatar {
  margin-inline-start: -0.4rem;
  box-shadow: 0 0 0 2px var(--nx-surface);
}

/* Delta: ▲ icon + percent, coloured by meaning (not by sign) */
.nx .nx-delta {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  padding-block: 0.05rem;
  padding-inline: 0.25rem 0.45rem;
  border-radius: 999px;
  font-size: var(--nx-fs-xs);
  font-weight: 600;
  line-height: 1.5;
  background: var(--nx-surface-3);
  color: var(--nx-ink-2);
  white-space: nowrap;
}
.nx .nx-delta.pos {
  background: var(--nx-pos-soft);
  color: var(--nx-pos);
}
.nx .nx-delta.neg {
  background: var(--nx-neg-soft);
  color: var(--nx-neg);
}
.nx .nx-delta .nx-i {
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.2em;
}

/* Progress */
.nx .nx-progress {
  position: relative;
  height: 0.375rem;
  border-radius: 999px;
  background: var(--nx-surface-3);
  overflow: hidden;
}
.nx .nx-progress > i {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  border-radius: inherit;
  background: var(--nx-brand);
  width: calc(var(--p, 0) * 1%);
  transition: width var(--nx-d-slow) var(--nx-ease);
}
.nx .nx-progress.pos > i {
  background: var(--nx-pos);
}
.nx .nx-progress.neg > i {
  background: var(--nx-neg);
}
.nx .nx-progress.warn > i {
  background: var(--nx-warn);
}

.nx kbd {
  display: inline-block;
  min-width: 1.4rem;
  padding: 0 0.35rem;
  border: 1px solid var(--nx-line-strong);
  border-block-end-width: 2px;
  border-radius: var(--nx-r-sm);
  background: var(--nx-surface);
  color: var(--nx-ink-2);
  font: inherit;
  font-size: var(--nx-fs-xs);
  text-align: center;
  line-height: 1.5;
}
.nx .nx-spinner {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--nx-line-strong);
  border-inline-end-color: var(--nx-brand);
  border-radius: 50%;
  animation: nx-spin 0.8s linear infinite;
}

/* ---- forms inside dialogs (NX.form) ------------------------------------------------------------------------------------------ */
.nx .nx-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--nx-s-3) var(--nx-s-4);
}
.nx .nx-form > .nx-full,
.nx .nx-form > .nx-form-intro {
  grid-column: 1 / -1;
}
.nx .nx-form-intro {
  display: flex;
  flex-direction: column;
  gap: var(--nx-s-2);
}
.nx .nx-radios {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.nx .nx-radio {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-md);
  cursor: pointer;
  transition: border-color var(--nx-d-fast) var(--nx-ease), background-color var(--nx-d-fast) var(--nx-ease);
}
.nx .nx-radio:hover {
  border-color: var(--nx-line-strong);
}
.nx .nx-radio:has(input:checked) {
  border-color: var(--nx-brand-line);
  background: var(--nx-brand-soft);
}
.nx .nx-radio:has(input:focus-visible) {
  outline: 2px solid var(--nx-focus);
  outline-offset: 1px;
}
.nx .nx-radio .nx-check {
  margin-block-start: 0.1rem;
}
.nx .nx-radios[aria-invalid="true"] .nx-radio {
  border-color: color-mix(in srgb, var(--nx-neg) 45%, transparent);
}
.nx .nx-static {
  padding-block: 0.4rem;
  font-size: var(--nx-fs-base);
}
.nx .nx-count {
  justify-self: end;
}
@media (max-width: 560px) {
  .nx .nx-form {
    grid-template-columns: minmax(0, 1fr);
  }
}
.nx .nx-block {
  display: block;
}

/* nx surfaces: panels, tables, tabs, menus, overlays, feedback and state blocks. */

/* ---- Panel ---------------------------------------------------------------------------------- */
.nx .nx-panel {
  background: var(--nx-surface);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-lg);
  box-shadow: var(--nx-shadow-panel);
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.nx .nx-panel-h {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--nx-s-2) var(--nx-s-3);
  padding: var(--nx-s-4) var(--nx-s-4) 0;
  min-width: 0;
}
.nx .nx-panel-h > .nx-grow {
  flex: 1 1 14rem;
  min-width: 0;
}
.nx .nx-panel-h h3,
.nx .nx-panel-h h2 {
  font-size: var(--nx-fs-md);
  font-weight: 600;
  line-height: 1.35;
}
.nx .nx-panel-h .nx-sub {
  margin-top: 0.15rem;
  font-size: var(--nx-fs-sm);
  color: var(--nx-ink-3);
}
.nx .nx-panel-h .nx-actions {
  margin-inline-start: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--nx-s-2);
  flex: 0 1 auto;
  max-width: 100%;
  min-width: 0;
}
.nx .nx-panel-b {
  padding: var(--nx-s-4);
  min-width: 0;
  flex: 1 1 auto;
}
.nx .nx-panel-b.flush {
  padding: 0;
}
.nx .nx-panel-f {
  padding: var(--nx-s-3) var(--nx-s-4);
  border-block-start: 1px solid var(--nx-line);
  font-size: var(--nx-fs-sm);
  color: var(--nx-ink-3);
}
.nx .nx-sec-title {
  font-size: var(--nx-fs-md);
  font-weight: 600;
  line-height: 1.4;
}

/* ---- Tables ---------------------------------------------------------------------------------- */
.nx .nx-tablewrap {
  position: relative;
  overflow: auto;
  min-width: 0;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  /* Edge shadows appear only on a side that has more to scroll to. */
  background:
    linear-gradient(to right, var(--nx-surface) 30%, transparent) left center / 2rem 100% no-repeat local,
    linear-gradient(to left, var(--nx-surface) 30%, transparent) right center / 2rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--nx-ink) 16%, transparent), transparent) left center / 0.7rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--nx-ink) 16%, transparent), transparent) right center / 0.7rem 100% no-repeat scroll;
}
.nx .nx-table {
  font-size: var(--nx-fs-base);
}
/* The panel heading already names the table; the caption stays for assistive technology only. */
.nx .nx-table caption {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.nx .nx-table :is(th, td) {
  padding: 0.55rem 0.75rem;
  border-block-end: 1px solid var(--nx-line);
  vertical-align: middle;
  min-width: 0;
  white-space: nowrap;
}
.nx .nx-table td.wrap {
  white-space: normal;
  min-width: 13rem;
}
.nx .nx-table thead th {
  position: sticky;
  inset-block-start: 0;
  z-index: 1;
  background: var(--nx-surface-2);
  color: var(--nx-ink-3);
  font-size: var(--nx-fs-xs);
  font-weight: 500;
  white-space: nowrap;
  border-block-end: 1px solid var(--nx-line-strong);
}
.nx .nx-table thead th .nx-th {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: inherit;
  font-weight: inherit;
  cursor: pointer;
}
.nx .nx-table thead th .nx-th:hover {
  color: var(--nx-ink);
}
.nx .nx-table thead th[aria-sort="ascending"],
.nx .nx-table thead th[aria-sort="descending"] {
  color: var(--nx-brand-ink);
}
.nx .nx-table thead th .nx-sort {
  width: 0.8rem;
  height: 0.8rem;
  opacity: 0.35;
}
.nx .nx-table thead th[aria-sort="ascending"] .nx-sort,
.nx .nx-table thead th[aria-sort="descending"] .nx-sort {
  opacity: 1;
}
.nx .nx-table .num,
.nx .nx-table th.num {
  text-align: end;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.nx .nx-table th.num .nx-th {
  flex-direction: row-reverse;
}
.nx .nx-table tbody tr {
  transition: background-color var(--nx-d-fast) var(--nx-ease);
}
.nx .nx-table tbody tr:hover {
  background: var(--nx-surface-2);
}
.nx .nx-table tbody tr.is-click {
  cursor: pointer;
}
.nx .nx-table tbody tr.is-selected {
  background: var(--nx-brand-soft);
}
.nx .nx-table tbody tr:last-child :is(th, td) {
  border-block-end: 0;
}
.nx .nx-table tbody th {
  font-weight: 500;
}
.nx .nx-table .nx-cell-main {
  display: flex;
  align-items: center;
  gap: var(--nx-s-2);
  min-width: 0;
}
.nx .nx-table .nx-cell-main > div {
  min-width: 0;
}
.nx .nx-table .nx-cell-sub {
  font-size: var(--nx-fs-xs);
  color: var(--nx-ink-3);
}
.nx .nx-table tfoot td,
.nx .nx-table tfoot th {
  background: var(--nx-surface-2);
  border-block-start: 1px solid var(--nx-line-strong);
  border-block-end: 0;
  font-weight: 600;
}
.nx .nx-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nx-s-3);
  flex-wrap: wrap;
  padding: var(--nx-s-3) var(--nx-s-4);
  border-block-start: 1px solid var(--nx-line);
  font-size: var(--nx-fs-sm);
  color: var(--nx-ink-3);
}
.nx .nx-pager .nx-pages {
  display: flex;
  gap: 0.25rem;
}

/* Key/value list */
.nx .nx-kv {
  display: grid;
  grid-template-columns: minmax(7rem, max-content) 1fr;
  gap: 0.45rem var(--nx-s-4);
  font-size: var(--nx-fs-base);
}
.nx .nx-kv dt {
  color: var(--nx-ink-3);
}
.nx .nx-kv dd {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ---- Tabs (underline) ----------------------------------------------------------------------- */
.nx .nx-tabs {
  display: flex;
  gap: var(--nx-s-1);
  border-block-end: 1px solid var(--nx-line);
  overflow-x: auto;
  scrollbar-width: none;
  min-width: 0;
}
.nx .nx-tabs::-webkit-scrollbar {
  display: none;
}
.nx .nx-tabs [role="tab"] {
  position: relative;
  padding: 0.6rem 0.8rem;
  color: var(--nx-ink-3);
  font-weight: 500;
  white-space: nowrap;
  transition: color var(--nx-d-fast) var(--nx-ease);
}
.nx .nx-tabs [role="tab"]:hover {
  color: var(--nx-ink);
}
.nx .nx-tabs [role="tab"][aria-selected="true"] {
  color: var(--nx-brand-ink);
}
.nx .nx-tabs [role="tab"][aria-selected="true"]::after {
  content: "";
  position: absolute;
  inset-inline: 0.5rem;
  inset-block-end: -1px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--nx-brand);
}
.nx .nx-tabs .nx-count {
  margin-inline-start: 0.35rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--nx-surface-3);
  color: var(--nx-ink-2);
  font-size: var(--nx-fs-xs);
}

/* ---- Menus, popovers, listbox ------------------------------------------------------------------ */
.nx .nx-layer {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
}
.nx .nx-layer > * {
  pointer-events: auto;
}
.nx .nx-pop {
  position: fixed;
  z-index: 3;
  min-width: 11rem;
  max-width: min(26rem, calc(100vw - 1.5rem));
  max-height: min(38rem, calc(100vh - 1.5rem));
  overflow: auto;
  background: var(--nx-surface);
  border-radius: var(--nx-r-lg);
  box-shadow: var(--nx-shadow-pop);
  padding: var(--nx-s-1);
  animation: nx-pop var(--nx-d-base) var(--nx-ease);
}
.nx .nx-pop.pad {
  padding: var(--nx-s-4);
}
@keyframes nx-pop {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}
.nx .nx-menu-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 2rem;
  padding: 0.35rem 0.6rem;
  border-radius: var(--nx-r-md);
  color: var(--nx-ink);
  font-size: var(--nx-fs-base);
  text-align: start;
  cursor: pointer;
}
.nx .nx-menu-item:hover,
.nx .nx-menu-item:focus-visible,
.nx .nx-menu-item.is-active {
  background: var(--nx-surface-3);
  outline: none;
}
.nx .nx-menu-item[aria-checked="true"],
.nx .nx-menu-item[aria-selected="true"] {
  color: var(--nx-brand-ink);
  font-weight: 500;
}
.nx .nx-menu-item .nx-tick {
  margin-inline-start: auto;
  color: var(--nx-brand);
}
.nx .nx-menu-item.danger {
  color: var(--nx-neg);
}
.nx .nx-menu-item .nx-k {
  margin-inline-start: auto;
  color: var(--nx-ink-3);
  font-size: var(--nx-fs-xs);
}
.nx .nx-menu-sep {
  height: 1px;
  margin: var(--nx-s-1) 0;
  background: var(--nx-line);
}
.nx .nx-menu-h {
  padding: 0.4rem 0.6rem 0.2rem;
  color: var(--nx-ink-3);
  font-size: var(--nx-fs-xs);
  font-weight: 500;
}
.nx .nx-pop .nx-search {
  padding: var(--nx-s-1) var(--nx-s-1) var(--nx-s-2);
}
.nx .nx-pop-foot {
  display: flex;
  justify-content: space-between;
  gap: var(--nx-s-2);
  padding: var(--nx-s-2) var(--nx-s-1) var(--nx-s-1);
  border-block-start: 1px solid var(--nx-line);
  margin-block-start: var(--nx-s-1);
}

/* Tooltip */
.nx .nx-tip {
  position: fixed;
  z-index: 5;
  max-width: 16rem;
  padding: 0.3rem 0.55rem;
  border-radius: var(--nx-r-md);
  background: var(--nx-brand-ink);
  color: #fff;
  font-size: var(--nx-fs-xs);
  line-height: 1.45;
  pointer-events: none;
  animation: nx-pop var(--nx-d-fast) var(--nx-ease);
}
.nx[data-theme="dark"] .nx-tip {
  background: #e8edf7;
  color: #0a1220;
}

/* ---- Dialog and drawer ---------------------------------------------------------------------- */
.nx .nx-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2; /* same level as dialogs and drawers: what opens later covers what opened before */
  background: var(--nx-overlay);
  animation: nx-fade var(--nx-d-base) var(--nx-ease);
}
@keyframes nx-fade {
  from {
    opacity: 0;
  }
}
.nx .nx-dialog {
  position: fixed;
  z-index: 2;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  translate: -50% -50%;
  width: min(34rem, calc(100vw - 1.5rem));
  max-height: calc(100vh - 2rem);
  display: flex;
  flex-direction: column;
  background: var(--nx-surface);
  border-radius: var(--nx-r-xl);
  box-shadow: var(--nx-shadow-dialog);
  animation: nx-dialog var(--nx-d-base) var(--nx-ease);
}
.nx[dir="rtl"] .nx-dialog {
  translate: 50% -50%;
}
@keyframes nx-dialog {
  from {
    opacity: 0;
    scale: 0.97;
  }
}
.nx .nx-dialog.wide {
  width: min(46rem, calc(100vw - 1.5rem));
}
.nx .nx-dialog-h {
  display: flex;
  align-items: flex-start;
  gap: var(--nx-s-3);
  padding: var(--nx-s-5) var(--nx-s-5) var(--nx-s-2);
}
.nx .nx-dialog-h h2 {
  font-size: var(--nx-fs-lg);
  font-weight: 600;
  line-height: 1.35;
}
.nx .nx-dialog-h .nx-sub {
  margin-top: 0.15rem;
  color: var(--nx-ink-3);
  font-size: var(--nx-fs-sm);
}
.nx .nx-dialog-b {
  padding: var(--nx-s-2) var(--nx-s-5) var(--nx-s-4);
  overflow: auto;
  color: var(--nx-ink-2);
}
.nx .nx-dialog-f {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--nx-s-2);
  padding: var(--nx-s-3) var(--nx-s-5) var(--nx-s-4);
  border-block-start: 1px solid var(--nx-line);
}
.nx .nx-dialog-icon {
  display: grid;
  place-content: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--nx-brand-soft);
  color: var(--nx-brand);
  font-size: 1.25rem;
}
.nx .nx-dialog-icon.neg {
  background: var(--nx-neg-soft);
  color: var(--nx-neg);
}
.nx .nx-dialog-icon.warn {
  background: var(--nx-warn-soft);
  color: var(--nx-warn);
}
.nx .nx-drawer {
  position: fixed;
  z-index: 2;
  inset-block: 0;
  inset-inline-end: 0;
  width: min(36rem, 100vw);
  display: flex;
  flex-direction: column;
  background: var(--nx-surface);
  box-shadow: var(--nx-shadow-dialog);
  animation: nx-drawer var(--nx-d-slow) var(--nx-ease);
}
.nx .nx-drawer.wide {
  width: min(52rem, 100vw);
}
@keyframes nx-drawer {
  from {
    translate: 3rem 0;
    opacity: 0;
  }
}
.nx[dir="rtl"] .nx-drawer {
  animation-name: nx-drawer-rtl;
}
@keyframes nx-drawer-rtl {
  from {
    translate: -3rem 0;
    opacity: 0;
  }
}
.nx .nx-drawer-h {
  display: flex;
  align-items: flex-start;
  gap: var(--nx-s-3);
  padding: var(--nx-s-4) var(--nx-s-5);
  border-block-end: 1px solid var(--nx-line);
}
.nx .nx-drawer-h h2 {
  font-size: var(--nx-fs-lg);
  font-weight: 600;
  line-height: 1.35;
}
.nx .nx-drawer-h .nx-sub {
  margin-top: 0.1rem;
  color: var(--nx-ink-3);
  font-size: var(--nx-fs-sm);
}
.nx .nx-drawer-b {
  flex: 1 1 auto;
  overflow: auto;
  padding: var(--nx-s-5);
  min-height: 0;
}
.nx .nx-drawer-f {
  display: flex;
  gap: var(--nx-s-2);
  justify-content: flex-end;
  padding: var(--nx-s-3) var(--nx-s-5);
  border-block-start: 1px solid var(--nx-line);
  background: var(--nx-surface-2);
}

/* ---- Toasts --------------------------------------------------------------------------------- */
.nx .nx-toasts {
  position: fixed;
  z-index: 4;
  inset-block-end: var(--nx-s-4);
  inset-inline-start: var(--nx-s-4);
  display: flex;
  flex-direction: column;
  gap: var(--nx-s-2);
  width: min(24rem, calc(100vw - 2rem));
  pointer-events: none;
}
.nx .nx-toast {
  --t: var(--nx-brand);
  pointer-events: auto;
  display: flex;
  gap: var(--nx-s-3);
  align-items: flex-start;
  padding: 0.7rem 0.8rem;
  background: var(--nx-surface);
  border-radius: var(--nx-r-lg);
  box-shadow: var(--nx-shadow-pop);
  border-inline-start: 3px solid var(--t);
  animation: nx-toast var(--nx-d-slow) var(--nx-ease);
}
@keyframes nx-toast {
  from {
    opacity: 0;
    translate: 0 0.75rem;
  }
}
.nx .nx-toast.pos {
  --t: var(--nx-pos);
}
.nx .nx-toast.neg {
  --t: var(--nx-neg);
}
.nx .nx-toast.warn {
  --t: var(--nx-warn);
}
.nx .nx-toast > .nx-i {
  color: var(--t);
  margin-top: 0.15rem;
}
.nx .nx-toast strong {
  display: block;
  font-weight: 600;
}
.nx .nx-toast p {
  color: var(--nx-ink-2);
  font-size: var(--nx-fs-sm);
}
.nx .nx-toast.out {
  opacity: 0;
  translate: 0 0.5rem;
  transition: opacity var(--nx-d-base) var(--nx-ease), translate var(--nx-d-base) var(--nx-ease);
}

/* ---- Banners, states, skeletons --------------------------------------------------------------- */
.nx .nx-banner {
  --bn: var(--nx-brand);
  --bn-bg: var(--nx-info-soft);
  display: flex;
  align-items: flex-start;
  gap: var(--nx-s-3);
  padding: 0.65rem 0.85rem;
  border-radius: var(--nx-r-lg);
  border: 1px solid color-mix(in srgb, var(--bn) 28%, transparent);
  background: var(--bn-bg);
  color: var(--nx-ink);
  font-size: var(--nx-fs-base);
}
.nx .nx-banner > .nx-i {
  color: var(--bn);
  margin-top: 0.15rem;
}
.nx .nx-banner.warn {
  --bn: var(--nx-warn);
  --bn-bg: var(--nx-warn-soft);
}
.nx .nx-banner.neg {
  --bn: var(--nx-neg);
  --bn-bg: var(--nx-neg-soft);
}
.nx .nx-banner.pos {
  --bn: var(--nx-pos);
  --bn-bg: var(--nx-pos-soft);
}
.nx .nx-banner .nx-grow strong {
  font-weight: 600;
}
.nx .nx-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--nx-s-2);
  padding: var(--nx-s-8) var(--nx-s-4);
  text-align: center;
  min-height: 12rem;
}
.nx .nx-state-ic {
  display: grid;
  place-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--nx-surface-3);
  color: var(--nx-ink-3);
  font-size: 1.35rem;
  margin-bottom: var(--nx-s-1);
}
.nx .nx-state.neg .nx-state-ic {
  background: var(--nx-neg-soft);
  color: var(--nx-neg);
}
.nx .nx-state.warn .nx-state-ic {
  background: var(--nx-warn-soft);
  color: var(--nx-warn);
}
.nx .nx-state.info .nx-state-ic {
  background: var(--nx-brand-soft);
  color: var(--nx-brand);
}
.nx .nx-state h3 {
  font-size: var(--nx-fs-md);
  font-weight: 600;
}
.nx .nx-state p {
  max-width: 30rem;
  color: var(--nx-ink-2);
  font-size: var(--nx-fs-base);
}
.nx .nx-state .nx-row {
  margin-top: var(--nx-s-2);
  justify-content: center;
  flex-wrap: wrap;
}
.nx .nx-skel {
  display: block;
  border-radius: var(--nx-r-sm);
  background: linear-gradient(90deg, var(--nx-surface-3) 0%, var(--nx-surface-2) 45%, var(--nx-surface-3) 90%);
  background-size: 220% 100%;
  animation: nx-shimmer 1.4s linear infinite;
  min-height: 0.75rem;
}
@keyframes nx-shimmer {
  from {
    background-position: 120% 0;
  }
  to {
    background-position: -100% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .nx .nx-skel {
    animation: none;
  }
}
.nx .nx-skel.line {
  height: 0.75rem;
}
.nx .nx-skel.title {
  height: 1.1rem;
  width: 40%;
}
.nx .nx-skel.block {
  height: 100%;
  min-height: 8rem;
  border-radius: var(--nx-r-md);
}
.nx .nx-skel.circle {
  border-radius: 50%;
}

/* ---- Calendar (date range) ----------------------------------------------------------------- */
.nx .nx-cal {
  display: grid;
  gap: var(--nx-s-2);
  width: 15.5rem;
}
.nx .nx-cal-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
}
.nx .nx-cal-g {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  text-align: center;
}
.nx .nx-cal-g .dow {
  color: var(--nx-ink-3);
  font-size: var(--nx-fs-xs);
  padding-block: 0.2rem;
}
.nx .nx-cal-d {
  height: 2rem;
  border-radius: var(--nx-r-md);
  font-size: var(--nx-fs-sm);
  color: var(--nx-ink);
  display: grid;
  place-content: center;
  transition: background-color var(--nx-d-fast) var(--nx-ease);
}
.nx .nx-cal-d:hover:not(:disabled) {
  background: var(--nx-surface-3);
}
.nx .nx-cal-d:disabled {
  color: var(--nx-ink-3);
  opacity: 0.4;
}
.nx .nx-cal-d.in {
  background: var(--nx-brand-soft);
  border-radius: 0;
}
.nx .nx-cal-d.edge {
  background: var(--nx-brand);
  color: #fff;
  border-radius: var(--nx-r-md);
}
.nx[data-theme="dark"] .nx-cal-d.edge {
  color: #07122a;
}
.nx .nx-cal-d.today {
  box-shadow: inset 0 0 0 1px var(--nx-brand-line);
}
.nx .nx-cal-d.pad {
  visibility: hidden;
}

/* A view that is reloading keeps showing its last content, dimmed, until the new content arrives */
.nx .is-refreshing {
  opacity: 0.55;
  pointer-events: none;
  transition: opacity var(--nx-d-base) var(--nx-ease);
}

/* nx shell: the stage around an app (sample-data label, demo controls), the app frame, navigation, KPI cards. */

.nx.nx-stage {
  --nx-sticky-top: calc(var(--header-h, 68px) + 0.5rem);
  position: relative;
  background: var(--nx-bg);
  border: 1px solid var(--nx-line-strong);
  border-radius: var(--nx-r-xl);
  box-shadow: 0 24px 48px -32px rgb(6 32 94 / 0.45);
  color: var(--nx-ink);
}
.nx .nx-stagebar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--nx-s-2) var(--nx-s-4);
  padding: 0.6rem var(--nx-s-4);
  background: var(--nx-surface);
  border-block-end: 1px solid var(--nx-line);
  border-start-start-radius: calc(var(--nx-r-xl) - 1px);
  border-start-end-radius: calc(var(--nx-r-xl) - 1px);
}
.nx .nx-sample {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--nx-accent) 45%, transparent);
  background: var(--nx-accent-soft);
  color: var(--nx-accent-ink);
  font-size: var(--nx-fs-sm);
  font-weight: 600;
  white-space: nowrap;
}
.nx .nx-stage-note {
  flex: 1 1 18rem;
  min-width: 0;
  color: var(--nx-ink-3);
  font-size: var(--nx-fs-sm);
}
.nx .nx-stage-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nx-s-2);
  margin-inline-start: auto;
}
.nx.nx-stage .nx-app {
  container: nxapp / inline-size;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 46rem;
  overflow: clip;
  border-end-start-radius: calc(var(--nx-r-xl) - 1px);
  border-end-end-radius: calc(var(--nx-r-xl) - 1px);
  background: var(--nx-bg);
}
.nx.nx-stage.is-full {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  --nx-sticky-top: 0px;
}
.nx.nx-stage.is-full .nx-stagebar {
  border-radius: 0;
  flex: none;
}
.nx.nx-stage.is-full .nx-app {
  flex: 1 1 auto;
  min-height: 0;
  border-radius: 0;
}
html.nx-lock {
  overflow: hidden;
}

/* App bar */
.nx .nx-appbar {
  display: flex;
  align-items: center;
  gap: var(--nx-s-3);
  padding: 0.55rem var(--nx-s-4);
  background: var(--nx-surface);
  border-block-end: 1px solid var(--nx-line);
  min-width: 0;
  flex: none;
}
.nx .nx-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}
.nx .nx-brand-mark {
  display: grid;
  place-content: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: var(--nx-r-md);
  background: var(--nx-brand-ink);
  color: #fff;
}
.nx[data-theme="dark"] .nx-brand-mark {
  background: var(--nx-brand-soft);
  color: var(--nx-brand-ink);
}
.nx .nx-brand-name {
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
.nx .nx-brand-sub {
  font-size: var(--nx-fs-xs);
  color: var(--nx-ink-3);
  white-space: nowrap;
}
.nx .nx-appbar .nx-tools {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: var(--nx-s-2);
}
.nx .nx-asof {
  font-size: var(--nx-fs-xs);
  color: var(--nx-ink-3);
  white-space: nowrap;
}

/* Frame: side navigation + main column */
.nx .nx-shell {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
}
.nx .nx-side {
  flex: none;
  width: 13.75rem;
  align-self: stretch;
  background: var(--nx-surface);
  border-inline-end: 1px solid var(--nx-line);
}
.nx .nx-side-in {
  position: sticky;
  inset-block-start: var(--nx-sticky-top);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--nx-s-3);
  max-height: calc(100vh - var(--nx-sticky-top));
  overflow: auto;
}
.nx.is-full .nx-side {
  overflow: auto;
}
.nx.is-full .nx-side-in {
  position: static;
  max-height: none;
}
.nx .nx-nav-h {
  padding: var(--nx-s-3) 0.6rem 0.25rem;
  color: var(--nx-ink-3);
  font-size: var(--nx-fs-xs);
  font-weight: 500;
}
.nx .nx-nav-i {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 2.25rem;
  padding: 0.35rem 0.65rem;
  border-radius: var(--nx-r-md);
  color: var(--nx-ink-2);
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--nx-d-fast) var(--nx-ease), color var(--nx-d-fast) var(--nx-ease);
}
.nx .nx-nav-i:hover {
  background: var(--nx-surface-3);
  color: var(--nx-ink);
}
.nx .nx-nav-i[aria-current="page"],
.nx .nx-nav-i.is-on {
  background: var(--nx-brand-soft);
  color: var(--nx-brand-ink);
}
.nx .nx-nav-i[aria-current="page"]::before,
.nx .nx-nav-i.is-on::before {
  content: "";
  position: absolute;
  inset-block: 0.5rem;
  inset-inline-start: -0.75rem;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--nx-brand);
}
.nx[dir="rtl"] .nx-nav-i[aria-current="page"]::before,
.nx[dir="rtl"] .nx-nav-i.is-on::before {
  border-radius: 3px 0 0 3px;
}
.nx .nx-nav-i .nx-badge {
  margin-inline-start: auto;
}
.nx .nx-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.nx.is-full .nx-main {
  overflow: auto;
}
.nx .nx-toolbar {
  position: sticky;
  inset-block-start: var(--nx-sticky-top);
  z-index: 6;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--nx-s-2);
  padding: 0.6rem var(--nx-s-4);
  background: color-mix(in srgb, var(--nx-bg) 94%, transparent);
  border-block-end: 1px solid var(--nx-line);
  backdrop-filter: blur(6px);
}
.nx .nx-toolbar .nx-sep {
  width: 1px;
  align-self: stretch;
  background: var(--nx-line);
  margin-inline: var(--nx-s-1);
}
.nx .nx-content {
  container: nxmain / inline-size;
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--nx-s-4);
  display: flex;
  flex-direction: column;
  gap: var(--nx-s-4);
}
.nx .nx-view-h {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--nx-s-2) var(--nx-s-4);
}
.nx .nx-view-h > .nx-grow {
  flex: 1 1 16rem;
  min-width: 0;
}
.nx .nx-view-h .nx-page-title {
  font-size: var(--nx-fs-xl);
  font-weight: 600;
  line-height: 1.3;
}
.nx .nx-view-h .nx-page-title:focus {
  outline: none;
}
.nx .nx-view-h p {
  color: var(--nx-ink-3);
  font-size: var(--nx-fs-sm);
}
.nx .nx-crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  font-size: var(--nx-fs-sm);
  color: var(--nx-ink-3);
}
.nx .nx-crumbs button {
  color: var(--nx-brand);
  font-weight: 500;
}
.nx .nx-crumbs button:hover {
  text-decoration: underline;
}

/* Grids: width comes from the app container, never from the viewport */
.nx .g-kpi {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--nx-s-3);
}
.nx .g-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--nx-s-4);
}
.nx .g-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--nx-s-4);
}
.nx .g-21 {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--nx-s-4);
}
.nx .g-12 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--nx-s-4);
}
.nx .g-auto {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--nx-s-3);
}
.nx .span-2 {
  grid-column: span 2;
}
.nx .span-all {
  grid-column: 1 / -1;
}

@container nxapp (max-width: 1100px) {
  .nx .nx-side {
    width: 3.5rem;
  }
  .nx .nx-side-in {
    padding-inline: 0.4rem;
  }
  .nx .nx-side .nx-nav-t,
  .nx .nx-side .nx-nav-h,
  .nx .nx-side .nx-nav-i .nx-badge {
    display: none;
  }
  .nx .nx-side .nx-nav-i {
    justify-content: center;
    padding-inline: 0;
  }
  .nx .nx-side .nx-nav-i[aria-current="page"]::before,
  .nx .nx-side .nx-nav-i.is-on::before {
    inset-inline-start: -0.4rem;
  }
  .nx .g-kpi {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .nx .g-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .nx .g-21,
  .nx .g-12 {
    grid-template-columns: minmax(0, 1fr);
  }
}
@container nxapp (max-width: 760px) {
  .nx .nx-shell {
    flex-direction: column;
  }
  .nx .nx-side {
    width: auto;
    border-inline-end: 0;
    border-block-end: 1px solid var(--nx-line);
  }
  .nx .nx-side-in {
    flex-direction: row;
    overflow-x: auto;
    position: static;
    max-height: none;
    padding: 0.4rem var(--nx-s-3);
    scrollbar-width: none;
  }
  .nx .nx-side-in::-webkit-scrollbar {
    display: none;
  }
  .nx .nx-side .nx-nav-i {
    flex: none;
    justify-content: flex-start;
    padding-inline: 0.65rem;
  }
  .nx .nx-side .nx-nav-t {
    display: inline;
  }
  .nx .nx-side .nx-nav-i[aria-current="page"]::before,
  .nx .nx-side .nx-nav-i.is-on::before {
    inset-block: auto -0.4rem;
    inset-inline: 0.65rem;
    width: auto;
    height: 3px;
    border-radius: 3px 3px 0 0;
  }
  .nx .nx-toolbar {
    position: static;
    backdrop-filter: none;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .nx .nx-toolbar::-webkit-scrollbar {
    display: none;
  }
  .nx .nx-toolbar > * {
    flex: none;
  }
  .nx .nx-content {
    padding: var(--nx-s-3);
  }
  .nx .g-2,
  .nx .g-3 {
    grid-template-columns: minmax(0, 1fr);
  }
  .nx .span-2 {
    grid-column: auto;
  }
  .nx .nx-appbar .nx-asof {
    display: none;
  }
  .nx .nx-panel-h .nx-actions {
    flex: 1 1 100%;
    margin-inline-start: 0;
    justify-content: flex-start;
  }
}
/* Table columns drop by priority as the content column narrows (the side navigation takes part of the app width). */
@container nxmain (max-width: 1100px) {
  .nx .nx-table .hide-lg {
    display: none;
  }
}
@container nxmain (max-width: 920px) {
  .nx .nx-table .hide-md {
    display: none;
  }
}
@container nxmain (max-width: 720px) {
  .nx .nx-table thead th,
  .nx .nx-table thead th.num {
    white-space: normal;
    line-height: 1.25;
    vertical-align: bottom;
  }
  .nx .nx-table thead th .nx-th {
    white-space: inherit;
    text-align: start;
  }
  .nx .nx-table th.num .nx-th {
    text-align: end;
  }
  .nx .nx-table :is(th, td) {
    padding-inline: 0.55rem;
  }
  .nx .nx-table .hide-sm {
    display: none;
  }
}
@container nxmain (max-width: 520px) {
  .nx .nx-table .hide-xs {
    display: none;
  }
  .nx .nx-table tbody th {
    white-space: normal;
  }
  .nx .nx-table .nx-cell-sub.nx-trunc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    white-space: normal;
    overflow-wrap: break-word;
  }
}
@container nxapp (max-width: 480px) {
  .nx .g-kpi {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--nx-s-2);
  }
  .nx .nx-brand-sub {
    display: none;
  }
}
@media (max-width: 560px) {
  .nx .nx-stagebar {
    padding: 0.5rem var(--nx-s-3);
    gap: var(--nx-s-2);
  }
  .nx .nx-sample {
    white-space: normal;
    max-inline-size: 100%;
    border-radius: 1rem;
    line-height: 1.3;
    text-wrap: balance;
  }
  .nx .nx-stage-actions {
    width: 100%;
    margin-inline-start: 0;
  }
  .nx .nx-stage-actions .nx-btn {
    flex: 1 1 auto;
    justify-content: center;
    padding-inline: 0.5rem;
    font-size: var(--nx-fs-xs);
  }
}

/* ---- KPI card ------------------------------------------------------------------------------ */
.nx .nx-kpi {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.8rem 0.95rem 0.85rem;
  text-align: start;
  background: var(--nx-surface);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-lg);
  box-shadow: var(--nx-shadow-panel);
  min-width: 0;
  transition: border-color var(--nx-d-base) var(--nx-ease), box-shadow var(--nx-d-base) var(--nx-ease);
}
.nx button.nx-kpi {
  cursor: pointer;
  width: 100%;
}
.nx button.nx-kpi:hover {
  border-color: var(--nx-line-strong);
}
.nx .nx-kpi.is-on {
  border-color: var(--nx-brand);
  box-shadow: 0 0 0 1px var(--nx-brand);
}
.nx .nx-kpi-l {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--nx-ink-3);
  font-size: var(--nx-fs-sm);
  font-weight: 500;
  line-height: 1.3;
  min-width: 0;
}
@container nxapp (max-width: 560px) {
  .nx .nx-kpi-l {
    align-items: flex-start;
    min-block-size: 2.6em;
  }
  .nx .nx-kpi-l .nx-i {
    margin-block-start: 0.1em;
  }
}
.nx .nx-kpi-l .nx-i {
  color: var(--nx-ink-3);
}
.nx .nx-kpi-v {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.3rem;
  font-size: var(--nx-fs-2xl);
  font-weight: 600;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  color: var(--nx-ink);
  min-width: 0;
}
.nx .nx-kpi-v > span:first-child {
  white-space: nowrap;
}
.nx .nx-kpi-v.is-wrap > span:first-child {
  white-space: normal;
  text-wrap: balance;
}
.nx .nx-kpi-v .u {
  color: var(--nx-ink-3);
  font-size: var(--nx-fs-sm);
  font-weight: 500;
}
.nx .nx-kpi-f {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  font-size: var(--nx-fs-xs);
  color: var(--nx-ink-3);
}
.nx .nx-kpi-spark {
  height: 2.1rem;
  margin-block-start: 0.1rem;
}
.nx .nx-rail {
  position: relative;
  height: 0.3125rem;
  border-radius: 999px;
  background: var(--nx-surface-3);
}
.nx .nx-rail > i {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  border-radius: inherit;
  background: var(--nx-brand);
  width: calc(var(--p, 0) * 1%);
  max-width: 100%;
  transition: width var(--nx-d-slow) var(--nx-ease);
}
.nx .nx-rail > i.pos {
  background: var(--nx-pos);
}
.nx .nx-rail > i.neg {
  background: var(--nx-neg);
}
.nx .nx-rail > b {
  position: absolute;
  inset-block: -0.2rem;
  inset-inline-start: calc(var(--m, 0) * 1%);
  width: 2px;
  margin-inline-start: -1px;
  border-radius: 2px;
  background: var(--nx-accent);
}

/* ---- Demo controls panel ------------------------------------------------------------------------- */
.nx .nx-ctl-group {
  display: grid;
  gap: var(--nx-s-2);
  padding: var(--nx-s-2) var(--nx-s-1);
}
.nx .nx-ctl-group + .nx-ctl-group {
  border-block-start: 1px solid var(--nx-line);
}
.nx .nx-ctl-group > .nx-label {
  font-weight: 600;
  color: var(--nx-ink);
}
.nx .nx-ctl-note {
  font-size: var(--nx-fs-xs);
  color: var(--nx-ink-3);
}
.nx .nx-offline-bar {
  display: flex;
  align-items: center;
  gap: var(--nx-s-2);
  padding: 0.4rem var(--nx-s-4);
  background: var(--nx-warn-soft);
  color: var(--nx-warn);
  font-size: var(--nx-fs-sm);
  font-weight: 500;
  border-block-end: 1px solid color-mix(in srgb, var(--nx-warn) 30%, transparent);
}
.nx .nx-view-enter {
  animation: nx-view var(--nx-d-slow) var(--nx-ease);
}
@keyframes nx-view {
  from {
    opacity: 0;
    translate: 0 6px;
  }
}

.nx .nx-noscript {
  padding: var(--nx-s-4);
}

@container nxapp (max-width: 400px) {
  .nx .nx-kpi {
    padding-inline: 0.7rem;
  }
}

/* Declared after the base KPI rules so they win: values scale with the card instead of overflowing it. */
@container nxapp (max-width: 480px) {
  .nx .nx-kpi-v {
    font-size: clamp(1rem, calc(8.6cqi - 4px), var(--nx-fs-2xl));
  }
}

/* Six cards divide evenly into three columns; four and eight into four. */
@container nxapp (min-width: 761px) {
  .nx .g-kpi:has(> :nth-child(6):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* nx charts (SVG drawn by NX.chart). Colour roles: blue = actual, dashed grey = previous period, brass = target. */

.nx .nx-chart {
  position: relative;
  width: 100%;
  min-width: 0;
}
.nx .nx-chart-body {
  position: relative;
  direction: ltr;
}
.nx .nx-chart-body > svg {
  display: block;
  width: 100%;
  overflow: visible;
}
.nx .nx-chart-empty {
  display: grid;
  place-items: center;
  min-height: 9rem;
  color: var(--nx-ink-3);
  direction: var(--nx-dir);
}
.nx .nx-chart text {
  font-family: var(--nx-font);
  font-size: 11px;
  fill: var(--nx-ink-3);
}
.nx .nx-chart .ax-line {
  stroke: var(--nx-line-strong);
  stroke-width: 1;
  shape-rendering: crispEdges;
}
.nx .nx-chart .grid {
  stroke: var(--nx-grid);
  stroke-width: 1;
  shape-rendering: crispEdges;
}
.nx .nx-chart .tick-x text {
  text-anchor: middle;
}
.nx .nx-chart .tick-y text {
  text-anchor: end;
}
.nx .nx-chart .tick-y2 text {
  text-anchor: start;
}
.nx .nx-chart .lbl {
  fill: var(--nx-ink-2);
  font-weight: 500;
}
.nx .nx-chart .lbl-in {
  fill: #fff;
  font-weight: 600;
}
.nx .nx-chart .lbl-strong {
  fill: var(--nx-ink);
  font-weight: 600;
}
.nx .nx-chart .s-line {
  fill: none;
  stroke: var(--c, var(--nx-c1));
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.nx .nx-chart .s-line.dash {
  stroke-dasharray: 4 4;
  stroke-width: 1.5;
}
.nx .nx-chart .s-area {
  fill: var(--c, var(--nx-c1));
  opacity: 0.12;
}
.nx .nx-chart .s-area.grad {
  opacity: 1;
}
.nx .nx-chart .s-dot {
  fill: var(--nx-surface);
  stroke: var(--c, var(--nx-c1));
  stroke-width: 2;
}
.nx .nx-chart .s-bar {
  fill: var(--c, var(--nx-c1));
}
.nx .nx-chart .s-bar.faint {
  opacity: 0.35;
}
.nx .nx-chart .ref-line {
  stroke: var(--nx-accent);
  stroke-width: 1.5;
  stroke-dasharray: 6 3;
}
.nx .nx-chart .ref-lbl {
  fill: var(--nx-accent-ink);
  font-weight: 600;
}
.nx .nx-chart .hover-line {
  stroke: var(--nx-ink-3);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}
.nx .nx-chart .hit {
  fill: transparent;
  cursor: pointer;
}
.nx .nx-chart .is-dim {
  opacity: 0.28;
}
.nx .nx-chart .is-hot {
  filter: none;
  opacity: 1;
}
.nx .nx-chart [data-i] {
  transition: opacity var(--nx-d-fast) var(--nx-ease);
}
.nx .nx-chart .band {
  fill: var(--nx-surface-3);
  opacity: 0.75;
}
.nx .nx-chart .band.sel {
  fill: var(--nx-brand-soft);
  opacity: 1;
}
.nx .nx-chart .s-line.tgt {
  stroke-width: 1.75;
}
.nx .nx-chart .slice {
  stroke: var(--nx-surface);
  stroke-width: 2;
  cursor: pointer;
}
.nx .nx-chart .heat-c {
  stroke: var(--nx-surface);
  stroke-width: 2;
  rx: 3;
}
.nx .nx-chart .tile {
  stroke: var(--nx-surface);
  stroke-width: 2;
  cursor: pointer;
}
.nx .nx-chart :focus-visible {
  outline: 2px solid var(--nx-focus);
  outline-offset: 2px;
}

/* First paint: lines draw, bars grow. Later updates skip the animation. */
.nx .nx-chart.is-in .s-line {
  stroke-dasharray: var(--len, 2000);
  stroke-dashoffset: var(--len, 2000);
  animation: nx-draw var(--nx-d-chart) var(--nx-ease) forwards;
}
.nx .nx-chart.is-in .s-line.dash {
  stroke-dasharray: 4 4;
  stroke-dashoffset: 0;
  animation: nx-fade var(--nx-d-chart) var(--nx-ease) both;
}
@keyframes nx-draw {
  to {
    stroke-dashoffset: 0;
  }
}
.nx .nx-chart.is-in .s-area {
  animation: nx-fade-area var(--nx-d-chart) var(--nx-ease) both;
}
@keyframes nx-fade-area {
  from {
    opacity: 0;
  }
}
.nx .nx-chart.is-in .s-bar {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: nx-grow var(--nx-d-chart) var(--nx-ease) both;
  animation-delay: calc(var(--i, 0) * 14ms);
}
.nx .nx-chart.is-in .s-bar.h {
  transform-origin: 0 50%;
  animation-name: nx-grow-x;
}
@keyframes nx-grow {
  from {
    transform: scaleY(0);
  }
}
@keyframes nx-grow-x {
  from {
    transform: scaleX(0);
  }
}
.nx .nx-chart.is-in .slice,
.nx .nx-chart.is-in .tile,
.nx .nx-chart.is-in .heat-c {
  animation: nx-fade var(--nx-d-chart) var(--nx-ease) both;
  animation-delay: calc(var(--i, 0) * 12ms);
}

/* Legend */
.nx .nx-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.9rem;
  margin-block-end: var(--nx-s-2);
  font-size: var(--nx-fs-sm);
  color: var(--nx-ink-2);
}
.nx .nx-legend button,
.nx .nx-legend span.i {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 1.5rem;
  color: inherit;
  cursor: pointer;
}
.nx .nx-legend span.i {
  cursor: default;
}
.nx .nx-legend .sw {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 2px;
  background: var(--c, var(--nx-c1));
  flex: none;
}
.nx .nx-legend .sw.line {
  height: 2px;
  width: 1rem;
  border-radius: 2px;
}
.nx .nx-legend .sw.dash {
  height: 0;
  width: 1rem;
  background: none;
  border-block-start: 2px dashed var(--c, var(--nx-prev));
  border-radius: 0;
}
.nx .nx-legend .sw.ref {
  height: 0;
  width: 1rem;
  background: none;
  border-block-start: 2px dashed var(--nx-accent);
  border-radius: 0;
}
.nx .nx-legend button.is-off {
  opacity: 0.45;
  text-decoration: line-through;
}
.nx .nx-legend button:hover {
  color: var(--nx-ink);
}

/* Tooltip */
.nx .nx-ct {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  min-width: 9.5rem;
  max-width: 17rem;
  padding: 0.5rem 0.65rem;
  border-radius: var(--nx-r-lg);
  background: var(--nx-surface);
  box-shadow: var(--nx-shadow-pop);
  font-size: var(--nx-fs-sm);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--nx-d-fast) var(--nx-ease);
  direction: var(--nx-dir);
}
.nx .nx-ct.on {
  opacity: 1;
}
.nx .nx-ct h4 {
  margin-block-end: 0.3rem;
  font-size: var(--nx-fs-sm);
  font-weight: 600;
  color: var(--nx-ink);
}
.nx .nx-ct .r {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  line-height: 1.7;
  color: var(--nx-ink-2);
}
.nx .nx-ct .r .sw {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 2px;
  background: var(--c, var(--nx-c1));
  flex: none;
}
.nx .nx-ct .r b {
  margin-inline-start: auto;
  padding-inline-start: 0.75rem;
  font-weight: 600;
  color: var(--nx-ink);
  font-variant-numeric: tabular-nums;
}
.nx .nx-chart-tbl {
  margin-block-start: var(--nx-s-2);
}
.nx .nx-chart-tbl summary {
  cursor: pointer;
  font-size: var(--nx-fs-xs);
  color: var(--nx-ink-3);
}
.nx .nx-chart-tbl .nx-tablewrap {
  max-height: 14rem;
  margin-block-start: var(--nx-s-2);
}

/* Horizontal bar lists drawn with HTML (labels wrap in both languages) */
.nx .nx-hbar {
  display: grid;
  gap: 0.55rem;
  container: nxchart / inline-size;
}
.nx .nx-hbar-row {
  display: grid;
  grid-template-columns: minmax(6rem, 11rem) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--nx-s-3);
  font-size: var(--nx-fs-base);
  width: 100%;
  text-align: start;
  border-radius: var(--nx-r-md);
}
.nx button.nx-hbar-row:hover {
  background: var(--nx-surface-2);
}
.nx .nx-hbar-row .t {
  display: grid;
  height: 0.55rem;
  border-radius: 999px;
  background: var(--nx-surface-3);
  position: relative;
}
.nx .nx-hbar-row .t > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--c, var(--nx-c1));
  width: calc(var(--w, 0) * 1%);
  transition: width var(--nx-d-slow) var(--nx-ease);
}
.nx .nx-hbar-row .t > b {
  position: absolute;
  inset-block: -0.2rem;
  inset-inline-start: calc(var(--m, 0) * 1%);
  width: 2px;
  background: var(--nx-accent);
  border-radius: 2px;
}
.nx .nx-hbar-row .v {
  font-weight: 600;
  text-align: end;
  font-variant-numeric: tabular-nums;
  min-width: 4.5rem;
}
@container nxchart (max-width: 460px) {
  .nx .nx-hbar-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .nx .nx-hbar-row .t {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

/* Delta chip inside a tooltip row */
.nx .nx-ct .nx-ct-d {
  margin-inline-start: 0.35rem;
}

/* ---- Donut ------------------------------------------------------------------------------------ */
.nx .nx-donut {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--nx-s-4) var(--nx-s-6);
  min-width: 0;
}
.nx .nx-donut-fig {
  position: relative;
  flex: none;
  width: 11.5rem;
  height: 11.5rem;
  margin-inline: auto;
}
.nx .nx-donut-fig svg {
  display: block;
  width: 100%;
  height: 100%;
}
.nx .nx-donut .slice {
  fill: var(--c, var(--nx-c1));
  transition: opacity var(--nx-d-fast) var(--nx-ease);
}
.nx .nx-donut .slice.is-hot {
  stroke-width: 0;
}
.nx .nx-donut .slice.is-dim {
  opacity: 0.35;
}
.nx .nx-donut-c {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  justify-items: center;
  gap: 0.1rem;
  padding: 20%;
  text-align: center;
  pointer-events: none;
}
.nx .nx-donut-v {
  max-width: 100%;
  font-size: var(--nx-fs-lg);
  font-weight: 600;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  text-wrap: balance;
}
.nx .nx-donut-k {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  max-width: 100%;
  overflow: hidden;
  font-size: var(--nx-fs-xs);
  color: var(--nx-ink-3);
  line-height: 1.3;
}
.nx .nx-donut-leg {
  flex: 1 1 14rem;
  display: grid;
  gap: 2px;
  min-width: 0;
}
.nx .nx-donut-leg .li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 2rem;
  padding: 0.2rem 0.5rem;
  border-radius: var(--nx-r-md);
  font-size: var(--nx-fs-base);
  text-align: start;
  color: var(--nx-ink);
  transition: background-color var(--nx-d-fast) var(--nx-ease), opacity var(--nx-d-fast) var(--nx-ease);
}
.nx .nx-donut-leg button.li {
  cursor: pointer;
}
.nx .nx-donut-leg .li.is-hot {
  background: var(--nx-surface-3);
}
.nx .nx-donut-leg .li.is-dim {
  opacity: 0.5;
}
.nx .nx-donut-leg .sw {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 2px;
  background: var(--c);
  flex: none;
}
.nx .nx-donut-leg b {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.nx .nx-donut-leg .pc {
  min-width: 2.6rem;
  text-align: end;
  color: var(--nx-ink-3);
  font-variant-numeric: tabular-nums;
}

/* ---- Funnel ------------------------------------------------------------------------------------ */
.nx .nx-funnel {
  display: grid;
  gap: 0.35rem;
  container: nxchart / inline-size;
}
.nx .nx-fn-row {
  display: grid;
  grid-template-columns: minmax(6rem, 10rem) minmax(0, 1fr) minmax(6.5rem, auto);
  align-items: center;
  gap: var(--nx-s-3);
  width: 100%;
  padding: 0.2rem 0.4rem;
  border-radius: var(--nx-r-md);
  text-align: start;
  font-size: var(--nx-fs-base);
}
.nx button.nx-fn-row:hover {
  background: var(--nx-surface-2);
}
.nx .nx-fn-row .l {
  display: grid;
  min-width: 0;
  line-height: 1.3;
}
.nx .nx-fn-row .l .nx-muted {
  font-size: var(--nx-fs-xs);
}
.nx .nx-fn-row .t {
  display: grid;
  height: 2rem;
}
.nx .nx-fn-row .t > i {
  display: block;
  height: 100%;
  width: calc(var(--w, 0) * 1%);
  margin-inline: auto;
  border-radius: var(--nx-r-md);
  background: var(--c, var(--nx-c1));
  transition: width var(--nx-d-slow) var(--nx-ease);
}
.nx .nx-fn-row .v {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.5rem;
  font-variant-numeric: tabular-nums;
}
.nx .nx-fn-row .v b {
  font-weight: 600;
}
.nx .nx-fn-row .v span {
  min-width: 2.5rem;
  text-align: end;
  color: var(--nx-ink-3);
  font-size: var(--nx-fs-sm);
}
@container nxchart (max-width: 460px) {
  .nx .nx-fn-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .nx .nx-fn-row .t {
    grid-column: 1 / -1;
    grid-row: 2;
    height: 1.5rem;
  }
}

/* ---- Waterfall ------------------------------------------------------------------------------------ */
.nx .nx-wf {
  display: grid;
  gap: 0.15rem;
  container: nxchart / inline-size;
}
.nx .nx-wf-row {
  display: grid;
  grid-template-columns: minmax(6.5rem, 11rem) minmax(0, 1fr) minmax(5.5rem, auto);
  align-items: center;
  gap: var(--nx-s-3);
  width: 100%;
  padding: 0.25rem 0.4rem;
  border-radius: var(--nx-r-md);
  text-align: start;
  font-size: var(--nx-fs-base);
}
.nx button.nx-wf-row:hover {
  background: var(--nx-surface-2);
}
.nx .nx-wf-row .t {
  position: relative;
  height: 1.55rem;
}
.nx .nx-wf-row .t > b {
  position: absolute;
  inset-block: 0;
  inset-inline-start: calc(var(--z, 0) * 1%);
  width: 1px;
  background: var(--nx-line-strong);
}
.nx .nx-wf-row .t > i {
  position: absolute;
  inset-block: 0.2rem;
  inset-inline-start: calc(var(--a, 0) * 1%);
  width: calc(var(--w, 0) * 1%);
  min-width: 2px;
  border-radius: 4px;
  transition: width var(--nx-d-slow) var(--nx-ease), inset-inline-start var(--nx-d-slow) var(--nx-ease);
}
.nx .nx-wf-row .t > i.tot {
  background: var(--nx-c1);
}
.nx .nx-wf-row .t > i.up {
  background: var(--nx-pos);
}
.nx .nx-wf-row .t > i.dn {
  background: var(--nx-neg);
}
.nx .nx-wf-row .v {
  text-align: end;
  font-variant-numeric: tabular-nums;
  color: var(--nx-ink-2);
}
.nx .nx-wf-row .v.tot {
  font-weight: 600;
  color: var(--nx-ink);
}
@container nxchart (max-width: 460px) {
  .nx .nx-wf-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .nx .nx-wf-row .t {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

/* ---- Heatmap --------------------------------------------------------------------------------------- */
.nx .nx-heatwrap {
  container: nxchart / inline-size;
}
@container nxchart (max-width: 1040px) {
  .nx .nx-heat .k.k1 {
    visibility: hidden;
  }
}
@container nxchart (max-width: 520px) {
  .nx .nx-heat .k.k2 {
    visibility: hidden;
  }
}
.nx .nx-heat {
  display: grid;
  grid-template-columns: max-content repeat(var(--cols, 7), minmax(0, 1fr));
  gap: 3px;
  align-items: center;
}
.nx .nx-heat .k,
.nx .nx-heat .r {
  font-size: var(--nx-fs-xs);
  color: var(--nx-ink-3);
  white-space: nowrap;
}
.nx .nx-heat .k {
  text-align: center;
  overflow: visible;
}
.nx .nx-heat .r {
  padding-inline-end: 0.5rem;
}
.nx .nx-heat .c {
  display: block;
  width: 100%;
  min-height: 1.4rem;
  aspect-ratio: 1.5;
  max-height: 2.4rem;
  border-radius: 3px;
}
.nx .nx-heat button.c {
  cursor: pointer;
}
.nx .nx-heat .c.l0,
.nx .nx-heat-leg i.l0 {
  background: var(--nx-heat-0);
}
.nx .nx-heat .c.l1,
.nx .nx-heat-leg i.l1 {
  background: var(--nx-heat-1);
}
.nx .nx-heat .c.l2,
.nx .nx-heat-leg i.l2 {
  background: var(--nx-heat-2);
}
.nx .nx-heat .c.l3,
.nx .nx-heat-leg i.l3 {
  background: var(--nx-heat-3);
}
.nx .nx-heat .c.l4,
.nx .nx-heat-leg i.l4 {
  background: var(--nx-heat-4);
}
.nx .nx-heat-leg {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-block-start: var(--nx-s-3);
  font-size: var(--nx-fs-xs);
  color: var(--nx-ink-3);
}
.nx .nx-heat-leg span:first-child {
  margin-inline-end: 0.4rem;
}
.nx .nx-heat-leg span:last-child {
  margin-inline-start: 0.4rem;
}
.nx .nx-heat-leg i {
  width: 1.4rem;
  height: 0.6rem;
  border-radius: 2px;
}

/* ---- Sparkline ------------------------------------------------------------------------------------ */
.nx .nx-spark {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.nx .nx-spark .l {
  fill: none;
  stroke: var(--c, var(--nx-c1));
  stroke-width: 1.75;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.nx .nx-spark .a {
  fill: var(--c, var(--nx-c1));
  opacity: 0.12;
}
.nx .nx-spark .b {
  fill: var(--c, var(--nx-c1));
  opacity: 0.8;
}

/* A grid without a column definition sizes its single column to the widest unwrapped content and can push past its
   container. These hold text that has to wrap or truncate inside the container instead. */
.nx .nx-field,
.nx .nx-hbar,
.nx .nx-donut-leg,
.nx .nx-funnel,
.nx .nx-wf,
.nx .nx-ctl-group,
.nx .nx-cal {
  grid-template-columns: minmax(0, 1fr);
}