/* Nizhenets design kit — components (class prefix nz-) — Nöbet 3, 2026-10-25
   Apps add these classes to STATIC markup only. Elements whose className/textContent is rewritten by JS are
   styled in the app's own stylesheet by their existing selectors, using the same tokens and the patterns here.
   Nöbet 3 keeps every selector of Nöbet 2; sizes of controls (36 / 30 px) and the masthead stay the same so app
   layouts do not move. What changes is the material: three elevations, hairline highlights, softer borders,
   a display headline, tabular numerals and a lamp that glows in the dark themes. */

/* ---------- Frame: masthead / rail / page ---------- */
.nz-masthead {
  position: sticky; top: 0; z-index: 40;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--nz-space-6);
  min-height: var(--nz-masthead-h);
  padding: 0 var(--nz-gutter);
  background: color-mix(in srgb, var(--nz-canvas) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid color-mix(in srgb, var(--nz-line) 80%, transparent);
}
.nz-brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--nz-font-serif); font-size: var(--nz-text-lg); font-weight: 500; letter-spacing: var(--nz-tracking-tight);
  color: var(--nz-ink); text-decoration: none; white-space: nowrap;
}
.nz-brand .nz-lamp { width: 9px; height: 9px; }
.nz-brand-sub { font-family: var(--nz-font-sans); font-size: var(--nz-text-xs); color: var(--nz-ink-2); font-weight: 400; letter-spacing: 0; }
.nz-nav { display: flex; align-items: center; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.nz-nav::-webkit-scrollbar { display: none; }
.nz-nav a, .nz-nav button {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border: 0; background: none; border-radius: var(--nz-radius-control);
  font-size: var(--nz-text-sm); font-weight: 500; color: var(--nz-ink-2); text-decoration: none; white-space: nowrap;
  transition: color var(--nz-fast) var(--nz-ease), background-color var(--nz-fast) var(--nz-ease);
}
.nz-nav a:hover, .nz-nav button:hover { color: var(--nz-ink); background: color-mix(in srgb, var(--nz-raised) 80%, transparent); }
.nz-nav a[aria-current="page"], .nz-nav .is-active { color: var(--nz-ink); }
.nz-nav a[aria-current="page"]::after, .nz-nav .is-active::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 1px; height: 2px; border-radius: 2px; background: var(--nz-lamp-glow);
  box-shadow: 0 0 8px color-mix(in srgb, var(--nz-lamp-glow) 35%, transparent);
}
.nz-masthead-tools { display: inline-flex; align-items: center; gap: var(--nz-space-2); }
.nz-nav-toggle { display: none; }

/* Left rail for apps with many destinations; collapses into the masthead below 900px. */
.nz-shell { display: grid; grid-template-columns: var(--nz-rail-w) minmax(0, 1fr); min-height: 100dvh; }
.nz-rail {
  position: sticky; top: 0; height: 100dvh; overflow-y: auto;
  display: flex; flex-direction: column;
  padding: var(--nz-space-5) var(--nz-space-3);
  background: var(--nz-surface); border-right: 1px solid var(--nz-line);
  box-shadow: var(--nz-hairline);
}
.nz-rail .nz-brand { padding: 4px 10px 20px; }
.nz-rail-nav { display: flex; flex-direction: column; gap: 2px; }
.nz-rail-nav a, .nz-rail-nav button {
  position: relative; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 0; background: none; text-align: left;
  border-radius: var(--nz-radius-control); font-size: var(--nz-text-sm); font-weight: 500; color: var(--nz-ink-2); text-decoration: none;
  transition: color var(--nz-fast) var(--nz-ease), background-color var(--nz-fast) var(--nz-ease);
}
.nz-rail-nav a:hover, .nz-rail-nav button:hover { color: var(--nz-ink); background: var(--nz-raised); }
.nz-rail-nav a[aria-current="page"], .nz-rail-nav .is-active { color: var(--nz-ink); background: var(--nz-raised); box-shadow: inset 2px 0 0 var(--nz-lamp-glow); }
.nz-rail-nav a[aria-current="page"] .nz-lamp, .nz-rail-nav .is-active .nz-lamp { background: var(--nz-lamp-glow); border-color: var(--nz-lamp-glow); box-shadow: var(--nz-lamp-halo); }
.nz-rail-group { margin-top: var(--nz-space-5); padding: 0 10px 6px; font-size: var(--nz-text-xs); font-weight: 500; color: var(--nz-ink-3); }
.nz-rail-foot { margin-top: auto; padding: var(--nz-space-4) 10px 0; border-top: 1px solid var(--nz-line); font-size: var(--nz-text-xs); color: var(--nz-ink-2); }

