@pantheon-systems/puck-css 0.9.0 → 0.11.0

package/src/styles.css

@@ -11,20 +11,6 @@
  * Styles for version comparison and other UI components.
  */
 
-/* ============================================
-   Plugin Rail Toggle
-   ============================================ */
-
-/* Hide the plugin rail (left navigation with Blocks/Outline/History/etc.) */
-.p1-hide-plugin-rail [class*='_PuckLayout-nav_'] {
-  display: none;
-}
-
-/* Reclaim the space - set the side nav width to 0 so grid collapses that column */
-.p1-hide-plugin-rail [class*='_PuckLayout-inner_'] {
-  --puck-side-nav-width: 0;
-}
-
 /* ============================================
    Sidebar Background Matching
    ============================================ */
@@ -34,7 +20,7 @@
 [class*='_BlocksPlugin_'],
 [class*='_Sidebar--left_'],
 [class*='_Sidebar--right_'] {
-  background: var(--pds-color-bg-default, oklch(1 0 0)) !important;
+  background: var(--pds-color-surface-default, oklch(1 0 0)) !important;
 }
 
 /* PanelShell must fill the Puck container flush. Zero out Puck's built-in 
@@ -100,8 +86,8 @@
   font-size: 12px;
   font-weight: 500;
   line-height: 1.4;
-  color: var(--pds-color-text-secondary, var(--puck-css-text-secondary));
-  background: var(--pds-color-bg-default-secondary, var(--puck-css-bg-secondary));
+  color: var(--pds-color-foreground-default-secondary, var(--puck-css-text-secondary));
+  background: var(--pds-color-surface-default-secondary, var(--puck-css-bg-secondary));
   border-bottom: 1px solid var(--pds-color-border-default, var(--puck-css-border));
   flex-shrink: 0;
 }
@@ -122,7 +108,7 @@
   font-size: 15px;
   font-weight: 600;
   line-height: 1;
-  color: var(--pds-color-text-secondary, var(--puck-css-text-secondary));
+  color: var(--pds-color-foreground-default-secondary, var(--puck-css-text-secondary));
   background: none;
   border: none;
   cursor: pointer;
@@ -136,7 +122,7 @@
 }
 
 .p1-inspector-tab[aria-selected='true'] {
-  color: var(--pds-color-text-primary, var(--puck-css-text));
+  color: var(--pds-color-foreground-default, var(--puck-css-text));
 }
 
 .p1-inspector-tab[aria-selected='true']::after {
@@ -169,12 +155,12 @@
   background: none;
   border: none;
   cursor: pointer;
-  color: var(--pds-color-text-secondary, var(--puck-css-text-secondary));
+  color: var(--pds-color-foreground-default-secondary, var(--puck-css-text-secondary));
   outline: none;
 }
 
 .p1-inspector-tab-collapse:hover {
-  color: var(--pds-color-fg-default, var(--pds-color-text-primary, var(--puck-css-text)));
+  color: var(--pds-color-foreground-default, var(--puck-css-text));
 }
 
 .p1-inspector-tab-collapse:focus-visible {
@@ -192,7 +178,7 @@
   font-size: 13px;
   font-weight: 500;
   line-height: 1.4;
-  color: var(--pds-color-text-secondary, var(--puck-css-text-secondary));
+  color: var(--pds-color-foreground-default-secondary, var(--puck-css-text-secondary));
   border-bottom: 1px solid var(--pds-color-border-default, var(--puck-css-border));
   flex-shrink: 0;
 }
@@ -202,7 +188,28 @@
 }
 
 .p1-inspector-breadcrumb__block {
-  color: var(--pds-color-fg-default, var(--pds-color-text-primary, var(--puck-css-text)));
+  color: var(--pds-color-foreground-default, var(--puck-css-text));
+  font-weight: 600;
+}
+
+.p1-inspector-template-badge {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  margin-top: 8px;
+  border-top: 1px solid var(--pds-color-border-default, oklch(0.9401 0 0));
+  font-size: 13px;
+  line-height: 1.4;
+}
+
+.p1-inspector-template-badge__label {
+  color: var(--pds-color-foreground-default-secondary, oklch(0.55 0 0));
+  font-weight: 500;
+}
+
+.p1-inspector-template-badge__name {
+  color: var(--pds-color-foreground-default, var(--puck-css-text));
   font-weight: 600;
 }
 
@@ -212,7 +219,7 @@
   width: 100%;
   /* Follows the header/subheader knobs (P1EditorHeader/P1EditorSubheader modules) */
   min-height: calc(100vh - (var(--p1-header-h, 60px) + var(--p1-subheader-h, 48px)));
