/* ==========================================================================
   Print tab
   .pd-*  the printed document itself (Cantera brand system)
   .pe-*  the editor and library around it (GymFin UI tokens)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Document
   Every size is written at half-letter scale (the Cantera menu artboard is
   528 x 816 px) and multiplied by --k for bigger paper:
     --x  fixed geometry          (rules, QR, image heights)
     --t  type                    (shrinks a little when a page is tightened)
     --g  vertical rhythm         (shrinks more when a page is tightened)
   -------------------------------------------------------------------------- */

.pd-sheet {
  --k: 1;
  --td: 1;
  --gd: 1;
  --x: calc(var(--k) * 1px);
  --t: calc(var(--k) * var(--td) * 1px);
  --g: calc(var(--k) * var(--gd) * 1px);

  --paper: #1A1917;
  --ink: #EDE7DC;
  --accent: #D9C7A7;
  --mid: #A39C90;
  --ash: #7A756C;
  --rule: #3A3833;

  --display: 'Archivo Black', 'Arial Black', Impact, sans-serif;
  --body: 'Archivo', 'Helvetica Neue', Arial, sans-serif;

  position: relative;
  width: var(--pw);
  height: var(--ph);
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: calc(var(--t) * 13);
  line-height: 1.5;
  text-align: left;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  font-kerning: normal;
  text-rendering: geometricPrecision;
}

.pd-sheet.pd-light {
  --paper: #EDE7DC;
  --ink: #1A1917;
  --accent: #7A5A28;
  --mid: #565047;
  --ash: #77736A;
  --rule: #C1BEB8;
}

.pd-sheet *,
.pd-sheet *::before,
.pd-sheet *::after { box-sizing: border-box; }

.pd-sheet p { margin: 0; }

/* Paper is not printed: the print shop supplies it. */
.pd-sheet.pd-nobg { background: transparent; }

.pd-inner {
  position: absolute;
  top: calc(var(--x) * 40);
  right: calc(var(--x) * 44);
  bottom: calc(var(--x) * 34);
  left: calc(var(--x) * 44);
  display: flex;
  flex-direction: column;
}

.pd-landscape .pd-inner {
  top: calc(var(--x) * 34);
  bottom: calc(var(--x) * 30);
}

.pd-body { flex: 1 1 auto; min-height: 0; }
.pd-foot { margin-top: auto; }

/* A piece never carries outer margins; the paginator owns every gap. */
.pd-piece { display: flow-root; }
.pd-piece > :first-child { margin-top: 0; }
.pd-piece > :last-child { margin-bottom: 0; }

.pd-display {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
}

.pd-kicker {
  font-family: var(--body);
  font-size: calc(var(--t) * 10);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

.pd-align-center { text-align: center; }
.pd-align-center .pd-sub { margin-left: auto; margin-right: auto; }

/* Header ------------------------------------------------------------------ */

.pd-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--x) * 16);
  padding-bottom: calc(var(--g) * 16);
  border-bottom: 1px solid var(--rule);
}

.pd-header-brand {
  font-family: var(--display);
  font-size: calc(var(--t) * 15);
  letter-spacing: 0.02em;
  line-height: 1.1;
  white-space: nowrap;
}

.pd-header-right { text-align: right; }
.pd-header-date {
  font-size: calc(var(--t) * 9.5);
  color: var(--ash);
  margin-top: calc(var(--x) * 3);
  letter-spacing: 0.04em;
}

/* Title ------------------------------------------------------------------- */

.pd-title {
  font-family: var(--display);
  text-transform: uppercase;
  line-height: 0.94;
  letter-spacing: -0.025em;
  white-space: nowrap;
}

.pd-title.pd-wrap { white-space: normal; overflow-wrap: anywhere; }

.pd-sub {
  font-size: calc(var(--t) * 13);
  line-height: 1.6;
  color: var(--ash);
  margin-top: calc(var(--g) * 12);
  max-width: calc(var(--x) * 360);
}

/* Section heading --------------------------------------------------------- */

.pd-section {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--x) * 14);
}

/* No rule of its own: the list below it draws one. */
.pd-section-title {
  font-family: var(--display);
  font-size: calc(var(--t) * 18);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

/* Item list --------------------------------------------------------------- */

.pd-items { display: grid; grid-template-columns: 1fr; column-gap: calc(var(--x) * 26); }
.pd-items.pd-cols-2 { grid-template-columns: 1fr 1fr; }

.pd-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: calc(var(--x) * 18);
  align-items: baseline;
  padding: calc(var(--g) * 16) 0;
  border-top: 1px solid var(--rule);
}

