/* =============================================================================
   PLAYGROUND CHROME STYLES
   preview/css/playground.css

   Purpose:
     Styles for the playground shell (sidebar, panels, controls, token table).
     These are NOT design system styles — they exist only to build the
     preview/playground UI. They consume --primitive-* and --semantic-* tokens
     from ds-preview.css for styling but are not part of any DS component layer.

   Intentionally NOT wrapped in @layer — this is application chrome CSS,
   applying at the browser's default layer above the DS @layer stack.
   ============================================================================= */

/* ── Google Fonts import (Inter) ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ── CSS reset for playground shell ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* ── Shell layout ─────────────────────────────────────────────────────────── */
.pg-shell {
  display:     grid;
  grid-template-columns: 220px 1fr 340px;
  grid-template-rows:    56px 1fr;
  grid-template-areas:
    "topbar topbar topbar"
    "sidebar main  panel";
  height:      100vh;
  overflow:    hidden;
  font-family: var(--primitive-font-family-sans);
  font-size:   var(--primitive-font-size-sm);
  color:       var(--semantic-color-text-default);
  background:  var(--semantic-color-surface-base);
  transition:  background-color 200ms ease, color 200ms ease;
}

/* ── Top bar ─────────────────────────────────────────────────────────────── */
.pg-topbar {
  grid-area:       topbar;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding-inline:  1.25rem;
  background:      var(--semantic-color-surface-base);
  border-bottom:   1px solid var(--semantic-color-border-default);
  gap:             1rem;
  z-index:         10;
}

.pg-topbar__logo {
  display:     flex;
  align-items: center;
  gap:         0.5rem;
}

.pg-topbar__logo-mark {
  width:         28px;
  height:        28px;
  background:    var(--semantic-color-brand-default);
  border-radius: 6px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  color:         #fff;
  font-weight:   700;
  font-size:     13px;
  flex-shrink:   0;
}

.pg-topbar__title {
  font-size:   0.9375rem;
  font-weight: 600;
  color:       var(--semantic-color-text-default);
  white-space: nowrap;
}

.pg-topbar__subtitle {
  font-size:  0.75rem;
  color:      var(--semantic-color-text-subtle);
  margin-top: 1px;
}

.pg-topbar__controls {
  display:     flex;
  align-items: center;
  gap:         0.625rem;
  margin-left: auto;
}

/* ── Theme toggle ─────────────────────────────────────────────────────────── */
.pg-theme-toggle {
  display:       flex;
  align-items:   center;
  gap:           0.375rem;
  padding:       0.25rem 0.625rem;
  border:        1px solid var(--semantic-color-border-default);
  border-radius: var(--primitive-radius-md);
  background:    var(--semantic-color-surface-raised);
  cursor:        pointer;
  font-size:     0.75rem;
  font-weight:   500;
  color:         var(--semantic-color-text-default);
  transition:    background 120ms ease, border-color 120ms ease;
  white-space:   nowrap;
}

.pg-theme-toggle:hover {
  background:   var(--semantic-color-surface-overlay);
  border-color: var(--semantic-color-border-strong);
}

.pg-theme-toggle__icon {
  font-size: 0.9em;
  line-height: 1;
}

/* ── Export button ────────────────────────────────────────────────────────── */
.pg-export-btn {
  display:       flex;
  align-items:   center;
  gap:           0.375rem;
  padding:       0.25rem 0.75rem;
  border:        none;
  border-radius: var(--primitive-radius-md);
  background:    var(--semantic-color-brand-default);
  color:         #fff;
  cursor:        pointer;
  font-size:     0.75rem;
  font-weight:   600;
  transition:    background 120ms ease;
  white-space:   nowrap;
}

.pg-export-btn:hover { background: var(--semantic-color-brand-hover); }
.pg-export-btn:active { background: var(--semantic-color-brand-active); }

/* ── Sidebar navigation ───────────────────────────────────────────────────── */
.pg-sidebar {
  grid-area:    sidebar;
  overflow-y:   auto;
  padding:      1rem 0.75rem;
  border-right: 1px solid var(--semantic-color-border-default);
  background:   var(--semantic-color-surface-raised);
  display:      flex;
  flex-direction: column;
  gap:          1.25rem;
}

.pg-sidebar__section-label {
  font-size:     0.625rem;
  font-weight:   700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:         var(--semantic-color-text-subtle);
  padding:       0 0.375rem;
  margin-bottom: 0.25rem;
  display:       block;
}

