/* ================================================================
   PayStubCheck — preview-generator.css
   Styles for /paystub-generator-preview/ (internal beta, unlinked)
   Uses the same CSS variables as the rest of the site (main.css)
   so this page reads as a native part of PayStubCheck, not a
   separate tool bolted on.
   ================================================================ */

/* ── Beta banner ── */
.pgp-beta-banner {
  background: #fff7e6;
  border-bottom: 1px solid #f4d99a;
}
.pgp-beta-banner-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 10px 5%;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #7c5a00;
}
.pgp-beta-pill {
  background: #f4a300;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 100px;
  flex-shrink: 0;
}

/* ── Hero ── */
.pgp-hero {
  background: var(--dark-bg);
  padding: 56px 5% 40px;
  text-align: center;
}
.pgp-hero-inner { max-width: 680px; margin: 0 auto; }
.pgp-hero-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  color: var(--dark-text);
  letter-spacing: -1px;
  margin: 10px 0 14px;
}
.pgp-hero-title span { color: var(--dark-green); }
.pgp-hero-sub {
  font-size: 15px;
  color: var(--dark-text-2);
  line-height: 1.7;
  max-width: 560px;
  margin: 0 auto;
}
.pgp-hero .section-label { color: var(--dark-green); }

/* ── Layout: sections column + sticky calculation/preview column ── */
.pgp-layout {
  display: grid;
  grid-template-columns: 1.3fr 0.85fr;
  gap: 20px;
  max-width: 1320px;
  margin: 32px auto;
  padding: 0 5% 60px;
  align-items: start;
  overflow-x: hidden;
  box-sizing: border-box;
}
.pgp-sections {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pgp-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 2px 2px 4px;
}
.pgp-progress-track {
  flex: 1;
  height: 6px;
  background: var(--border);
  border-radius: 100px;
  overflow: hidden;
}
.pgp-progress-fill {
  height: 100%;
  background: var(--green);
  border-radius: 100px;
  width: 0%;
  transition: width 0.3s ease;
}
.pgp-progress-text {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-3);
  white-space: nowrap;
  flex-shrink: 0;
}
.pgp-panel {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 22px;
}
.pgp-panel-sticky { position: sticky; top: 90px; }

/* ── Collapsible sections with status pills ── */
.psec {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.psec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  cursor: pointer;
  user-select: none;
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
}
.psec-head-left { display: flex; align-items: center; gap: 13px; min-width: 0; }
.psec-icon { color: var(--text-3); flex-shrink: 0; width: 22px; height: 22px; }
.psec.open .psec-icon { color: var(--green-dark); }
.psec-title-wrap { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.psec-num {
  padding: 5px 13px;
  border-radius: 100px;
  background: var(--green-pale);
  color: var(--green-dark);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  white-space: nowrap;
}
.psec-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 16.5px;
  font-weight: 700;
  color: var(--text);
}
.psec-summary {
  font-size: 11.5px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.psec.open .psec-summary { display: none; }
.psec-head-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; min-width: 0; }
.psec-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 100px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.psec-pill.pending { background: #faeeda; color: #854f0b; }
.psec-pill.done { background: var(--green-pale); color: var(--green-dark); }
.psec-chevron { color: var(--text-3); transition: transform 0.2s; flex-shrink: 0; }
.psec.open .psec-chevron { transform: rotate(180deg); }
.psec-body { display: none; padding: 0 18px 20px; }
.psec.open .psec-body { display: block; }
.psec-subhead {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin: 18px 0 10px;
}
.psec-subhead span {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-3);
}

/* ── YTD confidence + parity notes ── */
.pgp-ytd-note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 11.5px;
  color: var(--text-2);
  background: var(--green-pale);
  border-radius: 8px;
  padding: 8px 10px;
  margin-top: 10px;
  line-height: 1.5;
}
.pgp-ytd-note svg { flex-shrink: 0; margin-top: 1px; color: var(--green-dark); }
.pgp-parity-note {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-3);
  margin: 8px 0 16px;
  line-height: 1.5;
}
.pgp-parity-note svg { flex-shrink: 0; color: var(--green-dark); }

