/**
 * master.css — Shared design tokens and UI primitives (frontend + backend).
 */

@layer retro-ref, retro-sys, retro-base, retro-states, retro-utilities, retro-components, retro-legacy;

@layer retro-ref, retro-sys, retro-base, retro-states, retro-utilities, retro-components, retro-legacy, retro-context-wp, retro-overrides;

@layer retro-ref {
    .retro-root {
        /*
         * Renk paleti — 6 durak (deep → faint).
         * brand = tek marka rengi (warm brown). secondary paleti yok — ikilik önlenir.
         * note/caution/danger/ok yalnızca durum (alert, validation) içindir.
         * Scoped to .retro-root so wp-admin chrome is not themed globally.
         */

        --retro-ref-brand-deep:  #2a1f14;
        --retro-ref-brand-dark:  #5c4a32;
        --retro-ref-brand-base:  #c3a07a;
        --retro-ref-brand-mid:   #7f6044;
        --retro-ref-brand-soft:  #ddc8a8;
        --retro-ref-brand-faint: #f8f5f2;

        --retro-ref-ink-deep:  #212121;
        --retro-ref-ink-dark:  #424242;
        --retro-ref-ink-base:  #666666;
        --retro-ref-ink-mid:   #e0e0e0;
        --retro-ref-ink-soft:  #f5f5f5;
        --retro-ref-ink-faint: #ffffff;

        --retro-ref-danger-deep:  #8c1d18;
        --retro-ref-danger-dark:  #601410;
        --retro-ref-danger-base:  #e74c3c;
        --retro-ref-danger-mid:   #dc362e;
        --retro-ref-danger-soft:  #fef2f2;
        --retro-ref-danger-faint: #fffbfb;

        --retro-ref-ok-deep:  #166534;
        --retro-ref-ok-dark:  #14532d;
        --retro-ref-ok-base:  #1ebc57;
        --retro-ref-ok-mid:   #22c55e;
        --retro-ref-ok-soft:  #ecfdf3;
        --retro-ref-ok-faint: #f7fef9;

        --retro-ref-caution-deep:  #92400e;
        --retro-ref-caution-dark:  #78350f;
        --retro-ref-caution-base:  #f59e0b;
        --retro-ref-caution-mid:   #eab308;
        --retro-ref-caution-soft:  #fffbeb;
        --retro-ref-caution-faint: #fffef8;

        --retro-ref-note-deep:  #1e3a5f;
        --retro-ref-note-dark:  #2c5282;
        --retro-ref-note-base:  #5f7f9e;
        --retro-ref-note-mid:   #7a9bb8;
        --retro-ref-note-soft:  #eef3f7;
        --retro-ref-note-faint: #f8fafb;

        --retro-ref-typeface-sans:   "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
        --retro-ref-typeface-serif:  "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

        --retro-ref-scale-10: 10px;
        --retro-ref-scale-11: 11px;
        --retro-ref-scale-12: 12px;
        --retro-ref-scale-13: 13px;
        --retro-ref-scale-14: 14px;
        --retro-ref-scale-15: 15px;
        --retro-ref-scale-16: 16px;
        --retro-ref-scale-18: 18px;
        --retro-ref-scale-20: 20px;
        --retro-ref-scale-22: 22px;
        --retro-ref-scale-24: 24px;

        --retro-ref-motion-easing-standard:   cubic-bezier(0.4, 0, 0.2, 1);
        --retro-ref-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
        --retro-ref-motion-duration-short:    150ms;
        --retro-ref-motion-duration-medium:   200ms;
        --retro-ref-motion-duration-long:     300ms;

        --retro-ref-interaction-hover-y:     -1px;
        --retro-ref-interaction-hover-scale: 1.02;
        --retro-ref-interaction-active-y:    0;
        --retro-ref-interaction-active-scale: 0.98;

        --retro-ref-elevation-1:    0 1px 2px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08);
        --retro-ref-elevation-2:    0 2px 4px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08);
        --retro-ref-elevation-3:    0 4px 8px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.08);
        --retro-ref-elevation-modal: 0 20px 50px rgba(0, 0, 0, 0.20);

        --retro-ref-shape-none: 0px;
        --retro-ref-shape-sm:   4px;
        --retro-ref-shape-md:   8px;
        --retro-ref-shape-lg:   12px;
        --retro-ref-shape-pill: 9999px;

        --retro-ref-z-sticky:   100;
        --retro-ref-z-sidebar:  200;
        --retro-ref-z-dropdown: 9000;
        --retro-ref-z-modal:    9100;
        --retro-ref-z-toast:    9200;
        --retro-ref-z-tooltip:  9300;
        --retro-ref-z-loading:  9400;

        --retro-ref-layout-max-width: 1240px;
        --retro-ref-spacing-unit:     4px;
    }
}

