/* The printable cards from the elf: four per A4 sheet, with dashed lines to cut along. Lying
   cards go on a lying sheet and standing cards on a standing one, so a card is a quarter of
   the sheet either way. The wrapper's class says which.

   Every size on a sheet is written in a unit --u. In print it is a true millimetre; on screen
   it shrinks when the window is narrower than the sheet. */
@page { margin: 0; }
@page lying { size: A4 landscape; margin: 0; }
@page standing { size: A4 portrait; margin: 0; }

.cards-page { --u: 1mm; padding-bottom: 56px; }
@media screen {
  .layout-lying { --u: min(1mm, calc((100vw - 32px) / 297)); }
  .layout-standing { --u: min(1mm, calc((100vw - 32px) / 210)); }
  .sheet[data-off] { display: none; }
}

.cards-page * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.toolbar { padding-top: 40px; padding-bottom: 16px; display: flex; flex-direction: column; gap: 20px; }
.toolbar h1 { font-size: clamp(34px, 5vw, 54px); }
.cards-for .for-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.toolbar p { margin-top: 20px; max-width: 44rem; font-size: 20px; color: var(--ink-soft); }
/* The choices as on the door chooser: a green name over each row of pills. */
/* One grid for the choices and the buttons, so the groups line up in columns. */
/* The settings in a panel of their own, so they stand apart from the sheets below. */
.card-settings { display: grid; grid-template-columns: repeat(2, max-content); gap: 20px 48px; align-items: start; justify-content: start; background: var(--card); border: 1px solid var(--line); border-top: 6px solid var(--red); border-radius: 16px; padding: 22px 26px 24px; box-shadow: 0 12px 28px -22px rgba(0, 0, 0, 0.35); margin-bottom: 24px; }
@media (max-width: 640px) { .card-settings { padding: 18px 16px 20px; } }
@media (max-width: 640px) { .card-settings { grid-template-columns: minmax(0, 1fr); } }
/* The names take a row of their own, after the choices and before printing or showing. */
/* width 0 with min-width 100%: the open form takes the width the columns already have and never
   widens them, so the buttons above stay where they are when it opens or closes. */
.card-names { grid-column: 1 / -1; width: 0; min-width: 100%; }
.card-decor { grid-column: 1 / -1; width: 0; min-width: 100%; }
.card-names .names { margin-top: 0; padding-bottom: 14px; border-bottom: 1px dashed var(--line); }
.card-setting { display: flex; flex-direction: column; gap: 8px; }
.card-setting h2 { font-family: inherit; font-size: 14px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green); }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pills a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1.5px solid var(--ink); border-radius: 999px; font-weight: 700; color: var(--ink); text-decoration: none; background: var(--card); }
.pills a:hover { border-color: var(--red); color: var(--red); }
.pills a[aria-current] { background: var(--ink); border-color: var(--ink); color: var(--card); }
/* What to do with the cards, grouped like the choices: paper (printing is the page's main
   button, as on the door chooser) and screen. */