.nz-page { width: min(var(--nz-content), 100% - 2 * var(--nz-gutter)); margin-inline: auto; padding-block: var(--nz-space-10) var(--nz-space-16); }
.nz-page.is-wide { --nz-content: 1560px; }

/* ---------- Headline block ----------
   The one loud element of a page: Plex Serif at display size, set tight, with the lede under it. */
.nz-headline { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--nz-space-3) var(--nz-space-4); margin-bottom: var(--nz-space-8); }
.nz-headline h1, .nz-headline h2 { margin: 0; font-size: var(--nz-text-3xl); line-height: 1.12; letter-spacing: -0.02em; }
.nz-headline .nz-display { font-size: var(--nz-text-display); font-weight: 400; line-height: var(--nz-leading-display); letter-spacing: var(--nz-tracking-display); }
/* A lede after the headline takes its own line; the right padding keeps its measure at 72ch. */
.nz-headline .nz-display + .nz-lede, .nz-headline h1 + .nz-lede { flex-basis: 100%; max-width: none; padding-right: max(0px, calc(100% - var(--nz-measure))); }
.nz-lede { margin: 0; max-width: var(--nz-measure); color: var(--nz-ink-2); font-size: var(--nz-text-lg); line-height: 1.5; }
.nz-headline-tools { margin-left: auto; display: inline-flex; gap: var(--nz-space-2); align-items: center; }
.nz-section { margin-top: var(--nz-space-12); }
.nz-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--nz-space-4); padding-bottom: var(--nz-space-3); margin-bottom: var(--nz-space-5); border-bottom: 1px solid var(--nz-line); }
.nz-section-head h2 { margin: 0; font-size: var(--nz-text-2xl); }
.nz-section-head .nz-small { color: var(--nz-ink-2); }

/* ---------- Lamp (the one status device) ----------
   In the dark themes a lit lamp glows a little; in White it is a flat disc with a soft ring. */
.nz-lamp {
  display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid var(--nz-line-strong); background: transparent; vertical-align: middle;
}
.nz-lamp.is-sm { width: 8px; height: 8px; border-width: 1.5px; }
.nz-lamp.is-on  { background: var(--nz-ok);   border-color: var(--nz-ok); }
.nz-lamp.is-off { background: var(--nz-bad);  border-color: var(--nz-bad); }
.nz-lamp.is-wait{ background: transparent;    border-color: var(--nz-warn); }
.nz-lamp.is-info{ background: var(--nz-info); border-color: var(--nz-info); }
.nz-lamp.is-live{ background: var(--nz-lamp-glow); border-color: var(--nz-lamp-glow); box-shadow: var(--nz-lamp-halo); }
:root:is([data-theme="dark"], [data-theme="black"]) .nz-lamp:is(.is-on, .is-off, .is-info) { box-shadow: 0 0 7px -1px var(--nz-glow, transparent); }
:root:is([data-theme="dark"], [data-theme="black"]) .nz-lamp.is-on { --nz-glow: color-mix(in srgb, var(--nz-ok) 75%, transparent); }
:root:is([data-theme="dark"], [data-theme="black"]) .nz-lamp.is-off { --nz-glow: color-mix(in srgb, var(--nz-bad) 75%, transparent); }
:root:is([data-theme="dark"], [data-theme="black"]) .nz-lamp.is-info { --nz-glow: color-mix(in srgb, var(--nz-info) 75%, transparent); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nz-lamp:is(.is-on, .is-off, .is-info) { box-shadow: 0 0 7px -1px var(--nz-glow, transparent); }
  :root:not([data-theme="light"]) .nz-lamp.is-on { --nz-glow: color-mix(in srgb, var(--nz-ok) 75%, transparent); }
  :root:not([data-theme="light"]) .nz-lamp.is-off { --nz-glow: color-mix(in srgb, var(--nz-bad) 75%, transparent); }
  :root:not([data-theme="light"]) .nz-lamp.is-info { --nz-glow: color-mix(in srgb, var(--nz-info) 75%, transparent); }
}

