@pantheon-systems/puck-css 0.8.0 → 0.10.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
    ============================================ */
@@ -37,6 +23,12 @@
   background: var(--pds-color-bg-default, oklch(1 0 0)) !important;
 }
 
+/* PanelShell must fill the Puck container flush. Zero out Puck's built-in 
+   16px so it doesn't stack on PanelShell's own 12px body padding. */
+[class*='_BlocksPlugin_'],[class*='_OutlinePlugin_'] {
+  padding: 0 !important;
+}
+
 /* Override all nested backgrounds in right sidebar */
 [class*='_Sidebar--right_'] [class*='_SidebarSection'],
 [class*='_Sidebar--right_'] [class*='_Breadcrumbs_'],
@@ -76,8 +68,12 @@
 
 /* Fields guard: dims all fields and removes interaction (inert attr handles the rest) */
 .p1-readonly-fields-guard {
-  opacity: 0.6;
+  opacity: 0.5;
   user-select: none;
+  pointer-events: none;
+}
+
+.p1-inspector-fields--readonly {
   cursor: not-allowed;
 }
 
@@ -196,11 +192,33 @@
   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-fg-subtle, oklch(0.55 0 0));
+  font-weight: 500;
+}
+
+.p1-inspector-template-badge__name {
+  color: var(--pds-color-fg-default, var(--pds-color-text-primary, var(--puck-css-text)));
+  font-weight: 600;
+}
+
 /* Strip container: min-height bypasses ancestor height constraints;
    overflow:hidden on _Sidebar--right_ clips it to the correct sidebar height. */
 .p1-inspector-reopen-strip {
   width: 100%;
-  min-height: calc(100vh - 100px); /* 52px P1EditorHeader + 48px P1EditorSubheader */
+  /* 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);
   border-left: 1px solid var(--pds-color-border-default, oklch(0.9401 0 0));
   display: flex;
@@ -248,7 +266,6 @@
   overflow: hidden !important;
 }
 
-
 /* ============================================
    Utility: Visually Hidden (screen reader only)
    ============================================ */
@@ -952,67 +969,11 @@
   background: var(--puck-css-diff-reordered);
 }
 
-/* ============================================
-   HistoricalVersionBanner
-   ============================================ */
-.historical-version-banner {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.5rem 1rem;
-  background: var(--puck-css-diff-modified-bg);
-  border: 1px solid var(--puck-css-diff-modified);
-  border-radius: 0.375rem;
-  color: var(--puck-css-text);
-  font-size: 0.875rem;
-}
-
-.historical-version-banner__icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--puck-css-diff-modified);
-  flex-shrink: 0;
-}
-
-.historical-version-banner__content {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  flex: 1;
-}
-
-.historical-version-banner__text {
-  font-weight: 600;
-}
-
-.historical-version-banner__date {
-  color: var(--puck-css-text-secondary);
-  font-size: 0.75rem;
-}
-
-.historical-version-banner__locked {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-  padding: 0.125rem 0.5rem;
-  background: var(--puck-css-diff-removed-bg);
-  color: var(--puck-css-diff-removed);
-  border-radius: 0.25rem;
-  font-size: 0.75rem;
-  font-weight: 600;
-}
-
-.historical-version-banner__button {
-  white-space: nowrap;
-}
-
 /* ============================================
    CSS Plugin Panel
    ============================================ */
 .css-plugin-panel {
-  padding: 12px;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  font-family: var(--pds-typography-ff-default, 'Inter', sans-serif);
   font-size: 13px;
   color: var(--puck-css-text);
 }
@@ -1063,7 +1024,6 @@
   box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
 }
 
-
 .css-plugin-create-form {
   display: flex;
   flex-direction: column;
@@ -1124,11 +1084,13 @@
   padding: 8px 10px;
   cursor: pointer;
   transition: background 0.15s ease;
+}
+
+.css-plugin-doc-item {
   border-bottom: 1px solid var(--puck-css-border);
 }
 
-.css-plugin-doc-item:last-child,
-.css-plugin-version-item:last-child {
+.css-plugin-doc-item:last-child {
   border-bottom: none;
 }
 
@@ -1227,6 +1189,202 @@
   border-radius: 3px;
 }
 
