/* Letterhead Maker. The outer UI is the shared tool-suite design system (softlearnhub-tools-ui.css);
   this file only styles the paper preview and the few controls the suite has no class for. */
#slh-lh .slh-lh-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}
#slh-lh .slh-lh-stage{min-width:0}
#slh-lh .slh-lh-side{min-width:0}
/* Accordion sections (native <details>): one open at a time, see the JS. */
#slh-lh details.slh-lh-sec{border-top:1px solid var(--i-line)}
#slh-lh details.slh-lh-sec:first-child{border-top:0}
#slh-lh .slh-lh-sec summary{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;padding:10px 0;list-style:none;font-size:15px;font-weight:600;color:var(--i-ink);cursor:pointer}
#slh-lh .slh-lh-sec summary::-webkit-details-marker{display:none}
#slh-lh .slh-lh-sec summary::after{content:"";width:9px;height:9px;flex:0 0 auto;border-right:2px solid var(--i-muted);border-bottom:2px solid var(--i-muted);transform:rotate(45deg);transition:transform .15s}
#slh-lh .slh-lh-sec[open] summary::after{transform:rotate(-135deg)}
#slh-lh .slh-lh-sec summary:hover{color:var(--i-accent)}
#slh-lh .slh-lh-sec summary:focus-visible{outline:3px solid var(--i-accent);outline-offset:2px;border-radius:8px}
#slh-lh .slh-lh-body{padding:2px 0 16px}
#slh-lh .slh-lh-dl{padding-top:16px;border-top:1px solid var(--i-line)}
#slh-lh .slh-lh-row{display:flex;align-items:center;gap:8px}
#slh-lh .slh-lh-row .st-label{flex:1;margin:0}
#slh-lh .slh-lh-field{margin:0 0 12px}
#slh-lh .slh-lh-field input,#slh-lh .slh-lh-field textarea{margin-top:6px}
#slh-lh textarea{min-height:72px;resize:vertical}
#slh-lh .slh-lh-eye{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:1px solid var(--i-line);border-radius:8px;background:var(--i-sheet);color:var(--i-muted);cursor:pointer;transition:border-color .15s,color .15s}
#slh-lh .slh-lh-eye:hover{border-color:var(--i-accent);color:var(--i-accent)}
#slh-lh .slh-lh-eye[aria-pressed=true]{border-color:var(--i-accent);background:var(--i-accent-soft);color:var(--i-accent)}
#slh-lh .slh-lh-eye svg{width:16px;height:16px}
#slh-lh .slh-lh-eye .off{display:none}
#slh-lh .slh-lh-eye[aria-pressed=false] .on{display:none}
#slh-lh .slh-lh-eye[aria-pressed=false] .off{display:block}
#slh-lh .slh-lh-color{display:flex;align-items:center;gap:10px;min-height:44px;padding:4px 12px;border:1px solid var(--i-line);border-radius:10px;background:var(--i-field);font-size:14px;color:var(--i-ink)}
#slh-lh .slh-lh-color input[type=color]{width:34px;height:28px;padding:0;border:0;background:none;cursor:pointer}
#slh-lh .slh-lh-color code{margin-inline-start:auto;font-size:12px;color:var(--i-muted)}
#slh-lh .st-seg{display:flex;flex-wrap:wrap;gap:6px}
#slh-lh input[type=range]{width:100%;accent-color:var(--i-accent)}
#slh-lh .slh-lh-logo{display:flex;align-items:center;gap:12px;margin-bottom:12px}
#slh-lh .slh-lh-logo img{width:56px;height:56px;object-fit:contain;border:1px solid var(--i-line);border-radius:10px;background:#fff}
#slh-lh .slh-lh-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-bottom:14px}
#slh-lh .slh-lh-paperwrap{position:relative;width:100%;margin:0 auto;overflow:hidden;border-radius:6px;background:var(--i-hover);box-shadow:0 1px 3px rgba(17,17,17,.08),0 14px 36px rgba(17,17,17,.12)}
#slh-lh .slh-lh-paperwrap.slh-drag{outline:3px dashed var(--i-accent);outline-offset:-3px}
#slh-lh .slh-lh-paper{position:absolute;top:0;left:0;transform-origin:0 0;overflow:hidden;box-sizing:border-box;display:grid;grid-template-rows:auto auto auto 1fr auto auto;grid-template-columns:minmax(0,1fr) auto;gap:0 8mm;background:var(--lh-bg);color:#222;font-family:var(--lh-font),Arial,sans-serif;font-size:10pt;line-height:var(--lh-lh,1.5);text-align:start;
  --lh-bg:#fff;--lh-primary:#1F2A44;--lh-secondary:#5A65DA;--lh-wm-opacity:.06;--lh-m:18mm}