.pg-nav {
  display:        flex;
  flex-direction: column;
  gap:            2px;
}

.pg-nav__item {
  display:       flex;
  align-items:   center;
  gap:           0.5rem;
  padding:       0.4rem 0.625rem;
  border-radius: var(--primitive-radius-md);
  cursor:        pointer;
  font-size:     0.8125rem;
  font-weight:   500;
  color:         var(--semantic-color-text-subtle);
  transition:    background 100ms ease, color 100ms ease;
  user-select:   none;
  border:        none;
  background:    none;
  text-align:    left;
  width:         100%;
}

.pg-nav__item:hover {
  background: var(--semantic-color-surface-overlay);
  color:      var(--semantic-color-text-default);
}

.pg-nav__item.is-active {
  background: var(--semantic-color-brand-tonal-bg);
  color:      var(--semantic-color-text-brand);
  font-weight: 600;
}

.pg-nav__badge {
  margin-left: auto;
  font-size:   0.625rem;
  font-weight: 600;
  padding:     1px 5px;
  border-radius: 9999px;
  background:  var(--semantic-color-brand-default);
  color:       #fff;
  letter-spacing: 0.02em;
}

.pg-nav__badge--new {
  background: var(--semantic-color-feedback-success-default);
}

/* ── Main content area ────────────────────────────────────────────────────── */
.pg-main {
  grid-area:  main;
  overflow-y: auto;
  padding:    1.5rem 2rem 3rem;
  background: var(--semantic-color-surface-base);
}

.pg-component-section { display: none; }
.pg-component-section.is-active { display: block; }

/* ── Section header inside main ──────────────────────────────────────────── */
.pg-section-header {
  margin-bottom:  1.75rem;
  border-bottom:  1px solid var(--semantic-color-border-default);
  padding-bottom: 1rem;
}

.pg-section-header__title {
  font-size:   1.25rem;
  font-weight: 700;
  color:       var(--semantic-color-text-default);
  margin-bottom: 0.375rem;
}

.pg-section-header__meta {
  display:     flex;
  align-items: center;
  gap:         0.5rem;
  font-size:   0.75rem;
  color:       var(--semantic-color-text-subtle);
  flex-wrap:   wrap;
}

.pg-section-header__sem-ver {
  padding:       2px 7px;
  border-radius: var(--primitive-radius-full);
  background:    var(--semantic-color-surface-overlay);
  border:        1px solid var(--semantic-color-border-default);
  font-family:   var(--primitive-font-family-mono);
}

/* ── Preview canvas headings ──────────────────────────────────────────────── */
.pg-heading {
  font-size:     0.6875rem;
  font-weight:   700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:         var(--semantic-color-text-subtle);
  margin-bottom: 0.875rem;
  margin-top:    1.75rem;
}

.pg-heading:first-child { margin-top: 0; }

/* ── Variant grid ─────────────────────────────────────────────────────────── */
.pg-variant-grid {
  display:   flex;
  flex-wrap: wrap;
  gap:       0.75rem;
  align-items: center;
  margin-bottom: 0.5rem;
}

.pg-variant-grid--stacked {
  flex-direction: column;
  align-items:    flex-start;
}

.pg-variant-grid--sizes {
  align-items: flex-end;
}

/* ── State labels under preview items ────────────────────────────────────── */
.pg-state-label {
  display:    block;
  font-size:  0.625rem;
  font-weight: 500;
  color:      var(--semantic-color-text-subtle);
  margin-top: 6px;
  text-align: center;
  letter-spacing: 0.05em;
}

.pg-preview-item {
  display:        flex;
  flex-direction: column;
  align-items:    center;
}

/* ── Code snippet box ─────────────────────────────────────────────────────── */
.pg-code {
  background:    var(--semantic-color-surface-overlay);
  border:        1px solid var(--semantic-color-border-default);
  border-radius: var(--primitive-radius-md);
  padding:       1rem 1.125rem;
  font-family:   var(--primitive-font-family-mono);
  font-size:     0.75rem;
  line-height:   1.6;
  color:         var(--semantic-color-text-default);
  overflow-x:    auto;
  margin-bottom: 0.5rem;
  position:      relative;
}

.pg-code pre { white-space: pre; tab-size: 2; }

