/* Google Fonts — must precede all rules per CSS spec.
   Consolidates font imports from pds-core.css and PuckEditorTheme.css here
   so consuming bundlers (e.g. Turbopack) never see @import url() after rules. */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Inter+Tight:ital,wght@0,100..900;1,100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap");

@import './pds/theme/PuckEditorTheme.css';
@import './pds/theme/pds-ai-visuals.css';

/**
 * Puck CSS Integration Styles
 *
 * Styles for version comparison and other UI components.
 */

/* ============================================
   Sidebar Background Matching
   ============================================ */

/* Match plugin rail, blocks plugin, and sidebars background to header */
[class*='_PuckLayout-nav_'],
[class*='_BlocksPlugin_'],
[class*='_Sidebar--left_'],
[class*='_Sidebar--right_'] {
  background: var(--pds-color-surface-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_'],
[class*='_Sidebar--right_'] [class*='_Heading_'] {
  background: transparent !important;
}

/* ============================================
   CSS Variables
   ============================================ */
:root {
  /* Diff colors */
  --puck-css-diff-added: #22c55e;
  --puck-css-diff-added-bg: #dcfce7;
  --puck-css-diff-removed: #ef4444;
  --puck-css-diff-removed-bg: #fee2e2;
  --puck-css-diff-modified: #f59e0b;
  --puck-css-diff-modified-bg: #fef3c7;
  --puck-css-diff-reordered: #8b5cf6;
  --puck-css-diff-reordered-bg: #ede9fe;
  --puck-css-diff-unchanged: #6b7280;
  --puck-css-diff-unchanged-bg: #f3f4f6;

  /* General colors */
  --puck-css-border: #e5e7eb;
  --puck-css-bg: #ffffff;
  --puck-css-bg-secondary: #f9fafb;
  --puck-css-text: #111827;
  --puck-css-text-secondary: #6b7280;
  --puck-css-primary: #3b82f6;
  --puck-css-primary-hover: #2563eb;
}

/* ============================================
   Version Preview Read-Only Inspector
   ============================================ */

/* Fields guard: dims all fields and removes interaction (inert attr handles the rest) */
.p1-readonly-fields-guard {
  opacity: 0.5;
  user-select: none;
  pointer-events: none;
}

.p1-inspector-fields--readonly {
  cursor: not-allowed;
}

/* Version read-only banner shown above the dimmed fields */
.p1-version-readonly-banner {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  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;
}

/* Inspector tab header: Page / Blocks switcher */
.p1-inspector-tab-header {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--pds-color-border-default, var(--puck-css-border));
  padding: 0 12px;
  flex-shrink: 0;
}

.p1-inspector-tab {
  position: relative;
  flex: 1;
  padding: 16px 8px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  color: var(--pds-color-foreground-default-secondary, var(--puck-css-text-secondary));
  background: none;
  border: none;
  cursor: pointer;
  outline: none;
}

.p1-inspector-tab:focus-visible {
  outline: 2px solid var(--pds-color-interactive-primary, var(--puck-css-primary));
  outline-offset: 2px;
  border-radius: 2px;
}

.p1-inspector-tab[aria-selected='true'] {
  color: var(--pds-color-foreground-default, var(--puck-css-text));
}

.p1-inspector-tab[aria-selected='true']::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--pds-color-interactive-primary, var(--puck-css-primary));
  border-radius: 2px 2px 0 0;
}

/* Inspector fields wrapper */
.p1-inspector-fields {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* Collapse button — trailing end of the tab-header row */
.p1-inspector-tab-collapse {
  flex-shrink: 0;
  margin-left: auto;
  padding: 0 10px;
  height: 100%;
  display: flex;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--pds-color-foreground-default-secondary, var(--puck-css-text-secondary));
  outline: none;
}

.p1-inspector-tab-collapse:hover {
  color: var(--pds-color-foreground-default, var(--puck-css-text));
}

.p1-inspector-tab-collapse:focus-visible {
  outline: 2px solid var(--pds-color-interactive-primary, var(--puck-css-primary));
  outline-offset: 2px;
  border-radius: 2px;
}

/* Breadcrumb shown below tab header when a block is selected */
.p1-inspector-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  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;
}

.p1-inspector-breadcrumb__sep {
  opacity: 0.5;
}

.p1-inspector-breadcrumb__block {
  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;
}

/* TODO: Delete this block once @puckeditor/core removes showBreadcrumbs: true from the
   fields SidebarSection (chunk-EBISZQTK.mjs line 7580). Puck hardcodes that prop so
   <Breadcrumbs /> always renders above our InspectorTabHeader with no public API to
   disable it. When the package is updated, delete this rule. */
[class*='_Sidebar--right_'] [class*='_SidebarSection-title'] {
  height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  border: 0 !important;
  min-height: 0 !important;
}

/* ============================================
   Utility: Visually Hidden (screen reader only)
   ============================================ */

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

/* ============================================
   DiffHeader
   ============================================ */
.diff-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: var(--puck-css-bg);
  border-bottom: 1px solid var(--puck-css-border);
}

.diff-header__versions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
}

.diff-header__version {
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.875rem;
}

.diff-header__version--before {
  background: var(--puck-css-diff-removed-bg);
  color: var(--puck-css-diff-removed);
}

.diff-header__version--after {
  background: var(--puck-css-diff-added-bg);
  color: var(--puck-css-diff-added);
}

.diff-header__arrow {
  color: var(--puck-css-text-secondary);
}

.diff-header__summary {
  display: flex;
  gap: 0.5rem;
  margin-left: auto;
}

.diff-header__stat {
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.diff-header__stat--added {
  background: var(--puck-css-diff-added-bg);
  color: var(--puck-css-diff-added);
}

.diff-header__stat--removed {
  background: var(--puck-css-diff-removed-bg);
  color: var(--puck-css-diff-removed);
}

.diff-header__stat--modified {
  background: var(--puck-css-diff-modified-bg);
  color: var(--puck-css-diff-modified);
}

.diff-header__stat--reordered {
  background: var(--puck-css-diff-reordered-bg);
  color: var(--puck-css-diff-reordered);
}

.diff-header__close {
  font-size: 1.25rem;
  line-height: 1;
}

/* ============================================
   BranchDiffHeader
   ============================================ */
.branch-diff-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: var(--puck-css-bg);
  border-bottom: 1px solid var(--puck-css-border);
}

.branch-diff-header__branches {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
}

.branch-diff-header__branch {
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.875rem;
}

.branch-diff-header__branch--source {
  background: var(--puck-css-diff-removed-bg);
  color: var(--puck-css-diff-removed);
}

.branch-diff-header__branch--target {
  background: var(--puck-css-diff-added-bg);
  color: var(--puck-css-diff-added);
}

.branch-diff-header__arrow {
  color: var(--puck-css-text-secondary);
}

.branch-diff-header__summary {
  display: flex;
  gap: 0.5rem;
  margin-left: auto;
}