/* Smaller type, tighter rows: long menus need the room. */
.pd-size-m .pd-item { padding: calc(var(--g) * 11) 0; }
.pd-size-s .pd-item { padding: calc(var(--g) * 7) 0; }
.pd-size-m .pd-item-desc { margin-top: calc(var(--g) * 4); }
.pd-size-s .pd-item-desc { margin-top: calc(var(--g) * 3); font-size: calc(var(--t) * 11); }

/* The description runs under the price too, instead of wrapping early. */
.pd-item-desc { grid-column: 1 / -1; }

.pd-items.pd-nolines .pd-item { border-top: none; padding: calc(var(--g) * 9) 0; }
.pd-items.pd-last .pd-item { border-bottom: 1px solid var(--rule); }
.pd-items.pd-nolines.pd-last .pd-item { border-bottom: none; }


.pd-item-name {
  font-family: var(--display);
  line-height: 1.05;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.pd-item-price {
  font-family: var(--display);
  color: var(--accent);
  white-space: nowrap;
  line-height: 1.05;
}

.pd-size-l .pd-item-name, .pd-size-l .pd-item-price { font-size: calc(var(--t) * 23); }
.pd-size-m .pd-item-name, .pd-size-m .pd-item-price { font-size: calc(var(--t) * 18); }
.pd-size-s .pd-item-name, .pd-size-s .pd-item-price { font-size: calc(var(--t) * 14); }

.pd-item-desc {
  font-size: calc(var(--t) * 12);
  line-height: 1.5;
  color: var(--ash);
  margin-top: calc(var(--g) * 6);
}

.pd-tag {
  display: inline-block;
  vertical-align: 0.28em;
  margin-left: calc(var(--x) * 8);
  padding: calc(var(--x) * 2) calc(var(--x) * 5);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: var(--body);
  font-size: calc(var(--t) * 7.5);
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1.2;
}

/* Several prices per item: fixed columns so every row lines up. */
.pd-prices { display: flex; gap: calc(var(--x) * 10); }

.pd-price {
  min-width: calc(var(--x) * 52);
  text-align: right;
  font-family: var(--display);
  color: var(--accent);
  white-space: nowrap;
  line-height: 1.05;
}

.pd-size-l .pd-price { font-size: calc(var(--t) * 21); min-width: calc(var(--x) * 60); }
.pd-size-m .pd-price { font-size: calc(var(--t) * 17); }
.pd-size-s .pd-price { font-size: calc(var(--t) * 13); min-width: calc(var(--x) * 44); }

.pd-items .pd-item.pd-item-head {
  border-top: none;
  border-bottom: none;
  padding: 0 0 calc(var(--g) * 6);
}

.pd-item-head .pd-price {
  font-family: var(--body);
  font-size: calc(var(--t) * 9);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ash);
}

.pd-item-info {
  grid-column: 1 / -1;
  margin-top: calc(var(--g) * 5);
  font-size: calc(var(--t) * 9);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mid);
}

/* Add-ons ----------------------------------------------------------------- */

.pd-addons-label { margin-bottom: calc(var(--g) * 8); }

.pd-addons-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: calc(var(--x) * 22);
}

.pd-addon {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: calc(var(--x) * 10);
  padding: calc(var(--g) * 6) 0;
  border-top: 1px solid var(--rule);
  font-size: calc(var(--t) * 12);
  line-height: 1.35;
}

.pd-addon-name { color: var(--mid); min-width: 0; overflow-wrap: anywhere; }
.pd-addon-price { color: var(--accent); font-weight: 600; white-space: nowrap; }

/* Price tiers ------------------------------------------------------------- */

.pd-tiers { display: grid; column-gap: calc(var(--x) * 22); }
.pd-tiers.pd-cols-1 { grid-template-columns: 1fr; }
.pd-tiers.pd-cols-2 { grid-template-columns: 1fr 1fr; }
.pd-tiers.pd-cols-3 { grid-template-columns: 1fr 1fr 1fr; }

.pd-tier {
  border-top: 1px solid var(--rule);
  padding: calc(var(--g) * 14) 0 calc(var(--g) * 18);
  min-width: 0;
}

