/* The card maker and the card. The envelope on the recipient view is the
   homepage's (birthday-polish.css, reveal-envelope.mjs); nothing here draws
   an envelope. The card itself is three canvases at 1200 by 1680. */
@font-face{font-family:Caveat;src:url('/fonts/Caveat.ttf') format('truetype');font-weight:400 700;font-display:swap}
.cards-main{max-width:980px;margin:0 auto;padding:8px 22px 72px}
.cards-nav{display:flex;gap:18px;font:500 13px/1.2 var(--sans);color:var(--muted);flex-wrap:wrap}
.cards-nav a{text-decoration:none}
.cards-nav a:hover{color:var(--ink);text-decoration:underline}
.cards-main h1{max-width:18ch;font-size:clamp(1.7rem,5.5vw,2.6rem);line-height:1.08;letter-spacing:-.04em;font-weight:600;margin:.9rem 0 .8rem;text-wrap:balance}
.cards-lead{font-size:1.1rem;line-height:1.55;max-width:40rem;margin:0 0 1.6rem}
.maker-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,420px);gap:20px 40px;align-items:start}
/* Room for the open card: two panels of 336 on a wide screen. */
@media(min-width:1100px){.cards-main{max-width:1180px}.maker-grid{grid-template-columns:minmax(360px,1fr) minmax(320px,680px)}}
@media(max-width:760px){.maker-grid{grid-template-columns:minmax(0,1fr)}.card-preview{order:-1}}

/* The shelf: the finished cards in a row you swipe, one tap picks one. The
   chosen card's colours sit under it. */