.branch-diff-header__stat {
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.branch-diff-header__stat--added {
  background: var(--puck-css-diff-added-bg);
  color: var(--puck-css-diff-added);
}

.branch-diff-header__stat--removed {
  background: var(--puck-css-diff-removed-bg);
  color: var(--puck-css-diff-removed);
}

.branch-diff-header__stat--modified {
  background: var(--puck-css-diff-modified-bg);
  color: var(--puck-css-diff-modified);
}

.branch-diff-header__stat--reordered {
  background: var(--puck-css-diff-reordered-bg);
  color: var(--puck-css-diff-reordered);
}

.branch-diff-header__close {
  font-size: 1.25rem;
  line-height: 1;
}

/* ============================================
   VersionComparePage
   ============================================ */
.version-compare-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--puck-css-bg-secondary);
}

.version-compare-page__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.version-compare-page__empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--puck-css-text-secondary);
  font-size: 1rem;
}

.version-compare-page__trees {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding: 1rem;
  flex: 1;
  overflow: auto;
}

.version-compare-page__detail {
  border-top: 1px solid var(--puck-css-border);
  padding: 1rem;
  background: var(--puck-css-bg);
  max-height: 40%;
  overflow: auto;
}

/* ============================================
   ComponentTree
   ============================================ */
.component-tree {
  background: var(--puck-css-bg);
  border: 1px solid var(--puck-css-border);
  border-radius: 0.5rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.component-tree__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: var(--puck-css-bg-secondary);
  border-bottom: 1px solid var(--puck-css-border);
}

.component-tree__title {
  font-weight: 600;
  font-size: 0.875rem;
}

.component-tree__count {
  font-size: 0.75rem;
  color: var(--puck-css-text-secondary);
}

.component-tree__content {
  flex: 1;
  overflow: auto;
  padding: 0.5rem;
}

.component-tree__nodes {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.component-tree__empty {
  padding: 2rem;
  text-align: center;
  color: var(--puck-css-text-secondary);
  font-size: 0.875rem;
}

/* ============================================
   ComponentNode
   ============================================ */
.component-node {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid transparent;
  border-radius: 0.375rem;
  background: transparent;
  cursor: pointer;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-size: 0.875rem;
  transition: background-color 0.15s, border-color 0.15s;
}

.component-node:hover {
  background: var(--puck-css-bg-secondary);
}

.component-node--selected {
  border-color: var(--puck-css-primary);
  background: var(--puck-css-bg-secondary);
}

.component-node--added {
  background: var(--puck-css-diff-added-bg);
}

.component-node--added:hover {
  background: var(--puck-css-diff-added-bg);
  filter: brightness(0.95);
}

.component-node--removed {
  background: var(--puck-css-diff-removed-bg);
}

.component-node--removed:hover {
  background: var(--puck-css-diff-removed-bg);
  filter: brightness(0.95);
}

.component-node--modified {
  background: var(--puck-css-diff-modified-bg);
}

.component-node--modified:hover {
  background: var(--puck-css-diff-modified-bg);
  filter: brightness(0.95);
}

.component-node--reordered {
  background: var(--puck-css-diff-reordered-bg);
}

.component-node--reordered:hover {
  background: var(--puck-css-diff-reordered-bg);
  filter: brightness(0.95);
}

.component-node__icon {
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.875rem;
}

.component-node--added .component-node__icon {
  color: var(--puck-css-diff-added);
}

.component-node--removed .component-node__icon {
  color: var(--puck-css-diff-removed);
}

.component-node--modified .component-node__icon {
  color: var(--puck-css-diff-modified);
}

.component-node--reordered .component-node__icon {
  color: var(--puck-css-diff-reordered);
}

.component-node--unchanged .component-node__icon {
  color: var(--puck-css-diff-unchanged);
}

.component-node__type {
  flex: 1;
  font-weight: 500;
}

.component-node__position {
  font-size: 0.75rem;
  color: var(--puck-css-text-secondary);
}

.component-node__move-info {
  font-size: 0.75rem;
  color: var(--puck-css-diff-reordered);
  font-style: italic;
}

/* ============================================
   PropDiffPanel
   ============================================ */
.prop-diff-panel {
  background: var(--puck-css-bg);
  border-radius: 0.5rem;
}

.prop-diff-panel__header {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.prop-diff-panel__type {
  font-weight: 600;
  font-size: 1rem;
}

.prop-diff-panel__id {
  font-size: 0.75rem;
  color: var(--puck-css-text-secondary);
}

.prop-diff-panel__summary {
  font-size: 0.875rem;
  color: var(--puck-css-text-secondary);
  margin-bottom: 0.75rem;
}

.prop-diff-panel__content {
  display: flex;
  flex-direction: column;
}

.prop-diff-panel__rows {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.prop-diff-panel__empty {
  padding: 1rem;
  text-align: center;
  color: var(--puck-css-text-secondary);
  font-size: 0.875rem;
}

/* ============================================
   PropDiffRow
   ============================================ */
.prop-diff-row {
  display: grid;
  grid-template-columns: 8rem 1fr 1.5rem 1fr;
  gap: 0.5rem;
  align-items: start;
  padding: 0.5rem;
  border-radius: 0.375rem;
  background: var(--puck-css-bg-secondary);
}

.prop-diff-row--added {
  background: var(--puck-css-diff-added-bg);
}

.prop-diff-row--removed {
  background: var(--puck-css-diff-removed-bg);
}

.prop-diff-row--modified {
  background: var(--puck-css-diff-modified-bg);
}

.prop-diff-row__name {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--puck-css-text);
}

.prop-diff-row__before,
.prop-diff-row__after {
  font-family: ui-monospace, monospace;
  font-size: 0.8125rem;
  word-break: break-word;
}

.prop-diff-row__arrow {
  text-align: center;
  color: var(--puck-css-text-secondary);
}

/* ============================================
   PropValueDisplay
   ============================================ */
.prop-value {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.prop-value--added {
  color: var(--puck-css-diff-added);
}

.prop-value--removed {
  color: var(--puck-css-diff-removed);
  text-decoration: line-through;
}

.prop-value__color-swatch {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border-radius: 0.25rem;
  border: 1px solid var(--puck-css-border);
}

.prop-value__null {
  color: var(--puck-css-text-secondary);
  font-style: italic;
}

.prop-value__undefined {
  color: var(--puck-css-text-secondary);
  font-style: italic;
}

.prop-value__boolean {
  font-weight: 600;
}

.prop-value__boolean--true {
  color: var(--puck-css-diff-added);
}

.prop-value__boolean--false {
  color: var(--puck-css-diff-removed);
}

.prop-value__number {
  color: var(--puck-css-primary);
}

.prop-value__string {
  color: var(--puck-css-text);
}

.prop-value__array {
  color: var(--puck-css-text-secondary);
}

.prop-value__object {
  color: var(--puck-css-text-secondary);
}

/* ============================================
   VisualVersionCompare
   ============================================ */
.visual-version-compare {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--puck-css-bg-secondary);
}

.visual-version-compare__legend {
  display: flex;
  gap: 1.5rem;
  padding: 0.5rem 1rem;
  background: var(--puck-css-bg);
  border-bottom: 1px solid var(--puck-css-border);
  font-size: 0.75rem;
}

.visual-version-compare__legend-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.visual-version-compare__legend-color {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 0.25rem;
}

.visual-version-compare__legend-item--added .visual-version-compare__legend-color {
  background: var(--puck-css-diff-added);
}

.visual-version-compare__legend-item--removed .visual-version-compare__legend-color {
  background: var(--puck-css-diff-removed);
}

.visual-version-compare__legend-item--modified .visual-version-compare__legend-color {
  background: var(--puck-css-diff-modified);
}

.visual-version-compare__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.visual-version-compare__empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--puck-css-text-secondary);
  font-size: 1rem;
}

