/* Create By Asking: letter from Santa maker. Loaded after style.css, tools.css and family.css.
   The letter sheets are drawn at real paper size (mm) and scaled down for the on-screen preview. */

.sl { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); align-items: start; gap: 26px; }
.sl-form, .sl-out { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }
.sl-form input, .sl-form select { width: 100%; }
.sl label small { color: #A597CC; font-size: 0.74rem; }
.sl-two { display: grid; grid-template-columns: minmax(0, 1fr) 84px; gap: 10px; }
.sl-sib { display: grid; grid-template-columns: minmax(0, 1fr) 118px; gap: 8px; }
.sl-sib select { padding-inline: 8px; }
.sl-h { font: 600 0.68rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: #A597CC; margin: 4px 0 -4px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sl-h button { border: 0; background: none; color: #CBBFE8; font: 600 0.78rem/1 var(--body); cursor: pointer; text-transform: none; letter-spacing: 0; padding: 4px 0; text-decoration: underline; text-underline-offset: 3px; }
.sl-form textarea { width: 100%; min-height: 230px; font-size: 0.9rem; line-height: 1.5; }
.sl-edited { font-size: 0.8rem; color: #FFE08F; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sl-edited button { border: 0; background: rgba(255, 255, 255, 0.1); color: #fff; border-radius: 999px; padding: 5px 10px; font: 600 0.78rem/1 var(--body); cursor: pointer; }
.sl .wh-check, .sl-check { display: flex !important; grid-auto-flow: column; align-items: center; gap: 8px !important; font-size: var(--step--1) !important; color: #F2ECFF !important; cursor: pointer; }
.sl-check input { width: 18px; height: 18px; accent-color: #FFC93C; flex: none; margin: 0; }
.sl-private { background: rgba(255, 255, 255, 0.05); border-radius: 12px; padding: 12px 14px; display: grid; gap: 8px; }
.sl-private p { margin: 0; font-size: 0.8rem; color: #CBBFE8; }

.sl-designs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.sl-designs button { border: 0; background: rgba(255, 255, 255, 0.06); border-radius: 12px; padding: 7px 6px 8px; color: #CBBFE8; font: 600 0.74rem/1.15 var(--body); cursor: pointer; display: grid; gap: 6px; justify-items: center; text-align: center; }
.sl-designs button[aria-pressed="true"] { background: #FFC93C; color: #1C0F3F; }
.sl-thumb { width: 100%; max-width: 64px; aspect-ratio: 3 / 4; border-radius: 4px; position: relative; overflow: hidden; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); background: #fff; }
.sl-thumb::before, .sl-thumb::after { content: ""; position: absolute; }
.t-parchment { background: radial-gradient(ellipse at 50% 45%, #fbf3dc 30%, #ead6a6 100%); }
.t-parchment::before { left: 22%; right: 22%; top: 16%; height: 2px; background: #8c6a3a; box-shadow: 0 6px 0 -0.5px #c9b083, 0 11px 0 -0.5px #c9b083, 0 16px 0 -0.5px #c9b083, 0 21px 0 -0.5px #c9b083; }
.t-parchment::after { width: 30%; aspect-ratio: 1; right: 12%; bottom: 10%; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #e0454a, #8e1016); }
.t-candy { background: repeating-linear-gradient(45deg, #c8102e 0 4px, #fff 4px 8px); }
.t-candy::before { inset: 12%; background: #fff; border-radius: 2px; }
.t-candy::after { left: 18%; top: 14%; width: 22%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #c8102e 30%, #1f6b3d 32%); }
.t-night { background: linear-gradient(#0a1633 0 30%, #2f5590 36%, #eef4fb 38%); }
.t-night::before { width: 22%; aspect-ratio: 1; border-radius: 50%; background: #fdf2c6; right: 18%; top: 8%; box-shadow: 0 0 6px #fdf2c6; }
.t-night::after { left: 0; right: 0; top: 30%; height: 10%; background: #c9d9ee; border-radius: 50% 50% 0 0; }
.t-rudolph { background: #fbf3e6; }
.t-rudolph::before { width: 42%; aspect-ratio: 0.9; border-radius: 50%; background: #a86b3c; left: 29%; top: 10%; }
.t-rudolph::after { width: 14%; aspect-ratio: 1; border-radius: 50%; background: #e01b24; left: 43%; top: 34%; box-shadow: 0 0 5px #ff3b3b; }
.t-telegram { background: #f3e6c4; }
.t-telegram::before { left: 10%; right: 10%; top: 9%; height: 18%; background: #2d2a26; }
.t-telegram::after { left: 14%; right: 14%; top: 38%; height: 5px; background: #fffdf4; box-shadow: 0 9px 0 #fffdf4, 0 18px 0 #fffdf4, 0 27px 0 #fffdf4; }
.t-minimal { background: #fff; }
.t-minimal::before { inset: 9%; border: 1px solid #c4a35a; }
.t-minimal::after { width: 14%; aspect-ratio: 1; left: 43%; top: 15%; background: #c4a35a; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }

.sl-bar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; }
.sl-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.sl-stage { position: relative; background: rgba(255, 255, 255, 0.05); border-radius: 14px; padding: 14px; }
.sl-stage-in { position: relative; }
.sl-pg { position: relative; overflow: hidden; border-radius: 3px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); }
.sl-pg.off { position: absolute; left: 0; top: 0; visibility: hidden; box-shadow: none; pointer-events: none; height: 0 !important; }
.sl-pg > .sl-sheet { transform-origin: 0 0; }
.sl-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.sl-actions .btn { justify-content: center; }
.sl-hint { margin: 0; font-size: 0.8rem; color: #FFE08F; }
.sl-warn { margin: 0; min-height: 0; color: #FFB4A6; font-size: 0.82rem; }
.sl-warn:empty { display: none; }
@media (max-width: 920px) { .sl { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .sl-designs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sl-stage { padding: 8px; }
  .sl-actions .btn { flex: 1 1 140px; }
}

/* ---------- the sheets (real size) ---------- */
.sl-print { display: none; }
.sl-sheet {
  --pw: 210mm; --ph: 297mm; --k: 1;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --script: "Mrs Saint Delafield", "Brush Script MT", cursive;
  --fest: "Mountains of Christmas", Georgia, serif;
  --type: "Special Elite", "Courier New", monospace;
  --sans: "Figtree", Arial, sans-serif;
  width: var(--pw); height: calc(var(--ph) - 1mm); position: relative; overflow: hidden; box-sizing: border-box;
  background: #fff; color: #2b2420; display: flex; flex-direction: column; padding: 22mm 24mm 18mm;
  font-family: var(--serif); text-align: left; letter-spacing: normal; line-height: 1.4;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.sl-sheet.p-us { --pw: 215.9mm; --ph: 279.4mm; }
.sl-sheet *, .sl-sheet *::before, .sl-sheet *::after { box-sizing: border-box; }
.sl-sheet p { margin: 0; }
.sl-sheet > * { position: relative; z-index: 1; }
.sl-sheet svg { display: block; }
.sl-head { text-align: center; flex: none; }
.sl-body { flex: 1 1 auto; min-height: 0; overflow: hidden; font-size: calc(var(--fs, 13pt) * var(--k)); line-height: 1.5; padding-top: 6mm; }
.sl-text p { margin: 0 0 0.7em; }
.sl-greet { font-size: 1.12em; margin-bottom: 0.6em !important; }
.sl-sign { margin: 0.9em 0 0.4em; }
.sl-val { margin: 0 0 0.1em !important; }
.sl-sig { font-family: var(--script); font-size: 3.2em; line-height: 1; margin: 0 0 0 0.1em !important; color: #1c2d5a; font-weight: 400; }
.sl-sigsub { font-size: 0.82em; letter-spacing: 0.06em; opacity: 0.75; margin-top: 0.15em !important; }
.sl-ps { font-style: italic; margin-top: 0.6em !important; }
.tone-short .sl-text p { margin-bottom: 0.55em; }

/* parchment */
.d-parchment { --k: 1.1; color: #3a2a1a;
  background:
    radial-gradient(ellipse 40% 30% at 18% 22%, rgba(190, 140, 60, 0.12), transparent 70%),
    radial-gradient(ellipse 35% 25% at 82% 70%, rgba(190, 140, 60, 0.1), transparent 70%),
    radial-gradient(ellipse 120% 100% at 50% 45%, #fcf5e0 0%, #f5e8c6 55%, #e3cb95 100%);
  box-shadow: inset 0 0 18mm rgba(140, 95, 30, 0.35); padding: 20mm 26mm 18mm; }
.d-parchment .sl-water { position: absolute; z-index: 0; width: 120mm; left: 50%; top: 52%; transform: translate(-50%, -50%); color: #b08b4f; opacity: 0.09; }
.d-parchment .h-kick { font-style: italic; font-size: 13pt; color: #7a5a32; }
.d-parchment .h-name { font: 600 27pt/1.1 var(--serif); letter-spacing: 0.16em; text-transform: uppercase; color: #8c1c13; margin-top: 1mm; }
.d-parchment .h-addr { font: 500 10.5pt/1.3 var(--serif); letter-spacing: 0.22em; text-transform: uppercase; color: #6b5233; margin-top: 2mm; }
.h-rule { display: flex; align-items: center; justify-content: center; gap: 3mm; margin-top: 4mm; }
.h-rule i { height: 0; width: 42mm; border-top: 0.3mm solid #9a7a4a; border-bottom: 0.3mm solid #9a7a4a; padding-top: 0.8mm; }
.h-rule b { width: 3mm; height: 3mm; background: #8c1c13; transform: rotate(45deg); }
.d-parchment .sl-sig { color: #2a1e10; }
.d-parchment .sl-sign { padding-right: 46mm; }
.sl-sealwrap { position: absolute; right: 22mm; bottom: 14mm; width: 38mm; z-index: 2; }
.sl-sealwrap svg { width: 100%; height: auto; filter: drop-shadow(0.5mm 0.8mm 0.6mm rgba(60, 20, 0, 0.35)); }
.d-parchment .sl-ps { padding-right: 46mm; }

/* candy cane */
.d-candy { --k: 1; font-family: var(--sans); color: #2b2420; padding: 30mm 30mm 26mm; }
.d-candy::before { content: ""; position: absolute; inset: 7mm; border-radius: 5mm; z-index: 0;
  background: repeating-linear-gradient(45deg, #c8102e 0 3.6mm, #fff 3.6mm 5.4mm, #1f6b3d 5.4mm 6.2mm, #fff 6.2mm 8mm);
  box-shadow: inset 0 0 0 0.4mm #c8102e; }
.d-candy::after { content: ""; position: absolute; inset: 14mm; border-radius: 2.5mm; background: #fffdfa; box-shadow: 0 0 0 0.5mm #c8102e, inset 0 0 0 1.6mm #fff, inset 0 0 0 1.9mm rgba(31, 107, 61, 0.45); z-index: 0; }
.sl-holly { position: absolute; width: 38mm; z-index: 2; }
.sl-holly.l { left: 9mm; top: 8mm; }
.sl-holly.r { right: 9mm; top: 8mm; transform: scaleX(-1); }
.d-candy .h-name { font: 700 30pt/1.05 var(--fest); color: #c8102e; }
.d-candy .h-addr { font: 600 9pt/1.3 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: #1f6b3d; margin-top: 2.5mm; }
.d-candy .sl-head { padding-top: 2mm; }
.d-candy .sl-greet { font-family: var(--fest); font-weight: 700; color: #c8102e; font-size: 1.5em; }
.d-candy .sl-sig { color: #c8102e; }

/* snowy night */
.d-night { --k: 1.1; color: #1f2a44; background: #fbfdff; padding: 0 26mm 20mm; }
.sl-night { position: absolute; left: 0; top: 0; width: 100%; height: 84mm; z-index: 0; }
.d-night .sl-head { height: 84mm; display: flex; flex-direction: column; justify-content: flex-start; padding-top: 14mm; text-align: left; margin-right: 70mm; }
.d-night .h-name { font: italic 600 24pt/1.1 var(--serif); color: #fff; }
.d-night .h-addr { font: 600 8.5pt/1.3 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: #b9cdf0; margin-top: 3mm; }
.d-night .sl-body { padding-top: 4mm; }
.sl-flake { position: absolute; z-index: 0; color: #9fb9de; opacity: 0.35; }
.sl-flake.a { width: 16mm; right: 16mm; top: 100mm; }
.sl-flake.b { width: 10mm; left: 10mm; top: 160mm; opacity: 0.25; }
.sl-flake.c { width: 12mm; right: 12mm; bottom: 34mm; opacity: 0.25; }
.sl-drift { position: absolute !important; left: 0; right: 0; bottom: 0; height: 14mm; background: radial-gradient(ellipse 60% 100% at 25% 100%, #dde8f6 60%, transparent 61%), radial-gradient(ellipse 55% 90% at 85% 100%, #e7eff9 60%, transparent 61%); z-index: 0 !important; }
.d-night .sl-sig { color: #173466; }

/* Rudolph */
.d-rudolph { --k: 1; font-family: var(--sans); color: #3b2a1e; background: radial-gradient(ellipse 90% 70% at 50% 20%, #fffaf1, #f8ecd9); padding: 14mm 26mm 22mm; }
.d-rudolph::before { content: ""; position: absolute; inset: 8mm; border: 0.5mm solid #c9a37a; border-radius: 6mm; z-index: 0; }
.sl-rudolph { width: 44mm; margin: 0 auto 1mm; }
.d-rudolph .h-name { font: 700 27pt/1.05 var(--fest); color: #b5121b; }
.d-rudolph .h-addr { font: 600 8.5pt/1.3 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: #8a5a33; margin-top: 2mm; }
.d-rudolph .sl-body { padding-top: 5mm; }
.d-rudolph .sl-greet { font: 700 1.45em/1.2 var(--fest); color: #6b4423; }
.d-rudolph .sl-sig { color: #b5121b; }
.sl-hoof { position: absolute !important; left: 14mm; bottom: 10.5mm; width: calc(100% - 28mm); height: auto; }

/* telegram */
.d-telegram { --k: 0.93; font-family: var(--type); color: #2a2722; background: linear-gradient(#f5e9c9, #efdfb6); padding: 16mm 20mm 18mm; }
.d-telegram::before { content: ""; position: absolute; inset: 8mm; border: 0.5mm solid #6c5a3a; z-index: 0; }
.d-telegram .sl-head { text-align: left; }
.t-top { display: flex; justify-content: space-between; font: 700 9pt/1 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; color: #6c5a3a; border-bottom: 0.4mm solid #6c5a3a; padding-bottom: 2mm; }
.d-telegram .h-name { font: 800 40pt/1 var(--display, "Arial Black", sans-serif); letter-spacing: 0.28em; text-transform: uppercase; color: #2d2a26; margin: 4mm 0 2mm; text-align: center; }
.t-stripe { height: 2.4mm; background: repeating-linear-gradient(90deg, #a3201c 0 8mm, #f5e9c9 8mm 10mm, #1f3f73 10mm 18mm, #f5e9c9 18mm 20mm); margin-bottom: 4mm; }
.t-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0; border: 0.35mm solid #6c5a3a; }
.t-form div { padding: 1.6mm 3mm; border-right: 0.35mm solid #6c5a3a; border-bottom: 0.35mm solid #6c5a3a; display: flex; gap: 3mm; align-items: baseline; min-width: 0; }
.t-form div:nth-child(2n) { border-right: 0; }
.t-form div:nth-child(n+3) { border-bottom: 0; }
.t-form dt { font: 700 7.5pt/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: #6c5a3a; flex: none; }
.t-form dd { margin: 0; font: 10pt/1.2 var(--type); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-telegram .sl-body { padding-top: 6mm; }
.d-telegram .sl-text p, .d-telegram .sl-greet, .d-telegram .sl-ps { background: #fffcf1; padding: 1.2mm 2.6mm; box-shadow: 0 0.3mm 0.8mm rgba(80, 60, 20, 0.22); }
.d-telegram .sl-ps { font-style: normal; }
.d-telegram .sl-sig { color: #1f3f73; }
.d-telegram .sl-sigsub { font-family: var(--type); }
.t-foot { position: absolute !important; left: 20mm; right: 20mm; bottom: 10mm; display: flex; justify-content: space-between; font: 700 7.5pt/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: #6c5a3a; }
.t-stamp { position: absolute !important; right: 15mm; top: 25mm; transform: rotate(-10deg); background: rgba(245, 233, 201, 0.6); border: 0.8mm solid #b0261f; color: #b0261f; border-radius: 2mm; padding: 2mm 4mm; font: 800 11pt/1.05 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; text-align: center; opacity: 0.75; }

/* minimal */
.d-minimal { --k: 1.12; color: #2b2b2b; background: #fff; padding: 26mm 30mm 22mm; }
.d-minimal::before { content: ""; position: absolute; inset: 11mm; border: 0.35mm solid #c4a35a; z-index: 0; }
.d-minimal::after { content: ""; position: absolute; inset: 12.6mm; border: 0.15mm solid #e2cf9e; z-index: 0; }
.h-star { width: 9mm; margin: 0 auto 3mm; color: #b8954a; }
.d-minimal .h-name { font: 600 13pt/1 var(--serif); letter-spacing: 0.42em; text-transform: uppercase; color: #8a6b2c; padding-left: 0.42em; }
.d-minimal .h-addr { font: italic 11pt/1.3 var(--serif); color: #8a7a5a; margin-top: 2mm; }
.d-minimal .sl-body { padding-top: 10mm; }
.d-minimal .sl-sig { color: #2b2b2b; }

/* ---------- Nice List certificate ---------- */
.sl-cert { padding: 12mm; }
.c-frame { flex: 1; position: relative; border: 1.2mm solid var(--c1, #8c1c13); padding: 2mm; display: flex; }
.c-in { flex: 1; border: 0.35mm solid var(--c2, #b8913f); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 16mm 16mm 18mm; gap: 0; }
.c-star { width: 14mm; color: var(--c2, #b8913f); margin-bottom: 5mm; }
.c-kick { font: 600 10pt/1.2 var(--sans); letter-spacing: 0.26em; text-transform: uppercase; color: var(--c2); }
.c-title { font: 700 56pt/1 var(--serif); color: var(--c1); margin: 7mm 0 14mm; }
.c-title span { display: block; font-size: 0.42em; letter-spacing: 0.4em; text-transform: uppercase; margin-top: 3mm; padding-left: 0.4em; color: inherit; }
.c-lead { font: italic 17pt/1.3 var(--serif); }
.c-name { font: 400 calc(var(--ns, 40pt) * 1.6)/1.25 var(--script); color: var(--ink2, #1c2d5a); margin: 4mm 0 4mm !important; width: 100%; white-space: nowrap; overflow: hidden; padding: 0 6mm; border-bottom: 0.3mm solid var(--c2); }
.c-text { font: 17pt/1.45 var(--serif); max-width: 135mm; margin-top: 6mm !important; }
.c-why { font: italic 14.5pt/1.45 var(--serif); max-width: 135mm; margin-top: 8mm !important; opacity: 0.85; }
.c-foot { display: grid; grid-template-columns: 1fr 34mm 1fr; align-items: end; gap: 8mm; width: 100%; margin-top: 30mm; }
.c-sig { text-align: center; border-top: 0.3mm solid currentColor; padding-top: 2mm; position: relative; }
.c-sig .sl-sig { position: absolute; left: 0; right: 0; bottom: 100%; font-size: 34pt; line-height: 1.1; }
.c-role { font: 600 8pt/1.3 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; }
.c-rosette { width: 34mm; margin-bottom: -8mm; }
.sl-cert.d-parchment { --c1: #8c1c13; --c2: #9a7a4a; }
.sl-cert.d-candy { --c1: #c8102e; --c2: #1f6b3d; padding: 12mm; }
.sl-cert.d-candy .c-frame { border: 0; padding: 0; }
.sl-cert.d-candy::after { inset: 15mm; }
.sl-cert.d-candy .c-in { border: 0; padding-top: 22mm; }
.sl-cert.d-candy .c-title { font-family: var(--fest); }
.sl-cert.d-night { --c1: #173466; --c2: #b8913f; background: linear-gradient(#fbfdff, #eef4fb); }
.sl-cert.d-rudolph { --c1: #b5121b; --c2: #8a5a33; padding: 12mm; }
.sl-cert.d-rudolph::before { display: none; }
.sl-cert.d-rudolph .c-title { font-family: var(--fest); }
.sl-cert.d-telegram { --c1: #2d2a26; --c2: #a3201c; padding: 12mm; }
.sl-cert.d-telegram::before { display: none; }
.sl-cert.d-telegram .c-title { font-family: var(--type); font-weight: 400; letter-spacing: 0.06em; }
.sl-cert.d-minimal { --c1: #b8954a; --c2: #b8954a; padding: 12mm; }
.sl-cert.d-minimal::before, .sl-cert.d-minimal::after { display: none; }
.sl-cert.d-minimal .c-frame { border-width: 0.4mm; }
.sl-cert.d-minimal .c-title { font-weight: 500; }

/* ---------- envelope ---------- */
.sl-env { padding: 12mm 7mm 10mm; align-items: center; background: #fff !important; box-shadow: none !important; }
.sl-env::before, .sl-env::after { display: none !important; }
.e-help { font: 9pt/1.4 var(--sans); color: #444; max-width: 170mm; text-align: center; margin-bottom: 10mm !important; }
.e-net { width: 196mm; height: 244mm; flex: none; }
.e-to { font: italic 6px var(--serif); fill: #555; }
.e-name { font: 400 15px var(--script); fill: #1c2d5a; }
.e-line { font: 5px var(--serif); fill: #333; }
.e-small { font: 600 2.6px var(--sans); letter-spacing: 0.5px; fill: #777; text-transform: uppercase; }
.e-from { font: italic 4.2px var(--serif); }
.d-telegram .e-name, .d-telegram .e-line { font-family: var(--type); }
.p-us.sl-env { padding-top: 6mm; }
.p-us .e-help { margin-bottom: 4mm !important; }

/* ---------- printing ---------- */
@media print {
  html, body { background: #fff !important; margin: 0 !important; padding: 0 !important; }
  body > *:not(.sl-print) { display: none !important; }
  .sl-print { display: block !important; }
  .sl-print .sl-sheet { break-after: page; page-break-after: always; margin: 0; }
  .sl-print .sl-sheet:last-child { break-after: auto; page-break-after: auto; }
}