/* ---------- Badge: lamp + text, one quiet shape ---------- */
.nz-badge {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 2px 10px 2px 8px; border-radius: var(--nz-radius-pill);
  border: 1px solid var(--nz-line); background: var(--nz-surface);
  font-size: var(--nz-text-xs); font-weight: 500; line-height: 1.6; color: var(--nz-ink-2);
  font-variant-numeric: tabular-nums;
}
.nz-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--nz-line-strong); flex: none; }
.nz-badge.is-ok   { color: var(--nz-ok);   background: var(--nz-ok-soft);   border-color: color-mix(in srgb, var(--nz-ok) 18%, transparent); }
.nz-badge.is-ok::before   { background: var(--nz-ok);   border-color: var(--nz-ok); }
.nz-badge.is-bad  { color: var(--nz-bad);  background: var(--nz-bad-soft);  border-color: color-mix(in srgb, var(--nz-bad) 18%, transparent); }
.nz-badge.is-bad::before  { background: var(--nz-bad);  border-color: var(--nz-bad); }
.nz-badge.is-warn { color: var(--nz-warn); background: var(--nz-warn-soft); border-color: color-mix(in srgb, var(--nz-warn) 20%, transparent); }
.nz-badge.is-warn::before { border-color: var(--nz-warn); }
.nz-badge.is-info { color: var(--nz-info); background: var(--nz-info-soft); border-color: color-mix(in srgb, var(--nz-info) 18%, transparent); }
.nz-badge.is-info::before { background: var(--nz-info); border-color: var(--nz-info); }
.nz-badge.is-live { color: var(--nz-lamp); background: var(--nz-lamp-soft); border-color: color-mix(in srgb, var(--nz-lamp-glow) 35%, transparent); }
.nz-badge.is-live::before { background: var(--nz-lamp-glow); border-color: var(--nz-lamp-glow); box-shadow: var(--nz-lamp-halo); }
.nz-badge.is-plain::before { display: none; }
.nz-badge.is-plain { padding-left: 10px; }

/* ---------- Buttons ----------
   Secondary: a surface with a hairline highlight. Primary: the accent with a lit top edge. Quiet: text until hover.
   Danger: red text, red wash on hover. Pressed: one pixel down and one step darker. */
.nz-button {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 36px; padding: 6px 14px; border-radius: var(--nz-radius-control);
  border: 1px solid var(--nz-line); background: var(--nz-surface); color: var(--nz-ink);
  box-shadow: var(--nz-hairline-strong), 0 1px 0 color-mix(in srgb, var(--nz-line) 60%, transparent);
  font-size: var(--nz-text-sm); font-weight: 500; line-height: 1.3; text-decoration: none; white-space: nowrap;
  transition: background-color var(--nz-fast) var(--nz-ease), border-color var(--nz-fast) var(--nz-ease), color var(--nz-fast) var(--nz-ease), box-shadow var(--nz-fast) var(--nz-ease), transform 80ms var(--nz-ease);
}
.nz-button:hover { background: var(--nz-raised); border-color: var(--nz-line-strong); }
.nz-button:active { background: color-mix(in srgb, var(--nz-line) 70%, var(--nz-raised)); box-shadow: inset 0 1px 2px color-mix(in srgb, var(--nz-ink) 10%, transparent); }
.nz-button:focus-visible { box-shadow: var(--nz-focus); }
.nz-button:disabled, .nz-button[aria-disabled="true"] { opacity: 0.5; pointer-events: none; box-shadow: none; }
.nz-button.is-primary { background: var(--nz-accent); border-color: var(--nz-accent); color: var(--nz-accent-ink); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.16), 0 1px 0 color-mix(in srgb, var(--nz-accent-press) 60%, transparent); }
.nz-button.is-primary:hover { background: var(--nz-accent-hover); border-color: var(--nz-accent-hover); }
.nz-button.is-primary:active { background: var(--nz-accent-press); border-color: var(--nz-accent-press); box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.18); }
.nz-button.is-primary:focus-visible { box-shadow: var(--nz-focus); }
.nz-button.is-danger { color: var(--nz-bad); border-color: color-mix(in srgb, var(--nz-bad) 35%, var(--nz-line)); background: var(--nz-surface); }
.nz-button.is-danger:hover { background: var(--nz-bad-soft); border-color: color-mix(in srgb, var(--nz-bad) 55%, transparent); }
.nz-button.is-danger:active { background: color-mix(in srgb, var(--nz-bad) 14%, var(--nz-bad-soft)); }
.nz-button.is-quiet { border-color: transparent; background: transparent; color: var(--nz-ink-2); box-shadow: none; }
.nz-button.is-quiet:hover { background: var(--nz-raised); color: var(--nz-ink); }
.nz-button.is-quiet:active { background: color-mix(in srgb, var(--nz-line) 70%, var(--nz-raised)); }
.nz-button.is-quiet:focus-visible { box-shadow: var(--nz-focus); }
.nz-button.is-sm { min-height: 30px; padding: 3px 10px; font-size: var(--nz-text-xs); border-radius: var(--nz-radius-sm); }
.nz-button.is-icon { width: 36px; padding: 0; }
.nz-button.is-icon.is-sm { width: 30px; }
.nz-button[aria-pressed="true"], .nz-button.is-selected { background: var(--nz-accent-soft); border-color: color-mix(in srgb, var(--nz-accent) 70%, transparent); color: var(--nz-accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nz-accent) 30%, transparent); }
.nz-button .nz-icon { width: 16px; height: 16px; }
.nz-button-row { display: flex; flex-wrap: wrap; gap: var(--nz-space-2); align-items: center; }

