/* ProResume AI — Page fidelity (preview + export must match) */

/* Portrait US Letter: 8.5" × 11" @ 96dpi */
.page-preview.orientation-portrait,
.resume-export-clone.orientation-portrait,
.resume-document.orientation-portrait {
  width: 816px !important;
  max-width: 816px !important;
  min-width: 816px !important;
  min-height: 1056px !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  transform: none !important;
  margin: 0 auto !important;
  overflow: visible !important;
}

/* Landscape US Letter: 11" × 8.5" @ 96dpi */
.page-preview.orientation-landscape,
.resume-export-clone.orientation-landscape,
.resume-document.orientation-landscape {
  width: 1056px !important;
  max-width: 1056px !important;
  min-width: 1056px !important;
  min-height: 816px !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  transform: none !important;
  margin: 0 auto !important;
  overflow: visible !important;
}

.page-preview > [class*="tm-"],
.resume-export-clone > [class*="tm-"],
.resume-document > [class*="tm-"] {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ─── Grid layouts (lock desktop structure for all 64 templates) ─── */
.page-preview .tm-modern,
.resume-export-clone .tm-modern,
.resume-document .tm-modern { display: grid !important; grid-template-columns: 220px 1fr !important; }

.page-preview .tm-slate,
.resume-export-clone .tm-slate,
.resume-document .tm-slate { display: grid !important; grid-template-columns: 1fr 200px !important; }

.page-preview .tm-verdant,
.resume-export-clone .tm-verdant,
.resume-document .tm-verdant { display: grid !important; grid-template-columns: 210px 1fr !important; }

.page-preview .tm-jade,
.resume-export-clone .tm-jade,
.resume-document .tm-jade { display: grid !important; grid-template-columns: 200px 1fr !important; }

.page-preview .tm-harbor,
.resume-export-clone .tm-harbor,
.resume-document .tm-harbor { display: grid !important; grid-template-columns: 1fr 190px !important; }

.page-preview .tm-executive .tm-exec-body,
.resume-export-clone .tm-executive .tm-exec-body,
.resume-document .tm-executive .tm-exec-body { display: grid !important; grid-template-columns: 1fr 200px !important; gap: 30px !important; }

.page-preview .tm-stanford .tm-body,
.resume-export-clone .tm-stanford .tm-body,
.resume-document .tm-stanford .tm-body { display: grid !important; grid-template-columns: 1fr 180px !important; gap: 24px !important; }

.page-preview .tm-metro .tm-metro-header,
.resume-export-clone .tm-metro .tm-metro-header,
.resume-document .tm-metro .tm-metro-header { display: grid !important; grid-template-columns: 1fr 8px auto !important; }

.page-preview .tm-metro .tm-metro-accent,
.resume-export-clone .tm-metro .tm-metro-accent,
.resume-document .tm-metro .tm-metro-accent { display: block !important; width: 8px !important; }

.page-preview .tm-metro .tm-metro-body,
.resume-export-clone .tm-metro .tm-metro-body,
.resume-document .tm-metro .tm-metro-body { display: grid !important; grid-template-columns: 1fr 160px !important; gap: 28px !important; }

.page-preview .tm-apex .tm-apex-body,
.resume-export-clone .tm-apex .tm-apex-body,
.resume-document .tm-apex .tm-apex-body { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 30px !important; }

.page-preview .tm-apex .tm-apex-full,
.resume-export-clone .tm-apex .tm-apex-full,
.resume-document .tm-apex .tm-apex-full,
.page-preview .tm-echo .tm-echo-full,
.resume-export-clone .tm-echo .tm-echo-full,
.resume-document .tm-echo .tm-echo-full { grid-column: 1 / -1 !important; }

.page-preview .tm-swiss .tm-swiss-grid,
.resume-export-clone .tm-swiss .tm-swiss-grid,
.resume-document .tm-swiss .tm-swiss-grid { display: grid !important; grid-template-columns: 1fr 200px !important; gap: 20px !important; }

.page-preview .tm-lattice .tm-lattice-grid,
.resume-export-clone .tm-lattice .tm-lattice-grid,
.resume-document .tm-lattice .tm-lattice-grid { display: grid !important; grid-template-columns: 1fr 190px !important; gap: 16px !important; }

.page-preview .tm-echo .tm-echo-cols,
.resume-export-clone .tm-echo .tm-echo-cols,
.resume-document .tm-echo .tm-echo-cols { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 28px !important; }

/* ─── Skill containers (flex wrap by default) ─── */
.page-preview .tm-skills:not(.tm-skills-inline-dots):not(.tm-skills-compact):not(.tm-skills-elegant):not(.tm-skills-academic):not([class*="tm-skills-nordic"]):not([class*="tm-skills-platinum"]):not([class*="tm-skills-mahogany"]),
.resume-export-clone .tm-skills:not(.tm-skills-inline-dots):not(.tm-skills-compact):not(.tm-skills-elegant):not(.tm-skills-academic):not([class*="tm-skills-nordic"]):not([class*="tm-skills-platinum"]):not([class*="tm-skills-mahogany"]),
.resume-document .tm-skills:not(.tm-skills-inline-dots):not(.tm-skills-compact):not(.tm-skills-elegant):not(.tm-skills-academic):not([class*="tm-skills-nordic"]):not([class*="tm-skills-platinum"]):not([class*="tm-skills-mahogany"]) {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  gap: 6px !important;
}

.page-preview .tm-skills-apex,
.resume-export-clone .tm-skills-apex,
.resume-document .tm-skills-apex {
  justify-content: center !important;
}

/* Default chip / pill skills */
.page-preview .tm-skills .tm-skill,
.resume-export-clone .tm-skills .tm-skill,
.resume-document .tm-skills .tm-skill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  line-height: 1.3 !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  text-align: center !important;
  overflow: visible !important;
  max-width: 100% !important;
  min-height: 1.35em !important;
}