.visual-version-compare__panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  flex: 1;
  overflow: hidden;
  background: var(--puck-css-border);
}

.visual-version-compare__panel {
  display: flex;
  flex-direction: column;
  background: var(--puck-css-bg);
  overflow: hidden;
}

.visual-version-compare__panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1rem;
  background: var(--puck-css-bg-secondary);
  border-bottom: 1px solid var(--puck-css-border);
}

.visual-version-compare__panel--before .visual-version-compare__panel-header {
  background: var(--puck-css-diff-removed-bg);
}

.visual-version-compare__panel--after .visual-version-compare__panel-header {
  background: var(--puck-css-diff-added-bg);
}

.visual-version-compare__panel-label {
  font-weight: 600;
  font-size: 0.875rem;
}

.visual-version-compare__panel-version {
  font-size: 0.75rem;
  color: var(--puck-css-text-secondary);
}

.visual-version-compare__panel-content {
  flex: 1;
  overflow: auto;
  padding: 1rem;
}

/* ============================================
   Visual Diff Highlighting
   ============================================ */
.visual-diff-highlight {
  position: relative;
  border-radius: 0.375rem;
}

.visual-diff-highlight--added {
  outline: 3px solid var(--puck-css-diff-added);
  outline-offset: 2px;
  background: var(--puck-css-diff-added-bg);
}

.visual-diff-highlight--removed {
  outline: 3px solid var(--puck-css-diff-removed);
  outline-offset: 2px;
  background: var(--puck-css-diff-removed-bg);
  opacity: 0.7;
}

.visual-diff-highlight--modified {
  outline: 3px solid var(--puck-css-diff-modified);
  outline-offset: 2px;
  background: var(--puck-css-diff-modified-bg);
}

.visual-diff-highlight--reordered {
  outline: 3px solid var(--puck-css-diff-reordered);
  outline-offset: 2px;
  background: var(--puck-css-diff-reordered-bg);
}

.visual-diff-badge {
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.875rem;
  font-weight: 700;
  color: white;
  z-index: 10;
}

.visual-diff-badge--added {
  background: var(--puck-css-diff-added);
}

.visual-diff-badge--removed {
  background: var(--puck-css-diff-removed);
}

.visual-diff-badge--modified {
  background: var(--puck-css-diff-modified);
}

.visual-diff-badge--reordered {
  background: var(--puck-css-diff-reordered);
}

/* ============================================
   CSS Plugin Panel
   ============================================ */
.css-plugin-panel {
  font-family: var(--pds-typography-ff-default, 'Inter', sans-serif);
  font-size: 13px;
  color: var(--puck-css-text);
}

.css-plugin-section {
  margin-bottom: 16px;
}

.css-plugin-section--padded {
  padding: 12px;
}

.css-plugin-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.css-plugin-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--puck-css-text-secondary);
  margin-bottom: 6px;
}

.css-plugin-section-header .css-plugin-label {
  margin-bottom: 0;
}