@layer retro-sys {
    .retro-root {
        /* Brand — ref defaults; theme_tokens() may override at runtime */
		--retro-sys-color-brand:            var(--retro-ref-brand-base);
        --retro-sys-color-brand-contrast:   var(--retro-ref-ink-faint);
        --retro-sys-color-brand-muted:      var(--retro-ref-brand-faint);
        --retro-sys-color-brand-muted-text: var(--retro-ref-brand-mid);
        --retro-sys-color-brand-hover:      var(--retro-ref-brand-mid);
        /* Readable ink on light surfaces (outlined / tonal text) — not the decorative brand fill */
        --retro-sys-color-brand-ink:        var(--retro-ref-brand-dark);
        --retro-sys-color-selection:        var(--retro-sys-color-brand);
        --retro-sys-color-menu-title:       var(--retro-sys-color-brand-muted-text);
        --retro-sys-color-nav-text:         var(--retro-sys-color-brand-ink);
        --retro-sys-color-accent:           var(--retro-sys-color-brand);
        --retro-sys-color-primary-hover:    var(--retro-sys-color-brand-hover);

        /* Surface / ink — ref defaults (theme may override surface*) */
        --retro-sys-color-surface:                  var(--retro-ref-ink-faint);
        --retro-sys-color-surface-dim:              var(--retro-ref-ink-soft);
        --retro-sys-color-surface-bright:           var(--retro-ref-ink-faint);
        --retro-sys-color-surface-variant:          var(--retro-ref-ink-soft);
        --retro-sys-color-on-surface:               var(--retro-ref-ink-deep);
        --retro-sys-color-on-surface-variant:       var(--retro-ref-ink-base);
        --retro-sys-color-surface-container-lowest: var(--retro-sys-color-surface);
        --retro-sys-color-surface-container-low:    var(--retro-sys-color-surface-variant);
        --retro-sys-color-surface-container:        var(--retro-sys-color-surface-variant);
        --retro-sys-color-surface-container-high:    color-mix(in srgb, var(--retro-sys-color-on-surface) 8%, var(--retro-sys-color-surface));
        --retro-sys-color-surface-container-highest: color-mix(in srgb, var(--retro-sys-color-on-surface) 14%, var(--retro-sys-color-surface));

        --retro-sys-color-bg:               var(--retro-sys-color-surface);
        --retro-sys-color-bg-subtle:        var(--retro-sys-color-surface-variant);
        --retro-sys-color-bg-sunken:        var(--retro-sys-color-surface-dim);
        --retro-sys-color-text:             var(--retro-sys-color-on-surface);
        --retro-sys-color-text-muted:       var(--retro-sys-color-on-surface-variant);
        --retro-sys-color-border:           var(--retro-ref-ink-mid);
        --retro-sys-color-border-subtle:    var(--retro-ref-ink-mid);
        --retro-sys-color-outline:          var(--retro-sys-color-border);
        --retro-sys-color-outline-variant:  var(--retro-sys-color-border-subtle);

        /* Status — map to ref palette (report gauges: ok / low=danger / high=note) */
        --retro-sys-color-danger:              var(--retro-ref-danger-mid);
        --retro-sys-color-danger-contrast:     var(--retro-ref-ink-faint);
        --retro-sys-color-danger-muted:        var(--retro-ref-danger-soft);
        --retro-sys-color-danger-muted-text:   var(--retro-ref-danger-deep);
        --retro-sys-color-danger-soft:         var(--retro-ref-danger-soft);
        --retro-sys-color-danger-mid:          var(--retro-ref-danger-mid);
        --retro-sys-color-danger-dark:         var(--retro-ref-danger-dark);

        --retro-sys-color-ok:                  var(--retro-ref-ok-mid);
        --retro-sys-color-ok-contrast:         var(--retro-ref-ink-faint);
        --retro-sys-color-ok-muted:            var(--retro-ref-ok-soft);
        --retro-sys-color-ok-muted-text:       var(--retro-ref-ok-deep);
        --retro-sys-color-ok-soft:             var(--retro-ref-ok-soft);
        --retro-sys-color-ok-mid:              var(--retro-ref-ok-mid);
        --retro-sys-color-ok-dark:             var(--retro-ref-ok-dark);

        --retro-sys-color-caution:             var(--retro-ref-caution-base);
        --retro-sys-color-caution-contrast:    var(--retro-ref-ink-deep);
        --retro-sys-color-caution-muted:       var(--retro-ref-caution-soft);
        --retro-sys-color-caution-muted-text:  var(--retro-ref-caution-deep);
        --retro-sys-color-caution-soft:        var(--retro-ref-caution-soft);
        --retro-sys-color-caution-mid:         var(--retro-ref-caution-mid);
        --retro-sys-color-caution-dark:        var(--retro-ref-caution-dark);

        --retro-sys-color-note:                var(--retro-ref-note-mid);
        --retro-sys-color-note-contrast:       var(--retro-ref-ink-faint);
        --retro-sys-color-note-muted:          var(--retro-ref-note-soft);
        --retro-sys-color-note-muted-text:     var(--retro-ref-note-deep);
        --retro-sys-color-note-soft:           var(--retro-ref-note-soft);
        --retro-sys-color-note-mid:            var(--retro-ref-note-mid);
        --retro-sys-color-note-dark:           var(--retro-ref-note-dark);

        --retro-sys-color-inverse-bg:     var(--retro-ref-ink-deep);
        --retro-sys-color-inverse-text:   var(--retro-ref-ink-soft);
        --retro-sys-color-inverse-brand:  var(--retro-ref-brand-soft);

        --retro-sys-color-report-bar-bg:     color-mix(in srgb, var(--retro-ref-ink-deep) 93%, transparent);
        --retro-sys-color-report-bar-text:   var(--retro-ref-ink-soft);
        --retro-sys-color-report-btn-bg:     var(--retro-ref-brand-dark);
        --retro-sys-color-report-btn-hover:  var(--retro-ref-brand-mid);
        --retro-sys-color-report-btn-disabled: var(--retro-ref-ink-base);

        --retro-sys-color-secondary:                var(--retro-sys-color-text-muted);
        --retro-sys-color-on-secondary:             var(--retro-sys-color-bg);
        --retro-sys-color-secondary-container:      var(--retro-sys-color-bg-subtle);
        --retro-sys-color-on-secondary-container:   var(--retro-sys-color-text);

        --retro-sys-color-error:                    var(--retro-sys-color-danger);
        --retro-sys-color-on-error:                 var(--retro-sys-color-danger-contrast);
        --retro-sys-color-error-container:          var(--retro-sys-color-danger-muted);
        --retro-sys-color-on-error-container:       var(--retro-sys-color-danger-muted-text);

        --retro-sys-color-success:                  var(--retro-sys-color-ok);
        --retro-sys-color-on-success:               var(--retro-sys-color-ok-contrast);
        --retro-sys-color-success-container:        var(--retro-sys-color-ok-muted);
        --retro-sys-color-on-success-container:     var(--retro-sys-color-ok-muted-text);

        --retro-sys-color-warning:                  var(--retro-sys-color-caution);
        --retro-sys-color-on-warning:               var(--retro-sys-color-caution-contrast);
        --retro-sys-color-warning-container:        var(--retro-sys-color-caution-muted);
        --retro-sys-color-on-warning-container:     var(--retro-sys-color-caution-muted-text);

        --retro-sys-color-info:                     var(--retro-sys-color-note);
        --retro-sys-color-on-info:                  var(--retro-sys-color-note-contrast);
        --retro-sys-color-info-container:           var(--retro-sys-color-note-muted);
        --retro-sys-color-on-info-container:        var(--retro-sys-color-note-muted-text);

        --retro-sys-color-inverse-surface:          var(--retro-sys-color-inverse-bg);
        --retro-sys-color-on-inverse-surface:       var(--retro-sys-color-inverse-text);
        --retro-sys-color-inverse-primary:          var(--retro-sys-color-inverse-brand);

        --retro-sys-color-scrim:                    rgba(0, 0, 0, 0.45);
        --retro-sys-color-shadow:                   rgba(0, 0, 0, 0.15);

        --retro-sys-typescale-display-font:  var(--retro-ref-typeface-sans);
        --retro-sys-typescale-headline-font: var(--retro-ref-typeface-sans);
        --retro-sys-typescale-title-font:    var(--retro-ref-typeface-sans);
        --retro-sys-typescale-body-font:     var(--retro-ref-typeface-sans);
        --retro-sys-typescale-label-font:    var(--retro-ref-typeface-sans);

        --retro-sys-typescale-display-large-size:   var(--retro-ref-scale-24);
        --retro-sys-typescale-display-large-weight: 800;
        --retro-sys-typescale-display-large-lh:     1.2;

        --retro-sys-typescale-display-medium-size:   var(--retro-ref-scale-22);
        --retro-sys-typescale-display-medium-weight: 800;
        --retro-sys-typescale-display-medium-lh:     1.25;

        --retro-sys-typescale-display-small-size:   var(--retro-ref-scale-20);
        --retro-sys-typescale-display-small-weight: 700;
        --retro-sys-typescale-display-small-lh:     1.3;

        --retro-sys-typescale-headline-large-size:   var(--retro-ref-scale-18);
        --retro-sys-typescale-headline-large-weight: 700;
        --retro-sys-typescale-headline-large-lh:     1.3;

        --retro-sys-typescale-headline-medium-size:   var(--retro-ref-scale-16);
        --retro-sys-typescale-headline-medium-weight: 700;
        --retro-sys-typescale-headline-medium-lh:     1.35;

        --retro-sys-typescale-headline-small-size:   var(--retro-ref-scale-15);
        --retro-sys-typescale-headline-small-weight: 700;
        --retro-sys-typescale-headline-small-lh:     1.4;

        --retro-sys-typescale-title-large-size:   var(--retro-ref-scale-16);
        --retro-sys-typescale-title-large-weight: 800;
        --retro-sys-typescale-title-large-lh:     1.3;

        --retro-sys-typescale-title-medium-size:   var(--retro-ref-scale-15);
        --retro-sys-typescale-title-medium-weight: 700;
        --retro-sys-typescale-title-medium-lh:     1.35;

        --retro-sys-typescale-title-small-size:   var(--retro-ref-scale-14);
        --retro-sys-typescale-title-small-weight: 600;
        --retro-sys-typescale-title-small-lh:     1.4;

        --retro-sys-typescale-body-large-size:   var(--retro-ref-scale-14);
        --retro-sys-typescale-body-large-weight: 400;
        --retro-sys-typescale-body-large-lh:     1.5;

        --retro-sys-typescale-body-medium-size:   var(--retro-ref-scale-13);
        --retro-sys-typescale-body-medium-weight: 400;
        --retro-sys-typescale-body-medium-lh:     1.5;

        --retro-sys-typescale-body-small-size:   var(--retro-ref-scale-12);
        --retro-sys-typescale-body-small-weight: 400;
        --retro-sys-typescale-body-small-lh:     1.45;

        --retro-sys-typescale-label-large-size:   var(--retro-ref-scale-13);
        --retro-sys-typescale-label-large-weight: 700;
        --retro-sys-typescale-label-large-lh:     1.2;

        --retro-sys-typescale-label-medium-size:   var(--retro-ref-scale-11);
        --retro-sys-typescale-label-medium-weight: 700;
        --retro-sys-typescale-label-medium-lh:     1.2;

        --retro-sys-typescale-label-small-size:   var(--retro-ref-scale-10);
        --retro-sys-typescale-label-small-weight: 700;
        --retro-sys-typescale-label-small-lh:     1.2;

        --retro-sys-shape-corner-none:   var(--retro-ref-shape-none);
        --retro-sys-shape-corner-small:  var(--retro-ref-shape-none);
        --retro-sys-shape-corner-medium: var(--retro-ref-shape-none);
        --retro-sys-shape-corner-large:  var(--retro-ref-shape-sm);
        --retro-sys-shape-corner-pill:   var(--retro-ref-shape-pill);
        /* Shorthand aliases used across admin / module-store / BA CSS */
        --retro-sys-shape-corner-sm:    var(--retro-sys-shape-corner-small);
        --retro-sys-shape-corner-md:    var(--retro-sys-shape-corner-medium);
        --retro-sys-shape-corner-lg:    var(--retro-sys-shape-corner-large);
        --retro-sys-shape-corner-full:  var(--retro-sys-shape-corner-pill);
        --retro-shape-sm:              var(--retro-ref-shape-sm);

        --retro-sys-color-on-brand:           var(--retro-sys-color-brand-contrast);
        --retro-sys-color-on-ok:              var(--retro-sys-color-ok-contrast);
        --retro-sys-color-danger-container:  var(--retro-sys-color-danger-muted);

        --retro-sys-typescale-label-size: var(--retro-sys-typescale-label-medium-size);

        --retro-sys-elevation-1:     var(--retro-ref-elevation-1);
        --retro-sys-elevation-2:     var(--retro-ref-elevation-2);
        --retro-sys-elevation-3:     var(--retro-ref-elevation-3);
        --retro-sys-elevation-modal: var(--retro-ref-elevation-modal);

        --retro-sys-motion-easing:           var(--retro-ref-motion-easing-standard);
        --retro-sys-motion-easing-emphasized: var(--retro-ref-motion-easing-emphasized);
        --retro-sys-motion-duration-short:   var(--retro-ref-motion-duration-short);
        --retro-sys-motion-duration-medium:  var(--retro-ref-motion-duration-medium);
        --retro-sys-motion-duration-long:    var(--retro-ref-motion-duration-long);

        --retro-sys-interaction-hover-y:      var(--retro-ref-interaction-hover-y);
        --retro-sys-interaction-hover-scale:  var(--retro-ref-interaction-hover-scale);
        --retro-sys-interaction-hover-shadow: var(--retro-sys-elevation-2);
        --retro-sys-interaction-active-y:     var(--retro-ref-interaction-active-y);
        --retro-sys-interaction-active-scale: var(--retro-ref-interaction-active-scale);
        --retro-sys-interaction-active-shadow: var(--retro-sys-elevation-1);

        --retro-sys-z-sticky:   var(--retro-ref-z-sticky);
        --retro-sys-z-sidebar:  var(--retro-ref-z-sidebar);
        --retro-sys-z-dropdown: var(--retro-ref-z-dropdown);
        --retro-sys-z-modal:    var(--retro-ref-z-modal);
        --retro-sys-z-toast:    var(--retro-ref-z-toast);
        --retro-sys-z-tooltip:  var(--retro-ref-z-tooltip);
        --retro-sys-z-loading:  var(--retro-ref-z-loading);

        --retro-sys-breakpoint-xs: 360px;
        --retro-sys-breakpoint-sm: 480px;
        --retro-sys-breakpoint-md: 768px;
        --retro-sys-breakpoint-lg: 1024px;
        --retro-sys-breakpoint-xl: 1240px;

        --retro-sys-layout-max-width: var(--retro-ref-layout-max-width);

        --retro-sys-spacing-xs:  calc(var(--retro-ref-spacing-unit) * 1);   /*  4px */
        --retro-sys-spacing-sm:  calc(var(--retro-ref-spacing-unit) * 2);   /*  8px */
        --retro-sys-spacing-md:  calc(var(--retro-ref-spacing-unit) * 3);   /* 12px */
        --retro-sys-spacing-lg:  calc(var(--retro-ref-spacing-unit) * 4);   /* 16px */
        --retro-sys-spacing-xl:  calc(var(--retro-ref-spacing-unit) * 5);   /* 20px */
        --retro-sys-spacing-2xl: calc(var(--retro-ref-spacing-unit) * 6);   /* 24px */
        --retro-sys-spacing-3xl: calc(var(--retro-ref-spacing-unit) * 8);   /* 32px */
        --retro-sys-spacing-4xl: calc(var(--retro-ref-spacing-unit) * 10);  /* 40px */
        --retro-sys-spacing-5xl: calc(var(--retro-ref-spacing-unit) * 12);  /* 48px */
        --retro-sys-spacing-6xl: calc(var(--retro-ref-spacing-unit) * 16);  /* 64px */

        --retro-sys-spacing-1:  var(--retro-sys-spacing-xs);
        --retro-sys-spacing-2:  var(--retro-sys-spacing-sm);
        --retro-sys-spacing-3:  var(--retro-sys-spacing-md);
        --retro-sys-spacing-4:  var(--retro-sys-spacing-lg);
        --retro-sys-spacing-5:  var(--retro-sys-spacing-xl);
        --retro-sys-spacing-6:  var(--retro-sys-spacing-2xl);
        --retro-sys-spacing-8:  var(--retro-sys-spacing-3xl);
        --retro-sys-spacing-10: var(--retro-sys-spacing-4xl);
        --retro-sys-spacing-12: var(--retro-sys-spacing-5xl);
        --retro-sys-spacing-16: var(--retro-sys-spacing-6xl);

        --retro-sys-comp-height-xs:    28px;
        --retro-sys-comp-height-sm:    32px;
        --retro-sys-comp-height-md:    36px;
        --retro-sys-comp-height-lg:    42px;
        --retro-sys-comp-height-xl:    44px;
        --retro-sys-comp-height-touch: 48px;

        --retro-comp-btn-height:           var(--retro-sys-comp-height-md);
        --retro-comp-btn-height-sm:        var(--retro-sys-comp-height-sm);
        --retro-comp-btn-height-lg:        var(--retro-sys-comp-height-lg);
        --retro-comp-btn-height-touch:     var(--retro-sys-comp-height-touch);
        --retro-comp-btn-padding-inline:   var(--retro-sys-spacing-lg);
        --retro-comp-btn-gap:              var(--retro-sys-spacing-sm);
        --retro-comp-btn-radius:           var(--retro-sys-shape-corner-small);

        --retro-comp-field-height:         var(--retro-sys-comp-height-md);
        --retro-comp-field-padding-inline: var(--retro-sys-spacing-lg);
        --retro-comp-field-padding-block:  var(--retro-sys-spacing-sm);
        --retro-comp-field-radius:         var(--retro-sys-shape-corner-small);

        --retro-comp-card-padding:         var(--retro-sys-spacing-lg);
        --retro-comp-card-padding-lg:      var(--retro-sys-spacing-xl);
        --retro-comp-card-radius:          var(--retro-sys-shape-corner-medium);
        --retro-comp-card-gap:             var(--retro-sys-spacing-md);

        --retro-comp-modal-padding:        var(--retro-sys-spacing-xl);
        --retro-comp-modal-radius:         var(--retro-sys-shape-corner-large);
        --retro-comp-modal-titlebar-min:   var(--retro-sys-spacing-3xl);
        --retro-comp-modal-max-width-sm:   420px;
        --retro-comp-modal-max-width-md:   560px;
        --retro-comp-modal-max-width-lg:   720px;

        --retro-comp-table-cell-padding-x: var(--retro-sys-spacing-md);
        --retro-comp-table-cell-padding-y: var(--retro-sys-spacing-sm);
    }
}