.pg-code__copy {
  position:      absolute;
  top:           0.5rem;
  right:         0.5rem;
  padding:       3px 8px;
  border:        1px solid var(--semantic-color-border-default);
  border-radius: var(--primitive-radius-sm);
  background:    var(--semantic-color-surface-base);
  color:         var(--semantic-color-text-subtle);
  font-size:     0.6875rem;
  font-family:   var(--primitive-font-family-sans);
  cursor:        pointer;
  transition:    all 120ms ease;
}

.pg-code__copy:hover {
  background:   var(--semantic-color-surface-raised);
  color:        var(--semantic-color-text-default);
  border-color: var(--semantic-color-border-strong);
}

.pg-code__copy.is-copied {
  background:   var(--semantic-color-feedback-success-subtle);
  color:        var(--semantic-color-feedback-success-text);
  border-color: var(--semantic-color-feedback-success-default);
}

/* ── Right panel ──────────────────────────────────────────────────────────── */
.pg-panel {
  grid-area:   panel;
  overflow-y:  auto;
  border-left: 1px solid var(--semantic-color-border-default);
  background:  var(--semantic-color-surface-raised);
  display:     flex;
  flex-direction: column;
}

.pg-panel__tabs {
  display:     flex;
  border-bottom: 1px solid var(--semantic-color-border-default);
  position:    sticky;
  top:         0;
  background:  var(--semantic-color-surface-raised);
  z-index:     5;
}

.pg-panel__tab {
  flex:          1;
  padding:       0.625rem 0.75rem;
  font-size:     0.75rem;
  font-weight:   500;
  color:         var(--semantic-color-text-subtle);
  background:    none;
  border:        none;
  border-bottom: 2px solid transparent;
  cursor:        pointer;
  transition:    color 120ms ease, border-color 120ms ease;
  white-space:   nowrap;
}

.pg-panel__tab:hover { color: var(--semantic-color-text-default); }
.pg-panel__tab.is-active {
  color:        var(--semantic-color-text-brand);
  border-color: var(--semantic-color-brand-default);
  font-weight:  600;
}

.pg-panel__pane { display: none; padding: 1rem; flex: 1; }
.pg-panel__pane.is-active { display: block; }

/* ── Token table ──────────────────────────────────────────────────────────── */
.pg-token-search {
  width:         100%;
  padding:       0.4rem 0.625rem;
  border:        1px solid var(--semantic-color-border-default);
  border-radius: var(--primitive-radius-md);
  background:    var(--semantic-color-surface-base);
  color:         var(--semantic-color-text-default);
  font-size:     0.75rem;
  margin-bottom: 0.875rem;
  font-family:   var(--primitive-font-family-sans);
  outline:       none;
  transition:    border-color 120ms ease;
}

.pg-token-search:focus { border-color: var(--semantic-color-border-focus); }
.pg-token-search::placeholder { color: var(--semantic-color-text-disabled); }

.pg-token-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       0.6875rem;
}

.pg-token-table th {
  text-align:     left;
  font-size:      0.625rem;
  font-weight:    700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:          var(--semantic-color-text-subtle);
  padding:        0.25rem 0.375rem 0.5rem;
  border-bottom:  1px solid var(--semantic-color-border-default);
}

.pg-token-table td {
  padding:         0.375rem 0.375rem;
  border-bottom:   1px solid var(--semantic-color-border-default);
  vertical-align:  middle;
  color:           var(--semantic-color-text-default);
  font-family:     var(--primitive-font-family-mono);
  font-size:       0.6875rem;
  line-height:     1.4;
}

.pg-token-table tr:last-child td { border-bottom: none; }
.pg-token-table tr:hover td      { background: var(--semantic-color-surface-overlay); }

.pg-token-table__swatch {
  width:         16px;
  height:        16px;
  border-radius: 3px;
  display:       inline-block;
  border:        1px solid rgba(0,0,0,0.1);
  vertical-align: middle;
  margin-right:  4px;
  flex-shrink:   0;
}

.pg-token-table__cell--name {
  color:     var(--semantic-color-text-brand);
  word-break: break-all;
}

