/**
 * course-preview-frame.css — the course-page preview FRAME.
 *
 * The stylesheet for js/course-cover-preview.js, and only for that. It styles
 * the two class names the component itself emits — `.ccw-frame-wrap` (with its
 * iframe) and `.ccw-preview-empty` — and nothing else.
 *
 * ── Why this file exists ────────────────────────────────────────────────
 * These rules lived in course-wizard.css scoped to `.ccw`, back when the
 * wizard was the only thing that mounted a preview. The Customize tab
 * (js/course-config.js) then mounted the same component into `.cpg-*` markup
 * with no `.ccw` anywhere above it, so it got the component's JavaScript and
 * none of its CSS. What that looked like, measured in a real browser:
 *
 *   · `transform-origin` fell back to the initial `50% 50%`, so `scale(k)`
 *     reduced the iframe about its CENTRE. At Desktop in a 514px column the
 *     render painted 383px across and 257px down from the box drawn to hold
 *     it — the page shoved into a corner of a large empty rectangle.
 *   · `overflow: hidden` was absent, so nothing clipped the overhang.
 *   · `margin: 0 auto` was absent, so the render could not centre.
 *   · the iframe kept the user agent's 2px border and `display: inline`.
 *
 * Alex, 2026-08-01: "They're squashed, not how the preview is. It's not how
 * they would actually look in a browser." He was describing all four at once.
 *
 * So the fix is not a second copy of these rules under `.cpg-tpl-preview` —
 * that is the same bug waiting for a third consumer. A component that emits
 * its own markup owns its own stylesheet, and every consumer gets it by
 * loading this file. tests/browser/course-preview-frame.browser.js mounts the
 * real component into both ancestries and measures the geometry, so a fourth
 * surface cannot quietly repeat this.
 *
 * ── Deliberately NOT here ───────────────────────────────────────────────
 * Where the preview SITS — the wizard's stage widths, its preview bar and its
 * mobile toggle — stays in course-wizard.css. That is placement, and placement
 * is the page's business. This file only answers "what does a scaled render of
 * a device viewport look like", which is the same answer everywhere.
 *
 * Selectors are unscoped on purpose. `.ccw-frame-wrap` is emitted by exactly
 * one module and styled by exactly one file, so there is nothing for a lower
 * specificity to lose to.
 */

/* The wrap is sized by layout() to the SCALED render, so it is the clip box
   as well as the centring box. Both matter: without the clip the overhang
   from any rounding paints over the controls next to it. */
.ccw-frame-wrap {
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  max-width: 100%;
}

/* A lazily-mounted card has an empty iframe until it scrolls into view; left
   bare that reads as a broken card rather than one that has not arrived yet. */
.ccw-frame-wrap.pending { background: var(--surface-3); }
.ccw-frame-wrap.pending::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, var(--surface-2) 30%, var(--surface-3) 50%, var(--surface-2) 70%);
  background-size: 300% 100%; animation: ccw-shimmer 1.4s linear infinite;
}
@keyframes ccw-shimmer { to { background-position: -150% 0; } }

.ccw-frame-wrap iframe {
  border: 0;
  /* `inline` gives the iframe a text baseline, and the descender space under
     it adds a few unaccounted pixels to a box whose height is computed. */
  display: block;
  background: var(--surface);
  /* THE one that made the Customize preview look broken. layout() sizes the
     wrap to `vp.w * k` by `frameH * k` and positions nothing, which is only
     correct if the reduction happens from the corner the wrap starts at. */
  transform-origin: top left;
  box-shadow: 0 1px 3px var(--border-strong);
}

.ccw-preview-empty {
  padding: 40px 20px; text-align: center; font-size: 13px; color: var(--text-3);
}