/* ---------- Forms ----------
   Fields sit slightly below the surface (--nz-field) with a 3:1 border; focus = accent border + ring. */
.nz-input, .nz-select, .nz-textarea {
  width: 100%; min-height: 36px; padding: 6px 12px;
  border: 1px solid var(--nz-line-strong); border-radius: var(--nz-radius-control);
  background: var(--nz-field); color: var(--nz-ink); font-size: var(--nz-text-md); line-height: 1.4;
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--nz-ink) 5%, transparent);
  transition: border-color var(--nz-fast) var(--nz-ease), box-shadow var(--nz-fast) var(--nz-ease), background-color var(--nz-fast) var(--nz-ease);
}
.nz-textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
/* Chevron drawn with gradients (no data: URI) so it survives strict img-src CSPs. */
.nz-select {
  padding-right: 32px; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--nz-ink-2) 50%), linear-gradient(135deg, var(--nz-ink-2) 50%, transparent 50%);
  background-size: 5px 5px, 5px 5px; background-position: right 16px center, right 11px center; background-repeat: no-repeat;
}
.nz-input:hover, .nz-select:hover, .nz-textarea:hover { border-color: var(--nz-ink-3); }
.nz-input:focus-visible, .nz-select:focus-visible, .nz-textarea:focus-visible { border-color: var(--nz-accent); box-shadow: var(--nz-focus); background-color: var(--nz-field); }
.nz-input[aria-invalid="true"], .nz-input.is-invalid { border-color: var(--nz-bad); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nz-bad) 40%, transparent); }
.nz-input:disabled, .nz-select:disabled, .nz-textarea:disabled { background-color: var(--nz-raised); color: var(--nz-ink-3); border-color: var(--nz-line); box-shadow: none; cursor: not-allowed; }
.nz-input.is-sm, .nz-select.is-sm { min-height: 30px; padding: 3px 10px; font-size: var(--nz-text-sm); border-radius: var(--nz-radius-sm); }
.nz-select.is-sm { padding-right: 30px; }
.nz-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.nz-field > label, .nz-label { font-size: var(--nz-text-xs); font-weight: 500; color: var(--nz-ink-2); }
.nz-field .nz-hint { font-size: var(--nz-text-xs); color: var(--nz-ink-3); }
.nz-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--nz-space-4); }
.nz-check { display: inline-flex; align-items: center; gap: 8px; font-size: var(--nz-text-sm); }
.nz-check input { width: 16px; height: 16px; accent-color: var(--nz-accent); margin: 0; }
.nz-switch { position: relative; flex: none; width: 38px; height: 22px; appearance: none; margin: 0; border-radius: var(--nz-radius-pill); background: var(--nz-line-strong); box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.12); cursor: pointer; transition: background-color var(--nz-medium) var(--nz-ease); }
.nz-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--nz-overlay); box-shadow: 0 1px 2px rgb(0 0 0 / 0.25); transition: transform var(--nz-medium) var(--nz-ease); }
.nz-switch:checked { background: var(--nz-accent); }
.nz-switch:checked::after { transform: translateX(16px); }
.nz-switch:focus-visible { box-shadow: var(--nz-focus); border-radius: var(--nz-radius-pill); }
.nz-switch:disabled { opacity: 0.5; cursor: not-allowed; }
.nz-check .nz-switch { width: 38px; height: 22px; } /* a switch inside a .nz-check label keeps its size */
.nz-search { position: relative; }
.nz-search .nz-input { padding-left: 36px; }
.nz-search::before { content: ""; position: absolute; left: 12px; top: 50%; z-index: 1; width: 13px; height: 13px; transform: translateY(-58%); border: 1.6px solid var(--nz-ink-3); border-radius: 50%; pointer-events: none; }
.nz-search::after { content: ""; position: absolute; left: 22.5px; top: calc(50% + 3.5px); z-index: 1; width: 6px; height: 1.6px; background: var(--nz-ink-3); transform: rotate(45deg); pointer-events: none; }

/* ---------- Plates (grouping without the card kit) ----------
   A plate is the surface elevation: lighter than the canvas, a hairline highlight on top, no shadow. */
.nz-plate { background: var(--nz-surface); border: 1px solid var(--nz-line); border-radius: var(--nz-radius-plate); padding: var(--nz-space-6); box-shadow: var(--nz-hairline); }
.nz-plate.is-inset { background: color-mix(in srgb, var(--nz-raised) 70%, var(--nz-canvas)); border-color: color-mix(in srgb, var(--nz-line) 55%, transparent); box-shadow: none; }
.nz-plate.is-tight { padding: var(--nz-space-4); }
.nz-plate-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--nz-space-4); margin-bottom: var(--nz-space-5); }
.nz-plate-head h2, .nz-plate-head h3 { margin: 0; }
.nz-plate-head h3 { font-size: var(--nz-text-xl); }
.nz-plate-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--nz-space-5); }

