/* Letter to Santa · teal backdrop, paper panel, stamps, pencil, elf, postbox (design: Letter.dc.html) */

/* The sleigh dock never covers the letter's fields, keyboard or send button; the page shows the sleigh itself. */
.scs-dock { display: none !important; }
body.scs-has-dock .scs-footer__inner { padding-bottom: 28px; }

.scs-letter {
	position: relative;
	background-color: var(--scs-teal);
	background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 46px);
	padding: 48px var(--scs-gutter) 96px;
	box-sizing: border-box;
	color: var(--scs-ink);
}
.scs-letter__wrap { position: relative; z-index: 1; max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }

/* Pencil + postbox decorations */
.scs-letter__pencil { position: absolute; left: 3%; top: 120px; width: 40px; height: 260px; transform: rotate(-12deg); display: none; }
.scs-letter__pencil span:first-child { display: block; width: 22px; height: 210px; margin: 0 auto; background: var(--scs-sun); border: 2px solid var(--scs-ink); border-radius: 4px 4px 0 0; box-sizing: border-box; }
.scs-letter__pencil span:last-child { display: block; width: 0; height: 0; margin: 0 auto; border-left: 13px solid transparent; border-right: 13px solid transparent; border-top: 36px solid #E9C9A0; }
.scs-letter__postbox { position: absolute; right: 2%; bottom: 60px; width: 150px; display: none; }
@media (min-width: 1300px) {
	.scs-letter__pencil, .scs-letter__postbox { display: block; }
}

/* Preview banner */
.scs-letter__preview {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
	padding: 10px 16px; background: var(--scs-sun); color: var(--scs-ink);
	border: 2px solid var(--scs-ink); border-radius: var(--scs-radius); font-size: 15px; font-weight: 700; line-height: 1.4;
}

/* Step indicator */
.scs-letter__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.scs-letter__steps li {
	display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 6px;
	border-radius: var(--scs-pill); font-size: 15px; font-weight: 700;
	background: rgba(255, 251, 243, .18); color: var(--scs-on-dark);
}
.scs-letter__steps li.is-done { background: rgba(255, 251, 243, .9); color: var(--scs-ink); }
.scs-letter__steps li.is-current { background: var(--scs-sun); color: var(--scs-ink); }
.scs-letter__dot {
	width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
	background: var(--scs-paper); color: var(--scs-ink); font-family: var(--scs-font-display); font-weight: 600;
}
.scs-letter__steps li.is-current .scs-letter__dot { background: var(--scs-ink); color: var(--scs-cream); }

/* Paper panel + stamps */
.scs-letter__paper {
	position: relative; background: var(--scs-paper); border: var(--scs-border); border-radius: 10px;
	box-shadow: 8px 10px 0 rgba(20, 38, 37, .45); padding: 56px 64px; box-sizing: border-box; min-width: 0;
}
.scs-letter__stamps { position: absolute; top: 22px; right: 24px; display: flex; gap: 12px; }
.scs-stamp { width: 62px; height: 74px; border: 4px dotted var(--scs-paper); display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
.scs-stamp--red { background: var(--scs-red); outline: 2px solid var(--scs-red); transform: rotate(-5deg); }
.scs-stamp--green { background: var(--scs-green); outline: 2px solid var(--scs-green); transform: rotate(6deg); }

/* Steps */
.scs-lstep { display: flex; flex-direction: column; gap: 26px; }
.scs-lstep--split { flex-direction: row; flex-wrap: wrap; gap: 40px; align-items: center; }
.scs-lstep__copy { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.scs-lstep__art { flex: 0 0 170px; }
.scs-lstep__art--heather { flex: 0 0 240px; margin: 0; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.scs-lstep__art--heather > div { width: 100%; }
.scs-lstep__art--heather .scs-caption { font-size: 14px; text-align: center; }
.scs-lstep__nav { flex: 1 1 100%; }
.scs-letter__eyebrow { color: var(--scs-red-text); }
.scs-letter__h1 { font-size: clamp(2.125rem, 1.3rem + 2.2vw, 3.25rem); line-height: 1.05; max-width: 600px; padding-right: 120px; }
/* The split layouts' heading also reaches the top-right corner: keep it clear of the stamps. */
.scs-lstep--split .scs-letter__h1 { padding-right: 104px; }
.scs-letter__h1--compose { font-size: clamp(2rem, 1.25rem + 2vw, 3rem); max-width: 680px; }
.scs-letter__h1:focus { outline: none; }
.scs-letter__h1:focus-visible { outline: 3px solid var(--scs-teal); outline-offset: 4px; }
.scs-letter__lead { font-size: 19px; line-height: 1.6; }
.scs-letter__note { font-size: 17px; line-height: 1.55; }
.scs-letter__links { display: flex; flex-wrap: wrap; gap: 8px 24px; font-weight: 700; }
.scs-letter__links a { display: inline-flex; align-items: center; min-height: 44px; }
.scs-letter__memory { font-size: 14px; color: #E6F4F4; text-align: center; }

.scs-linkbtn {
	display: inline; min-height: 44px; padding: 10px 0; border: 0; background: none; cursor: pointer;
	color: var(--scs-red-text); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px;
}
.scs-linkbtn:hover { color: var(--scs-red-deep); }

/* Ideas list */
.scs-lideas { display: flex; flex-direction: column; gap: 12px; }
.scs-lideas__status { font-size: 17px; font-weight: 700; }
.scs-lwish-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 2px dashed var(--scs-rule); }
.scs-lwish { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 2px dashed var(--scs-rule); }
.scs-lwish__icon { flex: none; width: 44px; height: 44px; border-radius: 12px; border: 2px solid var(--scs-green); background: #E3F0EA; color: var(--scs-green); display: flex; align-items: center; justify-content: center; }
.scs-lwish__txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.scs-lwish__title { font-family: var(--scs-font-display); font-weight: 600; font-size: 19px; line-height: 1.25; overflow-wrap: anywhere; }
.scs-lwish__title a { color: var(--scs-ink); }
.scs-lwish__meta { font-size: 14px; color: var(--scs-ink-soft); }
.scs-lwish__rm {
	flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px;
	border: 2px solid transparent; border-radius: var(--scs-pill); background: none; color: var(--scs-red-text);
	font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
}
.scs-lwish__rm:hover { border-color: var(--scs-red-text); }

/* Grown-up panel */
.scs-lgrown {
	flex: 1 1 100%; display: flex; flex-direction: column; gap: 14px; padding: 26px 28px; box-sizing: border-box;
	background: var(--scs-cream); border: 2px dashed var(--scs-ink); border-radius: 18px; font-size: 17px; line-height: 1.6;
}
.scs-lgrown__h { font-size: 24px; }
.scs-lgrown__next { padding: 12px 14px; border-left: 4px solid var(--scs-green); background: var(--scs-paper); border-radius: 0 10px 10px 0; }
.scs-lgrown__demo, .scs-lgrown__democode { margin: 0; font-size: 15px; line-height: 1.5; padding: 10px 14px; background: var(--scs-ph-bg); border-radius: 10px; color: var(--scs-ph-ink); font-weight: 700; }
.scs-lgrown__democode strong { font-size: 22px; letter-spacing: .18em; font-family: var(--scs-font-display); }
.scs-lgrown__form { display: flex; flex-direction: column; gap: 12px; }
.scs-lgrown__email { max-width: 460px; margin-top: 4px; }
.scs-lgrown__email .scs-input, .scs-lgrown__code .scs-input { background: var(--scs-paper); }
.scs-lgrown__code { max-width: 220px; }
.scs-lgrown__code .scs-input { font-size: 24px; letter-spacing: .3em; font-family: var(--scs-font-display); }
.scs-lgrown__codemsg { font-weight: 700; }
.scs-lgrown__codemsg:focus, [data-verified-msg]:focus { outline: 3px solid var(--scs-teal); outline-offset: 3px; }
.scs-lgrown__ok { display: flex; flex-direction: column; gap: 12px; }
.scs-lgrown .scs-hint { margin-top: -6px; }

/* Compose */
.scs-lnick { max-width: 360px; }
.scs-lmodes { display: flex; flex-wrap: wrap; gap: 12px; }
.scs-lmode {
	display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 20px; border-radius: 16px; cursor: pointer;
	font-family: var(--scs-font-display); font-weight: 600; font-size: 18px; border: var(--scs-border);
	background: var(--scs-cream); color: var(--scs-ink); text-align: left;
}
.scs-lmode:hover { background: #FFF0D6; }
.scs-lmode[aria-selected="true"] { background: var(--scs-green); color: var(--scs-on-dark); box-shadow: var(--scs-shadow-sm); }
.scs-lmode__has { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; align-items: center; justify-content: center; background: var(--scs-sun); color: var(--scs-ink); }
.scs-lpanel:focus-visible { outline: 3px solid var(--scs-teal); outline-offset: 4px; }
.scs-lpanel__note { margin-top: 12px; font-size: 14px; font-weight: 700; color: var(--scs-ph-ink); }
.scs-ltextarea {
	width: 100%; box-sizing: border-box; min-height: 300px; padding: 14px 18px; border-radius: var(--scs-radius); border: var(--scs-border);
	background-color: var(--scs-paper); background-image: repeating-linear-gradient(transparent 0 33px, #DCE7EA 33px 35px); background-attachment: local;
	font: inherit; font-size: 20px; line-height: 35px; color: var(--scs-ink); resize: vertical;
}
/* On screen the letter is written in the headline face at a light weight so it reads like
   handwriting on the ruled paper (printing keeps the body font). */
@media screen {
	.scs-ltextarea, .scs-lpreview__body { font-family: var(--scs-font-display); font-weight: 400; letter-spacing: .005em; }
	.scs-ltextarea { font-size: 21px; }
	.scs-ltextarea::placeholder { font-family: var(--scs-font-body); }
}
.scs-ltextarea:focus { outline: 3px solid var(--scs-teal); outline-offset: 2px; }
.scs-ltextarea[aria-invalid="true"] { border: 3px solid var(--scs-red-text); }
.scs-lcount { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; }
.scs-lcount .scs-hint { font-size: 14px; flex: 1 1 260px; }
.scs-lcount__n { font-size: 15px; font-weight: 700; color: var(--scs-ink-soft); font-variant-numeric: tabular-nums; }
.scs-lcount__n.is-near { color: var(--scs-ph-ink); }
.scs-lcount__n.is-over { color: var(--scs-red-text); }

.scs-lrec, .scs-lup { display: flex; flex-direction: column; gap: 16px; padding: 28px; border-radius: 20px; background: var(--scs-cream); }
.scs-lrec { border: var(--scs-border); }
.scs-lup { border: 2px dashed var(--scs-ink); }
.scs-lrec > .scs-btn, .scs-lrec .scs-alert { align-self: flex-start; }
.scs-lrec__intro, .scs-lup__intro { font-size: 18px; line-height: 1.55; }
.scs-lrec__dot { width: 16px; height: 16px; border-radius: 50%; background: var(--scs-on-dark); }
.scs-lrec__square { width: 16px; height: 16px; border-radius: 3px; background: var(--scs-ink); }
.scs-lrec__live { display: flex; align-items: center; gap: 12px; font-family: var(--scs-font-display); font-weight: 600; font-size: 28px; font-variant-numeric: tabular-nums; }
.scs-lrec__max { font-size: 18px; color: var(--scs-ink-soft); }
.scs-lrec__blink { width: 18px; height: 18px; border-radius: 50%; background: var(--scs-red); animation: scs-lrec-blink 1.2s steps(2) infinite; }
@keyframes scs-lrec-blink { 50% { opacity: .25; } }
.scs-lrec__title { font-size: 18px; font-weight: 700; }
.scs-lrec__title:focus, .scs-lrec__errh:focus, .scs-lrec__intro:focus { outline: 3px solid var(--scs-teal); outline-offset: 3px; }
.scs-lrec__errh { font-weight: 700; font-size: 18px; }
.scs-lrec__bars { display: flex; align-items: center; gap: 4px; height: 44px; }
.scs-lrec__bars span { width: 6px; background: var(--scs-green); border-radius: 3px; }
.scs-lrec audio, .scs-lpreview audio { width: 100%; max-width: 460px; }
.scs-lrec [data-rec-start] { align-self: flex-start; }

.scs-lup__done { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.scs-lup__thumb {
	position: relative; width: 160px; aspect-ratio: 3 / 4; border: var(--scs-border); border-radius: 8px; background: var(--scs-paper);
	display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; flex: none;
}
.scs-lup__thumb img { width: 100%; height: 100%; object-fit: cover; }
.scs-lup__pdf { font-weight: 700; color: var(--scs-red-text); }
.scs-lup__meta { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.scs-lup__name { font-weight: 700; font-size: 18px; overflow-wrap: anywhere; }
.scs-lup__err { display: flex; flex-direction: column; gap: 12px; }
.scs-lup__errh { font-weight: 700; font-size: 18px; color: var(--scs-red-text); }

.scs-lsleigh { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; border-top: 2px dashed var(--scs-rule); }
.scs-lsleigh__h { font-size: 22px; }
.scs-lsleigh__link { font-size: 16px; font-weight: 700; align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; }
.scs-lchips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.scs-lchip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: var(--scs-pill); background: #E3F0EA; border: 2px solid var(--scs-green); font-weight: 700; font-size: 15px; max-width: 100%; overflow-wrap: anywhere; }

/* Review */
.scs-lpreview {
	padding: 32px 36px; background-color: var(--scs-cream); background-image: repeating-linear-gradient(var(--scs-cream) 0 37px, #DCE7EA 37px 39px);
	border: 2px solid var(--scs-rule-soft); border-radius: 10px; font-size: 21px; line-height: 39px; overflow-wrap: anywhere;
}
.scs-lpreview__body { white-space: pre-line; }
.scs-lpreview__media { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.scs-lpreview__att { font-size: 16px; line-height: 1.5; font-weight: 700; color: var(--scs-green); }
.scs-lpreview__img { max-width: 240px; max-height: 320px; width: auto; border: 2px solid var(--scs-ink); border-radius: 8px; background: var(--scs-paper); }
.scs-lpreview__wh { margin-top: 14px; font-size: 16px; line-height: 1.5; font-weight: 700; }
.scs-lpreview__wishes { list-style: disc; margin: 6px 0 0; padding-left: 22px; font-size: 18px; line-height: 1.7; }
.scs-lpreview__wishes li { padding: 2px 0; }
.scs-lpreview__wishes li > span { margin-right: 8px; }
.scs-lpreview__wishes .scs-lwish__rm { min-height: 40px; font-size: 14px; vertical-align: middle; }
.scs-lpreview .scs-small { font-size: 16px; line-height: 1.5; margin-top: 12px; }
.scs-lverified { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; }
.scs-lverified__k { display: block; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--scs-ink-soft); }
.scs-lverified strong { overflow-wrap: anywhere; }
.scs-lsend { min-height: 58px; font-size: 20px; padding: 0 32px; }
.scs-lsubmit:empty { display: none; }
.scs-lsubmit .scs-alert { display: block; }
.scs-lsubmit ul { padding-left: 1.2em; font-weight: 400; }
.scs-lsubmit progress { width: 100%; max-width: 420px; height: 14px; accent-color: var(--scs-green); }

/* Sent */
.scs-lsent__art { flex: 0 0 300px; position: relative; height: 300px; }
.scs-lsent__postbox { position: absolute; left: 120px; bottom: 0; width: 150px; }
.scs-lsent__elf { position: absolute; left: 0; bottom: 0; width: 120px; }
.scs-lsent__env {
	position: absolute; left: 150px; top: 48px; width: 90px; height: 60px; background: var(--scs-cream);
	border: 2px solid var(--scs-ink); border-radius: 4px; box-shadow: 2px 3px 0 rgba(0, 0, 0, .2); box-sizing: border-box; opacity: 0;
}
.scs-lsent__env svg { display: block; }
.scs-lsent__env.is-posting { animation: scs-post 1.4s cubic-bezier(.5, 0, .6, 1) .3s 1 both; }
@keyframes scs-post {
	0% { opacity: 1; transform: translate(-260px, 40px) rotate(-14deg); }
	60% { opacity: 1; transform: translate(-6px, -6px) rotate(0); }
	100% { transform: translate(0, 46px) rotate(0) scale(.9); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	/* Static: the envelope rests on top of the postbox slot. */
	.scs-lsent__env { opacity: 1; transform: translate(0, -18px) rotate(-6deg); }
}

/* Tablet / phone */
@media (max-width: 1299px) {
	.scs-letter { padding-bottom: 40px; display: flex; flex-direction: column; }
	.scs-letter__wrap { width: 100%; }
	.scs-letter__postbox { display: block; position: static; order: 2; width: 84px; margin: 16px max(0px, calc((100% - 980px) / 2)) 0 auto; }
}
@media (max-width: 860px) {
	.scs-letter__paper { padding: 44px 32px 40px; }
	.scs-lstep__art:not(.scs-lstep__art--heather) { flex-basis: 130px; }
}
@media (max-width: 640px) {
	.scs-letter { padding: 28px var(--scs-gutter) 48px; }
	.scs-letter__wrap { gap: 16px; }
	.scs-letter__steps { gap: 6px; }
	.scs-letter__steps li { min-height: 36px; padding: 0 10px 0 4px; font-size: 13px; gap: 6px; }
	.scs-letter__dot { width: 26px; height: 26px; }
	.scs-letter__paper { padding: 84px 18px 28px; box-shadow: 5px 7px 0 rgba(20, 38, 37, .45); }
	.scs-letter__stamps { top: 14px; right: 14px; gap: 8px; }
	.scs-stamp { width: 46px; height: 56px; border-width: 3px; }
	.scs-stamp svg { width: 26px; height: 26px; }
	.scs-letter__h1 { padding-right: 0; }
	.scs-lstep--split { gap: 24px; }
	.scs-lstep__copy { flex-basis: 100%; }
	.scs-lstep__art { flex: 0 0 96px; order: -1; margin: -64px auto 0 0; }
	.scs-lstep__art--heather { order: 0; margin: 0 auto; flex-basis: auto; width: 200px; }
	.scs-lgrown { padding: 20px 16px; }
	.scs-lmodes { flex-direction: column; }
	.scs-lmode { width: 100%; }
	.scs-lrec, .scs-lup { padding: 20px 16px; }
	.scs-ltextarea { min-height: 260px; font-size: 19px; }
	.scs-lpreview { padding: 20px 18px; font-size: 19px; }
	.scs-lstep .scs-row > .scs-btn { flex: 1 1 100%; }
	.scs-lsend { width: 100%; }
	.scs-lsent__art { flex: 0 0 auto; width: 260px; height: 240px; margin-inline: auto; }
	.scs-lsent__postbox { left: 110px; width: 120px; }
	.scs-lsent__env { left: 128px; top: 40px; }
	.scs-lsent__elf { width: 100px; }
	.scs-lup__thumb { width: 120px; }
}

/* Print: the letter sheet only (filled from memory by letter.js) */
.scs-letter-print { display: none; }
@media print {
	.scs-letter { background: none !important; padding: 0; }
	.scs-letter__wrap, .scs-letter__pencil, .scs-letter__postbox { display: none !important; }
	.scs-letter-print { display: block !important; color: #000; }
	.scs-letter-print__brand { font-size: 10pt; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10pt; }
	.scs-letter-print__paper {
		border: 1.5pt solid #000; border-radius: 6pt; padding: 18pt 22pt; min-height: 70vh;
		background-image: repeating-linear-gradient(#fff 0 27pt, #b9c9cc 27pt 28pt); -webkit-print-color-adjust: exact; print-color-adjust: exact;
		font-size: 15pt; line-height: 28pt;
	}
	.scs-letter-print__body { white-space: pre-line; }
	.scs-letter-print__body.is-blank { min-height: 50vh; }
	.scs-letter-print__media p { font-size: 11pt; line-height: 16pt; margin-top: 6pt; }
	.scs-letter-print__media img { max-width: 60%; max-height: 40vh; display: block; margin-top: 6pt; }
	.scs-letter-print__wh { margin-top: 12pt; font-weight: 700; }
	.scs-letter-print ul { padding-left: 18pt; }
	.scs-letter-print__foot { margin-top: 10pt; font-size: 9pt; }
}

/* Teal backdrop runs straight into the footer's torn edge. */
body.scs-page-letter-to-santa .scs-footer { margin-top: 0; }