@zolomedia/bifrost-client 1.7.74

package/zSys/theme/zbase.css

@@ -0,0 +1,1735 @@
+/*
+ * zbase.css — zbifrost-client structural baseline
+ *
+ * Always injected by bifrost_core.js on startup. Provides only what the
+ * rendering runtime NEEDS to function: reset, grid, flex, tabs, nav-pills,
+ * spacing helpers, and spinners. No colors. No typography scale. No component
+ * aesthetics — those are the app's responsibility.
+ *
+ * Sections:
+ *   0. Base color tokens (SSOT — --color-*)
+ *   1. Reset
+ *   2. Grid  (zRow / zCol-* / zCol-auto, responsive xs→xl)
+ *   3. Gutters (zG-0 … zG-5)
+ *   4. Flex utilities
+ *   5. Display helpers (.zD-flex, .zD-block, etc.)
+ *   6. Spacing helpers (.zm-*, .zp-*, .zme-*, .zms-*)
+ *   7. Tabs (.zTab-content / .zTab-pane / .zActive)
+ *   8. Nav (.zNav / .zNav-pills / .zFlex-column)
+ *   9. Spinner (.zSpinner-border / .zSpinner-border-sm)
+ *  10. Misc runtime helpers (.zVisually-hidden, .zContainer-fluid)
+ */
+
+/* ─── 0. Base color tokens — SSOT ──────────────────────────────────────────── */
+/* The canonical zCLI palette, mirrored from zSys/formatting/colors.py. Every
+ * var(--color-*) reference below (zText-*, zBtn-*, fields, blockquote, links)
+ * resolves here so Bifrost output matches the terminal. Apps re-skin by
+ * redefining any of these in a later stylesheet (zCanvas / zBrush). */
+:root {
+  --color-primary:   #A2D46E; /* Intention — the heart of zCLI */
+  --color-secondary: #9370DB; /* Validation — structure & elegance */
+  --color-info:      #5CA9FF; /* Perception — clarity & understanding */
+  --color-success:   #52B788; /* Manifestation — organic & vibrant */
+  --color-warning:   #FFB347; /* Caution — warm & approachable */
+  --color-error:     #E63946; /* Decisive — clear & strong */
+}
+
+/* ─── 1. Reset ─────────────────────────────────────────────────────────────── */
+
+*,
+*::before,
+*::after { box-sizing: border-box; }
+
+html {
+  font-family: sans-serif;
+  line-height: 1.15;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  min-height: 100vh;
+  overflow-x: hidden;
+  font-size: 1rem;
+  line-height: 1.5;
+}
+
+img, svg { display: block; max-width: 100%; }
+
+/* Default link color — zCLI/info palette, overridable via --color-link.
+ * Navbar links and buttons opt out below (they manage their own color). */
+a { text-decoration: none; color: var(--color-link, #5CA9FF); }
+
+zNavBar a,
+.zBtn { color: inherit; }
+
+/* ─── Custom elements — must be block for layout ───────────────────────────── */
+
+zvaf,
+zNavBar,
+zBifrostBadge { display: block; }
+
+/* ─── zOS heading extensions ──────────────────────────────────────────────── */
+/* h0: zOS system/hero heading — not in HTML5 spec, used for page-level titles */
+
+h0 {
+  display: block;
+  font-size: clamp(2.5rem, 5vw, 4rem);
+  font-weight: 800;
+  line-height: 1.1;
+  letter-spacing: -0.02em;
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+}
+
+/* ─── zTheme semantic text colors — zCLI parity ───────────────────────────── */
+/* The client maps a header/text `color:` token → `.zText-<token>`. These are
+ * the zOS defaults so `color: PRIMARY` paints in Bifrost without any _zClass,
+ * mirroring zCLI. Apps override by redefining the --color-* variable (the hex
+ * is only a fallback) or with a higher-specificity rule. */
+
+.zText-primary   { color: var(--color-primary,   #A2D46E); }
+.zText-secondary { color: var(--color-secondary, #9370DB); }
+.zText-success   { color: var(--color-success,   #52B788); }
+.zText-info      { color: var(--color-info,      #5CA9FF); }
+.zText-warning   { color: var(--color-warning,   #FFB347); }
+.zText-danger    { color: var(--color-error,     #E63946); }
+.zText-error     { color: var(--color-error,     #E63946); }
+
+/* ─── Inline code chip — zCLI/info palette, overridable via --color-code ───── */
+/* Any inline <code> (not inside a <pre> block) gets a subtle monospace badge.
+ * Apps override colour with --color-code; block code is left to zCode/Prism. */
+
+code:not(pre code) {
+  font-family: 'SF Mono', 'Monaco', 'Courier New', monospace;
+  font-size: 0.88em;
+  font-weight: 600;
+  color: var(--color-code, #5CA9FF);
+  background: rgba(92, 169, 255, 0.12);
+  border: 1px solid rgba(92, 169, 255, 0.25);
+  border-radius: 5px;
+  padding: 0.1em 0.4em;
+  letter-spacing: -0.01em;
+}
+
+/* ─── Blockquote — zMD `> quote` base, overridable via --color-primary ─────── */
+/* Subtle theme-tinted background (color-mix) so it sits right on light AND dark
+ * surfaces — no hardcoded grey. Apps restyle by redefining --color-primary or
+ * with a higher-specificity rule. */
+
+blockquote {
+  margin: 0.75rem 0;
+  padding: 0.5rem 1rem;
+  border-left: 4px solid var(--color-primary, #A2D46E);
+  background: color-mix(in srgb, var(--color-primary, #A2D46E) 8%, transparent);
+  border-radius: 0 6px 6px 0;
+  color: inherit;
+}
+
+blockquote > p { margin: 0; }
+
+/* ─── Form controls — canonical field base (Bootstrap-like) ────────────────── */
+/* The client emits a real field as `.zForm-control` (default) or `.zInput`
+ * (input-groups / explicit). Style BOTH so a field on ANY page — not just
+ * dashboards — gets a proper look instead of the raw browser white box.
+ * `.zInput` is element-qualified so a wrapper div carrying `_zClass: zInput`
+ * is NOT mistaken for the field. Override via --zinput-* or an app rule. */
+
+.zForm-control,
+input.zInput, textarea.zInput, select.zInput {
+  appearance: none;
+  -webkit-appearance: none;
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0.55rem 0.85rem;
+  font-family: inherit;
+  font-size: 0.95rem;
+  line-height: 1.5;
+  color: var(--zinput-color, #e2e8f0);
+  background: var(--zinput-bg, rgba(255, 255, 255, 0.14));
+  border: 1.5px solid var(--zinput-border, rgba(255, 255, 255, 0.18));
+  border-radius: var(--zinput-radius, 10px);
+  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
+}
+
+.zForm-control::placeholder,
+.zInput::placeholder { color: var(--zinput-placeholder, rgba(156, 163, 175, 0.5)); }
+
+.zForm-control:focus,
+input.zInput:focus, textarea.zInput:focus, select.zInput:focus {
+  outline: none;
+  border-color: var(--zinput-focus, var(--color-primary, #6366f1));
+  background: var(--zinput-bg-focus, rgba(255, 255, 255, 0.17));
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--zinput-focus, var(--color-primary, #6366f1)) 20%, transparent);
+}
+
+.zForm-control:disabled, .zForm-control[readonly],
+input.zInput:disabled, input.zInput[readonly] { opacity: 0.55; cursor: not-allowed; }
+
+textarea.zForm-control, textarea.zInput { min-height: 6rem; resize: vertical; }
+select.zForm-control,   select.zInput   { cursor: pointer; }
+
+/* size + type variants */
+.zForm-control.zInput-sm, .zInput-sm    { padding: 0.32rem 0.6rem; font-size: 0.82rem; }
+.zForm-control.zInput-color, .zInput-color { width: 3.25rem; height: 2.6rem; padding: 0.25rem; cursor: pointer; }
+
+/* field label rendered above an input */
+.zLabel {
+  display: block;
+  margin-bottom: 0.2rem;
+  font-size: 0.85rem;
+  font-weight: 500;
+  color: var(--zlabel-color, inherit);
+}
+
+/* The input handler emits a <br> after each label; suppress it so the gap is
+   controlled purely by .zLabel margin-bottom and the field hugs its label. */
+.zLabel + br { display: none; }
+
+/* Required-field marker — red asterisk suffix on the label (SSOT). */
+.zRequired {
+  color: var(--zrequired-color, #ef4444);
+  margin-left: 0.15rem;
+  font-weight: 600;
+}
+
+/* File selector — native file inputs (emitted as .zForm-control) styled to match
+   the theme: muted "no file" text + an indigo pill for the browse button. */
+input[type="file"].zForm-control,
+input[type="file"].zInput {
+  display: block;
+  width: 100%;
+  padding: 0.5rem 0.65rem;
+  font-size: 0.9375rem;
+  color: var(--zinput-placeholder, rgba(156, 163, 175, 0.85));
+  line-height: 1.6;
+  cursor: pointer;
+}
+input[type="file"].zForm-control::file-selector-button,
+input[type="file"].zInput::file-selector-button {
+  margin-right: 0.85rem;
+  padding: 0.45rem 1rem;
+  border: 0;
+  border-radius: 8px;
+  background: var(--zinput-accent, #4f46e5);
+  color: #fff;
+  font-family: inherit;
+  font-size: 0.85rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: filter 0.15s ease, transform 0.05s ease;
+}
+input[type="file"].zForm-control::file-selector-button:hover,
+input[type="file"].zInput::file-selector-button:hover {
+  filter: brightness(1.12);
+}
+input[type="file"].zForm-control::file-selector-button:active,
+input[type="file"].zInput::file-selector-button:active {
+  transform: translateY(1px);
+}
+
+/* Color picker — native color inputs stretch full-width; render as a compact
+   rounded swatch with a themed frame (SSOT). */
+input[type="color"].zForm-control,
+input[type="color"].zInput {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 3.5rem;
+  height: 2.5rem;
+  padding: 4px;
+  cursor: pointer;
+}
+input[type="color"].zForm-control:hover,
+input[type="color"].zInput:hover {
+  border-color: var(--zinput-border-hover, rgba(255, 255, 255, 0.3));
+}
+input[type="color"].zForm-control::-webkit-color-swatch-wrapper,
+input[type="color"].zInput::-webkit-color-swatch-wrapper { padding: 0; }
+input[type="color"].zForm-control::-webkit-color-swatch,
+input[type="color"].zInput::-webkit-color-swatch {
+  border: none;
+  border-radius: 6px;
+}
+input[type="color"].zForm-control::-moz-color-swatch,
+input[type="color"].zInput::-moz-color-swatch {
+  border: none;
+  border-radius: 6px;
+}
+
+/* Date / time — fields already inherit .zForm-control styling; this only makes
+   the native calendar/clock picker indicator legible on dark themes (SSOT). */
+input[type="date"].zForm-control::-webkit-calendar-picker-indicator,
+input[type="time"].zForm-control::-webkit-calendar-picker-indicator,
+input[type="datetime-local"].zForm-control::-webkit-calendar-picker-indicator,
+input[type="month"].zForm-control::-webkit-calendar-picker-indicator,
+input[type="week"].zForm-control::-webkit-calendar-picker-indicator,
+input[type="date"].zInput::-webkit-calendar-picker-indicator,
+input[type="time"].zInput::-webkit-calendar-picker-indicator,
+input[type="datetime-local"].zInput::-webkit-calendar-picker-indicator {
+  filter: var(--zinput-picker-filter, invert(0.85));
+  opacity: 0.75;
+  cursor: pointer;
+}
+input[type="date"].zForm-control::-webkit-calendar-picker-indicator:hover,
+input[type="time"].zForm-control::-webkit-calendar-picker-indicator:hover,
+input[type="datetime-local"].zForm-control::-webkit-calendar-picker-indicator:hover {
+  opacity: 1;
+}
+
+/* input-group affix chips (prefix / suffix) */
+.zInputGroup > .zInputGroup-text {
+  display: flex;
+  align-items: center;
+  padding: 0.55rem 0.85rem;
+  font-size: 0.95rem;
+  color: var(--zinput-color, #e2e8f0);
+  background: var(--zinput-affix-bg, rgba(79, 70, 229, 0.14));
+  border: 1.5px solid var(--zinput-border, rgba(255, 255, 255, 0.14));
+  white-space: nowrap;
+}
+.zInputGroup > .zInputGroup-text:first-child { border-radius: 10px 0 0 10px; border-right: 0; }
+.zInputGroup > .zInputGroup-text:last-child  { border-radius: 0 10px 10px 0; border-left: 0; }
+.zInputGroup > .zForm-control:not(:first-child),
+.zInputGroup > .zInput:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
+.zInputGroup > .zForm-control:not(:last-child),
+.zInputGroup > .zInput:not(:last-child)  { border-top-right-radius: 0; border-bottom-right-radius: 0; }
+
+/* ─── Checkbox / radio — canonical control base (matches .zForm-control) ───── */
+/* The client emits `zCheckbox` / `zSelect` (radio) as a `.zForm-check` row:
+ *   <div class="zForm-check"><input class="zForm-check-input"><label class="zForm-check-label">
+ * Style the box by element type (so an app's `_zClass` override on the input
+ * doesn't strip the look) and theme it via --color-primary, like buttons/fields. */
+
+.zForm-check {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.zForm-check input[type="checkbox"],
+.zForm-check input[type="radio"],
+.zForm-check-input {
+  appearance: none;
+  -webkit-appearance: none;
+  flex: 0 0 auto;
+  width: 1.15rem;
+  height: 1.15rem;
+  margin: 0;
+  display: inline-grid;
+  place-content: center;
+  background: var(--zinput-bg, rgba(255, 255, 255, 0.14));
+  border: 1.5px solid var(--zinput-border, rgba(255, 255, 255, 0.3));
+  cursor: pointer;
+  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
+}
+.zForm-check input[type="checkbox"],
+.zForm-check-input { border-radius: var(--zcheck-radius, 5px); }
+.zForm-check input[type="radio"] { border-radius: 50%; position: relative; }
+
+/* checked fill — theme primary */
+.zForm-check input[type="checkbox"]:checked,
+.zForm-check input[type="radio"]:checked,
+.zForm-check-input:checked {
+  background: var(--zinput-focus, var(--color-primary, #6366f1));
+  border-color: var(--zinput-focus, var(--color-primary, #6366f1));
+}
+/* checkmark glyph */
+.zForm-check input[type="checkbox"]:checked::after,
+.zForm-check-input:checked::after {
+  content: "";
+  width: 0.32rem;
+  height: 0.6rem;
+  border: solid #fff;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg) translate(-1px, -1px);
+}
+/* radio dot — absolutely centered (grid place-content is sub-pixel off on a circle) */
+.zForm-check input[type="radio"]:checked::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 0.45rem;
+  height: 0.45rem;
+  border-radius: 50%;
+  background: #fff;
+}
+
+.zForm-check input[type="checkbox"]:focus-visible,
+.zForm-check input[type="radio"]:focus-visible,
+.zForm-check-input:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--zinput-focus, var(--color-primary, #6366f1)) 30%, transparent);
+}
+
+.zForm-check-label {
+  cursor: pointer;
+  font-size: 0.95rem;
+  line-height: 1.4;
+  color: inherit;
+  user-select: none;
+}
+
+/* disabled — dim box AND label, block interaction (SSOT) */
+.zForm-check input:disabled,
+.zForm-check-input:disabled { opacity: 0.55; cursor: not-allowed; }
+.zForm-check-disabled { opacity: 0.6; }
+.zForm-check-disabled .zForm-check-label { cursor: not-allowed; }
+
+/* native radios/checkboxes NOT given the custom .zForm-check treatment
+ * still pick up the theme color (belt-and-braces — groups now emit .zForm-check). */
+input[type="radio"], input[type="checkbox"] { accent-color: var(--color-primary, #6366f1); }
+
+/* radio / checkbox group (zSelect type:radio|checkbox) — legend + row rhythm */
+.zForm-check-group .zLabel { margin-bottom: 0.45rem; }
+
+/* ─── Select / dropdown — canonical control (matches .zForm-control) ───────── */
+/* The client emits `zSelect` as a native <select class="zSelect">. Give it the
+ * same field look as text inputs plus a themed caret. Element-qualified so a
+ * wrapper carrying `_zClass: zSelect` is NOT mistaken for the control. */
+
+select.zSelect,
+select.zForm-control,
+select.zInput {
+  appearance: none;
+  -webkit-appearance: none;
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0.55rem 2.25rem 0.55rem 0.85rem;
+  font-family: inherit;
+  font-size: 0.95rem;
+  line-height: 1.5;
+  color: var(--zinput-color, #e2e8f0);
+  background-color: var(--zinput-bg, rgba(255, 255, 255, 0.14));
+  border: 1.5px solid var(--zinput-border, rgba(255, 255, 255, 0.18));
+  border-radius: var(--zinput-radius, 10px);
+  cursor: pointer;
+  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
+  /* themed chevron caret (no external asset) */
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.75rem center;
+  background-size: 1rem;
+}
+
+select.zSelect:focus,
+select.zForm-control:focus,
+select.zInput:focus {
+  outline: none;
+  border-color: var(--zinput-focus, var(--color-primary, #6366f1));
+  background-color: var(--zinput-bg-focus, rgba(255, 255, 255, 0.17));
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--zinput-focus, var(--color-primary, #6366f1)) 20%, transparent);
+}
+
+select.zSelect:disabled,
+select.zForm-control:disabled,
+select.zInput:disabled { opacity: 0.55; cursor: not-allowed; }
+
+/* native option popup — keep legible regardless of page theme */
+select.zSelect option,
+select.zForm-control option,
+select.zInput option { color: #1f2937; background: #fff; }
+select.zSelect option:disabled,
+select.zForm-control option:disabled { color: #9ca3af; }
+
+/* multi-select / sized list box — themed box, no caret, themed inline options */
+select.zSelect[multiple],
+select.zSelect[size],
+select.zForm-control[multiple] {
+  padding: 0.4rem;
+  height: auto;
+  min-height: 0;
+  background-image: none;
+}
+select.zSelect[multiple] option,
+select.zSelect[size] option,
+select.zForm-control[multiple] option {
+  color: var(--zinput-color, #e2e8f0);
+  background: transparent;
+  padding: 0.35rem 0.55rem;
+  border-radius: 6px;
+  margin-bottom: 1px;
+}
+/* selected rows — gradient hack forces the highlight color in Chromium */
+select.zSelect[multiple] option:checked,
+select.zSelect[size] option:checked,
+select.zForm-control[multiple] option:checked {
+  color: #fff;
+  background: linear-gradient(var(--color-primary, #6366f1), var(--color-primary, #6366f1));
+}
+select.zSelect[multiple] option:disabled,
+select.zForm-control[multiple] option:disabled { color: var(--zinput-placeholder, rgba(156, 163, 175, 0.55)); }
+
+/* size variants */
+select.zSelect.zSelect-lg { padding-top: 0.7rem;  padding-bottom: 0.7rem;  font-size: 1.05rem; }
+select.zSelect.zSelect-sm { padding-top: 0.35rem; padding-bottom: 0.35rem; font-size: 0.82rem; }
+
+zBifrostBadge {
+  position: fixed;
+  bottom: 1rem;
+  right: 1rem;
+  z-index: 9999;
+  pointer-events: none;
+}
+
+/* ─── zBifrostBadge states ─────────────────────────────────────────────────── */
+
+.zBadge-pending { color: #fbbf24; }
+.zBadge-success { color: #34d399; }
+.zBadge-error   { color: #f87171; }
+.zBadge-dot     { border-radius: 50%; background: currentColor; }
+.zIcon          { display: inline-block; width: 0.75em; height: 0.75em; fill: currentColor; }
+
+/* ─── zVaF content host ─────────────────────────────────────────────────────── */
+/* The re-rendered subtree under the <zVaF> root. Chrome (navbar/badge/errors) are
+ * its siblings inside the root, so clearing this node never destroys them. */
+.zVaF-content { display: block; }
+
+/* ─── Error toasts — bifrost-owned fixed-corner container (was inline styles) ── */
+.bifrost-error-container {
+  position: fixed;
+  z-index: 10000;
+  max-width: 400px;
+  pointer-events: none;
+}
+.bifrost-error-container--top-right    { top: 1rem; right: 1rem; }
+.bifrost-error-container--top-left     { top: 1rem; left: 1rem; }
+.bifrost-error-container--bottom-right { bottom: 1rem; right: 1rem; }
+.bifrost-error-container--bottom-left  { bottom: 1rem; left: 1rem; }
+
+/* ─── zNavBar — Bifrost-owned default chrome (token-driven) ─────────────────── */
+/* Structure + a sensible dark visual default. Apps re-skin via --znav-* vars or
+ * a higher-specificity rule — no need to re-declare the whole navbar per app. */
+
+zNavBar {
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+  display: block;
+}
+
+zNavBar .zNavbar {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  padding: 0.75rem 1.5rem;
+  background: var(--znav-bg, rgba(10, 14, 39, 0.92));
+  border-bottom: 1px solid var(--znav-border, rgba(79, 70, 229, 0.15));
+  backdrop-filter: blur(12px);
+  font-family: var(--znav-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
+}
+
+zNavBar .zNavbar-brand {
+  font-size: 1.15rem;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  margin-right: 2rem;
+  color: var(--znav-brand-color, #f9fafb);
+}
+
+zNavBar .zNavbar-toggler {
+  display: none;
+  margin-left: auto;
+  padding: 0.4rem 0.6rem;
+  font-size: 1.1rem;
+  line-height: 1;
+  cursor: pointer;
+  color: var(--znav-brand-color, #f9fafb);
+  background: var(--znav-link-hover-bg, rgba(79, 70, 229, 0.15));
+  border: 1px solid var(--znav-border, rgba(79, 70, 229, 0.3));
+  border-radius: 6px;
+}
+
+zNavBar .zNavbar-collapse {
+  display: flex;
+  align-items: center;
+  flex: 1;
+}
+
+zNavBar .zNavbar-nav {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+zNavBar .zNav-item { position: relative; }
+
+zNavBar .zNav-link {
+  display: block;
+  padding: 0.45rem 0.85rem;
+  font-size: 0.9rem;
+  font-weight: 500;
+  border-radius: 8px;
+  color: var(--znav-link-color, #d1d5db);
+  transition: color 0.2s, background 0.2s;
+}
+
+zNavBar .zNav-link:hover,
+zNavBar .zNav-link.active {
+  color: var(--znav-link-hover-color, #f9fafb);
+  background: var(--znav-link-hover-bg, rgba(79, 70, 229, 0.15));
+}
+
+/* ─── zDropdown (navbar menus) — JS toggles .zShow ─────────────────────────── */
+
+.zDropdown-menu {
+  display: none;
+  position: absolute;
+  top: calc(100% + 0.5rem);
+  left: 0;
+  z-index: 100;
+  min-width: 11rem;
+  padding: 0.4rem 0;
+  background: var(--zdropdown-bg, rgba(20, 25, 45, 0.97));
+  border: 1px solid var(--znav-border, rgba(79, 70, 229, 0.25));
+  border-radius: 10px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(12px);
+}
+.zDropdown-menu.zShow { display: block; }
+
+.zDropdown-item {
+  display: block;
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  color: var(--znav-link-color, #d1d5db);
+  transition: color 0.15s, background 0.15s;
+}
+.zDropdown-item:hover {
+  color: var(--znav-link-hover-color, #f9fafb);
+  background: var(--znav-link-hover-bg, rgba(79, 70, 229, 0.15));
+}
+
+/* ─── zNavbar-inblock — light, in-content navbar variant ────────────────────────
+   The chrome navbar above is scoped to the <zNavBar> element. A BLOCK-LEVEL
+   navbar (rendered inline via the navbar_inline event — e.g. an in-page zPsi
+   table-of-contents) lives in normal page content, NOT inside <zNavBar>, so it
+   inherits none of those rules. This variant re-states the same structure with a
+   LIGHT surface (the chrome is dark). Token-driven (--znavl-*) so a future
+   `color:` property can flip the palette without touching markup. */
+
+.zNavbar-inblock {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  padding: 0.75rem 1.5rem;            /* mirror the global bar's proportions */
+  border-radius: 10px;                /* embedded in a card → rounded, not full-bleed */
+  background: var(--znavl-bg, #ffffff);
+  border: 1px solid var(--znavl-border, rgba(15, 20, 48, 0.12));
+  box-shadow: 0 1px 2px rgba(15, 20, 48, 0.04);
+  font-family: var(--znav-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
+}
+
+/* In-content TOC: always expanded, no hamburger. */
+.zNavbar-inblock .zNavbar-toggler { display: none; }
+
+.zNavbar-inblock .zNavbar-collapse {
+  display: flex;
+  align-items: center;
+  flex: 1;
+}
+
+.zNavbar-inblock .zNavbar-nav {
+  display: flex;
+  align-items: center;       /* one row, baseline-aligned — mirror global bar */
+  gap: 0.25rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+/* Immune to host prose list styling: an inblock bar can be embedded inside
+   arbitrary content (e.g. a .zCallout whose `li { margin: 0 0 .5rem }` +
+   `li:last-child { margin-bottom: 0 }` would drop the last item off-baseline). */
+.zNavbar-inblock .zNav-item { position: relative; margin: 0; line-height: 1; }
+
+.zNavbar-inblock .zNav-link {
+  display: block;
+  padding: 0.45rem 0.85rem;           /* mirror global .zNav-link */
+  font-size: 0.9rem;
+  font-weight: 500;
+  border-radius: 8px;
+  color: var(--znavl-link, #2a2f45);
+  transition: color 0.2s, background 0.2s;
+}
+
+.zNavbar-inblock .zNav-link:hover,
+.zNavbar-inblock .zNav-link.active {
+  color: var(--znavl-link-hover, #0b1020);
+  background: var(--znavl-link-hover-bg, rgba(15, 20, 48, 0.07));
+}
+
+/* Light dropdown (if a block-level bar uses zSub) — overrides the dark default. */
+.zNavbar-inblock .zDropdown-menu {
+  background: var(--znavl-dropdown-bg, #ffffff);
+  border: 1px solid var(--znavl-border, rgba(15, 20, 48, 0.12));
+  box-shadow: 0 8px 24px rgba(15, 20, 48, 0.12);
+}
+.zNavbar-inblock .zDropdown-item { color: var(--znavl-link, #2a2f45); }
+.zNavbar-inblock .zDropdown-item:hover {
+  color: var(--znavl-link-hover, #0b1020);
+  background: var(--znavl-link-hover-bg, rgba(15, 20, 48, 0.07));
+}
+
+/* ─── Mobile hamburger ─────────────────────────────────────────────────────── */
+
+@media (max-width: 768px) {
+  zNavBar .zNavbar-toggler { display: block; }
+  zNavBar .zNavbar-collapse {
+    flex-basis: 100%;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  zNavBar .zNavbar-collapse:not(.zShow) { display: none; }
+  zNavBar .zNavbar-collapse.zShow { display: flex; padding: 0.5rem 0 0.75rem; }
+  zNavBar .zNavbar-nav { flex-direction: column; width: 100%; gap: 0; }
+  zNavBar .zNav-link { width: 100%; }
+  .zDropdown-menu {
+    position: static;
+    box-shadow: none;
+    border: none;
+    border-radius: 0;
+    padding-left: 0.75rem;
+    background: var(--znav-link-hover-bg, rgba(79, 70, 229, 0.08));
+  }
+}
+
+/* ─── 2. Grid ──────────────────────────────────────────────────────────────── */
+
+.zRow {
+  display: flex;
+  flex-wrap: wrap;
+  margin-right: calc(0.75rem * -1);
+  margin-left:  calc(0.75rem * -1);
+}
+
+[class*="zCol"] {
+  position: relative;
+  width: 100%;
+  padding-right: 0.75rem;
+  padding-left:  0.75rem;
+  flex-shrink: 0;
+}
+
+.zCol      { flex: 1 0 0%; }
+.zCol-auto { flex: 0 0 auto; width: auto; }
+
+.zCol-1  { flex: 0 0 auto; width:  8.33333333%; }
+.zCol-2  { flex: 0 0 auto; width: 16.66666667%; }
+.zCol-3  { flex: 0 0 auto; width: 25%; }
+.zCol-4  { flex: 0 0 auto; width: 33.33333333%; }
+.zCol-5  { flex: 0 0 auto; width: 41.66666667%; }
+.zCol-6  { flex: 0 0 auto; width: 50%; }
+.zCol-7  { flex: 0 0 auto; width: 58.33333333%; }
+.zCol-8  { flex: 0 0 auto; width: 66.66666667%; }
+.zCol-9  { flex: 0 0 auto; width: 75%; }
+.zCol-10 { flex: 0 0 auto; width: 83.33333333%; }
+.zCol-11 { flex: 0 0 auto; width: 91.66666667%; }
+.zCol-12 { flex: 0 0 auto; width: 100%; }
+
+@media (min-width: 576px) {
+  .zCol-sm      { flex: 1 0 0%; }
+  .zCol-sm-auto { flex: 0 0 auto; width: auto; }
+  .zCol-sm-1  { flex: 0 0 auto; width:  8.33333333%; }
+  .zCol-sm-2  { flex: 0 0 auto; width: 16.66666667%; }
+  .zCol-sm-3  { flex: 0 0 auto; width: 25%; }
+  .zCol-sm-4  { flex: 0 0 auto; width: 33.33333333%; }
+  .zCol-sm-5  { flex: 0 0 auto; width: 41.66666667%; }
+  .zCol-sm-6  { flex: 0 0 auto; width: 50%; }
+  .zCol-sm-7  { flex: 0 0 auto; width: 58.33333333%; }
+  .zCol-sm-8  { flex: 0 0 auto; width: 66.66666667%; }
+  .zCol-sm-9  { flex: 0 0 auto; width: 75%; }
+  .zCol-sm-10 { flex: 0 0 auto; width: 83.33333333%; }
+  .zCol-sm-11 { flex: 0 0 auto; width: 91.66666667%; }
+  .zCol-sm-12 { flex: 0 0 auto; width: 100%; }
+}
+
+@media (min-width: 768px) {
+  .zCol-md      { flex: 1 0 0%; }
+  .zCol-md-auto { flex: 0 0 auto; width: auto; }
+  .zCol-md-1  { flex: 0 0 auto; width:  8.33333333%; }
+  .zCol-md-2  { flex: 0 0 auto; width: 16.66666667%; }
+  .zCol-md-3  { flex: 0 0 auto; width: 25%; }
+  .zCol-md-4  { flex: 0 0 auto; width: 33.33333333%; }
+  .zCol-md-5  { flex: 0 0 auto; width: 41.66666667%; }
+  .zCol-md-6  { flex: 0 0 auto; width: 50%; }
+  .zCol-md-7  { flex: 0 0 auto; width: 58.33333333%; }
+  .zCol-md-8  { flex: 0 0 auto; width: 66.66666667%; }
+  .zCol-md-9  { flex: 0 0 auto; width: 75%; }
+  .zCol-md-10 { flex: 0 0 auto; width: 83.33333333%; }
+  .zCol-md-11 { flex: 0 0 auto; width: 91.66666667%; }
+  .zCol-md-12 { flex: 0 0 auto; width: 100%; }
+}
+
+@media (min-width: 992px) {
+  .zCol-lg      { flex: 1 0 0%; }
+  .zCol-lg-auto { flex: 0 0 auto; width: auto; }
+  .zCol-lg-1  { flex: 0 0 auto; width:  8.33333333%; }
+  .zCol-lg-2  { flex: 0 0 auto; width: 16.66666667%; }
+  .zCol-lg-3  { flex: 0 0 auto; width: 25%; }
+  .zCol-lg-4  { flex: 0 0 auto; width: 33.33333333%; }
+  .zCol-lg-5  { flex: 0 0 auto; width: 41.66666667%; }
+  .zCol-lg-6  { flex: 0 0 auto; width: 50%; }
+  .zCol-lg-7  { flex: 0 0 auto; width: 58.33333333%; }
+  .zCol-lg-8  { flex: 0 0 auto; width: 66.66666667%; }
+  .zCol-lg-9  { flex: 0 0 auto; width: 75%; }
+  .zCol-lg-10 { flex: 0 0 auto; width: 83.33333333%; }
+  .zCol-lg-11 { flex: 0 0 auto; width: 91.66666667%; }
+  .zCol-lg-12 { flex: 0 0 auto; width: 100%; }
+}
+
+@media (min-width: 1200px) {
+  .zCol-xl      { flex: 1 0 0%; }
+  .zCol-xl-auto { flex: 0 0 auto; width: auto; }
+  .zCol-xl-1  { flex: 0 0 auto; width:  8.33333333%; }
+  .zCol-xl-2  { flex: 0 0 auto; width: 16.66666667%; }
+  .zCol-xl-3  { flex: 0 0 auto; width: 25%; }
+  .zCol-xl-4  { flex: 0 0 auto; width: 33.33333333%; }
+  .zCol-xl-5  { flex: 0 0 auto; width: 41.66666667%; }
+  .zCol-xl-6  { flex: 0 0 auto; width: 50%; }
+  .zCol-xl-7  { flex: 0 0 auto; width: 58.33333333%; }
+  .zCol-xl-8  { flex: 0 0 auto; width: 66.66666667%; }
+  .zCol-xl-9  { flex: 0 0 auto; width: 75%; }
+  .zCol-xl-10 { flex: 0 0 auto; width: 83.33333333%; }
+  .zCol-xl-11 { flex: 0 0 auto; width: 91.66666667%; }
+  .zCol-xl-12 { flex: 0 0 auto; width: 100%; }
+}
+
+/* ─── 3. Gutters ───────────────────────────────────────────────────────────── */
+
+.zRow.zG-0 { margin-right: 0; margin-left: 0; }
+.zRow.zG-0 > [class*="zCol"] { padding-right: 0; padding-left: 0; }
+
+.zRow.zG-1 { margin-right: -0.25rem; margin-left: -0.25rem; }
+.zRow.zG-1 > [class*="zCol"] { padding-right: 0.25rem; padding-left: 0.25rem; }
+
+.zRow.zG-2 { margin-right: -0.5rem; margin-left: -0.5rem; }
+.zRow.zG-2 > [class*="zCol"] { padding-right: 0.5rem; padding-left: 0.5rem; }
+
+.zRow.zG-3 { margin-right: -0.75rem; margin-left: -0.75rem; }
+.zRow.zG-3 > [class*="zCol"] { padding-right: 0.75rem; padding-left: 0.75rem; }
+
+.zRow.zG-4 { margin-right: -1rem; margin-left: -1rem; }
+.zRow.zG-4 > [class*="zCol"] { padding-right: 1rem; padding-left: 1rem; }
+
+.zRow.zG-5 { margin-right: -1.5rem; margin-left: -1.5rem; }
+.zRow.zG-5 > [class*="zCol"] { padding-right: 1.5rem; padding-left: 1.5rem; }
+
+/* ─── 4. Flex utilities ────────────────────────────────────────────────────── */
+
+.zFlex-row             { flex-direction: row !important; }
+.zFlex-column          { flex-direction: column !important; }
+.zFlex-row-reverse     { flex-direction: row-reverse !important; }
+.zFlex-column-reverse  { flex-direction: column-reverse !important; }
+
+.zFlex-wrap            { flex-wrap: wrap !important; }
+.zFlex-nowrap          { flex-wrap: nowrap !important; }
+
+.zFlex-start           { justify-content: flex-start !important; }
+.zFlex-end             { justify-content: flex-end !important; }
+.zFlex-center          { justify-content: center !important; }
+.zFlex-between         { justify-content: space-between !important; }
+.zFlex-around          { justify-content: space-around !important; }
+.zFlex-evenly          { justify-content: space-evenly !important; }
+
+.zFlex-items-start     { align-items: flex-start !important; }
+.zFlex-items-end       { align-items: flex-end !important; }
+.zFlex-items-center    { align-items: center !important; }
+.zFlex-items-stretch   { align-items: stretch !important; }
+.zFlex-items-baseline  { align-items: baseline !important; }
+
+.zFlex-fill            { flex: 1 1 auto !important; }
+.zFlex-1               { flex: 1 !important; }
+.zFlex-grow-0          { flex-grow: 0 !important; }
+.zFlex-grow-1          { flex-grow: 1 !important; }
+.zFlex-shrink-0        { flex-shrink: 0 !important; }
+.zFlex-shrink-1        { flex-shrink: 1 !important; }
+
+.zGap-0 { gap: 0 !important; }
+.zGap-1 { gap: 0.25rem !important; }
+.zGap-2 { gap: 0.5rem !important; }
+.zGap-3 { gap: 0.75rem !important; }
+.zGap-4 { gap: 1rem !important; }
+.zGap-5 { gap: 1.5rem !important; }
+
+/* ─── 5. Display helpers ───────────────────────────────────────────────────── */
+
+.zD-none   { display: none !important; }
+.zD-block  { display: block !important; }
+.zD-flex   { display: flex !important; }
+.zD-inline { display: inline !important; }
+.zD-inline-block { display: inline-block !important; }
+.zD-inline-flex  { display: inline-flex !important; }
+
+/* ─── 6. Spacing helpers ───────────────────────────────────────────────────── */
+
+.zm-0 { margin: 0 !important; }
+.zm-1 { margin: 0.25rem !important; }
+.zm-2 { margin: 0.5rem !important; }
+.zm-3 { margin: 0.75rem !important; }
+.zm-4 { margin: 1rem !important; }
+.zm-5 { margin: 1.5rem !important; }
+
+.zmt-0 { margin-top: 0 !important; }
+.zmt-1 { margin-top: 0.25rem !important; }
+.zmt-2 { margin-top: 0.5rem !important; }
+.zmt-3 { margin-top: 0.75rem !important; }
+.zmt-4 { margin-top: 1rem !important; }
+.zmt-5 { margin-top: 1.5rem !important; }
+
+.zmb-0 { margin-bottom: 0 !important; }
+.zmb-1 { margin-bottom: 0.25rem !important; }
+.zmb-2 { margin-bottom: 0.5rem !important; }
+.zmb-3 { margin-bottom: 0.75rem !important; }
+.zmb-4 { margin-bottom: 1rem !important; }
+.zmb-5 { margin-bottom: 1.5rem !important; }
+
+.zms-0 { margin-left: 0 !important; }
+.zms-1 { margin-left: 0.25rem !important; }
+.zms-2 { margin-left: 0.5rem !important; }
+.zms-3 { margin-left: 0.75rem !important; }
+.zms-4 { margin-left: 1rem !important; }
+.zms-5 { margin-left: 1.5rem !important; }
+
+.zme-0 { margin-right: 0 !important; }
+.zme-1 { margin-right: 0.25rem !important; }
+.zme-2 { margin-right: 0.5rem !important; }
+.zme-3 { margin-right: 0.75rem !important; }
+.zme-4 { margin-right: 1rem !important; }
+.zme-5 { margin-right: 1.5rem !important; }
+
+.zp-0 { padding: 0 !important; }
+.zp-1 { padding: 0.25rem !important; }
+.zp-2 { padding: 0.5rem !important; }
+.zp-3 { padding: 0.75rem !important; }
+.zp-4 { padding: 1rem !important; }
+.zp-5 { padding: 1.5rem !important; }
+
+.zpt-0 { padding-top: 0 !important; }
+.zpt-1 { padding-top: 0.25rem !important; }
+.zpt-2 { padding-top: 0.5rem !important; }
+.zpt-3 { padding-top: 0.75rem !important; }
+.zpt-4 { padding-top: 1rem !important; }
+.zpt-5 { padding-top: 1.5rem !important; }
+
+.zpb-0 { padding-bottom: 0 !important; }
+.zpb-1 { padding-bottom: 0.25rem !important; }
+.zpb-2 { padding-bottom: 0.5rem !important; }
+.zpb-3 { padding-bottom: 0.75rem !important; }
+.zpb-4 { padding-bottom: 1rem !important; }
+.zpb-5 { padding-bottom: 1.5rem !important; }
+
+.zps-0 { padding-left: 0 !important; }
+.zps-1 { padding-left: 0.25rem !important; }
+.zps-2 { padding-left: 0.5rem !important; }
+.zps-3 { padding-left: 0.75rem !important; }
+.zps-4 { padding-left: 1rem !important; }
+.zps-5 { padding-left: 1.5rem !important; }
+
+.zpe-0 { padding-right: 0 !important; }
+.zpe-1 { padding-right: 0.25rem !important; }
+.zpe-2 { padding-right: 0.5rem !important; }
+.zpe-3 { padding-right: 0.75rem !important; }
+.zpe-4 { padding-right: 1rem !important; }
+.zpe-5 { padding-right: 1.5rem !important; }
+
+/* ─── 7. Tabs ──────────────────────────────────────────────────────────────── */
+
+.zTab-content > .zTab-pane { display: none; }
+.zTab-content > .zActive   { display: block; }
+
+/* Fade animation (opt-in via .zFade) */
+.zTab-pane.zFade {
+  opacity: 0;
+  transition: opacity 0.15s linear;
+}
+.zTab-pane.zFade.zShow { opacity: 1; }
+
+/* ─── 8. Nav / Nav-pills ───────────────────────────────────────────────────── */
+
+.zNav {
+  display: flex;
+  flex-wrap: wrap;
+  padding-left: 0;
+  margin-bottom: 0;
+  list-style: none;
+}
+
+.zNav-link {
+  display: block;
+  padding: 0.5rem 1rem;
+  text-decoration: none;
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
+}
+
+.zNav-link.zDisabled {
+  opacity: 0.5;
+  pointer-events: none;
+  cursor: default;
+}
+
+/* Pills */
+.zNav-pills .zNav-link {
+  border-radius: 0.375rem;
+}
+
+/* Active state — color set by app CSS, not here */
+.zNav-pills .zNav-link.zActive {
+  font-weight: 500;
+}
+
+/* ─── 9. Spinner ───────────────────────────────────────────────────────────── */
+
+.zSpinner-border {
+  display: inline-block;
+  width: 2rem;
+  height: 2rem;
+  border: 0.25em solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: zSpinner-border-spin 0.75s linear infinite;
+  vertical-align: -0.125em;
+}
+
+.zSpinner-border-sm {
+  width: 1rem;
+  height: 1rem;
+  border-width: 0.2em;
+}
+
+.zSpinner-grow {
+  display: inline-block;
+  width: 2rem;
+  height: 2rem;
+  background-color: currentColor;
+  border-radius: 50%;
+  opacity: 0;
+  animation: zSpinner-grow-pulse 0.75s linear infinite;
+  vertical-align: -0.125em;
+}
+
+.zSpinner-grow-sm { width: 1rem; height: 1rem; }
+
+@keyframes zSpinner-border-spin { to { transform: rotate(360deg); } }
+@keyframes zSpinner-grow-pulse  {
+  0%   { transform: scale(0); opacity: 1; }
+  50%  { opacity: 1; transform: scale(1); }
+  100% { transform: scale(0); opacity: 1; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .zSpinner-border, .zSpinner-grow { animation-duration: 1.5s; }
+}
+
+/* ─── 10. Misc runtime helpers ─────────────────────────────────────────────── */
+
+.zContainer-fluid {
+  width: 100%;
+  padding-right: 0.75rem;
+  padding-left: 0.75rem;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.zVisually-hidden {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0,0,0,0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
+.zText-muted    { opacity: 0.6; }
+.zText-center   { text-align: center !important; }
+.zText-start    { text-align: left !important; }
+.zText-end      { text-align: right !important; }
+
+.zW-100  { width: 100% !important; }
+.zH-100  { height: 100% !important; }
+.zmx-auto { margin-left: auto !important; margin-right: auto !important; }
+
+.zRounded        { border-radius: 0.375rem !important; }
+.zRounded-circle { border-radius: 50% !important; }
+
+/* Base button structural (no colors — app/theme sets those) */
+.zBtn {
+  display: inline-block;
+  cursor: pointer;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  user-select: none;
+  border: 1px solid transparent;
+  text-decoration: none;
+}
+.zBtn:focus { outline: 2px solid rgba(79, 70, 229, 0.5); outline-offset: 2px; }
+
+/* ─── Button color variants — canonical fills (theme tokens) ───────────────── */
+/* The renderer maps a zBtn's `color:` (default primary) to .zBtn-{color}; these
+ * give that class an actual fill everywhere — not just inside .zDash-container.
+ * Keyed to --color-* (mirrors .zText-*); apps restyle by redefining the token.
+ * Dashboard keeps its own look via the higher-specificity .zDash-container rule. */
+.zBtn-primary, .zBtn-secondary, .zBtn-success,
+.zBtn-danger, .zBtn-warning, .zBtn-info {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.4rem;
+  padding: 0.55rem 1.25rem;
+  border: none;
+  border-radius: 9px;
+  font-family: inherit;
+  font-size: 0.9rem;
+  font-weight: 600;
+  line-height: 1.4;
+  cursor: pointer;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
+  transition: filter 0.15s ease, transform 0.08s ease, box-shadow 0.15s ease;
+}
+.zBtn-primary:hover, .zBtn-secondary:hover, .zBtn-success:hover,
+.zBtn-danger:hover, .zBtn-warning:hover, .zBtn-info:hover {
+  filter: brightness(1.06);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.22);
+}
+.zBtn-primary:active, .zBtn-secondary:active, .zBtn-success:active,
+.zBtn-danger:active, .zBtn-warning:active, .zBtn-info:active {
+  transform: translateY(0);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
+}
+.zBtn-primary:disabled, .zBtn-secondary:disabled, .zBtn-success:disabled,
+.zBtn-danger:disabled, .zBtn-warning:disabled, .zBtn-info:disabled {
+  opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; filter: none;
+}
+
+/* SSOT fills — keyed to --color-* (same tokens/hexes as .zText-*), so a button
+ * matches a heading of the same color name. Dark text on the light hues
+ * (primary/success/warning/info), white on the deep ones (secondary/danger). */
+.zBtn-primary   { background: var(--color-primary,   #A2D46E); color: #14210a; }
+.zBtn-secondary { background: var(--color-secondary, #9370DB); color: #ffffff; }
+.zBtn-success   { background: var(--color-success,   #52B788); color: #06281c; }
+.zBtn-danger    { background: var(--color-error,     #E63946); color: #ffffff; }
+.zBtn-warning   { background: var(--color-warning,   #FFB347); color: #3a2400; }
+.zBtn-info      { background: var(--color-info,       #5CA9FF); color: #07243d; }
+
+/* Structural display defaults */
+.zSignal     { display: block; }
+.zCard       { position: relative; }
+.zInputGroup { display: flex; align-items: stretch; }
+.zInputGroup > .zInputGroup-text { display: flex; align-items: center; }
+
+/* Badge (structural — no color) */
+.zBadge {
+  display: inline-block;
+  padding: 0.25em 0.5em;
+  font-size: 0.75em;
+  font-weight: 700;
+  line-height: 1;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  border-radius: 0.375rem;
+}
+
+/* ─── 10. zDash layout formats ─────────────────────────────────────────────── */
+
+/* sidebar: fixed left-nav + scrollable content area */
+.zDash-format-sidebar.zDash-container {
+  display: flex;
+  flex-direction: column;
+  min-height: calc(100vh - 60px);
+}
+.zDash-format-sidebar > .zRow {
+  display: flex !important;
+  flex-wrap: nowrap !important;
+  align-items: flex-start !important;
+  flex: 1;
+  margin: 0;
+}
+.zDash-format-sidebar > .zRow > .zCol-auto { flex-shrink: 0; }
+.zDash-format-sidebar > .zRow > .zCol { flex: 1; min-width: 0; width: 0; }
+
+/* Tablet ≤900px: sidebar collapses to horizontal top bar */
+@media (max-width: 900px) {
+  .zDash-format-sidebar > .zRow {
+    flex-direction: column !important;
+    flex-wrap: wrap !important;
+  }
+  .zDash-format-sidebar > .zRow > .zCol-auto,
+  .zDash-format-sidebar > .zRow > .zCol {
+    width: 100% !important;
+    flex: none !important;
+    min-width: unset !important;
+  }
+  .zDash-format-sidebar > .zRow > .zCol-auto {
+    border-right: none !important;
+    border-bottom: 1px solid rgba(79, 70, 229, 0.15);
+  }
+  .zDash-format-sidebar .zDash-sidebar {
+    flex-direction: row !important;
+    flex-wrap: wrap;
+    width: 100%;
+    padding: 0.5rem 0.75rem;
+    gap: 0.25rem;
+  }
+  .zDash-format-sidebar .zDash-sidebar .zNav-link.zActive {
+    box-shadow: none !important;
+    border-bottom: 2px solid #4F46E5;
+  }
+  .zDash-panel { padding: 1.25rem 1rem; }
+  .zDash-container .zDialog-form { grid-template-columns: 1fr 1fr; }
+}
+
+/* Mobile sidebar toggle button — hidden by default (desktop/tablet) */
+.zDash-sidebar-toggle {
+  display: none;
+}
+
+/* Mobile ≤600px: sidebar becomes a toggle-driven drawer */
+@media (max-width: 600px) {
+  /* Container must be relative so the sidebar overlay positions correctly */
+  .zDash-format-sidebar { position: relative; }
+
+  /* Sidebar column hidden by default on mobile */
+  .zDash-format-sidebar > .zRow > .zCol-auto {
+    display: none !important;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 50;
+    background: rgba(10, 14, 39, 0.98);
+    border-bottom: 1px solid rgba(79, 70, 229, 0.2);
+    backdrop-filter: blur(12px);
+  }
+
+  /* Open state: sidebar slides in as a full-width dropdown */
+  .zDash-format-sidebar.zDash-sidebar-open > .zRow > .zCol-auto {
+    display: block !important;
+  }
+  .zDash-format-sidebar.zDash-sidebar-open .zDash-sidebar {
+    flex-direction: column !important;
+    width: 100% !important;
+    padding: 0.5rem 0.75rem;
+    gap: 0.1rem;
+  }
+  /* Push content down when sidebar is open */
+  .zDash-format-sidebar.zDash-sidebar-open > .zRow > .zCol {
+    margin-top: var(--zdash-sidebar-h, 0px);
+  }
+
+  /* Show the toggle button on mobile */
+  .zDash-sidebar-toggle {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    margin: 0.75rem 0.75rem 0;
+    padding: 0.45rem 0.85rem;
+    background: rgba(79, 70, 229, 0.15);
+    border: 1px solid rgba(79, 70, 229, 0.3);
+    border-radius: 8px;
+    color: #c7d2fe;
+    font-size: 0.875rem;
+    font-weight: 500;
+    cursor: pointer;
+    font-family: inherit;
+  }
+  .zDash-sidebar-toggle:hover {
+    background: rgba(79, 70, 229, 0.25);
+    color: #e0e7ff;
+  }
+
+  .zDash-panel { padding: 1rem 0.75rem; }
+  .zDash-container .zDialog-form { grid-template-columns: 1fr !important; }
+  .zDash-container .zInput { font-size: 1rem; }
+}
+
+/* tabs format (future) */
+.zDash-format-tabs.zDash-container { display: block; }
+.zDash-format-tabs .zDash-sidebar {
+  display: flex;
+  flex-direction: row;
+  border-bottom: 1px solid rgba(79, 70, 229, 0.2);
+}
+
+/* accordion format (future) */
+.zDash-format-accordion > .zRow { flex-direction: column; }
+
+/* ─── 11. zDash default visual theme ───────────────────────────────────────── */
+/*
+ * Default dark theme for all zDash apps.
+ * Override via _zClass or your app's own stylesheet.
+ */
+
+/* Sidebar column chrome */
+.zDash-format-sidebar > .zRow > .zCol-auto {
+  background: rgba(10, 14, 39, 0.6);
+  border-right: 1px solid rgba(79, 70, 229, 0.15);
+  padding: 0;
+}
+
+/* Sidebar nav */
+.zDash-sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+  padding: 1rem 0.75rem;
+  width: 200px;
+}
+.zDash-sidebar .zNav-link {
+  display: flex;
+  align-items: center;
+  padding: 0.55rem 0.85rem;
+  border-radius: 8px;
+  color: #94a3b8;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: color 0.15s, background 0.15s;
+  white-space: nowrap;
+  text-decoration: none;
+}
+.zDash-sidebar .zNav-link:hover {
+  color: #f1f5f9;
+  background: rgba(79, 70, 229, 0.12);
+}
+.zDash-sidebar .zNav-link.zActive {
+  color: #f9fafb;
+  background: rgba(79, 70, 229, 0.22);
+  box-shadow: inset 3px 0 0 #4F46E5;
+}
+
+/* Panel area */
+.zDash-panel { padding: 1.75rem 2rem; }
+.zDash-panel > .zTab-pane         { display: none; }
+.zDash-panel > .zTab-pane.zActive { display: block; }
+
+/* Cards */
+.zDash-container .zCard {
+  width: 100%;
+  box-sizing: border-box;
+  margin-bottom: 1.25rem;
+  background: rgba(15, 20, 48, 0.6);
+  border: 1px solid rgba(79, 70, 229, 0.15);
+  border-radius: 10px;
+}
+
+/* Dialog / form section header */
+.zDash-container .zDialog-title {
+  font-size: 1rem;
+  font-weight: 700;
+  color: #c7d2fe;
+  margin-bottom: 1rem;
+  padding-bottom: 0.6rem;
+  border-bottom: 1px solid rgba(79, 70, 229, 0.15);
+}
+
+/* Multi-column form grid */
+.zDash-container .zDialog-form {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 0.75rem;
+}
+.zDash-container .zDialog-form > [class*="zmt-"],
+.zDash-container .zDialog-errors {
+  grid-column: 1 / -1;
+}
+
+/* Labels */
+.zDash-container .zLabel {
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: #64748b;
+  font-weight: 600;
+  display: block;
+  margin-bottom: 0.3rem;
+}
+
+/* Inputs & selects */
+.zDash-container .zInput {
+  appearance: none;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(79, 70, 229, 0.2);
+  border-radius: 7px;
+  color: #e2e8f0;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  width: 100%;
+  box-sizing: border-box;
+  font-family: inherit;
+  transition: border-color 0.15s, background 0.15s;
+}
+.zDash-container .zInput:focus {
+  outline: none;
+  border-color: rgba(79, 70, 229, 0.6);
+  background: rgba(255, 255, 255, 0.07);
+}
+
+/* Primary action button */
+.zDash-container .zBtn-primary {
+  background: #4F46E5;
+  border: none;
+  color: #fff;
+  padding: 0.55rem 1.25rem;
+  border-radius: 8px;
+  font-size: 0.875rem;
+  font-weight: 600;
+  cursor: pointer;
+  font-family: inherit;
+  transition: background 0.15s, transform 0.1s;
+}
+.zDash-container .zBtn-primary:hover {
+  background: #4338ca;
+  transform: translateY(-1px);
+}
+
+/* Panel / menu action buttons */
+.zDash-container button[data-key] {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.5rem 1rem;
+  margin: 0 0.4rem 0.4rem 0;
+  background: rgba(79, 70, 229, 0.15);
+  border: 1px solid rgba(79, 70, 229, 0.3);
+  border-radius: 8px;
+  color: #c7d2fe;
+  font-size: 0.875rem;
+  font-weight: 500;
+  font-family: inherit;
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s, color 0.15s;
+}
+.zDash-container button[data-key]:hover {
+  background: rgba(79, 70, 229, 0.3);
+  border-color: rgba(79, 70, 229, 0.5);
+  color: #e0e7ff;
+}
+
+/* Tables */
+.zDash-container table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.875rem;
+  color: #e2e8f0;
+}
+.zDash-container th {
+  padding: 0.6rem 0.9rem;
+  background: rgba(79, 70, 229, 0.12);
+  color: #a5b4fc;
+  font-weight: 600;
+  text-align: left;
+  border-bottom: 1px solid rgba(79, 70, 229, 0.2);
+}
+.zDash-container td {
+  padding: 0.55rem 0.9rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+.zDash-container tr:hover td { background: rgba(79, 70, 229, 0.07); }
+
+/* Section headings */
+.zDash-container h2 {
+  font-size: 1.2rem;
+  font-weight: 700;
+  color: #f9fafb;
+  margin: 0 0 1rem;
+}
+
+/* Spinner */
+.zSpinner-border { color: #6366f1; }
+
+/* ============================================================================
+   Tables (zTable) — canonical dark-theme data tables
+   ----------------------------------------------------------------------------
+   Bifrost-owned SSOT for the zTable look (moved here from zCloud so every app
+   inherits the same table styling). The zTable event opts in via _zClass: zTable.
+   ========================================================================== */
+.zTable-container { margin: 1.5rem 0; }
+
+.zTable-container h4 {
+  color: #f9fafb;
+  font-size: 1.1rem;
+  font-weight: 700;
+  margin: 0 0 0.75rem;
+}
+
+.zTable-responsive {
+  overflow-x: auto;
+  border-radius: 12px;
+  border: 1px solid rgba(79, 70, 229, 0.2);
+}
+
+.zTable {
+  width: 100%;
+  border-collapse: collapse;
+  background: linear-gradient(145deg, rgba(30, 35, 60, 0.5) 0%, rgba(20, 25, 45, 0.6) 100%);
+  font-size: 0.95rem;
+  text-align: left;
+  /* Default body text colour lives here so cells INHERIT it. Keeping it off the
+     td selector lets a per-cell utility (zText-success/-danger…) win — a bare
+     .zText-* class (0,1,0) would otherwise lose to `.zTable tbody td` (0,1,2). */
+  color: #d1d5db;
+}
+
+.zTable thead th {
+  background: rgba(79, 70, 229, 0.18);
+  color: #c7d2fe;
+  font-weight: 700;
+  text-align: left;
+  padding: 0.85rem 1rem;
+  letter-spacing: 0.02em;
+  border-bottom: 1px solid rgba(79, 70, 229, 0.3);
+  white-space: nowrap;
+}
+
+.zTable tbody td {
+  padding: 0.8rem 1rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  vertical-align: top;
+}
+
+.zTable tbody tr:last-child td { border-bottom: none; }
+.zTable tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.02); }
+.zTable tbody tr:hover td { background: rgba(79, 70, 229, 0.08); }
+.zTable td strong { color: #f9fafb; }
+
+/* ════════════════════════════════════════════════════════════════════════════
+   Progress bar (zProgress) — canonical animated progress component
+
+   Bifrost-owned SSOT for the progress look (mirrors the zCLI bar). The renderer
+   builds: .zProgress-container > [label row] + .zProgress (track) > .zProgress-bar
+   (the fill). Fill WIDTH is set inline (0–100%); fill COLOR comes from a
+   zBg-{color} class the renderer derives from the event's `color` property.
+   ════════════════════════════════════════════════════════════════════════════ */
+
+.zProgress-container { width: 100%; margin: 0.75rem 0; }
+
+/* Label / percentage row above the track, pushed to the edges (self-contained
+   so it never depends on zTheme flex utilities being present). */
+.zProgress-container > .zD-flex {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  margin-bottom: 0.4rem;
+}
+.zProgress-container .zFw-bold     { font-weight: 600; color: var(--zprogress-label, #e5e7eb); }
+.zProgress-container .zText-muted  { color: var(--zprogress-info, rgba(229, 231, 235, 0.6)); }
+
+/* Track — the rail behind the fill. Inset shadow gives the pill real depth. */
+.zProgress {
+  width: 100%;
+  height: 1rem;                 /* default; renderer may override inline via height prop */
+  background: var(--zprogress-track, rgba(255, 255, 255, 0.07));
+  border-radius: 999px;
+  overflow: hidden;
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
+}
+
+/* Fill — the moving bar. It carries a solid tint (zBg-{color}) PLUS two layered
+   overlays: a fixed top gloss for a glossy 3-D pill, and a diagonal sheen that
+   is ALWAYS running — so the bar reads as alive even when the value is static.
+   Width animates with a soft ease when it does change. */
+.zProgress-bar {
+  height: 100%;
+  width: 0;
+  background-color: var(--color-primary, #A2D46E);  /* default; zBg-{color} overrides */
+  background-image:
+    linear-gradient(to bottom,
+      rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.04) 48%, rgba(0, 0, 0, 0.10)),
+    linear-gradient(-45deg,
+      rgba(255, 255, 255, 0.16) 25%, transparent 25%,
+      transparent 50%, rgba(255, 255, 255, 0.16) 50%,
+      rgba(255, 255, 255, 0.16) 75%, transparent 75%, transparent);
+  background-size: 100% 100%, 1.15rem 1.15rem;
+  background-repeat: no-repeat, repeat;
+  border-radius: inherit;
+  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
+  animation: zProgress-flow 0.9s linear infinite;
+}
+
+/* The diagonal sheen scrolls; the gloss layer stays put (position pinned). */
+@keyframes zProgress-flow {
+  from { background-position: 0 0, 1.15rem 0; }
+  to   { background-position: 0 0, 0 0; }
+}
+
+/* Respect reduced-motion: keep the look, drop the perpetual scroll. */
+@media (prefers-reduced-motion: reduce) {
+  .zProgress-bar { animation: none; }
+}
+
+/* `color` property → fill color. Bar-scoped (.zProgress-bar.zBg-*) so it always
+   wins over the generic zTheme utility and pulls from the same --color-* SSOT. */
+.zProgress-bar.zBg-primary   { background-color: var(--color-primary,   #A2D46E); }
+.zProgress-bar.zBg-secondary { background-color: var(--color-secondary, #9370DB); }
+.zProgress-bar.zBg-success   { background-color: var(--color-success,   #52B788); }
+.zProgress-bar.zBg-info      { background-color: var(--color-info,      #5CA9FF); }
+.zProgress-bar.zBg-warning   { background-color: var(--color-warning,   #FFB347); }
+.zProgress-bar.zBg-danger,
+.zProgress-bar.zBg-error     { background-color: var(--color-error,     #E63946); }
+
+/* Indeterminate / "working" state — bolder stripes (renderer adds these when a
+   bar has no total). Reuses the same flow animation. */
+.zProgress-bar-striped {
+  background-image:
+    linear-gradient(to bottom,
+      rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.04) 48%, rgba(0, 0, 0, 0.10)),
+    linear-gradient(-45deg,
+      rgba(255, 255, 255, 0.28) 25%, transparent 25%,
+      transparent 50%, rgba(255, 255, 255, 0.28) 50%,
+      rgba(255, 255, 255, 0.28) 75%, transparent 75%, transparent);
+}
+.zProgress-bar-animated { animation: zProgress-flow 0.9s linear infinite; }
+
+/* Indeterminate "executing" marquee — opaque work of UNKNOWN length (a zFunc /
+   zBtn plugin call). A partial fill chunk marches across the track: the web twin
+   of the zCLI lit-window marquee that parks on the EXECUTE stage. It reads as
+   "zOS is working" and NEVER sits at 100% — so a full bar only ever means done.
+   Completion is signalled by the bar being replaced with the result. */
+.zProgress--indeterminate { overflow: hidden; }
+.zProgress--indeterminate > .zProgress-bar {
+  width: 42% !important;
+  transition: none;
+  animation: zProgress-flow 0.9s linear infinite,
+             zProgress-march 1.25s cubic-bezier(0.65, 0, 0.35, 1) infinite;
+}
+@keyframes zProgress-march {
+  from { transform: translateX(-115%); }
+  to   { transform: translateX(258%); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .zProgress--indeterminate > .zProgress-bar {
+    animation: none; transform: none; width: 60% !important;
+  }
+}
+
+/* ─── zMenu — interactive menu events ──────────────────────────────────────────
+   Canonical Bifrost render of a zMenu: a vertical list of full-width selectable
+   rows, each with a numbered chip (keyboard shortcut) + label. Overrides the
+   generic zBtn-pill fallback so menus read as navigation, not loose buttons.
+
+   Live markup (zdisplay_orchestrator.js _renderZMenuBlock):
+     nav.zMenu-nav > ul.zNavbar-nav > li.zNav-item
+        > button.zNav-link.zBtn[data-key] > span.zBadge + label
+   Legacy markup (menu_renderer.js): .zMenu-container > .zMenu-option > button.
+   Both paths are styled below.
+
+   The block wrapper (.zCallout) supplies the card surface; this only owns the
+   list, rows, and number chip. Accents pull from the zCLI SSOT palette
+   (--color-primary lime, --color-secondary purple); dark-theme friendly. */
+
+/* Options list — kill inherited bullets / list padding */
+.zMenu-nav .zNavbar-nav,
+.zMenu-options {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.zMenu-nav .zNav-item,
+.zMenu-option {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.zMenu-nav .zNav-item::marker,
+.zMenu-option::marker { content: none; }
+
+/* Row — overrides the fallback zBtn pill into a full-width nav row */
+.zMenu-nav .zNav-link,
+.zMenu-container .zMenu-option button,
+.zMenu-container .zMenu-option .zBtn {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  width: 100%;
+  text-align: left;
+  padding: 0.6rem 0.85rem;
+  font-size: 1rem;
+  font-weight: 500;
+  font-family: inherit;
+  color: inherit;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 0.625rem;
+  cursor: pointer;
+  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
+}
+
+.zMenu-nav .zNav-link:hover,
+.zMenu-nav .zNav-link:focus-visible,
+.zMenu-container .zMenu-option button:hover,
+.zMenu-container .zMenu-option button:focus-visible {
+  background: rgba(162, 212, 110, 0.12);
+  border-color: var(--color-primary, #A2D46E);
+  transform: translateX(2px);
+  outline: none;
+}
+
+.zMenu-nav .zNav-link:active,
+.zMenu-nav .zNav-link.active,
+.zMenu-container .zMenu-option button:active,
+.zMenu-container .zMenu-option button.active {
+  background: var(--color-primary, #A2D46E);
+  border-color: var(--color-primary, #A2D46E);
+  color: #1a1a1a;
+}
+
+.zMenu-nav .zNav-link.active .zBadge {
+  color: #fff;
+  background: rgba(0, 0, 0, 0.25);
+}
+
+.zMenu-nav .zNav-link:disabled,
+.zMenu-container .zMenu-option button:disabled {
+  opacity: 0.55;
+  cursor: default;
+  transform: none;
+}
+
+/* Leading chip — the keyboard index (overrides the faded zBadge-secondary) */
+.zMenu-nav .zNav-link .zBadge,
+.zMenu-container .zMenu-option .zBadge,
+.zMenu-container .zMenu-index {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  color: var(--color-secondary, #9370DB);
+  background: rgba(147, 112, 219, 0.16);
+  border-radius: 50%;
+}
+
+.zMenu-nav .zNav-link:hover .zBadge,
+.zMenu-nav .zNav-link:focus-visible .zBadge,
+.zMenu-container .zMenu-option button:hover .zBadge,
+.zMenu-container .zMenu-option button:focus-visible .zBadge {
+  color: #fff;
+  background: var(--color-secondary, #9370DB);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .zMenu-nav .zNav-link,
+  .zMenu-container .zMenu-option button { transition: none; }
+  .zMenu-nav .zNav-link:hover,
+  .zMenu-container .zMenu-option button:hover { transform: none; }
+}