/* Dear Santa — the letter layer on top of Empire UI (docs/design.md; BRIEF.md "signature element").
   Parchment, a wax seal, a hand for Santa; the child's screen is one sheet of paper. Everything prefixed ds-. */

:root {
  --ds-paper: #fbf3dc;
  --ds-paper-edge: #e9d9a8;
  --ds-ink: #3b2a1a;
  --ds-wax: #9b1c24;
  --ds-pine: #173f2e;
  --ds-hand: Caveat, "Segoe Script", "Bradley Hand", cursive;
}
.dark {
  --ds-paper: #2a2417;
  --ds-paper-edge: #3d3320;
  --ds-ink: #f1e7cc;
}

/* ---- Lists, prices, the parent's quote of the child's letter ---- */
.ds-list { padding-left: 1.1rem; display: grid; gap: 0.35rem; list-style: disc; }
.ds-price { font-family: var(--font-heading); font-size: 2.25rem; font-weight: 600; line-height: 1; margin-block: 0.25rem 0.75rem; }
.ds-pick { border-color: var(--ds-wax); }
.ds-steps { padding-left: 1.2rem; display: grid; gap: 0.6rem; list-style: decimal; }
.ds-quote {
  border-inline-start: 4px solid var(--ds-wax);
  padding: 0.75rem 1rem;
  background: var(--ds-paper);
  color: var(--ds-ink);
  font-family: var(--ds-hand);
  font-size: 1.5rem;
  line-height: 1.35;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.ds-paper {
  background: var(--ds-paper);
  color: var(--ds-ink);
  font-family: var(--ds-hand);
  font-size: 1.45rem;
  line-height: 1.4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--ds-paper-edge);
  border-radius: var(--radius);
}

/* ---- Keepsake canvases ---- */
.ds-keepsake { display: grid; gap: 0.75rem; }
.ds-canvas { width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--ds-paper); }

/* ---- Kid mode: one sheet of paper, big type, nothing to tap but the paper ---- */
.ds-kid { max-width: 40rem; margin: 0 auto; padding: 1.5rem 1rem 3rem; display: grid; gap: 1rem; }
.ds-sheet {
  position: relative;
  background: var(--ds-paper);
  color: var(--ds-ink);
  border: 1px solid var(--ds-paper-edge);
  border-radius: 0.5rem;
  padding: 1.5rem 1.5rem 1.75rem;
  box-shadow: 0 0 0 6px var(--ds-paper), 0 0 0 7px var(--ds-paper-edge);
  display: grid;
  gap: 0.75rem;
}
.ds-center { text-align: center; justify-items: center; }
.ds-hand { font-family: var(--ds-hand); font-size: 1.6rem; line-height: 1.3; }
.ds-dear { font-family: var(--ds-hand); font-size: 2.1rem; font-weight: 700; margin: 0; }
.ds-from { text-align: right; margin: 0; }
.ds-oops { color: var(--ds-wax); margin: 0; }
.ds-write {
  width: 100%;
  min-height: 12rem;
  resize: vertical;
  border: 0;
  outline: 0;
  background: repeating-linear-gradient(transparent 0 2.05rem, rgba(23, 63, 46, 0.28) 2.05rem 2.1rem);
  color: var(--ds-ink);
  line-height: 2.1rem;
  font-size: 1.7rem;
  padding: 0;
}
.ds-write:focus-visible { outline: 2px solid var(--ds-wax); outline-offset: 4px; }
.ds-send {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.25rem; padding: 0.5rem 1.5rem;
  background: var(--ds-wax); color: #fff; border: 0; border-radius: 999px;
  font-family: var(--font-heading); font-size: 1.1rem; font-weight: 600; text-decoration: none; cursor: pointer;
}
.ds-send:hover { filter: brightness(1.08); }
.ds-send:focus-visible { outline: 3px solid var(--ds-pine); outline-offset: 3px; }
.ds-grown { justify-self: center; font-size: 0.85rem; color: var(--muted-foreground); }
.ds-mail {
  display: block; text-align: center; padding: 0.9rem 1rem; border-radius: 0.75rem;
  background: var(--ds-pine); color: #fdf6e3; font-family: var(--font-heading); font-size: 1.2rem; text-decoration: none;
}
.ds-mailbox { list-style: none; padding: 0; display: grid; gap: 0.6rem; }
.ds-mailbox a { display: block; padding: 0.7rem 1rem; border: 1px dashed var(--ds-paper-edge); border-radius: 0.5rem; color: var(--ds-ink); text-decoration: none; }
.ds-pin { width: 8rem; text-align: center; font-size: 2rem; letter-spacing: 0.4em; padding: 0.4rem; border: 1px solid var(--ds-paper-edge); border-radius: 0.5rem; background: #fff; color: #111; }

/* ---- The reply: a wax seal and an unfolding sheet ---- */
.ds-santa { padding-top: 2.5rem; animation: ds-unfold 0.9s ease-out both; transform-origin: top center; }
.ds-from-santa { text-align: center; font-family: var(--font-heading); font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ds-pine); margin: 0; }
.ds-letter { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 1.75rem; line-height: 1.35; }
.ds-seal {
  position: absolute; top: -1.4rem; left: 50%; translate: -50% 0;
  width: 3.6rem; height: 3.6rem; display: grid; place-items: center;
  background: var(--ds-wax); color: #fdf6e3; border-radius: 50%;
  font-family: var(--font-heading); font-size: 1.8rem; font-weight: 700;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18) inset;
}
.ds-envelope {
  width: 6.5rem; height: 4.2rem; background: var(--ds-paper); border: 2px solid var(--ds-pine); border-radius: 0.3rem;
  position: relative; animation: ds-fly 1.6s ease-in both;
}
.ds-envelope::before {
  content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom right, transparent 49%, var(--ds-pine) 50%, transparent 52%), linear-gradient(to bottom left, transparent 49%, var(--ds-pine) 50%, transparent 52%);
  clip-path: polygon(0 0, 100% 0, 50% 60%);
}
@keyframes ds-unfold { from { transform: scaleY(0.2); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
@keyframes ds-fly { from { transform: translateY(0) scale(1); opacity: 1; } to { transform: translateY(-3rem) scale(0.9); opacity: 0.9; } }
@media (prefers-reduced-motion: reduce) {
  .ds-santa, .ds-envelope { animation: none; }
}

/* ---- The parent's studio: the letter on the left, Santa's phrasebook on the right ---- */
.ds-studio { display: grid; gap: 1.5rem; }
@media (min-width: 56rem) { .ds-studio { grid-template-columns: minmax(0, 1.4fr) minmax(16rem, 1fr); align-items: start; } }
.ds-studio textarea { font-family: var(--ds-hand); font-size: 1.35rem; line-height: 1.5; background: var(--ds-paper); color: var(--ds-ink); }
.ds-studio-book { border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; background: var(--card); display: grid; gap: 0.5rem; }
.ds-studio-book h2 { font-size: 1.1rem; margin: 0; }
.ds-studio-book summary { cursor: pointer; font-weight: 600; padding: 0.35rem 0; }
.ds-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.25rem 0 0.75rem; }
.ds-chip {
  border: 1px solid var(--ds-paper-edge); background: var(--ds-paper); color: var(--ds-ink);
  border-radius: 999px; padding: 0.3rem 0.75rem; font-size: 0.875rem; cursor: pointer; text-align: left;
}
.ds-chip:hover { border-color: var(--ds-wax); }
.ds-chip:focus-visible { outline: 2px solid var(--ds-wax); outline-offset: 2px; }