@layer retro-base {
    .retro-root,
    .retro-report {
        font-family: var(--retro-sys-typescale-body-font);
        font-size:   var(--retro-sys-typescale-body-medium-size);
        font-weight: var(--retro-sys-typescale-body-medium-weight);
        line-height: var(--retro-sys-typescale-body-medium-lh);
        color:       var(--retro-sys-color-on-surface);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        overflow-x: clip;
    }

    .retro-root *,
    .retro-root *::before,
    .retro-root *::after,
    .retro-report *,
    .retro-report *::before,
    .retro-report *::after {
        box-sizing: border-box;
    }

    .retro-root img,
    .retro-report img {
        max-width: 100%;
        height: auto;
    }
}

@layer retro-states {
    .retro-root :is(
        a[href],
        button,
        input:not([type="hidden"]),
        select,
        textarea,
        summary,
        .retro-btn,
        .retro-tabs__btn,
        .retro-sidenav__item,
        .retro-dropdown__item,
        .retro-chip,
        .retro-accordion__trigger,
        .retro-pagination__btn,
        .retro-field-clear,
        .retro-toast__action,
        .retro-breadcrumb__link,
        .retro-measure-card,
        .retro-card--clickable,
        .retro-admin-modal__close,
        [role="button"],
        [role="tab"],
        [role="menuitem"]
    ) {
        transition:
            background-color var(--retro-sys-motion-duration-medium) var(--retro-sys-motion-easing),
            color            var(--retro-sys-motion-duration-medium) var(--retro-sys-motion-easing),
            border-color     var(--retro-sys-motion-duration-medium) var(--retro-sys-motion-easing),
            box-shadow       var(--retro-sys-motion-duration-medium) var(--retro-sys-motion-easing),
            transform        var(--retro-sys-motion-duration-medium) var(--retro-sys-motion-easing),
            filter           var(--retro-sys-motion-duration-medium) var(--retro-sys-motion-easing),
            opacity          var(--retro-sys-motion-duration-medium) var(--retro-sys-motion-easing);
    }

    /*
     * Shared pressable hover — .retro-btn, WP .button, list actions, report toolbar, etc.
     * Color/background variants may still change; motion + elevation stay identical.
     */
    :is(.retro-root, .retro-context-wp-admin, .retro-report, .retro-branches-modal) :is(
        .retro-btn,
        .retro-btn-submit,
        .retro-action-btn,
        .retro-sort-btn,
        .retro-toolbar-btn,
        .retro-pagination__btn,
        .retro-img-btn,
        .retro-file-btn,
        .retro-ms-product-btn,
        .btn-wa,
        .retro-toolbar-btn--wa,
        .button,
        button.button,
        a.button,
        input[type="submit"].button,
        input[type="button"].button,
        .button-primary,
        .button-secondary
    ) {
        transform-origin: center center;
        transition:
            background-color var(--retro-sys-motion-duration-medium) var(--retro-sys-motion-easing),
            color            var(--retro-sys-motion-duration-medium) var(--retro-sys-motion-easing),
            border-color     var(--retro-sys-motion-duration-medium) var(--retro-sys-motion-easing),
            box-shadow       var(--retro-sys-motion-duration-medium) var(--retro-sys-motion-easing),
            transform        var(--retro-sys-motion-duration-medium) var(--retro-sys-motion-easing),
            filter           var(--retro-sys-motion-duration-medium) var(--retro-sys-motion-easing),
            opacity          var(--retro-sys-motion-duration-medium) var(--retro-sys-motion-easing);
    }

    :is(.retro-root, .retro-context-wp-admin, .retro-report, .retro-branches-modal) :is(
        .retro-btn,
        .retro-btn-submit,
        .retro-action-btn,
        .retro-sort-btn,
        .retro-toolbar-btn,
        .retro-pagination__btn,
        .retro-img-btn,
        .retro-file-btn,
        .retro-ms-product-btn,
        .btn-wa,
        .retro-toolbar-btn--wa,
        .button,
        button.button,
        a.button,
        input[type="submit"].button,
        input[type="button"].button,
        .button-primary,
        .button-secondary
    ):is(:hover, :focus-visible):not(:disabled):not([disabled]):not([aria-disabled="true"]):not(.is-disabled):not(.retro-share) {
        transform:  translateY(var(--retro-sys-interaction-hover-y)) scale(var(--retro-sys-interaction-hover-scale));
        box-shadow: var(--retro-sys-interaction-hover-shadow);
        filter:     none;
    }

    :is(.retro-root, .retro-context-wp-admin, .retro-report, .retro-branches-modal) :is(
        .retro-btn,
        .retro-btn-submit,
        .retro-action-btn,
        .retro-sort-btn,
        .retro-toolbar-btn,
        .retro-pagination__btn,
        .retro-img-btn,
        .retro-file-btn,
        .retro-ms-product-btn,
        .btn-wa,
        .retro-toolbar-btn--wa,
        .button,
        button.button,
        a.button,
        input[type="submit"].button,
        input[type="button"].button,
        .button-primary,
        .button-secondary
    ):active:not(:disabled):not([disabled]):not([aria-disabled="true"]):not(.is-disabled):not(.retro-share) {
        transform:  translateY(var(--retro-sys-interaction-active-y)) scale(var(--retro-sys-interaction-active-scale));
        box-shadow: var(--retro-sys-interaction-active-shadow);
        filter:     none;
    }

    .retro-tabs__btn.is-active,
    .retro-sidenav__item.is-active {
        background:   var(--retro-sys-color-brand-muted);
        border-color: var(--retro-sys-color-selection, var(--retro-sys-color-brand));
        color:        var(--retro-sys-color-menu-title, var(--retro-sys-color-brand-muted-text));
        font-weight:  700;
        box-shadow:
            0 0 0 1px color-mix(in srgb, var(--retro-sys-color-selection, var(--retro-sys-color-brand)) 35%, transparent),
            0 6px 16px color-mix(in srgb, var(--retro-sys-color-selection, var(--retro-sys-color-brand)) 22%, transparent);
    }

    .retro-btn--outlined:hover,
    .retro-btn--sort:hover,
    .retro-sidenav__item:hover,
    .retro-tabs__btn:hover,
    .retro-dropdown__item:hover {
        background-color: var(--retro-sys-color-surface-variant);
    }

    .retro-btn:disabled,
    .retro-btn.is-disabled,
    .retro-btn[aria-disabled="true"] {
        opacity:        0.38;
        pointer-events: none;
        cursor:         default;
    }

    .retro-field:disabled,
    .retro-select:disabled,
    .retro-textarea:disabled {
        opacity: 0.6;
        cursor:  not-allowed;
        background: var(--retro-sys-color-surface-container);
    }

    @media (prefers-reduced-motion: reduce) {
        :is(.retro-root, .retro-context-wp-admin, .retro-report, .retro-branches-modal) :is(
            .retro-btn,
            .retro-btn-submit,
            .retro-action-btn,
            .retro-sort-btn,
            .retro-toolbar-btn,
            .retro-pagination__btn,
            .retro-img-btn,
            .retro-file-btn,
            .retro-ms-product-btn,
            .btn-wa,
            .retro-toolbar-btn--wa,
            .button,
            button.button,
            a.button,
            input[type="submit"].button,
            input[type="button"].button,
            .button-primary,
            .button-secondary
        ):is(:hover, :focus-visible, :active) {
            transform: none;
        }
    }
}

