/* Developmizer concatenated bundle — front v0.9.6 */
/* Generated: 2026-04-19 01:26:18Z */
/* Hoisted @import url() statements: 1 */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500&family=Geist:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/**
 * Developmizer — Front Bundle
 *
 * Minimal stylesheet for the public landing page surface.
 * Enqueued only on public-facing routes via DZ_Front_Assets.
 *
 * Intentionally lean — only includes components used on public pages.
 * Phase 14 (CMS blocks) will add block-specific CSS imports here.
 *
 * @package Developmizer
 */

/* ── ../tokens.css ── */
/**
 * Developmizer — Design Tokens (Cartograph aesthetic, v0.8.2)
 *
 * Precision-instrument feel. Warm-neutral surfaces (ivory light, graphite dark,
 * never pure white/black). Fraunces serif display + Geist body + JetBrains Mono
 * numerics. Blue kept as sparse accent only, not a background or structural
 * color. Paper-on-paper shadows (thin shadow + hairline border) instead of
 * soft puff shadows. Tight radii for deliberate feel.
 *
 * @package Developmizer
 */

/* ================================================================
   LIGHT MODE (default) — "Ivory"
   ================================================================ */

:root {

  /* ── Primary / Accent (unchanged blue brand scale) ───────────── */
  --dz-accent-50:    #f0fafd;
  --dz-accent-100:   #d8f1fa;
  --dz-accent-200:   #aae2f5;
  --dz-accent-300:   #5dcce9;
  --dz-accent-400:   #0cb4e2;
  --dz-accent:       #01a1d7;
  --dz-accent-600:   #0186b3;
  --dz-accent-700:   #036b91;
  --dz-accent-800:   #085474;
  --dz-accent-900:   #094159;
  --dz-accent-950:   #032838;

  --dz-accent-hover:    var(--dz-accent-600);
  --dz-accent-active:   var(--dz-accent-700);
  --dz-accent-light:    var(--dz-accent-50);
  --dz-accent-text:     var(--dz-accent-700);
  --dz-accent-on-dark:  var(--dz-accent-300);

  /* ── Warm-neutral stone scale ──────────────────────────────── */
  --dz-stone-50:   #faf9f6;
  --dz-stone-100:  #f5f3ed;
  --dz-stone-200:  #e9e5da;
  --dz-stone-300:  #d4cdbc;
  --dz-stone-400:  #a8a193;
  --dz-stone-500:  #78736a;
  --dz-stone-600:  #5a5650;
  --dz-stone-700:  #42403b;
  --dz-stone-800:  #2a2927;
  --dz-stone-900:  #18171a;
  --dz-stone-950:  #0c0b0d;

  /* Backward-compatible gray aliases */
  --dz-gray-50:   var(--dz-stone-50);
  --dz-gray-100:  var(--dz-stone-100);
  --dz-gray-200:  var(--dz-stone-200);
  --dz-gray-300:  var(--dz-stone-300);
  --dz-gray-400:  var(--dz-stone-400);
  --dz-gray-500:  var(--dz-stone-500);
  --dz-gray-600:  var(--dz-stone-600);
  --dz-gray-700:  var(--dz-stone-700);
  --dz-gray-800:  var(--dz-stone-800);
  --dz-gray-900:  var(--dz-stone-900);
  --dz-gray-950:  var(--dz-stone-950);

  /* ── Surfaces ──────────────────────────────────────────────── */
  --dz-bg:             #fafaf6;
  --dz-bg-subtle:      #f5f4ee;
  --dz-bg-muted:       #ece9df;
  --dz-surface:        #ffffff;
  --dz-surface-raised: #ffffff;
  --dz-surface-sunken: #f5f4ee;
  --dz-overlay:        rgba(24, 23, 26, 0.4);

  /* ── Borders ───────────────────────────────────────────────── */
  --dz-border:        #e9e5da;
  --dz-border-strong: #d4cdbc;
  --dz-border-focus:  var(--dz-accent);
  --dz-ring:          0 0 0 3px rgba(1, 161, 215, 0.22);
  --dz-ring-danger:   0 0 0 3px rgba(185, 28, 28, 0.2);

  /* ── Text ──────────────────────────────────────────────────── */
  --dz-text:           var(--dz-stone-900);
  --dz-text-secondary: var(--dz-stone-700);
  --dz-text-muted:     var(--dz-stone-600);
  --dz-text-subtle:    var(--dz-stone-500);
  --dz-text-inverse:   #fafaf6;
  --dz-text-link:      var(--dz-accent-700);
  --dz-text-link-hover:var(--dz-accent-800);

  /* ── Status colors (warmer, less saturated) ──────────────── */
  --dz-success-50:   #f0f7f0;
  --dz-success-100:  #daeedd;
  --dz-success:      #3f8450;
  --dz-success-700:  #2d6b3d;
  --dz-success-light: var(--dz-success-100);

  --dz-warning-50:   #fbf3e4;
  --dz-warning-100:  #f5e4c1;
  --dz-warning:      #a86e1c;
  --dz-warning-700:  #8a5614;
  --dz-warning-light: var(--dz-warning-100);

  --dz-danger-50:   #fbefee;
  --dz-danger-100:  #f5dddb;
  --dz-danger:      #b23a32;
  --dz-danger-700:  #942e27;
  --dz-danger-light: var(--dz-danger-100);

  --dz-info-50:    #edf3fa;
  --dz-info-100:   #d5e2f0;
  --dz-info:       #2b5b94;
  --dz-info-700:   #1f4777;
  --dz-info-light: var(--dz-info-100);

  /* ── Typography ────────────────────────────────────────────── */
  --dz-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --dz-font-sans:    'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dz-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  --dz-text-xs:    0.75rem;
  --dz-text-sm:    0.8125rem;
  --dz-text-base:  0.875rem;
  --dz-text-md:    1rem;
  --dz-text-lg:    1.125rem;
  --dz-text-xl:    1.375rem;
  --dz-text-2xl:   1.75rem;
  --dz-text-3xl:   2.25rem;
  --dz-text-4xl:   3rem;

  --dz-leading-none:    1;
  --dz-leading-tight:   1.15;
  --dz-leading-snug:    1.3;
  --dz-leading-normal:  1.5;
  --dz-leading-relaxed: 1.65;

  --dz-font-regular:  400;
  --dz-font-medium:   500;
  --dz-font-semibold: 600;
  --dz-font-bold:     700;

  --dz-tracking-tighter: -0.04em;
  --dz-tracking-tight:   -0.02em;
  --dz-tracking-normal:   0;
  --dz-tracking-wide:     0.035em;
  --dz-tracking-wider:    0.08em;

  /* ── Spacing (unchanged) ──────────────────────────────────── */
  --dz-space-0:   0;
  --dz-space-px:  1px;
  --dz-space-0-5: 0.125rem;
  --dz-space-1:   0.25rem;
  --dz-space-1-5: 0.375rem;
  --dz-space-2:   0.5rem;
  --dz-space-2-5: 0.625rem;
  --dz-space-3:   0.75rem;
  --dz-space-3-5: 0.875rem;
  --dz-space-4:   1rem;
  --dz-space-5:   1.25rem;
  --dz-space-6:   1.5rem;
  --dz-space-8:   2rem;
  --dz-space-10:  2.5rem;
  --dz-space-12:  3rem;
  --dz-space-16:  4rem;
  --dz-space-20:  5rem;
  --dz-space-24:  6rem;

  /* ── Border radius (tighter) ──────────────────────────────── */
  --dz-radius-xs:    2px;
  --dz-radius-sm:    3px;
  --dz-radius:       5px;
  --dz-radius-md:    6px;
  --dz-radius-lg:    8px;
  --dz-radius-xl:    12px;
  --dz-radius-2xl:   16px;
  --dz-radius-full:  9999px;

  /* ── Shadows (paper-on-paper) ─────────────────────────────── */
  --dz-shadow-xs:    0 1px 0 0 rgba(24, 23, 26, 0.04);
  --dz-shadow-sm:    0 1px 2px 0 rgba(24, 23, 26, 0.04),
                     0 0 0 1px rgba(24, 23, 26, 0.04);
  --dz-shadow:       0 1px 3px 0 rgba(24, 23, 26, 0.06),
                     0 0 0 1px rgba(24, 23, 26, 0.04);
  --dz-shadow-md:    0 2px 4px -1px rgba(24, 23, 26, 0.06),
                     0 4px 8px -2px rgba(24, 23, 26, 0.05),
                     0 0 0 1px rgba(24, 23, 26, 0.04);
  --dz-shadow-lg:    0 6px 12px -3px rgba(24, 23, 26, 0.08),
                     0 10px 20px -5px rgba(24, 23, 26, 0.05),
                     0 0 0 1px rgba(24, 23, 26, 0.04);
  --dz-shadow-xl:    0 12px 24px -6px rgba(24, 23, 26, 0.12),
                     0 20px 40px -10px rgba(24, 23, 26, 0.08);
  --dz-shadow-inner: inset 0 1px 2px 0 rgba(24, 23, 26, 0.05);
  --dz-shadow-none:  0 0 0 0 transparent;

  /* ── Transitions (deliberate) ────────────────────────────── */
  --dz-duration-fast:   120ms;
  --dz-duration:        180ms;
  --dz-duration-medium: 280ms;
  --dz-duration-slow:   420ms;

  --dz-ease:            cubic-bezier(0.32, 0.08, 0.24, 1);
  --dz-ease-in:         cubic-bezier(0.4, 0, 1, 1);
  --dz-ease-out:        cubic-bezier(0, 0, 0.2, 1);
  --dz-ease-bounce:     cubic-bezier(0.34, 1.56, 0.64, 1);

  --dz-transition:      var(--dz-duration) var(--dz-ease);
  --dz-transition-slow: var(--dz-duration-slow) var(--dz-ease);

  /* ── Z-index scale ─────────────────────────────────────────── */
  --dz-z-base:      0;
  --dz-z-dropdown:  100;
  --dz-z-sticky:    200;
  --dz-z-overlay:   300;
  --dz-z-modal:     400;
  --dz-z-popover:   500;
  --dz-z-toast:     600;
  --dz-z-tooltip:   700;

  /* ── Layout ──────────────────────────────────────────────────── */
  --dz-sidebar-width:      240px;
  --dz-sidebar-collapsed:  56px;
  --dz-topbar-height:      56px;
  --dz-content-max:        1280px;
  --dz-content-narrow:     720px;

  --dz-touch-min: 44px;
}


