@shamar/adonis 0.1.0

package/assets/input.css

@@ -0,0 +1,2286 @@
+@import "tailwindcss";
+
+/* Package UI (Edge templates + client JS). */
+@source "../resources/views/**/*.edge";
+@source "./shamar-ui.js";
+
+/*
+ * App schemas may inject Tailwind via:
+ *   .extraAttributes({ class: '…' })
+ *   .extraInputAttributes({ class: '…' })
+ * Scan consumer apps in this monorepo so those utilities are not purged.
+ */
+@source "../../../apps/**/*.{ts,js,edge}";
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+  /* Brand primary scale — #F1511B at 500 */
+  --color-primary-50: #fff4f0;
+  --color-primary-100: #fee9e2;
+  --color-primary-200: #fdc9b8;
+  --color-primary-300: #f89a72;
+  --color-primary-400: #f36d3d;
+  --color-primary-500: #f1511b;
+  --color-primary-600: #e04a18;
+  --color-primary-700: #c94115;
+  --color-primary-800: #a23512;
+  --color-primary-900: #7a280e;
+  --color-primary-950: #451a0a;
+
+  /* Gray scale (Loom dark surfaces) */
+  --color-gray-300: #d1d5db;
+  --color-gray-400: #9ca3af;
+  --color-gray-500: #6b7280;
+  --color-gray-600: #4b5563;
+  --color-gray-700: #374151;
+  --color-gray-800: #1f2937;
+  --color-gray-900: #111827;
+  --color-gray-950: #0a1018;
+  --color-gray-50: #f9fafb;
+  --color-gray-100: #f3f4f6;
+  --color-gray-200: #e5e7eb;
+
+  /* Legacy shamar-* aliases (map to primary) */
+  --color-shamar-primary: #f1511b;
+  --color-shamar-primary-50: #fff4f0;
+  --color-shamar-primary-100: #fee9e2;
+  --color-shamar-primary-600: #f1511b;
+  --color-shamar-primary-700: #c94115;
+  --color-shamar-primary-800: #a23512;
+  --color-shamar-accent: #286291;
+  --color-shamar-accent-50: #e8f0f7;
+  --color-shamar-accent-100: #d1e1ef;
+  --color-shamar-accent-600: #286291;
+  --color-shamar-accent-700: #1f4d73;
+  --color-shamar-surface: #ffffff;
+  --color-shamar-muted: #64748b;
+
+  /* Loom semantic tokens (brand-mapped to primary orange) */
+  --color-body: #475569;
+  --color-body-subtle: #64748b;
+  --color-heading: #0f172a;
+  --color-neutral-primary: #ffffff;
+  --color-neutral-secondary: #fff4f0;
+  --color-neutral-tertiary: #fee9e2;
+  --color-default: #fdc9b8;
+  --color-fg-brand: #f1511b;
+  --color-fg-brand-strong: #a23512;
+  --color-brand-soft: #fee9e2;
+  --color-brand-softer: #fee9e2;
+  --color-fg-danger: #b91c1c;
+  --color-danger-soft: #fef2f2;
+  --color-success-soft: #ecfdf5;
+  --color-success-strong: #047857;
+  --color-warning-soft: #fffbeb;
+  --color-warning-strong: #b45309;
+  --color-toast-success-bg: #059669;
+  --color-toast-success-border: #047857;
+  --color-toast-success-glow: rgb(5 150 105 / 28%);
+  --color-toast-success-title: #ffffff;
+  --color-toast-success-body: #d1fae5;
+  --color-toast-success-icon: #ecfdf5;
+  --color-toast-error-bg: #dc2626;
+  --color-toast-error-border: #b91c1c;
+  --color-toast-error-glow: rgb(220 38 38 / 28%);
+  --color-toast-error-title: #ffffff;
+  --color-toast-error-body: #fee2e2;
+  --color-toast-error-icon: #fef2f2;
+  --color-toast-warning-bg: #d97706;
+  --color-toast-warning-border: #b45309;
+  --color-toast-warning-glow: rgb(217 119 6 / 28%);
+  --color-toast-warning-title: #ffffff;
+  --color-toast-warning-body: #fef3c7;
+  --color-toast-warning-icon: #fffbeb;
+  --color-toast-info-bg: #2563eb;
+  --color-toast-info-border: #1d4ed8;
+  --color-toast-info-glow: rgb(37 99 235 / 28%);
+  --color-toast-info-title: #ffffff;
+  --color-toast-info-body: #dbeafe;
+  --color-toast-info-icon: #eff6ff;
+  --color-shamar-shell: color-mix(in srgb, var(--color-primary-50) 35%, #ffffff);
+  --color-card-border: var(--color-gray-200);
+  --color-surface-hover: var(--color-neutral-tertiary);
+  --color-surface-header: color-mix(in srgb, var(--color-neutral-tertiary) 50%, transparent);
+  --color-surface-inset: color-mix(in srgb, var(--color-neutral-tertiary) 45%, transparent);
+  --color-surface-row-hover: color-mix(in srgb, var(--color-neutral-tertiary) 30%, transparent);
+  --color-badge-neutral: var(--color-neutral-tertiary);
+}
+
+.dark {
+  /* Calm dark: lighter shell, darker elevated cards */
+  --color-body: var(--color-gray-300);
+  --color-body-subtle: var(--color-gray-400);
+  --color-heading: #f3f4f6;
+  --color-neutral-primary: var(--color-gray-900);
+  --color-neutral-secondary: var(--color-gray-800);
+  --color-neutral-tertiary: #151c28;
+  --color-default: var(--color-gray-700);
+  --color-fg-brand: var(--color-primary-500);
+  --color-fg-brand-strong: var(--color-primary-400);
+  --color-brand-soft: var(--color-primary-900);
+  --color-brand-softer: var(--color-primary-950);
+  --color-shamar-shell: var(--color-gray-800);
+  --color-card-border: color-mix(in srgb, var(--color-gray-600) 55%, transparent);
+  --color-fg-danger: #f87171;
+  --color-danger-soft: #450a0a;
+  --color-success-soft: #064e3b;
+  --color-success-strong: #6ee7b7;
+  --color-warning-soft: #451a03;
+  --color-warning-strong: #fcd34d;
+  --color-toast-success-bg: #065f46;
+  --color-toast-success-border: #047857;
+  --color-toast-success-glow: rgb(16 185 129 / 22%);
+  --color-toast-success-title: #ecfdf5;
+  --color-toast-success-body: #a7f3d0;
+  --color-toast-success-icon: #d1fae5;
+  --color-toast-error-bg: #991b1b;
+  --color-toast-error-border: #b91c1c;
+  --color-toast-error-glow: rgb(248 113 113 / 20%);
+  --color-toast-error-title: #fef2f2;
+  --color-toast-error-body: #fecaca;
+  --color-toast-error-icon: #fee2e2;
+  --color-toast-warning-bg: #92400e;
+  --color-toast-warning-border: #b45309;
+  --color-toast-warning-glow: rgb(251 191 36 / 18%);
+  --color-toast-warning-title: #fffbeb;
+  --color-toast-warning-body: #fde68a;
+  --color-toast-warning-icon: #fef3c7;
+  --color-toast-info-bg: #1e40af;
+  --color-toast-info-border: #1d4ed8;
+  --color-toast-info-glow: rgb(96 165 250 / 18%);
+  --color-toast-info-title: #eff6ff;
+  --color-toast-info-body: #bfdbfe;
+  --color-toast-info-icon: #dbeafe;
+  --color-surface-hover: color-mix(in srgb, var(--color-gray-700) 50%, var(--color-gray-900));
+  --color-surface-header: color-mix(in srgb, var(--color-gray-800) 65%, var(--color-gray-900));
+  --color-surface-inset: color-mix(in srgb, var(--color-gray-800) 55%, var(--color-gray-900));
+  --color-surface-row-hover: color-mix(in srgb, var(--color-gray-700) 35%, var(--color-gray-900));
+  --color-badge-neutral: color-mix(in srgb, var(--color-gray-700) 45%, var(--color-gray-900));
+}
+
+:where(.dark, .dark *) {
+  color-scheme: dark;
+}
+
+/* All native controls follow brand + light/dark tokens (including future inputs). */
+:where(html) {
+  accent-color: var(--color-fg-brand);
+}
+
+:where(.dark, .dark *) {
+  accent-color: var(--color-fg-brand);
+}
+
+input[type='checkbox'],
+input[type='radio'],
+input[type='range'],
+input[type='color'],
+progress,
+meter {
+  accent-color: var(--color-fg-brand);
+}
+
+input[type='checkbox'],
+input[type='radio'] {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  margin: 0;
+  color: var(--color-fg-brand);
+  accent-color: var(--color-fg-brand);
+  cursor: pointer;
+  vertical-align: middle;
+}
+
+/* Soft-rounded themed checkbox (native radius is unreliable). */
+input[type='checkbox'] {
+  -webkit-appearance: none;
+  appearance: none;
+  border: 1.5px solid var(--color-default);
+  border-radius: 0.3rem;
+  background-color: var(--color-neutral-primary);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 0.7rem;
+  transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
+}
+
+input[type='checkbox']:hover:not(:disabled) {
+  border-color: color-mix(in srgb, var(--color-fg-brand) 55%, var(--color-default));
+}
+
+input[type='checkbox']:checked {
+  background-color: var(--color-fg-brand);
+  border-color: var(--color-fg-brand);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5 6.5 11.5 12.5 4.5'/%3E%3C/svg%3E");
+}
+
+input[type='checkbox']:indeterminate {
+  background-color: var(--color-fg-brand);
+  border-color: var(--color-fg-brand);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M3.5 8h9'/%3E%3C/svg%3E");
+}
+
+input[type='radio'] {
+  border-radius: 9999px;
+}
+
+input[type='checkbox']:focus-visible,
+input[type='radio']:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-fg-brand) 28%, transparent);
+}
+
+input[type='checkbox']:disabled,
+input[type='radio']:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+[x-cloak] { display: none !important; }
+
+a[href],
+button:not(:disabled),
+[role='button']:not([aria-disabled='true']),
+[role='tab'],
+label[for],
+label:has(input, select, textarea),
+summary,
+select,
+input[type='checkbox'],
+input[type='radio'],
+.shamar-interactive {
+  cursor: pointer;
+}
+
+button:disabled,
+[aria-disabled='true'] {
+  cursor: not-allowed;
+}
+
+.nav-item {
+  color: var(--color-body);
+}
+@media (hover: hover) {
+  .nav-item:hover {
+    background-color: var(--color-primary-100);
+    color: var(--color-fg-brand);
+  }
+}
+.nav-item.nav-active {
+  background-color: var(--color-primary-200);
+  color: var(--color-fg-brand-strong);
+  font-weight: 600;
+}
+
+:where(.dark, .dark *) .nav-item:hover {
+  background-color: var(--color-surface-hover);
+  color: var(--color-heading);
+}
+
+:where(.dark, .dark *) .nav-item.nav-active {
+  background-color: var(--color-surface-inset);
+  color: var(--color-fg-brand);
+  font-weight: 600;
+}
+
+@utility shamar-card {
+  border-radius: 0.75rem;
+  border: 1px solid var(--color-card-border);
+  background-color: var(--color-neutral-primary);
+}
+
+fieldset.shamar-card {
+  border: 1px solid var(--color-card-border);
+  margin: 0;
+  min-width: 0;
+  background-color: var(--color-neutral-primary);
+}
+
+:where(.dark, .dark *) .shamar-card,
+:where(.dark, .dark *) fieldset.shamar-card {
+  background-color: var(--color-neutral-primary);
+}
+
+/* Form Section — card with header / optional description + icon */
+.shamar-form-section__header {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 1rem 1.25rem;
+  border-bottom: 1px solid var(--color-card-border);
+  background-color: var(--color-surface-header, var(--color-neutral-secondary));
+}
+
+.shamar-form-section__header--centered {
+  align-items: center;
+}
+
+.shamar-form-section__icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 0.5rem;
+  color: var(--color-fg-brand);
+  background-color: var(--color-brand-soft);
+}
+
+.shamar-form-section__titles {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-width: 0;
+}
+
+.shamar-form-section__title {
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--color-heading);
+  line-height: 1.35;
+}
+
+.shamar-form-section__description {
+  margin: 0.25rem 0 0;
+  font-size: 0.8125rem;
+  color: var(--color-body-subtle, var(--color-shamar-muted));
+  line-height: 1.4;
+}
+
+.shamar-form-section__body {
+  padding: 1.25rem 1.25rem 1.75rem;
+}
+
+.shamar-wizard__panel {
+  padding-bottom: 0.5rem;
+}
+
+.shamar-radio {
+  padding-bottom: 0.15rem;
+}
+
+/* Form Fieldset — legend grouping (lighter than Section card) */
+.shamar-form-fieldset {
+  margin: 0;
+  min-width: 0;
+  padding: 0.75rem 1rem 1rem;
+  border: 1px solid var(--color-card-border);
+  border-radius: 0.75rem;
+  background-color: transparent;
+}
+
+.shamar-form-fieldset--card {
+  background-color: var(--color-neutral-primary);
+}
+
+.shamar-form-section--plain {
+  border: 1px solid var(--color-card-border);
+  background-color: transparent;
+}
+
+.shamar-form-fieldset__legend {
+  padding: 0 0.35rem;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--color-heading);
+}
+
+.shamar-form-fieldset__description {
+  margin: 0 0 0.75rem;
+  font-size: 0.8125rem;
+  color: var(--color-body-subtle, var(--color-shamar-muted));
+}
+
+:where(.dark, .dark *) .shamar-form-fieldset {
+  border-color: var(--color-card-border);
+}
+
+.shamar-dialog-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  background-color: color-mix(in srgb, #000 40%, transparent);
+}
+
+.shamar-dialog-panel {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  z-index: 51;
+  display: flex;
+  flex-direction: column;
+  max-width: calc(100vw - 1.5rem);
+  max-height: calc(100vh - 1.5rem);
+  border: 1px solid var(--color-card-border);
+  border-radius: 0.75rem;
+  background-color: var(--color-neutral-primary);
+  overflow: hidden;
+}
+
+.shamar-dialog-panel.is-fullscreen {
+  inset: 0.75rem !important;
+  top: 0.75rem !important;
+  left: 0.75rem !important;
+  width: auto !important;
+  height: auto !important;
+  max-width: none;
+  max-height: none;
+  transform: none !important;
+}
+
+.shamar-dialog-panel.is-prompt {
+  width: min(28rem, calc(100vw - 1.5rem)) !important;
+  height: auto !important;
+  max-height: calc(100vh - 1.5rem);
+}
+
+.shamar-dialog-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  border-bottom: 1px solid var(--color-card-border);
+  padding: 0.625rem 0.875rem;
+  cursor: move;
+  user-select: none;
+}
+
+.shamar-dialog-body {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: 1rem;
+}
+
+.shamar-embed-section + .shamar-embed-section {
+  margin-top: 1.25rem;
+  padding-top: 1.25rem;
+  border-top: 1px solid var(--color-card-border);
+}
+
+.shamar-embed-section__header {
+  margin-bottom: 1rem;
+}
+
+.shamar-embed-section .shamar-field--readonly .shamar-field__value {
+  padding: 0;
+  border: 0;
+  background: transparent;
+}
+
+.shamar-dialog-footer {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  border-top: 1px solid var(--color-card-border);
+  padding: 0.75rem 0.875rem;
+  background-color: var(--color-neutral-primary);
+}
+
+.shamar-dialog-body--prompt {
+  padding-top: 1.25rem;
+  padding-bottom: 1.25rem;
+}
+
+.shamar-dialog-prompt-icon {
+  display: flex;
+  height: 2.25rem;
+  width: 2.25rem;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+}
+
+.shamar-dialog-prompt-icon.is-danger {
+  background-color: var(--color-danger-soft);
+  color: var(--color-fg-danger);
+}
+
+.shamar-dialog-prompt-icon.is-warning {
+  background-color: var(--color-warning-soft);
+  color: var(--color-warning-strong);
+}
+
+.shamar-dialog-prompt-icon.is-info {
+  background-color: var(--color-brand-soft);
+  color: var(--color-fg-brand);
+}
+
+.shamar-dialog-prompt-icon.is-success {
+  background-color: var(--color-success-soft);
+  color: var(--color-success-strong);
+}
+
+.shamar-bulk-bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.75rem 1rem;
+  border-top: 1px solid var(--color-card-border);
+  background-color: var(--color-surface-header, var(--color-neutral-primary));
+  padding: 0.625rem 1rem;
+}
+
+.shamar-bulk-bar__meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem 0.75rem;
+  min-width: 0;
+}
+
+.shamar-bulk-bar__count {
+  font-size: 0.875rem;
+  color: var(--color-body);
+  font-weight: 500;
+}
+
+.shamar-bulk-bar__link {
+  border: 0;
+  background: transparent;
+  padding: 0;
+  font-size: 0.75rem;
+  color: var(--color-body-subtle);
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.shamar-bulk-bar__link:hover {
+  color: var(--color-fg-brand);
+}
+
+.shamar-bulk-menu {
+  position: relative;
+}
+
+.shamar-bulk-menu__trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  border: 1px solid var(--color-card-border);
+  border-radius: 0.375rem;
+  background-color: var(--color-neutral-primary);
+  padding: 0.375rem 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--color-body);
+  cursor: pointer;
+}
+
+.shamar-bulk-menu__trigger:hover {
+  background-color: var(--color-surface-hover);
+}
+
+.shamar-bulk-menu__trigger[aria-expanded="true"] {
+  border-color: var(--color-fg-brand);
+  color: var(--color-heading);
+}
+
+.shamar-bulk-menu__chevron {
+  width: 0.875rem;
+  height: 0.875rem;
+  transition: transform 120ms ease;
+}
+
+.shamar-bulk-menu__chevron.is-open {
+  transform: rotate(180deg);
+}
+
+.shamar-bulk-menu__panel {
+  position: absolute;
+  left: 0;
+  top: calc(100% + 0.25rem);
+  z-index: 30;
+  min-width: 12rem;
+  padding: 0.25rem;
+  border: 1px solid var(--color-card-border);
+  border-radius: 0.5rem;
+  background-color: var(--color-neutral-primary);
+  box-shadow: 0 10px 24px color-mix(in srgb, #000 12%, transparent);
+}
+
+.shamar-bulk-menu__item {
+  display: block;
+  width: 100%;
+  border: 0;
+  border-radius: 0.375rem;
+  background: transparent;
+  padding: 0.5rem 0.75rem;
+  text-align: left;
+  font-size: 0.875rem;
+  color: var(--color-body);
+  cursor: pointer;
+}
+
+.shamar-bulk-menu__item:hover {
+  background-color: var(--color-surface-hover);
+  color: var(--color-heading);
+}
+
+.shamar-bulk-menu__item.is-danger {
+  color: var(--color-fg-danger);
+}
+
+.shamar-bulk-menu__item.is-danger:hover {
+  background-color: var(--color-danger-soft);
+  color: var(--color-fg-danger);
+}
+
+.shamar-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  max-width: 100%;
+  padding: 0.125rem 0.25rem 0.125rem 0.5rem;
+  border-radius: 0.375rem;
+  background-color: var(--color-brand-soft);
+  color: var(--color-fg-brand);
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+.shamar-chip--group {
+  background-color: var(--color-badge-neutral, var(--color-surface-hover));
+  color: var(--color-heading);
+}
+
+.shamar-chip__remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: 0.25rem;
+  padding: 0.125rem;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+}
+
+.shamar-chip__remove:hover {
+  background-color: color-mix(in srgb, currentColor 16%, transparent);
+}
+
+.shamar-toolbar-menu {
+  position: relative;
+}
+
+.shamar-toolbar-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  border: 1px solid var(--color-card-border);
+  border-radius: 0.375rem;
+  background-color: var(--color-neutral-primary);
+  padding: 0.375rem 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--color-body);
+  cursor: pointer;
+}
+
+.shamar-toolbar-btn:hover {
+  background-color: var(--color-surface-hover);
+}
+
+.shamar-toolbar-btn.is-active {
+  border-color: var(--color-fg-brand);
+  color: var(--color-heading);
+}
+
+.shamar-toolbar-btn__badge {
+  display: inline-flex;
+  min-width: 1.25rem;
+  height: 1.25rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  background-color: var(--color-fg-brand);
+  color: #fff;
+  font-size: 0.6875rem;
+  font-weight: 700;
+  padding: 0 0.35rem;
+}
+
+.shamar-toolbar-panel {
+  position: absolute;
+  right: 0;
+  top: calc(100% + 0.35rem);
+  z-index: 40;
+  width: min(18rem, calc(100vw - 2rem));
+  border: 1px solid var(--color-card-border);
+  border-radius: 0.625rem;
+  background-color: var(--color-neutral-primary);
+  box-shadow: 0 12px 28px color-mix(in srgb, #000 14%, transparent);
+  overflow: hidden;
+}
+
+.shamar-toolbar-panel__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.75rem 0.875rem 0.5rem;
+}
+
+.shamar-toolbar-panel__list {
+  padding: 0.25rem;
+  max-height: 18rem;
+  overflow: auto;
+}
+
+.shamar-toolbar-panel__item {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  border: 0;
+  border-radius: 0.375rem;
+  background: transparent;
+  padding: 0.55rem 0.75rem;
+  text-align: left;
+  font-size: 0.875rem;
+  color: var(--color-body);
+  cursor: pointer;
+}
+
+.shamar-toolbar-panel__item:hover,
+.shamar-toolbar-panel__item.is-selected {
+  background-color: var(--color-surface-hover);
+  color: var(--color-heading);
+}
+
+.shamar-toolbar-panel__back {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  width: 100%;
+  border: 0;
+  border-bottom: 1px solid var(--color-card-border);
+  background: transparent;
+  padding: 0.65rem 0.875rem;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--color-heading);
+  cursor: pointer;
+}
+
+.shamar-toolbar-panel__back:hover {
+  background-color: var(--color-surface-hover);
+}
+
+.shamar-list-group__cell {
+  padding: 0.5rem 1rem;
+  background: color-mix(in srgb, var(--color-surface-header, #f5f5f5) 88%, transparent);
+  border-top: 1px solid var(--color-card-border);
+}
+
+.shamar-list-group__label {
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  color: var(--color-heading);
+}
+
+.shamar-list-group__count {
+  margin-left: 0.5rem;
+  font-size: 0.75rem;
+  color: var(--color-body-subtle);
+}
+
+.shamar-list-group__count::before {
+  content: '· ';
+}
+
+.shamar-secret-reveal {
+  display: flex;
+  align-items: stretch;
+  gap: 0.5rem;
+  margin-top: 0.25rem;
+  border: 1px solid var(--color-card-border);
+  border-radius: 0.5rem;
+  background-color: var(--color-neutral-secondary, var(--color-neutral-primary));
+  overflow: hidden;
+}
+
+.shamar-secret-reveal__value {
+  flex: 1;
+  min-width: 0;
+  padding: 0.75rem 0.875rem;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 0.75rem;
+  line-height: 1.4;
+  word-break: break-all;
+  color: var(--color-heading);
+}
+
+.shamar-secret-reveal__copy {
+  flex-shrink: 0;
+  align-self: stretch;
+  padding: 0 0.875rem;
+  border: none;
+  border-left: 1px solid var(--color-card-border);
+  background: transparent;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--color-fg-brand);
+  cursor: pointer;
+}
+
+.shamar-secret-reveal__copy:hover {
+  background-color: var(--color-surface-hover);
+}
+
+.shamar-dialog-resize-handle {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 1rem;
+  height: 1rem;
+  cursor: nwse-resize;
+}
+
+#shamar-toast-stack {
+  position: fixed;
+  top: 1rem;
+  right: 1rem;
+  z-index: 60;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  width: min(26rem, calc(100vw - 2rem));
+  pointer-events: none;
+}
+
+.shamar-toast {
+  pointer-events: auto;
+  display: flex;
+  align-items: flex-start;
+  gap: 0.875rem;
+  padding: 0.95rem 1rem;
+  border-radius: 0.9rem;
+  border: 1px solid transparent;
+  box-shadow:
+    0 18px 40px -16px var(--shamar-toast-glow, rgb(15 23 42 / 18%)),
+    0 8px 16px -12px rgb(15 23 42 / 16%);
+  opacity: 0;
+  transform: translateX(0.75rem) scale(0.98);
+  transition:
+    opacity 0.2s ease,
+    transform 0.2s ease;
+}
+
+.shamar-toast.is-visible {
+  opacity: 1;
+  transform: translateX(0) scale(1);
+}
+
+.shamar-toast--success {
+  background: var(--color-toast-success-bg);
+  border-color: var(--color-toast-success-border);
+  --shamar-toast-glow: var(--color-toast-success-glow);
+}
+
+.shamar-toast--error {
+  background: var(--color-toast-error-bg);
+  border-color: var(--color-toast-error-border);
+  --shamar-toast-glow: var(--color-toast-error-glow);
+}
+
+.shamar-toast--warning {
+  background: var(--color-toast-warning-bg);
+  border-color: var(--color-toast-warning-border);
+  --shamar-toast-glow: var(--color-toast-warning-glow);
+}
+
+.shamar-toast--info {
+  background: var(--color-toast-info-bg);
+  border-color: var(--color-toast-info-border);
+  --shamar-toast-glow: var(--color-toast-info-glow);
+}
+
+.shamar-toast__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 2.25rem;
+  height: 2.25rem;
+  border-radius: 9999px;
+  background: rgb(255 255 255 / 16%);
+  color: var(--shamar-toast-icon, #ffffff);
+}
+
+.shamar-toast--success .shamar-toast__icon {
+  --shamar-toast-icon: var(--color-toast-success-icon);
+}
+
+.shamar-toast--error .shamar-toast__icon {
+  --shamar-toast-icon: var(--color-toast-error-icon);
+}
+
+.shamar-toast--warning .shamar-toast__icon {
+  --shamar-toast-icon: var(--color-toast-warning-icon);
+}
+
+.shamar-toast--info .shamar-toast__icon {
+  --shamar-toast-icon: var(--color-toast-info-icon);
+}
+
+.shamar-toast__icon svg {
+  width: 1.15rem;
+  height: 1.15rem;
+}
+
+.shamar-toast__content {
+  flex: 1;
+  min-width: 0;
+  padding-top: 0.1rem;
+}
+
+.shamar-toast__title {
+  margin: 0;
+  font-size: 0.95rem;
+  line-height: 1.35;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  color: var(--shamar-toast-title, #ffffff);
+}
+
+.shamar-toast--success .shamar-toast__title {
+  --shamar-toast-title: var(--color-toast-success-title);
+}
+
+.shamar-toast--error .shamar-toast__title {
+  --shamar-toast-title: var(--color-toast-error-title);
+}
+
+.shamar-toast--warning .shamar-toast__title {
+  --shamar-toast-title: var(--color-toast-warning-title);
+}
+
+.shamar-toast--info .shamar-toast__title {
+  --shamar-toast-title: var(--color-toast-info-title);
+}
+
+.shamar-toast__body {
+  margin: 0.2rem 0 0;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  color: var(--shamar-toast-body, rgb(255 255 255 / 88%));
+}
+
+.shamar-toast--success .shamar-toast__body {
+  --shamar-toast-body: var(--color-toast-success-body);
+}
+
+.shamar-toast--error .shamar-toast__body {
+  --shamar-toast-body: var(--color-toast-error-body);
+}
+
+.shamar-toast--warning .shamar-toast__body {
+  --shamar-toast-body: var(--color-toast-warning-body);
+}
+
+.shamar-toast--info .shamar-toast__body {
+  --shamar-toast-body: var(--color-toast-info-body);
+}
+
+.shamar-toast__dismiss {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  margin: -0.15rem -0.15rem 0 0;
+  border: 0;
+  border-radius: 0.5rem;
+  background: transparent;
+  color: var(--shamar-toast-body, rgb(255 255 255 / 88%));
+  font-size: 1.15rem;
+  line-height: 1;
+  cursor: pointer;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+
+.shamar-toast__dismiss:hover {
+  background: rgb(255 255 255 / 12%);
+  color: var(--shamar-toast-title, #ffffff);
+}
+
+.shamar-kanban-grid {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
+@media (min-width: 640px) {
+  .shamar-kanban-grid {
+    grid-template-columns: repeat(
+      min(2, var(--shamar-kanban-cols, 4)),
+      minmax(0, 1fr)
+    );
+  }
+}
+
+@media (min-width: 768px) {
+  .shamar-kanban-grid {
+    grid-template-columns: repeat(
+      min(3, var(--shamar-kanban-cols, 4)),
+      minmax(0, 1fr)
+    );
+  }
+}
+
+@media (min-width: 1024px) {
+  .shamar-kanban-grid {
+    grid-template-columns: repeat(var(--shamar-kanban-cols, 4), minmax(0, 1fr));
+  }
+}
+
+/** Grouped board: horizontal stage columns, cards stacked inside each. */
+.shamar-kanban-board {
+  display: flex;
+  gap: 1rem;
+  align-items: stretch;
+  overflow-x: auto;
+  padding-bottom: 0.25rem;
+}
+
+.shamar-kanban-column {
+  display: flex;
+  flex-direction: column;
+  flex: 0 0 min(18rem, 85vw);
+  min-height: 16rem;
+  max-height: min(70vh, 42rem);
+  border-radius: 0.75rem;
+  border: 1px solid var(--color-border-default, rgb(0 0 0 / 10%));
+  background: var(--color-surface-header, rgb(0 0 0 / 3%));
+}
+
+.shamar-kanban-column__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.75rem 0.875rem;
+  border-bottom: 1px solid var(--color-border-default, rgb(0 0 0 / 8%));
+}
+
+.shamar-kanban-column__title {
+  margin: 0;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--color-text-heading, inherit);
+  text-transform: capitalize;
+}
+
+.shamar-kanban-column__count {
+  font-size: 0.75rem;
+  color: var(--color-text-body-subtle, rgb(0 0 0 / 45%));
+  font-variant-numeric: tabular-nums;
+}
+
+.shamar-kanban-column__body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  overflow-y: auto;
+  flex: 1 1 auto;
+}
+
+.shamar-kanban-column__empty {
+  margin: 0;
+  padding: 1.5rem 0.5rem;
+  text-align: center;
+  font-size: 0.8125rem;
+  color: var(--color-text-body-subtle, rgb(0 0 0 / 45%));
+}
+
+@utility shamar-focus-ring {
+  border-color: var(--color-fg-brand);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-fg-brand) 28%, transparent);
+  outline: none;
+}
+
+/** Themed checkbox input — do not put this class on the field label wrapper. */
+@utility shamar-checkbox-input {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  margin: 0;
+  -webkit-appearance: none;
+  appearance: none;
+  border: 1.5px solid var(--color-default);
+  border-radius: 0.3rem;
+  background-color: var(--color-neutral-primary);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 0.7rem;
+  accent-color: var(--color-fg-brand);
+  color: var(--color-fg-brand);
+  cursor: pointer;
+  vertical-align: middle;
+  transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
+
+  &:hover:not(:disabled) {
+    border-color: color-mix(in srgb, var(--color-fg-brand) 55%, var(--color-default));
+  }
+
+  &:checked {
+    background-color: var(--color-fg-brand);
+    border-color: var(--color-fg-brand);
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5 6.5 11.5 12.5 4.5'/%3E%3C/svg%3E");
+  }
+
+  &:indeterminate {
+    background-color: var(--color-fg-brand);
+    border-color: var(--color-fg-brand);
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M3.5 8h9'/%3E%3C/svg%3E");
+  }
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-fg-brand) 28%, transparent);
+  }
+
+  &:disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
+}
+
+/** Themed radio — same tokens as checkbox for future multi-choice fields. */
+@utility shamar-radio {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  margin: 0;
+  accent-color: var(--color-fg-brand);
+  color: var(--color-fg-brand);
+  cursor: pointer;
+  vertical-align: middle;
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-fg-brand) 28%, transparent);
+    border-radius: 9999px;
+  }
+
+  &:disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
+}
+
+@utility shamar-input {
+  width: 100%;
+  border-radius: 0.5rem;
+  border: 1px solid var(--color-default);
+  background-color: var(--color-neutral-primary);
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: var(--color-heading);
+  outline: none;
+  accent-color: var(--color-fg-brand);
+  -webkit-appearance: none;
+  appearance: none;
+
+  &:focus,
+  &:focus-visible {
+    @apply shamar-focus-ring;
+  }
+
+  &::placeholder {
+    color: var(--color-body-subtle);
+  }
+
+  &[type='search']::-webkit-search-decoration,
+  &[type='search']::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+    appearance: none;
+  }
+}
+
+@utility shamar-select {
+  appearance: none;
+  border-radius: 0.5rem;
+  border: 1px solid var(--color-default);
+  background-color: var(--color-neutral-primary);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239ca3af' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.5rem center;
+  background-size: 0.875rem;
+  padding: 0.4375rem 1.75rem 0.4375rem 0.625rem;
+  font-size: 0.8125rem;
+  line-height: 1.25rem;
+  color: var(--color-heading);
+  outline: none;
+  accent-color: var(--color-fg-brand);
+  cursor: pointer;
+
+  &:focus,
+  &:focus-visible {
+    @apply shamar-focus-ring;
+  }
+}
+
+select.shamar-select option,
+select.shamar-input option {
+  background-color: var(--color-neutral-primary);
+  color: var(--color-heading);
+}
+
+.shamar-form-grid {
+  display: grid;
+  gap: 1.25rem;
+  grid-template-columns: repeat(var(--shamar-form-cols, 2), minmax(0, 1fr));
+}
+
+.shamar-detail-grid {
+  display: grid;
+  gap: 0;
+  grid-template-columns: repeat(var(--shamar-detail-cols, 2), minmax(0, 1fr));
+}
+
+@media (max-width: 639px) {
+  .shamar-form-grid,
+  .shamar-detail-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .shamar-field-cell,
+  .shamar-detail-cell {
+    grid-column: 1 / -1 !important;
+  }
+}
+
+.shamar-field-cell,
+.shamar-detail-cell {
+  min-width: 0;
+}
+
+.shamar-detail__label {
+  display: block;
+  margin: 0;
+  font-size: 0.75rem;
+  font-weight: 650;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  color: var(--color-heading);
+}
+
+.shamar-detail__label-row,
+.shamar-field__label-row {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 0.75rem;
+  margin-bottom: 0.5rem;
+}
+
+.shamar-detail__label-row {
+  margin-bottom: 0;
+}
+
+.shamar-detail__label-row .shamar-detail__label {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.shamar-field__label-row .shamar-field__label {
+  margin-bottom: 0;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.shamar-field__label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--color-heading);
+}
+
+.shamar-field__required {
+  color: var(--color-fg-danger);
+}
+
+.shamar-field__hint {
+  flex: 0 1 auto;
+  max-width: 55%;
+  margin: 0;
+  font-size: 0.75rem;
+  font-weight: 500;
+  line-height: 1.35;
+  text-align: right;
+  color: var(--color-body-subtle);
+}
+
+.shamar-field__help {
+  margin-top: 0.5rem;
+  font-size: 0.75rem;
+  line-height: 1.4;
+  color: var(--color-body-subtle);
+}
+
+.shamar-field__error {
+  margin-top: 0.375rem;
+  font-size: 0.75rem;
+  line-height: 1.4;
+  color: var(--color-fg-danger);
+}
+
+.shamar-field.is-invalid .shamar-field__label {
+  color: var(--color-fg-danger);
+}
+
+.shamar-input.is-invalid,
+.shamar-select.is-invalid,
+.shamar-m2m-checkboxes.is-invalid,
+[data-shamar-m2o-config].is-invalid,
+[data-shamar-m2m-config].is-invalid {
+  border-color: var(--color-fg-danger);
+}
+
+.shamar-input.is-invalid:focus,
+.shamar-select.is-invalid:focus {
+  outline-color: var(--color-fg-danger);
+  border-color: var(--color-fg-danger);
+}
+
+.shamar-field__value {
+  font-size: 0.875rem;
+  line-height: 1.5;
+  color: var(--color-body);
+}
+
+.shamar-field--readonly .shamar-field__value {
+  padding: 0.625rem 0.75rem;
+  border-radius: 0.5rem;
+  border: 1px solid var(--color-card-border);
+  background: var(--color-surface-inset);
+}
+
+.shamar-input-group {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+}
+
+.shamar-input-group .shamar-input {
+  flex: 1;
+  min-width: 0;
+}
+
+.shamar-input-group.has-prefix .shamar-input {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.shamar-input-group.has-suffix .shamar-input {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.shamar-input-group__affix {
+  display: inline-flex;
+  align-items: center;
+  padding: 0 0.75rem;
+  border: 1px solid var(--color-default);
+  background: var(--color-surface-inset);
+  color: var(--color-body-subtle);
+  font-size: 0.8125rem;
+  white-space: nowrap;
+}
+
+.shamar-input-group.has-prefix .shamar-input-group__affix:first-child {
+  border-right: 0;
+  border-top-left-radius: 0.5rem;
+  border-bottom-left-radius: 0.5rem;
+}
+
+.shamar-input-group.has-suffix .shamar-input-group__affix:last-child {
+  border-left: 0;
+  border-top-right-radius: 0.5rem;
+  border-bottom-right-radius: 0.5rem;
+}
+
+.shamar-input-group__affix--icon,
+.shamar-input-group__affix--action {
+  padding: 0 0.65rem;
+}
+
+.shamar-input-group__affix--action {
+  cursor: pointer;
+  background: var(--color-neutral-primary);
+  color: var(--color-body-subtle);
+}
+
+.shamar-input-group__affix--action:hover {
+  color: var(--color-heading);
+  background: var(--color-surface-hover, var(--color-neutral-secondary));
+}
+
+.shamar-field__counter {
+  margin: 0.35rem 0 0;
+  font-size: 0.75rem;
+  color: var(--color-body-subtle);
+  text-align: right;
+}
+
+.shamar-input--file {
+  padding: 0.4rem 0.5rem;
+}
+
+.shamar-toggle {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  width: 100%;
+  min-width: 0;
+  cursor: pointer;
+  user-select: none;
+}
+
+.shamar-toggle--inline {
+  min-height: 2.5rem;
+  padding: 0.375rem 0;
+}
+
+.shamar-toggle__text {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.shamar-toggle.is-disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.shamar-toggle__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.shamar-toggle__track {
+  position: relative;
+  width: 2.75rem;
+  height: 1.5rem;
+  flex-shrink: 0;
+  border-radius: 9999px;
+  background: var(--color-gray-300);
+  border: 1px solid color-mix(in srgb, var(--color-gray-400) 70%, transparent);
+  transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
+}
+
+:where(.dark, .dark *) .shamar-toggle__track {
+  background: var(--color-gray-700);
+  border-color: var(--color-gray-600);
+}
+
+.shamar-toggle__thumb {
+  position: absolute;
+  top: 0.125rem;
+  left: 0.125rem;
+  width: 1.125rem;
+  height: 1.125rem;
+  border-radius: 9999px;
+  background: #ffffff;
+  box-shadow: 0 1px 3px rgb(15 23 42 / 18%);
+  transition: transform 0.18s ease;
+}
+
+.shamar-toggle__input:focus-visible + .shamar-toggle__track {
+  @apply shamar-focus-ring;
+}
+
+.shamar-toggle__input:checked + .shamar-toggle__track {
+  background: var(--color-fg-brand);
+  border-color: color-mix(in srgb, var(--color-fg-brand) 80%, #000);
+}
+
+.shamar-toggle__input:checked + .shamar-toggle__track .shamar-toggle__thumb {
+  transform: translateX(1.25rem);
+}
+
+.shamar-toggle__label {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--color-heading);
+}
+
+.shamar-boolean {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  max-width: 100%;
+  border-radius: 9999px;
+  padding: 0.2rem 0.65rem 0.2rem 0.3rem;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  line-height: 1.2;
+  border: 1px solid transparent;
+}
+
+.shamar-boolean--custom {
+  padding-left: 0.35rem;
+}
+
+.shamar-boolean--icon-only {
+  padding: 0.3rem;
+}
+
+.shamar-boolean__mark {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 1.35rem;
+  height: 1.35rem;
+  border-radius: 9999px;
+  background: color-mix(in srgb, currentColor 14%, transparent);
+}
+
+.shamar-boolean__glyph {
+  font-size: 0.8rem;
+  line-height: 1;
+}
+
+.shamar-boolean__label {
+  padding-right: 0.15rem;
+  letter-spacing: 0.01em;
+}
+
+.shamar-boolean.is-true {
+  background: var(--color-success-soft);
+  color: var(--color-success-strong);
+  border-color: color-mix(in srgb, var(--color-success-strong) 18%, transparent);
+}
+
+.shamar-boolean.is-false {
+  background: var(--color-badge-neutral);
+  color: var(--color-body-subtle);
+  border-color: color-mix(in srgb, var(--color-card-border) 80%, transparent);
+}
+
+.shamar-field .shamar-select,
+.shamar-field-cell .shamar-select {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+}
+
+/* Custom select combobox (single + multi with chips). */
+.shamar-combobox {
+  position: relative;
+  width: 100%;
+  min-width: 0;
+}
+
+.shamar-combobox__control {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  min-height: 2.5rem;
+  width: 100%;
+  padding: 0.25rem 0.35rem 0.25rem 0.65rem;
+  border: 1px solid var(--color-default);
+  border-radius: 0.5rem;
+  background: var(--color-neutral-primary);
+  cursor: text;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.shamar-combobox.is-open .shamar-combobox__control,
+.shamar-combobox__control:focus-within {
+  border-color: var(--color-fg-brand);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-fg-brand) 28%, transparent);
+}
+
+.shamar-combobox.is-invalid .shamar-combobox__control {
+  border-color: var(--color-fg-danger);
+}
+
+.shamar-combobox.is-disabled .shamar-combobox__control {
+  opacity: 0.55;
+  cursor: not-allowed;
+  background: var(--color-surface-inset, var(--color-neutral-secondary));
+}
+
+.shamar-combobox__chips {
+  display: flex;
+  flex: 1 1 auto;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.35rem;
+  min-width: 0;
+}
+
+.shamar-combobox__chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.2rem;
+  max-width: 100%;
+  padding: 0.15rem 0.2rem 0.15rem 0.5rem;
+  border-radius: 999px;
+  background: var(--color-brand-soft);
+  color: var(--color-fg-brand);
+  font-size: 0.75rem;
+  font-weight: 550;
+  line-height: 1.25;
+}
+
+.shamar-combobox__chip-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.shamar-combobox__chip-remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.15rem;
+  height: 1.15rem;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+}
+
+.shamar-combobox__chip-remove:hover {
+  background: color-mix(in srgb, var(--color-fg-brand) 18%, transparent);
+}
+
+.shamar-combobox__search {
+  flex: 1 1 6rem;
+  min-width: 4rem;
+  width: auto;
+  margin: 0;
+  padding: 0.3rem 0;
+  border: 0;
+  background: transparent;
+  color: var(--color-heading);
+  font-size: 0.875rem;
+  outline: none;
+  box-shadow: none;
+}
+
+.shamar-combobox__search--single {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.shamar-combobox__search:disabled {
+  cursor: not-allowed;
+}
+
+.shamar-combobox__clear,
+.shamar-combobox__toggle {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  border: 0;
+  border-radius: 0.375rem;
+  background: transparent;
+  color: var(--color-body-subtle);
+  cursor: pointer;
+}
+
+.shamar-combobox__clear:hover,
+.shamar-combobox__toggle:hover {
+  color: var(--color-heading);
+  background: var(--color-surface-hover, var(--color-neutral-secondary));
+}
+
+.shamar-combobox__toggle {
+  color: var(--color-body-subtle);
+}
+
+.shamar-combobox.is-open .shamar-combobox__toggle {
+  color: var(--color-fg-brand);
+}
+
+.shamar-combobox__dropdown {
+  position: absolute;
+  z-index: 40;
+  top: calc(100% + 0.25rem);
+  left: 0;
+  right: 0;
+  max-height: 16rem;
+  overflow: auto;
+  padding: 0.35rem;
+  border: 1px solid var(--color-default);
+  border-radius: 0.5rem;
+  background: var(--color-neutral-primary);
+  box-shadow: 0 10px 30px color-mix(in srgb, #000 12%, transparent);
+}
+
+.shamar-combobox__option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  width: 100%;
+  padding: 0.45rem 0.6rem;
+  border: 0;
+  border-radius: 0.375rem;
+  background: transparent;
+  color: var(--color-heading);
+  font-size: 0.875rem;
+  text-align: left;
+  cursor: pointer;
+}
+
+.shamar-combobox__option:hover,
+.shamar-combobox__option.is-active {
+  background: var(--color-surface-hover, var(--color-neutral-secondary));
+}
+
+.shamar-combobox__option.is-selected {
+  color: var(--color-fg-brand);
+  font-weight: 550;
+}
+
+.shamar-combobox__option-check {
+  flex-shrink: 0;
+  color: var(--color-fg-brand);
+}
+
+.shamar-combobox__empty {
+  padding: 0.65rem 0.6rem;
+  color: var(--color-body-subtle);
+  font-size: 0.8125rem;
+}
+
+
+.shamar-field.text-right .shamar-input,
+.shamar-field.text-right .shamar-select,
+.shamar-field.text-right .shamar-combobox__search {
+  text-align: right;
+}
+
+.shamar-field.text-center .shamar-input,
+.shamar-field.text-center .shamar-select,
+.shamar-field.text-center .shamar-combobox__search {
+  text-align: center;
+}
+
+.shamar-field.text-justify .shamar-input,
+.shamar-field.text-justify .shamar-select,
+.shamar-field.text-justify .shamar-combobox__search {
+  text-align: justify;
+}
+
+
+/* Backward-compatible alias */
+.shamar-boolean-badge {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 9999px;
+  padding: 0.2rem 0.65rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+.shamar-boolean-badge.is-true {
+  background: var(--color-success-soft);
+  color: var(--color-success-strong);
+}
+
+.shamar-boolean-badge.is-false {
+  background: var(--color-badge-neutral);
+  color: var(--color-body-subtle);
+}
+
+.shamar-field[data-field-type="relation"] {
+  width: 100%;
+}
+
+.shamar-m2o {
+  width: 100%;
+}
+
+.shamar-m2o__row {
+  width: 100%;
+}
+
+.shamar-m2o__input {
+  min-height: 2.375rem;
+}
+
+.shamar-m2o__input.is-readonly {
+  cursor: default;
+  opacity: 0.85;
+}
+
+.shamar-m2o__dropdown {
+  min-width: 100%;
+}
+
+.shamar-m2o__dropdown li[role="option"],
+.shamar-m2m__dropdown li[role="option"],
+.shamar-m2m-table li {
+  cursor: pointer;
+}
+
+.shamar-m2o__dropdown svg,
+.shamar-m2m__dropdown svg,
+.shamar-m2m-table svg {
+  width: 0.875rem;
+  height: 0.875rem;
+  flex-shrink: 0;
+}
+
+.shamar-m2o__clear svg,
+.shamar-m2m .shamar-chip__remove svg {
+  width: 0.75rem;
+  height: 0.75rem;
+  flex-shrink: 0;
+}
+
+.shamar-m2o__open {
+  align-self: stretch;
+}
+
+.shamar-m2m {
+  width: 100%;
+}
+
+.shamar-m2m__box {
+  cursor: text;
+}
+
+.shamar-m2m__box.is-readonly {
+  cursor: default;
+  opacity: 0.85;
+}
+
+.shamar-m2m__box.is-open {
+  border-color: var(--color-fg-brand, currentColor);
+}
+
+.shamar-m2m__input {
+  min-height: 1.25rem;
+}
+
+.shamar-m2m__dropdown {
+  min-width: 100%;
+}
+
+.shamar-chip {
+  line-height: 1.25;
+}
+
+.shamar-m2m-checkboxes,
+.shamar-m2m-table {
+  width: 100%;
+}
+
+.shamar-m2m-table__card {
+  overflow: visible;
+}
+
+.shamar-m2m-table__toolbar {
+  position: relative;
+  z-index: 2;
+}
+
+.shamar-m2m-table__add {
+  position: relative;
+}
+
+.shamar-m2m-table__add-dropdown {
+  z-index: 50;
+}
+
+/* Let relation dropdowns escape form section cards. */
+.shamar-form-section:has(.shamar-m2m-table),
+.shamar-form-section:has(.shamar-m2o),
+.shamar-form-section:has(.shamar-m2m) {
+  overflow: visible;
+}
+
+.shamar-m2m-checkboxes__body--framed {
+  max-height: 28rem;
+  overflow: auto;
+  border: 1px solid var(--color-default);
+  border-radius: 0.5rem;
+  padding: 0.5rem;
+}
+
+.shamar-m2m-checkboxes__body--open {
+  max-height: none;
+  overflow: visible;
+  border: 0;
+  padding: 0;
+}
+
+.shamar-m2m-checkboxes__list {
+  display: grid;
+  grid-template-columns: repeat(var(--shamar-checkbox-cols, 1), minmax(0, 1fr));
+  gap: 0.125rem 0.5rem;
+}
+
+.shamar-m2m-checkboxes__clusters {
+  display: grid;
+  grid-template-columns: repeat(var(--shamar-checkbox-cols, 1), minmax(0, 1fr));
+  gap: 0.625rem;
+  align-items: start;
+}
+
+.shamar-m2m-checkboxes__cluster {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  border: 1px solid var(--color-default);
+  border-radius: 0.5rem;
+  background: var(--color-neutral-primary);
+  overflow: hidden;
+}
+
+.shamar-m2m-checkboxes__cluster-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.5rem 0.625rem;
+  border-bottom: 1px solid var(--color-default);
+  background: var(--color-surface-header, var(--color-neutral-secondary, transparent));
+}
+
+.shamar-m2m-checkboxes__cluster-count {
+  font-size: 0.65rem;
+  line-height: 1.25;
+  color: var(--color-body-subtle);
+  font-variant-numeric: tabular-nums;
+}
+
+.shamar-m2m-checkboxes__cluster-body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.0625rem;
+  padding: 0.375rem;
+}
+
+.shamar-m2m-checkboxes__clusters--cols-1,
+.shamar-m2m-checkboxes__list--cols-1 {
+  --shamar-checkbox-cols: 1;
+}
+
+.shamar-m2m-checkboxes__clusters--cols-2,
+.shamar-m2m-checkboxes__list--cols-2 {
+  --shamar-checkbox-cols: 2;
+}
+
+.shamar-m2m-checkboxes__clusters--cols-3,
+.shamar-m2m-checkboxes__list--cols-3 {
+  --shamar-checkbox-cols: 3;
+}
+
+.shamar-m2m-checkboxes__clusters--cols-4,
+.shamar-m2m-checkboxes__list--cols-4 {
+  --shamar-checkbox-cols: 4;
+}
+
+@media (max-width: 1024px) {
+  .shamar-m2m-checkboxes__clusters--cols-3,
+  .shamar-m2m-checkboxes__clusters--cols-4 {
+    --shamar-checkbox-cols: 2;
+  }
+}
+
+@media (max-width: 640px) {
+  .shamar-m2m-checkboxes__clusters,
+  .shamar-m2m-checkboxes__list {
+    --shamar-checkbox-cols: 1 !important;
+  }
+}
+
+.shamar-list-refresh {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  border-radius: 0.5rem;
+  border: 1px solid var(--color-default);
+  background: var(--color-neutral-primary);
+  color: var(--color-body-subtle);
+  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.shamar-list-refresh:hover {
+  color: var(--color-fg-brand);
+  border-color: var(--color-fg-brand);
+  background: var(--color-brand-softer);
+}
+
+.shamar-list-refresh.is-auto {
+  color: var(--color-fg-brand);
+  border-color: var(--color-fg-brand);
+  background: var(--color-brand-softer);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-fg-brand) 35%, transparent);
+}
+
+.shamar-list-refresh:disabled,
+.shamar-list-refresh.is-busy {
+  cursor: wait;
+  opacity: 0.55;
+  pointer-events: none;
+}
+
+.shamar-list-refresh.is-auto .shamar-list-refresh__icon,
+.shamar-list-refresh.is-busy .shamar-list-refresh__icon {
+  animation: shamar-refresh-spin 1.25s linear infinite;
+}
+
+@keyframes shamar-refresh-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .shamar-list-refresh.is-auto .shamar-list-refresh__icon {
+    animation: none;
+  }
+}
+
+/* Schema layout: tabs, wizard, flex, callout, tags, etc. */
+.shamar-form-grid.is-dense,
+.shamar-detail-grid.is-dense { gap: 0.5rem; }
+.shamar-form-grid.is-gapless,
+.shamar-detail-grid.is-gapless { gap: 0; }
+
+.shamar-tabs { display: flex; flex-direction: column; gap: 0; }
+.shamar-tabs--contained { border: 1px solid var(--color-card-border); border-radius: 0.75rem; overflow: hidden; background: var(--color-neutral-primary); }
+.shamar-tabs--vertical { flex-direction: row; align-items: stretch; }
+.shamar-tabs__list { display: flex; gap: 0.25rem; padding: 0.5rem; border-bottom: 1px solid var(--color-card-border); background: var(--color-surface-header, var(--color-neutral-secondary)); overflow-x: auto; }
+.shamar-tabs--vertical .shamar-tabs__list { flex-direction: column; border-bottom: 0; border-right: 1px solid var(--color-card-border); min-width: 10rem; }
+.shamar-tabs__tab { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.75rem; border-radius: 0.5rem; font-size: 0.8125rem; font-weight: 550; color: var(--color-body-subtle); background: transparent; border: 0; cursor: pointer; }
+.shamar-tabs__tab.is-active { color: var(--color-heading); background: var(--color-neutral-primary); box-shadow: 0 0 0 1px var(--color-card-border); }
+.shamar-tabs__badge { font-size: 0.7rem; padding: 0.1rem 0.4rem; border-radius: 999px; background: var(--color-brand-soft); color: var(--color-fg-brand); }
+.shamar-tabs__panels { padding: 1rem; flex: 1; }
+
+.shamar-wizard { padding: 1rem; }
+.shamar-wizard__steps { display: flex; gap: 0.75rem; list-style: none; margin: 0 0 1rem; padding: 0; flex-wrap: wrap; }
+.shamar-wizard__step { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8125rem; color: var(--color-body-subtle); }
+.shamar-wizard__step.is-active { color: var(--color-heading); font-weight: 600; }
+.shamar-wizard__step.is-done { color: var(--color-fg-brand); }
+.shamar-wizard__index { width: 1.5rem; height: 1.5rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--color-neutral-secondary); font-size: 0.75rem; }
+.shamar-wizard__step.is-active .shamar-wizard__index { background: var(--color-fg-brand); color: #fff; }
+.shamar-wizard__description { margin: 0 0 0.75rem; font-size: 0.875rem; color: var(--color-body-subtle); }
+.shamar-wizard__nav { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; }
+.shamar-wizard__btn { padding: 0.4rem 0.85rem; border-radius: 0.5rem; border: 1px solid var(--color-card-border); background: var(--color-neutral-primary); font-size: 0.8125rem; cursor: pointer; }
+.shamar-wizard__btn--primary { background: var(--color-fg-brand); border-color: transparent; color: #fff; }
+
+.shamar-flex { display: flex; flex-direction: column; gap: 1rem; }
+@media (min-width: 768px) {
+  .shamar-flex--from-md { flex-direction: row; align-items: flex-start; }
+}
+.shamar-flex__item { flex: 1 1 0; min-width: 0; }
+.shamar-flex__item--fixed { flex: 0 0 auto; }
+
+.shamar-callout { border-radius: 0.75rem; padding: 0.85rem 1rem; border: 1px solid var(--color-card-border); }
+.shamar-callout__title { font-weight: 600; font-size: 0.875rem; color: var(--color-heading); }
+.shamar-callout__body { margin-top: 0.25rem; font-size: 0.8125rem; color: var(--color-body-subtle); }
+.shamar-callout--info { background: color-mix(in srgb, var(--color-fg-brand) 8%, transparent); border-color: color-mix(in srgb, var(--color-fg-brand) 30%, transparent); }
+.shamar-callout--success { background: color-mix(in srgb, #16a34a 10%, transparent); }
+.shamar-callout--warning { background: color-mix(in srgb, #d97706 10%, transparent); }
+.shamar-callout--danger { background: color-mix(in srgb, var(--color-fg-danger) 10%, transparent); }
+
+.shamar-empty-state { text-align: center; padding: 2rem 1rem; color: var(--color-body-subtle); }
+.shamar-empty-state__title { margin: 0; font-size: 1rem; color: var(--color-heading); }
+.shamar-empty-state__description { margin: 0.35rem 0 0; font-size: 0.875rem; }
+
+.shamar-placeholder__label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; color: var(--color-heading); }
+.shamar-placeholder__content { margin-top: 0.25rem; font-size: 0.875rem; color: var(--color-body); }
+
+/* Checkbox field control (label wrapper) — fills grid cell width. */
+.shamar-checkbox {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  min-width: 0;
+  font-size: 0.875rem;
+  cursor: pointer;
+  user-select: none;
+}
+
+.shamar-checkbox--inline {
+  min-height: 2.5rem;
+  padding: 0.375rem 0;
+}
+
+.shamar-checkbox.is-disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.shamar-checkbox__text {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.shamar-checkbox__label {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--color-heading);
+}
+
+.shamar-radio__option { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; }
+.shamar-radio { display: flex; flex-direction: column; gap: 0.5rem; }
+.shamar-radio--inline { flex-direction: row; flex-wrap: wrap; gap: 0.75rem 1.25rem; }
+
+.shamar-color { display: flex; align-items: center; gap: 0.5rem; }
+.shamar-color__swatch { width: 2.25rem; height: 2.25rem; padding: 0; border: 1px solid var(--color-card-border); border-radius: 0.4rem; background: transparent; cursor: pointer; }
+.shamar-color__value {
+  flex: 1 1 auto;
+  min-width: 0;
+  cursor: default;
+  color: var(--color-body-subtle);
+}
+.shamar-color__value:read-only {
+  background: var(--color-surface-inset, var(--color-neutral-secondary));
+}
+
+.shamar-input-affixes {
+  display: flex;
+  align-items: stretch;
+  gap: 0.5rem;
+  width: 100%;
+  min-width: 0;
+}
+.shamar-input-affixes > .shamar-input-group,
+.shamar-input-affixes > .shamar-input {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.shamar-input-affixes--stacked {
+  flex-direction: column;
+  align-items: stretch;
+  gap: 0.35rem;
+}
+.shamar-input-affixes__outside {
+  display: inline-flex;
+  align-items: center;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--color-body-subtle);
+  white-space: nowrap;
+}
+.shamar-input-affixes__outside--icon {
+  color: var(--color-heading);
+}
+.shamar-input-affixes:not(.shamar-input-affixes--stacked) .shamar-input-affixes__outside {
+  align-self: center;
+}
+.shamar-color-entry { display: inline-flex; align-items: center; gap: 0.4rem; }
+.shamar-color-entry__swatch { width: 1rem; height: 1rem; border-radius: 0.25rem; border: 1px solid var(--color-card-border); }
+
+.shamar-tags { display: flex; flex-direction: column; gap: 0.5rem; }
+.shamar-tags__list { display: flex; flex-wrap: wrap; gap: 0.35rem; }
+.shamar-tags__chip { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.15rem 0.45rem; border-radius: 999px; background: var(--color-brand-soft); color: var(--color-fg-brand); font-size: 0.75rem; }
+.shamar-tags__remove { border: 0; background: transparent; cursor: pointer; color: inherit; line-height: 1; }
+
+.shamar-input-group { display: flex; align-items: stretch; width: 100%; }
+.shamar-input-group .shamar-input { flex: 1; min-width: 0; }
+.shamar-input-group.has-prefix .shamar-input {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.shamar-input-group.has-suffix .shamar-input {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.shamar-input-group__affix {
+  display: inline-flex;
+  align-items: center;
+  padding: 0 0.75rem;
+  border: 1px solid var(--color-card-border);
+  background: var(--color-surface-header, var(--color-neutral-secondary));
+  font-size: 0.8125rem;
+  color: var(--color-body-subtle);
+  white-space: nowrap;
+}
+.shamar-input-group.has-prefix .shamar-input-group__affix:first-child {
+  border-right: 0;
+  border-top-left-radius: 0.5rem;
+  border-bottom-left-radius: 0.5rem;
+}
+.shamar-input-group.has-suffix .shamar-input-group__affix:last-child {
+  border-left: 0;
+  border-top-right-radius: 0.5rem;
+  border-bottom-right-radius: 0.5rem;
+}
+
+.shamar-badge { display: inline-flex; padding: 0.15rem 0.5rem; border-radius: 999px; font-size: 0.75rem; font-weight: 550; background: var(--color-brand-soft); color: var(--color-fg-brand); }
+.shamar-badges { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
+.shamar-copyable { display: inline-flex; align-items: center; gap: 0.5rem; }
+.shamar-copyable__btn { font-size: 0.75rem; border: 1px solid var(--color-card-border); border-radius: 0.35rem; padding: 0.15rem 0.4rem; background: var(--color-neutral-primary); cursor: pointer; }
+.shamar-image-entry { max-width: 8rem; max-height: 8rem; border-radius: 0.5rem; object-fit: cover; border: 1px solid var(--color-card-border); }
+
+.shamar-form-section__header--collapsible { cursor: pointer; user-select: none; }
+.shamar-form-section__header--collapsible:hover .shamar-form-section__chevron {
+  color: var(--color-heading);
+  background: var(--color-neutral-primary);
+  border-color: var(--color-card-border);
+}
+.shamar-form-section__chevron {
+  margin-left: auto;
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: 0.5rem;
+  border: 1px solid transparent;
+  color: var(--color-body-subtle);
+  background: transparent;
+  transition:
+    transform 0.18s ease,
+    color 0.15s ease,
+    background-color 0.15s ease,
+    border-color 0.15s ease;
+}
+.shamar-form-section__chevron svg {
+  display: block;
+  transition: transform 0.18s ease;
+}
+.shamar-form-section__chevron.is-open svg {
+  transform: rotate(180deg);
+}