.pg-token-table__cell--chain {
  color:  var(--semantic-color-text-subtle);
  font-size: 0.625rem;
  max-width: 90px;
  overflow:  hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pg-token-table__copy-btn {
  background:    none;
  border:        none;
  cursor:        pointer;
  color:         var(--semantic-color-text-subtle);
  font-size:     0.625rem;
  padding:       2px 4px;
  border-radius: 3px;
  transition:    background 100ms ease, color 100ms ease;
}
.pg-token-table__copy-btn:hover { background: var(--semantic-color-surface-overlay); color: var(--semantic-color-text-default); }

/* ── Playground pane ──────────────────────────────────────────────────────── */
.pg-playground-intro {
  font-size:     0.75rem;
  color:         var(--semantic-color-text-subtle);
  line-height:   1.5;
  margin-bottom: 1rem;
}

.pg-control-group {
  margin-bottom: 1.25rem;
}

.pg-control-group__label {
  display:       block;
  font-size:     0.6875rem;
  font-weight:   600;
  color:         var(--semantic-color-text-default);
  margin-bottom: 0.375rem;
  font-family:   var(--primitive-font-family-mono);
  word-break:    break-all;
}

.pg-control-group__sublabel {
  display:       block;
  font-size:     0.625rem;
  color:         var(--semantic-color-text-subtle);
  margin-bottom: 0.5rem;
  line-height:   1.4;
}

.pg-control {
  display:     flex;
  align-items: center;
  gap:         0.5rem;
}

/* Color picker */
.pg-control__color {
  width:         32px;
  height:        28px;
  padding:       2px;
  border:        1px solid var(--semantic-color-border-default);
  border-radius: var(--primitive-radius-sm);
  cursor:        pointer;
  background:    none;
  flex-shrink:   0;
}

/* Text / number input */
.pg-control__input {
  flex:          1;
  padding:       0.3rem 0.5rem;
  border:        1px solid var(--semantic-color-border-default);
  border-radius: var(--primitive-radius-sm);
  background:    var(--semantic-color-surface-base);
  color:         var(--semantic-color-text-default);
  font-size:     0.75rem;
  font-family:   var(--primitive-font-family-mono);
  outline:       none;
  transition:    border-color 120ms ease;
}
.pg-control__input:focus { border-color: var(--semantic-color-border-focus); }

/* Range slider */
.pg-control__range {
  flex:   1;
  accent-color: var(--semantic-color-brand-default);
}

.pg-control__value {
  font-size:   0.6875rem;
  font-family: var(--primitive-font-family-mono);
  color:       var(--semantic-color-text-subtle);
  min-width:   44px;
  text-align:  right;
}

/* Reset button */
.pg-reset-btn {
  width:         100%;
  padding:       0.375rem 0.75rem;
  border:        1px solid var(--semantic-color-border-default);
  border-radius: var(--primitive-radius-md);
  background:    none;
  color:         var(--semantic-color-text-subtle);
  font-size:     0.75rem;
  font-weight:   500;
  cursor:        pointer;
  transition:    all 120ms ease;
  margin-top:    0.375rem;
}
.pg-reset-btn:hover {
  background:   var(--semantic-color-surface-overlay);
  color:        var(--semantic-color-text-default);
  border-color: var(--semantic-color-border-strong);
}

/* ── Token section dividers in playground ─────────────────────────────────── */
.pg-control-section {
  margin-bottom: 0.25rem;
}

.pg-control-section__title {
  font-size:      0.625rem;
  font-weight:    700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--semantic-color-text-subtle);
  padding:        0.5rem 0 0.4rem;
  margin-bottom:  0.5rem;
  border-bottom:  1px solid var(--semantic-color-border-default);
  display:        block;
}

/* ── Info / docs pane ─────────────────────────────────────────────────────── */
.pg-docs p {
  font-size:   0.8125rem;
  line-height: 1.6;
  color:       var(--semantic-color-text-default);
  margin-bottom: 0.875rem;
}

.pg-docs h3 {
  font-size:   0.875rem;
  font-weight: 700;
  color:       var(--semantic-color-text-default);
  margin-top:  1.25rem;
  margin-bottom: 0.5rem;
}

.pg-docs h3:first-child { margin-top: 0; }

.pg-docs ul {
  list-style:     disc;
  padding-left:   1.25rem;
  margin-bottom:  0.875rem;
}

.pg-docs ul li {
  font-size:   0.8125rem;
  line-height: 1.6;
  color:       var(--semantic-color-text-default);
  margin-bottom: 0.25rem;
}