.pd-tier.pd-highlight { border-top: calc(var(--x) * 3) solid var(--accent); padding-top: calc(var(--g) * 12); }

.pd-tier-price {
  font-family: var(--display);
  font-size: calc(var(--t) * 38);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-top: calc(var(--g) * 10);
  white-space: nowrap;
}

.pd-tier-period {
  font-family: var(--body);
  font-size: calc(var(--t) * 12);
  color: var(--ash);
  letter-spacing: 0;
  margin-left: calc(var(--x) * 4);
}

.pd-tier-note {
  font-size: calc(var(--t) * 11.5);
  color: var(--mid);
  margin-top: calc(var(--g) * 6);
}

.pd-tier-features {
  list-style: none;
  margin: calc(var(--g) * 12) 0 0;
  padding: 0;
  font-size: calc(var(--t) * 12);
  line-height: 1.45;
  color: var(--mid);
}

.pd-tier-features li {
  padding: calc(var(--g) * 5) 0;
  border-top: 1px solid var(--rule);
}

/* Note -------------------------------------------------------------------- */

.pd-note-label { margin-bottom: calc(var(--g) * 8); }
.pd-note-text { font-size: calc(var(--t) * 13); line-height: 1.6; color: var(--mid); }
.pd-note.pd-strong .pd-note-text { color: var(--ink); font-weight: 500; }

/* Numbered list ----------------------------------------------------------- */

.pd-numbered { display: grid; grid-template-columns: 1fr; column-gap: calc(var(--x) * 26); }
.pd-numbered.pd-cols-2 { grid-template-columns: 1fr 1fr; }

.pd-num {
  display: flex;
  gap: calc(var(--x) * 16);
  padding: calc(var(--g) * 14) 0;
  border-top: 1px solid var(--rule);
  min-width: 0;
}

.pd-numbered.pd-last .pd-num { border-bottom: 1px solid var(--rule); }

.pd-num-n {
  font-family: var(--display);
  font-size: calc(var(--t) * 32);
  line-height: 0.9;
  color: var(--accent);
  flex: 0 0 calc(var(--t) * 48);
  letter-spacing: -0.03em;
}

.pd-num-body { min-width: 0; }

.pd-num-title {
  font-family: var(--display);
  font-size: calc(var(--t) * 16);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.pd-num-text {
  font-size: calc(var(--t) * 12);
  line-height: 1.55;
  color: var(--ash);
  margin-top: calc(var(--g) * 5);
}

/* Notice ------------------------------------------------------------------ */

.pd-notice-statement {
  font-family: var(--display);
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: -0.025em;
  margin-top: calc(var(--g) * 14);
  overflow-wrap: anywhere;
}

.pd-notice-when {
  font-size: calc(var(--t) * 16);
  font-weight: 600;
  line-height: 1.35;
  margin-top: calc(var(--g) * 18);
  padding-top: calc(var(--g) * 14);
  border-top: 1px solid var(--rule);
}

.pd-notice-body {
  font-size: calc(var(--t) * 13);
  line-height: 1.6;
  color: var(--mid);
  margin-top: calc(var(--g) * 10);
}

/* Paragraph --------------------------------------------------------------- */

.pd-para { font-size: calc(var(--t) * 13); line-height: 1.65; color: var(--mid); }
.pd-para.pd-lead { font-size: calc(var(--t) * 17); line-height: 1.45; color: var(--ink); font-weight: 500; }

/* Info rows --------------------------------------------------------------- */

.pd-info {
  display: grid;
  grid-template-columns: calc(var(--x) * 118) 1fr;
  gap: calc(var(--x) * 16);
  padding: calc(var(--g) * 10) 0;
  border-top: 1px solid var(--rule);
  align-items: baseline;
}

.pd-info.pd-last { border-bottom: 1px solid var(--rule); }

.pd-info-label {
  font-size: calc(var(--t) * 9.5);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ash);
}

.pd-info-value { font-size: calc(var(--t) * 13); line-height: 1.5; overflow-wrap: anywhere; }

/* Weekly schedule --------------------------------------------------------- */

.pd-sched-row {
  display: grid;
  grid-template-columns: calc(var(--x) * 62) repeat(var(--days), minmax(0, 1fr));
  column-gap: calc(var(--x) * 8);
  border-top: 1px solid var(--rule);
  padding: calc(var(--g) * 9) 0;
  align-items: start;
}

.pd-sched-row.pd-last { border-bottom: 1px solid var(--rule); }