.card-shelf-wrap{display:grid;gap:6px;margin:0 -22px 14px;padding:0 22px}
.card-shelf{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 0 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.card-shelf::-webkit-scrollbar{display:none}
.shelf-card{position:relative;flex:none;width:112px;scroll-snap-align:start;padding:0;border:0;background:none;cursor:pointer;-webkit-appearance:none;appearance:none;text-align:center;display:grid;gap:6px;justify-items:center}
.shelf-card input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.shelf-card canvas{width:112px;height:157px;border-radius:5px;box-shadow:0 1px 2px #2b241a1f,0 10px 22px -12px #2b241a66;transition:transform .18s}
.shelf-card span{font:500 12px/1.2 var(--sans);color:var(--muted)}
.shelf-card:has(input:checked) canvas{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--ink),0 10px 22px -12px #2b241a66}
.shelf-card:has(input:checked) span{color:var(--ink)}
.shelf-card:has(input:focus-visible) canvas{outline:2px solid var(--ink);outline-offset:6px}
@media(min-width:761px){.shelf-card{width:140px}.shelf-card canvas{width:140px;height:196px}.card-shelf{gap:16px}}

.card-form{display:grid;gap:14px}
.card-form fieldset{border:0;padding:0;margin:0;min-width:0}
.card-form legend,.card-field{font:500 14px/1.3 var(--sans);color:var(--muted)}
.card-form legend{margin-bottom:6px}
.date-fields,.sign-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.card-field{display:grid;gap:5px}
.card-form select,.card-form input[type=text],.card-form textarea{width:100%;min-height:44px;padding:9px 12px;border:1px solid var(--line);border-radius:12px;background:var(--white);color:var(--ink);font:400 16px/1.4 var(--sans)}
.card-form textarea{resize:vertical;min-height:64px}
.card-form select:focus-visible,.card-form input:focus-visible,.card-form textarea:focus-visible,.card-form .pill:focus-visible,.card-form .pill:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:3px}
/* The suggested lines and the P.S.: one row you swipe. */
.pill-row.card-lines{margin-top:-6px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.card-lines::-webkit-scrollbar{display:none}
.card-lines:empty{display:none}
.cards-main .card-lines .pill{flex:none;max-width:min(280px,80vw);min-height:44px;padding:8px 14px;font-size:13px;line-height:1.3;text-align:left;white-space:normal}
.card-ps-text{display:none;font-weight:400;color:var(--muted)}
.cards-main .pill[aria-pressed=true] .card-ps-text{display:inline;color:var(--paper)}
.pill-row{display:flex;flex-wrap:wrap;gap:8px}
/* Customise: closed on the main path, the whole editor inside it. */
.card-customise{display:grid;gap:14px}
.card-customise summary{list-style:none;width:max-content}
.card-customise summary::-webkit-details-marker{display:none}
.card-customise summary::before{content:'+';font-size:16px;line-height:1}
.card-customise[open] summary::before{content:'\2212'}
.customise-body{display:grid;gap:14px}
.customise-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:end}
.sticker-row{display:flex;flex-wrap:wrap;gap:4px}
.sticker-button{display:grid;place-items:center;width:52px;height:52px;padding:0;border:1px solid var(--line);border-radius:12px;background:var(--white);cursor:pointer;-webkit-appearance:none;appearance:none}
.sticker-button canvas{width:40px;height:40px}
.sticker-button:hover{background:var(--butter)}
.sticker-button:disabled{opacity:.45;cursor:default}
.sticker-button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.card-actions{display:flex;flex-wrap:wrap;gap:10px}
.card-status{margin:0;min-height:1.4em;font-size:14px;color:var(--ink);overflow-wrap:anywhere}
.card-note{margin:0;font-size:13px;line-height:1.5;color:var(--muted)}
.card-note:empty{display:none}

.cards-main .pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 16px;border:1px solid var(--line);border-radius:999px;background:var(--white);color:var(--ink);font:500 14px/1 var(--sans);text-decoration:none;cursor:pointer;-webkit-appearance:none;appearance:none}
.cards-main .pill:hover{background:var(--butter)}
.cards-main .pill:disabled{opacity:.55;cursor:progress}
.cards-main .pill-ink,.cards-main .pill-ink:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.cards-main .pill-small{min-height:44px;padding:9px 14px;font-size:13px}
.cards-main .pill[hidden]{display:none}
.pill-choice{position:relative}
.pill-choice input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.pill-choice .swatch{width:14px;height:14px;border-radius:50%;border:1px solid #2b241a33;flex:none}
.cards-main .pill-choice:has(input:checked){background:var(--ink);color:var(--paper);border-color:var(--ink)}
.cards-main .pill-choice:has(input:checked) .swatch{border-color:#fff9e8aa}
/* The card colours: a round 44px target each, the paper inside it. */
.swatch-row{display:flex;flex-wrap:wrap;gap:0}
@media(min-width:420px){.swatch-row{gap:6px}}
.swatch-choice{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;cursor:pointer}
.swatch-choice input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.swatch-dot{width:30px;height:30px;border-radius:50%;border:1px solid #2b241a33;transition:transform .18s}
.swatch-choice:hover .swatch-dot{transform:scale(1.08)}
.swatch-choice:has(input:checked){box-shadow:inset 0 0 0 2px var(--ink)}
.swatch-choice:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:2px}

/* The folded card. Closed, one panel: the front. Open, the cover swings left
   on its hinge and both inside pages lie flat, side by side. --p is the width
   of one panel; the page sets it from the room it has. */
.card-preview{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0;position:sticky;top:16px}
/* On a phone the preview sits under the shelf, and while the sender is
   customising it stays at the top so the edit is in view. */
@media(max-width:760px){.card-preview{position:static}.cards-maker[data-customising=true] .card-preview{position:sticky;top:0;z-index:4;padding:8px 0;background:var(--paper)}}
.card-stage{display:flex;justify-content:center;width:100%;max-width:672px}
.card-book{position:relative;--p:336px;width:var(--p);height:calc(var(--p) * 7 / 5);perspective:2400px;transition:width .95s cubic-bezier(.3,.8,.25,1),height .95s cubic-bezier(.3,.8,.25,1)}
.card-book[data-open=true]{width:calc(var(--p) * 2)}
.card-page,.card-cover{position:absolute;top:0;right:0;width:var(--p);height:100%}
/* Paper bends at the fold and is cut at the other three edges, so only the
   outer corners are round and the two halves meet flush. The inside left is
   mirrored inside the cover, so its own left corners are the outer ones. The
   drop shadow pulls in by a pixel, so no halo shows in the gutter. */
.card-page canvas,.card-cover canvas{position:absolute;inset:0;width:100%;height:100%;box-shadow:0 1px 2px -1px #2b241a1f,0 14px 34px -16px #2b241a66}
.card-front,.card-inside-right{border-radius:0 6px 6px 0}
.card-inside-left{border-radius:6px 0 0 6px}
/* The crease: a gutter that darkens into the fold and one hairline on it, so
   the open card reads as one sheet bent in the middle. */
.card-inside-right{box-shadow:0 1px 2px -1px #2b241a1f,0 14px 34px -16px #2b241a66,inset 16px 0 24px -18px #2b241a4d,inset 1px 0 0 #2b241a24}
.card-cover{transform-origin:0 50%;transform-style:preserve-3d;transition:transform .95s cubic-bezier(.3,.8,.25,1)}
.card-book[data-open=true] .card-cover{transform:rotateY(-180deg)}
/* Each face of the cover shows for its half of the swing: the front until the
   hinge passes the middle, the inside left after it. WebKit paints a hidden
   back face on the closed card otherwise. */
.card-front{backface-visibility:hidden;transition:visibility 0s .475s}
.card-book[data-open=true] .card-front{visibility:hidden}
.card-inside-left{transform:rotateY(180deg);backface-visibility:hidden;visibility:hidden;transition:visibility 0s .475s;box-shadow:0 1px 2px -1px #2b241a1f,0 14px 34px -16px #2b241a66,inset -16px 0 24px -18px #2b241a4d,inset -1px 0 0 #2b241a24}
.card-book[data-open=true] .card-inside-left{visibility:visible}
.card-book[role=button]{cursor:pointer}
.card-book:focus-visible{outline:2px solid var(--ink);outline-offset:6px;border-radius:6px}
@media(prefers-reduced-motion:reduce){.card-book,.card-cover,.card-front,.card-inside-left{transition:none}}

/* The editor on the preview. The outline and its corner handles sit over
   the book in the book's own plane; the handles are 44px targets round a
   small dot. The toolbar lives under the card. */
.card-book{-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
.card-book[data-editing=true]{touch-action:none}
.card-edit{position:absolute;inset:0;z-index:3;pointer-events:none}
.card-edit-box{position:absolute;display:none;border:1.5px solid var(--ink);outline:1.5px solid #fffdf5cc;outline-offset:-3px;border-radius:3px}
.card-edit[data-on=true] .card-edit-box{display:block}
/* The guides a dragged layer snaps to. */
.card-edit-guide{position:absolute;display:none;background:#8a4d63;pointer-events:none}
.card-edit-guide[data-axis=x]{top:0;height:100%;width:1px;margin-left:-.5px}
.card-edit-guide[data-axis=y]{left:0;width:100%;height:1px;margin-top:-.5px}
.card-edit-guide[data-on=true]{display:block}
.card-edit-handle{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;padding:0;border:0;background:transparent;pointer-events:auto;display:grid;place-items:center;cursor:nwse-resize;-webkit-appearance:none;appearance:none}
.card-edit-handle::after{content:'';width:13px;height:13px;border-radius:50%;background:var(--white);border:1.5px solid var(--ink);box-shadow:0 1px 3px #2b241a55}
.card-edit-handle[data-corner=tl]{left:0;top:0}
.card-edit-handle[data-corner=tr]{left:100%;top:0;cursor:nesw-resize}
.card-edit-handle[data-corner=bl]{left:0;top:100%;cursor:nesw-resize}
.card-edit-handle[data-corner=br]{left:100%;top:100%}
.card-edit-handle:active{transform:none}
.card-tools{display:grid;gap:10px;width:100%;max-width:672px;padding:10px 12px;border:1px solid var(--line);border-radius:16px;background:var(--white);box-shadow:0 12px 30px -20px #2b241a66}
.card-tools[data-selected=false] .tools-layer,.card-tools[data-kind=qr] .tools-text,.card-tools[data-kind=sticker] .tools-text{display:none}
.card-tools[data-selected=true] .tools-hint{display:none}
.tools-hint{margin:0;font:500 14px/1.4 var(--sans);color:var(--muted)}
.tools-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.card-tools textarea{width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);font:400 16px/1.4 var(--sans);resize:vertical}
.card-tools select{min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);font:400 15px/1.3 var(--sans)}
.cards-main .pill-square{width:44px;min-width:44px;padding:0;font-size:18px}
.tools-italic{font-style:italic;font-family:var(--sans);font-weight:600}
.tools-size{min-width:38px;text-align:center;font:600 14px/1 var(--sans);font-variant-numeric:tabular-nums}
.cards-main .pill[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.tools-inks{gap:2px}
.tools-ink{position:relative;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;-webkit-appearance:none;appearance:none}
.tools-ink-dot{width:26px;height:26px;border-radius:50%;border:1px solid #2b241a33;transition:transform .18s}
.tools-ink:hover .tools-ink-dot{transform:scale(1.08)}
.tools-ink[aria-pressed=true]{box-shadow:inset 0 0 0 2px var(--ink)}
.tools-ink:focus-visible,.card-tools .pill:focus-visible,.card-tools textarea:focus-visible,.card-tools select:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.tools-actions{padding-top:2px}

/* The recipient view: the homepage envelope's holder, then the card. */
.cards-envelope .cards-lead{margin-bottom:.4rem}
.envelope-stage{display:flex;justify-content:center;padding:8px 0}
.envelope-stage .result-holder{width:100%;max-width:672px;cursor:pointer}
.envelope-stage .result-scratch{display:block;background:none;box-shadow:none;border-radius:0;overflow:visible;padding:8px 0}
.envelope-stage .scratch-values{display:block;width:100%;min-height:0;height:auto;padding:0;margin:0;background:none}
.cards-envelope[data-state=open] .result-holder{cursor:auto}
.envelope-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:14px}
.cards-envelope .card-status,.cards-envelope .card-note{text-align:center}

#audio-status{margin-top:28px}
.cards-footer{max-width:980px;margin:0 auto;padding:0 22px 28px;display:flex;gap:16px;font-size:13px;color:var(--muted)}
@media(max-width:400px){.cards-main,.cards-footer{padding-inline:16px}.card-shelf-wrap{margin-inline:-16px;padding-inline:16px}}