.card-buttons { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.card-buttons .btn { min-height: 52px; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.card-buttons .btn svg { flex: none; }
.card-buttons .btn-ghost { padding: 12px 22px; }

.pager { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: center; padding: 8px 16px; font-weight: 700; }
.pager[hidden] { display: none; }
.pager button { font: inherit; font-weight: 700; min-height: 44px; padding: 8px 18px; border-radius: 999px; border: 1.5px solid var(--ink); background: var(--card); color: var(--ink); cursor: pointer; }
.pager button:disabled { opacity: 0.45; cursor: default; }

.sheets { padding: 0 16px; }
.sheet { margin: 12px auto; background: #FFFFFF; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; box-shadow: 0 6px 24px rgba(28, 43, 34, 0.18); break-after: page; }
.cell { padding: calc(7 * var(--u)); display: flex; min-width: 0; min-height: 0; border-right: calc(0.3 * var(--u)) dashed #AEB9B0; border-bottom: calc(0.3 * var(--u)) dashed #AEB9B0; }
.cell:nth-child(2n) { border-right: none; }
/* The date in the margin that is cut away: the grown-up can sort the printed cards, and the
   children never see it. */
.cell { position: relative; }
.cut-date { position: absolute; left: calc(1.8 * var(--u)); top: calc(1.6 * var(--u)); font-size: calc(3 * var(--u)); line-height: 1; color: #8A938C; letter-spacing: 0.04em; }
/* The date on the card itself, only when the grown-up asks for it. */
.card-date { position: absolute; z-index: 1; top: calc(4.6 * var(--u)); right: calc(6 * var(--u)); margin: 0; font-family: 'Caveat', cursive; font-weight: 700; font-size: calc(5.2 * var(--u)); line-height: 1; color: #1F5B3A; }
.cell:nth-child(n + 3) { border-bottom: none; }
.card { flex: 1; min-width: 0; position: relative; overflow: hidden; background: #FFFDF7; color: #1C2B22; border: calc(1.2 * var(--u)) solid #B3202A; border-radius: calc(5 * var(--u)); }
.card::before { content: ""; position: absolute; inset: calc(1.6 * var(--u)); border: calc(0.35 * var(--u)) solid #1F5B3A; border-radius: calc(3.2 * var(--u)); pointer-events: none; }
.card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(5 * var(--u)); background: repeating-linear-gradient(135deg, #B3202A 0 calc(3 * var(--u)), #FFFFFF calc(3 * var(--u)) calc(6 * var(--u))); }
.card svg { height: auto; }
.letter { margin: 0; font-family: 'Caveat', cursive; font-weight: 600; line-height: 1.16; }
.sign { margin: 0; font-family: 'Caveat', cursive; font-weight: 700; font-size: calc(7.056 * var(--u)); line-height: 1; color: #B3202A; }
/* A long letter is written smaller, so it stays clear of the border and the signature. */
/* An empty card: ruled lines to write on. */
.lines { align-self: stretch; min-height: calc(34 * var(--u)); background: repeating-linear-gradient(transparent 0 calc(9.6 * var(--u)), #AEB9B0 calc(9.6 * var(--u)) calc(10 * var(--u))); }

.layout-lying .sheet { page: lying; width: calc(297 * var(--u)); height: calc(210 * var(--u)); }
.layout-lying .card { display: grid; grid-template-columns: calc(30 * var(--u)) minmax(0, 1fr); grid-template-rows: 1fr auto auto 1fr; column-gap: calc(6 * var(--u)); row-gap: calc(2 * var(--u)); align-items: center; padding: calc(8 * var(--u)) calc(9 * var(--u)) calc(11 * var(--u)); }
.layout-lying .card svg { grid-column: 1; grid-row: 2 / 4; justify-self: center; width: calc(24 * var(--u)); }
.layout-lying .letter { grid-column: 2; grid-row: 1 / -1; align-self: center; padding: 0 calc(2 * var(--u)) calc(8 * var(--u)); font-size: calc(7.056 * var(--u)); }
.layout-lying .letter.long { font-size: calc(5.9 * var(--u)); }
.layout-lying .sign { grid-column: 2; grid-row: 4; align-self: end; justify-self: end; }

.layout-standing .sheet { page: standing; width: calc(210 * var(--u)); height: calc(297 * var(--u)); }
.layout-standing .card { display: flex; flex-direction: column; align-items: center; gap: calc(3 * var(--u)); text-align: center; padding: calc(8 * var(--u)) calc(9 * var(--u)) calc(12 * var(--u)); }
.layout-standing .card svg { width: calc(23 * var(--u)); flex: none; }
.layout-standing .letter { flex: none; display: flex; align-items: center; padding: 0 calc(3 * var(--u)); font-size: calc(6.703 * var(--u)); }
/* The elf just above the letter, the two together in the middle, the signature at the foot. */
.layout-standing .card svg { margin-top: auto; }
.layout-standing .sign { margin-top: auto; }
/* "Till Alva och Theo" above the note, in green, on a line of its own. */
.letter-to { display: block; margin-bottom: 0.5em; color: var(--green); }
/* The lettering (`?typsnitt=`), as on the doors: storybook (Fraunces) and print (DM Sans) are wider
   than the handwriting, so they are written smaller. The PDF is always handwritten. */
.font-s .letter, .font-s .sign, .font-s .a4-letter { font-family: 'Fraunces', Georgia, serif; font-weight: 500; }
.font-p .letter, .font-p .sign, .font-p .a4-letter { font-family: 'DM Sans', sans-serif; font-weight: 400; }
.font-s .sign, .font-p .sign, .font-s .a4-greeting, .font-p .a4-greeting { font-weight: 700; }
.font-s.layout-lying .letter, .font-p.layout-lying .letter { font-size: calc(5.2 * var(--u)); }
.font-s.layout-lying .letter.long, .font-p.layout-lying .letter.long { font-size: calc(4.3 * var(--u)); }
.font-s.layout-standing .letter, .font-p.layout-standing .letter { font-size: calc(4.9 * var(--u)); }
.font-s.layout-standing .letter.long, .font-p.layout-standing .letter.long { font-size: calc(4.1 * var(--u)); }
.font-s .card .sign, .font-p .card .sign { font-size: calc(5.4 * var(--u)); }
.card-settings .pill-font-c { font-family: 'Caveat', cursive; font-size: 1.2em; }
.card-settings .pill-font-s { font-family: 'Fraunces', Georgia, serif; }
.card-settings .pill-font-p { font-family: 'DM Sans', sans-serif; }
/* An empty "Till …" takes no room, except while one's own texts are written, to show where it goes. */
.letter-to.is-empty { display: none; }
.texts-own .letter-to.is-empty { display: block; }
.texts-own .letter-to.is-empty::before { content: attr(data-placeholder); color: #9AA59D; }
@media print { .texts-own .letter-to.is-empty { display: none; } }
/* The buyer's texts can be written over: a dashed line around a text on hover and while writing,
   on screen only. An empty card of one's own shows what to do, and prints with lines to write on. */
[data-edit] { border-radius: 4px; outline: 1.5px dashed transparent; outline-offset: 3px; }
.texts-own [data-edit] { cursor: text; }
.texts-own [data-edit]:hover { outline-color: #AEB9B0; }
.texts-own [data-edit]:focus { outline-color: var(--red); }
.own-letter { align-self: stretch; }
.own-letter .letter-text { display: block; min-height: 3.6em; }
.texts-own .own-letter .letter-text.is-empty::before { content: attr(data-placeholder); color: #9AA59D; }
/* With the ready-made texts the empty cards are for writing by hand: lines, as on the free card. */
.own-letter:has(.letter-text.is-empty) { min-height: calc(34 * var(--u)); }
.cards-page:not(.texts-own) .own-letter:has(.letter-text.is-empty) { background: repeating-linear-gradient(transparent 0 calc(9.6 * var(--u)), #AEB9B0 calc(9.6 * var(--u)) calc(10 * var(--u))); }
@media print {
  [data-edit] { outline: none !important; }
  .own-letter .letter-text.is-empty::before { content: none; }
  .own-letter:has(.letter-text.is-empty) { min-height: calc(34 * var(--u)); background: repeating-linear-gradient(transparent 0 calc(9.6 * var(--u)), #AEB9B0 calc(9.6 * var(--u)) calc(10 * var(--u))); }
}
.layout-standing .letter:has(.letter-to:not(.is-empty)), .texts-own.layout-standing .letter:has(.letter-to) { flex-direction: column; justify-content: center; }
.layout-standing .letter.long { font-size: calc(5.6 * var(--u)); }
.layout-standing .sign { align-self: flex-end; margin-right: calc(2 * var(--u)); }

/* Showing on screen, for a phone or a tablet held up to a child: one card at a time, as large as
   the screen allows, lying on a lying screen and standing on a standing one. The script puts the
   class on <html>, picks the layout and marks the card that is shown.

   Everything about the card follows the screen: the card fills it, the card's unit --u comes
   from the screen's width and height (what a card of the printed shape would need to fit), and
   the edge around the card is a share of the screen's shorter side. The height is dvh where the browser knows it, the part of a phone's screen that is not
   under the browser's own bars. Only the buttons keep a fixed size, so a finger can hit them. */
.show-bar { display: none; }
@media screen {
  /* The page keeps room for a scrollbar at its edge; while a card is shown there is nothing to
     scroll, and the card's background goes all the way out. */
  html.card-show { overflow: hidden; scrollbar-gutter: auto; }
  .card-show .skip-link, .card-show header.nav, .card-show footer.footer, .card-show .cookie, .card-show .toolbar, .card-show .pager { display: none; }
  .card-show .cards-page { position: fixed; inset: 0; z-index: 100; --edge: 2vmin; padding: var(--edge); display: flex; align-items: center; justify-content: center; overflow: hidden; background: #1F3D2B; touch-action: pan-y pinch-zoom; }
  .card-show .layout-lying { --u: min(calc((100vw - 2 * var(--edge)) / 134.5), calc((100vh - 2 * var(--edge)) / 91)); --u: min(calc((100vw - 2 * var(--edge)) / 134.5), calc((100dvh - 2 * var(--edge)) / 91)); }
  .card-show .layout-standing { --u: min(calc((100vw - 2 * var(--edge)) / 91), calc((100vh - 2 * var(--edge)) / 134.5)); --u: min(calc((100vw - 2 * var(--edge)) / 91), calc((100dvh - 2 * var(--edge)) / 134.5)); }
  /* Every card has the same place, so the one that leaves and the one that comes can pass. */
  .card-show .sheets { padding: 0; display: grid; }
  .card-show .sheet, .card-show .sheet[data-off] { display: contents; }
  .card-show .cell { display: none; grid-area: 1 / 1; padding: 0; border: none; }
  .card-show .cut-date { display: none; }
  .card-show .cell[data-shown] { display: flex; animation: card-in 0.2s ease-out; }
  /* The card takes the whole screen, whatever its shape: a tall phone gets a taller card and a
     wide monitor a wider one. The writing keeps the size it has on a card of the printed shape. */
  .card-show .cell { width: calc(100vw - 2 * var(--edge)); height: calc(100vh - 2 * var(--edge)); height: calc(100dvh - 2 * var(--edge)); }
  /* Changing card: the cards lie side by side, a screen's width apart, and slide together. With
     reduced motion the new card simply takes the old one's place. */
  .card-show [data-from] .cell[data-shown], .card-show .cell[data-leaving] { display: flex; animation: card-in-next 0.34s cubic-bezier(0.3, 0, 0.2, 1) both; }
  .card-show [data-from="prev"] .cell[data-shown] { animation-name: card-in-prev; }
  .card-show [data-from="next"] .cell[data-leaving] { animation-name: card-out-next; }
  .card-show [data-from="prev"] .cell[data-leaving] { animation-name: card-out-prev; }
  .card-show .cell[data-leaving] { pointer-events: none; }

  /* The buttons lie over the foot of the card, so the card has the whole screen once they fade. */
  .card-show .show-bar { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 12px; align-items: center; padding: 8px; border-radius: 999px; background: #1F3D2B; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35); color: #FFFDF7; font-weight: 700; white-space: nowrap; transition: opacity 0.3s; }
  /* Left alone, the buttons fade away. They stay for someone who reaches them with the keyboard. */
  .card-show [data-idle]:not([data-keys]) .show-bar { opacity: 0; pointer-events: none; }
  .show-bar span { min-width: 6.5em; text-align: center; }
  .show-bar button { width: 52px; height: 52px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 2px solid #FFFDF7; background: #FFFDF7; color: #1C2B22; cursor: pointer; }
  .show-bar button:disabled { background: transparent; color: #FFFDF7; opacity: 0.45; cursor: default; }
  .show-bar button:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }
  .show-bar .show-close, .show-bar .show-full { background: transparent; color: #FFFDF7; }
  .show-bar .show-full { margin-left: 8px; }
  .show-bar .show-full[hidden] { display: none; }
  /* The button's drawing: corners pointing out to take the whole screen, in to leave it. */
  .show-full .full-off, [data-full] .show-full .full-on { display: none; }
  [data-full] .show-full .full-off { display: inline; }
}
@keyframes card-in { from { opacity: 0; } }
@keyframes card-in-next { from { transform: translateX(100vw); } }
@keyframes card-in-prev { from { transform: translateX(-100vw); } }
@keyframes card-out-next { to { transform: translateX(-100vw); } }
@keyframes card-out-prev { to { transform: translateX(100vw); } }
@media (prefers-reduced-motion: reduce) {
  .card-show .cards-page .cell[data-shown] { animation: none; }
  .card-show .cards-page .cell[data-leaving] { display: none; }
  .card-show .show-bar { transition: none; }
}

/* Print: only the sheets, every one of them, on plain white. */
@media print {
  body { background: #FFFFFF !important; }
  body::before, .skip-link, header.nav, footer.footer, .cookie, .toolbar, .pager, .show-bar { display: none !important; }
  .cards-page { padding: 0; }
  .sheets { padding: 0; }
  .sheet { margin: 0; box-shadow: none; }
}

/* The decorations (src/decor.rs draws the same in the PDF): border, inner line and the band
   along the foot. The candy stripe above is the default. */
.decor-gran .card { border-color: #1F5B3A; }
.decor-gran .card::before { border-color: #B3202A; }
.decor-gran { --band: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 50' width='70' height='50'%3E%3Cg fill='none' stroke='%231F5B3A' stroke-width='3' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M27 22 L35 5 L43 22 Z M24 33 L35 14 L46 33 Z M21 41 L35 23 L49 41 Z M35 41 V47'/%3E%3C/g%3E%3C/svg%3E"); }
.decor-gran .card::after { background: var(--band) space no-repeat center / auto 82%, #FFFDF7; border-top: calc(0.3 * var(--u)) solid #1F5B3A; }
.decor-snoflingor .card { border-color: #2C5A7A; }
.decor-snoflingor .card::before { border-color: #2C5A7A; }
.decor-snoflingor { --band: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 50' width='70' height='50'%3E%3Cg fill='none' stroke='%232C5A7A' stroke-width='3' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M35 25 L54.0 25.0'/%3E%3Cpath d='M35 25 L44.5 41.5'/%3E%3Cpath d='M35 25 L25.5 41.5'/%3E%3Cpath d='M35 25 L16.0 25.0'/%3E%3Cpath d='M35 25 L25.5 8.5'/%3E%3Cpath d='M35 25 L44.5 8.5'/%3E%3C/g%3E%3C/svg%3E"); }
.decor-snoflingor .card::after { background: var(--band) space no-repeat center / auto 82%, #FFFDF7; border-top: calc(0.3 * var(--u)) solid #2C5A7A; }
.decor-stjarnor .card { border-color: #9A6B00; }
.decor-stjarnor .card::before { border-color: #1F5B3A; }
.decor-stjarnor { --band: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 50' width='70' height='50'%3E%3Cg fill='none' stroke='%239A6B00' stroke-width='3' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M35.0 7.0 L40.3 19.7 L54.0 20.8 L43.6 29.8 L46.8 43.2 L35.0 36.0 L23.2 43.2 L26.4 29.8 L16.0 20.8 L29.7 19.7 Z'/%3E%3C/g%3E%3C/svg%3E"); }
.decor-stjarnor .card::after { background: var(--band) space no-repeat center / auto 82%, #FFFDF7; border-top: calc(0.3 * var(--u)) solid #9A6B00; }
.decor-pepparkaka .card { border-color: #7A4A22; }
.decor-pepparkaka .card::before { border-color: #B3202A; }
.decor-pepparkaka { --band: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 50' width='70' height='50'%3E%3Cg fill='none' stroke='%237A4A22' stroke-width='3' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M0 14 L8 22 L16 14 L24 22 L32 14 L40 22 L48 14 L56 22 L64 14 L70 20'/%3E%3Cpath d='M0 31 L8 39 L16 31 L24 39 L32 31 L40 39 L48 31 L56 39 L64 31 L70 37'/%3E%3C/g%3E%3C/svg%3E"); }
.decor-pepparkaka .card::after { background: var(--band) space no-repeat center / auto 82%, #FFFDF7; border-top: calc(0.3 * var(--u)) solid #7A4A22; }
.decor-hjartan .card { border-color: #B3202A; }
.decor-hjartan .card::before { border-color: #B3202A; }
.decor-hjartan { --band: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 50' width='70' height='50'%3E%3Cg fill='none' stroke='%23B3202A' stroke-width='3' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M35 43 C20 32 15 24 20 17 C25 10 33 12 35 19 C37 12 45 10 50 17 C55 24 50 32 35 43 Z'/%3E%3C/g%3E%3C/svg%3E"); }
.decor-hjartan .card::after { background: var(--band) space no-repeat center / auto 82%, #FFFDF7; border-top: calc(0.3 * var(--u)) solid #B3202A; }
.pill-locked { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1.5px dashed var(--ink-soft); border-radius: 999px; font-weight: 700; color: var(--ink-soft); background: transparent; }
/* A small sample of each decoration on its button: its figure in its colour, in its border. */
.decor-swatch { flex: none; width: 24px; height: 24px; border-radius: 6px; border: 2.5px solid #B3202A; background: #FFFDF7 repeating-linear-gradient(135deg, #B3202A 0 4px, #FFFDF7 4px 8px); }
.swatch-gran { border-color: #1F5B3A; background: #FFFDF7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 50' width='70' height='50'%3E%3Cg fill='none' stroke='%231F5B3A' stroke-width='3' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M27 22 L35 5 L43 22 Z M24 33 L35 14 L46 33 Z M21 41 L35 23 L49 41 Z M35 41 V47'/%3E%3C/g%3E%3C/svg%3E") center / 150% auto no-repeat; }
.swatch-snoflingor { border-color: #2C5A7A; background: #FFFDF7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 50' width='70' height='50'%3E%3Cg fill='none' stroke='%232C5A7A' stroke-width='3' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M35 25 L54.0 25.0'/%3E%3Cpath d='M35 25 L44.5 41.5'/%3E%3Cpath d='M35 25 L25.5 41.5'/%3E%3Cpath d='M35 25 L16.0 25.0'/%3E%3Cpath d='M35 25 L25.5 8.5'/%3E%3Cpath d='M35 25 L44.5 8.5'/%3E%3C/g%3E%3C/svg%3E") center / 150% auto no-repeat; }
.swatch-stjarnor { border-color: #9A6B00; background: #FFFDF7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 50' width='70' height='50'%3E%3Cg fill='none' stroke='%239A6B00' stroke-width='3' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M35.0 7.0 L40.3 19.7 L54.0 20.8 L43.6 29.8 L46.8 43.2 L35.0 36.0 L23.2 43.2 L26.4 29.8 L16.0 20.8 L29.7 19.7 Z'/%3E%3C/g%3E%3C/svg%3E") center / 150% auto no-repeat; }
.swatch-pepparkaka { border-color: #7A4A22; background: #FFFDF7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 50' width='70' height='50'%3E%3Cg fill='none' stroke='%237A4A22' stroke-width='3' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M0 14 L8 22 L16 14 L24 22 L32 14 L40 22 L48 14 L56 22 L64 14 L70 20'/%3E%3Cpath d='M0 31 L8 39 L16 31 L24 39 L32 31 L40 39 L48 31 L56 39 L64 31 L70 37'/%3E%3C/g%3E%3C/svg%3E") center / 150% auto no-repeat; }
.swatch-hjartan { border-color: #B3202A; background: #FFFDF7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 50' width='70' height='50'%3E%3Cg fill='none' stroke='%23B3202A' stroke-width='3' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M35 43 C20 32 15 24 20 17 C25 10 33 12 35 19 C37 12 45 10 50 17 C55 24 50 32 35 43 Z'/%3E%3C/g%3E%3C/svg%3E") center / 150% auto no-repeat; }
/* Room for the line about the copied link, kept whether it is there or not. */
.share-status { min-height: 1.5em; margin: 0; overflow-wrap: anywhere; }

/* The welcome and farewell letters: one A4 sheet, standing, with the card's decoration as its
   frame. The letter is written in the same hand as the cards, larger. */
.a4-sheet { page: standing; width: calc(210 * var(--u)); height: calc(297 * var(--u)); padding: calc(12 * var(--u)); background: #FFFFFF; display: flex; }
.a4-letter { display: flex; flex-direction: column; gap: calc(4 * var(--u)); padding: calc(18 * var(--u)) calc(22 * var(--u)) calc(20 * var(--u)); font-family: 'Caveat', cursive; font-weight: 600; font-size: calc(7.4 * var(--u)); line-height: 1.22; }
.a4-letter p, .a4-letter ol { margin: 0; }
/* A whole sheet: a broader border, and the decoration as a frame all round. */
.a4-letter { border-width: calc(2 * var(--u)); border-radius: calc(7 * var(--u)); }
/* The band goes all round, 10 mm wide and 2.5 mm in from the border: along the top and the foot over the whole width, down the
   sides between them (content-box: inside the band's top and bottom padding). A figure is 70 x 50;
   down the sides each gets a square as tall as it is wide, so the figures stand as far apart as along the top. Only whole figures,
   spread evenly; the thin line runs inside the band. */
.a4-letter::before { inset: calc(14 * var(--u)); border-width: calc(0.5 * var(--u)); border-radius: calc(3 * var(--u)); }
.letter-page .a4-letter::after { --f: calc(7 * var(--u)); --side: calc(9.8 * var(--u)); --o: calc(1.5 * var(--u)); --g: calc(2.5 * var(--u)); inset: var(--g); height: auto; padding: calc(10 * var(--u)) 0; border-top: 0; background:
  var(--band) space no-repeat center top var(--o) / auto var(--f) border-box,
  var(--band) space no-repeat center bottom var(--o) / auto var(--f) border-box,
  var(--band) no-repeat space left top / var(--side) var(--side) content-box,
  var(--band) no-repeat space right top / var(--side) var(--side) content-box; }
/* The candy stripe as one ribbon all round: stripes over the whole frame, the middle cut away. */
.letter-page.decor-polkagris .a4-letter::after { inset: calc(var(--g) + var(--o)); padding: var(--f); border-radius: calc(3.5 * var(--u));
  background: linear-gradient(#FFFDF7 0 0) content-box, repeating-linear-gradient(135deg, #B3202A 0 calc(3 * var(--u)), transparent calc(3 * var(--u)) calc(6 * var(--u))) border-box; }
/* The frame is drawn behind the writing (the sheet is its own stacking context), and no layer over
   the sheet takes the clicks meant for the words. The ribbon's middle is covered with the sheet's
   colour rather than cut out with a mask: a mask is lost in print. */
.letter-page .a4-letter { isolation: isolate; }
.letter-page .a4-letter::after { z-index: -1; }
.card::after { pointer-events: none; }
/* Along the foot only, as on the cards (`?kant=botten`): the band a row at the bottom, the thin line
   close to the border at the top and sides. */
.letter-page.edge-bottom .a4-letter::before { inset: calc(2.6 * var(--u)) calc(2.6 * var(--u)) calc(14 * var(--u)); }
.letter-page.edge-bottom .a4-letter::after, .letter-page.edge-bottom.decor-polkagris .a4-letter::after { inset: auto var(--g) var(--g); height: calc(10 * var(--u)); padding: 0; background: var(--band) space no-repeat center / auto var(--f); }
.letter-page.edge-bottom.decor-polkagris .a4-letter::after { background: repeating-linear-gradient(135deg, #B3202A 0 calc(3 * var(--u)), transparent calc(3 * var(--u)) calc(6 * var(--u))) center / 100% var(--f) no-repeat; }
/* The two choices of frame drawn on their buttons: a sheet with a frame all round, and one with a
   line along its foot. */
.edge-icon { flex: none; width: 18px; height: 24px; border-radius: 3px; border: 2px solid currentColor; }
.edge-icon-round { outline: 1.5px solid currentColor; outline-offset: -6px; }
.edge-icon-bottom { background: linear-gradient(currentColor 0 0) bottom 3px left 3px / calc(100% - 6px) 3px no-repeat; }
.a4-letter svg { width: calc(34 * var(--u)); height: auto; align-self: center; flex: none; }
.a4-greeting { font-size: calc(9 * var(--u)); color: #1F5B3A; }
.a4-rules { padding-left: calc(8 * var(--u)); display: flex; flex-direction: column; gap: calc(1.5 * var(--u)); }
.a4-letter .sign { margin-top: auto; align-self: flex-end; font-size: calc(9 * var(--u)); padding-bottom: calc(4 * var(--u)); }
/* Fewer settings than on the cards page: one column the panel's width, or the decorations get only the print button's width. */
.letter-page .card-settings { grid-template-columns: minmax(0, 1fr); }
.letter-page .sheets { display: flex; justify-content: center; }
/* A letter, not a card: written from the left, the elf at the top, the signature at the foot. */
.letter-page .a4-letter { text-align: left; align-items: stretch; padding: calc(18 * var(--u)) calc(19 * var(--u)) calc(17 * var(--u)); }
.letter-page .a4-letter svg { margin-top: 0; margin-bottom: calc(2 * var(--u)); }
/* The farewell letter is shorter: larger writing and a larger elf, so it fills the sheet too. */
.letter-page .a4-farewell { font-size: calc(8.2 * var(--u)); gap: calc(5 * var(--u)); padding-top: calc(20 * var(--u)); }
.letter-page .a4-farewell svg { width: calc(40 * var(--u)); }
.letter-page .a4-farewell .a4-greeting { font-size: calc(10 * var(--u)); }
.letter-page.font-s .a4-letter, .letter-page.font-p .a4-letter { font-size: calc(5.7 * var(--u)); line-height: 1.4; }
.letter-page.font-s .a4-farewell, .letter-page.font-p .a4-farewell { font-size: calc(6.8 * var(--u)); }
.letter-page.font-s .a4-greeting, .letter-page.font-p .a4-greeting { font-size: calc(7 * var(--u)); }
.letter-page.font-s .a4-letter .sign, .letter-page.font-p .a4-letter .sign { font-size: calc(7 * var(--u)); }
.letter-more { max-width: 46rem; padding-top: 32px; }
@media print { .letter-more { display: none !important; } .a4-sheet { padding: calc(10 * var(--u)); } }
.edit-note .link-button, .edit-bar .link-button { color: var(--red); font-weight: 700; }
.edit-bar { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 20; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 16px; max-width: calc(100vw - 32px); padding: 12px 20px; background: var(--card); border: 1.5px solid var(--ink); border-radius: 999px; box-shadow: 0 12px 28px -14px rgba(0, 0, 0, 0.45); font-weight: 700; }
.edit-bar[hidden] { display: none; }
@media print { .edit-bar { display: none !important; } }
/* A whole row, like the names: its words must not widen the columns and push the buttons out. */
.edit-note { grid-column: 1 / -1; width: 0; min-width: 100%; padding-bottom: 14px; border-bottom: 1px dashed var(--line); }
.pills button { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1.5px solid var(--ink); border-radius: 999px; font: inherit; font-weight: 700; color: var(--ink); background: var(--card); cursor: pointer; }
.pills button:hover { border-color: var(--red); color: var(--red); }
.pills button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--card); }