/* ================================================================
   DARK MODE — "Graphite"
   ================================================================ */

[data-dz-theme="dark"] {

  --dz-accent-hover:    var(--dz-accent-400);
  --dz-accent-active:   var(--dz-accent-300);
  --dz-accent-light:    rgba(12, 180, 226, 0.10);
  --dz-accent-text:     var(--dz-accent-300);
  --dz-accent-on-dark:  var(--dz-accent-300);

  --dz-bg:             #1a1918;
  --dz-bg-subtle:      #22211f;
  --dz-bg-muted:       #2a2927;
  --dz-surface:        #22211f;
  --dz-surface-raised: #2a2927;
  --dz-surface-sunken: #161514;
  --dz-overlay:        rgba(0, 0, 0, 0.65);

  --dz-border:          #33312e;
  --dz-border-strong:   #433f3b;
  --dz-ring:            0 0 0 3px rgba(12, 180, 226, 0.3);
  --dz-ring-danger:     0 0 0 3px rgba(248, 113, 113, 0.25);

  --dz-text:            #ebe8df;
  --dz-text-secondary:  #bdb8ab;
  --dz-text-muted:      #8b857b;
  --dz-text-subtle:     #6b6760;
  --dz-text-inverse:    #1a1918;
  --dz-text-link:       var(--dz-accent-300);
  --dz-text-link-hover: var(--dz-accent-200);

  --dz-success:        #6ba77a;
  --dz-success-light:  rgba(107, 167, 122, 0.12);
  --dz-warning:        #d9a859;
  --dz-warning-light:  rgba(217, 168, 89, 0.12);
  --dz-danger:         #d97870;
  --dz-danger-light:   rgba(217, 120, 112, 0.12);
  --dz-info:           #7ba6d9;
  --dz-info-light:     rgba(123, 166, 217, 0.12);

  --dz-shadow-xs:    0 1px 0 0 rgba(0, 0, 0, 0.3);
  --dz-shadow-sm:    0 1px 2px 0 rgba(0, 0, 0, 0.3),
                     0 0 0 1px rgba(255, 255, 255, 0.04);
  --dz-shadow:       0 1px 3px 0 rgba(0, 0, 0, 0.35),
                     0 0 0 1px rgba(255, 255, 255, 0.04);
  --dz-shadow-md:    0 2px 4px -1px rgba(0, 0, 0, 0.35),
                     0 4px 8px -2px rgba(0, 0, 0, 0.25),
                     0 0 0 1px rgba(255, 255, 255, 0.04);
  --dz-shadow-lg:    0 6px 12px -3px rgba(0, 0, 0, 0.4),
                     0 10px 20px -5px rgba(0, 0, 0, 0.3),
                     0 0 0 1px rgba(255, 255, 255, 0.04);
  --dz-shadow-xl:    0 12px 24px -6px rgba(0, 0, 0, 0.5),
                     0 20px 40px -10px rgba(0, 0, 0, 0.3);
  --dz-shadow-inner: inset 0 1px 2px 0 rgba(0, 0, 0, 0.4);
}


/* ── ../reset.css ── */
/**
 * Developmizer — Modern Reset
 *
 * Opinionated baseline that normalizes browser defaults without
 * fighting the platform. Scoped to .dz-app to avoid polluting
 * WordPress's own admin or other plugins.
 *
 * @package Developmizer
 */

/* ── Global box model ──────────────────────────────────────────── */
.dz-app *,
.dz-app *::before,
.dz-app *::after {
  box-sizing: border-box;
}