#slh-lh .slh-lh-paper[data-size=A4]{width:210mm;height:297mm}
#slh-lh .slh-lh-paper[data-size=Letter]{width:215.9mm;height:279.4mm}
#slh-lh .slh-lh-paper[lang=ur]{--lh-lh:2}
#slh-lh .slh-lh-paper[lang=ar],#slh-lh .slh-lh-paper[lang=fa]{--lh-lh:1.8}
#slh-lh .slh-lh-paper[lang=hi],#slh-lh .slh-lh-paper[lang=zh]{--lh-lh:1.65}

/* Paper regions. Rows: 1 head/contact, 2 contact (centred logo), 3 rule, 4 body, 5 contact (footer layout), 6 foot.
   Everything uses logical properties, so dir="rtl" mirrors the whole page. Values are wrapped in <bdi> so a phone
   number or email keeps its own direction inside an Arabic or Urdu line. */
#slh-lh .lh-head{grid-area:1/1/2/2;display:flex;align-items:center;gap:6mm;padding:var(--lh-m) 0 6mm;padding-inline-start:var(--lh-m)}
#slh-lh .lh-contact{grid-area:1/2/2/3;align-self:center;justify-self:end;padding:var(--lh-m) 0 6mm;padding-inline-end:var(--lh-m);font-size:8.5pt;color:#444;text-align:end}
#slh-lh .lh-rule{grid-area:3/1/4/3;margin:0 var(--lh-m);height:.6mm;background:var(--lh-primary)}
#slh-lh .lh-body{grid-area:4/1/5/3;padding:10mm var(--lh-m)}
#slh-lh .lh-foot{grid-area:6/1/7/3;display:flex;align-items:center;gap:4mm;margin:0 var(--lh-m);padding:4mm 0 var(--lh-m);border-top:.3mm solid var(--lh-secondary);font-size:7.5pt;color:#555}
#slh-lh .lh-logo{display:block;max-width:40mm;max-height:22mm;object-fit:contain}
#slh-lh .lh-head>div{min-width:0}
#slh-lh .slh-lh-paper:not([data-template=footer]):not([data-logo=center]) .lh-contact{max-width:72mm}
#slh-lh .lh-logo:not([src]){display:none}
#slh-lh .lh-company{font-size:19pt;font-weight:700;line-height:1.2;color:var(--lh-primary)}
#slh-lh .lh-tagline{margin-top:1.5mm;font-size:9.5pt;color:var(--lh-secondary)}
#slh-lh .lh-field bdi{white-space:pre-line}
#slh-lh .lh-contact .lh-field,#slh-lh .lh-legal span,#slh-lh .lh-social span{overflow-wrap:normal;word-break:normal}
#slh-lh .lh-contact [data-label]:not(:empty)::before{content:attr(data-label) " ";font-weight:700;color:var(--lh-secondary)}
#slh-lh .lh-legal{display:flex;flex-wrap:wrap;gap:1.5mm 5mm;flex:0 1 auto}
#slh-lh .lh-legal span:not(:empty)::before{content:attr(data-label) " ";font-weight:700;color:var(--lh-primary)}
#slh-lh .lh-social{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:1.5mm 4mm;flex:1 1 auto;min-width:0}
#slh-lh .lh-social span{display:inline-flex;align-items:center;gap:1.5mm;white-space:nowrap}
#slh-lh .lh-social span:empty,#slh-lh .lh-field:empty:not(.lh-logo):not([data-ph]),#slh-lh .lh-field[data-ph=""]:empty{display:none}
#slh-lh .lh-social svg{width:3.4mm;height:3.4mm;fill:var(--lh-primary);flex:0 0 auto}
#slh-lh .lh-qr{flex:0 0 auto}
#slh-lh .lh-qr svg{display:block;width:16mm;height:16mm}
#slh-lh .lh-qr:empty{display:none}
#slh-lh .lh-wm{position:absolute;inset:0;z-index:0;display:grid;place-items:center;pointer-events:none;opacity:var(--lh-wm-opacity)}
#slh-lh .lh-wm img{width:55%;max-height:45%;object-fit:contain}
#slh-lh .lh-wm.wm-bl,#slh-lh .lh-wm.wm-br{place-items:end start;padding:0 var(--lh-m) 32mm}
#slh-lh .lh-wm.wm-br{place-items:end end}
#slh-lh .lh-wm.wm-bl img,#slh-lh .lh-wm.wm-br img{width:34%}
#slh-lh .lh-wm:not(.on),#slh-lh .lh-wm img:not([src]){display:none}
#slh-lh .lh-head,#slh-lh .lh-contact,#slh-lh .lh-body,#slh-lh .lh-foot,#slh-lh .lh-rule{position:relative;z-index:1}
#slh-lh .lh-shape{position:absolute;z-index:0;display:none;pointer-events:none}
#slh-lh .lh-sample{color:#333;font-size:10.5pt;max-width:150mm}
#slh-lh .lh-sample p{margin:0 0 4mm}
#slh-lh .lh-sample[hidden]{display:none}
/* Placeholders: shown while a field is empty, never exported. */
#slh-lh .lh-field:empty::before{content:attr(data-ph);opacity:.4}
#slh-lh .slh-lh-paper.is-export .lh-field:empty:not(.lh-logo){display:none}
#slh-lh .slh-lh-paper.is-export .lh-sample{display:none}

