/**
 * Paged.js Polisher output only exists in the export iframe. Cloned .pagedjs_page
 * nodes in the main app need the same CSS variables and grid shell or layout
 * collapses (letter salad, empty-looking cells).
 * Scoped to .imposition-root so the rest of the app is unaffected.
 */
/* A6 tile in shell; print grid rows 148.4mm×2 = 296.8mm sheet (Safari) */
.imposition-root {
  --pagedjs-width: 105mm;
  --pagedjs-height: 148.4mm;
  --pagedjs-width-right: 105mm;
  --pagedjs-height-right: 148.4mm;
  --pagedjs-width-left: 105mm;
  --pagedjs-height-left: 148.4mm;
  --pagedjs-pagebox-width: 105mm;
  --pagedjs-pagebox-height: 148.4mm;
  --pagedjs-footnotes-height: 0mm;
  /* Inner page margins inside each A6 tile (sheet still fills A4 grid). */
  --pagedjs-margin-top: 18mm;
  --pagedjs-margin-right: 12mm;
  --pagedjs-margin-bottom: 12mm;
  --pagedjs-margin-left: 22mm;
  /* Duplex gutter (mm): wider on spine side; same totals as simplex L+R */
  --pagedjs-duplex-outer: 14mm;
  --pagedjs-duplex-inner: 22mm;
  --pagedjs-padding-top: 0mm;
  --pagedjs-padding-right: 0mm;
  --pagedjs-padding-bottom: 0mm;
  --pagedjs-padding-left: 0mm;
  --pagedjs-border-top: 0mm;
  --pagedjs-border-right: 0mm;
  --pagedjs-border-bottom: 0mm;
  --pagedjs-border-left: 0mm;
  --pagedjs-bleed-top: 0mm;
  --pagedjs-bleed-right: 0mm;
  --pagedjs-bleed-bottom: 0mm;
  --pagedjs-bleed-left: 0mm;
  --pagedjs-bleed-right-top: 0mm;
  --pagedjs-bleed-right-right: 0mm;
  --pagedjs-bleed-right-bottom: 0mm;
  --pagedjs-bleed-right-left: 0mm;
  --pagedjs-bleed-left-top: 0mm;
  --pagedjs-bleed-left-right: 0mm;
  --pagedjs-bleed-left-bottom: 0mm;
  --pagedjs-bleed-left-left: 0mm;
  --pagedjs-column-gap-offset: 1000px;
}

.imposition-root .pagedjs_sheet {
  box-sizing: border-box;
  width: var(--pagedjs-width);
  height: var(--pagedjs-height);
  overflow: hidden;
  position: relative;
  display: grid;
  grid-template-columns: [bleed-left] var(--pagedjs-bleed-left) [sheet-center] calc(var(--pagedjs-width) - var(--pagedjs-bleed-left) - var(--pagedjs-bleed-right)) [bleed-right] var(--pagedjs-bleed-right);
  grid-template-rows: [bleed-top] var(--pagedjs-bleed-top) [sheet-middle] calc(var(--pagedjs-height) - var(--pagedjs-bleed-top) - var(--pagedjs-bleed-bottom)) [bleed-bottom] var(--pagedjs-bleed-bottom);
}

.imposition-root .pagedjs_right_page .pagedjs_sheet {
  width: var(--pagedjs-width-right);
  height: var(--pagedjs-height-right);
}

.imposition-root .pagedjs_left_page .pagedjs_sheet {
  width: var(--pagedjs-width-left);
  height: var(--pagedjs-height-left);
}

.imposition-root .pagedjs_bleed {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  overflow: hidden;
}

.imposition-root .pagedjs_bleed-top {
  grid-column: bleed-left / -1;
  grid-row: bleed-top;
  flex-direction: row;
}

.imposition-root .pagedjs_bleed-bottom {
  grid-column: bleed-left / -1;
  grid-row: bleed-bottom;
  flex-direction: row;
}

.imposition-root .pagedjs_bleed-left {
  grid-column: bleed-left;
  grid-row: bleed-top / -1;
  flex-direction: column;
}

.imposition-root .pagedjs_bleed-right {
  grid-column: bleed-right;
  grid-row: bleed-top / -1;
  flex-direction: column;
}

.imposition-root .pagedjs_page {
  box-sizing: border-box;
  width: var(--pagedjs-width);
  height: var(--pagedjs-height);
  overflow: hidden;
  position: relative;
}

