/* ================================================================
 * The exact HTML replica
 *
 * This sheet is deliberately tiny. The page's own CSS is printed inline after
 * it, scoped to `.w2f-replica[data-replica]`, and that CSS is the design. The
 * only rules here are the shell: let the copy use the full width, and give the
 * sandboxed-frame fallback a height the script can adjust.
 *
 * NOTHING HERE SETS TYPE, COLOUR OR SPACING INSIDE THE COPY. A max-width on its
 * images or a font-family on its paragraphs would be a second opinion about a
 * page whose whole point is that it has only one.
 * ================================================================ */

.w2f-replica-page {
  padding: 0;
  background: transparent;
}

.w2f-replica-container {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

.w2f-replica-stage {
  /* The source's body background is the page's canvas. The stage is inside a
     centred theme container, so pull it back out to the viewport edges. */
  width: 100vw;
  max-width: 100vw;
  margin: 0 calc(50% - 50vw);
}

/* The wrapper is a containing block and a new stacking context. It does not
   otherwise style the page: the source's own `body`/`:root` rules land here
   because the scoper maps them to this element. */
.w2f-replica {
  position: relative;
  isolation: isolate;
  /* The source's body background is painted on this wrapper; the stage has
     already pulled the copy out to the viewport edges. */
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  /* The wrapper stands in for the source <body>. It must not inherit the
     theme body's type scale or leading; the source body rules below override
     these when the saved page set them. */
  font-family: initial;
  font-size: medium;
  font-weight: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: start;
  color: canvastext;
}

/* Keep the theme's own element rules out of the copy. These overrides have the
   same specificity as a source rule scoped to the wrapper, and the source CSS
   is printed after this sheet, so the page's own rule always wins. */
.w2f-replica :where(a) { color: revert; text-decoration: revert; }
.w2f-replica :where(a:hover, a:focus) { color: revert; }
.w2f-replica :where(h1, h2, h3, h4, h5, h6) {
  color: inherit;
  font-family: inherit;
  font-size: revert;
  font-weight: revert;
  line-height: revert;
  letter-spacing: revert;
  margin: revert;
  text-wrap: revert;
}
.w2f-replica :where(p) { margin: revert; }
.w2f-replica :where(ul, ol) { padding-left: revert; }
.w2f-replica :where(img) { max-width: revert; height: revert; }
.w2f-replica :where(input, select, textarea, button) { font: revert; color: revert; }

/* ================================================================
 * The page with a rail
 *
 * THE COPY STAYS THE WIDE COLUMN. The rail is a sibling, not a wrapper around
 * the source page, so its stylesheet still applies only to `.w2f-replica` and
 * nothing in the article inherits a theme card, heading size or link colour.
 *
 * The stage's viewport-wide pull is deliberately cancelled here. In the old
 * one-column page it pulled the source body's background out to both edges;
 * beside a rail that same rule would paint over the rail. The source still
 * gets its full design inside the column, at the width the column has.
 * ================================================================ */
.w2f-replica-container-shell {
  max-width: calc(var(--container, 1200px) + 80px);
  margin: 0 auto;
  padding: 24px 20px 48px;
}

.w2f-replica-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 30px;
  align-items: start;
}
.w2f-replica-main,
.w2f-replica-aside { min-width: 0; }
.w2f-replica-aside { align-self: stretch; }

.w2f-replica-shell .w2f-replica-stage {
  width: 100%;
  max-width: 100%;
  margin: 0;
}
.w2f-replica-shell .w2f-replica { min-height: 0; }
.w2f-replica-shell .w2f-rail { height: 100%; }

@media (min-width: 1140px) {
  .w2f-replica-shell { grid-template-columns: minmax(0, 1fr) 296px; }
}

@media (max-width: 1139px) {
  .w2f-replica-container-shell { padding-top: 0; }
  .w2f-replica-aside { margin-top: 2px; }
}

@media (max-width: 640px) {
  .w2f-replica-container-shell { padding: 0 12px 38px; }
}

/* Ads injected between the source's paragraphs. The source owns the typography
   inside the copy; this wrapper only reserves a neutral break around the unit,
   and the theme's own `.w2f-ad` rules do the rest. */
.w2f-replica-ad-slot { margin: 1.8em 0; }
.w2f-replica-ad-slot .w2f-ad { margin: 0; }

/* The fallback, when a stylesheet could not be scoped safely. */
.w2f-replica-frame {
  display: block;
  width: 100%;
  min-height: 420px;
  border: 0;
  background: #fff;
}

/* A phone should not inherit a desktop canvas: the frame is the width of the
   column, and the page inside it is the page's own responsive document. */
@media (max-width: 640px) {
  .w2f-replica-frame {
    min-height: 320px;
  }
}