.pd-sched-head { border-top: none; padding-top: 0; padding-bottom: calc(var(--g) * 7); }
.pd-sched-head .pd-kicker { font-size: calc(var(--t) * 8.5); letter-spacing: 0.16em; }

.pd-sched-time {
  font-size: calc(var(--t) * 10.5);
  font-weight: 600;
  color: var(--mid);
  line-height: 1.25;
  white-space: nowrap;
}

.pd-sched-cell {
  font-family: var(--display);
  font-size: calc(var(--t) * 10.5);
  line-height: 1.12;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  overflow-wrap: anywhere;
  min-width: 0;
}

.pd-sched-cell.pd-empty { color: var(--rule); font-family: var(--body); }

/* Wall-poster sizes: the grid is read from across the room. */
.pd-sched-m { grid-template-columns: calc(var(--x) * 78) repeat(var(--days), minmax(0, 1fr)); padding: calc(var(--g) * 13) 0; }
.pd-sched-m .pd-sched-time { font-size: calc(var(--t) * 13); }
.pd-sched-m .pd-sched-cell { font-size: calc(var(--t) * 14); }
.pd-sched-m.pd-sched-head .pd-kicker { font-size: calc(var(--t) * 10); }

.pd-sched-l { grid-template-columns: calc(var(--x) * 92) repeat(var(--days), minmax(0, 1fr)); column-gap: calc(var(--x) * 12); padding: calc(var(--g) * 18) 0; }
.pd-sched-l .pd-sched-time { font-size: calc(var(--t) * 15); }
.pd-sched-l .pd-sched-cell { font-size: calc(var(--t) * 18); }
.pd-sched-l.pd-sched-head .pd-kicker { font-size: calc(var(--t) * 11); }

.pd-sched-head.pd-sched-m, .pd-sched-head.pd-sched-l { padding-top: 0; padding-bottom: calc(var(--g) * 9); }

/* Month calendar ---------------------------------------------------------- */

.pd-cal-title {
  font-family: var(--display);
  font-size: calc(var(--t) * 26);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  padding-bottom: calc(var(--g) * 12);
}

.pd-cal-row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  column-gap: calc(var(--x) * 6);
  border-top: 1px solid var(--rule);
}

.pd-cal-row.pd-last { border-bottom: 1px solid var(--rule); }
.pd-cal-head { border-top: none; padding-bottom: calc(var(--g) * 6); }
.pd-cal-head .pd-kicker { font-size: calc(var(--t) * 8); letter-spacing: 0.14em; }

.pd-cal-day {
  min-height: calc(var(--g) * 62);
  padding: calc(var(--g) * 5) 0 calc(var(--g) * 6);
  min-width: 0;
}

.pd-cal-num {
  font-size: calc(var(--t) * 10);
  font-weight: 600;
  color: var(--ash);
  line-height: 1.2;
}

.pd-cal-day.pd-out .pd-cal-num { opacity: 0.35; }
.pd-cal-day.pd-has .pd-cal-num { color: var(--accent); }

.pd-cal-event {
  font-family: var(--display);
  font-size: calc(var(--t) * 8.5);
  line-height: 1.12;
  text-transform: uppercase;
  margin-top: calc(var(--x) * 3);
  overflow-wrap: anywhere;
}

.pd-w { display: inline-block; white-space: nowrap; }
.pd-sched-cell, .pd-cal-event { overflow-wrap: normal; }

/* Callout ----------------------------------------------------------------- */

.pd-callout {
  border-left: calc(var(--x) * 3) solid var(--accent);
  padding-left: calc(var(--x) * 18);
}

.pd-callout-text {
  font-family: var(--display);
  font-size: calc(var(--t) * 22);
  line-height: 1.08;
  text-transform: uppercase;
  letter-spacing: -0.015em;
}

.pd-callout-by { margin-top: calc(var(--g) * 10); }

/* QR code ----------------------------------------------------------------- */

.pd-qr {
  display: flex;
  align-items: center;
  gap: calc(var(--x) * 18);
}

.pd-qr.pd-align-center { flex-direction: column; text-align: center; gap: calc(var(--g) * 10); }

.pd-qr svg { display: block; flex: 0 0 auto; }

.pd-qr-caption {
  font-family: var(--display);
  font-size: calc(var(--t) * 17);
  line-height: 1.05;
  text-transform: uppercase;
  margin-top: calc(var(--x) * 5);
}