/* Summary strip: an instrument row. Values are big tabular numerals, separated by hairlines, one plate. */
/* Dividers come from the 1px gap over the line colour, so they stay correct however the strip wraps. */
.nz-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; border: 1px solid var(--nz-line); border-radius: var(--nz-radius-plate); background: var(--nz-line); overflow: hidden; box-shadow: var(--nz-hairline); }
.nz-stat { padding: var(--nz-space-5) var(--nz-space-5) var(--nz-space-4); background: var(--nz-surface); min-width: 0; box-shadow: var(--nz-hairline); }
.nz-stat > .nz-badge { margin-top: 6px; }
.nz-stat-label { display: block; font-size: var(--nz-text-xs); font-weight: 500; color: var(--nz-ink-2); margin-bottom: 6px; }
.nz-stat-value { display: block; font-size: var(--nz-text-3xl); font-weight: 500; line-height: 1.05; font-variant-numeric: tabular-nums lining-nums; letter-spacing: -0.025em; color: var(--nz-ink); }
.nz-stat-value.is-serif { font-family: var(--nz-font-serif); font-weight: 400; letter-spacing: -0.02em; }
.nz-stat-note { display: block; font-size: var(--nz-text-xs); color: var(--nz-ink-2); margin-top: 6px; }

/* ---------- Ledger rows ---------- */
.nz-ledger { border-top: 1px solid var(--nz-line); }
.nz-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--nz-space-3) var(--nz-space-4); padding: var(--nz-space-3) var(--nz-space-3); border-bottom: 1px solid var(--nz-line); transition: background-color var(--nz-fast) var(--nz-ease); }
.nz-row:hover { background: var(--nz-row-hover); }
.nz-row-title { font-weight: 500; }
.nz-row-meta { font-size: var(--nz-text-xs); color: var(--nz-ink-2); font-family: var(--nz-font-mono); font-variant-numeric: tabular-nums; }
.nz-row-actions { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- Tables ----------
   Header cells stick to the top of the wrap; give the wrap a height (--nz-table-max-h) and long tables scroll
   inside it with the header in view. Lines are drawn with box-shadow so they stay on the sticky header. */
.nz-table-wrap { overflow: auto; max-height: var(--nz-table-max-h, none); -webkit-overflow-scrolling: touch; border: 1px solid var(--nz-line); border-radius: var(--nz-radius-plate); background: var(--nz-surface); box-shadow: var(--nz-hairline); }
.nz-table { width: 100%; font-size: var(--nz-text-sm); font-variant-numeric: tabular-nums; }
.nz-table th { padding: 11px 14px; font-size: var(--nz-text-xs); font-weight: 500; color: var(--nz-ink-2); border-bottom: 1px solid var(--nz-line-strong); white-space: nowrap; }
:where(.nz-table-wrap) .nz-table th { position: sticky; top: 0; z-index: 1; background: color-mix(in srgb, var(--nz-raised) 45%, var(--nz-surface)); border-bottom-color: transparent; box-shadow: inset 0 -1px 0 var(--nz-line-strong); }
.nz-table td { padding: 11px 14px; border-bottom: 1px solid var(--nz-line); vertical-align: middle; }
.nz-table tbody tr:last-child td { border-bottom: 0; }
.nz-table tbody tr { transition: background-color var(--nz-fast) var(--nz-ease); }
.nz-table tbody tr:hover { background: var(--nz-row-hover); }
.nz-table .nz-num, .nz-num { text-align: right; font-variant-numeric: tabular-nums; }
.nz-table .nz-mono { font-size: var(--nz-text-xs); }
.nz-table th[aria-sort] { cursor: pointer; color: var(--nz-ink); }
.nz-table th[aria-sort="ascending"]::after { content: " ▲"; font-size: 10px; color: var(--nz-accent); }
.nz-table th[aria-sort="descending"]::after { content: " ▼"; font-size: 10px; color: var(--nz-accent); }
.nz-table.is-dense th, .nz-table.is-dense td { padding: 7px 10px; }

/* ---------- Tabs ---------- */
.nz-tabs { display: flex; gap: var(--nz-space-6); border-bottom: 1px solid var(--nz-line); overflow-x: auto; scrollbar-width: none; }
.nz-tabs::-webkit-scrollbar { display: none; }
.nz-tabs > * { position: relative; flex: none; padding: 11px 2px; border: 0; background: none; font-size: var(--nz-text-sm); font-weight: 500; color: var(--nz-ink-2); text-decoration: none; white-space: nowrap; transition: color var(--nz-fast) var(--nz-ease); }
.nz-tabs > *:hover { color: var(--nz-ink); }
.nz-tabs > *:hover::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--nz-line-strong); border-radius: 2px; }
.nz-tabs > [aria-selected="true"], .nz-tabs > [aria-current="page"], .nz-tabs > .is-active { color: var(--nz-ink); }
.nz-tabs > [aria-selected="true"]::after, .nz-tabs > [aria-current="page"]::after, .nz-tabs > .is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--nz-lamp-glow); border-radius: 2px; box-shadow: 0 0 8px color-mix(in srgb, var(--nz-lamp-glow) 35%, transparent); }
.nz-tabs > *:focus-visible { border-radius: var(--nz-radius-xs); }