.css-plugin-select {
  width: 100%;
  padding: 8px 10px;
  font-size: 13px;
  border: 1px solid var(--puck-css-border);
  border-radius: 6px;
  background: var(--puck-css-bg);
  color: var(--puck-css-text);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.css-plugin-select:focus {
  outline: none;
  border-color: var(--puck-css-primary);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.css-plugin-create-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.css-plugin-input {
  width: 100%;
  padding: 8px 10px;
  font-size: 13px;
  border: 1px solid var(--puck-css-border);
  border-radius: 6px;
  background: var(--puck-css-bg);
  color: var(--puck-css-text);
  box-sizing: border-box;
}

.css-plugin-input:focus {
  outline: none;
  border-color: var(--puck-css-primary);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.css-plugin-error {
  padding: 6px 8px;
  font-size: 12px;
  color: var(--puck-css-diff-removed);
  background: var(--puck-css-diff-removed-bg);
  border-radius: 4px;
}

.css-plugin-loading,
.css-plugin-empty {
  padding: 12px;
  text-align: center;
  font-size: 12px;
  color: var(--puck-css-text-secondary);
  background: var(--puck-css-bg-secondary);
  border-radius: 6px;
}

.css-plugin-doc-list,
.css-plugin-version-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--puck-css-border);
  border-radius: 6px;
  overflow: hidden;
}

.css-plugin-doc-item,
.css-plugin-version-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  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 {
  border-bottom: none;
}

.css-plugin-doc-item:hover,
.css-plugin-version-item:hover {
  background: var(--puck-css-bg-secondary);
}

.css-plugin-doc-item--active {
  background: rgba(59, 130, 246, 0.1);
  border-left: 3px solid var(--puck-css-primary);
  padding-left: 7px;
}

.css-plugin-doc-item--main-only {
  opacity: 0.6;
  font-style: italic;
}

.css-plugin-doc-path {
  font-size: 13px;
  color: var(--puck-css-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.css-plugin-doc-delete {
  padding: 2px 6px;
  font-size: 14px;
  line-height: 1;
  border: none;
  background: transparent;
  color: var(--puck-css-text-secondary);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.css-plugin-doc-item:hover .css-plugin-doc-delete {
  opacity: 1;
}

.css-plugin-doc-delete:hover {
  color: var(--puck-css-diff-removed);
}

.css-plugin-version-item {
  gap: 4px;
  flex-direction: column;
  align-items: stretch;
}

.css-plugin-version-item--selected {
  background: rgba(59, 130, 246, 0.1);
}

.css-plugin-version-main {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.css-plugin-version-author {
  font-size: 0.75rem;
  color: var(--pds-color-foreground-default-secondary, #666);
  margin-top: 2px;
}

.css-plugin-version-restore {
  margin-top: 4px;
  align-self: flex-start;
}

.css-plugin-version-number {
  font-weight: 600;
  font-size: 12px;
  color: var(--puck-css-text);
}

.css-plugin-version-date {
  flex: 1;
  font-size: 11px;
  color: var(--puck-css-text-secondary);
}

.css-plugin-version-badge {
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  background: var(--puck-css-diff-added-bg);
  color: var(--puck-css-diff-added);
  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;
}

/* Keeps the timeline's internal z-indexes from tying with the editor rail's. */
.css-plugin-version-groups {
  isolation: isolate;
}

/* 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;
}

/* A history record that is not a version, so there is nothing to open. */
.css-plugin-version-row--static {
  cursor: default;
}

.css-plugin-version-row--static:hover {
  background: none;
}

/* An Unpublished row can also name its redirect, so it wraps rather than cutting it off. */
.css-plugin-version-row--static .css-plugin-version-byline {
  white-space: normal;
}

/* 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-surface-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--unpublished {
  border-radius: 2px;
  background: var(--pds-color-status-critical-foreground, #c0392b);
}

.css-plugin-version-unpublished-title {
  font-weight: 700;
  font-size: 13px;
  color: var(--pds-color-status-critical-foreground, #a82a20);
}

.css-plugin-version-dot--reverted {
  background: var(--pds-color-foreground-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-foreground-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-foreground-default-secondary, #6b6b6b);
  background: var(--pds-color-surface-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-foreground-default-secondary, #9a9a9a);
  padding: 8px var(--pds-spacing-s, 12px) 4px;
  position: sticky;
  top: 0;
  background: var(--pds-color-surface-default, #fff);
  /* Above the timeline dots (z-index: 1) so a scrolled row never paints over the label. */
  z-index: 2;
}

/* 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-foreground-default-secondary, #9a9a9a);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* An attributed byline names the agent and the person; wrap it instead of truncating */
.css-plugin-version-byline--attributed {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* "Reverted to v#" label under byline for revert versions */
.css-plugin-version-revert-source {
  font-size: 11px;
  font-weight: 600;
  color: var(--pds-color-foreground-default-secondary, #9a9a9a);
  margin-top: 2px;
}

/* ============================================
   Toast Notifications
   ============================================ */
.css-puck-toast {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  background: var(--puck-css-bg);
  border: 1px solid var(--puck-css-border);
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  min-width: 300px;
  max-width: 400px;
  position: relative;
  overflow: hidden;
  animation: css-puck-toast-enter 0.2s ease-out;
}

@keyframes css-puck-toast-enter {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.css-puck-toast--exiting {
  animation: css-puck-toast-exit 0.2s ease-in forwards;
}

@keyframes css-puck-toast-exit {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

/* Severity variants */
.css-puck-toast--success {
  border-left: 4px solid var(--puck-css-diff-added);
}

.css-puck-toast--error {
  border-left: 4px solid var(--puck-css-diff-removed);
}

.css-puck-toast--warning {
  border-left: 4px solid var(--puck-css-diff-modified);
}

.css-puck-toast--info {
  border-left: 4px solid var(--puck-css-primary);
}

/* Icon */
.css-puck-toast__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 50%;
}

.css-puck-toast__icon--success {
  background: var(--puck-css-diff-added-bg);
  color: var(--puck-css-diff-added);
}

.css-puck-toast__icon--error {
  background: var(--puck-css-diff-removed-bg);
  color: var(--puck-css-diff-removed);
}

.css-puck-toast__icon--warning {
  background: var(--puck-css-diff-modified-bg);
  color: var(--puck-css-diff-modified);
}

.css-puck-toast__icon--info {
  background: rgba(59, 130, 246, 0.15);
  color: var(--puck-css-primary);
}

/* Content */
.css-puck-toast__content {
  flex: 1;
  min-width: 0;
}

.css-puck-toast__title {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--puck-css-text);
  margin-bottom: 0.25rem;
}

.css-puck-toast__message {
  font-size: 0.8125rem;
  color: var(--puck-css-text-secondary);
  line-height: 1.4;
  word-break: break-word;
}

/* Actions */
.css-puck-toast__actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

/* Dismiss button */
.css-puck-toast__dismiss {
  flex-shrink: 0;
  font-size: 0.875rem;
  line-height: 1;
}

/* Progress bar */
.css-puck-toast__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--puck-css-primary);
  transition: width 0.05s linear;
  border-radius: 0 0 0 0.5rem;
}

.css-puck-toast--success .css-puck-toast__progress {
  background: var(--puck-css-diff-added);
}

.css-puck-toast--error .css-puck-toast__progress {
  background: var(--puck-css-diff-removed);
}

.css-puck-toast--warning .css-puck-toast__progress {
  background: var(--puck-css-diff-modified);
}

/* ============================================
   Notification Container
   ============================================ */
.css-puck-notification-container {
  position: fixed;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}

.css-puck-notification-container > * {
  pointer-events: auto;
}

/* Position variants */
.css-puck-notification-container--top-right {
  top: 1rem;
  right: 1rem;
}

.css-puck-notification-container--top-left {
  top: 1rem;
  left: 1rem;
}

.css-puck-notification-container--top-center {
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
}

.css-puck-notification-container--bottom-right {
  bottom: 1rem;
  right: 1rem;
}

.css-puck-notification-container--bottom-left {
  bottom: 1rem;
  left: 1rem;
}

.css-puck-notification-container--bottom-center {
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
}

/* Bottom positions should stack upward */
.css-puck-notification-container--bottom-right,
.css-puck-notification-container--bottom-left,
.css-puck-notification-container--bottom-center {
  flex-direction: column-reverse;
}

/* Adjust animation direction for left-positioned containers */
.css-puck-notification-container--top-left .css-puck-toast,
.css-puck-notification-container--bottom-left .css-puck-toast {
  animation-name: css-puck-toast-enter-left;
}

@keyframes css-puck-toast-enter-left {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.css-puck-notification-container--top-left .css-puck-toast--exiting,
.css-puck-notification-container--bottom-left .css-puck-toast--exiting {
  animation-name: css-puck-toast-exit-left;
}

@keyframes css-puck-toast-exit-left {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-100%);
  }
}

/* Center positions use vertical animation */
.css-puck-notification-container--top-center .css-puck-toast {
  animation-name: css-puck-toast-enter-top;
}

@keyframes css-puck-toast-enter-top {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.css-puck-notification-container--top-center .css-puck-toast--exiting {
  animation-name: css-puck-toast-exit-top;
}

@keyframes css-puck-toast-exit-top {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-100%);
  }
}

.css-puck-notification-container--bottom-center .css-puck-toast {
  animation-name: css-puck-toast-enter-bottom;
}

@keyframes css-puck-toast-enter-bottom {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.css-puck-notification-container--bottom-center .css-puck-toast--exiting {
  animation-name: css-puck-toast-exit-bottom;
}

@keyframes css-puck-toast-exit-bottom {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(100%);
  }
}

/* ============================================
   Collaborator Avatars
   ============================================ */

/* Avatar colors - agents have a specific color, humans use hash-based colors via inline styles */
:root {
  --puck-css-avatar-agent: #6366f1;
  --puck-css-avatar-fallback: #64748b;
}

.css-puck-collaborator-avatars {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.css-puck-collaborator-avatars__group {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.css-puck-collaborator-avatars__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  position: relative;
  border: 2px solid white;
  margin-left: -8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.15s ease, z-index 0.15s ease;
  /* Fallback color - actual color is set via inline style based on user ID hash */
  background: var(--puck-css-avatar-fallback);
}

.css-puck-collaborator-avatars__avatar:first-child {
  margin-left: 0;
}

.css-puck-collaborator-avatars__avatar:hover {
  transform: scale(1.1);
  z-index: 10;
}

/* Z-index stacking - later avatars appear behind earlier ones */
.css-puck-collaborator-avatars__avatar:nth-child(1) { z-index: 5; }
.css-puck-collaborator-avatars__avatar:nth-child(2) { z-index: 4; }
.css-puck-collaborator-avatars__avatar:nth-child(3) { z-index: 3; }
.css-puck-collaborator-avatars__avatar:nth-child(4) { z-index: 2; }
.css-puck-collaborator-avatars__avatar:nth-child(5) { z-index: 1; }

/* Editing state - pulsing ring */
.css-puck-collaborator-avatars__avatar--editing {
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.4);
  animation: css-puck-avatar-pulse 2s ease-in-out infinite;
}

@keyframes css-puck-avatar-pulse {
  0%, 100% {
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.4);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.2);
  }
}

/* Agent avatar styling - uses same hash-based coloring as humans */
/* The agent badge provides visual distinction without overriding the color */
.css-puck-collaborator-avatars__avatar--agent {
  /* No background override - agents use hash-based colors like humans */
}

.css-puck-collaborator-avatars__image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.css-puck-collaborator-avatars__initials {
  text-transform: uppercase;
  user-select: none;
}

/* Agent badge indicator */
.css-puck-collaborator-avatars__agent-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 12px;
  height: 12px;
  background: var(--puck-css-avatar-agent);
  border: 2px solid white;
  border-radius: 50%;
}

