/* Your card on the Plan tab: the card, star stage, survey and guide from Cherie's wallet (References/cherie-wallet/wallet.css). */
:root{--glass-bg:rgba(255,255,255,.58);--glass-edge:rgba(14,22,48,.09)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--glass-bg:rgba(255,255,255,.06);--glass-edge:rgba(255,255,255,.14)}}
:root[data-theme="dark"]{--glass-bg:rgba(255,255,255,.06);--glass-edge:rgba(255,255,255,.14)}
.card-stage{--glass:var(--glass-bg);--glass-line:var(--glass-edge);position:relative;isolation:isolate;max-width:1040px;margin:18px auto 0;min-height:610px;display:flex;flex-direction:column;align-items:center;color:var(--ink)}
.star-sky{position:absolute;top:-48px;left:var(--stage-left,calc(50% - 50vw));width:100vw;height:calc(100% + 168px);pointer-events:none;z-index:0;-webkit-mask:linear-gradient(#000 calc(100% - 170px),transparent);mask:linear-gradient(#000 calc(100% - 170px),transparent)}
.sky-front{z-index:2}
.card-slot{position:relative;z-index:1;margin-top:200px;width:min(460px,calc(100% - 64px));aspect-ratio:1.586;perspective:1500px;touch-action:pan-y;cursor:grab;container-type:inline-size;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.card-slot.dragging{cursor:grabbing}
.metal-card{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform;border-radius:5.2cqw;outline:none;--lx:30%;--ly:20%;--holo:0deg;--sheen:-120%}
.metal-card:focus-visible{box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--gold)}
.metal-card[data-side=front] .back,.metal-card[data-side=back] .front{visibility:hidden}
.face{position:absolute;inset:0;border-radius:inherit;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;font-family:"Barlow Semi Condensed",var(--body);background-size:100% 100%;background-repeat:no-repeat;box-shadow:inset 0 0 0 1px rgba(227,198,139,.38),inset 0 1px 0 rgba(255,255,255,.22),0 2.5cqw 8cqw -2.5cqw rgba(14,22,48,.5),0 0 0 .5px rgba(0,0,0,.35)}
/* Joseph's two designs (Design 1 and Design 2 PNGs): each face is its artwork with the printed text taken out, under a light that follows the tilt. */
.metal-card[data-design=navy] .front{background-image:radial-gradient(90% 70% at var(--lx) var(--ly),rgba(255,248,236,.16),rgba(255,255,255,0) 60%),url('../assets/card-navy-front.webp')}
.metal-card[data-design=navy] .back{background-image:radial-gradient(90% 70% at var(--lx) var(--ly),rgba(255,248,236,.16),rgba(255,255,255,0) 60%),url('../assets/card-navy-back.webp')}
.metal-card[data-design=bloom] .front{background-image:radial-gradient(90% 70% at var(--lx) var(--ly),rgba(255,255,255,.22),rgba(255,255,255,0) 60%),url('../assets/card-bloom-front.webp')}
.metal-card[data-design=bloom] .back{background-image:radial-gradient(90% 70% at var(--lx) var(--ly),rgba(255,255,255,.22),rgba(255,255,255,0) 60%),url('../assets/card-bloom-back.webp')}
/* Print colours and positions per design, measured from the PNGs (card width = 100cqw). */
.metal-card[data-design=navy]{--grad:linear-gradient(180deg,#ffffff 0%,#f4f5f8 45%,#cdd2db 72%,#f1f2f5 100%);--lift:drop-shadow(0 .14cqw 0 rgba(0,0,0,.55)) drop-shadow(0 .3cqw .4cqw rgba(0,0,0,.3));--label:rgba(236,240,248,.86);--mark:rgba(255,255,255,.85);--dx:0cqw;--nf:6.5cqw;--nt:28.03cqw;--vf:3.87cqw;--vb:15.84cqw;--gs:1.42cqw;--mf:4.52cqw;--mt:52.53cqw;--sp:.25em;--mls:.185em;--c1:19.08cqw;--c2:19.08cqw;--c3:15.02cqw;--sign-top:21.38cqw;--sign-h:10.09cqw;--chx:5.81cqw;--chy:15.02cqw;--chh:10.96cqw;--panel:linear-gradient(100deg,#f8f0de,#f1e5ca);--panel-line:rgba(255,255,255,.35)}
.metal-card[data-design=bloom]{--grad:linear-gradient(180deg,#2a3662 0%,#1b2448 60%,#141b38 100%);--lift:drop-shadow(0 .12cqw 0 rgba(255,255,255,.7));--label:#27304f;--mark:rgba(28,37,70,.8);--dx:-.77cqw;--nf:6.2cqw;--nt:27.1cqw;--vf:4.04cqw;--vb:17.47cqw;--gs:1.16cqw;--mf:4.8cqw;--mt:50.08cqw;--sp:.35em;--mls:.17em;--c1:18.64cqw;--c2:19.41cqw;--c3:14.69cqw;--sign-top:22.15cqw;--sign-h:9.43cqw;--chx:4.93cqw;--chy:14.58cqw;--chh:10.42cqw;--panel:linear-gradient(100deg,#f6efe2,#efe5d3);--panel-line:rgba(120,100,70,.28)}
.face::after{content:"";position:absolute;inset:-20%;background:conic-gradient(from var(--holo) at 50% 50%,rgba(255,255,255,0) 0deg,rgba(214,226,255,.16) 40deg,rgba(255,255,255,0) 90deg,rgba(255,226,180,.12) 170deg,rgba(255,255,255,0) 230deg,rgba(214,226,255,.12) 300deg,rgba(255,255,255,0) 360deg);mix-blend-mode:overlay;pointer-events:none}
.front>*,.back>*{position:absolute;z-index:1;margin:0}
.cc-row{display:flex;align-items:center}
.cc-mid{left:var(--chx);top:var(--chy);height:var(--chh);gap:4cqw}
.cc-chip{width:12.83cqw;height:var(--chh);filter:drop-shadow(0 .3cqw .4cqw rgba(0,0,0,.4))}
.cc-wave{width:5.4cqw;height:5.4cqw;color:var(--mark)}
.emboss{color:#f4f5f8;filter:var(--lift);background:var(--grad);-webkit-background-clip:text;background-clip:text}
@supports (-webkit-background-clip:text){.emboss{-webkit-text-fill-color:transparent}}
.cc-number{left:calc(6.4cqw + var(--dx));top:var(--nt);font-size:var(--nf);font-weight:400;letter-spacing:.1em;white-space:nowrap;line-height:1}
.cc-details{left:calc(6.4cqw + var(--dx));bottom:var(--vb);display:grid;grid-template-columns:minmax(var(--c1),max-content) minmax(var(--c2),max-content) max-content;align-items:end}
.cc-details div{display:flex;flex-direction:column;gap:var(--gs);min-width:max-content;padding-right:2.4cqw}
.cc-details dt{font:500 2.3cqw/1.12 "Barlow Semi Condensed",var(--body);letter-spacing:.1em;color:var(--label)}
.cc-details dd{margin:0;font-size:var(--vf);line-height:1;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.cc-foot{left:calc(6.4cqw + var(--dx));top:var(--mt)}
.cc-number .sp{margin-right:var(--sp)}
.cc-name{margin:0;font-size:var(--mf);letter-spacing:var(--mls);line-height:1;white-space:nowrap}
.emboss .ch{display:inline-block;background:inherit;-webkit-background-clip:text;background-clip:text}
.emboss .ch.pop{animation:emboss-pop .42s cubic-bezier(.22,.8,.2,1) both}
@keyframes emboss-pop{from{opacity:0;transform:translateY(-.9cqw) scale(1.35);filter:blur(.8cqw)}to{opacity:1;transform:none;filter:none}}
.cc-details dd.rise{animation:value-rise .55s cubic-bezier(.22,.8,.2,1) both}
@keyframes value-rise{from{opacity:0;transform:translateY(1.4cqw);filter:blur(.6cqw)}to{opacity:1;transform:none;filter:none}}

/* Back: the design's own stripe and signature panel, Cherie's signature on it, and the silver flying dove below. */
.back{transform:rotateY(180deg)}
.cc-sign-row{inset:0}
.cc-sign{position:absolute;left:6.03cqw;top:var(--sign-top);width:64cqw;height:var(--sign-h);display:flex;align-items:center;padding-left:3.4cqw;border-radius:1.2cqw;background:repeating-linear-gradient(-55deg,rgba(255,255,255,0) 0 1.4cqw,rgba(255,255,255,.22) 1.4cqw 2.8cqw),var(--panel);box-shadow:inset 0 0 0 1px var(--panel-line),0 .25cqw .6cqw rgba(0,0,0,.18)}
.cc-wave-back{position:absolute;left:74cqw;top:calc(var(--sign-top) + var(--sign-h) / 2 - 2.7cqw)}
.cc-sign span{font:400 8.4cqw/1 "Mrs Saint Delafield","Snell Roundhand",cursive;color:#1c2546;transform:translateY(.6cqw) rotate(-4deg);transform-origin:left center;white-space:nowrap;letter-spacing:.01em}
.cc-holo{position:absolute;left:6.03cqw;top:35cqw;width:13.5cqw;aspect-ratio:1.5;border-radius:1.4cqw;display:grid;place-items:center;background:conic-gradient(from calc(var(--holo) * 2),#dfe6ee,#f6f7fa,#b9c2cf,#e9eef5,#c7ced9,#dfe6ee);box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),0 .3cqw .6cqw rgba(0,0,0,.35);overflow:hidden;position:relative}
.cc-holo::after{content:"";position:absolute;inset:0;background:linear-gradient(calc(var(--holo) * 3 + 110deg),rgba(255,140,200,.28),rgba(140,220,255,.28) 35%,rgba(190,255,200,.22) 60%,rgba(255,230,150,.26));mix-blend-mode:color;pointer-events:none}
.cc-dove{width:78%;aspect-ratio:64/44;background:linear-gradient(calc(var(--holo) * -2 + 30deg),#ffffff 0%,#8f99a8 30%,#f4f6f9 52%,#7c8696 76%,#ffffff 100%);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 44'%3E%3Cpath d='M3 4c10 1 18 8 23 18 2-10 8-18 20-22-5 6-8 13-8 21 3-1 6-1 8 0 3-3 7-4 10-3l5 3-5 1c0 6-5 11-13 13-7 2-15 1-21-2L8 40l7-9C9 24 5 15 3 4z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 44'%3E%3Cpath d='M3 4c10 1 18 8 23 18 2-10 8-18 20-22-5 6-8 13-8 21 3-1 6-1 8 0 3-3 7-4 10-3l5 3-5 1c0 6-5 11-13 13-7 2-15 1-21-2L8 40l7-9C9 24 5 15 3 4z'/%3E%3C/svg%3E") center/contain no-repeat;filter:drop-shadow(0 0 .2cqw rgba(0,0,0,.3))}

/* Glass chrome over the stars (ref glass recipe: white 7% fill, 15% hairline, 20px blur). */
.stage-tools{position:absolute;z-index:3;top:22px;right:22px;display:flex;gap:8px}
.glass-btn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--ink-2);background:var(--glass);border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);transition:background .2s,color .2s}
.glass-btn svg{width:18px;height:18px}
.glass-btn:hover,.glass-btn[aria-pressed=true]{background:var(--paper-2);color:var(--ink)}
.glass-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.glass-btn .i-play,.glass-btn[aria-pressed=true] .i-pause{display:none}
.glass-btn[aria-pressed=true] .i-play{display:inline}
.stage-hint{position:absolute;z-index:3;top:34px;left:30px;margin:0;font:500 11px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);transition:opacity .6s}
.stage-hint.gone{opacity:0}
/* Opening form: a dialog, then the card fills itself in. */
.pref-dialog{width:min(560px,calc(100% - 32px));max-height:calc(100dvh - 32px);border:0;border-radius:20px;padding:0;background:var(--paper-2);color:var(--ink);box-shadow:0 40px 100px -30px rgba(6,9,20,.7),0 0 0 1px var(--rule)}
.pref-dialog::backdrop{background:rgba(8,12,26,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.pref-dialog form{padding:30px 32px 26px}
.dialog-kicker{margin:0;font:500 11px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.dialog-title{margin:10px 0 0;font:300 clamp(28px,4vw,36px)/1.1 var(--display);letter-spacing:-.01em}
.dialog-title em{font-style:italic;color:var(--gold)}
.dialog-fields{display:grid;grid-template-columns:1fr 1fr;gap:22px 28px;margin-top:26px}
.dialog-note{margin:10px 0 0;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.plan-fields{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 22px;margin-top:20px}
.plan-fields .pref-field{justify-content:flex-end}
.plan-fields .pref-field input{font-size:20px}
.pref-field{display:flex;flex-direction:column;gap:8px;min-width:0}
.pref-field>span{font-size:12px;letter-spacing:.02em;color:var(--ink-2)}
.pref-field input,.pref-field select{display:block;width:100%;min-width:0;min-height:44px;font:300 22px/1.25 var(--display);background:transparent;color:var(--ink);border:0;border-bottom:1px solid var(--rule);border-radius:0;padding:0 18px 6px 0}
.pref-field input::placeholder{color:var(--ink-3);opacity:1}
.pref-field select{cursor:pointer}
.pref-field input:focus,.pref-field select:focus{outline:none;border-bottom-color:var(--gold);box-shadow:0 1px 0 var(--gold)}
.pref-field input[aria-invalid=true]{border-bottom-color:var(--no)}
.card-count{display:flex;gap:8px;margin-top:24px}
.card-count button{border:1px solid var(--rule);border-radius:999px;color:var(--ink-2);background:transparent;padding:9px 16px;min-height:44px;font-size:12.5px;cursor:pointer;white-space:nowrap}
.card-count button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--paper-2)}
.card-count button span{display:block;font-size:11px;line-height:1.2;opacity:.75}
.field-error{font-size:13px;line-height:1.6;color:var(--no);margin:14px 0 0}
.pref-dialog .dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:26px}
.make-btn,.ghost-btn{min-height:44px;border-radius:999px;padding:0 22px;font:500 14px var(--body);cursor:pointer}
.make-btn{background:var(--ink);color:var(--paper-2);border:1px solid var(--ink)}
.make-btn:hover{filter:brightness(1.06)}
.ghost-btn{background:transparent;color:var(--ink-2);border:1px solid var(--rule)}
.make-btn:focus-visible,.ghost-btn:focus-visible,.card-count button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* The guide sits right under the card and follows Cherie's picks. */
.hero-guide{position:relative;z-index:3;max-width:1040px;margin:0 auto}
.hero-guide .guide-heading{margin:0;font:300 clamp(28px,3vw,40px)/1.12 var(--display);letter-spacing:-.02em;font-variation-settings:"opsz" 144;color:var(--ink)}
.hero-guide .guide-heading em{font-style:italic;color:var(--gold)}
.guide-total{display:block;margin:8px 0 0;font:400 14px/1.5 var(--body);letter-spacing:0;color:var(--ink-2)}

:root[data-view="plan"] body{overflow-x:clip}
#month{padding-top:0}
/* The card keeps its printed lettering when the page is in Garamond. */
:root .metal-card,:root .metal-card *{font-size-adjust:none}
.fac-title{margin:48px 0 0;font:400 22px/1.2 var(--display);color:var(--ink)}

/* The name replaces Cherie's "For Cherie" line. */
.name-field{display:flex;flex-direction:column;gap:6px}
.name-field input{display:block;width:100%;min-width:0;min-height:44px;font:300 22px/1.25 var(--display);background:transparent;color:var(--ink);border:0;border-bottom:1px solid var(--rule);border-radius:0;padding:0 18px 6px 0}
.name-field input:focus{outline:none;border-bottom-color:var(--gold);box-shadow:0 1px 0 var(--gold)}
.name-field input[aria-invalid=true]{border-bottom-color:var(--no)}
.name-field + .dialog-title{margin-top:20px}

/* Four cards is marked optimal. Choosing a count plays the site's batik motif once. */
:root{--batik-ink:#dcc28f}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--batik-ink:#7a5d24}}
:root[data-theme="dark"]{--batik-ink:#7a5d24}
.card-count button{position:relative;isolation:isolate;overflow:hidden}
.card-count button.is-optimal{border-color:var(--gold);color:var(--gold)}
.card-count button.is-optimal[aria-pressed=true]{border-color:var(--ink);color:var(--paper-2)}
.card-count button::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--batik-ink);opacity:0;-webkit-mask:var(--batik-tile) 0 0/42px 42px;mask:var(--batik-tile) 0 0/42px 42px}
.card-count button::after{content:"";position:absolute;left:var(--x,50%);top:var(--y,50%);width:92px;height:92px;margin:-46px 0 0 -46px;z-index:-1;background:var(--batik-ink);opacity:0;pointer-events:none;-webkit-mask:var(--batik-flower) center/contain no-repeat;mask:var(--batik-flower) center/contain no-repeat}
.card-count{--batik-tile:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M40 3C57 17 57 27 40 40C23 27 23 17 40 3ZM77 40C63 57 53 57 40 40C53 23 63 23 77 40ZM40 77C23 63 23 53 40 40C57 53 57 63 40 77ZM3 40C17 23 27 23 40 40C27 57 17 57 3 40Z'/%3E%3Ccircle cx='40' cy='40' r='3'/%3E%3Ccircle cx='0' cy='0' r='6'/%3E%3Ccircle cx='80' cy='0' r='6'/%3E%3Ccircle cx='0' cy='80' r='6'/%3E%3Ccircle cx='80' cy='80' r='6'/%3E%3C/g%3E%3C/svg%3E");--batik-flower:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M40 3C57 17 57 27 40 40C23 27 23 17 40 3ZM77 40C63 57 53 57 40 40C53 23 63 23 77 40ZM40 77C23 63 23 53 40 40C57 53 57 63 40 77ZM3 40C17 23 27 23 40 40C27 57 17 57 3 40Z'/%3E%3Cpath d='M40 11C50 22 50 27 40 34C30 27 30 22 40 11ZM69 40C58 50 53 50 46 40C53 30 58 30 69 40ZM40 69C30 58 30 53 40 46C50 53 50 58 40 69ZM11 40C22 30 27 30 34 40C27 50 22 50 11 40Z'/%3E%3Ccircle cx='40' cy='40' r='3'/%3E%3C/g%3E%3C/svg%3E")}
@media(prefers-reduced-motion:no-preference){
.card-count button.picked::before{animation:batik-spread .75s cubic-bezier(.22,.8,.2,1) both}
.card-count button.picked::after{animation:batik-bloom .85s cubic-bezier(.22,.8,.2,1) both}
}
@keyframes batik-spread{from{opacity:.95;clip-path:circle(0 at var(--x,50%) var(--y,50%))}70%{opacity:.7}to{opacity:0;clip-path:circle(150% at var(--x,50%) var(--y,50%))}}
@keyframes batik-bloom{0%{opacity:1;transform:scale(.2) rotate(-45deg)}70%{opacity:.8}100%{opacity:0;transform:scale(1.5) rotate(0)}}

@media(max-width:760px){.fac-grid .wcard{display:block}}
@media(max-width:600px){
.card-stage{min-height:450px;margin-top:14px}
.card-slot{margin-top:160px;width:calc(100% - 40px)}
.stage-tools{top:14px;right:14px;gap:6px}
.stage-hint{display:none}
.pref-dialog form{padding:24px 20px 20px}
.dialog-fields{grid-template-columns:1fr;gap:16px}
.plan-fields{grid-template-columns:1fr 1fr;gap:10px 16px;margin-top:14px}
.plan-fields .pref-field{gap:2px}
.pref-field input,.pref-field select,.name-field input{font:400 17px/1.3 var(--body)}
}
@media(prefers-reduced-motion:no-preference){.pref-dialog[open]{animation:dialog-in .52s cubic-bezier(.22,.8,.2,1)}.pref-dialog[open]::backdrop{animation:fade-in .4s ease-out}.pref-dialog.closing{animation:dialog-out .24s cubic-bezier(.4,0,1,1) forwards}.pref-dialog.closing::backdrop{animation:fade-out .24s ease-in forwards}}
@keyframes dialog-in{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes dialog-out{to{opacity:0;transform:translateY(8px) scale(.98)}}
@keyframes fade-in{from{opacity:0}}
@keyframes fade-out{to{opacity:0}}
@media(prefers-reduced-motion:reduce){.emboss .ch.pop,.cc-details dd.rise{animation:none}}