/* letterhead.css — letterhead pages (letterhead.js): 12 designs. PDF-safe: solid colours, shapes as inline SVG */
@font-face{font-family:'BDSerif';src:url(../vendor/liberation/LiberationSerif-Regular.ttf) format('truetype');font-weight:400}
@font-face{font-family:'BDSerif';src:url(../vendor/liberation/LiberationSerif-Bold.ttf) format('truetype');font-weight:700}
.lh-p{position:relative;width:210mm;height:297mm;box-sizing:border-box;padding:16mm 20mm 12mm;background:#fff;color:#1f2937;font:10pt/1.55 'BDSans','Noto Sans',Arial,sans-serif;display:flex;flex-direction:column;overflow:hidden;text-align:left}
.lh-p.p-letter{width:215.9mm;height:279.4mm}
.lh-p.f-serif,.lh-p .f-serif{font-family:'BDSerif',Georgia,serif}
.lh-p *{box-sizing:border-box}
.lh-p p{margin:0 0 3mm}
.lh-p i{font-style:normal}
.lh-p>i{position:absolute;display:block}
.lh-p>header,.lh-p>footer,.lh-p>.lh-letter{position:relative;z-index:1}
.lh-shape{position:absolute;display:block;z-index:0}
.lh-wm{position:absolute;left:50%;top:50%;width:110mm;max-height:110mm;object-fit:contain;transform:translate(-50%,-50%)}
/* shared pieces */
.lh-head{display:flex;justify-content:space-between;align-items:center;gap:8mm;margin-bottom:12mm}
.lh-hl{display:flex;align-items:center;gap:4mm;min-width:0}
.lh-logo{max-height:16mm;max-width:46mm;object-fit:contain;display:block}
.lh-mono{width:14mm;height:14mm;border-radius:2.5mm;background:var(--c1);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20pt;font-weight:700;flex:none}
.lh-logo.lt{background:#fff;border-radius:1.6mm;padding:1.5mm 2mm}.lh-mono.lt{background:#fff;color:var(--c1)}
.lh-name b{display:block;font-size:18pt;line-height:1.12;color:var(--c1);letter-spacing:-.01em}
.lh-name span{display:block;font-size:8.3pt;color:#64748b;margin-top:.8mm;letter-spacing:.02em}
.lh-ic{width:3.2mm;height:3.2mm;flex:none}
.lh-info{display:grid;gap:1mm;font-size:8.2pt;color:#475569;text-align:right;max-width:78mm}
.lh-info span{display:flex;align-items:center;justify-content:flex-end;gap:2mm}
.lh-rows{display:flex;flex-wrap:wrap;justify-content:center;gap:1.5mm 7mm;font-size:8pt;color:#475569}
.lh-rows span{display:flex;align-items:center;gap:1.6mm}
.lh-line{text-align:center;font-size:8pt;color:#475569}.lh-line b{margin:0 2.2mm;color:var(--c1)}
.lh-cols{display:flex;justify-content:space-between;gap:6mm;font-size:7.8pt;color:#475569}
.lh-cols div{display:flex;flex-direction:column;min-width:0}.lh-cols em{font-style:normal;font-size:6.6pt;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--c1);margin-bottom:.6mm}
.lh-legal{display:grid;gap:.4mm;text-align:center;font-size:7.2pt;color:#94a3b8;margin-top:2mm}
.lh-foot{display:flex;flex-direction:column;gap:1mm}
/* letter */
.lh-letter{flex:1}
.lh-meta{display:flex;justify-content:space-between;margin-bottom:6mm;color:#475569}
.lh-to{margin-bottom:5mm!important}.lh-subj{margin-bottom:5mm!important}
.lh-text ul{margin:0 0 3mm;padding-left:5mm}
.lh-close{margin-top:6mm!important;margin-bottom:1mm!important}
.lh-sig{max-height:18mm;max-width:60mm;display:block}.lh-sn{font-weight:700}

/* 1 Executive — double rule under the header, details right */
.t-classic .cl-rule{left:20mm;right:20mm;top:42mm;height:1.6mm;border-top:.7mm solid var(--c1);border-bottom:.25mm solid var(--c2)}
.t-classic .lh-head{min-height:22mm;margin-bottom:14mm}
.t-classic .lh-foot{border-top:.25mm solid #cbd5e1;padding-top:2mm}
/* 2 Elegant centred */
.t-center .lh-head{flex-direction:column;gap:1.8mm;text-align:center}
.t-center .lh-name b{font-family:'BDSerif',Georgia,serif;font-weight:400;font-size:20pt;letter-spacing:.06em;text-transform:uppercase;color:var(--c2)}
.t-center .lh-name span{letter-spacing:.24em;text-transform:uppercase;font-size:7pt;color:var(--c1)}
.lh-orn{width:42mm;height:3mm;margin-top:1.5mm}
.t-center .lh-mono{border-radius:50%;background:none;border:.4mm solid var(--c1);color:var(--c1);font-family:'BDSerif',Georgia,serif;font-weight:400}
/* 3 Header band */
.t-band .bd-band{left:0;right:0;top:0;height:40mm;background:var(--c1)}
.t-band .bd-acc{left:0;right:0;top:40mm;height:1.6mm;background:var(--c2)}
.t-band .bd-foot{left:0;right:0;bottom:0;height:4mm;background:var(--c1)}
.t-band .lh-head{min-height:24mm;margin:-6mm 0 18mm}
.t-band .lh-name b{color:#fff}.t-band .lh-name span{color:var(--c1l)}
.t-band .lh-info{color:#fff}
.t-band .lh-foot{padding-bottom:3mm}
/* 4 Sidebar — details in a colour column */
.t-side{padding-left:78mm}
.t-side .sd-col{left:0;top:0;bottom:0;width:62mm;background:var(--c1)}
.t-side .sd-edge{left:62mm;top:0;bottom:0;width:1.6mm;background:var(--c2)}
.t-side .lh-head{display:block;margin-bottom:14mm}
.sd-side{position:absolute;left:-66mm;top:0;width:44mm;height:calc(297mm - 28mm);display:flex;flex-direction:column;gap:10mm;color:#fff}
.t-side.p-letter .sd-side{height:calc(279.4mm - 28mm)}
.sd-items{display:grid;gap:4mm;font-size:8.2pt}.sd-items div{display:flex;gap:2.4mm;align-items:flex-start}.sd-items .lh-ic{margin-top:.6mm}
.sd-legal{margin-top:auto;display:grid;gap:1mm;font-size:7pt;color:var(--c1l)}
.t-side .lh-name{padding-top:2mm;border-bottom:.4mm solid var(--c1);padding-bottom:4mm}
/* 5 Modern — accent bar, details in the footer over colour bars */
.t-modern .md-acc{left:20mm;top:40mm;width:34mm;height:1.6mm;background:var(--c1)}
.t-modern .md-bar{left:0;right:0;bottom:0;height:6mm;background:var(--c1)}
.t-modern .md-bar2{left:0;width:42%;bottom:6mm;height:1.6mm;background:var(--c2)}
.t-modern .lh-head{min-height:22mm;margin-bottom:16mm}
.t-modern .lh-foot{padding-bottom:7mm}
/* 6 Corporate — two-tone top bars, labelled footer columns */
.t-corporate .cp-a{left:0;top:0;width:68%;height:5mm;background:var(--c1)}
.t-corporate .cp-b{right:0;top:0;width:32%;height:5mm;background:var(--c2)}
.t-corporate .cp-f{left:20mm;right:20mm;bottom:27mm;height:.6mm;background:var(--c1)}
.t-corporate .lh-head{margin-top:4mm;padding-bottom:5mm;border-bottom:.25mm solid #cbd5e1}
.t-corporate .lh-name b{color:var(--c2)}
/* 7 Geometric — angled corner shapes */
.t-geometric .ge-top{right:0;top:0;width:72mm;height:40mm}
.t-geometric .ge-bot{left:0;bottom:0;width:70mm;height:40mm}
.t-geometric .lh-head{min-height:24mm;margin-bottom:16mm}
.t-geometric .lh-foot{padding-left:30mm}
/* 8 Wave */
.t-wave .wv-top{left:0;top:0;width:100%;height:50mm}
.t-wave .wv-bot{left:0;bottom:0;width:100%;height:18mm}
.t-wave .lh-head{margin:-6mm 0 26mm}
.t-wave .lh-name b{color:#fff}.t-wave .lh-name span{color:var(--c1l)}
.t-wave .lh-foot{padding-bottom:12mm}
/* 9 Swiss minimal */
.t-minimal .lh-head{flex-direction:column;align-items:stretch;gap:5mm;margin-bottom:14mm}
.mn-top{display:flex;justify-content:space-between;align-items:flex-end;gap:6mm}
.t-minimal .lh-name b{font-size:24pt;color:#111827;letter-spacing:-.03em}
.t-minimal .lh-name span{color:var(--c1);letter-spacing:.2em;text-transform:uppercase;font-size:7pt}
.mn-rule{display:block;height:.4mm;background:#111827}
.t-minimal .lh-foot .mn-rule{height:.25mm;background:#cbd5e1;margin-bottom:2mm}
/* 10 Luxury frame */
.t-luxury .lx-f1{left:8mm;right:8mm;top:8mm;bottom:8mm;border:.6mm solid var(--c2)}
.t-luxury .lx-f2{left:10mm;right:10mm;top:10mm;bottom:10mm;border:.2mm solid var(--c2)}
.t-luxury{padding:22mm 24mm 18mm}
.t-luxury .lh-head{position:relative;flex-direction:column;gap:3mm;text-align:center;margin-bottom:14mm}
.lx-mono{width:18mm;height:18mm}
.lx-t{position:absolute;left:50%;top:0;width:18mm;height:18mm;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;font:400 22pt 'BDSerif',Georgia,serif;color:var(--c1)}
.lx-img{position:absolute;left:50%;top:3.5mm;transform:translateX(-50%);max-width:11mm;max-height:11mm}
.t-luxury .lh-name b{font-family:'BDSerif',Georgia,serif;font-weight:400;font-size:19pt;letter-spacing:.14em;text-transform:uppercase;color:var(--c1)}
.t-luxury .lh-name span{letter-spacing:.24em;text-transform:uppercase;font-size:6.8pt;color:var(--c2)}
.t-luxury .lh-line b{color:var(--c2)}
/* 11 Corner ribbon */
.t-corner .cn-tl{left:0;top:0;width:44mm;height:44mm}
.t-corner .cn-br{right:0;bottom:0;width:44mm;height:44mm}
.t-corner .lh-head{margin-left:22mm;padding-bottom:5mm;border-bottom:.4mm solid var(--c1)}
.t-corner .lh-foot{padding-right:26mm;text-align:left}.t-corner .lh-legal{text-align:left}
/* 12 Tech grid */
.t-tech .tc-grid{right:0;top:0;width:60mm;height:36mm}
.t-tech .tc-bar{left:20mm;top:0;width:24mm;height:3mm;background:var(--c1)}
.t-tech .tc-foot{left:0;right:0;bottom:0;height:2mm;background:var(--c2)}
.t-tech .lh-head{min-height:22mm;margin:2mm 0 16mm}
.t-tech .lh-name b{color:#0f172a}.t-tech .lh-name span{color:var(--c1);font-weight:600}
.t-tech .lh-foot{padding-top:3mm;border-top:.25mm solid #e2e8f0;padding-bottom:1mm}
/* design thumbnails in the editor */
.lh-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px;margin-bottom:12px}
.lh-th{display:flex;flex-direction:column;gap:5px;padding:6px;border:1.5px solid var(--border,#e4e9f2);border-radius:10px;background:var(--panel,#fff);cursor:pointer;font:600 11.5px inherit;font-family:inherit;color:var(--text,#1e2635);text-align:center}
.lh-th:hover{border-color:var(--accent,#4f6ef7)}.lh-th.on{border-color:var(--accent,#4f6ef7);box-shadow:0 0 0 3px var(--accent-soft,#eef1fe);color:var(--accent-dark,#3a52c4)}
.lh-th-box{position:relative;width:100%;contain:size layout paint;overflow:hidden;border-radius:3px;box-shadow:0 1px 4px rgba(15,23,42,.2);background:#fff}
.lh-th-box>.lh-p{position:absolute;left:0;top:0;transform-origin:top left}
.lh-sw{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.lh-sw button{width:34px;height:24px;border-radius:7px;border:1.5px solid var(--border,#e4e9f2);cursor:pointer;padding:0;overflow:hidden;display:flex}
.lh-sw button span{flex:1}.lh-sw button.on{border-color:var(--accent,#4f6ef7);box-shadow:0 0 0 2px var(--accent-soft,#eef1fe)}