/* Block / list / sidebar skills */
.page-preview .tm-skills-exec-side .tm-skill,
.page-preview .tm-skills-stanford-list .tm-skill,
.page-preview .tm-skills-metro-side .tm-skill,
.page-preview .tm-skills-slate-side .tm-skill,
.page-preview .tm-skills-verdant-side .tm-skill,
.page-preview .tm-skills-jade-side .tm-skill,
.page-preview .tm-skills-harbor-side .tm-skill,
.page-preview .tm-skills-forge-list .tm-skill,
.page-preview .tm-skills-streamline .tm-skill,
.page-preview .tm-skills-pioneer .tm-skill,
.page-preview .tm-skills-granite-list .tm-skill,
.page-preview .tm-skills-amber-list .tm-skill,
.page-preview .tm-skills-intl .tm-skill,
.page-preview [class*="tm-skills-"][class$="-list"] .tm-skill,
.page-preview [class*="tm-skills-"][class$="-side"] .tm-skill,
.resume-export-clone .tm-skills-exec-side .tm-skill,
.resume-export-clone .tm-skills-stanford-list .tm-skill,
.resume-export-clone .tm-skills-metro-side .tm-skill,
.resume-export-clone .tm-skills-slate-side .tm-skill,
.resume-export-clone .tm-skills-verdant-side .tm-skill,
.resume-export-clone .tm-skills-jade-side .tm-skill,
.resume-export-clone .tm-skills-harbor-side .tm-skill,
.resume-export-clone .tm-skills-forge-list .tm-skill,
.resume-export-clone .tm-skills-streamline .tm-skill,
.resume-export-clone .tm-skills-pioneer .tm-skill,
.resume-export-clone .tm-skills-granite-list .tm-skill,
.resume-export-clone .tm-skills-amber-list .tm-skill,
.resume-export-clone .tm-skills-intl .tm-skill,
.resume-export-clone [class*="tm-skills-"][class$="-list"] .tm-skill,
.resume-export-clone [class*="tm-skills-"][class$="-side"] .tm-skill,
.resume-document .tm-skills-exec-side .tm-skill,
.resume-document .tm-skills-stanford-list .tm-skill,
.resume-document .tm-skills-metro-side .tm-skill,
.resume-document .tm-skills-slate-side .tm-skill,
.resume-document .tm-skills-verdant-side .tm-skill,
.resume-document .tm-skills-jade-side .tm-skill,
.resume-document .tm-skills-harbor-side .tm-skill,
.resume-document .tm-skills-forge-list .tm-skill,
.resume-document .tm-skills-streamline .tm-skill,
.resume-document .tm-skills-pioneer .tm-skill,
.resume-document .tm-skills-granite-list .tm-skill,
.resume-document .tm-skills-amber-list .tm-skill,
.resume-document .tm-skills-intl .tm-skill,
.resume-document [class*="tm-skills-"][class$="-list"] .tm-skill,
.resume-document [class*="tm-skills-"][class$="-side"] .tm-skill {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  overflow: visible !important;
  text-align: left !important;
  max-width: 100% !important;
  justify-content: flex-start !important;
}