/* ── Root element reset ────────────────────────────────────────── */
.dz-app {
  margin: 0;
  padding: 0;
  font-family: var(--dz-font-sans);
  font-size: var(--dz-text-base);
  font-weight: var(--dz-font-regular);
  line-height: var(--dz-leading-normal);
  color: var(--dz-text);
  background-color: var(--dz-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  tab-size: 4;
}

/* ── Element resets ────────────────────────────────────────────── */
.dz-app h1,
.dz-app h2,
.dz-app h3,
.dz-app h4,
.dz-app h5,
.dz-app h6 {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.dz-app p,
.dz-app ul,
.dz-app ol,
.dz-app dl,
.dz-app figure,
.dz-app blockquote,
.dz-app fieldset,
.dz-app pre {
  margin: 0;
  padding: 0;
}

.dz-app ul,
.dz-app ol {
  list-style: none;
}

.dz-app a {
  color: inherit;
  text-decoration: inherit;
}

.dz-app img,
.dz-app svg,
.dz-app video,
.dz-app canvas,
.dz-app audio,
.dz-app iframe,
.dz-app embed,
.dz-app object {
  display: block;
  max-inline-size: 100%;
}

.dz-app img,
.dz-app video {
  block-size: auto;
}

/* ── Form element reset ────────────────────────────────────────── */
.dz-app button,
.dz-app input,
.dz-app select,
.dz-app textarea {
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.dz-app button {
  cursor: pointer;
}

.dz-app button:disabled,
.dz-app input:disabled,
.dz-app select:disabled,
.dz-app textarea:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.dz-app textarea {
  resize: vertical;
}

.dz-app [type="search"]::-webkit-search-cancel-button,
.dz-app [type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/* ── Table reset ───────────────────────────────────────────────── */
.dz-app table {
  border-collapse: collapse;
  border-spacing: 0;
  inline-size: 100%;
}

.dz-app th {
  font-weight: var(--dz-font-semibold);
  text-align: inherit;
  text-align: -webkit-match-parent;
}

/* ── Misc ──────────────────────────────────────────────────────── */
.dz-app hr {
  margin: 0;
  border: none;
  border-block-start: 1px solid var(--dz-border);
}

.dz-app [hidden] {
  display: none !important;
}

.dz-app summary {
  cursor: pointer;
}

.dz-app ::placeholder {
  color: var(--dz-text-subtle);
  opacity: 1;
}

.dz-app ::selection {
  background-color: var(--dz-accent-200);
  color: var(--dz-accent-900);
}

[data-dz-theme="dark"] .dz-app ::selection {
  background-color: rgba(1, 161, 215, 0.3);
  color: var(--dz-accent-100);
}


/* ── ../typography.css ── */
/**
 * Developmizer — Typography (Cartograph, v0.8.2)
 *
 * Three-font system:
 *   - Fraunces (serif, display, KPI numerics) — OFL 1.1
 *   - Geist (sans, body, UI) — OFL 1.1
 *   - JetBrains Mono (mono, tabular data, code) — OFL 1.1
 *
 * Font loading strategy:
 *   v0.8.2 loads via Google Fonts @import with preconnect hints for
 *   pragmatism (sandbox environment doesn't support checking in binary
 *   font files this release). Production preference is self-hosted
 *   WOFF2 — this is a documented follow-up in v0.8.2.x. The tradeoff
 *   is a ~50ms cold-start penalty for the extra DNS/TLS round-trip
 *   to fonts.googleapis.com which is mitigated by preconnect in
 *   templates/admin-shell.php.
 *
 * font-display: swap prevents FOIT (flash of invisible text) — body
 * renders in system font until Geist loads, then swaps. Users perceive
 * text sooner; the swap is visible but minor.
 *
 * @package Developmizer
 */

/* ── Font imports (Google Fonts) ──────────────────────────────── */


/* ── Base typography ──────────────────────────────────────────── */

html {
  font-size: 16px;
  line-height: var(--dz-leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga", "calt";
}

.dz-app {
  font-family: var(--dz-font-sans);
  font-size: var(--dz-text-base);
  color: var(--dz-text);
  background: var(--dz-bg);
}

/* ── Headings — Fraunces display serif ────────────────────────── */

.dz-app h1,
.dz-app h2,
.dz-app h3,
.dz-app h4 {
  font-family: var(--dz-font-display);
  font-weight: var(--dz-font-semibold);
  line-height: var(--dz-leading-tight);
  letter-spacing: var(--dz-tracking-tight);
  color: var(--dz-text);
}

.dz-app h1 {
  font-size: var(--dz-text-3xl);
  letter-spacing: var(--dz-tracking-tighter);
  /* Fraunces variable axes: soft optical size for large display */
  font-variation-settings: "opsz" 144, "SOFT" 50;
}

.dz-app h2 {
  font-size: var(--dz-text-2xl);
  font-variation-settings: "opsz" 80;
}

.dz-app h3 {
  font-size: var(--dz-text-xl);
  font-weight: var(--dz-font-medium);
  font-variation-settings: "opsz" 48;
}

.dz-app h4 {
  font-size: var(--dz-text-lg);
  font-weight: var(--dz-font-medium);
}

.dz-app h5,
.dz-app h6 {
  font-family: var(--dz-font-sans);
  font-size: var(--dz-text-base);
  font-weight: var(--dz-font-semibold);
  line-height: var(--dz-leading-snug);
}

/* ── Body text ───────────────────────────────────────────────── */

.dz-app p {
  margin: 0 0 var(--dz-space-3) 0;
  line-height: var(--dz-leading-normal);
}

.dz-app p:last-child {
  margin-bottom: 0;
}

.dz-app strong,
.dz-app b {
  font-weight: var(--dz-font-semibold);
}

.dz-app em,
.dz-app i {
  font-style: italic;
}

.dz-app small {
  font-size: var(--dz-text-xs);
}

/* ── Code / mono — JetBrains Mono ────────────────────────────── */

.dz-app code,
.dz-app kbd,
.dz-app samp,
.dz-app pre {
  font-family: var(--dz-font-mono);
  font-feature-settings: "kern" 0, "liga" 0;
}

.dz-app code {
  font-size: 0.9em;
  padding: 0.125em 0.35em;
  background: var(--dz-bg-muted);
  border-radius: var(--dz-radius-xs);
  color: var(--dz-text);
}

.dz-app kbd {
  font-size: 0.85em;
  padding: 0.1em 0.4em;
  background: var(--dz-surface);
  border: 1px solid var(--dz-border-strong);
  border-radius: var(--dz-radius-xs);
  box-shadow: 0 1px 0 var(--dz-border-strong);
  color: var(--dz-text-secondary);
  font-weight: var(--dz-font-medium);
}

/* ── Links ───────────────────────────────────────────────────── */

.dz-app a {
  color: var(--dz-text-link);
  text-decoration: none;
  transition: color var(--dz-transition);
}

.dz-app a:hover {
  color: var(--dz-text-link-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* ── Display utilities ───────────────────────────────────────── */

/* Large serif numeric (e.g. KPI cards) */
.dz-display-numeric {
  font-family: var(--dz-font-display);
  font-size: var(--dz-text-4xl);
  font-weight: var(--dz-font-medium);
  line-height: 1;
  letter-spacing: var(--dz-tracking-tighter);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum", "lnum";
  font-variation-settings: "opsz" 144, "SOFT" 80;
  color: var(--dz-text);
}

/* Italic unit suffix after a display numeric (e.g. "h" for hours) */
.dz-display-unit {
  font-family: var(--dz-font-display);
  font-style: italic;
  font-weight: var(--dz-font-regular);
  font-size: 0.5em;         /* relative to parent display size */
  margin-inline-start: 0.2em;
  color: var(--dz-text-muted);
  letter-spacing: 0;
  vertical-align: baseline;
}

/* Small caps eyebrow / label */
.dz-eyebrow {
  font-family: var(--dz-font-sans);
  font-size: var(--dz-text-xs);
  font-weight: var(--dz-font-medium);
  letter-spacing: var(--dz-tracking-wider);
  text-transform: uppercase;
  color: var(--dz-text-muted);
}

/* Tabular numbers for data tables / counters */
.dz-tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Mono utility for IDs, hashes, timestamps */
.dz-mono {
  font-family: var(--dz-font-mono);
  font-size: 0.95em;
  font-feature-settings: "tnum";
}

/* ── Selection ───────────────────────────────────────────────── */

.dz-app ::selection {
  background: var(--dz-accent-100);
  color: var(--dz-text);
}

[data-dz-theme="dark"] .dz-app ::selection {
  background: rgba(12, 180, 226, 0.25);
  color: var(--dz-text);
}


/* ── ../a11y.css ── */
/**
 * Developmizer — Accessibility
 *
 * Focus management, motion preferences, screen reader utilities,
 * and high-contrast mode support. Targeting 100/100 a11y score.
 *
 * Focus strategy:
 *   :focus-visible   — keyboard-only focus ring (no ring on mouse click)
 *   --dz-ring        — consistent focus indicator across all interactive elements
 *   --dz-touch-min   — WCAG 2.5.5 minimum target size
 *
 * @package Developmizer
 */

/* ── Focus ring ────────────────────────────────────────────────── */

/*
 * :focus-visible shows a focus ring only for keyboard navigation,
 * not on mouse click. All interactive elements in .dz-app share
 * this consistent pattern.
 */
.dz-app :focus-visible {
  outline: 2px solid var(--dz-accent);
  outline-offset: 2px;
  box-shadow: var(--dz-ring);
  border-radius: var(--dz-radius-sm);
}

/* Remove default outline since we handle it above */
.dz-app :focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* Buttons and inputs get an inset ring variant */
.dz-app button:focus-visible,
.dz-app [role="button"]:focus-visible {
  outline-offset: 2px;
}

.dz-app input:focus-visible,
.dz-app select:focus-visible,
.dz-app textarea:focus-visible {
  outline-offset: 0;
  box-shadow: var(--dz-ring), var(--dz-shadow-xs);
}


/* ── Skip link ─────────────────────────────────────────────────── */

/*
 * Invisible until focused via keyboard Tab. Appears at the top of
 * the viewport so keyboard users can bypass navigation.
 */
.dz-app .dz-skip-link {
  position: fixed;
  inset-block-start: var(--dz-space-2);
  inset-inline-start: var(--dz-space-2);
  z-index: var(--dz-z-tooltip);
  padding-inline: var(--dz-space-4);
  padding-block: var(--dz-space-2);
  font-size: var(--dz-text-sm);
  font-weight: var(--dz-font-semibold);
  color: var(--dz-text-inverse);
  background-color: var(--dz-accent-800);
  border-radius: var(--dz-radius);
  transform: translateY(-200%);
  transition: transform var(--dz-duration) var(--dz-ease);
}

.dz-app .dz-skip-link:focus {
  transform: translateY(0);
  outline: 2px solid var(--dz-accent);
  outline-offset: 2px;
}


/* ── Screen reader only ────────────────────────────────────────── */

/*
 * Visually hidden but readable by screen readers.
 * Use for labels, descriptions, and announcements.
 */
.dz-app .dz-sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Allow the element to be visible again (e.g. skip link on focus) */
.dz-app .dz-sr-only-focusable:focus,
.dz-app .dz-sr-only-focusable:active {
  position: static;
  inline-size: auto;
  block-size: auto;
  padding: inherit;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
}


/* ── Reduced motion ────────────────────────────────────────────── */

/*
 * Respect user's OS-level motion preferences.
 * Collapses ALL transitions and animations to instant.
 */
@media (prefers-reduced-motion: reduce) {
  .dz-app *,
  .dz-app *::before,
  .dz-app *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ── Forced colors / high contrast mode ────────────────────────── */

/*
 * Windows High Contrast Mode support. Uses system colors
 * for borders, focus, and interactive elements.
 */
@media (forced-colors: active) {
  .dz-app :focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }

  .dz-app button,
  .dz-app [role="button"] {
    border: 1px solid ButtonText;
  }

  .dz-app input,
  .dz-app select,
  .dz-app textarea {
    border: 1px solid FieldText;
  }
}


/* ── Touch target enforcement ──────────────────────────────────── */

/*
 * WCAG 2.5.5: interactive elements must have at least 44×44px
 * touch target. Applied to common interactive element types.
 * Specific component CSS may further increase these.
 */
.dz-app a[href],
.dz-app button,
.dz-app [role="button"],
.dz-app [role="tab"],
.dz-app [role="menuitem"],
.dz-app [role="option"],
.dz-app summary {
  min-block-size: var(--dz-touch-min);
  min-inline-size: var(--dz-touch-min);
}

/* Reset min-size for inline links within prose text */
.dz-app .dz-prose a[href] {
  min-block-size: auto;
  min-inline-size: auto;
}


/* ── ARIA live region styling ──────────────────────────────────── */

/*
 * Live regions that announce dynamic content changes to
 * screen readers. Visually hidden by default.
 */
.dz-app [aria-live] {
  /* Screen readers will announce changes; no visual treatment needed */
}

.dz-app .dz-announce {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* ── Disabled state ────────────────────────────────────────────── */

.dz-app [aria-disabled="true"],
.dz-app [disabled] {
  cursor: not-allowed;
  opacity: 0.5;
  pointer-events: none;
}


/* ── Current page indicator ────────────────────────────────────── */

.dz-app [aria-current="page"] {
  font-weight: var(--dz-font-semibold);
}


/* ── ../layout.css ── */
/**
 * Developmizer — Layout
 *
 * Container widths, responsive grid, flexbox utilities, spacing.
 * Mobile-first breakpoints: sm 640, md 768, lg 1024, xl 1280, 2xl 1536.
 *
 * @package Developmizer
 */

/* ── Container ─────────────────────────────────────────────────── */

.dz-app .dz-container {
  inline-size: 100%;
  max-inline-size: var(--dz-content-max);
  margin-inline: auto;
  padding-inline: var(--dz-space-4);
}

.dz-app .dz-container--narrow {
  max-inline-size: var(--dz-content-narrow);
}

@media (min-width: 640px)  { .dz-app .dz-container { padding-inline: var(--dz-space-6); } }
@media (min-width: 1024px) { .dz-app .dz-container { padding-inline: var(--dz-space-8); } }


/* ── Grid ──────────────────────────────────────────────────────── */

.dz-app .dz-grid {
  display: grid;
  gap: var(--dz-space-4);
}

.dz-app .dz-grid--2 { grid-template-columns: repeat(1, 1fr); }
.dz-app .dz-grid--3 { grid-template-columns: repeat(1, 1fr); }
.dz-app .dz-grid--4 { grid-template-columns: repeat(1, 1fr); }

@media (min-width: 640px) {
  .dz-app .dz-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .dz-app .dz-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .dz-app .dz-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .dz-app .dz-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .dz-app .dz-grid--4 { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1280px) {
  .dz-app .dz-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Gap variants */
.dz-app .dz-gap-2 { gap: var(--dz-space-2); }
.dz-app .dz-gap-3 { gap: var(--dz-space-3); }
.dz-app .dz-gap-4 { gap: var(--dz-space-4); }
.dz-app .dz-gap-6 { gap: var(--dz-space-6); }
.dz-app .dz-gap-8 { gap: var(--dz-space-8); }


/* ── Flex ──────────────────────────────────────────────────────── */

.dz-app .dz-flex       { display: flex; }
.dz-app .dz-inline-flex { display: inline-flex; }

/* Direction */
.dz-app .dz-flex-row    { flex-direction: row; }
.dz-app .dz-flex-col    { flex-direction: column; }

/* Wrap */
.dz-app .dz-flex-wrap   { flex-wrap: wrap; }
.dz-app .dz-flex-nowrap { flex-wrap: nowrap; }

/* Alignment */
.dz-app .dz-items-start   { align-items: flex-start; }
.dz-app .dz-items-center  { align-items: center; }
.dz-app .dz-items-end     { align-items: flex-end; }
.dz-app .dz-items-stretch { align-items: stretch; }
.dz-app .dz-items-baseline { align-items: baseline; }

/* Justify */
.dz-app .dz-justify-start   { justify-content: flex-start; }
.dz-app .dz-justify-center  { justify-content: center; }
.dz-app .dz-justify-end     { justify-content: flex-end; }
.dz-app .dz-justify-between { justify-content: space-between; }

/* Common flex combos */
.dz-app .dz-flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dz-app .dz-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.dz-app .dz-flex-stack {
  display: flex;
  flex-direction: column;
}

/* Flex children */
.dz-app .dz-flex-1       { flex: 1 1 0%; }
.dz-app .dz-flex-auto     { flex: 1 1 auto; }
.dz-app .dz-flex-none     { flex: none; }
.dz-app .dz-flex-shrink-0 { flex-shrink: 0; }
.dz-app .dz-flex-grow     { flex-grow: 1; }


/* ── Spacing utilities ─────────────────────────────────────────── */

/* Stack: vertical spacing between children (owl selector) */
.dz-app .dz-stack-1 > * + * { margin-block-start: var(--dz-space-1); }
.dz-app .dz-stack-2 > * + * { margin-block-start: var(--dz-space-2); }
.dz-app .dz-stack-3 > * + * { margin-block-start: var(--dz-space-3); }
.dz-app .dz-stack-4 > * + * { margin-block-start: var(--dz-space-4); }
.dz-app .dz-stack-6 > * + * { margin-block-start: var(--dz-space-6); }
.dz-app .dz-stack-8 > * + * { margin-block-start: var(--dz-space-8); }

/* Padding shortcuts using logical properties */
.dz-app .dz-p-0  { padding: var(--dz-space-0); }
.dz-app .dz-p-2  { padding: var(--dz-space-2); }
.dz-app .dz-p-3  { padding: var(--dz-space-3); }
.dz-app .dz-p-4  { padding: var(--dz-space-4); }
.dz-app .dz-p-6  { padding: var(--dz-space-6); }
.dz-app .dz-p-8  { padding: var(--dz-space-8); }

.dz-app .dz-px-2  { padding-inline: var(--dz-space-2); }
.dz-app .dz-px-3  { padding-inline: var(--dz-space-3); }
.dz-app .dz-px-4  { padding-inline: var(--dz-space-4); }
.dz-app .dz-px-6  { padding-inline: var(--dz-space-6); }

.dz-app .dz-py-1  { padding-block: var(--dz-space-1); }
.dz-app .dz-py-2  { padding-block: var(--dz-space-2); }
.dz-app .dz-py-3  { padding-block: var(--dz-space-3); }
.dz-app .dz-py-4  { padding-block: var(--dz-space-4); }
.dz-app .dz-py-6  { padding-block: var(--dz-space-6); }


/* ── Display / Visibility ──────────────────────────────────────── */

.dz-app .dz-block        { display: block; }
.dz-app .dz-inline-block { display: inline-block; }
.dz-app .dz-hidden       { display: none; }

/* Responsive visibility */
@media (max-width: 767px)  { .dz-app .dz-hide-mobile  { display: none !important; } }
@media (max-width: 1023px) { .dz-app .dz-hide-tablet  { display: none !important; } }
@media (min-width: 768px)  { .dz-app .dz-show-mobile  { display: none !important; } }
@media (min-width: 1024px) { .dz-app .dz-show-tablet  { display: none !important; } }


/* ── Overflow ──────────────────────────────────────────────────── */

.dz-app .dz-overflow-hidden  { overflow: hidden; }
.dz-app .dz-overflow-auto    { overflow: auto; }
.dz-app .dz-overflow-x-auto  { overflow-x: auto; }
.dz-app .dz-overflow-y-auto  { overflow-y: auto; }


/* ── Position ──────────────────────────────────────────────────── */

.dz-app .dz-relative { position: relative; }
.dz-app .dz-absolute { position: absolute; }
.dz-app .dz-fixed    { position: fixed; }
.dz-app .dz-sticky   { position: sticky; inset-block-start: 0; }


/* ── Width / Height ────────────────────────────────────────────── */

.dz-app .dz-w-full  { inline-size: 100%; }
.dz-app .dz-h-full  { block-size: 100%; }
.dz-app .dz-min-h-screen { min-block-size: 100vh; }
.dz-app .dz-min-h-screen { min-block-size: 100dvh; } /* dynamic viewport */


/* ── Divider ───────────────────────────────────────────────────── */

.dz-app .dz-divider {
  border: none;
  border-block-start: 1px solid var(--dz-border);
  margin-block: var(--dz-space-4);
}

.dz-app .dz-divider--subtle {
  border-color: var(--dz-bg-muted);
}


/* ── Page layout ──────────────────────────────────────────────── */

/*
 * v0.8.3 FIX (pre-existing bug made visible by Cartograph): the admin
 * sidebar is position:fixed at inset-inline-start:0 with width 240px,
 * but nothing was offsetting the main content area. On pages with
 * prominent text (like the Fraunces hello hero), the sidebar visibly
 * covered the first 240px of page content.
 *
 * Fix: offset .dz-main-wrap by the sidebar width on desktop (≥1024px,
 * matching the sidebar.css breakpoint where sidebar stops being mobile
 * overlay and becomes a persistent rail). Below 1024px, sidebar becomes
 * an overlay (via transform:translateX(-100%)) so no offset is needed.
 */
.dz-app.dz-admin .dz-main-wrap {
  min-block-size: 100vh;
}

@media (min-width: 1024px) {
  .dz-app.dz-admin .dz-main-wrap {
    margin-inline-start: var(--dz-sidebar-width);
  }
}

/* v0.9.2: at ≥1280px on hover-capable devices, the sidebar is an icon
   rail that expands on hover WITHOUT reflowing content. Main-wrap
   offsets by the rail width only; expanded sidebar layers OVER content
   via z-index. The box-shadow from the hover state visually separates
   the expanded rail from the covered content underneath. */
@media (min-width: 1280px) and (hover: hover) {
  .dz-app.dz-admin .dz-main-wrap {
    margin-inline-start: var(--dz-sidebar-collapsed);
  }
}

.dz-app .dz-page {
  padding: var(--dz-space-6);
  max-inline-size: 1200px;
}

.dz-app .dz-page-header {
  margin-block-end: var(--dz-space-6);
}

.dz-app .dz-page-title {
  font-size: var(--dz-text-xl);
  font-weight: var(--dz-font-bold);
  color: var(--dz-text);
  margin: 0;
}

.dz-app .dz-page-desc {
  font-size: var(--dz-text-sm);
  color: var(--dz-text-secondary);
  margin-block-start: var(--dz-space-1);
}

@media (max-width: 639px) {
  .dz-app .dz-page {
    padding: var(--dz-space-4);
  }
}


/* Components used on public landing */
/* ── ../components/buttons.css ── */
/**
 * Developmizer — Buttons
 *
 * .dz-btn base + variant modifiers. All buttons meet WCAG 2.5.5
 * touch target (44px minimum). :focus-visible rings added in v0.8.5
 * (originally claimed in the docblock from v0.7.x but not implemented
 * until the audit caught it). Focus rules are ALSO inlined in the
 * admin.css bundle because @import caching made the component-file
 * rules unreliable across releases.
 *
 * Variants: --primary, --secondary, --ghost, --danger, --icon
 * Sizes:    --sm, (default), --lg
 *
 * @package Developmizer
 */

.dz-app .dz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dz-space-2);
  min-block-size: var(--dz-touch-min);
  padding-inline: var(--dz-space-4);
  padding-block: var(--dz-space-2-5);
  font-family: var(--dz-font-sans);
  font-size: var(--dz-text-sm);
  font-weight: var(--dz-font-medium);
  line-height: var(--dz-leading-tight);
  white-space: nowrap;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--dz-radius-md);
  cursor: pointer;
  user-select: none;
  transition:
    background-color var(--dz-transition),
    border-color var(--dz-transition),
    color var(--dz-transition),
    box-shadow var(--dz-transition),
    opacity var(--dz-transition);
}

.dz-app .dz-btn:disabled,
.dz-app .dz-btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.5;
  pointer-events: none;
}

/* Icon inside button */
.dz-app .dz-btn svg,
.dz-app .dz-btn .dz-btn-icon {
  inline-size: 1em;
  block-size: 1em;
  flex-shrink: 0;
}

/* v0.8.5: WCAG 2.1 AA focus-visible. Keyboard focus indicator for
   the base button. Per-variant overrides below. */
.dz-app .dz-btn:focus-visible {
  outline: none;
  box-shadow: var(--dz-ring);
  position: relative;
  z-index: 1;
}


/* ── Primary ───────────────────────────────────────────────────── */

.dz-app .dz-btn--primary {
  color: var(--dz-text-inverse);
  background-color: var(--dz-accent);
  border-color: var(--dz-accent);
}

.dz-app .dz-btn--primary:hover {
  background-color: var(--dz-accent-hover);
  border-color: var(--dz-accent-hover);
}

.dz-app .dz-btn--primary:active {
  background-color: var(--dz-accent-active);
  border-color: var(--dz-accent-active);
}


/* ── Secondary ─────────────────────────────────────────────────── */

.dz-app .dz-btn--secondary {
  color: var(--dz-text);
  background-color: var(--dz-bg);
  border-color: var(--dz-border-strong);
}

.dz-app .dz-btn--secondary:hover {
  background-color: var(--dz-bg-subtle);
  border-color: var(--dz-gray-400);
}

.dz-app .dz-btn--secondary:active {
  background-color: var(--dz-bg-muted);
}


/* ── Ghost ─────────────────────────────────────────────────────── */

.dz-app .dz-btn--ghost {
  color: var(--dz-text-secondary);
  background-color: transparent;
}

.dz-app .dz-btn--ghost:hover {
  color: var(--dz-text);
  background-color: var(--dz-bg-muted);
}

.dz-app .dz-btn--ghost:active {
  background-color: var(--dz-border);
}


/* ── Danger ────────────────────────────────────────────────────── */

.dz-app .dz-btn--danger {
  color: var(--dz-text-inverse);
  background-color: var(--dz-danger);
  border-color: var(--dz-danger);
}

.dz-app .dz-btn--danger:hover {
  background-color: var(--dz-danger-700);
  border-color: var(--dz-danger-700);
}


/* ── Icon-only ─────────────────────────────────────────────────── */

.dz-app .dz-btn--icon {
  padding-inline: var(--dz-space-2-5);
  inline-size: var(--dz-touch-min);
  color: var(--dz-text-muted);
  background-color: transparent;
}

.dz-app .dz-btn--icon:hover {
  color: var(--dz-text);
  background-color: var(--dz-bg-muted);
}

.dz-app .dz-btn--icon svg {
  inline-size: 1.125rem;
  block-size: 1.125rem;
}


/* ── Sizes ─────────────────────────────────────────────────────── */

.dz-app .dz-btn--sm {
  min-block-size: 32px;
  padding-inline: var(--dz-space-3);
  padding-block: var(--dz-space-1-5);
  font-size: var(--dz-text-xs);
  border-radius: var(--dz-radius);
}

.dz-app .dz-btn--lg {
  min-block-size: 48px;
  padding-inline: var(--dz-space-6);
  padding-block: var(--dz-space-3);
  font-size: var(--dz-text-md);
  border-radius: var(--dz-radius-lg);
}


/* ── Loading state ─────────────────────────────────────────────── */

.dz-app .dz-btn--loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.dz-app .dz-btn--loading::after {
  content: '';
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 1em;
  block-size: 1em;
  margin-block-start: -0.5em;
  margin-inline-start: -0.5em;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: var(--dz-radius-full);
  animation: dz-btn-spin 0.6s linear infinite;
  opacity: 0.7;
  /* Restore color for spinner */
  color: var(--dz-text-inverse);
}

.dz-app .dz-btn--secondary.dz-btn--loading::after,
.dz-app .dz-btn--ghost.dz-btn--loading::after {
  color: var(--dz-text-muted);
}

@keyframes dz-btn-spin {
  to { transform: rotate(360deg); }
}


/* ── Focus-visible per-variant overrides (v0.8.5) ──────────────── */

/* Danger: red ring instead of accent blue */
.dz-app .dz-btn--danger:focus-visible {
  box-shadow: var(--dz-ring-danger);
}

/* Primary: inner surface gap + outer accent ring, so the ring is
   visible against the accent-colored button background */
.dz-app .dz-btn--primary:focus-visible {
  box-shadow:
    0 0 0 2px var(--dz-surface),
    0 0 0 4px var(--dz-accent);
}

[data-dz-theme="dark"] .dz-app .dz-btn--primary:focus-visible {
  box-shadow:
    0 0 0 2px var(--dz-bg),
    0 0 0 4px var(--dz-accent);
}


/* ── ../components/cards.css ── */
/**
 * Developmizer — Cards
 *
 * .dz-card base + variants. Used for content grouping across
 * all surfaces — project cards, client cards, stat cards, etc.
 *
 * @package Developmizer
 */

.dz-app .dz-card {
  position: relative;
  background-color: var(--dz-surface);
  border: 1px solid var(--dz-border);
  border-radius: var(--dz-radius-lg);
  overflow: hidden;
  /* Cartograph: subtle paper-on-paper shadow even at rest — gives cards
     a "laid on top" feel without heavy drop shadows. */
  box-shadow: var(--dz-shadow-xs);
}

.dz-app .dz-card--raised {
  background-color: var(--dz-surface-raised);
  box-shadow: var(--dz-shadow-sm);
  border-color: var(--dz-border);
}

.dz-app .dz-card--interactive {
  cursor: pointer;
  transition: box-shadow var(--dz-transition), border-color var(--dz-transition);
}

.dz-app .dz-card--interactive:hover {
  border-color: var(--dz-border-strong);
  box-shadow: var(--dz-shadow-md);
}

.dz-app .dz-card--interactive:active {
  box-shadow: var(--dz-shadow-xs);
}

/* Card sections */
.dz-app .dz-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dz-space-3);
  padding-inline: var(--dz-space-5);
  padding-block: var(--dz-space-4);
  border-block-end: 1px solid var(--dz-border);
}

.dz-app .dz-card-body {
  padding: var(--dz-space-5);
}

.dz-app .dz-card-footer {
  display: flex;
  align-items: center;
  gap: var(--dz-space-3);
  padding-inline: var(--dz-space-5);
  padding-block: var(--dz-space-3);
  border-block-start: 1px solid var(--dz-border);
  background-color: var(--dz-bg-subtle);
}

/* Compact card (for tight lists) */
.dz-app .dz-card--compact .dz-card-header,
.dz-app .dz-card--compact .dz-card-body,
.dz-app .dz-card--compact .dz-card-footer {
  padding-inline: var(--dz-space-4);
  padding-block: var(--dz-space-3);
}

/* Card title */
.dz-app .dz-card-title {
  font-family: var(--dz-font-display);
  font-size: var(--dz-text-lg);
  font-weight: var(--dz-font-semibold);
  color: var(--dz-text);
  line-height: var(--dz-leading-tight);
  letter-spacing: var(--dz-tracking-tight);
  font-variation-settings: "opsz" 48;
}

.dz-app .dz-card-desc {
  font-size: var(--dz-text-sm);
  color: var(--dz-text-secondary);
  margin-block-start: var(--dz-space-1);
}

/* Accent top border variant */
.dz-app .dz-card--accent {
  border-block-start: 3px solid var(--dz-accent);
}


/* ── ../components/alerts.css ── */
/**
 * Developmizer — Alerts
 *
 * .dz-alert — info, success, warning, error notification banners.
 * Dismissible with close button. Icon slot on the inline-start side.
 *
 * @package Developmizer
 */

.dz-app .dz-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--dz-space-3);
  padding: var(--dz-space-4);
  font-size: var(--dz-text-sm);
  line-height: var(--dz-leading-relaxed);
  border: 1px solid transparent;
  border-radius: var(--dz-radius-lg);
  border-inline-start-width: 4px;
}

.dz-app .dz-alert-icon {
  flex-shrink: 0;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin-block-start: 1px;
}

.dz-app .dz-alert-content {
  flex: 1;
  min-inline-size: 0;
}

.dz-app .dz-alert-title {
  font-weight: var(--dz-font-semibold);
  margin-block-end: var(--dz-space-1);
}

.dz-app .dz-alert-close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  min-block-size: auto;
  min-inline-size: auto;
  color: inherit;
  opacity: 0.5;
  border-radius: var(--dz-radius-sm);
  transition: opacity var(--dz-transition);
}

.dz-app .dz-alert-close:hover { opacity: 1; }

/* ── Variants ──────────────────────────────────────────────────── */

.dz-app .dz-alert--info {
  color: var(--dz-info-700);
  background-color: var(--dz-info-50);
  border-color: var(--dz-info-100);
  border-inline-start-color: var(--dz-info);
}

.dz-app .dz-alert--success {
  color: var(--dz-success-700);
  background-color: var(--dz-success-50);
  border-color: var(--dz-success-100);
  border-inline-start-color: var(--dz-success);
}

.dz-app .dz-alert--warning {
  color: var(--dz-warning-700);
  background-color: var(--dz-warning-50);
  border-color: var(--dz-warning-100);
  border-inline-start-color: var(--dz-warning);
}

.dz-app .dz-alert--error {
  color: var(--dz-danger-700);
  background-color: var(--dz-danger-50);
  border-color: var(--dz-danger-100);
  border-inline-start-color: var(--dz-danger);
}

/* Dark mode overrides */
[data-dz-theme="dark"] .dz-app .dz-alert--info    { color: var(--dz-info);    background-color: var(--dz-info-light); }
[data-dz-theme="dark"] .dz-app .dz-alert--success { color: var(--dz-success); background-color: var(--dz-success-light); }
[data-dz-theme="dark"] .dz-app .dz-alert--warning { color: var(--dz-warning); background-color: var(--dz-warning-light); }
[data-dz-theme="dark"] .dz-app .dz-alert--error   { color: var(--dz-danger);  background-color: var(--dz-danger-light); }


/* ── ../components/forms.css ── */
/**
 * Developmizer — Forms
 *
 * Complete form element system. Every input has accessible focus states,
 * error states, and meets WCAG 2.5.5 touch target minimums.
 *
 * @package Developmizer
 */

/* ── Label ─────────────────────────────────────────────────────── */

.dz-app .dz-label {
  display: block;
  font-size: var(--dz-text-sm);
  font-weight: var(--dz-font-medium);
  color: var(--dz-text);
  margin-block-end: var(--dz-space-1-5);
}

.dz-app .dz-label--required::after {
  content: ' *';
  color: var(--dz-danger);
}

/* ── Field group ───────────────────────────────────────────────── */

.dz-app .dz-field {
  margin-block-end: var(--dz-space-5);
}

.dz-app .dz-field-hint {
  font-size: var(--dz-text-xs);
  color: var(--dz-text-muted);
  margin-block-start: var(--dz-space-1-5);
}

.dz-app .dz-field-error {
  font-size: var(--dz-text-xs);
  color: var(--dz-danger);
  margin-block-start: var(--dz-space-1-5);
}

/* ── Text input / Select / Textarea shared ─────────────────────── */

.dz-app .dz-input,
.dz-app .dz-select,
.dz-app .dz-textarea {
  display: block;
  inline-size: 100%;
  min-block-size: var(--dz-touch-min);
  padding-inline: var(--dz-space-3);
  padding-block: var(--dz-space-2-5);
  font-family: var(--dz-font-sans);
  font-size: var(--dz-text-sm);
  line-height: var(--dz-leading-normal);
  color: var(--dz-text);
  background-color: var(--dz-bg);
  border: 1px solid var(--dz-border-strong);
  border-radius: var(--dz-radius-md);
  transition:
    border-color var(--dz-transition),
    box-shadow var(--dz-transition),
    background-color var(--dz-transition);
}

.dz-app .dz-input::placeholder,
.dz-app .dz-textarea::placeholder {
  color: var(--dz-text-subtle);
}

.dz-app .dz-input:hover,
.dz-app .dz-select:hover,
.dz-app .dz-textarea:hover {
  border-color: var(--dz-gray-400);
}

.dz-app .dz-input:focus,
.dz-app .dz-select:focus,
.dz-app .dz-textarea:focus {
  border-color: var(--dz-accent);
  box-shadow: var(--dz-ring);
  outline: none;
}

/* Error state */
.dz-app .dz-input--error,
.dz-app .dz-select--error,
.dz-app .dz-textarea--error {
  border-color: var(--dz-danger);
}

.dz-app .dz-input--error:focus,
.dz-app .dz-select--error:focus,
.dz-app .dz-textarea--error:focus {
  box-shadow: var(--dz-ring-danger);
}

/* Disabled */
.dz-app .dz-input:disabled,
.dz-app .dz-select:disabled,
.dz-app .dz-textarea:disabled {
  background-color: var(--dz-bg-muted);
  cursor: not-allowed;
  opacity: 0.6;
}

/* ── Select ────────────────────────────────────────────────────── */

.dz-app .dz-select {
  padding-inline-end: var(--dz-space-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--dz-space-3) center;
  background-size: 1rem;
  appearance: none;
}

[dir="rtl"] .dz-app .dz-select {
  background-position: left var(--dz-space-3) center;
}

/* ── Textarea ──────────────────────────────────────────────────── */

.dz-app .dz-textarea {
  min-block-size: 80px;
  resize: vertical;
}

/* ── Input with icon / addon ───────────────────────────────────── */

.dz-app .dz-input-group {
  position: relative;
  display: flex;
  align-items: stretch;
}

.dz-app .dz-input-group .dz-input {
  flex: 1;
}

.dz-app .dz-input-icon {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: var(--dz-space-3);
  transform: translateY(-50%);
  inline-size: 1.125rem;
  block-size: 1.125rem;
  color: var(--dz-text-muted);
  pointer-events: none;
}

.dz-app .dz-input-group--icon-start .dz-input {
  padding-inline-start: var(--dz-space-10);
}

/* ── Checkbox / Radio ──────────────────────────────────────────── */

.dz-app .dz-check-group {
  display: flex;
  align-items: flex-start;
  gap: var(--dz-space-2);
  min-block-size: var(--dz-touch-min);
  padding-block: var(--dz-space-2);
  cursor: pointer;
}

.dz-app .dz-checkbox,
.dz-app .dz-radio {
  flex-shrink: 0;
  inline-size: 1.125rem;
  block-size: 1.125rem;
  margin-block-start: 1px;
  border: 2px solid var(--dz-border-strong);
  background-color: var(--dz-bg);
  transition: border-color var(--dz-transition), background-color var(--dz-transition), box-shadow var(--dz-transition);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.dz-app .dz-checkbox { border-radius: var(--dz-radius-xs); }
.dz-app .dz-radio    { border-radius: var(--dz-radius-full); }

.dz-app .dz-checkbox:hover,
.dz-app .dz-radio:hover {
  border-color: var(--dz-accent);
}

.dz-app .dz-checkbox:checked,
.dz-app .dz-radio:checked {
  border-color: var(--dz-accent);
  background-color: var(--dz-accent);
}

.dz-app .dz-checkbox:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E");
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.dz-app .dz-radio:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3' fill='white'/%3E%3C/svg%3E");
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.dz-app .dz-checkbox:focus-visible,
.dz-app .dz-radio:focus-visible {
  box-shadow: var(--dz-ring);
}

.dz-app .dz-check-label {
  font-size: var(--dz-text-sm);
  color: var(--dz-text);
  line-height: var(--dz-leading-normal);
}

/* ── Toggle / Switch ───────────────────────────────────────────── */

.dz-app .dz-toggle {
  position: relative;
  inline-size: 36px;
  block-size: 20px;
  flex-shrink: 0;
  background-color: var(--dz-gray-300);
  border-radius: var(--dz-radius-full);
  border: none;
  cursor: pointer;
  transition: background-color var(--dz-transition);
  appearance: none;
  -webkit-appearance: none;
}

.dz-app .dz-toggle::after {
  content: '';
  position: absolute;
  inset-block-start: 2px;
  inset-inline-start: 2px;
  inline-size: 16px;
  block-size: 16px;
  background-color: white;
  border-radius: var(--dz-radius-full);
  box-shadow: var(--dz-shadow-sm);
  transition: transform var(--dz-transition);
}

.dz-app .dz-toggle:checked {
  background-color: var(--dz-accent);
}

.dz-app .dz-toggle:checked::after {
  transform: translateX(16px);
}

[dir="rtl"] .dz-app .dz-toggle:checked::after {
  transform: translateX(-16px);
}

.dz-app .dz-toggle:focus-visible {
  box-shadow: var(--dz-ring);
}


/* ── Dark mode overrides ───────────────────────────────────────── */

[data-dz-theme="dark"] .dz-app .dz-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

[data-dz-theme="dark"] .dz-app .dz-toggle {
  background-color: var(--dz-gray-600);
}

[data-dz-theme="dark"] .dz-app .dz-checkbox,
[data-dz-theme="dark"] .dz-app .dz-radio {
  border-color: var(--dz-gray-600);
}

/* ── Form layout ──────────────────────────────────────────────── */

.dz-app .dz-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--dz-space-1-5);
}