.pg-docs code {
  font-family:   var(--primitive-font-family-mono);
  font-size:     0.75em;
  background:    var(--semantic-color-surface-overlay);
  padding:       1px 4px;
  border-radius: 3px;
  border:        1px solid var(--semantic-color-border-default);
}

/* ── Before / After token diff display (badge flow demo) ─────────────────── */
.pg-token-diff {
  display:        grid;
  grid-template-columns: 1fr 1fr;
  gap:            0.75rem;
  margin-bottom:  1rem;
}

.pg-token-diff__panel {
  border:        1px solid var(--semantic-color-border-default);
  border-radius: var(--primitive-radius-md);
  overflow:      hidden;
}

.pg-token-diff__head {
  display:         flex;
  align-items:     center;
  gap:             0.375rem;
  padding:         0.375rem 0.625rem;
  font-size:       0.6875rem;
  font-weight:     600;
  border-bottom:   1px solid var(--semantic-color-border-default);
  background:      var(--semantic-color-surface-overlay);
}

.pg-token-diff__head--before { color: var(--semantic-color-feedback-danger-text); }
.pg-token-diff__head--after  { color: var(--semantic-color-feedback-success-text); }

.pg-token-diff__body {
  padding:     0.5rem 0.625rem;
  font-family: var(--primitive-font-family-mono);
  font-size:   0.6875rem;
  line-height: 1.6;
  color:       var(--semantic-color-text-default);
  white-space: pre;
  overflow-x:  auto;
}

/* ── Scrollbar styling (Webkit) ───────────────────────────────────────────── */
::-webkit-scrollbar          { width: 6px; height: 6px; }
::-webkit-scrollbar-track    { background: transparent; }
::-webkit-scrollbar-thumb    { background: var(--primitive-color-neutral-300); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--primitive-color-neutral-400); }

[data-theme="dark"] ::-webkit-scrollbar-thumb      { background: var(--primitive-color-neutral-300); }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{ background: var(--primitive-color-neutral-400); }

/* ── Utility: visually hidden ─────────────────────────────────────────────── */
.sr-only {
  position:   absolute;
  width:      1px;
  height:     1px;
  overflow:   hidden;
  clip:       rect(0,0,0,0);
  white-space: nowrap;
}

/* ── Toast notification ───────────────────────────────────────────────────── */
.pg-toast {
  position:      fixed;
  bottom:        1.5rem;
  right:         1.5rem;
  padding:       0.5rem 1rem;
  background:    var(--semantic-color-surface-inverse);
  color:         var(--semantic-color-text-inverse);
  border-radius: var(--primitive-radius-md);
  font-size:     0.8125rem;
  font-weight:   500;
  z-index:       9999;
  opacity:       0;
  transform:     translateY(8px);
  transition:    opacity 200ms ease, transform 200ms ease;
  pointer-events: none;
}

.pg-toast.is-visible {
  opacity:   1;
  transform: translateY(0);
}

/* ── Responsive: hide panel on small screens ──────────────────────────────── */
@media (max-width: 900px) {
  .pg-shell {
    grid-template-columns: 220px 1fr;
    grid-template-areas:
      "topbar topbar"
      "sidebar main";
  }
  .pg-panel { display: none; }
}

@media (max-width: 600px) {
  .pg-shell {
    grid-template-columns: 1fr;
    grid-template-areas:
      "topbar"
      "main";
  }
  .pg-sidebar { display: none; }
}

/* =============================================================================
   PHASE 13 ADDITIONS
   ============================================================================= */

/* ── Theme selector ───────────────────────────────────────────────────────── */
.pg-theme-select {
  padding:       0.25rem 0.5rem;
  border:        1px solid var(--semantic-color-border-default);
  border-radius: var(--semantic-radius-interactive);
  background:    var(--semantic-color-surface-raised);
  color:         var(--semantic-color-text-default);
  font-family:   var(--primitive-font-family-sans);
  font-size:     0.75rem;
  font-weight:   500;
  cursor:        pointer;
  outline:       none;
  transition:    border-color 120ms ease;
}
.pg-theme-select:focus { border-color: var(--semantic-color-border-focus); }

/* ── Export dropdown ──────────────────────────────────────────────────────── */
.pg-export-dropdown {
  position: relative;
}