.css-puck-collaborator-avatars__agent-badge::before {
  content: "⚡";
  font-size: 6px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Separator between groups */
.css-puck-collaborator-avatars__separator {
  width: 1px;
  height: 24px;
  background: var(--puck-css-border);
  margin: 0 8px;
}

/* Overflow indicator */
.css-puck-collaborator-avatars__overflow {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--puck-css-bg-secondary);
  border: 2px solid white;
  color: var(--puck-css-text-secondary);
  font-size: 11px;
  font-weight: 600;
  margin-left: -8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Tooltip styling */
.css-puck-collaborator-avatars__avatar[data-tooltip] {
  position: relative;
}

.css-puck-collaborator-avatars__avatar[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 10px;
  background: var(--puck-css-text);
  color: white;
  font-size: 12px;
  font-weight: 500;
  white-space: pre-line;
  border-radius: 6px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  z-index: 100;
  pointer-events: none;
  min-width: 100px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.css-puck-collaborator-avatars__avatar[data-tooltip]::before {
  content: "";
  position: absolute;
  top: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: var(--puck-css-text);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  z-index: 100;
}

.css-puck-collaborator-avatars__avatar[data-tooltip]:hover::after,
.css-puck-collaborator-avatars__avatar[data-tooltip]:hover::before {
  opacity: 1;
  visibility: visible;
}

/* ============================================
   AgentActivityBanner
   ============================================ */
.css-puck-agent-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--puck-css-bg);
  border: 1px solid var(--puck-css-border);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  gap: 12px;
}

.css-puck-agent-banner--editing {
  border-color: var(--puck-css-primary);
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(99, 102, 241, 0.02) 100%);
}

.css-puck-agent-banner--active {
  border-color: var(--puck-css-diff-added);
}