.dz-app .dz-form-label {
  font-size: var(--dz-text-sm);
  font-weight: var(--dz-font-medium);
  color: var(--dz-text);
}

.dz-app .dz-form-hint {
  font-size: var(--dz-text-xs);
  color: var(--dz-text-muted);
  line-height: var(--dz-leading-relaxed);
}

.dz-app .dz-toggle-wrap {
  display: flex;
  align-items: center;
  gap: var(--dz-space-3);
  font-size: var(--dz-text-sm);
  cursor: pointer;
}


/* ── ../components/spinners.css ── */
/**
 * Developmizer — Spinners
 *
 * Loading indicators. Accessible via role="status" + sr-only text.
 * Three sizes: --sm (16px), default (24px), --lg (36px).
 *
 * Usage:
 *   <div class="dz-spinner" role="status">
 *     <span class="dz-sr-only">Loading…</span>
 *   </div>
 *
 * @package Developmizer
 */

.dz-app .dz-spinner {
  display: inline-block;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  border: 2.5px solid var(--dz-border-strong);
  border-block-start-color: var(--dz-accent);
  border-radius: var(--dz-radius-full);
  animation: dz-spin 0.7s linear infinite;
  flex-shrink: 0;
}

.dz-app .dz-spinner--sm {
  inline-size: 1rem;
  block-size: 1rem;
  border-width: 2px;
}