/* ---------- Chips (filters) ---------- */
.nz-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.nz-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 3px 12px; border-radius: var(--nz-radius-pill); border: 1px solid var(--nz-line); background: var(--nz-surface); color: var(--nz-ink-2); font-size: var(--nz-text-xs); font-weight: 500; box-shadow: var(--nz-hairline); transition: background-color var(--nz-fast) var(--nz-ease), border-color var(--nz-fast) var(--nz-ease), color var(--nz-fast) var(--nz-ease); }
.nz-chip:hover { background: var(--nz-raised); border-color: var(--nz-line-strong); color: var(--nz-ink); }
.nz-chip:active { transform: translateY(1px); }
.nz-chip[aria-pressed="true"], .nz-chip.is-active { background: var(--nz-accent-soft); border-color: color-mix(in srgb, var(--nz-accent) 70%, transparent); color: var(--nz-accent); box-shadow: none; }
.nz-chip .nz-count { font-family: var(--nz-font-mono); font-variant-numeric: tabular-nums; color: var(--nz-ink-3); }
.nz-chip[aria-pressed="true"] .nz-count, .nz-chip.is-active .nz-count { color: inherit; }
.nz-chip:focus-visible { border-radius: var(--nz-radius-pill); }

/* ---------- Messages, notices, empty states ---------- */
.nz-message { font-size: var(--nz-text-sm); color: var(--nz-ink-2); }
.nz-message.is-error, .nz-message.is-bad { color: var(--nz-bad); }
.nz-message.is-ok { color: var(--nz-ok); }
.nz-notice { padding: var(--nz-space-3) var(--nz-space-4); border-radius: var(--nz-radius-control); border: 1px solid var(--nz-line); background: var(--nz-surface); font-size: var(--nz-text-sm); line-height: 1.5; border-left-width: 3px; }
.nz-notice.is-ok { border-left-color: var(--nz-ok); background: color-mix(in srgb, var(--nz-ok-soft) 45%, var(--nz-surface)); border-color: color-mix(in srgb, var(--nz-ok) 22%, var(--nz-line)); border-left-color: var(--nz-ok); }
.nz-notice.is-warn { border-left-color: var(--nz-warn); background: color-mix(in srgb, var(--nz-warn-soft) 45%, var(--nz-surface)); border-color: color-mix(in srgb, var(--nz-warn) 22%, var(--nz-line)); border-left-color: var(--nz-warn); }
.nz-notice.is-bad { border-left-color: var(--nz-bad); background: color-mix(in srgb, var(--nz-bad-soft) 45%, var(--nz-surface)); border-color: color-mix(in srgb, var(--nz-bad) 22%, var(--nz-line)); border-left-color: var(--nz-bad); }
.nz-notice.is-info { border-left-color: var(--nz-info); background: color-mix(in srgb, var(--nz-info-soft) 45%, var(--nz-surface)); border-color: color-mix(in srgb, var(--nz-info) 22%, var(--nz-line)); border-left-color: var(--nz-info); }
.nz-empty { padding: var(--nz-space-8) var(--nz-space-6); border-radius: var(--nz-radius-plate); border: 1px dashed var(--nz-line-strong); background: color-mix(in srgb, var(--nz-raised) 35%, transparent); color: var(--nz-ink-2); font-size: var(--nz-text-sm); text-align: center; text-wrap: balance; }