.pd-qr-url {
  font-size: calc(var(--t) * 10.5);
  color: var(--ash);
  margin-top: calc(var(--x) * 5);
  overflow-wrap: anywhere;
}

/* Image ------------------------------------------------------------------- */

.pd-image-frame {
  width: 100%;
  overflow: hidden;
  background: var(--rule);
}

.pd-image-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The brand's photo grade: low saturation, warm, slightly held down. */
.pd-image-frame.pd-graded img { filter: grayscale(0.55) sepia(0.14) contrast(1.06) brightness(0.9); }
.pd-light .pd-image-frame.pd-graded img { filter: grayscale(0.55) sepia(0.12) contrast(1.02) brightness(1); }

.pd-image-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: calc(var(--t) * 10);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ash);
  border: 1px dashed var(--ash);
}

.pd-image-caption {
  font-size: calc(var(--t) * 11);
  color: var(--ash);
  margin-top: calc(var(--g) * 8);
}

/* Divider ----------------------------------------------------------------- */

.pd-divider { border-top: 1px solid var(--rule); }
.pd-divider.pd-accent { border-top: calc(var(--x) * 3) solid var(--accent); width: calc(var(--x) * 48); }

/* Footer ------------------------------------------------------------------ */

.pd-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(var(--x) * 16);
  padding-top: calc(var(--g) * 14);
  border-top: 1px solid var(--rule);
}

.pd-footer-text { font-size: calc(var(--t) * 10); line-height: 1.55; color: var(--ash); }
.pd-footer-contact { font-size: calc(var(--t) * 11.5); line-height: 1.55; color: var(--mid); }

.pd-footer-handle {
  font-size: calc(var(--t) * 10.5);
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--accent);
  white-space: nowrap;
}

.pd-footer-page {
  font-size: calc(var(--t) * 9);
  color: var(--ash);
  letter-spacing: 0.12em;
  white-space: nowrap;
}

/* Preview-only markers — never printed. */
.pd-preview .pd-missing {
  outline: 1px dashed #d9534f;
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Social media images: exact pixel sizes, exported as PNGs. On a story the
   top and bottom bands (--safe) sit under the app's own buttons, so the page
   keeps its content out of them. The preview shades those bands.
   -------------------------------------------------------------------------- */

.pd-screen .pd-inner {
  top: calc(var(--x) * 40 + var(--safe, 0px));
  bottom: calc(var(--x) * 34 + var(--safe, 0px));
}

.pd-safe-guide {
  position: absolute;
  left: 0;
  right: 0;
  height: var(--safe);
  pointer-events: none;
  background: repeating-linear-gradient(135deg, rgba(128, 128, 128, 0.18) 0 6px, transparent 6px 18px);
}
.pd-safe-top { top: 0; border-bottom: 2px dashed rgba(128, 128, 128, 0.55); }
.pd-safe-bottom { bottom: 0; border-top: 2px dashed rgba(128, 128, 128, 0.55); }

/* A post is seen at about a third of its size on a phone. Display type
   already reads at that size; the supporting text, set for paper held at
   arm's length, is raised so it stays legible. */
/* Grid day headers keep their own sizes: they must fit narrow columns. */
.pd-screen .pd-kicker:not(.pd-sched-head *):not(.pd-cal-head *) { font-size: calc(var(--t) * 13); }
.pd-screen .pd-header-date { font-size: calc(var(--t) * 12); }
.pd-screen .pd-sub,
.pd-screen .pd-para,
.pd-screen .pd-note-text,
.pd-screen .pd-notice-body { font-size: calc(var(--t) * 16); }
.pd-screen .pd-para.pd-lead { font-size: calc(var(--t) * 19); }
.pd-screen .pd-item-desc,
.pd-screen .pd-addon,
.pd-screen .pd-num-text { font-size: calc(var(--t) * 15); }
.pd-screen .pd-item-info { font-size: calc(var(--t) * 12); }
.pd-screen .pd-info-label { font-size: calc(var(--t) * 13); }
.pd-screen .pd-info-value { font-size: calc(var(--t) * 17); }
.pd-screen .pd-cols-1 .pd-tier-price { font-size: calc(var(--t) * 60); }
.pd-screen .pd-tier-period { font-size: calc(var(--t) * 15); }
.pd-screen .pd-tier-note { font-size: calc(var(--t) * 14); }
.pd-screen .pd-tier-features { font-size: calc(var(--t) * 16); }
.pd-screen .pd-qr-url { font-size: calc(var(--t) * 13); }
.pd-screen .pd-image-caption { font-size: calc(var(--t) * 14); }
.pd-screen .pd-footer-text,
.pd-screen .pd-footer-handle { font-size: calc(var(--t) * 13); }
.pd-screen .pd-footer-contact { font-size: calc(var(--t) * 14); }
.pd-screen .pd-footer-page { font-size: calc(var(--t) * 12); }

/* --------------------------------------------------------------------------
   Press sheet: bleed and crop marks, used only when the background prints.
   -------------------------------------------------------------------------- */

.pd-press {
  position: relative;
  width: calc(var(--pw) + 0.75in);
  height: calc(var(--ph) + 0.75in);
  background: #fff;
  overflow: hidden;
}

.pd-press-bleed {
  position: absolute;
  left: 0.25in;
  top: 0.25in;
  width: calc(var(--pw) + 0.25in);
  height: calc(var(--ph) + 0.25in);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.pd-press .pd-sheet {
  position: absolute;
  left: 0.375in;
  top: 0.375in;
}

.pd-crop { position: absolute; background: #000; }
.pd-crop-h { height: 0.5pt; width: 0.2in; }
.pd-crop-v { width: 0.5pt; height: 0.2in; }

/* --------------------------------------------------------------------------
   Print output
   -------------------------------------------------------------------------- */

#pd-print-root { display: none; }

@media print {
  html.pd-printing, html.pd-printing body {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }
  html.pd-printing body > *:not(#pd-print-root) { display: none !important; }
  html.pd-printing #pd-print-root { display: block; }
  #pd-print-root .pd-out {
    break-after: page;
    page-break-after: always;
  }
  #pd-print-root .pd-out:last-child {
    break-after: auto;
    page-break-after: auto;
  }
}

/* ==========================================================================
   Editor & library
   ========================================================================== */

.pe-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.pe-toolbar-spacer { flex: 1 1 auto; }

.pe-title {
  font: var(--text-h2);
  color: var(--text-1);
  margin: 0;
}

.pe-subtitle {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-3);
  margin: var(--space-2) 0 0;
}

.pe-status {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-3);
  white-space: nowrap;
}