/* ── Mobile sticky bottom bar ── */
.pgp-mobile-bar {
  display: none;
  position: sticky;
  bottom: 0;
  background: #fff;
  border-top: 1px solid var(--border);
  padding: 10px 16px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  z-index: 40;
}
.pgp-mobile-bar-net { font-size: 11px; color: var(--text-3); }
.pgp-mobile-bar-net strong {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 15px;
  color: var(--text);
}
.pgp-mobile-bar-actions { display: flex; gap: 8px; }
.pgp-mobile-btn {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  padding: 10px 14px;
  border-radius: 9px;
  border: 1.5px solid var(--border);
  background: #fff;
  color: var(--text);
}
.pgp-mobile-btn-dark { background: var(--dark-bg); color: #fff; border: none; }

/* ── Mobile hero collapse ── */
.pgp-hero.pgp-hero-collapsed { padding: 14px 5%; }
.pgp-hero.pgp-hero-collapsed .pgp-hero-sub,
.pgp-hero.pgp-hero-collapsed .section-label { display: none; }
.pgp-hero.pgp-hero-collapsed .pgp-hero-title { font-size: 18px; margin: 0; }

.pgp-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.pgp-panel-head h2 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  margin: 0;
}
.pgp-panel-head span {
  font-size: 11.5px;
  color: var(--text-3);
}

.pgp-note {
  background: var(--green-pale);
  border: 1px solid var(--border-2);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.6;
  margin-bottom: 18px;
}
.pgp-note strong { color: var(--green-dark); }

/* ── Template grid (radio cards with CSS-mockup thumbnails) ── */
.pgp-template-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}
.pgp-template-grid input[type="radio"] { display: none; }
.pgp-template-grid label {
  display: block;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 9px 9px 10px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.pgp-template-grid label:hover { transform: translateY(-1px); }
.pgp-template-grid label strong {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  margin-top: 8px;
}
.pgp-template-grid label em {
  display: block;
  font-style: normal;
  font-size: 10.5px;
  color: var(--text-3);
  margin-top: 1px;
}
.pgp-template-grid input:checked + label {
  border-color: var(--green);
  background: var(--green-light);
  box-shadow: 0 0 0 1px var(--green);
}
.pgp-template-grid input:checked + label strong { color: var(--green-dark); }

/* Real rendered thumbnail images — actual output from each template,
   cropped to a consistent window so all 10 display at identical size
   regardless of where each template's distinctive content sits on
   the page (some lead with a check section, some with KPI cards). */
.pgp-tpl-thumb-img {
  display: block;
  width: 100%;
  aspect-ratio: 520 / 302;
  object-fit: cover;
  object-position: top;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: #fff;
}
.pgp-template-grid input:checked + label .pgp-tpl-thumb-img {
  border-color: var(--green);
}


.pgp-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 14px;
}
.pgp-grid-2 .form-row.full,
.pgp-grid-2 .form-group.form-row.full { grid-column: 1 / -1; }

.pgp-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px 14px;
}

.pgp-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-2);
  cursor: pointer;
  line-height: 1.5;
}
.pgp-check input { margin-top: 2px; }