.pg-export-menu {
  position:      absolute;
  top:           calc(100% + 4px);
  right:         0;
  background:    var(--semantic-color-surface-raised);
  border:        1px solid var(--semantic-color-border-default);
  border-radius: var(--semantic-radius-interactive);
  box-shadow:    var(--semantic-shadow-md);
  list-style:    none;
  padding:       0.25rem 0;
  min-width:     160px;
  z-index:       100;
}

.pg-export-menu[hidden] { display: none; }

.pg-export-menu li { display: block; }

.pg-export-menu button {
  display:     block;
  width:       100%;
  padding:     0.4rem 0.875rem;
  text-align:  left;
  background:  none;
  border:      none;
  cursor:      pointer;
  font-size:   0.75rem;
  font-weight: 500;
  color:       var(--semantic-color-text-default);
  font-family: var(--primitive-font-family-mono);
  transition:  background 80ms ease;
}
.pg-export-menu button:hover {
  background: var(--semantic-color-brand-tonal-bg);
  color:      var(--semantic-color-text-brand);
}

/* ── Panel tab shrinkage for 5 tabs ──────────────────────────────────────── */
.pg-panel__tab {
  font-size: 0.6875rem;
  padding:   0.5rem 0.5rem;
}

/* ── Diff badge on the Diff tab ──────────────────────────────────────────── */
.pg-diff-badge {
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  min-width:     16px;
  height:        16px;
  padding:       0 4px;
  margin-left:   4px;
  background:    var(--semantic-color-brand-default);
  color:         #fff;
  font-size:     0.5625rem;
  font-weight:   700;
  border-radius: 9999px;
  line-height:   1;
  vertical-align: middle;
}
.pg-diff-badge:empty { display: none; }

/* ── Diff pane items ─────────────────────────────────────────────────────── */
.pg-diff-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   0.75rem;
}

.pg-diff-clear-btn {
  padding:       0.2rem 0.5rem;
  border:        1px solid var(--semantic-color-border-default);
  border-radius: var(--semantic-radius-interactive);
  background:    none;
  color:         var(--semantic-color-feedback-danger-text, var(--semantic-color-text-subtle));
  font-size:     0.625rem;
  font-weight:   500;
  cursor:        pointer;
}
.pg-diff-clear-btn:hover { background: var(--semantic-color-surface-overlay); }

.pg-diff-item {
  padding:       0.5rem 0;
  border-bottom: 1px solid var(--semantic-color-border-default);
}
.pg-diff-item:last-child { border-bottom: none; }

.pg-diff-item__name {
  font-family: var(--primitive-font-family-mono);
  font-size:   0.6875rem;
  font-weight: 600;
  color:       var(--semantic-color-text-brand);
  word-break:  break-all;
  margin-bottom: 0.3rem;
  display:     flex;
  align-items: center;
  gap:         0.375rem;
}

.pg-diff-item__swatch {
  width:         12px;
  height:        12px;
  border-radius: 2px;
  border:        1px solid rgba(0,0,0,0.15);
  flex-shrink:   0;
  display:       inline-block;
}

.pg-diff-item__values {
  display:     flex;
  gap:         0.375rem;
  align-items: flex-start;
  font-family: var(--primitive-font-family-mono);
  font-size:   0.625rem;
}

.pg-diff-item__old {
  color:          var(--semantic-color-feedback-danger-text, var(--semantic-color-text-subtle));
  text-decoration: line-through;
  flex:           1;
  word-break:     break-all;
}

.pg-diff-item__arrow {
  color: var(--semantic-color-text-disabled);
  flex-shrink: 0;
}

.pg-diff-item__new {
  color:      var(--semantic-color-feedback-success-text, var(--semantic-color-text-default));
  font-weight: 600;
  flex:       1;
  word-break: break-all;
}

.pg-diff-item__reset {
  margin-top:    0.3rem;
  padding:       0.125rem 0.375rem;
  border:        1px solid var(--semantic-color-border-default);
  border-radius: 3px;
  background:    none;
  color:         var(--semantic-color-text-subtle);
  font-size:     0.5625rem;
  cursor:        pointer;
  transition:    all 80ms ease;
}
.pg-diff-item__reset:hover {
  background: var(--semantic-color-surface-overlay);
  color:      var(--semantic-color-text-default);
}