/* ---------- Dialog & toast (the overlay elevation) ---------- */
.nz-dialog { width: min(560px, calc(100% - 32px)); max-height: min(88dvh, 900px); padding: 0; border: 1px solid var(--nz-line); border-radius: var(--nz-radius-overlay); background: var(--nz-overlay); color: var(--nz-ink); box-shadow: var(--nz-hairline-strong), var(--nz-elev-3); }
.nz-dialog.is-wide { width: min(960px, calc(100% - 32px)); }
.nz-dialog::backdrop { background: var(--nz-scrim); -webkit-backdrop-filter: blur(6px) saturate(0.9); backdrop-filter: blur(6px) saturate(0.9); }
.nz-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: var(--nz-space-4); padding: var(--nz-space-5) var(--nz-space-6) var(--nz-space-4); }
.nz-dialog-head h2, .nz-dialog-head h3 { margin: 0; font-size: var(--nz-text-2xl); }
.nz-dialog-body { padding: var(--nz-space-2) var(--nz-space-6) var(--nz-space-6); overflow: auto; }
.nz-dialog-foot { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--nz-space-2); padding: var(--nz-space-4) var(--nz-space-6); border-top: 1px solid var(--nz-line); background: color-mix(in srgb, var(--nz-raised) 40%, var(--nz-overlay)); }
.nz-dialog[open] { animation: nz-rise var(--nz-medium) var(--nz-ease); }
.nz-dialog[open]::backdrop { animation: nz-fade var(--nz-medium) var(--nz-ease); }
.nz-toast { position: fixed; right: 20px; bottom: 20px; z-index: 60; max-width: min(420px, calc(100% - 40px)); padding: 13px 16px; border-radius: var(--nz-radius-control); border: 1px solid var(--nz-line); border-left-width: 3px; border-left-color: var(--nz-accent); background: var(--nz-overlay); color: var(--nz-ink); font-size: var(--nz-text-sm); box-shadow: var(--nz-hairline-strong), var(--nz-elev-2); animation: nz-rise var(--nz-medium) var(--nz-ease); }
.nz-toast.is-ok { border-left-color: var(--nz-ok); }
.nz-toast.is-bad, .nz-toast.is-error { border-left-color: var(--nz-bad); }
@keyframes nz-rise { from { opacity: 0; transform: translateY(6px) scale(0.99); } to { opacity: 1; transform: none; } }
@keyframes nz-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Pagination, progress, misc ---------- */
.nz-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nz-space-2); font-size: var(--nz-text-sm); }
.nz-pagination .nz-page-label { font-family: var(--nz-font-mono); font-size: var(--nz-text-xs); font-variant-numeric: tabular-nums; color: var(--nz-ink-2); padding: 4px 10px; border-radius: var(--nz-radius-pill); background: var(--nz-raised); }
.nz-progress { position: relative; height: 6px; border-radius: 999px; background: var(--nz-raised); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nz-line) 70%, transparent); overflow: hidden; }
.nz-progress::after { content: ""; position: absolute; inset: 0; width: calc(var(--nz-progress, 0) * 1%); background: var(--nz-accent); border-radius: inherit; transition: width 240ms var(--nz-ease); }
.nz-progress.is-live::after { background: var(--nz-lamp-glow); box-shadow: 0 0 8px color-mix(in srgb, var(--nz-lamp-glow) 45%, transparent); }
.nz-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px var(--nz-space-5); font-size: var(--nz-text-sm); margin: 0; }
.nz-kv dt { color: var(--nz-ink-2); }
.nz-kv dd { margin: 0; font-variant-numeric: tabular-nums; }
.nz-icon { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; fill: none; flex: none; }
.nz-theme-toggle .nz-icon-sun { display: none; }
:root:is([data-theme="dark"],[data-theme="black"]) .nz-theme-toggle .nz-icon-sun { display: block; }
:root:is([data-theme="dark"],[data-theme="black"]) .nz-theme-toggle .nz-icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nz-theme-toggle .nz-icon-sun { display: block; }
  :root:not([data-theme="light"]) .nz-theme-toggle .nz-icon-moon { display: none; }
}
.nz-stack { display: flex; flex-direction: column; gap: var(--nz-space-4); }
.nz-cluster { display: flex; flex-wrap: wrap; gap: var(--nz-space-3); align-items: center; }
.nz-muted { color: var(--nz-ink-2); }
.nz-right { margin-left: auto; }

