.document-letterhead {
  --lh-ink: #172033;
  --lh-muted: #5e6879;
  --lh-accent: #315c55;
  box-sizing: border-box;
  color: var(--lh-ink);
  margin-bottom: 20px;
  width: 100%;
}
.document-letterhead *, .document-letterhead *::before, .document-letterhead *::after { box-sizing: border-box; }
.lh-logo { flex: 0 0 auto; }
.lh-logo img { display: block; max-height: 58px; max-width: 150px; object-fit: contain; }
.lh-name { font-size: 18px; font-weight: 700; line-height: 1.15; }
.lh-legal { color: var(--lh-muted); font-size: 10px; margin-top: 2px; }
.lh-contact { color: var(--lh-muted); display: flex; flex-direction: column; font-size: 10px; line-height: 1.35; margin-top: 5px; }
.lh-contact-inline { flex-direction: row; flex-wrap: wrap; gap: 2px 12px; }
.lh-document { text-align: right; }
.lh-document-title { font-size: 22px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.lh-document-meta { color: var(--lh-muted); display: flex; font-size: 10px; gap: 10px; justify-content: flex-end; margin-top: 4px; }
/* Legacy invoice header. These declarations MIRROR invoice-print.css and
   packing-slip.css exactly, and must stay that way. The print popup loads one
   of those stylesheets plus this one, and `.lh-legacy X` out-specifies the
   bare `X` there, so any divergence here silently restyles the printed
   invoice and packing slip for every tenant on the compatibility default.
   They are repeated at all because the Tenant Profile preview loads neither
   of those stylesheets; preview-only sizing lives under
   `.tnp-letterhead-preview` below, where it cannot reach the popup. */
.lh-legacy .invoice-header { display: flex; justify-content: space-between; margin-bottom: 20px; }
.lh-legacy .company-info h1 { margin: 0; font-size: 18px; }
.lh-legacy .company-info p { margin: 0; }
.lh-legacy .logo-container img { max-width: 250px; width: 100%; }
.lh-legacy .doc-title { font-size: 22px; margin: 10px 0; }
.lh-classic { align-items: flex-start; border-bottom: 2px solid var(--lh-accent); display: flex; justify-content: space-between; padding: 2px 0 14px; }
.lh-classic-brand { align-items: flex-start; display: flex; gap: 14px; }
.lh-band { border: 2px solid var(--lh-accent); padding: 16px 18px; }
.lh-band-main { align-items: center; display: grid; gap: 16px; grid-template-columns: auto 1fr auto; }
.lh-band .lh-contact, .lh-band .lh-legal, .lh-band .lh-document-meta { color: var(--lh-muted); }
.lh-compact { align-items: center; border-bottom: 1px solid #aeb7c2; display: grid; gap: 12px; grid-template-columns: auto 1fr auto; padding-bottom: 9px; }
.lh-compact .lh-logo img { max-height: 38px; max-width: 100px; }
.lh-compact .lh-name { font-size: 14px; }
.lh-compact .lh-contact { margin-top: 3px; }
.lh-compact .lh-document-title { font-size: 17px; }
.lh-centered { align-items: center; border-bottom: 1px solid #cbd1d8; display: flex; flex-direction: column; padding-bottom: 14px; text-align: center; }
.lh-centered .lh-logo img { margin-bottom: 7px; }
.lh-centered .lh-contact { align-items: center; }
.lh-centered .lh-document { border-top: 1px solid #cbd1d8; margin-top: 11px; padding-top: 9px; text-align: center; width: 100%; }
.lh-centered .lh-document-meta { justify-content: center; }
.lh-document-first { border-left: 7px solid var(--lh-accent); display: grid; gap: 24px; grid-template-columns: minmax(180px, .72fr) 1fr; padding: 10px 0 10px 16px; }
.lh-document-first > .lh-document { text-align: left; }
.lh-document-first > .lh-document .lh-document-meta { justify-content: flex-start; }
.lh-document-first-brand { align-items: center; display: flex; gap: 12px; justify-content: flex-end; text-align: right; }
.lh-document-first-brand .lh-contact-inline { justify-content: flex-end; }
.lh-document-first-brand .lh-logo img { max-height: 44px; max-width: 105px; }

.tnp-letterhead-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 14px 0; }
.tnp-letterhead-choice { background: var(--wa-color-neutral-fill-quiet, #fff); border: 2px solid var(--wa-color-neutral-border-normal, #d6dae1); border-radius: 10px; cursor: pointer; display: block; min-width: 0; padding: 12px; position: relative; }
.tnp-letterhead-choice:has(input:checked) { border-color: var(--wa-color-brand-border-normal, #315c55); box-shadow: 0 0 0 2px color-mix(in srgb, var(--wa-color-brand-border-normal, #315c55) 20%, transparent); }
.tnp-letterhead-choice:focus-within { outline: 2px solid var(--wa-color-focus, #2563eb); outline-offset: 2px; }
.tnp-letterhead-choice input { position: absolute; right: 12px; top: 12px; }
.tnp-letterhead-name { display: block; font-weight: 700; padding-right: 25px; }
.tnp-letterhead-description { color: var(--wa-color-text-quiet, #5e6879); display: block; font-size: 12px; margin: 3px 25px 10px 0; min-height: 32px; }
.tnp-letterhead-preview { background: white; border: 1px solid #e1e4e8; min-height: 132px; overflow: hidden; padding: 10px; }
.tnp-letterhead-preview .document-letterhead { font-family: Arial, sans-serif; margin: 0; transform-origin: top left; }
.tnp-letterhead-preview .lh-identity, .tnp-letterhead-preview .lh-document { min-width: 0; }
.tnp-letterhead-preview .lh-contact { font-size: 8px; }
.tnp-letterhead-preview .lh-name { font-size: 13px; }
.tnp-letterhead-preview .lh-document-title { font-size: 14px; }
.tnp-letterhead-preview .lh-logo img { max-height: 35px; max-width: 75px; }
.tnp-letterhead-preview .lh-legacy .invoice-header { margin-bottom: 8px; }
.tnp-letterhead-preview .company-info h1 { font-size: 13px; }
.tnp-letterhead-preview .company-info p { font-size: 8px; line-height: 1.25; }
.tnp-letterhead-preview .lh-legacy .company-info { min-width: 0; }
.tnp-letterhead-preview .lh-legacy .logo-container { flex: 0 0 auto; margin-left: 8px; }
.tnp-letterhead-preview .lh-legacy .logo-container img { max-height: 35px; max-width: 75px; object-fit: contain; width: auto; }
.tnp-letterhead-preview h1.doc-title { font-size: 14px; margin: 4px 0; }
@media print {
  .document-letterhead {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .lh-band {
    background: transparent !important;
    border-color: #1f2937 !important;
    color: #111827 !important;
  }
  .lh-band .lh-contact,
  .lh-band .lh-legal,
  .lh-band .lh-document-meta { color: #374151 !important; }
}
@media (max-width: 800px) {
  .tnp-letterhead-grid { grid-template-columns: 1fr; }
  .lh-band-main, .lh-compact { grid-template-columns: auto 1fr; }
  .lh-band .lh-document, .lh-compact .lh-document { grid-column: 1 / -1; text-align: left; }
  .lh-band .lh-document-meta, .lh-compact .lh-document-meta { justify-content: flex-start; }
}