/* ── Inline validation warning ───────────────────────────────────────────── */
.pg-control__input.has-warn  { border-color: var(--semantic-color-feedback-warning-default, #f59e0b); }
.pg-control__input.has-error { border-color: var(--semantic-color-feedback-danger-default); }

.pg-validation-msg {
  font-size:   0.5625rem;
  margin-top:  0.2rem;
  line-height: 1.3;
  padding:     2px 4px;
  border-radius: 2px;
}
.pg-validation-msg--warn {
  color:      var(--semantic-color-feedback-warning-text, #92400e);
  background: var(--semantic-color-feedback-warning-subtle, #fef3c7);
}
.pg-validation-msg--error {
  color:      var(--semantic-color-feedback-danger-text);
  background: var(--semantic-color-feedback-danger-subtle);
}

/* ── Pages pane ──────────────────────────────────────────────────────────── */
.pg-pages-textarea {
  width:         100%;
  min-height:    220px;
  padding:       0.625rem;
  border:        1px solid var(--semantic-color-border-default);
  border-radius: var(--semantic-radius-interactive);
  background:    var(--semantic-color-surface-base);
  color:         var(--semantic-color-text-default);
  font-family:   var(--primitive-font-family-mono);
  font-size:     0.6875rem;
  line-height:   1.6;
  resize:        vertical;
  outline:       none;
  transition:    border-color 120ms ease;
}
.pg-pages-textarea:focus { border-color: var(--semantic-color-border-focus); }
.pg-pages-textarea::placeholder { color: var(--semantic-color-text-disabled); }

.pg-pages-actions {
  display:    flex;
  gap:        0.5rem;
  margin-top: 0.625rem;
}

.pg-pages-actions .pg-export-btn {
  flex:      1;
  font-size: 0.6875rem;
  padding:   0.3rem 0.5rem;
  justify-content: center;
}

.pg-pages-actions .pg-reset-btn {
  flex:      1;
  font-size: 0.6875rem;
  padding:   0.3rem 0.5rem;
}

/* ── Phase 14 — Framework switcher ──────────────────────────────────────── */
.pg-framework-switcher {
  display:    flex;
  gap:        0.375rem;
  align-items: center;
}

.pg-framework-switcher .pg-theme-select:disabled {
  opacity: 0.45;
  cursor:  not-allowed;
}

/* ── Phase 14 — Adapter pane ────────────────────────────────────────────── */
.pg-adapter-section {
  margin-bottom: 1rem;
}

.pg-adapter-section__label {
  font-size:     0.625rem;
  font-weight:   700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:         var(--semantic-color-text-subtle);
  margin-bottom: 0.375rem;
}

.pg-adapter-section__code {
  background:    var(--semantic-color-surface-overlay);
  border:        1px solid var(--semantic-color-border-subtle);
  border-radius: 4px;
  padding:       0.5rem 0.625rem;
  font-family:   var(--primitive-font-family-mono);
  font-size:     0.6875rem;
  line-height:   1.6;
  color:         var(--semantic-color-text-default);
  white-space:   pre-wrap;
  word-break:    break-all;
  margin:        0 0 0.375rem;
}

.pg-adapter-section__value {
  font-size:  0.75rem;
  color:      var(--semantic-color-text-default);
  font-family: var(--primitive-font-family-mono);
}

/* Variant row */
.pg-adapter-variant {
  background:    var(--semantic-color-surface-default);
  border:        1px solid var(--semantic-color-border-subtle);
  border-radius: 6px;
  padding:       0.5rem 0.625rem;
  margin-bottom: 0.5rem;
}

.pg-adapter-variant__label {
  font-size:     0.625rem;
  font-weight:   600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color:         var(--semantic-color-text-brand);
  margin-bottom: 0.25rem;
}

.pg-adapter-variant__code {
  font-family: var(--primitive-font-family-mono);
  font-size:   0.6875rem;
  line-height: 1.6;
  color:       var(--semantic-color-text-default);
  white-space: pre-wrap;
  word-break:  break-all;
  margin:      0 0 0.375rem;
  padding:     0;
  background:  transparent;
  border:      none;
}

.pg-adapter-variant__copy {
  background:    transparent;
  border:        1px solid var(--semantic-color-border-default);
  border-radius: 4px;
  color:         var(--semantic-color-text-subtle);
  cursor:        pointer;
  font-size:     0.625rem;
  padding:       0.125rem 0.375rem;
}
.pg-adapter-variant__copy:hover {
  background: var(--semantic-color-surface-overlay);
  color:      var(--semantic-color-text-default);
}