.imposition-root .pagedjs_pagebox {
  box-sizing: border-box;
  width: var(--pagedjs-pagebox-width);
  height: var(--pagedjs-pagebox-height);
  position: relative;
  display: grid;
  grid-template-columns: [left] var(--pagedjs-margin-left) [center] calc(var(--pagedjs-pagebox-width) - var(--pagedjs-margin-left) - var(--pagedjs-margin-right)) [right] var(--pagedjs-margin-right);
  grid-template-rows: [header] var(--pagedjs-margin-top) [page] calc(var(--pagedjs-pagebox-height) - var(--pagedjs-margin-top) - var(--pagedjs-margin-bottom)) [footer] var(--pagedjs-margin-bottom);
  grid-column: sheet-center;
  grid-row: sheet-middle;
}

.imposition-root .pagedjs_pagebox * {
  box-sizing: border-box;
}

/*
 * Duplex: recto (pagedjs_right_page) = gutter on the left; verso = gutter on the right.
 * Matches print-duplex.css @page :right / :left. Only when .imposition-root--duplex.
 */
.imposition-root.imposition-root--duplex .pagedjs_right_page .pagedjs_pagebox {
  --pagedjs-margin-left: var(--pagedjs-duplex-inner);
  --pagedjs-margin-right: var(--pagedjs-duplex-outer);
}

.imposition-root.imposition-root--duplex .pagedjs_left_page .pagedjs_pagebox {
  --pagedjs-margin-left: var(--pagedjs-duplex-outer);
  --pagedjs-margin-right: var(--pagedjs-duplex-inner);
}

.imposition-root .pagedjs_margin-top {
  width: calc(var(--pagedjs-pagebox-width) - var(--pagedjs-margin-left) - var(--pagedjs-margin-right));
  height: var(--pagedjs-margin-top);
  grid-column: center;
  grid-row: header;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100%;
}

.imposition-root .pagedjs_margin-top-left-corner-holder,
.imposition-root .pagedjs_margin-top-right-corner-holder {
  display: flex;
  grid-row: header;
}

.imposition-root .pagedjs_margin-top-left-corner-holder {
  width: var(--pagedjs-margin-left);
  height: var(--pagedjs-margin-top);
  grid-column: left;
}

.imposition-root .pagedjs_margin-top-right-corner-holder {
  width: var(--pagedjs-margin-right);
  height: var(--pagedjs-margin-top);
  grid-column: right;
}

.imposition-root .pagedjs_margin-right {
  height: calc(var(--pagedjs-pagebox-height) - var(--pagedjs-margin-top) - var(--pagedjs-margin-bottom));
  width: var(--pagedjs-margin-right);
  grid-column: right;
  grid-row: page;
  display: grid;
  grid-template-rows: repeat(3, 33.3333%);
  grid-template-columns: 100%;
}

.imposition-root .pagedjs_margin-bottom {
  width: calc(var(--pagedjs-pagebox-width) - var(--pagedjs-margin-left) - var(--pagedjs-margin-right));
  height: var(--pagedjs-margin-bottom);
  grid-column: center;
  grid-row: footer;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100%;
}

.imposition-root .pagedjs_margin-bottom-left-corner-holder,
.imposition-root .pagedjs_margin-bottom-right-corner-holder {
  display: flex;
  grid-row: footer;
}

.imposition-root .pagedjs_margin-bottom-left-corner-holder {
  width: var(--pagedjs-margin-left);
  height: var(--pagedjs-margin-bottom);
  grid-column: left;
}

.imposition-root .pagedjs_margin-bottom-right-corner-holder {
  width: var(--pagedjs-margin-right);
  height: var(--pagedjs-margin-bottom);
  grid-column: right;
}

.imposition-root .pagedjs_margin-left {
  height: calc(var(--pagedjs-pagebox-height) - var(--pagedjs-margin-top) - var(--pagedjs-margin-bottom));
  width: var(--pagedjs-margin-left);
  grid-column: left;
  grid-row: page;
  display: grid;
  grid-template-rows: repeat(3, 33.33333%);
  grid-template-columns: 100%;
}

.imposition-root .pagedjs_pagebox .pagedjs_margin:not(.hasContent) {
  visibility: hidden;
}

.imposition-root .pagedjs_pagebox > .pagedjs_area {
  grid-column: center;
  grid-row: page;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.imposition-root .pagedjs_pagebox > .pagedjs_area > .pagedjs_page_content {
  width: 100%;
  height: calc(100% - var(--pagedjs-footnotes-height));
  position: relative;
  column-fill: auto;
  overflow: hidden;
}

.imposition-root .pagedjs_pagebox > .pagedjs_area > .pagedjs_page_content > div {
  height: inherit;
}

.imposition-root .pagedjs_footnote_area {
  display: none;
}