.dz-app .dz-spinner--lg {
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-width: 3px;
}

@keyframes dz-spin {
  to { transform: rotate(360deg); }
}

/* ── Page-level loading overlay ────────────────────────────────── */

.dz-app .dz-loading-overlay {
  position: absolute;
  inset: 0;
  z-index: var(--dz-z-overlay);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--dz-space-3);
  background-color: var(--dz-overlay);
  border-radius: inherit;
}

.dz-app .dz-loading-overlay .dz-spinner {
  border-block-start-color: var(--dz-text-inverse);
  border-color: rgba(255, 255, 255, 0.3);
}

/* ── Skeleton loading ──────────────────────────────────────────── */

.dz-app .dz-skeleton {
  display: block;
  background: linear-gradient(
    90deg,
    var(--dz-bg-muted) 25%,
    var(--dz-bg-subtle) 50%,
    var(--dz-bg-muted) 75%
  );
  background-size: 200% 100%;
  animation: dz-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--dz-radius);
}

.dz-app .dz-skeleton--text  { block-size: 0.875rem; inline-size: 80%; }
.dz-app .dz-skeleton--title { block-size: 1.25rem; inline-size: 60%; }
.dz-app .dz-skeleton--avatar {
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: var(--dz-radius-full);
}
.dz-app .dz-skeleton--card {
  block-size: 120px;
  inline-size: 100%;
}

@keyframes dz-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}