/* Logo position. data-logo is logical (start/end/center); the JS maps Left/Right to it per direction.
   An end logo mirrors the lockup (logo on the outer edge, text aligned to it), in LTR and RTL alike. */
#slh-lh [data-logo=end]{grid-template-columns:auto minmax(0,1fr)}
#slh-lh [data-logo=end] .lh-head{grid-area:1/2/2/3;flex-direction:row-reverse;padding-inline-start:0;padding-inline-end:var(--lh-m);text-align:end}
#slh-lh [data-logo=end] .lh-contact{grid-area:1/1/2/2;justify-self:start;padding-inline-start:var(--lh-m);padding-inline-end:0;text-align:start}
#slh-lh [data-logo=center] .lh-head{grid-area:1/1/2/3;flex-direction:column;gap:3mm;padding:var(--lh-m) var(--lh-m) 4mm;text-align:center}
#slh-lh [data-logo=center] .lh-contact{grid-area:2/1/3/3;justify-self:stretch;display:flex;flex-wrap:wrap;justify-content:center;gap:1mm 6mm;align-self:auto;padding:0 var(--lh-m) 6mm;text-align:center}
#slh-lh [data-logo=center] .lh-field bdi{white-space:normal}

/* Template: corner (geometric accent top-end, small bar bottom-start). */
#slh-lh [data-template=corner] .lh-rule{display:none}
#slh-lh [data-template=corner] .lh-shape-a{display:block;top:0;inset-inline-end:0;width:72mm;height:26mm;background:var(--lh-secondary);clip-path:polygon(28% 0,100% 0,100% 100%)}
#slh-lh [data-template=corner][dir=rtl] .lh-shape-a{clip-path:polygon(0 0,72% 0,0 100%)}
#slh-lh [data-template=corner] .lh-shape-b{display:block;bottom:0;inset-inline-start:0;width:46mm;height:4mm;background:var(--lh-primary)}
#slh-lh [data-template=corner] .lh-head,#slh-lh [data-template=corner] .lh-contact{padding-top:calc(var(--lh-m) + 16mm);padding-bottom:10mm}
#slh-lh [data-template=corner][data-logo=center] .lh-head{padding-top:calc(var(--lh-m) + 10mm);padding-bottom:4mm}
#slh-lh [data-template=corner][data-logo=center] .lh-contact{padding-top:0;padding-bottom:8mm}
/* Logo on the end side: the accents mirror, so the triangle always sits above the contact block. */
#slh-lh [data-template=corner][data-logo=end] .lh-shape-a{inset-inline-end:auto;inset-inline-start:0;clip-path:polygon(0 0,72% 0,0 100%)}
#slh-lh [data-template=corner][data-logo=end][dir=rtl] .lh-shape-a{clip-path:polygon(28% 0,100% 0,100% 100%)}
#slh-lh [data-template=corner][data-logo=end] .lh-shape-b{inset-inline-start:auto;inset-inline-end:0}
#slh-lh [data-template=corner] .lh-foot{border-top-color:var(--lh-primary);padding-bottom:calc(var(--lh-m) + 2mm)}
/* Template: band (colour band on the start edge). */
#slh-lh [data-template=band]{--lh-m:16mm}
#slh-lh [data-template=band] .lh-shape-a{display:block;top:0;bottom:0;inset-inline-start:0;width:9mm;background:var(--lh-primary)}
#slh-lh [data-template=band] .lh-shape-b{display:block;top:0;bottom:0;inset-inline-start:9mm;width:1.5mm;background:var(--lh-secondary)}
#slh-lh [data-template=band] .lh-head,#slh-lh [data-template=band] .lh-body,#slh-lh [data-template=band] .lh-contact{padding-inline-start:calc(var(--lh-m) + 12mm)}
#slh-lh [data-template=band][data-logo=start] .lh-contact{padding-inline-start:0}
#slh-lh [data-template=band][data-logo=end] .lh-head{padding-inline-start:0}
#slh-lh [data-template=band] .lh-rule,#slh-lh [data-template=band] .lh-foot{margin-inline-start:calc(var(--lh-m) + 12mm)}
#slh-lh [data-template=band] .lh-rule{height:.3mm;background:#ddd}
/* Template: footer (contact block moves into a solid footer). */
#slh-lh [data-template=footer] .lh-head{grid-area:1/1/2/3;padding-bottom:4mm;padding-inline-end:var(--lh-m)}
#slh-lh [data-template=footer] .lh-rule{height:.4mm;width:30mm;margin-inline-end:auto;background:var(--lh-secondary)}
#slh-lh [data-template=footer][data-logo=center] .lh-rule{margin:0 auto}
#slh-lh [data-template=footer][data-logo=end] .lh-rule{margin-inline-start:auto;margin-inline-end:var(--lh-m)}
#slh-lh [data-template=footer] .lh-contact{grid-area:5/1/6/3;justify-self:stretch;display:flex;flex-wrap:wrap;gap:1.5mm 7mm;align-self:auto;padding:7mm var(--lh-m) 3mm;background:var(--lh-primary);color:#fff;text-align:start}
#slh-lh [data-template=footer] .lh-contact [data-label]:not(:empty)::before{color:var(--lh-secondary)}
#slh-lh [data-template=footer] .lh-field bdi{white-space:normal}
#slh-lh [data-template=footer][data-logo=center] .lh-contact{justify-content:center}
#slh-lh [data-template=footer][data-logo=end] .lh-contact{justify-content:flex-end}
#slh-lh [data-template=footer] .lh-foot{margin:0;padding:3mm var(--lh-m) 8mm;background:var(--lh-primary);border-top:.3mm solid rgba(255,255,255,.25);color:rgba(255,255,255,.85)}
#slh-lh [data-template=footer] .lh-legal span:not(:empty)::before{color:var(--lh-secondary)}
#slh-lh [data-template=footer] .lh-social svg{fill:#fff}
#slh-lh [data-template=footer] .lh-qr svg{background:#fff;padding:1mm;box-sizing:border-box}
#slh-lh [data-template=footer] .lh-wm.wm-bl,#slh-lh [data-template=footer] .lh-wm.wm-br{padding-bottom:40mm}
/* Template: modern (full-bleed top bar with a slanted accent, thin bottom bar, no header rule). */
#slh-lh [data-template=modern] .lh-rule{display:none}
#slh-lh [data-template=modern] .lh-shape-a{display:block;top:0;left:0;right:0;height:7mm;background:linear-gradient(105deg,var(--lh-primary) 0 66%,var(--lh-secondary) 66%)}
#slh-lh [data-template=modern][dir=rtl] .lh-shape-a{background:linear-gradient(255deg,var(--lh-primary) 0 66%,var(--lh-secondary) 66%)}
#slh-lh [data-template=modern] .lh-shape-b{display:block;bottom:0;left:0;right:0;height:3mm;background:var(--lh-primary)}
#slh-lh [data-template=modern] .lh-head,#slh-lh [data-template=modern] .lh-contact{padding-top:calc(var(--lh-m) + 2mm);padding-bottom:8mm}
#slh-lh [data-template=modern][data-logo=center] .lh-head{padding-bottom:4mm}
#slh-lh [data-template=modern][data-logo=center] .lh-contact{padding-top:0}
#slh-lh [data-template=modern] .lh-foot{padding-bottom:calc(var(--lh-m) + 1mm)}
/* Template: executive (classic: spaced capitals, thick-and-thin double rule). Letter-spacing and capitals are
   Latin-only: spacing breaks Arabic joining and the Devanagari headline. */