@layer retro-utilities {
    .retro-text--danger {
        color: var(--retro-sys-color-danger);
    }

    .retro-text--muted {
        color: var(--retro-sys-color-text-muted);
    }

    .retro-text--ok {
        color: var(--retro-sys-color-ok);
    }

    .retro-clinical-badge {
        display: block;
        max-width: 100%;
        padding: 2px 6px;
        border-radius: var(--retro-ref-shape-sm);
        font-weight: 700;
        font-size: var(--retro-ref-scale-10);
        line-height: 1.3;
        white-space: normal;
        word-break: break-word;
        border: 1px solid transparent;
    }

    .retro-clinical-badge--brand {
        background: var(--retro-ref-brand-faint);
        color: var(--retro-ref-brand-mid);
        border-color: var(--retro-ref-brand-soft);
    }

    .retro-clinical-badge--muted {
        color: var(--retro-sys-color-text-muted);
        font-weight: 600;
        padding: 0;
        border: 0;
    }

    .retro-clinical-badge--ok {
        color: var(--retro-sys-color-ok);
        display: inline-flex;
        align-items: center;
        gap: 2px;
        padding: 0;
        border: 0;
        background: transparent;
    }

    .retro-clinical-badge--danger {
        background: var(--retro-sys-color-danger-muted);
        color: var(--retro-sys-color-danger-muted-text);
        border-color: var(--retro-sys-color-danger-muted);
    }

    .retro-surface-raised,
    .retro-card,
    .retro-sidebar,
    .retro-sidenav__item,
    .retro-measure-card {
        border:        1px solid var(--retro-sys-color-outline-variant);
        border-radius: var(--retro-comp-card-radius);
        box-shadow:    var(--retro-sys-elevation-1);
    }

    .retro-surface-raised,
    .retro-card,
    .retro-sidenav__item,
    .retro-measure-card {
        background: var(--retro-sys-color-surface);
    }

    .retro-sidebar {
        background: var(--retro-sys-color-surface-dim);
    }

    .retro-flex-row,
    .retro-sidenav__item,
    .retro-admin-modal__title,
    .retro-pagination__jump,
    .retro-toolbar {
        display:     flex;
        align-items: center;
    }

    .retro-flex-col {
        display:        flex;
        flex-direction: column;
    }

    .retro-flex-between {
        display:         flex;
        align-items:     center;
        justify-content: space-between;
    }

    .retro-flex-wrap {
        flex-wrap: wrap;
    }

    .retro-overlay,
    .retro-admin-modal__backdrop {
        position:   fixed;
        inset:      0;
        background: var(--retro-sys-color-scrim, rgba(0, 0, 0, 0.45));
    }

    .retro-overlay--absolute {
        position: absolute;
    }

    .retro-container {
        width:     100%;
        max-width: var(--retro-sys-layout-max-width);
        margin:    0 auto;
        padding:   0 var(--retro-sys-spacing-lg);
    }

    .retro-container--fluid {
        max-width: none;
    }

    .retro-grid {
        display:               grid;
        gap:                   var(--retro-sys-spacing-md);
    }

    .retro-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .retro-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .retro-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    .retro-grid--auto-fit {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    }

    .retro-gap-xs  { gap: var(--retro-sys-spacing-xs); }
    .retro-gap-sm  { gap: var(--retro-sys-spacing-sm); }
    .retro-gap-md  { gap: var(--retro-sys-spacing-md); }
    .retro-gap-lg  { gap: var(--retro-sys-spacing-lg); }
    .retro-gap-xl  { gap: var(--retro-sys-spacing-xl); }
    .retro-gap-2xl { gap: var(--retro-sys-spacing-2xl); }

    .retro-p-xs  { padding: var(--retro-sys-spacing-xs); }
    .retro-p-sm  { padding: var(--retro-sys-spacing-sm); }
    .retro-p-md  { padding: var(--retro-sys-spacing-md); }
    .retro-p-lg  { padding: var(--retro-sys-spacing-lg); }
    .retro-p-xl  { padding: var(--retro-sys-spacing-xl); }
    .retro-p-2xl { padding: var(--retro-sys-spacing-2xl); }

    .retro-mb-xs  { margin-bottom: var(--retro-sys-spacing-xs); }
    .retro-mb-sm  { margin-bottom: var(--retro-sys-spacing-sm); }
    .retro-mb-md  { margin-bottom: var(--retro-sys-spacing-md); }
    .retro-mb-lg  { margin-bottom: var(--retro-sys-spacing-lg); }
    .retro-mb-xl  { margin-bottom: var(--retro-sys-spacing-xl); }
    .retro-mb-2xl { margin-bottom: var(--retro-sys-spacing-2xl); }

    .retro-mt-xs  { margin-top: var(--retro-sys-spacing-xs); }
    .retro-mt-sm  { margin-top: var(--retro-sys-spacing-sm); }
    .retro-mt-md  { margin-top: var(--retro-sys-spacing-md); }
    .retro-mt-lg  { margin-top: var(--retro-sys-spacing-lg); }
    .retro-mt-xl  { margin-top: var(--retro-sys-spacing-xl); }
    .retro-mt-2xl { margin-top: var(--retro-sys-spacing-2xl); }

    .retro-hidden { display: none !important; }

    .retro-sr-only {
        position: absolute;
        width:    1px;
        height:   1px;
        padding:  0;
        margin:   -1px;
        overflow: hidden;
        clip:     rect(0, 0, 0, 0);
        white-space: nowrap;
        border:   0;
    }
}