.pe-status.pe-dirty { color: var(--color-accent-strong); }

.pe-name-input {
  font: var(--text-h3);
  color: var(--text-1);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 6px 10px;
  min-width: 220px;
  max-width: 420px;
  width: 100%;
}

.pe-name-input:hover { border-color: var(--border); }
.pe-name-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--focus-ring); }

.pe-seg {
  display: inline-flex;
  background: var(--surface-2);
  border-radius: var(--radius-pill);
  padding: 2px;
}

.pe-seg button {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border: none;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  white-space: nowrap;
}

.pe-seg button.active {
  background: var(--surface);
  color: var(--color-primary);
  box-shadow: var(--shadow-xs);
}

.pe-grid {
  display: grid;
  grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

@media (max-width: 1080px) {
  .pe-grid { grid-template-columns: minmax(0, 1fr); }
}

.pe-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: var(--space-5);
}

.pe-panel + .pe-panel { margin-top: var(--space-4); }

.pe-panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: var(--space-4);
}

.pe-settings {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3) var(--space-4);
}

.pe-settings .form-group { margin: 0; }
.pe-settings .form-input { max-width: none; }

.pe-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: 13px;
  color: var(--text-1);
  cursor: pointer;
  line-height: 1.35;
}

.pe-check input { margin-top: 2px; accent-color: var(--color-primary); }
.pe-check small { display: block; color: var(--text-3); font-size: 12px; }

.pe-span-2 { grid-column: 1 / -1; }

/* Block list */

.pe-blocks { display: flex; flex-direction: column; gap: var(--space-2); }

.pe-block {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
}

.pe-block.pe-open { border-color: var(--border-strong); box-shadow: var(--shadow-xs); }
.pe-block.pe-drag-over { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--focus-ring); }
.pe-block.pe-dragging { opacity: 0.45; }

.pe-block-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 8px 8px 6px;
  cursor: pointer;
  user-select: none;
}

.pe-handle {
  cursor: grab;
  color: var(--text-3);
  display: inline-flex;
  padding: 4px 2px;
}

.pe-handle.pe-locked { cursor: default; opacity: 0.35; }