/* ---------- Responsive frame ---------- */
@media (max-width: 900px) {
  .nz-shell { grid-template-columns: minmax(0, 1fr); }
  .nz-rail { position: fixed; inset: var(--nz-masthead-h) auto 0 0; width: min(320px, 86vw); height: auto; z-index: 50; transform: translateX(-100%); transition: transform 200ms var(--nz-ease); box-shadow: none; }
  .nz-rail.is-open { transform: none; background: var(--nz-overlay); box-shadow: var(--nz-elev-3); }
  .nz-rail-scrim { position: fixed; inset: 0; z-index: 45; background: var(--nz-scrim); }
  .nz-rail-scrim[hidden] { display: none; }
}
@media (max-width: 760px) {
  .nz-masthead { grid-template-columns: auto 1fr auto; gap: var(--nz-space-3); }
  .nz-nav { position: absolute; left: 0; right: 0; top: 100%; display: none; flex-direction: column; align-items: stretch; padding: var(--nz-space-2) var(--nz-gutter) var(--nz-space-4); background: var(--nz-overlay); border-bottom: 1px solid var(--nz-line); box-shadow: var(--nz-elev-2); }
  .nz-nav.is-open { display: flex; }
  .nz-nav a, .nz-nav button { padding: 12px 10px; font-size: var(--nz-text-md); }
  .nz-nav a[aria-current="page"]::after, .nz-nav .is-active::after { left: 0; right: auto; top: 10px; bottom: 10px; width: 3px; height: auto; }
  .nz-nav-toggle { display: inline-flex; }
  .nz-page { padding-block: var(--nz-space-6) var(--nz-space-10); }
  .nz-headline { margin-bottom: var(--nz-space-6); }
  .nz-headline h1, .nz-headline h2 { font-size: var(--nz-text-2xl); }
  .nz-headline .nz-display { font-size: var(--nz-text-3xl); }
  .nz-lede { font-size: var(--nz-text-md); }
  .nz-section { margin-top: var(--nz-space-10); }
  .nz-section-head h2 { font-size: var(--nz-text-xl); }
  .nz-plate { padding: var(--nz-space-4); }
  .nz-stats { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .nz-stat { padding: var(--nz-space-4); }
  .nz-stat-value { font-size: var(--nz-text-2xl); }
  .nz-dialog-body, .nz-dialog-head, .nz-dialog-foot { padding-inline: var(--nz-space-4); }
  .nz-toast { right: 12px; left: 12px; bottom: 12px; max-width: none; }
}

/* ---------- 2026-10-21 polish ---------- */
/* Older markup says .nz-button-primary; it now looks exactly like .is-primary. */
.nz-button.nz-button-primary { background: var(--nz-accent); border-color: var(--nz-accent); color: var(--nz-accent-ink); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.16), 0 1px 0 color-mix(in srgb, var(--nz-accent-press) 60%, transparent); }
.nz-button.nz-button-primary:hover { background: var(--nz-accent-hover); border-color: var(--nz-accent-hover); }
.nz-button.nz-button-primary:active { background: var(--nz-accent-press); border-color: var(--nz-accent-press); }
/* A pressed button moves by one pixel: the click is felt, nothing else shifts. */
.nz-button { touch-action: manipulation; }
.nz-button:active:not(:disabled):not([aria-disabled="true"]) { transform: translateY(1px); }
/* Single-line selects keep the drawn chevron even when an app layer resets the background with the shorthand
   (the visual layer does), and selects styled as .nz-input get the same chevron instead of the native arrow. */
select:is(.nz-select, .nz-input):not([multiple]):not([size]) {
  padding-right: 32px; -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--nz-ink-2) 50%), linear-gradient(135deg, var(--nz-ink-2) 50%, transparent 50%);
  background-size: 5px 5px, 5px 5px; background-position: right 16px center, right 11px center; background-repeat: no-repeat;
}
/* Empty / loading rows that span a scrolled table stay readable on a phone instead of centring off-screen. */
@media (max-width: 760px) {
  .nz-table-wrap td[colspan] { text-align: left; white-space: normal; }
}

/* ---------- Nöbet 3: Windows high contrast ----------
   Backgrounds and shadows are replaced by system colours there; lamps and states keep a visible shape. */
@media (forced-colors: active) {
  .nz-lamp, .nz-badge::before { border-color: CanvasText; }
  .nz-lamp:is(.is-on, .is-off, .is-info, .is-live), .nz-badge:is(.is-ok, .is-bad, .is-info, .is-live)::before { background: CanvasText; forced-color-adjust: none; }
  .nz-button, .nz-chip, .nz-input, .nz-select, .nz-textarea, .nz-plate, .nz-stats, .nz-table-wrap, .nz-dialog, .nz-toast, .nz-notice { border-color: CanvasText; }
  .nz-button[aria-pressed="true"], .nz-button.is-selected, .nz-chip[aria-pressed="true"], .nz-chip.is-active { border: 2px solid Highlight; }
  .nz-switch { border: 1px solid CanvasText; }
  .nz-switch::after { background: CanvasText; forced-color-adjust: none; }
  .nz-switch:checked { background: Highlight; forced-color-adjust: none; }
  .nz-progress { border: 1px solid CanvasText; }
  .nz-progress::after { background: Highlight; forced-color-adjust: none; }
  .nz-tabs > :is([aria-selected="true"], [aria-current="page"], .is-active)::after, .nz-nav :is(a[aria-current="page"], .is-active)::after { background: Highlight; forced-color-adjust: none; }
}

/* ---------- Nöbet 3: focus wins over state shadows ----------
   State rules above paint box-shadows at the same specificity as :focus-visible; keyboard focus must still show. */
.nz-button:is(.is-primary, .nz-button-primary, .is-selected, [aria-pressed="true"], .is-danger, .is-quiet):focus-visible,
.nz-input:is([aria-invalid="true"], .is-invalid):focus-visible { box-shadow: var(--nz-focus); }