-  background: var(--pds-color-bg-default, #fff);
+  background: var(--pds-color-surface-default, #fff);
   border-left: 1px solid var(--pds-color-border-default, oklch(0.9401 0 0));
   display: flex;
   justify-content: center;
@@ -962,133 +969,6 @@
   background: var(--puck-css-diff-reordered);
 }
 
-/* ============================================
-   HistoricalVersionBanner
-   ============================================ */
-.historical-version-banner {
-  display: flex;
-  align-items: center;
-  gap: var(--pds-spacing-xs);
-  padding: var(--pds-spacing-xs) var(--pds-spacing-l);
-  background: var(--pds-color-bg-default-secondary, #f9fafb);
-  border-top: 2px solid var(--pds-color-interactive-link-default, #3A5DFB);
-  border-bottom: var(--pds-border-width-default, 1px) solid var(--pds-color-border-secondary, #ececf0);
-  color: var(--pds-color-fg-default, #171717);
-  font-family: var(--pds-typography-ff-default, 'Inter', system-ui, sans-serif);
-  min-height: var(--pds-spacing-button-height-m);
-  flex-wrap: wrap;
-}
-
-.historical-version-banner__icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--pds-color-interactive-link-default, #3A5DFB);
-  flex: none;
-}
-
-.historical-version-banner__content {
-  display: flex;
-  align-items: center;
-  gap: var(--pds-spacing-3xs);
-}
-
-.historical-version-banner__text {
-  font: 500 var(--pds-typography-size-m) var(--pds-typography-ff-default, 'Inter', system-ui, sans-serif);
-  color: var(--pds-color-fg-default, #171717);
-}
-
-.historical-version-banner__text strong {
-  font: 700 var(--pds-typography-size-m) var(--pds-typography-ff-compact, 'Inter Tight', 'Inter', system-ui, sans-serif);
-}
-
-.historical-version-banner__date {
-  font: 500 var(--pds-typography-size-m) var(--pds-typography-ff-default, 'Inter', system-ui, sans-serif);
-  color: var(--pds-color-fg-default, #171717);
-}
-
-.historical-version-banner__actions {
-  display: flex;
-  align-items: center;
-  gap: var(--pds-spacing-2xs);
-  margin-left: auto;
-  flex: none;
-}
-
-.historical-version-banner__exit-btn {
-  /* Reset browser button defaults without wiping font (all:unset kills font too) */
-  appearance: none;
-  -webkit-appearance: none;
-  box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border: var(--pds-border-width-default, 1px) solid var(--pds-color-border-default, #d4d4d4);
-  background: var(--pds-color-bg-surface, white);
-  border-radius: 9px;
-  padding: 9px 20px;
-  font: 600 var(--pds-typography-size-m) var(--pds-typography-ff-compact, 'Inter Tight', 'Inter', system-ui, sans-serif);
-  color: var(--pds-color-fg-default, #171717);
-  cursor: pointer;
-  white-space: nowrap;
-  transition: var(--pds-animation-transition-button);
-  line-height: 1;
-}
-
-.historical-version-banner__exit-btn:hover:not(:disabled) {
-  background: var(--pds-color-interactive-background-hover, #f5f5f5);
-}
-
-.historical-version-banner__exit-btn:disabled {
-  opacity: 0.5;
-  cursor: default;
-}
-
-.historical-version-banner__revert-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--pds-spacing-button-gap-inline-m);
-  border: none;
-  border-radius: var(--pds-border-radius-button);
-  background: var(--pds-color-fg-default, #171717);
-  color: white;
-  font: 700 var(--pds-typography-size-m) var(--pds-typography-ff-compact, 'Inter Tight', 'Inter', system-ui, sans-serif);
-  padding: 11px 18px;
-  cursor: pointer;
-  white-space: nowrap;
-  transition: var(--pds-animation-transition-button);
-  line-height: 1;
-}
-
-.historical-version-banner__revert-btn:hover:not(:disabled) {
-  filter: brightness(1.15);
-}
-
-.historical-version-banner__revert-btn:disabled {
-  opacity: 0.6;
-  cursor: default;
-}
-
-.historical-version-banner__error {
-  width: 100%;
-  margin: 4px 0 2px;
-  padding: 0;
-  font-size: var(--pds-typography-size-s, 0.875rem);
-  color: var(--pds-color-status-error-icon, #c0392b);
-}
-
-.historical-version-banner__spinner {
-  display: inline-block;
-  width: 12px;
-  height: 12px;
-  border: 2px solid currentColor;
-  border-top-color: transparent;
-  border-radius: 50%;
-  animation: css-plugin-version-spin 0.6s linear infinite;
-  flex: none;
-}
-
 /* ============================================
    CSS Plugin Panel
    ============================================ */
@@ -1277,7 +1157,7 @@
 
 .css-plugin-version-author {
   font-size: 0.75rem;
-  color: var(--pds-color-fg-default-secondary, #666);
+  color: var(--pds-color-foreground-default-secondary, #666);
   margin-top: 2px;
 }
 
@@ -1356,7 +1236,7 @@
 }
 
 .css-plugin-version-row--selected {
-  background: var(--pds-color-bg-default-secondary, #f9fafb);
+  background: var(--pds-color-surface-default-secondary, #f9fafb);
   border-left: 3px solid var(--pds-color-interactive-link-default, #3A5DFB);
 }
 
@@ -1380,7 +1260,7 @@
 }
 
 .css-plugin-version-dot--reverted {
-  background: var(--pds-color-fg-default-secondary, #9a9a9a);
+  background: var(--pds-color-foreground-default-secondary, #9a9a9a);
 }
 
 /* Content column */
@@ -1400,7 +1280,7 @@
 .css-plugin-version-meta .css-plugin-version-number {
   font-weight: 700;
   font-size: 13px;
-  color: var(--pds-color-fg-default, var(--puck-css-text));
+  color: var(--pds-color-foreground-default, var(--puck-css-text));
 }
 
 /* Kind tags: Current / Published / Reverted */
@@ -1426,8 +1306,8 @@
 }
 
 .css-plugin-version-kind-tag--reverted {
-  color: var(--pds-color-fg-default-secondary, #6b6b6b);
-  background: var(--pds-color-bg-default-secondary, #f0f0f0);
+  color: var(--pds-color-foreground-default-secondary, #6b6b6b);
+  background: var(--pds-color-surface-default-secondary, #f0f0f0);
 }
 
 /* Day group headers */
@@ -1440,11 +1320,11 @@
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.06em;
-  color: var(--pds-color-fg-default-secondary, #9a9a9a);
+  color: var(--pds-color-foreground-default-secondary, #9a9a9a);
   padding: 8px var(--pds-spacing-s, 12px) 4px;
   position: sticky;
   top: 0;
-  background: var(--pds-color-bg-default, #fff);
+  background: var(--pds-color-surface-default, #fff);
   z-index: 1;
 }
 
@@ -1476,35 +1356,6 @@
   color: var(--pds-color-foreground-default);
 }
 
-/* Banner steppers */
-.historical-version-banner__steppers {
-  display: flex;
-  gap: 2px;
-}
-
-.historical-version-banner__stepper-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  border-radius: 6px;
-  border: 1px solid var(--pds-color-border-secondary, #ececf0);
-  background: transparent;
-  cursor: pointer;
-  color: var(--pds-color-fg-default, #1a1a1a);
-  transition: background 100ms ease;
-}
-
-.historical-version-banner__stepper-btn:hover:not(:disabled) {
-  background: var(--pds-color-bg-default-secondary, #f9fafb);
-}
-
-.historical-version-banner__stepper-btn:disabled {
-  opacity: 0.35;
-  cursor: not-allowed;
-}
-
 /* Unpublished changes pill on current version row */
 .css-plugin-version-unpublished {
   display: inline-block;
@@ -1520,7 +1371,7 @@
 /* Byline: date · author */
 .css-plugin-version-byline {
   font-size: 11.5px;
-  color: var(--pds-color-fg-default-secondary, #9a9a9a);
+  color: var(--pds-color-foreground-default-secondary, #9a9a9a);
   margin-top: 3px;
   white-space: nowrap;
   overflow: hidden;
@@ -1531,14 +1382,10 @@
 .css-plugin-version-revert-source {
   font-size: 11px;
   font-weight: 600;
-  color: var(--pds-color-fg-default-secondary, #9a9a9a);
+  color: var(--pds-color-foreground-default-secondary, #9a9a9a);
   margin-top: 2px;
 }
 
-@keyframes css-plugin-version-spin {
-  to { transform: rotate(360deg); }
-}
-
 /* ============================================
    Toast Notifications
    ============================================ */
@@ -2827,6 +2674,10 @@
      nth-child(3) CSS plugin    → rotateClock       (React NavIcon in CSSPlugin)
      nth-child(4) AI plugin     → sparkles          (targeted by nth-child)
      nth-child(5) PCC plugin    → fileLines         (targeted by nth-child)
+
+   The positional slots only apply when the tab has no PDS icon of its own — the
+   rail reorders whenever a plugin gains or loses `render`, so a slot may hold a
+   plugin that already ships its icon, and painting over it would double up.
    ============================================================================= */
 
 /* 1. Hide all text labels.
@@ -2840,8 +2691,8 @@
 /* 2. Shared pseudo-element for injected SVG icons */
 [class*='NavItem-linkIcon']:has(svg.lucide-hammer)::after,
 [class*='NavItem-linkIcon']:has(svg.lucide-layers)::after,
-[class*='Nav-list'] > li:nth-child(4) [class*='NavItem-linkIcon']::after,
-[class*='Nav-list'] > li:nth-child(5) [class*='NavItem-linkIcon']::after {
+[class*='Nav-list'] > li:nth-child(4) [class*='NavItem-linkIcon']:not(:has(.pds-icon))::after,
+[class*='Nav-list'] > li:nth-child(5) [class*='NavItem-linkIcon']:not(:has(.pds-icon))::after {
   content: '';
   display: block;
   width: 20px;
@@ -2857,8 +2708,8 @@ svg.lucide-layers {
   display: none;
 }
 
-[class*='Nav-list'] > li:nth-child(4) [class*='NavItem-linkIcon'] > *,
-[class*='Nav-list'] > li:nth-child(5) [class*='NavItem-linkIcon'] > * {
+[class*='Nav-list'] > li:nth-child(4) [class*='NavItem-linkIcon']:not(:has(.pds-icon)) > *,
+[class*='Nav-list'] > li:nth-child(5) [class*='NavItem-linkIcon']:not(:has(.pds-icon)) > * {
   display: none;
 }
 
@@ -2875,12 +2726,12 @@ svg.lucide-layers {
 }
 
 /* AI plugin (4th) → fa-sparkles */
-[class*='Nav-list'] > li:nth-child(4) [class*='NavItem-linkIcon']::after {
+[class*='Nav-list'] > li:nth-child(4) [class*='NavItem-linkIcon']:not(:has(.pds-icon))::after {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='%23374151' d='M391.5 53.2c-4.5 1.7-7.5 6-7.5 10.8s3 9.1 7.5 10.8L448 96 469.2 152.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L512 96 568.5 74.8c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L512 32 490.8-24.5c-1.7-4.5-6-7.5-10.8-7.5s-9.1 3-10.8 7.5L448 32 391.5 53.2zm-185 20.1c-2.6-5.7-8.3-9.3-14.5-9.3s-11.9 3.6-14.5 9.3l-53.1 115-115 53.1C3.6 244.1 0 249.8 0 256s3.6 11.9 9.3 14.5l115 53.1 53.1 115c2.6 5.7 8.3 9.3 14.5 9.3s11.9-3.6 14.5-9.3l53.1-115 115-53.1c5.7-2.6 9.3-8.3 9.3-14.5s-3.6-11.9-9.3-14.5l-115-53.1-53.1-115zM416 416l-56.5 21.2c-4.5 1.7-7.5 6-7.5 10.8s3 9.1 7.5 10.8L416 480 437.2 536.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L480 480 536.5 458.8c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L480 416 458.8 359.5c-1.7-4.5-6-7.5-10.8-7.5s-9.1 3-10.8 7.5L416 416z'/%3E%3C/svg%3E");
 }
 
 /* PCC plugin (5th) → fa-file-lines */
-[class*='Nav-list'] > li:nth-child(5) [class*='NavItem-linkIcon']::after {
+[class*='Nav-list'] > li:nth-child(5) [class*='NavItem-linkIcon']:not(:has(.pds-icon))::after {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23374151' d='M0 64C0 28.7 28.7 0 64 0L213.5 0c17 0 33.3 6.7 45.3 18.7L365.3 125.3c12 12 18.7 28.3 18.7 45.3L384 448c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 64zm208-5.5l0 93.5c0 13.3 10.7 24 24 24L325.5 176 208 58.5zM120 256c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0zm0 96c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0z'/%3E%3C/svg%3E");
 }
 
@@ -2979,7 +2830,7 @@ svg.lucide-layers {
   position: fixed;
   inset: 0;
   z-index: 10001;
-  background: var(--pds-color-bg-default, #fff);
+  background: var(--pds-color-surface-default, #fff);
   display: flex;
   flex-direction: column;
 }
@@ -3004,12 +2855,12 @@ svg.lucide-layers {
   border: none;
   font-size: 1rem;
   cursor: pointer;
-  color: var(--pds-color-fg-default-secondary, #6b7280);
+  color: var(--pds-color-foreground-default-secondary, #6b7280);
   padding: 0.25rem 0.5rem;
 }
 
 .template-manager-overlay__close:hover {
-  color: var(--pds-color-fg-default, #1f2937);
+  color: var(--pds-color-foreground-default, #1f2937);
 }
 
 .template-manager-overlay__error {
@@ -3032,7 +2883,7 @@ svg.lucide-layers {
 .template-manager-overlay__empty {
   padding: 2rem;
   text-align: center;
-  color: var(--pds-color-fg-default-secondary, #6b7280);
+  color: var(--pds-color-foreground-default-secondary, #6b7280);
   font-size: 0.875rem;
 }
 
@@ -3055,7 +2906,7 @@ svg.lucide-layers {
 }
 
 .template-manager-overlay__template-item:hover {
-  background: var(--pds-color-bg-default-secondary, #f9fafb);
+  background: var(--pds-color-surface-default-secondary, #f9fafb);
 }
 
 .template-manager-overlay__template-info {
@@ -3071,7 +2922,7 @@ svg.lucide-layers {
 
 .template-manager-overlay__template-meta {
   font-size: 0.75rem;
-  color: var(--pds-color-fg-default-secondary, #6b7280);
+  color: var(--pds-color-foreground-default-secondary, #6b7280);
 }
 
 .template-manager-overlay__template-actions {
@@ -3116,7 +2967,7 @@ svg.lucide-layers {
 .template-manager-overlay__field-label {
   font-size: 0.75rem;
   font-weight: 600;
-  color: var(--pds-color-fg-default-secondary, #6b7280);
+  color: var(--pds-color-foreground-default-secondary, #6b7280);
   text-transform: uppercase;
   letter-spacing: 0.05em;
 }
@@ -3140,8 +2991,8 @@ svg.lucide-layers {
 }
 
 .template-manager-overlay__input:disabled {
-  background: var(--pds-color-bg-default-secondary, #f9fafb);
-  color: var(--pds-color-fg-default-secondary, #6b7280);
+  background: var(--pds-color-surface-default-secondary, #f9fafb);
+  color: var(--pds-color-foreground-default-secondary, #6b7280);
 }
 
 .template-manager-overlay__save-actions {
@@ -3157,7 +3008,7 @@ svg.lucide-layers {
   align-items: center;
   justify-content: center;
   height: 100%;
-  color: var(--pds-color-fg-default-secondary, #6b7280);
+  color: var(--pds-color-foreground-default-secondary, #6b7280);
 }
 
 /* ── Template Pin Panel ───────────────────────────────────────────────── */
@@ -3169,7 +3020,7 @@ svg.lucide-layers {
 }
 
 .template-pin-panel--empty {
-  color: var(--pds-color-fg-default-secondary, #6b7280);
+  color: var(--pds-color-foreground-default-secondary, #6b7280);
   font-size: 0.8125rem;
   font-style: italic;
 }
@@ -3177,7 +3028,7 @@ svg.lucide-layers {
 .template-pin-panel__header {
   font-size: 0.75rem;
   font-weight: 600;
-  color: var(--pds-color-fg-default-secondary, #6b7280);
+  color: var(--pds-color-foreground-default-secondary, #6b7280);
   text-transform: uppercase;
   letter-spacing: 0.05em;
   margin-bottom: 0.5rem;
@@ -3202,7 +3053,7 @@ svg.lucide-layers {
 }
 
 .template-pin-panel__item:hover {
-  background: var(--pds-color-bg-default-secondary, #f9fafb);
+  background: var(--pds-color-surface-default-secondary, #f9fafb);
 }
 
 .template-pin-panel__type {
@@ -3214,7 +3065,7 @@ svg.lucide-layers {
   align-items: center;
   gap: 0.25rem;
   font-size: 0.75rem;
-  color: var(--pds-color-fg-default-secondary, #6b7280);
+  color: var(--pds-color-foreground-default-secondary, #6b7280);
   cursor: pointer;
 }
 
@@ -3234,7 +3085,7 @@ svg.lucide-layers {
   flex-wrap: wrap;
   align-items: center;
   gap: 0.5rem;
-  background: var(--pds-color-bg-default-secondary);
+  background: var(--pds-color-surface-default-secondary);
   padding: 0.5rem 0.75rem;
   border-bottom: 1px solid var(--pds-color-border-default, #e5e7eb);
 }
@@ -3271,7 +3122,7 @@ svg.lucide-layers {
 .css-preview-panel-overlay__label {
   margin: 0;
   font-size: 0.8125rem;
-  color: var(--pds-color-fg-default, #171717);
+  color: var(--pds-color-foreground-default, #171717);
   font-family: Poppins, sans-serif;
   word-break: break-word;
 }
@@ -3314,7 +3165,7 @@ svg.lucide-layers {
   font-weight: 600;
   letter-spacing: 0.06em;
   text-transform: uppercase;
-  color: var(--pds-color-text-secondary, var(--puck-css-text-secondary));
+  color: var(--pds-color-foreground-default-secondary, var(--puck-css-text-secondary));
 }
 
 .p1-blocks-drawer__expand-btn {
@@ -3366,7 +3217,7 @@ svg.lucide-layers {
   border: 1px solid var(--pds-color-border-default, #e5e7eb);
   border-radius: 8px;
   overflow: hidden;
-  background: var(--pds-color-bg-default, #fff);
+  background: var(--pds-color-surface-default, #fff);
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
   cursor: grab;
 }
@@ -3389,6 +3240,195 @@ svg.lucide-layers {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  color: var(--pds-color-text-primary, var(--puck-css-text));
+  color: var(--pds-color-foreground-default, var(--puck-css-text));
+}
+
+/* ============================================
+   Inspector Field Spacing
+   ============================================ */
+
+.p1-inspector-fields [class*='_InputWrapper_'] + [class*='_InputWrapper_'] {
+  margin-top: 16px;
+}
+
+.p1-inspector-fields [class*='_Input-label_'] {
+  padding-bottom: 8px;
+}
+
+.p1-inspector-fields [class*='_Input-label_']::after {
+  content: ':';
+}
+
+/* ============================================
+   Field Section (collapsible sidebar groups)
+   ============================================ */
+
+.p1-field-section {
+  border-bottom: 1px solid var(--puck-color-grey-09, #e0e0e0);
+}
+
+.p1-field-section:last-of-type {
+  border-bottom: none;
+}
+
+.p1-field-section__header {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 13px 20px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  user-select: none;
+  list-style: none;
+}
+
+.p1-field-section__header::-webkit-details-marker {
+  display: none;
+}
+
+.p1-field-section__label {
+  font: 600 11.5px/1 var(--pds-font-family, sans-serif);
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: #9a9a9a;
+}
+
+.p1-field-section__header:hover .p1-field-section__label {
+  color: var(--puck-color-grey-01, #1a1a1a);
+}
+
+.p1-field-section__badge {
+  font: 600 10px/1 var(--pds-font-family, sans-serif);
+  letter-spacing: 0;
+  color: #9a9a9a;
+  background: #f0f0f0;
+  border-radius: 99px;
+  padding: 1px 7px;
+}
+
+.p1-field-section__chevron {
+  margin-left: auto;
+  width: 15px;
+  height: 15px;
+  transition: transform 0.15s ease;
+  background: #c4c4c4;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.p1-field-section[open] > .p1-field-section__header .p1-field-section__chevron {
+  transform: rotate(0deg);
+}
+
+.p1-field-section:not([open]) > .p1-field-section__header .p1-field-section__chevron {
+  transform: rotate(-90deg);
+}
+
+.p1-field-section__subtitle {
+  margin: 0;
+  padding: 0 20px 8px;
+  font: 400 12px/1.4 var(--pds-font-family, sans-serif);
+  color: #7c7c7c;
+}
+
+.p1-field-section__body {
+  padding: 0 20px 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
 }
 
+.p1-field-mapping-section__title {
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--puck-color-grey-01, #1a1a1a);
+  margin: 4px 0 2px;
+  padding: 0;
+}
+
+.p1-field-mapping-section__subtitle {
+  font-size: 12px;
+  font-weight: 500;
+  color: #7c7c7c;
+  margin: 0 0 6px;
+  padding: 0;
+  line-height: 1.4;
+}
+
+/* Schema-select field: custom label with required asterisk and type hint */
+.p1-schema-field__label-row {
+  display: flex;
+  align-items: baseline;
+  gap: 4px;
+  margin-bottom: 4px;
+}
+
+.p1-schema-field__label {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--puck-color-grey-01, #1a1a1a);
+}
+
+.p1-schema-field__required {
+  color: #e53e3e;
+  font-weight: 600;
+}
+
+.p1-schema-field__type-hint {
+  font-size: 11px;
+  font-weight: 400;
+  color: #9a9a9a;
+}
+
+/* Unmapped fields counter below field mapping section */
+.p1-field-mapping-section__unmapped {
+  font-size: 11px;
+  font-weight: 500;
+  color: #9a9a9a;
+  margin: 8px 0 0;
+  padding: 0;
+}
+
+/* Schema-select field row: dropdown + eye toggle inline */
+.p1-schema-select-row {
+  display: flex;
+  align-items: flex-end;
+  gap: 6px;
+}
+
+.p1-schema-select-row__control {
+  flex: 1;
+  min-width: 0;
+}
+
+/* Eye toggle button for schema-select field visibility */
+.p1-eye-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  border: 1px solid var(--puck-color-grey-09, #e0e0e0);
+  border-radius: 50%;
+  background: transparent;
+  color: var(--puck-color-grey-04, #666);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: color 0.15s, border-color 0.15s;
+}
+
+.p1-eye-toggle:hover {
+  color: var(--puck-color-grey-01, #1a1a1a);
+  border-color: var(--puck-color-grey-05, #999);
+}
+
+.p1-eye-toggle--off {
+  color: var(--puck-color-grey-07, #bbb);
+}
+
+.p1-eye-toggle--off:hover {
+  color: var(--puck-color-grey-04, #666);
+}