/* ============================================================================
   PE_V3_GLOBAL_VIRTUAL_VIEWPORT_B60
   Site-wide desktop virtual viewport PREVIEW foundation.

   The outer application is uniformly scaled only when JS publishes:
     html[data-pe-vv="active"]

   Existing mobile/tablet CSS is intentionally untouched.
   ============================================================================ */

html[data-pe-vv="active"] {
  --pe-vv-scale: 1;
  --pe-vv-w: 100vw;
  --pe-vv-h: 100vh;
  overflow-x: hidden;
}

html[data-pe-vv="active"] body {
  overflow-x: hidden !important;
}

html[data-pe-vv="active"] .pe-vv-target {
  box-sizing: border-box !important;
  transform-origin: top left;
}

/* Workspace compatibility layer.
   B55/B56 enlarged component tokens with physical viewport resolution.
   When the WHOLE application is being scaled, keep those tokens at their
   native desktop values so they are not magnified twice. */
html[data-pe-vv="active"] body.pe-wsbody .pe-ws {
  --pe-fit-ui-scale: 1 !important;
  --pe-fit-font-xs: 11.5px !important;
  --pe-fit-font-sm: 13px !important;
  --pe-fit-font-md: 14.5px !important;
  --pe-fit-font-lg: 17px !important;
  --pe-fit-control-h: 34px !important;
  --pe-fit-control-pad-x: 12px !important;
  --pe-fit-radius: 10px !important;
  --pe-fit-swatch: 13px !important;
  --pe-fit-action: 32px !important;
  --pe-fit-panel-pad: 12px !important;
  --pe-fit-row-min-h: 46px !important;
  --pe-fit-preview-font: 13px !important;
  --pe-fit-preview-h: 34px !important;
  --pe-fit-preview-icon: 15px !important;
  --pe-fit-reset-font: 13px !important;
  --pe-fit-reset-h: 44px !important;
  --pe-fit-adv-swatch-w: 66px !important;
  --pe-fit-adv-swatch-h: 34px !important;
  --pe-fit-result-swatch: 13px !important;
  --pe-fit-result-swatch-gap: 3px !important;
  --pe-fit-result-action: 32px !important;
  --pe-fit-result-action-icon: 15px !important;
  --pe-fit-result-action-gap: 6px !important;

  /* Preserve the approved major structural gap invariant. */
  column-gap: 14px !important;
  --pe-fit-gap: 14px !important;
  --pe-fit-gap-uniform: 14px !important;
}

html[data-pe-vv="active"] body.pe-wsbody {
  --pe-fit-ui-scale: 1 !important;
  --pe-fit-font-xs: 11.5px !important;
  --pe-fit-font-sm: 13px !important;
  --pe-fit-font-md: 14.5px !important;
  --pe-fit-font-lg: 17px !important;
  --pe-fit-control-h: 34px !important;
  --pe-fit-control-pad-x: 12px !important;
  --pe-fit-radius: 10px !important;
  --pe-fit-swatch: 13px !important;
  --pe-fit-action: 32px !important;
  --pe-fit-panel-pad: 12px !important;
  --pe-fit-row-min-h: 46px !important;
  --pe-fit-preview-font: 13px !important;
  --pe-fit-preview-h: 34px !important;
  --pe-fit-preview-icon: 15px !important;
  --pe-fit-reset-font: 13px !important;
  --pe-fit-reset-h: 44px !important;
  --pe-fit-adv-swatch-w: 66px !important;
  --pe-fit-adv-swatch-h: 34px !important;
  --pe-fit-result-swatch: 13px !important;
  --pe-fit-result-swatch-gap: 3px !important;
  --pe-fit-result-action: 32px !important;
  --pe-fit-result-action-icon: 15px !important;
  --pe-fit-result-action-gap: 6px !important;
}

html[data-pe-vv="active"] {
  --pe-fit-ui-scale: 1 !important;
  --pe-fit-font-xs: 11.5px !important;
  --pe-fit-font-sm: 13px !important;
  --pe-fit-font-md: 14.5px !important;
  --pe-fit-font-lg: 17px !important;
  --pe-fit-control-h: 34px !important;
  --pe-fit-control-pad-x: 12px !important;
  --pe-fit-radius: 10px !important;
  --pe-fit-swatch: 13px !important;
  --pe-fit-action: 32px !important;
  --pe-fit-panel-pad: 12px !important;
  --pe-fit-row-min-h: 46px !important;
  --pe-fit-preview-font: 13px !important;
  --pe-fit-preview-h: 34px !important;
  --pe-fit-preview-icon: 15px !important;
  --pe-fit-reset-font: 13px !important;
  --pe-fit-reset-h: 44px !important;
  --pe-fit-adv-swatch-w: 66px !important;
  --pe-fit-adv-swatch-h: 34px !important;
  --pe-fit-result-swatch: 13px !important;
  --pe-fit-result-swatch-gap: 3px !important;
  --pe-fit-result-action: 32px !important;
  --pe-fit-result-action-icon: 15px !important;
  --pe-fit-result-action-gap: 6px !important;
}

/* Optional diagnostics badge — shown only with ?pe_vv_debug=1. */
#pe-vv-b60-debug {
  position: fixed;
  z-index: 2147483646;
  left: 10px;
  bottom: 10px;
  padding: 7px 9px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px;
  background: rgba(10,12,14,.88);
  color: #fff;
  font: 600 11px/1.25 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  pointer-events: none;
  box-shadow: 0 5px 22px rgba(0,0,0,.28);
}
/* /PE_V3_GLOBAL_VIRTUAL_VIEWPORT_B60 */