/* STAGING 017L / Q4C.8 — Step 4 contextual surface previews */
#poPreviewPanel .po-reach-copy{max-width:680px}
#poPreviewPanel .po-reach-copy h1{max-width:620px;font-size:clamp(30px,4vw,44px);line-height:1.05}
#poPreviewPanel .po-reach-copy>span{max-width:610px}
#poPreviewPanel .po-public-brand-choice{margin-top:20px}
#poPreviewPanel .po-tour-status{margin-top:12px;background:#fbfdfc}
#poPreviewPanel .po-three-surface-grid{margin-top:16px}
#poPreviewPanel .po-surface-card{padding:13px;border-radius:18px;background:#fff}
#poPreviewPanel .po-surface-head{padding-bottom:10px}
#poPreviewPanel .po-surface-head b{font-size:14px}
#poPreviewPanel .po-surface-head small{font-size:9.5px}
#poPreviewPanel .po-surface-card>.po-explorer-preview,
#poPreviewPanel .po-surface-card>.po-full-preview,
#poPreviewPanel .po-surface-card>.po-private-preview{position:relative;height:154px;min-height:154px;overflow:hidden;box-sizing:border-box}
#poPreviewPanel .po-surface-card>.po-full-preview{padding-bottom:34px}
#poPreviewPanel .po-surface-card>.po-private-preview .po-private-hero{min-height:116px;padding:14px}
#poPreviewPanel .po-surface-card>.po-private-preview .po-private-tiles{grid-template-columns:repeat(3,minmax(0,1fr));padding:7px}
#poPreviewPanel .po-surface-card>.po-private-preview .po-private-tiles span{padding:6px 3px;font-size:7px}
#poPreviewPanel .po-surface-card>.po-explorer-preview:after,
#poPreviewPanel .po-surface-card>.po-full-preview:after,
#poPreviewPanel .po-surface-card>.po-private-preview:after{content:"";position:absolute;left:0;right:0;bottom:0;height:38px;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.98))}
#poPreviewPanel .po-surface-card>.po-private-preview:after{background:linear-gradient(180deg,rgba(16,45,40,0),rgba(16,45,40,.97))}
#poPreviewPanel .po-surface-purpose{min-height:29px;margin:10px 2px 8px;font-size:9.5px;line-height:1.45}
.po-surface-preview-button{width:100%;min-height:40px;border:1px solid #cfe0d6;border-radius:11px;background:#f7fbf8;color:#216448;font:inherit;font-size:10px;font-weight:900;cursor:pointer}
.po-surface-preview-button:hover{border-color:#69b98c;background:#eff8f3}
.po-surface-preview-layer{position:fixed;inset:0;z-index:3050;display:grid;place-items:center;padding:18px;box-sizing:border-box}
.po-surface-preview-backdrop{position:absolute;inset:0;background:rgba(12,35,31,.58);backdrop-filter:blur(3px)}
.po-surface-preview-sheet{position:relative;z-index:1;width:min(720px,calc(100vw - 36px));max-height:calc(100vh - 36px);overflow:auto;padding:18px;border:1px solid #d3e2d9;border-radius:22px;background:#fff;box-shadow:0 28px 70px rgba(8,36,27,.28);box-sizing:border-box}
.po-surface-preview-topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px}
.po-surface-preview-topbar span{display:block;color:#2d9365;font-size:8px;font-weight:950;letter-spacing:.15em}
.po-surface-preview-topbar h2{margin:4px 0 0;color:#173247;font-size:22px;line-height:1.1}
.po-surface-preview-topbar button{width:34px;height:34px;border:1px solid #d6e3dc;border-radius:50%;background:#fff;color:#375d4e;font-size:22px;line-height:1;cursor:pointer}
.po-surface-preview-host{padding:12px;border:1px solid #e0e9e3;border-radius:18px;background:#f7faf8}
.po-surface-preview-host .po-surface-card{width:100%;max-width:560px;margin:0 auto;padding:0;border:0;background:transparent;box-shadow:none}
.po-surface-preview-host .po-surface-head,
.po-surface-preview-host .po-surface-purpose,
.po-surface-preview-host .po-surface-preview-button{display:none!important}
.po-surface-preview-host .po-explorer-preview,
.po-surface-preview-host .po-full-preview,
.po-surface-preview-host .po-private-preview{height:auto!important;max-height:none!important;min-height:235px!important;overflow:visible!important;box-sizing:border-box}
.po-surface-preview-host .po-explorer-preview:after,
.po-surface-preview-host .po-full-preview:after,
.po-surface-preview-host .po-private-preview:after{display:none!important}
.po-surface-preview-host .po-private-hero{min-height:180px!important}
.po-surface-preview-done{width:100%;margin-top:12px}
body.po-surface-preview-open{overflow:hidden}
@media(max-width:720px){
  #poPreviewPanel .po-reach-copy h1{font-size:32px}
  #poPreviewPanel .po-public-brand-choice{padding:14px}
  #poPreviewPanel .po-three-surface-grid{gap:11px}
  #poPreviewPanel .po-surface-card{padding:12px}
  #poPreviewPanel .po-surface-card>.po-explorer-preview,
  #poPreviewPanel .po-surface-card>.po-full-preview,
  #poPreviewPanel .po-surface-card>.po-private-preview{height:122px;min-height:122px}
  .po-surface-preview-layer{align-items:end;padding:0}
  .po-surface-preview-sheet{width:100%;max-height:88vh;border-radius:24px 24px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom))}
  .po-surface-preview-host{padding:10px}
  .po-surface-preview-host .po-explorer-preview,
  .po-surface-preview-host .po-full-preview,
  .po-surface-preview-host .po-private-preview{min-height:230px!important}
}