/* Inline text skills (dots, commas) */
.page-preview .tm-skills-inline-dots,
.page-preview .tm-skills-compact,
.page-preview .tm-skills-elegant,
.page-preview .tm-skills-academic,
.page-preview [class*="tm-skills-nordic"],
.page-preview [class*="tm-skills-platinum"],
.page-preview [class*="tm-skills-mahogany"],
.resume-export-clone .tm-skills-inline-dots,
.resume-export-clone .tm-skills-compact,
.resume-export-clone .tm-skills-elegant,
.resume-export-clone .tm-skills-academic,
.resume-export-clone [class*="tm-skills-nordic"],
.resume-export-clone [class*="tm-skills-platinum"],
.resume-export-clone [class*="tm-skills-mahogany"],
.resume-document .tm-skills-inline-dots,
.resume-document .tm-skills-compact,
.resume-document .tm-skills-elegant,
.resume-document .tm-skills-academic,
.resume-document [class*="tm-skills-nordic"],
.resume-document [class*="tm-skills-platinum"],
.resume-document [class*="tm-skills-mahogany"] {
  display: block !important;
  white-space: normal !important;
  word-break: break-word !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

/* Hide icons in export/preview fidelity */
.page-preview i,
.resume-export-clone i,
.resume-document i { display: none !important; }

/* Prevent layout collapse */
.page-preview .tm-section,
.resume-export-clone .tm-section,
.resume-document .tm-section { break-inside: avoid; page-break-inside: avoid; }

/* Sidebar / column min-widths */
.page-preview .tm-modern .tm-sidebar,
.resume-export-clone .tm-modern .tm-sidebar,
.resume-document .tm-modern .tm-sidebar { min-width: 220px !important; }

.page-preview .tm-slate .tm-slate-side,
.resume-export-clone .tm-slate .tm-slate-side,
.resume-document .tm-slate .tm-slate-side { min-width: 200px !important; }

.page-preview .tm-verdant .tm-verdant-side,
.resume-export-clone .tm-verdant .tm-verdant-side,
.resume-document .tm-verdant .tm-verdant-side { min-width: 210px !important; }

.page-preview .tm-jade .tm-jade-side,
.resume-export-clone .tm-jade .tm-jade-side,
.resume-document .tm-jade .tm-jade-side { min-width: 200px !important; }

.page-preview .tm-harbor .tm-harbor-side,
.resume-export-clone .tm-harbor .tm-harbor-side,
.resume-document .tm-harbor .tm-harbor-side { min-width: 190px !important; }

.page-preview .tm-metro .tm-metro-right,
.resume-export-clone .tm-metro .tm-metro-right,
.resume-document .tm-metro .tm-metro-right { min-width: 180px !important; }

/* Entry rows stay aligned */
.page-preview .tm-entry-top,
.resume-export-clone .tm-entry-top,
.resume-document .tm-entry-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.page-preview .tm-academic .tm-acad-header,
.resume-export-clone .tm-academic .tm-acad-header,
.resume-document .tm-academic .tm-acad-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

/* Prevent heading overflow */
.page-preview .tm-name,
.page-preview .tm-title,
.page-preview .tm-entry-role,
.page-preview .tm-entry-company,
.resume-export-clone .tm-name,
.resume-export-clone .tm-title,
.resume-export-clone .tm-entry-role,
.resume-export-clone .tm-entry-company,
.resume-document .tm-name,
.resume-document .tm-title,
.resume-document .tm-entry-role,
.resume-document .tm-entry-company {
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  hyphens: auto !important;
}

/* ─── Text arrangement (all 64 templates) ─── */
:is(.page-preview, .resume-export-clone, .resume-document) [class*="tm-"] > *,
:is(.page-preview, .resume-export-clone, .resume-document) .tm-body > *,
:is(.page-preview, .resume-export-clone, .resume-document) .tm-exec-body > *,
:is(.page-preview, .resume-export-clone, .resume-document) .tm-metro-body > *,
:is(.page-preview, .resume-export-clone, .resume-document) .tm-apex-body > *,
:is(.page-preview, .resume-export-clone, .resume-document) .tm-echo-cols > *,
:is(.page-preview, .resume-export-clone, .resume-document) .tm-swiss-grid > *,
:is(.page-preview, .resume-export-clone, .resume-document) .tm-lattice-grid > * {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

:is(.page-preview, .resume-export-clone, .resume-document) .tm-sidebar,
:is(.page-preview, .resume-export-clone, .resume-document) .tm-main,
:is(.page-preview, .resume-export-clone, .resume-document) [class*="-side"],
:is(.page-preview, .resume-export-clone, .resume-document) [class*="-main"],
:is(.page-preview, .resume-export-clone, .resume-document) .tm-swiss-meta,
:is(.page-preview, .resume-export-clone, .resume-document) .tm-lattice-meta,
:is(.page-preview, .resume-export-clone, .resume-document) .tm-metro-right,
:is(.page-preview, .resume-export-clone, .resume-document) .tm-metro-left {
  min-width: 0 !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}

:is(.page-preview, .resume-export-clone, .resume-document) .tm-contact,
:is(.page-preview, .resume-export-clone, .resume-document) .tm-themed-contact {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px 12px !important;
  max-width: 100% !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}

:is(.page-preview, .resume-export-clone, .resume-document) .tm-contact-item,
:is(.page-preview, .resume-export-clone, .resume-document) .tm-contact span,
:is(.page-preview, .resume-export-clone, .resume-document) .tm-contact div,
:is(.page-preview, .resume-export-clone, .resume-document) .tm-themed-contact span {
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  max-width: 100% !important;
}

:is(.page-preview, .resume-export-clone, .resume-document) .tm-summary,
:is(.page-preview, .resume-export-clone, .resume-document) .tm-bullets,
:is(.page-preview, .resume-export-clone, .resume-document) .tm-bullets li,
:is(.page-preview, .resume-export-clone, .resume-document) .tm-entry-meta,
:is(.page-preview, .resume-export-clone, .resume-document) .tm-side-label,
:is(.page-preview, .resume-export-clone, .resume-document) .tm-side-title {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  max-width: 100% !important;
}

:is(.page-preview, .resume-export-clone, .resume-document) .tm-entry-top > div:first-child {
  flex: 1 1 180px !important;
  min-width: 0 !important;
}

:is(.page-preview, .resume-export-clone, .resume-document) .tm-entry-dates {
  white-space: normal !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  text-align: right !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}

:is(.page-preview, .resume-export-clone, .resume-document) .tm-stanford .tm-header,
:is(.page-preview, .resume-export-clone, .resume-document) .tm-executive .tm-exec-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

:is(.page-preview, .resume-export-clone, .resume-document) .tm-section-title {
  flex-wrap: wrap !important;
  min-width: 0 !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}

:is(.page-preview, .resume-export-clone, .resume-document) .tm-creative .tm-section-title,
:is(.page-preview, .resume-export-clone, .resume-document) .tm-nova .tm-section-title,
:is(.page-preview, .resume-export-clone, .resume-document) .tm-streamline .tm-section-title,
:is(.page-preview, .resume-export-clone, .resume-document) .tm-azure .tm-section-title,
:is(.page-preview, .resume-export-clone, .resume-document) .tm-stellar .tm-section-title {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Preview scaler — dimensions set in JS */
#preview-frame {
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

#preview-scale-outer {
  margin: 0 auto;
  overflow: hidden;
  max-width: 100%;
}

#preview-scale-wrap {
  transform-origin: top left;
  will-change: transform;
}

@media (min-width: 768px) {
  #preview-frame {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    display: block;
  }
}