/* ── Deduction rows (generated by JS) ── */
.pgp-deduction-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.deduction-row {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 1.2fr auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
  background: var(--bg-2, #fafbf7);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.deduction-row label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.deduction-row input,
.deduction-row select {
  width: 100%;
  margin-top: 4px;
  padding: 8px 10px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  font-family: 'DM Sans', sans-serif;
  background: #fff;
  color: var(--text);
}
.deduction-row input:focus,
.deduction-row select:focus { outline: none; border-color: var(--green); }
.remove-ded {
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: #fff;
  color: var(--text-3);
  font-size: 16px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.remove-ded:hover { border-color: #e74c3c; color: #e74c3c; }

/* ── Buttons ── */
.pgp-btn-primary {
  background: var(--green);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 12px 18px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  flex: 1;
}
.pgp-btn-primary:hover { background: var(--green-dark); }
.pgp-btn-primary:active { transform: scale(0.98); }
.pgp-btn-primary.pgp-btn-dark { background: var(--dark-bg); }
.pgp-btn-primary.pgp-btn-dark:hover { background: #000; }
.pgp-btn-secondary {
  background: #fff;
  color: var(--text-2);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  flex: 1;
}
.pgp-btn-secondary:hover { border-color: var(--green); color: var(--green-dark); }
.pgp-action-row { display: flex; gap: 10px; margin-bottom: 10px; }

/* ── Summary cards ── */
.pgp-summary-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.pgp-summary-cards > div {
  background: var(--bg-2, #fafbf7);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
}
.pgp-summary-cards span {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 3px;
}
.pgp-summary-cards strong {
  font-family: 'JetBrains Mono', monospace;
  font-size: 17px;
  color: var(--text);
}
.pgp-summary-cards .pgp-net {
  background: var(--green-light);
  border-color: var(--green);
}
.pgp-summary-cards .pgp-net strong { color: var(--green-dark); }

/* ── Live preview + lightbox: see authoritative engine rules appended at
   the bottom of this file (preserved verbatim from the generator's own
   styles.css so the live preview keeps its tested visual fidelity). ── */
.pgp-preview-note {
  font-size: 11px;
  color: var(--text-3);
  line-height: 1.6;
  margin: 8px 0 16px;
}

/* ── Disclaimer ── */
.pgp-disclaimer-box {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--green-pale);
  border: 1px solid var(--border-2);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.6;
  cursor: pointer;
}
.pgp-disclaimer-box input { margin-top: 2px; flex-shrink: 0; }

/* ── Status + debug ── */
.pgp-status {
  font-size: 12px;
  color: var(--text-3);
  padding: 8px 0;
  text-align: center;
}
.pgp-debug { margin-top: 14px; }
.pgp-debug summary {
  font-size: 11.5px;
  color: var(--text-3);
  cursor: pointer;
}
.pgp-result-tabs { display: flex; gap: 6px; margin: 10px 0 8px; }
.pgp-result-tabs button {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 5px 10px;
  font-size: 11px;
  color: var(--text-3);
  cursor: pointer;
}
.pgp-result-tabs button.active { border-color: var(--green); color: var(--green-dark); font-weight: 600; }
#resultBox {
  background: var(--dark-bg);
  color: #c8e6a0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  line-height: 1.6;
  padding: 12px;
  border-radius: 8px;
  max-height: 260px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* (lightbox panel chrome — header/close button — kept here since this part
   is wrapper UI, not engine preview-rendering; the inner .preview-document
   visuals come from the authoritative block appended below) */
.preview-lightbox-panel {
  background: #fff;
  border-radius: 16px;
  max-width: 980px;
  width: 100%;
}
.preview-lightbox-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.preview-lightbox-header button {
  background: none; border: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--text-3);
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  .pgp-layout {
    grid-template-columns: 1fr;
    padding: 0 4% 40px;
    overflow-x: hidden;
    width: 100%;
    box-sizing: border-box;
  }
  .pgp-sections,
  .pgp-panel,
  .psec,
  .psec-head,
  .psec-body,
  .checkout-panel,
  .preview-wrapper,
  .preview-body,
  .pgp-action-row,
  .pgp-summary-cards,
  .pgp-template-grid,
  .pgp-grid-2,
  .pgp-grid-3,
  .email-input-section,
  .accuracy-disclaimer,
  .checkout-trust-strip {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
  }
  .pgp-panel { padding: 16px; }
  .pgp-panel-sticky { position: static; }
  .pgp-mobile-bar { display: flex; }
  .generator-page .pgp-mobile-bar { display: none; }
}
@media (max-width: 600px) {
  .pgp-grid-2, .pgp-grid-3 { grid-template-columns: 1fr; }
  .pgp-template-grid { grid-template-columns: 1fr 1fr; }
  .deduction-row { grid-template-columns: 1fr; }
  .pgp-summary-cards { grid-template-columns: 1fr 1fr; }
  .psec-title { font-size: 13.5px; }
}

/* ================================================================
   Authentic live-preview rendering CSS, preserved verbatim from the
   engine's own app/generator/styles.css. This governs the dynamically
   generated .preview-document markup produced by renderLivePreview()
   in preview-generator-app.js. Do not rename these classes — they are
   referenced directly by that script.
   ================================================================ */

.preview-document{width:360px;min-height:466px;background:#fff;border:1px solid var(--preview-border);box-shadow:0 18px 55px rgba(15,23,42,.14);margin:0 auto;padding:14px;font-size:7px;color:#111827;position:relative;transform-origin:top center}
.preview-doc-head{display:flex;justify-content:space-between;gap:10px;border:1px solid var(--preview-primary);background:var(--preview-soft);padding:10px;margin-bottom:10px;min-height:56px}
.preview-doc-head div{display:flex;flex-direction:column;gap:2px;min-width:140px}
.preview-doc-head strong{font-size:13px;color:var(--preview-dark)}
.preview-doc-head em{font-style:normal;color:#64748b;font-size:8px}
.preview-doc-head h3{margin:0;color:var(--preview-primary);text-align:right;font-size:10px;max-width:160px}
.preview-logo-slot{height:22px;display:block}
.preview-logo-slot img{max-width:80px;max-height:22px;object-fit:contain}
.preview-profile{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.preview-profile section{border:1px solid #dbe7e1;border-radius:8px;padding:8px;min-height:58px}
.preview-profile b,.preview-table>b{display:block;color:var(--preview-primary);font-size:7px;text-transform:uppercase;margin-bottom:5px}
.preview-profile strong{display:block;font-size:8px}
.preview-profile em,.preview-profile span{display:block;font-style:normal;color:#64748b;margin-top:3px}
.preview-table{margin:9px 0;border:1px solid #dbe7e1;border-radius:6px;overflow:hidden}
.preview-table>b{padding:7px 7px 0}
.preview-row{display:grid;border-top:1px solid #e5e7eb;min-height:16px}
.preview-row span{padding:4px 5px;border-left:1px solid #eef2f7;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.preview-row span:first-child{border-left:0}
.preview-row.cols-4{grid-template-columns:1.7fr .7fr .8fr .9fr}
.preview-row.cols-3{grid-template-columns:1.8fr .9fr .9fr}
.preview-head{background:var(--preview-soft);color:var(--preview-dark);font-weight:800;text-transform:uppercase;font-size:6px}
.preview-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:9px 0}
.preview-summary div{border:1px solid var(--preview-border);background:var(--preview-soft);border-radius:8px;padding:7px}
.preview-summary b{display:block;color:var(--preview-primary);font-size:6px;text-transform:uppercase}
.preview-summary strong{display:block;margin-top:4px;font-size:8px}
.preview-check{border:1px solid var(--preview-primary);border-radius:9px;min-height:86px;margin-top:10px;padding:14px;background:repeating-linear-gradient(120deg,#fff 0,#fff 14px,var(--preview-soft) 15px,#fff 16px)}
.preview-check span{display:block;color:var(--preview-primary);font-weight:900}
.preview-check strong{display:block;border-bottom:1px solid #334155;margin:10px 100px 0 0;padding-bottom:4px}
.preview-check b{float:right;border:1px solid var(--preview-primary);background:var(--preview-soft);padding:8px 14px;margin-top:-20px}
.preview-check small{display:block;text-align:right;margin-top:20px;color:#64748b;font-weight:800}
.contractor-band,.phone-net{border-radius:10px;background:var(--preview-primary);color:#fff;padding:14px;margin:10px 0;text-align:center}
.contractor-band span,.phone-net span{display:block;text-transform:uppercase;font-size:7px;font-weight:800}
.contractor-band strong,.phone-net strong{display:block;font-size:18px;margin-top:4px}
.template-mobile{background:#f8fafc}
.preview-phone{width:220px;margin:0 auto;border:1px solid var(--preview-border);border-radius:18px;padding:12px;min-height:420px;background:#fff}
.preview-phone .preview-doc-head{display:block;border:0;background:#fff;padding:0}
.preview-phone .preview-doc-head h3{text-align:left;margin-top:6px}
.grid-preview{display:grid;grid-template-columns:1.1fr .9fr;gap:8px}
.disclaimer-box{display:grid;grid-template-columns:22px 1fr;align-items:start;gap:10px;margin:14px 0;padding:12px;border-radius:14px;border:1px solid #FCD34D;background:#FFFBEB;color:#78350F;font-size:12px;line-height:1.4}
.disclaimer-box input{width:18px;height:18px;margin:0}
@media(max-width:1260px){.layout{grid-template-columns:1fr}.preview-document{width:min(100%,380px)}}

/* Phase 6E surgical preview mapping: preserve live dynamic values while giving every template a distinct renderer. */
.preview-document{overflow:hidden}
.preview-document::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:50;background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='130'%3E%3Ctext x='0' y='75' font-family='Helvetica,Arial,sans-serif' font-size='13' fill='rgba(20,40,10,0.10)' transform='rotate(-26 130 65)'%3EPREVIEW%20%C2%B7%20PAYSTUBCHECK.COM%3C/text%3E%3C/svg%3E");background-repeat:repeat}
.preview-document.template-classic_check_statement,.preview-document.template-secure_voucher_statement{padding:10px 10px 12px}
.preview-document.template-contractor_freelancer_income_statement{padding:18px 18px 20px}
.preview-header-logo-space{min-width:72px;min-height:28px;display:flex;align-items:flex-start;justify-content:flex-end}
.preview-header-logo-space img{max-width:86px;max-height:28px;object-fit:contain}
.preview-pay-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:8px 0 10px}
.preview-pay-cards section{border:1px solid var(--preview-border);border-radius:7px;padding:6px;background:#fff;min-height:34px}
.preview-pay-cards b,.preview-dashboard b,.preview-recipient-band b,.contractor-total span,.mobile-person span{display:block;color:var(--preview-primary);font-size:5.8px;text-transform:uppercase;font-weight:900;margin-bottom:4px}
.preview-pay-cards span{font-size:6.2px;color:#111827}
.preview-row.cols-5{grid-template-columns:1.5fr .55fr .65fr .8fr .8fr}
.preview-two-col{display:grid;grid-template-columns:1.05fr .95fr;gap:8px;align-items:start}
.premium-grid .preview-table{margin-top:5px}
.preview-bottom-with-side{display:grid;grid-template-columns:minmax(0,1fr) 118px;gap:8px;align-items:end;margin-top:8px}
.preview-bottom-with-side .preview-summary{margin:0;grid-template-columns:repeat(2,1fr);align-self:end}
.preview-summary.compact{grid-template-columns:repeat(2,1fr);gap:4px}
.preview-summary.compact div{padding:5px}
.preview-summary.compact b{font-size:5px}.preview-summary.compact strong{font-size:6.2px}
.preview-detach{border-top:1px solid #cbd5e1;border-bottom:1px solid #cbd5e1;text-align:center;color:#64748b;font-size:5.5px;font-weight:900;padding:6px 0;margin:9px -14px 8px}
.preview-check{position:relative;min-height:94px;padding:12px 12px 10px;border:1px solid var(--preview-primary);border-radius:8px;background:#fff;overflow:hidden}
.preview-check.secure{background:repeating-linear-gradient(110deg,#fff 0,#fff 15px,var(--preview-soft) 16px,#fff 17px)}
.preview-check .check-title{color:var(--preview-primary);font-weight:900;font-size:8px;text-transform:uppercase;margin-bottom:8px}
.preview-check span{font-size:5.5px}.preview-check strong{margin:4px 116px 12px 84px;padding-bottom:3px;min-height:11px}.preview-check b{position:absolute;right:18px;top:43px;float:none;margin:0;padding:6px 12px;min-width:58px;text-align:right}.preview-check em{display:block;border-top:1px solid #334155;padding-top:4px;color:#64748b;font-size:5.4px;font-style:normal}.preview-check small{margin-top:8px;padding-right:50px}
.preview-dashboard{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:10px 0}.preview-dashboard div{border:1px solid var(--preview-border);background:#fff;border-radius:8px;padding:8px}.preview-dashboard strong{font-size:8px;color:var(--preview-dark)}
.preview-recipient-band{display:grid;grid-template-columns:1.2fr 1fr;gap:14px;border:1px solid var(--preview-primary);border-radius:9px;background:var(--preview-soft);padding:13px;margin:14px 0 20px}.preview-recipient-band strong{font-size:10px}.preview-recipient-band span{font-size:7px;color:#111827}
.contractor-total{margin:18px 0 0 auto;width:150px;border:1px solid var(--preview-primary);border-radius:9px;background:var(--preview-soft);padding:12px;text-align:left}.contractor-total strong{display:block;color:var(--preview-primary);font-size:15px;margin:3px 0 8px}
.mobile-person{border:1px solid var(--preview-border);border-radius:8px;padding:8px;margin:8px 0}.mobile-person b{display:block;font-size:8px}.phone-net.wide{text-align:left}
.template-enterprise_grid_statement .preview-doc-head,.template-modern_no_check_payroll_summary .preview-doc-head,.template-premium_green_check .preview-doc-head{background:var(--preview-soft);border-color:var(--preview-primary)}
.template-secure_voucher_statement .preview-doc-head{border-color:var(--preview-primary);background:var(--preview-soft)}
.template-compact_mobile_pay_statement{background:#f8fafc;border-radius:20px}
.template-compact_mobile_pay_statement .preview-summary{grid-template-columns:repeat(2,1fr)}


/* Phase 6E logo parity + expanded preview lightbox. */
.live-preview-shell{cursor:zoom-in}
.preview-doc-head{justify-content:flex-start;align-items:center}
.preview-doc-head .preview-company-block{display:flex;flex-direction:row;align-items:center;gap:10px;min-width:0;width:100%}
.preview-doc-head .preview-company-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.preview-logo-slot{height:auto;min-width:0;display:flex;align-items:center;justify-content:flex-start;flex:0 0 auto}
.preview-logo-slot img{max-width:86px;max-height:30px;object-fit:contain;display:block}
.preview-header-logo-space{display:none!important}
.preview-phone .preview-doc-head{display:flex;border:0;background:#fff;padding:0}
.preview-phone .preview-doc-head .preview-company-block{align-items:center}
.preview-lightbox-open{overflow:hidden}
.preview-lightbox{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;background:rgba(6,21,15,.72);padding:24px}
.preview-lightbox.open{display:flex}
.preview-lightbox-panel{width:min(94vw,980px);height:min(92vh,920px);background:#f8fbf9;border:1px solid rgba(255,255,255,.28);border-radius:22px;box-shadow:0 28px 100px rgba(0,0,0,.35);display:flex;flex-direction:column;overflow:hidden}
.preview-lightbox-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px;background:#fff;border-bottom:1px solid var(--line)}
.preview-lightbox-header strong{font-size:15px;color:var(--ink)}
.preview-lightbox-header button{width:38px;height:38px;border-radius:12px;background:var(--green-soft);color:var(--green-dark);border:1px solid #BFE5D2;font-size:24px;line-height:1;padding:0;cursor:pointer}
.preview-lightbox-scroll{flex:1;overflow:auto;padding:24px 18px}
.preview-lightbox-content{display:flex;justify-content:center;align-items:flex-start;min-height:860px}
.preview-lightbox-content .preview-document{margin:0 auto;transform:scale(1.75);transform-origin:top center;box-shadow:0 22px 80px rgba(15,23,42,.2)}
@media(max-width:760px){.preview-lightbox{padding:10px}.preview-lightbox-panel{width:98vw;height:94vh}.preview-lightbox-content{min-height:720px}.preview-lightbox-content .preview-document{transform:scale(1.35)}}


/* Phase 6E preview text-fit + lightbox color parity patch.
   Front-end only: no PDF renderer, payroll, tax, or backend changes. */
.live-preview-shell .preview-document{
  width:420px;
  max-width:none;
}
@media (max-width: 1100px) {
  .live-preview-shell .preview-document {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}
.live-preview-shell .preview-table{
  overflow:hidden;
}
.live-preview-shell .preview-row span{
  font-size:5.75px;
  line-height:1.15;
  padding:3px 3px;
}
.live-preview-shell .preview-head span{
  font-size:4.75px;
  letter-spacing:-.01em;
}
.live-preview-shell .preview-row.cols-5{
  grid-template-columns:1.58fr .42fr .72fr .96fr .62fr;
}
.live-preview-shell .preview-row.cols-4{
  grid-template-columns:1.55fr .55fr .95fr .72fr;
}
.live-preview-shell .preview-row.cols-3{
  grid-template-columns:1.95fr .95fr .75fr;
}
.live-preview-shell .preview-summary strong,
.live-preview-shell .preview-dashboard strong{
  white-space:nowrap;
}

/* The expanded view uses real width rather than transform-scaling the narrow sidebar.
   This prevents Current/Rate/Amount values from being ellipsized in the lightbox. */
.preview-lightbox-content{
  min-height:auto;
  padding-bottom:32px;
}
.preview-lightbox-content .preview-document{
  width:760px;
  max-width:calc(100vw - 96px);
  transform:none;
  font-size:12px;
  padding:28px;
  cursor:default;
}
.preview-lightbox-content .preview-doc-head{
  min-height:88px;
  padding:18px;
}
.preview-lightbox-content .preview-logo-slot img{
  max-width:140px;
  max-height:48px;
}
.preview-lightbox-content .preview-table{
  overflow:visible;
}
.preview-lightbox-content .preview-row{
  min-height:28px;
}
.preview-lightbox-content .preview-row span{
  overflow:visible;
  text-overflow:clip;
  white-space:nowrap;
  font-size:11px;
  line-height:1.2;
  padding:7px 8px;
}
.preview-lightbox-content .preview-head span{
  font-size:10px;
  letter-spacing:0;
}
.preview-lightbox-content .preview-row.cols-5{
  grid-template-columns:1.8fr .55fr .8fr 1.05fr .75fr;
}
.preview-lightbox-content .preview-row.cols-4{
  grid-template-columns:1.8fr .7fr 1.05fr .8fr;
}
.preview-lightbox-content .preview-row.cols-3{
  grid-template-columns:2fr 1fr .9fr;
}
.preview-lightbox-content .preview-two-col{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:18px;
}
.preview-lightbox-content .preview-profile{
  gap:18px;
}
.preview-lightbox-content .preview-profile section{
  padding:16px;
  min-height:92px;
}
.preview-lightbox-content .preview-profile b,
.preview-lightbox-content .preview-table>b{
  font-size:12px;
  margin-bottom:8px;
}
.preview-lightbox-content .preview-profile strong{
  font-size:14px;
}
.preview-lightbox-content .preview-profile em,
.preview-lightbox-content .preview-profile span{
  font-size:12px;
}
.preview-lightbox-content .preview-summary{
  gap:12px;
}
.preview-lightbox-content .preview-summary div,
.preview-lightbox-content .preview-dashboard div,
.preview-lightbox-content .preview-pay-cards div{
  padding:12px;
}
.preview-lightbox-content .preview-summary b,
.preview-lightbox-content .preview-dashboard b,
.preview-lightbox-content .preview-pay-cards b{
  font-size:10px;
}
.preview-lightbox-content .preview-summary strong,
.preview-lightbox-content .preview-dashboard strong{
  font-size:14px;
  white-space:nowrap;
}
.preview-lightbox-content .preview-check{
  min-height:178px;
  padding:24px;
}
.preview-lightbox-content .preview-check .check-title{
  font-size:16px;
}
.preview-lightbox-content .preview-check span,
.preview-lightbox-content .preview-check em,
.preview-lightbox-content .preview-check small{
  font-size:10px;
}
.preview-lightbox-content .preview-check strong{
  font-size:13px;
}
.preview-lightbox-content .preview-check b{
  font-size:13px;
}
.preview-lightbox-content .preview-detach{
  font-size:10px;
  padding:10px 0;
  margin:16px -28px 14px;
}
@media(max-width:860px){
  .preview-lightbox-content .preview-document{
    width:680px;
    max-width:calc(100vw - 72px);
    padding:22px;
  }
  .preview-lightbox-content .preview-row span{font-size:10px;padding:6px}
  .preview-lightbox-content .preview-head span{font-size:9px}
}

/* Required field star */
.req-star {
  color: #e53e3e;
  margin-left: 2px;
  font-size: 13px;
  line-height: 1;
  vertical-align: middle;
}
.form-label {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* Hide mobile bar entirely on generator-page (has its own mobile layout) */
.generator-page .pgp-mobile-bar { display: none !important; }

@media (max-width: 480px) {
  .pgp-layout { padding: 0 4% 40px; gap: 12px; }
  .checkout-panel { padding: 16px; }
  .generator-header { padding: 20px 4%; }
  .generator-title { font-size: 20px; }
  .generator-price-badge { padding: 10px 14px; }
  .price-badge-amount { font-size: 22px; }
  .pgp-sections { gap: 8px; }
  .psec-head { padding: 12px 14px; }
}