.css-puck-agent-banner__content {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.css-puck-agent-banner__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 12px;
  position: relative;
  flex-shrink: 0;
  /* Default agent color - can be overridden by inline style */
  background: var(--puck-css-avatar-agent, #6366f1);
}

.css-puck-agent-banner__initials {
  text-transform: uppercase;
  user-select: none;
}

.css-puck-agent-banner__agent-icon {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 12px;
  height: 12px;
  background: var(--puck-css-avatar-agent, #6366f1);
  border: 2px solid white;
  border-radius: 50%;
}

.css-puck-agent-banner__agent-icon::before {
  content: "⚡";
  font-size: 6px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.css-puck-agent-banner__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.css-puck-agent-banner__name {
  font-weight: 600;
  font-size: 13px;
  color: var(--puck-css-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.css-puck-agent-banner__intent {
  font-size: 12px;
  color: var(--puck-css-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.css-puck-agent-banner__regions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.css-puck-agent-banner__regions-label {
  font-size: 11px;
  color: var(--puck-css-text-secondary);
  font-weight: 500;
}

.css-puck-agent-banner__region {
  font-size: 11px;
  padding: 2px 6px;
  background: var(--puck-css-bg-secondary);
  border-radius: 4px;
  color: var(--puck-css-text);
  font-family: ui-monospace, monospace;
}

.css-puck-agent-banner__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ============================================
   Focus Region Highlighting
   ============================================ */

/* Focus region highlight - applied directly to Puck's [data-puck-component] elements via DOM.
   Uses outline (no layout impact) to avoid scroll jumps. */
.focus-region-highlight {
  position: relative;
  outline: 2px solid var(--focus-color, #6366f1);
  outline-offset: 2px;
  border-radius: 0.375rem;
}

/* Editing state - thicker outline with pulsing animation */
.focus-region-highlight--editing {
  outline-width: 3px;
  animation: focus-pulse 2s ease-in-out infinite;
}

@keyframes focus-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 var(--focus-color, #6366f1);
  }
  50% {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus-color, #6366f1) 30%, transparent);
  }
}

/* Actor badge via ::after pseudo-element — avoids DOM insertion that triggers scroll */
.focus-region-highlight[data-focus-initial]::after {
  content: attr(data-focus-initial);
  position: absolute;
  top: -0.75rem;
  left: 0.5rem;
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--focus-color, #6366f1);
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 50%;
  z-index: 10;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Legacy badge class (kept for backwards compatibility) */
.focus-region-highlight__badge {
  position: absolute;
  top: -0.75rem;
  left: 0.5rem;
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--focus-color, #6366f1);
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 50%;
  z-index: 10;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* ============================================
   Agent Block Overlay

   Drawn in the page, except the marker of a run at its very top, which goes in
   the editor's gutter. The rim, the avatar's ring, the name and the shimmer are
   the design system's AI visuals; pds-ai-visuals.css brings the page what they
   read from pds-core. Everything else is stated rather than inherited, as the
   page's own styles are the site's.
   ============================================ */

/* An animation, not a transition: it plays its whole ramp from any opacity, so
   an overlay that had not finished appearing still fades. */
@keyframes focus-region-agent-out {
  to {
    opacity: 0;
  }
}

/* An agent carries neither a person's initial nor their pulse. */
.focus-region-highlight[data-focus-role='agent']::after {
  content: none;
}

.focus-region-highlight--editing[data-focus-role='agent'] {
  animation: none;
}

.focus-region-highlight[data-focus-role='agent'] {
  outline: none;
}

/* Pinned to the page's origin, so overlays are placed against the page itself. */
.focus-region-agent-layer {
  position: absolute;
  top: 0;
  left: 0;
  /* Above Puck's hover outline (1) and block controls (2), added after this. */
  z-index: 3;
}

.focus-region-agent-host {
  --agent-fade: 0.3s;
  position: absolute;
  /* Not auto: the shimmer's -1 needs a stacking context. In the gutter, 0 keeps
     it under Puck's ._PuckCanvas-controls (1), as neither canvas wrapper is a
     stacking context. */
  z-index: 0;
  border-radius: 6px;
  pointer-events: none;
  /* The default lets the marker hang above the run; positionAgentHosts cuts the
     gutter's marker back as its run scrolls away. */
  clip-path: inset(var(--agent-clip-top, -20px) 0 var(--agent-clip-bottom, 0px) 0);
}

/* The editor's zoom reaches overlays in the page. --agent-unzoom scales the
   rim, marker and banner back to their own size. */
.focus-region-agent-layer > .focus-region-agent-host {
  border-radius: calc(6px * var(--agent-unzoom, 1));
  /* The page cuts these to its viewport itself. */
  clip-path: none;
}

/* Paired with AGENT_FADE_MS. */
.focus-region-agent-host[data-leaving] {
  animation: focus-region-agent-out var(--agent-fade) linear forwards;
  pointer-events: none;
}

.focus-region-agent__rim {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.focus-region-agent-layer .focus-region-agent__rim::before {
  padding: calc(var(--pds-border-width-thicker) * var(--agent-unzoom, 1));
}

/* Under the rim and badge; the host's z-index keeps the -1 off the page. */
.focus-region-agent__shimmer {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  border-radius: inherit;
}

/* Astride the block's top edge. */
.focus-region-agent__marker {
  position: absolute;
  top: 0;
  left: 16px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
}

/* For a host that has closed the gutter PuckEditorTheme.css holds open. A run
   scrolled out of view is cut off instead. */
.focus-region-agent-host[data-at-page-top] .focus-region-agent__marker {
  top: auto;
  bottom: 0;
  transform: translateY(50%);
}

/* Drawn whole in the gutter instead. */
.focus-region-agent-host[data-gutter-marker] .focus-region-agent__marker {
  display: none;
}

/* Scaled about its left middle, so the edge still runs through it. */
.focus-region-agent-layer .focus-region-agent__marker {
  left: calc(16px * var(--agent-unzoom, 1));
  transform: translateY(-50%) scale(var(--agent-unzoom, 1));
  transform-origin: left center;
}

.focus-region-agent__avatar {
  position: relative;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #141414;
  /* The keyline separates the badge from the block. */
  box-shadow: 0 0 0 2px #fff;
  color: #fff;
}

/* Outside the keyline. */
.focus-region-agent__avatar::before {
  inset: -4px;
}

/* The Badge takes its face from the page, which is the site's. */
.focus-region-agent__name {
  font-family: 'Inter Tight', Inter, system-ui, sans-serif;
}

/* The corner the editor's block toolbar takes on every other block, so it is
   set to that toolbar: 28px controls in 4px of ground, its face, size and grey. */
.focus-region-agent__banner {
  position: absolute;
  top: 8px;
  right: 8px;
  max-width: calc(100% - 64px);
  display: flex;
  align-items: center;
  padding: 4px 0;
  border-radius: 8px;
  /* Stop runs to the right edge, so the banner turns that corner. */
  overflow: hidden;
  /* A literal: --pds-color-foreground-default inverts under a dark theme. */
  background: oklch(0.2046 0 0);
  color: var(--puck-color-grey-08, #c3c3c3);
  font-family: var(--puck-font-family, 'Inter Tight', Inter, system-ui, sans-serif);
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  box-shadow: 0 4px 14px rgb(35 35 45 / 8%), 0 2px 4px rgb(35 35 45 / 4%);
  /* Opacity, not display, so Stop stays in the tab order and focusing it
     reveals the banner. */
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.focus-region-agent-host[data-selected] .focus-region-agent__banner,
.focus-region-agent-host:focus-within .focus-region-agent__banner {
  opacity: 1;
  pointer-events: auto;
}

/* Scaled from the corner it sits in, and held to the same room as unscaled. */
.focus-region-agent-layer .focus-region-agent__banner {
  top: calc(8px * var(--agent-unzoom, 1));
  right: calc(8px * var(--agent-unzoom, 1));
  max-width: calc((100% - 64px * var(--agent-unzoom, 1)) / var(--agent-unzoom, 1));
  transform: scale(var(--agent-unzoom, 1));
  transform-origin: top right;
}

/* Inset as far as the toolbar insets its label. */
.focus-region-agent__label {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-inline: 4px;
  padding: 0 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.focus-region-agent__icon {
  display: block;
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  fill: currentColor;
}

/* PDS's l and xs icon sizes in px, as the page's rem is the site's. */
.focus-region-agent__avatar .focus-region-agent__icon {
  width: 18px;
  height: 18px;
}

.focus-region-agent__banner .focus-region-agent__icon {
  width: 12px;
  height: 12px;
}

.focus-region-agent__stop .focus-region-agent__icon {
  width: 11px;
  height: 11px;
}

/* The toolbar's control height, which sets the banner's. */
.focus-region-agent__stop {
  align-self: stretch;
  min-height: 28px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 0 12px;
  border: none;
  border-left: 1px solid rgb(255 255 255 / 16%);
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.focus-region-agent__stop:hover {
  background: rgb(255 255 255 / 18%);
}

.focus-region-agent__stop:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
  .focus-region-agent-host[data-leaving] {
    animation: none;
    opacity: 0;
  }

  .focus-region-agent__banner {
    transition: none;
  }
}

/* ============================================
   Merge Preview Panel
   ============================================ */

.merge-preview-panel {
  background: var(--puck-css-bg);
  height: 100%;
  padding: 1rem;
  overflow-y: auto;
  box-sizing: border-box;
}

.merge-preview-panel__title {
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
  color: var(--puck-css-text);
}

.merge-preview-panel__branch-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--puck-css-text-secondary);
  margin-bottom: 1rem;
}

.merge-preview-panel__branch {
  font-weight: 500;
}

.merge-preview-panel__document-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.merge-preview-panel__empty,
.merge-preview-panel__loading,
.merge-preview-panel__error {
  font-size: 0.875rem;
  padding: 1rem 0;
}

.merge-preview-panel__empty,
.merge-preview-panel__loading {
  color: var(--puck-css-text-secondary);
}

.merge-preview-panel__error {
  color: var(--pds-color-status-critical-foreground, #b91c1c);
}

.merge-preview-document__row {
  width: 100%;
  text-align: left;
  background: var(--puck-css-bg-secondary);
  border: 1px solid var(--puck-css-border);
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  cursor: pointer;
  color: var(--puck-css-text);
}

.merge-preview-document__row:hover {
  background: var(--pds-color-interactive-background-hover, #f5f5f5);
}

.merge-preview-document__path {
  font-weight: 500;
}

.merge-preview-document__row--expanded {
  border-radius: 0.375rem 0.375rem 0 0;
  border-bottom-color: transparent;
}

.merge-preview-document__detail {
  border: 1px solid var(--puck-css-border);
  border-top: none;
  border-radius: 0 0 0.375rem 0.375rem;
  overflow: hidden;
}

.merge-preview-document__detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.5rem 0.5rem 0.75rem;
  background: var(--puck-css-bg-secondary);
  border-bottom: 1px solid var(--puck-css-border);
}

.merge-preview-document__detail-path {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--puck-css-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.merge-preview-document__detail-body {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* ============================================
   View Mode Selector
   ============================================ */

.view-mode-selector {
  display: flex;
  gap: 0.25rem;
}

/* ============================================
   Merge Preview Renderer
   ============================================ */

.merge-preview-renderer__wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.merge-preview-renderer__summary {
  font-size: 0.75rem;
  color: var(--puck-css-text-secondary);
  margin-bottom: 0.75rem;
}

/* -- Empty state -- */

.merge-preview-renderer--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--puck-css-text-secondary);
  font-size: 1rem;
  padding: 2rem;
}

/* -- Side-by-side mode -- */

.merge-preview-renderer--side-by-side {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  flex: 1;
  overflow: hidden;
}

.merge-preview-renderer__panel {
  display: flex;
  flex-direction: column;
  background: var(--puck-css-bg);
  border: 1px solid var(--puck-css-border);
  border-radius: 0.375rem;
  overflow: hidden;
}

/* The version the reviewer chose to keep. */
.merge-preview-renderer__panel--selected {
  border: 2px solid #2ca84a;
}

.merge-preview-renderer__panel-label {
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.5rem 1rem;
  background: var(--puck-css-bg-secondary);
  border-bottom: 1px solid var(--puck-css-border);
}

/* A caller-supplied header (branch name + author/date + "Choose this
   version") already carries its own layout — the plain-label band and
   divider underneath it would be redundant chrome around chrome. */
.merge-preview-renderer__panel-label--custom {
  background: none;
  border-bottom: none;
  padding: 1rem 1rem 0.75rem;
}

.merge-preview-renderer__panel-content {
  flex: 1;
  overflow: auto;
  margin: 0 1rem 1rem;
  /* Breathing room around the scaled preview; badge clipping is handled by ScaledContent's topOverhang, not this padding. */
  padding: 16px;
  border: 1px solid var(--puck-css-border);
  border-radius: 0.5rem;
  background: var(--puck-css-bg);
  max-height: clamp(600px, calc(100vh - 200px), 1400px);
}

/* A page that doesn't exist on this branch — added, deleted, or not yet
   published. Same box as the real preview, dashed instead of solid. */
.merge-preview-renderer__panel-content--empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 300px;
  border-style: dashed;
  border-color: #dcdce2;
  background: #fafafb;
  text-align: center;
  padding: 24px;
  font: 600 14px 'Inter Tight', Inter, sans-serif;
  color: #8a8a8a;
}

.merge-preview-renderer__panel-empty-icon {
  display: inline-flex;
  color: #c4c4cc;
}

/* -- Overlay mode -- */

.merge-preview-renderer--overlay {
  position: relative;
  flex: 1;
  overflow: hidden;
}

.merge-preview-renderer__overlay-layer {
  width: 100%;
}

.merge-preview-renderer__overlay-layer--source {
  position: relative;
  z-index: 1;
}

.merge-preview-renderer__overlay-layer--target {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  opacity: 0.5;
}

/* -- Slider mode -- */

.merge-preview-renderer--slider {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

.merge-preview-renderer__slider-control {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  background: var(--puck-css-bg-secondary);
  border-bottom: 1px solid var(--puck-css-border);
}

.merge-preview-renderer__slider-input {
  flex: 1;
}

.merge-preview-renderer__slider-content {
  position: relative;
  flex: 1;
  overflow: hidden;
}

.merge-preview-renderer__slider-layer {
  width: 100%;
}

.merge-preview-renderer__slider-layer--source {
  position: relative;
  z-index: 1;
}

.merge-preview-renderer__slider-layer--target {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

/* =============================================================================
   Puck nav: icon-only tabs

   Puck renders each tab as icon + text label; the rail is icon-only, so the
   labels are hidden here. PuckEditorTheme.css re-shows them as hover tooltips.

   Icons are NOT set here. Our own plugins pass a React `icon`, and the two
   tabs Puck builds itself (Blocks, Outline) are restyled in PuckEditorTheme.css
   by the lucide class their icon ships with. Nothing keys off tab position:
   the rail reorders whenever a plugin gains or loses `render`, so an
   `nth-child` rule silently paints whichever plugin happens to land in that
   slot — which is exactly how the Data sources tab ended up wearing the AI
   sparkles icon.
   ============================================================================= */

/* Hide all text labels.
   Puck renders the label as <span class=""> (empty class, not a named CSS module
   class), so we target the second/last span child of the NavItem-link div. */
[class*='NavItem-link'] > span[class=''],
[class*='NavItem-link'] > span:not([class]) {
  display: none;
}

/* ============================================
   Template Selector
   ============================================ */

.template-selector {
  width: 100%;
}

.template-selector__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  padding: 16px 0;
}

.template-selector__option {
  /* Extend PDS button styles */
  min-height: 100px;
  text-align: left;
  padding: 16px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 2px solid var(--puck-css-border);
  border-radius: 8px;
  transition: all 0.2s ease;
}

.template-selector__option:hover {
  border-color: var(--puck-css-primary);
  background-color: var(--puck-css-bg-secondary);
}

.template-selector__option[aria-pressed="true"] {
  border-color: var(--puck-css-primary);
  background-color: var(--puck-css-primary);
  color: white;
}

.template-selector__option[aria-pressed="true"] .template-selector__option-description {
  color: rgba(255, 255, 255, 0.9);
}

.template-selector__option-content {
  width: 100%;
}

.template-selector__option-label {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
}

.template-selector__option-description {
  font-size: 14px;
  color: var(--puck-css-text-secondary);
  line-height: 1.4;
}

.template-selector--loading,
.template-selector--error {
  padding: 32px;
  text-align: center;
}

.template-selector__loading-message {
  font-size: 16px;
  color: var(--puck-css-text-secondary);
}

.template-selector__error-message {
  color: var(--puck-css-diff-removed);
}

.template-selector__error-message strong {
  display: block;
  margin-bottom: 8px;
  font-size: 16px;
}

.template-selector__error-message p {
  font-size: 14px;
  margin: 0;
}

/* ── Template Manager Overlay ─────────────────────────────────────────── */

.template-manager-overlay {
  position: fixed;
  inset: 0;
  z-index: 10001;
  background: var(--pds-color-surface-default, #fff);
  display: flex;
  flex-direction: column;
}

.template-manager-overlay__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.5rem;
  border-bottom: 1px solid var(--pds-color-border-default, #e5e7eb);
  flex-shrink: 0;
}

.template-manager-overlay__title {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0;
}

.template-manager-overlay__close {
  background: none;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  color: var(--pds-color-foreground-default-secondary, #6b7280);
  padding: 0.25rem 0.5rem;
}

.template-manager-overlay__close:hover {
  color: var(--pds-color-foreground-default, #1f2937);
}

.template-manager-overlay__error {
  padding: 0.5rem 1.5rem;
  background: #fef2f2;
  color: #991b1b;
  font-size: 0.875rem;
}

.template-manager-overlay__list {
  padding: 1.5rem;
  overflow-y: auto;
  flex: 1;
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
}

.template-manager-overlay__loading,
.template-manager-overlay__empty {
  padding: 2rem;
  text-align: center;
  color: var(--pds-color-foreground-default-secondary, #6b7280);
  font-size: 0.875rem;
}

.template-manager-overlay__template-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.template-manager-overlay__template-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border: 1px solid var(--pds-color-border-default, #e5e7eb);
  border-radius: 0.375rem;
}

.template-manager-overlay__template-item:hover {
  background: var(--pds-color-surface-default-secondary, #f9fafb);
}

.template-manager-overlay__template-info {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.template-manager-overlay__template-label {
  font-weight: 600;
  font-size: 0.875rem;
}

.template-manager-overlay__template-meta {
  font-size: 0.75rem;
  color: var(--pds-color-foreground-default-secondary, #6b7280);
}

.template-manager-overlay__template-actions {
  display: flex;
  gap: 0.5rem;
}

/* ── Template Editor (create/edit mode) ───────────────────────────────── */

.template-manager-overlay__editor {
  display: grid;
  grid-template-columns: 300px 1fr;
  flex: 1;
  overflow: hidden;
}

.template-manager-overlay__editor-sidebar {
  border-right: 1px solid var(--pds-color-border-default, #e5e7eb);
  padding: 1rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.template-manager-overlay__editor-canvas {
  overflow: hidden;
}

.template-manager-overlay__metadata {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.template-manager-overlay__field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.template-manager-overlay__field-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--pds-color-foreground-default-secondary, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.template-manager-overlay__input,
.template-manager-overlay__textarea {
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--pds-color-border-default, #e5e7eb);
  border-radius: 0.25rem;
  font-size: 0.875rem;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}

.template-manager-overlay__input:focus,
.template-manager-overlay__textarea:focus {
  outline: none;
  border-color: var(--pds-color-interactive-focus, #3b82f6);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.template-manager-overlay__input:disabled {
  background: var(--pds-color-surface-default-secondary, #f9fafb);
  color: var(--pds-color-foreground-default-secondary, #6b7280);
}

.template-manager-overlay__save-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--pds-color-border-default, #e5e7eb);
}

.template-manager-overlay__puck-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--pds-color-foreground-default-secondary, #6b7280);
}

/* ── Template Pin Panel ───────────────────────────────────────────────── */

.template-pin-panel {
  border: 1px solid var(--pds-color-border-default, #e5e7eb);
  border-radius: 0.375rem;
  padding: 0.75rem;
}

.template-pin-panel--empty {
  color: var(--pds-color-foreground-default-secondary, #6b7280);
  font-size: 0.8125rem;
  font-style: italic;
}

.template-pin-panel__header {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--pds-color-foreground-default-secondary, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

.template-pin-panel__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.template-pin-panel__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.375rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
}

.template-pin-panel__item:hover {
  background: var(--pds-color-surface-default-secondary, #f9fafb);
}

.template-pin-panel__type {
  font-weight: 500;
}

.template-pin-panel__pin-label {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: var(--pds-color-foreground-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-surface-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-foreground-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-foreground-default-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-surface-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-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;
}

/* On the label text where P1FieldLabel wraps it, since the row reserves space
   for the field's affordances that the colon must not sit out beside. A field
   rendering Puck's FieldLabel directly emits no such span and keeps the colon on
   its row. */
.p1-inspector-fields [class*='_Input-label_'] .p1-field-label-text::after,
.p1-inspector-fields [class*='_Input-label_']:not(:has(.p1-field-label-text))::after {
  content: ':';
}

/* A <select> does not grow its block box for padding the way a text input
   does, so Puck's input padding leaves it a content box shorter than its own
   line and the option text clips. Hold it to the height the text input beside
   it takes with that same padding. */
.p1-inspector-fields select[class*='_Input-input_'] {
  min-height: calc(1lh + 26px);
}

/* ============================================
   Field Label Actions
   ============================================ */

/* The affordances a field's label row carries — its translation setting, its
   data binding. They are laid into the row from outside the `<label>`, and the
   row reserves the space they occupy. A panel of fields shows none of them until
   one is hovered or takes focus, and the field whose setting is open holds its
   row on screen. */
.p1-field-label-holder {
  position: relative;
}

/* The row keeps the height its affordances need, whether or not it has any, so
   a field's label sits at the same place throughout the panel. */
.p1-inspector-fields [class*='_Input-label_'] {
  min-height: 32px;
  padding-inline-end: 68px;
}

.p1-inspector-fields .p1-field-label-actions {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  /* The popover wraps its trigger in inline spans, whose line box would
     otherwise stand the group taller than the controls in it. */
  line-height: 0;
  opacity: 0;
  transition: opacity 120ms ease;
}

.p1-inspector-fields
  [class*='_InputWrapper_']:hover:not(:has([class*='_InputWrapper_']:hover))
  .p1-field-label-actions,
.p1-inspector-fields
  [class*='_InputWrapper_']:focus-within:not(:has([class*='_InputWrapper_']:focus-within))
  .p1-field-label-actions,
.p1-inspector-fields .p1-field-label-actions:has([data-open='true']) {
  opacity: 1;
}

/* Scoped to the panel: Puck colours every descendant of a field
   (`._PuckFields-field_ *`), which a bare class here would tie with and lose. */
/* The popover pads its own trigger, which would stand its control 4px taller
   than the one beside it. */
.p1-inspector-fields .p1-field-label-actions .pds-popover__trigger {
  padding: 0;
}

.p1-inspector-fields .p1-field-label-action {
  box-sizing: border-box;
  appearance: none;
  padding: 0;
  width: 28px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid var(--puck-color-grey-09, #dcdcdc);
  border-radius: 7px;
  background: var(--puck-color-white, #fff);
  color: var(--puck-color-grey-06, #949494);
  cursor: pointer;
  transition:
    color 120ms ease,
    border-color 120ms ease,
    background 120ms ease;
}

.p1-inspector-fields .p1-field-label-action:hover,
.p1-inspector-fields .p1-field-label-action[data-open='true'] {
  color: var(--puck-color-azure-04, #0158ad);
  border-color: var(--puck-color-azure-08, #c6d6ff);
  background: var(--puck-color-azure-11, #eef3ff);
}

/* A setting that has left its default reads as changed the moment its row shows. */
.p1-inspector-fields .p1-field-label-action[data-diverged='true'] {
  color: var(--puck-color-azure-04, #0158ad);
}

.p1-inspector-fields .p1-field-label-action svg {
  width: 14px;
  height: 14px;
}

/* ============================================
   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);
}