#slh-lh [data-template=executive] .lh-company{font-size:16pt}
#slh-lh [data-template=executive][lang=en] .lh-company{text-transform:uppercase;letter-spacing:.12em}
#slh-lh [data-template=executive][lang=en] .lh-tagline{margin-top:2mm;font-size:7.5pt;text-transform:uppercase;letter-spacing:.14em}
#slh-lh [data-template=executive] .lh-rule{height:.8mm}
#slh-lh [data-template=executive] .lh-rule::after{content:"";position:absolute;left:0;right:0;top:1.45mm;height:.25mm;background:var(--lh-primary)}
#slh-lh [data-template=executive] .lh-foot{border-top-color:var(--lh-primary)}
/* Continuation page: slim header, no contact block, no tagline. The corner triangle is first-page only;
   bands and bars repeat so every page carries the brand. */
#slh-lh .slh-lh-paper.is-cont .lh-contact,#slh-lh .slh-lh-paper.is-cont .lh-tagline,#slh-lh .slh-lh-paper.is-cont[data-template=corner] .lh-shape-a{display:none}
#slh-lh .slh-lh-paper.is-cont .lh-head{grid-area:1/1/2/3;padding-top:var(--lh-m);padding-bottom:4mm}
#slh-lh .slh-lh-paper.is-cont .lh-logo{max-height:12mm;max-width:28mm}
#slh-lh .slh-lh-paper.is-cont .lh-company{font-size:13pt}

@media (min-width:1101px){#slh-lh .slh-lh-stage{position:sticky;top:var(--slh-lh-top,110px)}}
@media (max-width:1100px){#slh-lh .slh-lh-grid{grid-template-columns:1fr}}
@media (max-width:767px){#slh-lh .slh-lh-tools .st-seg button{min-height:36px;padding:4px 10px;font-size:13px}}
@media (prefers-reduced-motion:reduce){#slh-lh .slh-lh-sec summary::after{transition:none}}
@media print{
  body *{visibility:hidden!important}
  #slh-lh .slh-lh-paperwrap{position:fixed!important;top:0!important;left:0!important;width:auto!important;height:auto!important;overflow:visible!important;box-shadow:none!important;background:none!important}
  #slh-lh .slh-lh-paperwrap,#slh-lh .slh-lh-paperwrap *{visibility:visible!important}
  #slh-lh .slh-lh-paper{position:static!important;transform:none!important;page-break-after:always}
  #slh-lh .lh-field:empty,#slh-lh .lh-sample{display:none!important}
}