.pe-block-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pe-block-label { min-width: 0; flex: 1 1 auto; }
.pe-block-type { font-size: 13px; font-weight: 600; color: var(--text-1); }

.pe-block-summary {
  font-size: 12px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pe-block-actions { display: flex; gap: 2px; }

.pe-mini {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.pe-mini:hover:not(:disabled) { background: var(--surface-hover); color: var(--text-1); }
.pe-mini:disabled { opacity: 0.3; cursor: default; }
.pe-mini.pe-danger:hover:not(:disabled) { color: var(--color-danger); background: var(--color-danger-soft); }
.pe-mini .i { width: 15px; height: 15px; }

.pe-block-body {
  border-top: 1px solid var(--border);
  padding: var(--space-4);
}

.pe-block-body .form-group { margin-bottom: var(--space-3); }
.pe-block-body .form-input { max-width: none; }

.pe-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.pe-row2 .form-group { margin-bottom: var(--space-3); }

.pe-list { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); }

.pe-list-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background: var(--surface-2);
}

.pe-list-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}

.pe-list-item .form-group:last-child { margin-bottom: 0; }

.pe-add-row { margin-top: var(--space-2); }

.pe-ref {
  font-size: 12px;
  color: var(--text-3);
  margin: 0 0 4px;
  line-height: 1.35;
  white-space: pre-wrap;
}

.pe-ref b { font-weight: 600; color: var(--text-2); }

.pe-es-status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: 4px;
  font-size: 11px;
  min-height: 16px;
}

.pe-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.pe-chip-auto { background: var(--color-info-soft); color: var(--color-info); }
.pe-chip-manual { background: var(--color-success-soft); color: var(--color-success-strong); }
.pe-chip-missing { background: var(--color-danger-soft); color: var(--color-danger-strong); }
.pe-chip-outdated { background: var(--color-accent-soft); color: var(--color-accent-strong); }
.pe-chip-check { background: var(--color-accent-soft); color: var(--color-accent-strong); }

.pe-linkbtn {
  border: none;
  background: none;
  padding: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-primary);
  cursor: pointer;
}

.pe-linkbtn:hover { text-decoration: underline; }

.pe-sched-wrap { overflow-x: auto; margin: 0 calc(-1 * var(--space-4)); padding: 0 var(--space-4); }

.pe-sched-table { border-collapse: collapse; font-size: 12px; }
.pe-sched-table th { font-size: 11px; color: var(--text-3); font-weight: 700; text-align: left; padding: 2px 4px; white-space: nowrap; }
.pe-sched-table td { padding: 2px; vertical-align: top; }
.pe-sched-table .form-input { height: 32px; font-size: 12px; padding: 0 6px; min-width: 92px; }
.pe-sched-table .pe-sched-time { min-width: 76px; }

.pe-days { display: flex; flex-wrap: wrap; gap: 4px; }

.pe-day {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
}

.pe-day.active { background: var(--color-primary-soft); border-color: var(--color-primary); color: var(--color-primary); }

.pe-image-pick {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.pe-image-thumb {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.pe-add-block {
  width: 100%;
  margin-top: var(--space-3);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-2);
  font: 600 13px/1 var(--font-sans);
  height: 44px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.pe-add-block:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-soft); }

/* Component picker */

.pe-picker-group { margin-bottom: var(--space-4); }

.pe-picker-group-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--space-2);
}

.pe-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-2);
}

.pe-pick {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  text-align: left;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  cursor: pointer;
  font-family: var(--font-sans);
  color: var(--text-1);
}

.pe-pick:hover:not(:disabled) { border-color: var(--color-primary); background: var(--color-primary-soft); }
.pe-pick:disabled { opacity: 0.45; cursor: not-allowed; }
.pe-pick-name { font-size: 13px; font-weight: 600; }
.pe-pick-desc { font-size: 12px; color: var(--text-3); line-height: 1.35; margin-top: 2px; }

/* Preview */

.pe-preview-col { position: sticky; top: var(--space-4); }

.pe-preview-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  font-size: 12px;
  color: var(--text-2);
}

.pe-preview {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  max-height: calc(100vh - 170px);
  overflow: auto;
}

.pe-pages { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); }

.pe-page-wrap { position: relative; flex: 0 0 auto; }

.pe-page-scale {
  transform-origin: top left;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
}

/* Paper that will not be printed still shows on screen, faintly textured so
   nobody mistakes it for ink. */
