/* Cover letter, certificate and business card makers (only loaded on those pages). */
.sp-chip { padding: 5px 11px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--paper); color: var(--ink); font: 600 0.82rem var(--text); cursor: pointer; }
.sp-chip:hover { border-color: var(--signal); background: var(--signal-soft); }
.sp-chip:focus-visible, .dk-tpl:focus-visible, .dk-swatch:focus-visible, .dk-swatch:focus-within { outline: 3px solid var(--signal); outline-offset: 2px; }
.cd-danger { color: var(--bad); }

/* ---------- Shared editor layout ---------- */
.dk-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.dk-docs, .dk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dk-docs select { width: auto; max-width: 260px; min-height: 36px; padding-top: 6px; padding-bottom: 6px; }
.dk .status { min-height: 1.4em; margin: 8px 0; }
.dk-layout { display: grid; grid-template-columns: minmax(0, 430px) minmax(0, 1fr); gap: 22px; align-items: start; }
.dk-editor { display: grid; gap: 10px; min-width: 0; }
.dk-card { border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--paper); }
.dk-card > summary { padding: 12px 14px; font-weight: 700; cursor: pointer; }
.dk-card[open] > summary { border-bottom: 1px solid var(--line); }
.dk-card > :not(summary) { margin-left: 14px; margin-right: 14px; }
.dk-card > :last-child { margin-bottom: 14px; }
.dk-card > summary + * { margin-top: 12px; }
.dk-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 12px; }
.dk-fields .field { margin: 0 0 10px; }
.dk-fields .dk-wide { grid-column: 1 / -1; }
.dk-editor .field { margin-bottom: 10px; }
.dk-editor label small { font-weight: 400; color: var(--slate); }
.dk-label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 0.92rem; }
.dk-image-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dk-image-row img { max-width: 140px; max-height: 56px; padding: 4px; border: 1px solid var(--line); border-radius: 6px; background: #fff; object-fit: contain; }
.dk-templates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.dk-tpl { display: grid; gap: 6px; padding: 6px 6px 8px; border: 1px solid var(--line-strong); border-radius: var(--r-control); background: var(--paper); color: var(--ink); font: 600 0.82rem var(--text); cursor: pointer; }
.dk-tpl:hover { border-color: var(--signal); }
.dk-tpl.is-active { border-color: var(--signal); box-shadow: inset 0 0 0 1px var(--signal); background: var(--signal-soft); }
.dk-swatches { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.dk-swatch { position: relative; width: 30px; height: 30px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px var(--line-strong); cursor: pointer; }
.dk-swatch.is-active { box-shadow: 0 0 0 2px var(--ink); }
.dk-swatch-custom { display: inline-block; background: conic-gradient(#e33, #f90, #ee3, #3c3, #3cf, #33e, #c3e, #e33); overflow: hidden; }
.dk-swatch-custom input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.dk-preview-col { position: sticky; top: 84px; min-width: 0; }
.dk-preview-bar { display: flex; justify-content: space-between; margin-bottom: 8px; color: var(--slate); font-size: 0.85rem; font-weight: 600; }
.dk-preview { max-height: calc(100vh - 140px); overflow-y: auto; padding: 16px; border-radius: var(--r-panel); background: var(--mist); }
.dk-page { position: relative; margin: 0 auto; background: #fff; box-shadow: 0 2px 6px rgb(15 29 58 / 0.12), 0 12px 30px -12px rgb(15 29 58 / 0.3); overflow: hidden; }
.dk-page:last-child { margin-bottom: 0 !important; }
.dk-page-in { position: absolute; top: 0; left: 0; transform-origin: top left; overflow: hidden; }
.dk-measure { position: fixed; left: -30000px; top: 0; pointer-events: none; }
.dk-print-root { display: none; }
@media print {
    body.dk-printing > :not(.dk-print-root) { display: none !important; }
    body.dk-printing { background: #fff; }
    body.dk-printing .dk-print-root { display: block; }
    .dk-print-page { position: relative; overflow: hidden; break-after: page; page-break-after: always; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .dk-print-page:last-child { break-after: auto; page-break-after: auto; }
}

/* Template thumbnails (tiny sketches of each design) */
.dk-tpl-thumb { position: relative; display: block; aspect-ratio: 210 / 297; border-radius: 3px; background: #fff; box-shadow: 0 0 0 1px var(--line); overflow: hidden; }
.dk-tpl-thumb i { position: absolute; display: block; background: var(--accent-t, #1F4E79); }
.dk-tpl-thumb b { position: absolute; left: 14%; right: 14%; height: 3px; border-radius: 2px; background: #CBD2DD; }
.dk-tpl-thumb b:nth-of-type(1) { top: 42%; } .dk-tpl-thumb b:nth-of-type(2) { top: 52%; } .dk-tpl-thumb b:nth-of-type(3) { top: 62%; right: 34%; }
.dk-tpl-modern i { left: 0; top: 0; bottom: 0; width: 6%; }
.dk-tpl-executive i { left: 0; right: 0; top: 0; height: 22%; }
.dk-tpl-sidebar i { left: 0; top: 0; bottom: 0; width: 30%; opacity: 0.25; }
.dk-tpl-sidebar b { left: 38%; }
.dk-tpl-classic i { left: 14%; right: 14%; top: 22%; height: 2px; }
.dk-tpl-elegant i { left: 30%; right: 30%; top: 12%; height: 5px; border-radius: 2px; }
.dk-tpl-minimal i { left: 14%; top: 10%; width: 30%; height: 5px; border-radius: 2px; }

/* ---------- Cover letter document ---------- */
.ld { position: relative; box-sizing: border-box; padding: var(--m); background: #fff; color: #1F2633; font-family: var(--font); font-size: var(--fs); line-height: 1.5; }
.ld *, .ld *::before, .ld *::after { box-sizing: border-box; }
.ld p, .ld ul { margin: 0; }
.ld ul { padding: 0; list-style: none; }
.ld a { color: inherit; text-decoration: none; }
.ld-name { font-size: 2.3em; font-weight: 700; line-height: 1.15; color: var(--accent); }
.ld-title { margin-top: 0.15em !important; font-size: 1.1em; color: #5A6578; }
.ld-contact { display: flex; flex-wrap: wrap; gap: 0.2em 1.4em; margin-top: 0.7em !important; font-size: 0.9em; color: #4A5468; }
.ld-head { margin-bottom: 2.2em; }
.ld-date { margin-bottom: 1.6em !important; color: #4A5468; }
.ld-to { margin-bottom: 1.6em !important; }
.ld-strong { font-weight: 700; }
.ld-subject { margin-bottom: 1.2em !important; font-weight: 700; color: var(--accent-dark); }
.ld-p { margin-bottom: 0.95em !important; }
.ld-sign { margin-top: 1.4em; }
.ld-sig { display: block; max-width: 200px; height: 60px; margin: 0.4em 0; object-fit: contain; object-position: left center; }
.ld-sig-space { height: 2.6em; }
/* Modern: coloured strip down the left edge. */
.ld-t-modern { padding-left: calc(var(--m) + 10px); }
.ld-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 12px; background: var(--accent); }
.ld-t-modern .ld-head { padding-bottom: 1.2em; border-bottom: 1px solid #DDE2EA; }
/* Executive: full-width coloured header. */
.ld-t-executive .ld-head { margin: calc(-1 * var(--m)) calc(-1 * var(--m)) 2.4em; padding: calc(var(--m) * 0.8) var(--m); background: var(--accent); color: #fff; }
.ld-t-executive .ld-name { color: #fff; }
.ld-t-executive .ld-title { color: var(--accent-soft); }
.ld-t-executive .ld-contact { color: #fff; }
/* Classic: name left, contact right, rule below. */
.ld-t-classic .ld-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2em; padding-bottom: 1em; border-bottom: 2px solid var(--accent); }
.ld-t-classic .ld-name { color: #1F2633; font-size: 2em; }
.ld-t-classic .ld-contact { flex-direction: column; align-items: flex-end; gap: 0.1em; margin: 0 !important; text-align: right; }
.ld-t-classic .ld-subject { color: #1F2633; }
/* Elegant: centred heading between thin rules. */
.ld-t-elegant .ld-head { text-align: center; }
.ld-t-elegant .ld-name { font-weight: 400; font-size: 2.5em; color: #1F2633; }
.ld-t-elegant .ld-title { color: var(--accent); }
.ld-t-elegant .ld-contact { justify-content: center; margin-top: 1em !important; padding: 0.55em 0; border-top: 1px solid var(--accent); border-bottom: 1px solid var(--accent); }
/* Minimal: small, quiet heading. */
.ld-t-minimal .ld-name { font-size: 1.6em; }
.ld-t-minimal .ld-title { font-size: 1em; }
.ld-t-minimal .ld-contact { margin-top: 0.4em !important; color: #6B7488; }
.ld-t-minimal .ld-head { margin-bottom: 3em; }
.ld-t-minimal .ld-subject { color: #1F2633; }
/* Sidebar: tinted column with the sender's details. */
.ld-t-sidebar { padding-left: calc(32% + var(--m) * 0.9); }
.ld-side { position: absolute; left: 0; top: 0; bottom: 0; width: 32%; background: var(--accent-soft); }
.ld-side-in { position: absolute; left: 0; top: 0; width: 32%; padding: var(--m) calc(var(--m) * 0.7); }
.ld-t-sidebar .ld-name { font-size: 1.9em; overflow-wrap: anywhere; }
.ld-t-sidebar .ld-title { margin-bottom: 1.6em !important; }
.ld-t-sidebar .ld-contact { flex-direction: column; gap: 0.5em; margin: 0 !important; font-size: 0.82em; overflow-wrap: anywhere; }
.ld-t-sidebar .ld-contact li { padding-top: 0.5em; border-top: 1px solid var(--accent); }
.cl-starters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.cl-starters span { color: var(--slate); font-size: 0.85rem; font-weight: 600; }
.cl #cl-body { font-size: 0.95rem; line-height: 1.55; }

@media (max-width: 960px) {
    .dk-layout { grid-template-columns: 1fr; }
    .dk-preview-col { position: static; }
    .dk-preview { max-height: none; padding: 10px; }
}
@media (max-width: 480px) {
    .dk-fields { grid-template-columns: 1fr; }
    .dk-templates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dk-actions .btn, .dk-docs select { flex: 1 1 auto; }
}

/* ---------- Certificate ---------- */
.ct-layout { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); }
.ct-sigs { display: grid; gap: 10px; }
.ct-sig { margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-control); min-width: 0; }
.ct-sig[hidden] { display: none; }
.ct-sig legend { padding: 0 4px; font-weight: 600; font-size: 0.88rem; }
.ct-thumb { position: relative; display: block; aspect-ratio: 297 / 210; border-radius: 3px; background: #fff; box-shadow: 0 0 0 1px var(--line); overflow: hidden; }
.ct-thumb i { position: absolute; inset: 0; }
.ct-thumb-classic i { inset: 5px; border: 3px solid var(--accent-t); box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 3px #B8892B; }
.ct-thumb-modern i { right: 78%; background: var(--accent-t); }
.ct-thumb-elegant i { inset: 6px; border: 1px solid #B8892B; background: #FFFCF5; }
.ct-thumb-award i { border: 6px solid var(--accent-t); box-shadow: inset 0 0 0 2px #B8892B; }
.ct-thumb-kids i { inset: 6px; border: 2px dashed var(--accent-t); border-radius: 6px; background: #fff; box-shadow: 0 0 0 6px #FFF1D6; }
.ct-thumb-minimal i { inset: 6px; border: 1px solid #C9CED8; }

.ct-doc { position: relative; background: #fff; color: #1F2633; font-family: var(--bf); }
.ct-doc p { margin: 0; }
.ct-page { position: relative; overflow: hidden; }
.ct-frame { position: absolute; inset: 0; width: 100%; height: 100%; }
.ct-content { position: absolute; inset: 78px 120px 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.ct-logo { max-width: 200px; height: 64px; margin-bottom: 10px; object-fit: contain; }
.ct-org { margin-bottom: 14px !important; color: var(--accent-dark); font-size: 15px; font-weight: 700; text-transform: uppercase; }
.ct-title { color: var(--accent); font-family: var(--tf); font-size: 58px; font-weight: 700; line-height: 1.05; text-transform: uppercase; }
.ct-title2 { margin-top: 6px !important; color: var(--metal); font-family: var(--tf); font-size: 24px; font-weight: 400; text-transform: uppercase; }
.ct-presented { margin-top: 26px !important; color: #4A5468; font-size: 17px; font-style: italic; }
.ct-name { max-width: 100%; margin-top: 10px !important; padding: 0 40px 6px; border-bottom: 1.5px solid var(--metal); color: var(--accent-dark); font-family: var(--nf); font-size: 66px; font-weight: 400; line-height: 1.25; white-space: nowrap; overflow: hidden; }
.ct-desc { max-width: 640px; margin-top: 16px !important; color: #3A4456; font-size: 17px; line-height: 1.5; }
.ct-ondate { margin-top: 8px !important; color: #4A5468; font-size: 15px; }
.ct-bottom { display: grid; grid-template-columns: 1fr 120px 1fr; align-items: end; gap: 30px; width: 100%; max-width: 760px; margin-top: 36px; }
.ct-cell { display: flex; justify-content: center; min-width: 0; }
.ct-sigblock { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 250px; }
.ct-sigimg { display: block; width: 190px; height: 54px; object-fit: contain; }
.ct-datev { display: flex; align-items: flex-end; justify-content: center; padding-bottom: 4px; font-size: 17px; font-weight: 700; color: #1F2633; }
.ct-sigline { width: 100%; height: 1px; background: #4A5468; }
.ct-signame { margin-top: 6px !important; font-size: 15px; font-weight: 700; }
.ct-sigrole { margin-top: 2px !important; color: #5A6578; font-size: 13px; }
.ct-sealwrap { display: flex; justify-content: center; }
.ct-seal { display: block; width: 96px; height: 120px; }
.ct-number { position: absolute; right: 70px; bottom: 50px; color: #6B7488; font-size: 11px; }
/* Per design */
.ct-t-modern .ct-content { inset: 70px 120px 60px 290px; }
.ct-t-modern .ct-number { right: auto; left: 290px; bottom: 34px; }
.ct-t-elegant .ct-content { inset: 84px 130px 70px; }
.ct-t-award .ct-content { inset: 92px 130px 76px; }
.ct-t-award .ct-number { right: 80px; bottom: 60px; }
.ct-t-kids .ct-content { inset: 92px 130px 80px; }
.ct-t-kids .ct-title { color: var(--accent); }
.ct-t-kids .ct-number { right: 90px; bottom: 70px; }
.ct-t-minimal .ct-content { inset: 80px 140px 64px; }
.ct-t-minimal .ct-title { font-size: 50px; }
.ct-t-minimal .ct-name { border-bottom-color: #C9CED8; }
.ct-preview-col .dk-preview { padding: 12px; }

/* ---------- Business card ---------- */
.bc-note { margin: 0; color: var(--slate); font-size: 0.88rem; }
.bc-preview { display: grid; gap: 14px; justify-items: center; padding: 18px; border-radius: var(--r-panel); background: var(--mist); }
.bc-pv { margin: 0; display: grid; gap: 6px; justify-items: center; }
.bc-pv figcaption { color: var(--slate); font-size: 0.8rem; font-weight: 600; }
.bc-pv .dk-page { margin: 0; }
.bc-thumb { position: relative; display: block; aspect-ratio: 90 / 54; border-radius: 3px; background: #fff; box-shadow: 0 0 0 1px var(--line); overflow: hidden; }
.bc-thumb i { position: absolute; background: var(--accent-t); }
.bc-thumb b { position: absolute; left: 12%; height: 3px; border-radius: 2px; background: #CBD2DD; }
.bc-thumb b:nth-of-type(1) { top: 30%; width: 40%; height: 5px; background: #4A5468; } .bc-thumb b:nth-of-type(2) { top: 62%; width: 30%; }
.bc-thumb-clean i { right: 10%; top: 14%; width: 14%; height: 22%; border-radius: 3px; }
.bc-thumb-bold i { left: 0; top: 0; bottom: 0; width: 36%; }
.bc-thumb-bold b { left: 46%; }
.bc-thumb-dark { background: #1A2233; } .bc-thumb-dark i { left: 12%; top: 46%; width: 18%; height: 2px; } .bc-thumb-dark b { background: #fff; opacity: 0.7; }
.bc-thumb-centered i { left: 42%; width: 16%; top: 50%; height: 2px; } .bc-thumb-centered b { left: 30%; }
.bc-thumb-stripe i { left: 0; right: 0; top: 0; height: 26%; } .bc-thumb-stripe b:nth-of-type(1) { top: 44%; }
.bc-thumb-corner i { right: 0; bottom: 0; width: 34%; height: 60%; border-top-left-radius: 100% 100%; }

.bc-doc { position: relative; }
.bc-face { position: relative; overflow: hidden; background: #fff; color: #1F2633; font-family: var(--font); font-size: 9px; line-height: 1.3; }
.bc-face p, .bc-face ul { margin: 0; padding: 0; }
.bc-face ul { list-style: none; }
.bc-main { position: absolute; inset: 18px 20px; display: flex; flex-direction: column; min-width: 0; }
.bc-id { min-width: 0; }
.bc-name { font-size: 16px; font-weight: 700; line-height: 1.15; color: #141B2B; white-space: nowrap; overflow: hidden; }
.bc-title { margin-top: 2px !important; font-size: 9px; font-weight: 700; color: var(--accent); white-space: nowrap; overflow: hidden; }
.bc-company { font-size: 9.5px; font-weight: 700; color: #3A4456; white-space: nowrap; overflow: hidden; }
.bc-contact { display: grid; gap: 3px; margin-top: auto !important; min-width: 0; }
.bc-contact li { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 8.2px; color: #3A4456; }
.bc-contact li span { min-width: 0; white-space: nowrap; overflow: hidden; }
.bc-ic { flex: none; width: 9px; height: 9px; color: var(--accent); }
.bc-logo { display: block; max-width: 70px; max-height: 34px; object-fit: contain; }
.bc-logo-corner { position: absolute; top: 18px; right: 20px; }
.bc-qr { position: absolute; right: 16px; bottom: 16px; width: 54px; height: 54px; padding: 3px; border-radius: 4px; background: #fff; }
.bc-qr-svg { display: block; width: 100%; height: 100%; }
.bc-front.has-qr .bc-contact { margin-right: 66px; }
/* Clean */
.bc-t-clean .bc-company { margin-top: 8px !important; }
.bc-t-clean.has-logo .bc-id { margin-right: 80px; }
/* Bold panel */
.bc-t-bold .bc-panel { position: absolute; left: 0; top: 0; bottom: 0; width: 36%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; padding: 12px; background: var(--accent); text-align: center; }
.bc-t-bold .bc-panel .bc-logo { padding: 4px; border-radius: 4px; background: #fff; }
.bc-t-bold .bc-panel .bc-company { max-width: 100%; color: #fff; white-space: normal; }
.bc-t-bold .bc-main { left: calc(36% + 16px); right: 16px; }
.bc-t-bold.bc-front.has-qr .bc-qr { right: 12px; bottom: 12px; width: 46px; height: 46px; }
.bc-t-bold.bc-front.has-qr .bc-contact { margin-right: 52px; }
/* Dark */
.bc-t-dark { background: var(--dark); color: #fff; }
.bc-t-dark .bc-name { color: #fff; }
.bc-t-dark .bc-title { color: var(--accent-light); }
.bc-t-dark.bc-front .bc-company { margin-top: 10px !important; padding-top: 6px; border-top: 2px solid var(--accent-light); width: 40px; overflow: visible; color: #D9DFEA; }
.bc-t-dark .bc-contact li { color: #D9DFEA; }
.bc-t-dark .bc-ic { color: var(--accent-light); }
.bc-t-dark .bc-logo-corner .bc-logo { padding: 3px; border-radius: 3px; background: #fff; }
.bc-t-dark.has-logo .bc-id { margin-right: 80px; }
/* Centred */
.bc-t-centered .bc-main { align-items: center; text-align: center; }
.bc-t-centered .bc-logo { margin-bottom: 6px; max-height: 26px; }
.bc-t-centered .bc-rule { width: 30px; height: 2px; margin: 7px 0 5px; background: var(--accent); }
.bc-t-centered .bc-contact { justify-items: center; }
.bc-t-centered.has-qr .bc-main { right: 80px; }
.bc-t-centered.has-qr .bc-contact { margin-right: 0; }
/* Top band */
.bc-t-stripe .bc-band { position: absolute; left: 0; right: 0; top: 0; height: 30%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 20px; background: var(--accent); }
.bc-t-stripe .bc-band .bc-company { color: #fff; }
.bc-t-stripe .bc-band .bc-logo { order: 2; max-height: 26px; padding: 3px; border-radius: 3px; background: #fff; }
.bc-t-stripe .bc-main { top: calc(30% + 12px); bottom: 14px; }
.bc-t-stripe .bc-contact { margin-top: 8px !important; }
/* Corner */
.bc-corner { position: absolute; right: 0; bottom: 0; width: 46%; height: 100%; }
.bc-t-corner .bc-main { right: 30%; }
.bc-t-corner .bc-logo { margin-bottom: 6px; max-height: 26px; }
.bc-t-corner .bc-company { margin-top: 4px !important; }
.bc-t-corner.bc-front .bc-qr { right: 14px; top: 14px; bottom: auto; width: 50px; height: 50px; }
.bc-t-corner.has-qr .bc-contact { margin-right: 0; }
/* Back */
.bc-back { background: var(--accent); color: #fff; }
.bc-t-dark.bc-back { background: var(--dark); }
.bc-t-clean.bc-back, .bc-t-centered.bc-back { background: var(--accent-soft); color: #1F2633; }
.bc-back-in { position: absolute; inset: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; }
.bc-back .bc-logo { max-width: 110px; max-height: 50px; padding: 4px; border-radius: 4px; background: #fff; }
.bc-back .bc-company { max-width: 100%; color: inherit; font-size: 14px; white-space: nowrap; overflow: hidden; }
.bc-back .bc-tagline { max-width: 100%; font-size: 8.5px; opacity: 0.85; white-space: nowrap; overflow: hidden; }
.bc-back.has-qr .bc-back-in { right: 96px; align-items: flex-start; text-align: left; }
.bc-back .bc-qr { top: 50%; bottom: auto; right: 22px; width: 64px; height: 64px; margin-top: -32px; }
.bc-sheet { position: relative; background: #fff; }
.bc-slot { position: absolute; }
.bc-mark { position: absolute; display: block; background: #888; }