@layer retro-components {

    
    .retro-typescale-display-large {
        font-family: var(--retro-sys-typescale-display-font);
        font-size:   var(--retro-sys-typescale-display-large-size);
        font-weight: var(--retro-sys-typescale-display-large-weight);
        line-height: var(--retro-sys-typescale-display-large-lh);
        color:       var(--retro-sys-color-on-surface);
    }

    .retro-typescale-display-medium {
        font-family: var(--retro-sys-typescale-display-font);
        font-size:   var(--retro-sys-typescale-display-medium-size);
        font-weight: var(--retro-sys-typescale-display-medium-weight);
        line-height: var(--retro-sys-typescale-display-medium-lh);
        color:       var(--retro-sys-color-on-surface);
    }

    .retro-typescale-display-small {
        font-family: var(--retro-sys-typescale-display-font);
        font-size:   var(--retro-sys-typescale-display-small-size);
        font-weight: var(--retro-sys-typescale-display-small-weight);
        line-height: var(--retro-sys-typescale-display-small-lh);
        color:       var(--retro-sys-color-on-surface);
    }

    .retro-typescale-headline-large {
        font-family: var(--retro-sys-typescale-headline-font);
        font-size:   var(--retro-sys-typescale-headline-large-size);
        font-weight: var(--retro-sys-typescale-headline-large-weight);
        line-height: var(--retro-sys-typescale-headline-large-lh);
        color:       var(--retro-sys-color-on-surface);
    }

    .retro-typescale-headline-medium {
        font-family: var(--retro-sys-typescale-headline-font);
        font-size:   var(--retro-sys-typescale-headline-medium-size);
        font-weight: var(--retro-sys-typescale-headline-medium-weight);
        line-height: var(--retro-sys-typescale-headline-medium-lh);
        color:       var(--retro-sys-color-on-surface);
    }

    .retro-typescale-headline-small {
        font-family: var(--retro-sys-typescale-headline-font);
        font-size:   var(--retro-sys-typescale-headline-small-size);
        font-weight: var(--retro-sys-typescale-headline-small-weight);
        line-height: var(--retro-sys-typescale-headline-small-lh);
        color:       var(--retro-sys-color-on-surface);
    }

    .retro-typescale-title-large {
        font-family: var(--retro-sys-typescale-title-font);
        font-size:   var(--retro-sys-typescale-title-large-size);
        font-weight: var(--retro-sys-typescale-title-large-weight);
        line-height: var(--retro-sys-typescale-title-large-lh);
        color:       var(--retro-sys-color-brand-muted-text);
        letter-spacing: 0.02em;
    }

    .retro-typescale-title-medium {
        font-family: var(--retro-sys-typescale-title-font);
        font-size:   var(--retro-sys-typescale-title-medium-size);
        font-weight: var(--retro-sys-typescale-title-medium-weight);
        line-height: var(--retro-sys-typescale-title-medium-lh);
        color:       var(--retro-sys-color-on-surface);
    }

    .retro-typescale-title-small {
        font-family: var(--retro-sys-typescale-title-font);
        font-size:   var(--retro-sys-typescale-title-small-size);
        font-weight: var(--retro-sys-typescale-title-small-weight);
        line-height: var(--retro-sys-typescale-title-small-lh);
        color:       var(--retro-sys-color-on-surface);
    }

    .retro-typescale-body-large {
        font-family: var(--retro-sys-typescale-body-font);
        font-size:   var(--retro-sys-typescale-body-large-size);
        font-weight: var(--retro-sys-typescale-body-large-weight);
        line-height: var(--retro-sys-typescale-body-large-lh);
        color:       var(--retro-sys-color-on-surface);
    }

    .retro-typescale-body-medium {
        font-family: var(--retro-sys-typescale-body-font);
        font-size:   var(--retro-sys-typescale-body-medium-size);
        font-weight: var(--retro-sys-typescale-body-medium-weight);
        line-height: var(--retro-sys-typescale-body-medium-lh);
        color:       var(--retro-sys-color-on-surface);
    }

    .retro-typescale-body-small {
        font-family: var(--retro-sys-typescale-body-font);
        font-size:   var(--retro-sys-typescale-body-small-size);
        font-weight: var(--retro-sys-typescale-body-small-weight);
        line-height: var(--retro-sys-typescale-body-small-lh);
        color:       var(--retro-sys-color-on-surface-variant);
    }

    .retro-typescale-label-large,
    .retro-typescale-label-medium,
    .retro-typescale-label-small {
        font-family:    var(--retro-sys-typescale-label-font);
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .retro-typescale-label-large {
        font-size:   var(--retro-sys-typescale-label-large-size);
        font-weight: var(--retro-sys-typescale-label-large-weight);
        line-height: var(--retro-sys-typescale-label-large-lh);
        color:       var(--retro-sys-color-brand-muted-text);
    }

    .retro-typescale-label-medium {
        font-size:   var(--retro-sys-typescale-label-medium-size);
        font-weight: var(--retro-sys-typescale-label-medium-weight);
        line-height: var(--retro-sys-typescale-label-medium-lh);
        color:       var(--retro-sys-color-on-surface-variant);
    }

    .retro-typescale-label-small {
        font-size:   var(--retro-sys-typescale-label-small-size);
        font-weight: var(--retro-sys-typescale-label-small-weight);
        line-height: var(--retro-sys-typescale-label-small-lh);
        color:       var(--retro-sys-color-on-surface-variant);
    }

    .retro-color-secondary { color: var(--retro-sys-color-on-surface-variant); }
    .retro-color-hint      { color: var(--retro-sys-color-on-surface-variant); }

    
    .retro-page-title {
        margin:      0 0 var(--retro-sys-spacing-lg);
        font-family: var(--retro-sys-typescale-title-font);
        font-size:   var(--retro-sys-typescale-title-large-size);
        font-weight: var(--retro-sys-typescale-title-large-weight);
        line-height: var(--retro-sys-typescale-title-large-lh);
        color:       var(--retro-sys-color-brand-muted-text);
    }

    
    .retro-card {
        padding: var(--retro-comp-card-padding);
    }

    .retro-card--p-lg { padding: var(--retro-comp-card-padding-lg); }

    .retro-card--clickable {
        cursor: pointer;
    }

    .retro-card--clickable:hover {
        box-shadow:   var(--retro-sys-interaction-hover-shadow);
        border-color: var(--retro-sys-color-brand);
        transform:    translateY(var(--retro-sys-interaction-hover-y)) scale(var(--retro-sys-interaction-hover-scale));
    }

    .retro-card--accent-info {
        border-color: var(--retro-sys-color-info);
        background:   var(--retro-sys-color-info-container);
    }

    .retro-card--accent-warning {
        border-color: var(--retro-sys-color-warning);
        background:   var(--retro-sys-color-warning-container);
    }

    .retro-card--accent-error {
        border-color: var(--retro-sys-color-error);
        background:   var(--retro-sys-color-error-container);
    }

    .retro-card--accent-success {
        border-color: var(--retro-sys-color-success);
        background:   var(--retro-sys-color-success-container);
    }

    
    .retro-measure-card {
        padding:       var(--retro-comp-card-padding);
        margin-bottom: var(--retro-sys-spacing-md);
        cursor:        pointer;
    }

    .retro-measure-card:hover {
        box-shadow:   var(--retro-sys-interaction-hover-shadow);
        border-color: var(--retro-sys-color-brand);
        transform:    translateY(var(--retro-sys-interaction-hover-y)) scale(var(--retro-sys-interaction-hover-scale));
    }

    
    .retro-sidebar {
        overflow-x: clip;
        padding:    var(--retro-sys-spacing-md);
    }

    .retro-sidenav {
        display:        flex;
        flex-direction: column;
        gap:            var(--retro-sys-spacing-sm);
    }

    .retro-sidenav__item {
        gap:             var(--retro-sys-spacing-sm);
        padding:         var(--retro-sys-spacing-md) var(--retro-sys-spacing-lg);
        text-decoration: none;
        font-size:       var(--retro-sys-typescale-body-medium-size);
        font-weight:     600;
        color:           var(--retro-sys-color-on-surface-variant);
        border-color:    var(--retro-sys-color-outline);
        border-radius:   var(--retro-sys-shape-corner-small);
    }

    .retro-sidenav__item.is-active,
    .retro-tabs__btn.is-active {
        background:   var(--retro-sys-color-brand-muted);
        border-color: var(--retro-sys-color-selection, var(--retro-sys-color-brand));
        color:        var(--retro-sys-color-menu-title, var(--retro-sys-color-brand-muted-text));
        font-weight:  700;
        box-shadow:
            0 0 0 1px color-mix(in srgb, var(--retro-sys-color-selection, var(--retro-sys-color-brand)) 35%, transparent),
            0 6px 16px color-mix(in srgb, var(--retro-sys-color-selection, var(--retro-sys-color-brand)) 22%, transparent);
    }

    .retro-sidenav__item:hover:not(.is-active),
    .retro-tabs__btn:hover:not(.is-active) {
        background: var(--retro-sys-color-surface-variant);
        color:      var(--retro-sys-color-on-surface);
    }

    .retro-sidenav__subitem {
        border:        1px solid var(--retro-sys-color-outline-variant);
        border-radius: var(--retro-sys-shape-corner-small);
        background:    var(--retro-sys-color-surface);
        padding:       var(--retro-sys-spacing-sm) var(--retro-sys-spacing-md);
    }

    .retro-sidenav__subitem.is-active,
    .retro-sidenav-subitem.is-active {
        background:   var(--retro-sys-color-brand-muted);
        border-color: var(--retro-sys-color-brand);
        color:        var(--retro-sys-color-brand-muted-text);
        font-weight:  700;
        box-shadow:   var(--retro-sys-elevation-1);
    }

    
    .retro-btn {
        display:         inline-flex;
        align-items:     center;
        justify-content: center;
        gap:             var(--retro-comp-btn-gap);
        height:          var(--retro-comp-btn-height);
        padding:         0 var(--retro-comp-btn-padding-inline);
        border-radius:   var(--retro-comp-btn-radius);
        border:          1px solid transparent;
        font-family:     var(--retro-sys-typescale-label-font);
        font-size:       var(--retro-sys-typescale-label-large-size);
        font-weight:     var(--retro-sys-typescale-label-large-weight);
        letter-spacing:  0.02em;
        line-height:     1;
        white-space:     nowrap;
        cursor:          pointer;
        text-decoration: none;
        touch-action:    manipulation;
    }

    .retro-btn--filled {
        background: var(--retro-sys-color-brand);
        color:      var(--retro-sys-color-brand-contrast);
        box-shadow: var(--retro-sys-elevation-1);
    }

    .retro-btn--filled:hover {
        background: var(--retro-sys-color-primary-hover, var(--retro-sys-color-brand-hover));
        color:      var(--retro-sys-color-brand-contrast);
    }

    .retro-btn--tonal {
        background: var(--retro-sys-color-brand-muted);
        color:      var(--retro-sys-color-brand-ink);
    }

    .retro-btn--tonal:hover {
        background: var(--retro-sys-color-surface-container-high);
        color:      var(--retro-sys-color-brand-ink);
    }

    .retro-btn--outlined {
        background:   var(--retro-sys-color-surface);
        color:        var(--retro-sys-color-brand-ink);
        border-color: var(--retro-sys-color-outline);
    }

    .retro-btn--outlined:hover {
        border-color: var(--retro-sys-color-brand-ink);
        color:        var(--retro-sys-color-brand-ink);
    }

    .retro-btn--text {
        background: transparent;
        color:      var(--retro-sys-color-brand-ink);
        border-color: transparent;
    }

    .retro-btn--ghost {
        background: transparent;
        color:      var(--retro-sys-color-on-surface-variant);
        border-color: var(--retro-sys-color-outline);
    }

    .retro-btn--sort {
        background:   var(--retro-sys-color-surface);
        color:        var(--retro-sys-color-on-surface-variant);
        border-color: var(--retro-sys-color-outline);
        font-weight:  600;
    }

    .retro-btn--sort.is-active {
        background:   var(--retro-sys-color-brand-muted);
        border-color: var(--retro-sys-color-brand-ink);
        color:        var(--retro-sys-color-brand-ink);
    }

    .retro-btn--danger {
        background:   var(--retro-sys-color-error-container);
        color:        var(--retro-sys-color-error);
        border-color: var(--retro-sys-color-error);
    }

    .retro-btn--danger:hover {
        background: var(--retro-sys-color-error);
        color:      var(--retro-sys-color-on-error);
    }

    .retro-btn--success {
        background:   var(--retro-sys-color-success-container);
        color:        var(--retro-sys-color-success);
        border-color: var(--retro-sys-color-success);
    }

    .retro-btn--success:hover {
        background: var(--retro-sys-color-success);
        color:      var(--retro-sys-color-on-success);
    }

    .retro-btn--sm {
        height:    var(--retro-comp-btn-height-sm);
        padding:   0 var(--retro-sys-spacing-md);
        font-size: var(--retro-sys-typescale-label-medium-size);
    }

    .retro-btn--lg {
        height:    var(--retro-comp-btn-height-lg);
        padding:   0 var(--retro-sys-spacing-xl);
        font-size: var(--retro-sys-typescale-body-large-size);
    }

    .retro-btn--touch {
        min-height: var(--retro-comp-btn-height-touch);
        height:     auto;
    }

    .retro-sort-arrow {
        font-size:  var(--retro-ref-scale-10);
        width:      10px;
        text-align: center;
    }

    
    .retro-field-group {
        display:        flex;
        flex-direction: column;
        gap:            var(--retro-sys-spacing-xs);
        margin-bottom:  var(--retro-sys-spacing-lg);
    }

    .retro-field-group__label {
        font-family:    var(--retro-sys-typescale-label-font);
        font-size:      var(--retro-sys-typescale-label-medium-size);
        font-weight:    var(--retro-sys-typescale-label-medium-weight);
        line-height:    var(--retro-sys-typescale-label-medium-lh);
        color:          var(--retro-sys-color-on-surface-variant);
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .retro-field-group__message {
        font-size: var(--retro-sys-typescale-label-small-size);
        margin:    0;
    }

    .retro-field-group__message--error   { color: var(--retro-sys-color-error); }
    .retro-field-group__message--success { color: var(--retro-sys-color-success); }

    .retro-field-group--error .retro-field-group__label   { color: var(--retro-sys-color-error); }
    .retro-field-group--success .retro-field-group__label { color: var(--retro-sys-color-success); }

    .retro-field,
    .retro-select,
    .retro-textarea {
        display:       block;
        width:         100%;
        min-height:    var(--retro-comp-field-height);
        padding:       var(--retro-comp-field-padding-block) var(--retro-comp-field-padding-inline);
        font-family:   var(--retro-sys-typescale-body-font);
        font-size:     var(--retro-sys-typescale-body-large-size);
        line-height:   var(--retro-sys-typescale-body-large-lh);
        color:         var(--retro-sys-color-on-surface);
        background:    var(--retro-sys-color-surface);
        border:        1px solid var(--retro-sys-color-outline);
        border-radius: var(--retro-comp-field-radius);
        touch-action:  manipulation;
    }

    .retro-select {
        padding-right: 2rem;
        line-height:   1.4;
    }

    .retro-textarea {
        min-height: calc(var(--retro-comp-field-height) * 2);
        resize:     vertical;
    }

    .retro-field:focus,
    .retro-select:focus,
    .retro-textarea:focus {
        outline:      none;
        border-color: var(--retro-sys-color-brand);
        box-shadow:   0 0 0 1px var(--retro-sys-color-brand);
    }

    .retro-field--error,
    .retro-field-group--error .retro-field,
    .retro-field-group--error .retro-select,
    .retro-field-group--error .retro-textarea {
        border-color: var(--retro-sys-color-error);
        background:   var(--retro-sys-color-error-container);
    }

    .retro-field--success,
    .retro-field-group--success .retro-field,
    .retro-field-group--success .retro-select,
    .retro-field-group--success .retro-textarea {
        border-color: var(--retro-sys-color-success);
        background:   var(--retro-sys-color-success-container);
    }

    .retro-field--search {
        padding-right: calc(var(--retro-sys-spacing-2xl) + var(--retro-sys-spacing-lg));
    }

    .retro-field--jump {
        width:      72px;
        min-height: var(--retro-comp-field-height);
        padding:    var(--retro-sys-spacing-sm);
        text-align: center;
        font-size:  var(--retro-sys-typescale-body-medium-size);
    }

    .retro-field-clear {
        position:        absolute;
        right:           var(--retro-sys-spacing-sm);
        top:             50%;
        transform:       translateY(-50%);
        display:         flex;
        align-items:     center;
        justify-content: center;
        padding:         var(--retro-sys-spacing-xs);
        background:      transparent;
        border:          none;
        border-radius:   var(--retro-sys-shape-corner-small);
        cursor:          pointer;
        z-index:         3;
        touch-action:    manipulation;
        color:           var(--retro-sys-color-on-surface-variant);
    }

    .retro-field-clear:hover {
        background: var(--retro-sys-color-error-container);
        color:      var(--retro-sys-color-error);
    }

    .retro-checkbox,
    .retro-radio {
        display:     inline-flex;
        align-items: center;
        gap:         var(--retro-sys-spacing-sm);
        cursor:      pointer;
        font-size:   var(--retro-sys-typescale-body-medium-size);
        color:       var(--retro-sys-color-on-surface);
    }

    .retro-checkbox__input,
    .retro-radio__input {
        width:         18px;
        height:        18px;
        margin:        0;
        accent-color:  var(--retro-sys-color-brand);
        cursor:        pointer;
        flex-shrink:   0;
    }

    .retro-switch {
        display:     inline-flex;
        align-items: center;
        gap:         var(--retro-sys-spacing-sm);
        cursor:      pointer;
        font-size:   var(--retro-sys-typescale-body-medium-size);
    }

    .retro-switch__track {
        position:      relative;
        width:         44px;
        height:        24px;
        background:    var(--retro-sys-color-outline);
        border-radius: var(--retro-sys-shape-corner-pill);
        flex-shrink:   0;
    }

    .retro-switch__input {
        position: absolute;
        opacity:  0;
        inset:    0;
        margin:   0;
        cursor:   pointer;
        z-index:  1;
    }

    .retro-switch__thumb {
        position:      absolute;
        top:           2px;
        left:          2px;
        width:         20px;
        height:        20px;
        background:    var(--retro-sys-color-surface);
        border-radius: var(--retro-sys-shape-corner-pill);
        box-shadow:    var(--retro-sys-elevation-1);
        transition:    transform var(--retro-sys-motion-duration-short) var(--retro-sys-motion-easing);
    }

    .retro-switch__input:checked + .retro-switch__thumb {
        transform: translateX(20px);
    }

    .retro-switch:has(.retro-switch__input:checked) .retro-switch__track {
        background: var(--retro-sys-color-brand);
    }

    
    .retro-alert {
        display:     flex;
        align-items: flex-start;
        gap:         var(--retro-sys-spacing-sm);
        padding:     var(--retro-sys-spacing-md) var(--retro-sys-spacing-lg);
        border:      1px solid var(--retro-sys-color-outline);
        border-radius: var(--retro-sys-shape-corner-small);
        font-size:   var(--retro-sys-typescale-body-medium-size);
        line-height: var(--retro-sys-typescale-body-medium-lh);
        background:  var(--retro-sys-color-surface-container);
        color:       var(--retro-sys-color-on-surface);
    }

    .retro-alert--info {
        border-color: var(--retro-sys-color-info);
        background:   var(--retro-sys-color-info-container);
        color:        var(--retro-sys-color-on-info-container);
    }

    .retro-alert--success {
        border-color: var(--retro-sys-color-success);
        background:   var(--retro-sys-color-success-container);
        color:        var(--retro-sys-color-on-success-container);
    }

    .retro-alert--warning {
        border-color: var(--retro-sys-color-warning);
        background:   var(--retro-sys-color-warning-container);
        color:        var(--retro-sys-color-on-warning-container);
    }

    .retro-alert--error {
        border-color: var(--retro-sys-color-error);
        background:   var(--retro-sys-color-error-container);
        color:        var(--retro-sys-color-on-error-container);
    }

    .retro-alert__title {
        font-weight: 700;
        margin:      0 0 var(--retro-sys-spacing-xs);
    }

    .retro-alert__body {
        margin: 0;
    }

    
    .retro-admin-modal {
        display:         none;
        position:        fixed;
        inset:           0;
        /* Fallbacks when modal is portaled to body without .retro-root token scope. */
        z-index:         var(--retro-sys-z-modal, 9100);
        align-items:     flex-start;
        justify-content: center;
        padding:         var(--retro-sys-spacing-2xl, 24px) var(--retro-sys-spacing-lg, 16px);
        overflow-y:      auto;
    }

    .retro-admin-modal.is-open,
    .retro-admin-modal:not([hidden]) {
        display: flex;
    }

    .retro-admin-modal[hidden] {
        display: none !important;
    }

    .retro-admin-modal__backdrop {
        position:   fixed;
        inset:      0;
        background: var(--retro-sys-color-scrim, rgba(0, 0, 0, 0.45));
        z-index:    0;
    }

    .retro-admin-modal__panel {
        position:              relative;
        z-index:               1;
        width:                 min(var(--retro-comp-modal-max-width-md), 100%);
        max-height:            min(85vh, 720px);
        display:               grid;
        grid-template-columns: minmax(0, 1fr) var(--retro-comp-modal-titlebar-min);
        grid-template-rows:    auto minmax(0, 1fr) auto;
        background:            var(--retro-sys-color-surface, #ffffff);
        border-radius:         var(--retro-sys-shape-corner-lg, 12px);
        box-shadow:            var(--retro-sys-elevation-modal, 0 20px 50px rgba(0, 0, 0, 0.20));
        overflow:              hidden;
        margin-top:            var(--retro-sys-spacing-lg);
    }

    .retro-admin-modal__panel--sm {
        width: min(var(--retro-comp-modal-max-width-sm), 100%);
    }

    .retro-admin-modal__panel--lg {
        width: min(var(--retro-comp-modal-max-width-lg), 100%);
    }

    .retro-admin-modal__head {
        grid-column:   1;
        grid-row:      1;
        display:       flex;
        align-items:   center;
        height:        var(--retro-comp-modal-titlebar-min);
        min-height:    var(--retro-comp-modal-titlebar-min);
        max-height:    var(--retro-comp-modal-titlebar-min);
        padding:       0 var(--retro-sys-spacing-lg);
        overflow:      hidden;
        background:    var(--retro-sys-color-surface-container);
        color:         var(--retro-sys-color-on-surface);
        border-bottom: 1px solid var(--retro-sys-color-outline-variant);
        cursor:        grab;
        user-select:   none;
        touch-action:  none;
    }

    .retro-admin-modal__panel.is-dragging .retro-admin-modal__head {
        cursor: grabbing;
    }

    .retro-admin-modal__panel.is-dragging {
        z-index: 2;
        box-shadow: var(--retro-sys-elevation-modal);
    }

    #wpbody-content .retro-admin-modal__head h2.retro-admin-modal__title,
    .retro-root .retro-admin-modal__head h2.retro-admin-modal__title,
    .retro-admin-modal__head .retro-admin-modal__title {
        margin:         0;
        padding:        0;
        min-width:      0;
        flex:           1 1 auto;
        max-width:      100%;
        font-size:      var(--retro-sys-typescale-title-small-size);
        font-weight:    700;
        line-height:    1.2;
        letter-spacing: normal;
        text-transform: none;
        color:          inherit;
        display:        block;
        white-space:    nowrap;
        overflow:       hidden;
        text-overflow:  ellipsis;
    }

    .retro-admin-modal__title .retro-icon,
    .retro-admin-modal__title .icon-text {
        display:        inline-flex;
        vertical-align: middle;
        margin-inline-end: var(--retro-sys-spacing-sm);
    }

    .retro-admin-modal__title .retro-icon,
    .retro-admin-modal__close .retro-icon {
        color: currentColor;
    }

    .retro-admin-modal__head .retro-icon,
    .retro-admin-modal__head .retro-icon svg {
        width:      16px;
        height:     16px;
        min-width:  16px;
        min-height: 16px;
    }

    .retro-admin-modal__panel > .retro-admin-modal__close {
        grid-column:     2;
        grid-row:        1;
        position:        static;
        z-index:         5;
        display:         inline-flex;
        align-items:     center;
        justify-content: center;
        align-self:      stretch;
        width:           var(--retro-comp-modal-titlebar-min);
        min-width:       var(--retro-comp-modal-titlebar-min);
        height:          var(--retro-comp-modal-titlebar-min);
        min-height:      var(--retro-comp-modal-titlebar-min);
        margin:          0;
        padding:         0;
        border:          none;
        border-left:     1px solid var(--retro-sys-color-outline-variant);
        border-bottom:   1px solid var(--retro-sys-color-outline-variant);
        border-radius:   0;
        background:      var(--retro-sys-color-surface-container);
        color:           var(--retro-sys-color-on-surface-variant);
        cursor:          pointer;
        flex-shrink:     0;
        font-size:       22px;
        line-height:     1;
        font-weight:     400;
    }

    .retro-admin-modal__panel:not(:has(> .retro-admin-modal__head)) > .retro-admin-modal__close {
        grid-column:     1 / -1;
        justify-content: flex-end;
        width:           auto;
        padding-inline:  var(--retro-sys-spacing-md);
    }

    .retro-admin-modal__panel > .retro-admin-modal__close .retro-icon,
    .retro-admin-modal__panel > .retro-admin-modal__close .retro-icon svg,
    .retro-admin-modal__panel > .retro-admin-modal__close svg {
        width:      16px !important;
        height:     16px !important;
        min-width:  16px;
        min-height: 16px;
    }

    .retro-admin-modal__panel > .retro-admin-modal__close:hover,
    .retro-admin-modal__panel > .retro-admin-modal__close:focus-visible {
        background: color-mix(in srgb, var(--retro-sys-color-on-surface) 8%, var(--retro-sys-color-surface-container));
        color:      var(--retro-sys-color-on-surface);
    }

    .retro-admin-modal__panel > .retro-admin-modal__close:focus-visible {
        outline:        2px solid var(--retro-sys-color-brand);
        outline-offset: -2px;
    }

    .retro-admin-modal__body {
        padding:     var(--retro-sys-spacing-lg) var(--retro-sys-spacing-xl);
        overflow:    auto;
        min-height:  0;
        font-size:   var(--retro-sys-typescale-body-medium-size);
        line-height: var(--retro-sys-typescale-body-medium-lh);
    }

    .retro-admin-modal__panel > .retro-admin-modal__body {
        grid-column: 1 / -1;
        grid-row:    2;
    }

    .retro-admin-modal__panel > form {
        grid-column:    1 / -1;
        grid-row:       2 / -1;
        display:        flex;
        flex-direction: column;
        min-height:     0;
        overflow:       hidden;
    }

    .retro-admin-modal__panel > form .retro-admin-modal__body {
        flex:       1;
        min-height: 0;
    }

    .retro-admin-modal__footer {
        display:         flex;
        align-items:     center;
        justify-content: flex-end;
        gap:             var(--retro-sys-spacing-sm);
        padding:         var(--retro-sys-spacing-md) var(--retro-sys-spacing-xl);
        border-top:      1px solid var(--retro-sys-color-outline-variant);
    }

    .retro-admin-modal__panel > .retro-admin-modal__footer {
        grid-column: 1 / -1;
        grid-row:    3;
    }

    .retro-admin-modal__footer .retro-btn {
        min-width: 0;
    }

    .retro-admin-modal__footer--split .retro-btn {
        flex: 1;
    }

    .retro-admin-modal__lead {
        margin: 0 0 var(--retro-sys-spacing-lg);
        color:  var(--retro-sys-color-on-surface-variant);
    }

    .retro-admin-modal__body h3 {
        margin:      var(--retro-sys-spacing-lg) 0 var(--retro-sys-spacing-sm);
        font-size:   var(--retro-sys-typescale-title-small-size);
        font-weight: 700;
        color:       var(--retro-sys-color-on-surface);
    }

    body.retro-admin-modal-open {
        overflow: hidden;
    }

    body.retro-admin-modal-open .retro-sidebar {
        z-index: 0;
    }

    .retro-layout:has(.retro-admin-modal.is-open) .retro-sidebar,
    .retro-layout:has(.retro-branches-modal:not([hidden])) .retro-sidebar {
        z-index: 0;
    }

    /* Mobile: full-bleed sheet, no X close, taller title bar, side-by-side footer. */
    @media (max-width: 767px) {
        .retro-admin-modal {
            padding: 0;
            align-items: stretch;
            justify-content: stretch;
        }

        .retro-admin-modal__panel,
        .retro-admin-modal__panel--sm,
        .retro-admin-modal__panel--lg {
            width: 100%;
            max-width: none;
            height: 100%;
            max-height: none;
            min-height: 100%;
            margin-top: 0;
            border-radius: 0;
            grid-template-columns: minmax(0, 1fr);
            box-shadow: none;
        }

        .retro-admin-modal__panel > .retro-admin-modal__close {
            display: none !important;
        }

        .retro-admin-modal__head {
            grid-column: 1 / -1;
            height: auto;
            min-height: calc(var(--retro-sys-spacing-4xl) + var(--retro-sys-spacing-md));
            max-height: none;
            padding: var(--retro-sys-spacing-lg) var(--retro-sys-spacing-xl);
            padding-top: max(var(--retro-sys-spacing-lg), env(safe-area-inset-top, 0px));
            cursor: default;
            touch-action: auto;
            user-select: text;
            overflow: visible;
        }

        #wpbody-content .retro-admin-modal__head h2.retro-admin-modal__title,
        .retro-root .retro-admin-modal__head h2.retro-admin-modal__title,
        .retro-admin-modal__head .retro-admin-modal__title {
            font-size: var(--retro-sys-typescale-title-medium-size, 1.125rem);
            line-height: 1.35;
            white-space: normal;
            overflow: visible;
            text-overflow: unset;
        }

        .retro-admin-modal__body {
            padding: var(--retro-sys-spacing-lg) var(--retro-sys-spacing-xl);
        }

        .retro-admin-modal__footer {
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: stretch;
            justify-content: stretch;
            gap: var(--retro-sys-spacing-sm);
            padding: var(--retro-sys-spacing-md) var(--retro-sys-spacing-lg);
            padding-bottom: max(var(--retro-sys-spacing-md), env(safe-area-inset-bottom, 0px));
        }

        .retro-admin-modal__footer .retro-btn,
        .retro-admin-modal__footer--split .retro-btn {
            flex: 1 1 0;
            min-width: 0;
            min-height: var(--retro-sys-comp-height-touch, 44px);
            justify-content: center;
        }
    }

}