.pe-page-scale .pd-sheet.pd-nobg {
  background:
    repeating-linear-gradient(135deg, rgba(128, 128, 128, 0.06) 0 2px, transparent 2px 9px),
    var(--paper);
}

.pe-page-label {
  font-size: 11px;
  color: var(--text-3);
  text-align: center;
  margin-top: 6px;
}

.pe-measure {
  position: absolute;
  left: -100000px;
  top: 0;
  visibility: hidden;
  pointer-events: none;
}

.pe-warnings { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-3); }

.pe-warning {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  font-size: 12px;
  line-height: 1.4;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
}

.pe-warning.pe-warning-danger { background: var(--color-danger-soft); color: var(--color-danger-strong); }
.pe-warning.pe-warning-info { background: var(--color-info-soft); color: var(--color-info); }
.pe-warning .i { flex: 0 0 auto; width: 15px; height: 15px; margin-top: 1px; }

/* Library */

.pe-lib-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.pe-lib-bar .form-input { max-width: 260px; height: 36px; }

.pe-lib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-4);
}

.pe-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
}

.pe-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }

.pe-card-swatch {
  height: 92px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 12px 14px;
  background: #1A1917;
  color: #EDE7DC;
  font-family: 'Archivo Black', 'Arial Black', sans-serif;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1;
  font-size: 20px;
  overflow: hidden;
}

.pe-card-swatch.pe-light-swatch { background: #EDE7DC; color: #1A1917; }

.pe-card-swatch small {
  font-family: 'Archivo', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: #D9C7A7;
  margin-bottom: 6px;
}

.pe-card-swatch.pe-light-swatch small { color: #7A5A28; }

.pe-card-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pe-card-body { padding: 12px 14px; flex: 1 1 auto; }
.pe-card-title { font-size: 14px; font-weight: 600; color: var(--text-1); overflow-wrap: anywhere; }
.pe-card-meta { font-size: 12px; color: var(--text-3); margin-top: 4px; line-height: 1.45; }

.pe-card-foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-1);
  padding: 6px 8px;
  border-top: 1px solid var(--border);
}

.pe-templates {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.pe-template {
  text-align: left;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: var(--space-3);
  cursor: pointer;
  font-family: var(--font-sans);
  color: var(--text-1);
}

.pe-template.active { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--focus-ring); }
.pe-template-group {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: var(--space-2) 0 var(--space-2);
}

/* Download images dialog */
.pe-file-list {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  list-style: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  color: var(--text-2);
  max-height: 150px;
  overflow: auto;
}
.pe-file-list li { padding: 2px 0; overflow-wrap: anywhere; }

.pe-caption-copy { display: flex; gap: var(--space-3); align-items: flex-start; }
.pe-caption-text {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-wrap;
  color: var(--text-1);
}
.pe-template-name { font-size: 13px; font-weight: 600; }
.pe-template-desc { font-size: 12px; color: var(--text-3); margin-top: 2px; line-height: 1.35; }

.pe-new-preview-wrap {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.pe-new-preview { flex: 0 0 auto; width: 320px; min-height: 230px; display: flex; justify-content: center; }
.pe-new-preview .pe-pages { align-items: flex-start; }
.pe-new-preview .pe-page-scale { box-shadow: 0 1px 6px rgba(0, 0, 0, 0.22); }

.pe-new-preview-meta { font-size: 12px; color: var(--text-2); line-height: 1.5; min-width: 0; }
.pe-new-preview-meta strong { display: block; font-size: 14px; color: var(--text-1); margin-bottom: 2px; }
.pe-new-preview-meta span { display: block; color: var(--text-3); margin-top: var(--space-2); }

@media (max-width: 640px) {
  .pe-new-preview-wrap { flex-direction: column; }
  .pe-new-preview { width: 100%; }
}

.pe-gloss-table { width: 100%; border-collapse: collapse; }
.pe-gloss-table th { text-align: left; font-size: 11px; color: var(--text-3); padding: 4px; text-transform: uppercase; letter-spacing: 0.05em; }
.pe-gloss-table td { padding: 3px 4px; }
.pe-gloss-table .form-input { max-width: none; height: 34px; }

.pe-help { font-size: 13px; color: var(--text-2); line-height: 1.55; }
.pe-help p { margin: 0 0 var(--space-3); }
.pe-help strong { color: var(--text-1); }