/*
 * Export-safe Barlow GX families. The source font uses its original GX
 * coordinates rather than the later CSS 100–900 weight scale.
 *
 * Named weight stops: 71 Regular, 96 Medium, 116 SemiBold, 141 Bold,
 * 166 ExtraBold, 188 Black. Any number between 22 and 188 is valid.
 *
 * Width is baked into each file (BarlowGX.ttf instanced at wdth 500/300):
 * Safari and Chromium ≤139 ignore font-variation-settings inside @font-face,
 * which made titles export condensed. Each guide rule below supplies an
 * editable native weight through the standard font-weight field.
 */
@font-face {
  font-family: "Barlow GX Normal";
  src: url("assets/fonts/BarlowGX-Normal.ttf") format("truetype-variations");
  font-style: normal;
  font-weight: 22 188;
  font-display: swap;
}

@font-face {
  font-family: "Barlow GX Condensed";
  src: url("assets/fonts/BarlowGX-Condensed.ttf") format("truetype-variations");
  font-style: normal;
  font-weight: 22 188;
  font-display: swap;
}
:root {
  --ink: #151512;
  --ink-soft: #34342f;
  --paper: var(--ad-ui-workspace, #e8e8e3);
  --panel: var(--ad-ui-panel, #fbfbf7);
  --canvas: var(--ad-ui-workspace, #e8e8e3);
  --line: var(--ad-ui-line, #d6d6cf);
  --line-dark: #393936;
  --yellow: var(--ad-ui-action, #ffed1f);
  --yellow-dark: #d9b400;
  --success: #087856;
  --error: #b33b29;
  --white: #ffffff;
  --muted: var(--ad-ui-muted, #74746d);
  --shadow: 0 18px 50px rgba(22, 22, 18, 0.13);

  /* Edit these tokens to tune the fixed guide; app.js reads the same values for export. */
  --guide-width: 1080px;
  --guide-height: 1350px;
  --guide-padding-x: 75px;
  --guide-padding-top: 75px;
  --guide-padding-bottom: 60px;
  --guide-footer-height: 62px;
  --guide-event-gap: 32px;
  --guide-event-gap: 36px;
  --guide-time-width: 84px;
  --guide-column-gap: 32px;
  /* Time tags cut around their time (2 Oct 2026): the column fits 00:00 at 38px with the biggest
     cut, and the gap is measured from that; most tags end well short of it. */
  --guide-time-size: 38px;
  --guide-time-width: 125px;
  --guide-column-gap: 20px;
  /* Condensed again (5 Oct 2026), with the tape kept inside the margin: the column fits 00:00 with
     its inset and the biggest cut. */
  --guide-time-width: 118px;
  /* The cut only adds (18 Oct 2026), so the tape can reach 0.79em past the last figure: the column
     fits 23:30, the widest time, at 38px with the inset and that reach. */
  --guide-time-width: 126px;
  --guide-event-title-size: 44px;
  --guide-event-meta-size: 38px;
  --guide-event-title-size: 46px;
  --guide-event-meta-size: 40px;
  --guide-event-title-size: 47px;
  --guide-event-meta-size: 42px;
  --guide-title-width: 1920px;
  /* AD brand colours (2 Oct 2026): light #f0f0f0, yellow #ffed1f, dark #101010. */
  --guide-background: #f0f0f0;
  --guide-ink: #101010;
  --guide-grey: #7f7c7c;
  --guide-yellow: #ffed1f;
  --guide-footer-ink: #101010;

  /* From the shared AD tokens (vendor/ad-tokens.css, synced from Tape Type by
     scripts/sync-tape.mjs): a change there reaches the guide on the next sync. A value set
     after these here would win, and the guide would drift from the other tools. */
  --guide-width: var(--ad-page-width);
  --guide-height: var(--ad-page-height);
  --guide-padding-x: var(--ad-guide-padding-sides);
  --guide-padding-top: var(--ad-guide-padding-sides);
  --guide-padding-bottom: var(--ad-guide-padding-bottom);
  --guide-event-gap: var(--ad-guide-event-gap);
  --guide-event-title-size: var(--ad-guide-title-size);
  --guide-event-meta-size: var(--ad-guide-meta-size);
  --guide-time-size: var(--ad-guide-time-size);
  --guide-background: var(--ad-light);
  --guide-ink: var(--ad-dark);
  --guide-grey: var(--ad-meta-on-light);
  --guide-yellow: var(--ad-yellow);
  --guide-footer-ink: var(--ad-dark);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: var(--canvas);
  font-family: "Barlow", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button,
input,
button,
summary,
label[for="csv-file"] {
  -webkit-tap-highlight-color: transparent;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

:focus-visible {
  outline: 3px solid #2f67f5;
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.app-header {
  position: sticky;
  z-index: 20;
  top: 0;
  display: flex;
  min-height: 78px;
  align-items: center;
  justify-content: space-between;
  padding: 12px clamp(18px, 2.8vw, 46px);
  color: var(--white);
  background: var(--ink);
  border-bottom: 1px solid var(--line-dark);
}

.app-brand {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  color: inherit;
  text-decoration: none;
}

.app-brand__mark {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  color: var(--ink);
  background: var(--yellow);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.04em;
}

.app-brand strong,
.app-brand small {
  display: block;
}

.app-brand strong {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 19px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.035em;
}

.app-brand small {
  margin-top: 5px;
  color: #b9b9b1;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.workspace {
  display: grid;
  grid-template-columns: minmax(320px, 386px) minmax(0, 1fr);
  min-height: calc(100vh - var(--ad-ui-masthead, 64px));
}

.controls {
  align-self: start;
  border-right: 1px solid #c7c6be;
  background: var(--panel);
}

.panel {
  padding: 30px clamp(22px, 2.5vw, 36px);
  border-bottom: 1px solid var(--line);
}

.panel__heading,
.section-heading,
.preview-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

/* Headings in the news site's voice (19 Oct 2026): Bold, −3%, sentence case; the ui tokens carry the sizes. */
h1,
h2 {
  margin-bottom: 0;
  font-family: "Barlow GX Normal", Barlow, sans-serif;
  font-weight: 141;
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

h1 {
  font-size: var(--ad-ui-t-title, 24px);
}

h2 {
  font-size: var(--ad-ui-t-title, 24px);
}

.source-actions {
  display: grid;
  grid-template-columns: 1fr 48px;
  gap: 8px;
  margin-top: 24px;
}

.sheet-tab-field {
  margin-top: 24px;
}

.sheet-tab-field + .source-actions {
  margin-top: 12px;
}

.sheet-tab-field input {
  font-variant-numeric: tabular-nums;
}

.data-inspector {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.data-totals {
  display: grid;
  gap: 5px;
  color: #5f5f59;
  font-size: 13px;
}

.data-totals strong {
  display: inline-block;
  min-width: 30px;
  color: var(--ink);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.data-totals__valid {
  color: var(--success);
}

.data-totals__valid strong {
  color: var(--success);
}

.day-counts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 22px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 15px;
  font-weight: 600;
}

.day-counts li {
  display: flex;
  justify-content: space-between;
  padding-bottom: 4px;
  border-bottom: 1px solid #dfded6;
}

.day-counts strong {
  font-variant-numeric: tabular-nums;
}

.ignored-details {
  margin-top: 18px;
  border-top: 1px solid #dfded6;
}

.ignored-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 0 2px;
  color: #53534d;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.ignored-details summary::-webkit-details-marker {
  display: none;
}

.ignored-details summary::before {
  content: "+";
  order: 3;
  color: var(--muted);
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
}

.ignored-details[open] summary::before {
  content: "−";
}

.ignored-details summary strong {
  margin-left: auto;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.ignored-list {
  display: grid;
  gap: 8px;
  max-height: 210px;
  margin: 11px 0 0;
  padding: 0 2px 2px 0;
  overflow-y: auto;
  list-style: none;
}

.ignored-list li {
  display: grid;
  gap: 2px;
  padding: 9px 10px;
  background: #f0efe9;
  border-left: 3px solid #b8b6ab;
}

.ignored-list strong {
  overflow: hidden;
  font-size: 12px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ignored-list span {
  color: var(--muted);
  font-size: 11px;
}

.date-check {
  margin-top: 18px;
  padding: 13px;
  color: #604e08;
  background: #fff4be;
  border: 1px solid #e4ca4d;
}

.date-check > strong {
  display: block;
  font-size: 13px;
}

.date-check p {
  margin: 5px 0 11px;
  font-size: 12px;
  line-height: 1.35;
}

.csv-fallback {
  margin-top: 19px;
  border-top: 1px solid var(--line);
}

.csv-fallback summary {
  padding: 16px 0 0;
  color: #4f4f4a;
  font-size: 13px;
  font-weight: 600;
  list-style-position: outside;
}

.csv-fallback__body {
  display: grid;
  gap: 11px;
  padding-top: 14px;
}

.file-drop {
  display: grid;
  min-height: 80px;
  place-content: center;
  padding: 15px;
  text-align: center;
  border: 1px dashed #a8a79f;
  background: #f3f2ec;
  cursor: pointer;
}

.file-drop:hover {
  border-color: var(--ink);
}

.file-drop span {
  font-size: 14px;
  font-weight: 700;
}

.file-drop small,
.number-field small,
.toggle-row small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.text-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #8b8b84;
  font-size: 12px;
}

.text-actions button {
  padding: 2px;
  color: #52524c;
  background: transparent;
  border: 0;
  font-size: 12px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.segmented-control {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 3px;
  background: #e9e8e1;
  border-radius: 3px;
}

.segmented-control label {
  position: relative;
}

.segmented-control input {
  position: absolute;
  opacity: 0;
}

.segmented-control span {
  display: grid;
  min-height: 36px;
  place-items: center;
  border-radius: 2px;
  color: #65655f;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

input[name="export-scale"] + span {
  font-family: "Barlow Condensed", sans-serif;
}

.segmented-control input:checked + span {
  color: var(--ink);
  background: var(--white);
  box-shadow: 0 1px 4px rgba(20, 20, 18, 0.14);
}

.segmented-control input:focus-visible + span {
  outline: 3px solid #2f67f5;
}

.toggle-list {
  display: grid;
  margin-top: 22px;
  border-top: 1px solid var(--line);
}

.generation-summary {
  padding: 31px clamp(22px, 2.5vw, 36px) 34px;
  color: var(--white);
  background: var(--ink);
}

.generation-summary h2 {
  font-size: clamp(30px, 3vw, 40px);
  font-variant-numeric: tabular-nums;
}

.generation-summary h2 b {
  color: var(--yellow);
  font-weight: 500;
}

.generation-summary h2 b svg {
  width: 0.7em;
  height: 0.7em;
  vertical-align: -0.05em;
}

.generation-actions {
  display: grid;
  gap: 8px;
  margin-top: 21px;
}

.export-status {
  min-height: 18px;
  margin: 10px 0 0;
  color: #aaa9a2;
  font-size: 12px;
}

.preview-area {
  min-width: 0;
  padding: clamp(24px, 3vw, 46px);
  background:
    linear-gradient(rgba(0, 0, 0, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.025) 1px, transparent 1px),
    var(--canvas);
  background-size: 24px 24px;
}

.preview-heading {
  align-items: flex-end;
  margin-bottom: 25px;
}

.preview-heading h2 {
  font-size: clamp(28px, 3vw, 40px);
}

.preview-count {
  flex: 0 0 auto;
  padding: 7px 10px;
  color: #55554f;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid #c9c8c1;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  align-items: start;
  gap: clamp(23px, 3vw, 38px);
}

.empty-state__number {
  margin-bottom: 16px;
  color: #b7b6ae;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 62px;
  font-weight: 800;
  line-height: 1;
}

.page-card {
  min-width: 0;
}

.page-card__toolbar {
  display: flex;
  min-height: 39px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px;
}

.page-card__toolbar span {
  min-width: 0;
  overflow: hidden;
  color: #5c5c56;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-card__toolbar button {
  flex: 0 0 auto;
  padding: 4px 7px;
  color: #4a4a45;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid #bcbcb4;
  border-radius: 2px;
  font-size: 11px;
  font-weight: 700;
}

.page-card__toolbar button:hover:not(:disabled) {
  color: var(--white);
  background: var(--ink);
  border-color: var(--ink);
}

.page-frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--guide-background);
  box-shadow: var(--shadow);
}

/* The fixed-resolution design surface. Previewing only changes this transform. */
.guide-page {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  width: var(--guide-width);
  height: var(--guide-height);
  grid-template-rows: minmax(0, 1fr) var(--guide-footer-height);
  padding: var(--guide-padding-top) var(--guide-padding-x)
    var(--guide-padding-bottom);
  overflow: hidden;
  color: var(--guide-ink);
  background: var(--guide-background);
  font-family: "Barlow", Arial, sans-serif;
  transform: scale(var(--preview-scale, 1));
  transform-origin: top left;
}

.guide-page__events {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: var(--guide-event-gap);
  /* Keep the existing breathing room plus a 16px safety guard above the footer. */
  padding: 0 0 40px;
  /* 2 Oct 2026: the guard grew, so the footer has clearly more room than the 36px between events:
     every page keeps at least 84px above it (Shaun's call; 72 was tried first), for one more page
     in a full week (25, not 24). The shared tokens' guide-footer-guard. */
  padding-bottom: var(--ad-guide-footer-guard);
  overflow: hidden;
}

.guide-event {
  display: grid;
  grid-template-columns: var(--guide-time-width) minmax(0, 1fr);
  gap: var(--guide-column-gap);
  align-items: start;
  break-inside: avoid;
}

.guide-event__time {
  /* Every AD tag is ExtraBold on tape with Tape Type's clean cut (2 Oct 2026). A time is Tape
     Type's inside label, as Guide Studio's page numbers are: app.js cuts each tape around its time
     with Tape Type's own generator (timeTagShape in core.js, vendor/tape.js) and sizes and places
     each tag: the figures on the title's baseline. Before this the times were Condensed, centred in
     an 84 × 52 box. Since 5 Oct 2026 they're Condensed again, ExtraBold, and the tape's square left
     end stands on the margin with the cut on its free end (it overhung the margin for three days,
     too near the edge in the feed). The tape is a PNG
     because html2canvas draws neither clip-path nor masks, and Safari won't save an export that
     drew an SVG picture from a data: URL. */
  position: relative;
  display: block;
}

.guide-event__tape {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.guide-event__time-text {
  position: absolute;
  color: var(--guide-ink);
  font-family: "Barlow Condensed", sans-serif;
  font-size: var(--guide-time-size);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}

.guide-event__body {
  min-width: 0;
}

.guide-event__title {
  max-width: var(--guide-title-width);
  margin: 0;
  overflow-wrap: break-word;
  font-family: "Barlow", Arial, sans-serif;
  font-size: var(--guide-event-title-size);
  font-weight: 900;
  font-weight: 800;
  line-height: 1;
  line-height: 1.1;
  line-height: var(--ad-guide-title-line-height);
  letter-spacing: 0;
  text-transform: uppercase;
}

.guide-event__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 6px;
  margin: 6px 0 0;
  color: var(--guide-grey);
  font-family: "Barlow Condensed", sans-serif;
  font-size: var(--guide-event-meta-size);
  font-weight: 600;
  font-weight: 500;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
  line-height: var(--ad-guide-meta-line-height);
  letter-spacing: var(--ad-guide-meta-letter-spacing);
}

.guide-event__instagram {
  font-weight: 600;
  font-weight: 500;
  font-weight: 400;
  /* letter-spacing: -0.02em; */
  text-transform: lowercase;
}

.guide-event__meta > span {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.guide-page__footer {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.guide-page__footer-lockup {
  display: flex;
  min-width: 0;
  align-items: center;
  /* 15px until 18 Oct 2026: the mark sat a touch apart from the wordmark on the family board. */
  gap: 12px;
}

.guide-page__dublin-mark {
  display: block;
  width: 144px;
  height: 62px;
  flex: 0 0 144px;
  object-fit: contain;
  translate: 2px 6px;
}

.guide-page__footer-title {
  color: var(--guide-footer-ink);
  font-family: "Barlow", Arial, sans-serif;
  font-size: 52px;
  font-size: var(--ad-guide-wordmark-size);
  font-weight: 900;
  line-height: 0.83;
  letter-spacing: -0.03em;
  line-height: var(--ad-guide-wordmark-line-height);
  letter-spacing: var(--ad-guide-wordmark-letter-spacing);
  text-transform: uppercase;
  white-space: nowrap;
}

.guide-page__footer-date {
  flex: 0 0 auto;
  color: var(--guide-grey);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 42px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  /* The AD footer style, shared with Guide Studio (2 Oct 2026): Bold, normal width, 31px, the meta grey.
     Condensed SemiBold since 5 Oct 2026, at 36px, where space is at a premium. */
  font-family: "Barlow", Arial, sans-serif;
  font-size: var(--ad-footer-size);
  font-weight: 700;
  letter-spacing: 0;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
}

/* These native GX weights can be tuned one unit at a time in preview and export. */
@supports (font-variation-settings: normal) {
  .guide-event__time-text {
    font-family: "Barlow GX Normal", "Barlow", Arial, sans-serif;
    font-weight: var(--ad-guide-time-weight);
    font-family: "Barlow GX Condensed", "Barlow Condensed", sans-serif;
  }

  .guide-event__title {
    font-family: "Barlow GX Normal", "Barlow", Arial, sans-serif;
    font-weight: 154;
    font-weight: 168;
    font-weight: var(--ad-guide-title-weight);
  }

  .guide-event__meta,
  .guide-event__instagram {
    font-family: "Barlow GX Condensed", "Barlow Condensed", sans-serif;
    font-weight: 84;
    font-weight: 100;
    font-weight: var(--ad-guide-meta-weight);
  }

  .guide-page__footer-title {
    font-family: "Barlow GX Normal", "Barlow", Arial, sans-serif;
    font-weight: 188;
    font-weight: 168;
    font-weight: var(--ad-guide-wordmark-weight);
  }

  .guide-page__footer-date {
    font-family: "Barlow GX Condensed", "Barlow Condensed", sans-serif;
    font-weight: 116;
    font-weight: 129;
    font-weight: 100;
    font-family: "Barlow GX Normal", "Barlow", sans-serif;
    font-weight: var(--ad-footer-weight);
    font-family: "Barlow GX Condensed", "Barlow Condensed", sans-serif;
  }
}

.measure-stage,
.export-stage {
  position: fixed;
  top: 0;
  left: -12000px;
  width: var(--guide-width);
  height: auto;
  pointer-events: none;
}

.measure-stage {
  visibility: hidden;
}

.measure-stage .guide-page,
.export-stage .guide-page {
  position: relative;
  transform: none !important;
}

body.is-exporting .page-card__toolbar button,
body.is-exporting #export-all {
  pointer-events: none;
}

@media (min-width: 1180px) {

  .controls {
    position: sticky;
    top: var(--ad-ui-masthead, 64px);
    max-height: calc(100vh - 78px);
    overflow-y: auto;
  }

  .preview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 860px) {

  .workspace {
    grid-template-columns: 1fr;
  }

  .controls {
    border-right: 0;
  }

  .source-panel,
  .panel {
    padding-inline: clamp(18px, 5vw, 34px);
  }

  .preview-area {
    border-top: 1px solid #c7c6be;
  }
}
@media (max-width: 480px) {

  .app-header {
    min-height: 68px;
  }

  .app-brand__mark {
    width: 42px;
    height: 42px;
  }

  .preview-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 13px;
  }

  .preview-area {
    padding-inline: 14px;
  }

  .preview-grid {
    gap: 24px;
  }
}
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Normal previews grow with the page, so the carousel has one natural scroll. */
.preview-heading { flex-wrap: wrap; align-items: center; }
.preview-heading #preview-scale { margin-left: auto; }
.preview-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%,var(--ad-preview-page-width,432px)),1fr)); }
.page-card__viewport.ad-preview-viewport { height: var(--ad-preview-page-height,540px); max-width: 100%; overflow: clip; }
.page-card__viewport[data-preview-mode="zoom"] { overflow: auto; }
.page-frame.ad-preview-surface { width: auto; }
@media(max-width:480px){.preview-heading #preview-scale{margin-left:0}.preview-heading{flex-direction:row}}