+/* ============================================
+   Version History — p1-responsive timeline design
+   ============================================ */
+
+/* Wrapper: remove old border-box look, add padding + timeline track */
+.css-plugin-version-list.css-plugin-version-list--timeline {
+  border: none;
+  border-radius: 0;
+  overflow: visible;
+  padding: 4px 4px 4px 8px;
+  position: relative;
+}
+
+/* No vertical timeline track */
+.css-plugin-version-list.css-plugin-version-list--timeline::before {
+  content: none;
+}
+
+/* Individual row */
+.css-plugin-version-row {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 9px 10px;
+  border-radius: 9px;
+  /* Reserve the accent stripe on every row so selecting one doesn't shift layout. */
+  border-left: 3px solid transparent;
+  cursor: pointer;
+  transition: background 0.12s ease;
+  position: relative;
+}
+
+.css-plugin-version-row:hover {
+  background: var(--pds-color-interactive-background-hover, #f5f5f5);
+}
+
+.css-plugin-version-row--current {
+  cursor: default;
+}
+
+/* While previewing, the current row is clickable to exit preview. */
+.css-plugin-version-row--exits-preview {
+  cursor: pointer;
+}
+
+.css-plugin-version-row--selected {
+  background: var(--pds-color-bg-default-secondary, #f9fafb);
+  border-left: 3px solid var(--pds-color-interactive-link-default, #3A5DFB);
+}
+
+/* Timeline dot */
+.css-plugin-version-dot {
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  background: #c4c4c4;
+  flex: none;
+  margin-top: 4px;
+  z-index: 1;
+}
+
+.css-plugin-version-dot--current {
+  background: var(--pds-color-interactive-link-default, #3A5DFB);
+}
+
+.css-plugin-version-dot--published {
+  background: var(--pds-color-interactive-link-default, #3A5DFB);
+}
+
+.css-plugin-version-dot--reverted {
+  background: var(--pds-color-fg-default-secondary, #9a9a9a);
+}
+
+/* Content column */
+.css-plugin-version-content {
+  flex: 1;
+  min-width: 0;
+}
+
+/* Top row: version number + badge pills */
+.css-plugin-version-meta {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.css-plugin-version-meta .css-plugin-version-number {
+  font-weight: 700;
+  font-size: 13px;
+  color: var(--pds-color-fg-default, var(--puck-css-text));
+}
+
+/* Kind tags: Current / Published / Reverted */
+.css-plugin-version-kind-tag {
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  padding: 1px 7px;
+  border-radius: 5px;
+  line-height: 1.6;
+}
+
+.css-plugin-version-kind-tag--current {
+  color: var(--pds-color-status-success-icon, #217a37);
+  background: #eaf6f0;
+}
+
+.css-plugin-version-kind-tag--published {
+  color: var(--pds-color-interactive-link-default, #3A5DFB);
+  background: var(--iris-100, #EAF0FF);
+  border-color: transparent;
+}
+
+.css-plugin-version-kind-tag--reverted {
+  color: var(--pds-color-fg-default-secondary, #6b6b6b);
+  background: var(--pds-color-bg-default-secondary, #f0f0f0);
+}
+
+/* Day group headers */
+.css-plugin-version-day-group {
+  margin-bottom: 4px;
+}
+
+.css-plugin-version-day-header {
+  font-size: 10.5px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--pds-color-fg-default-secondary, #9a9a9a);
+  padding: 8px var(--pds-spacing-s, 12px) 4px;
+  position: sticky;
+  top: 0;
+  background: var(--pds-color-bg-default, #fff);
+  z-index: 1;
+}
+
+/* All versions / Milestones filter — uses PDS SegmentedButton */
+.css-plugin-version-filter {
+  padding: 4px var(--pds-spacing-s, 12px) 8px;
+}
+
+/* Stretch SegmentedButton to full panel width */
+.css-plugin-version-filter .pds-segmented-button {
+  display: block;
+  width: 100%;
+}
+
+.css-plugin-version-filter .pds-segmented-button__track {
+  display: flex;
+  width: 100%;
+}
+
+.css-plugin-version-filter .pds-segmented-button__option {
+  flex: 1;
+}
+
+.css-plugin-version-filter .pds-segmented-button__option label {
+  width: 100%;
+}
+
+.css-plugin-version-filter .pds-segmented-button__option:not(.pds-segmented-button__option--disabled):not(.pds-segmented-button__option--checked):hover label {
+  color: var(--pds-color-foreground-default);
+}
+
+/* Unpublished changes pill on current version row */
+.css-plugin-version-unpublished {
+  display: inline-block;
+  font-size: 10.5px;
+  font-weight: 600;
+  color: #B0840A;
+  background: #FFF3CC;
+  padding: 2px 7px;
+  border-radius: 5px;
+  margin-top: 6px;
+}
+
+/* Byline: date · author */
+.css-plugin-version-byline {
+  font-size: 11.5px;
+  color: var(--pds-color-fg-default-secondary, #9a9a9a);
+  margin-top: 3px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* "Reverted to v#" label under byline for revert versions */
+.css-plugin-version-revert-source {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--pds-color-fg-default-secondary, #9a9a9a);
+  margin-top: 2px;
+}
 
 /* ============================================
    Toast Notifications
@@ -1841,7 +1999,6 @@
   flex-shrink: 0;
 }
 
-
 /* ============================================
    Focus Region Highlighting
    ============================================ */
@@ -2517,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.
@@ -2530,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;
@@ -2547,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;
 }
 
@@ -2565,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");
 }
 
@@ -2907,3 +3068,367 @@ svg.lucide-layers {
   color: var(--pds-color-fg-default-secondary, #6b7280);
   cursor: pointer;
 }
+
+/* Preview panel overlay — shown at top of Blocks / Outline panels during historical preview */
+.css-preview-panel-overlay__wrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+/* Banner — row when wide, button wraps below label when narrow */
+.css-preview-panel-overlay {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  background: var(--pds-color-bg-default-secondary);
+  padding: 0.5rem 0.75rem;
+  border-bottom: 1px solid var(--pds-color-border-default, #e5e7eb);
+}
+
+.css-preview-panel-overlay__label-wrap {
+  display: flex;
+  flex: 1 1 8rem;
+  min-width: 0;
+}
+
+.css-preview-panel-overlay__btn-wrap {
+  display: flex;
+  flex-shrink: 0;
+  max-width: 100%;
+}
+
+.css-preview-panel-overlay__content {
+  flex: 1;
+  overflow: auto;
+  min-height: 0;
+}
+
+/* Dim the block list when previewing a historical version */
+.css-preview-panel-overlay__content--dimmed {
+  opacity: 0.5;
+  pointer-events: none;
+  user-select: none;
+}
+
+.css-preview-panel-overlay__wrapper--readonly {
+  cursor: not-allowed;
+}
+
+.css-preview-panel-overlay__label {
+  margin: 0;
+  font-size: 0.8125rem;
+  color: var(--pds-color-fg-default, #171717);
+  font-family: Poppins, sans-serif;
+  word-break: break-word;
+}
+
+.css-preview-panel-overlay__btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: 0.375rem 0.75rem;
+  border-radius: 1.5rem;
+  border: none;
+  background: var(--pds-color-interactive-default, #1a1a1a);
+  color: #fff;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  font-family: Poppins, sans-serif;
+  word-break: break-word;
+  cursor: pointer;
+  transition: background 120ms ease;
+}
+
+.css-preview-panel-overlay__btn:hover {
+  background: var(--pds-color-interactive-hover, #333);
+}
+
+/* ============================================
+   Live Thumbnail Blocks Drawer
+   ============================================ */
+
+.p1-blocks-drawer__toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 4px 10px;
+}
+
+.p1-blocks-drawer__toolbar-label {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--pds-color-text-secondary, var(--puck-css-text-secondary));
+}
+
+.p1-blocks-drawer__expand-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 11.5px;
+  font-weight: 600;
+  color: var(--pds-color-interactive-link-default, var(--puck-css-primary));
+  padding: 3px 6px;
+  border-radius: 5px;
+  transition: background 0.15s ease;
+  white-space: nowrap;
+}
+
+.p1-blocks-drawer__expand-btn svg {
+  width: 12px !important;
+  height: 12px !important;
+  flex-shrink: 0;
+}
+
+.p1-blocks-drawer__expand-btn:hover {
+  background: var(--pds-color-button-subtle-background-hover, #eaf0ff);
+}
+
+.p1-blocks-drawer__expand-btn:focus-visible {
+  outline: 2px solid var(--pds-color-interactive-primary, var(--puck-css-primary));
+  outline-offset: 2px;
+}
+
+.p1-blocks-drawer__grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+  padding: 4px 0 8px;
+  min-width: 0;
+}
+
+@keyframes p1-thumb-shimmer {
+  0% { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
+}
+
+/* ThumbnailCard */
+.p1-thumb-card {
+  border: 1px solid var(--pds-color-border-default, #e5e7eb);
+  border-radius: 8px;
+  overflow: hidden;
+  background: var(--pds-color-bg-default, #fff);
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  cursor: grab;
+}
+
+.p1-thumb-card:active {
+  cursor: grabbing;
+}
+
+.p1-thumb-card:hover {
+  border-color: var(--pds-color-interactive-primary, var(--puck-css-primary));
+  box-shadow: 0 0 0 1px var(--pds-color-interactive-primary, var(--puck-css-primary));
+}
+
+.p1-thumb-card__label {
+  padding: 8px 10px;
+  font-size: 13px;
+  font-weight: 500;
+  text-align: center;
+  border-top: 1px solid var(--pds-color-border-default, #e5e7eb);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--pds-color-text-primary, 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);
+}