/* Paper card feedback: modeless, brief, and kept above the navigation. */
.card-moment[hidden]{display:none!important}
.card-moment{--cm-color:#506986;--cm-light:#e8edf4;position:fixed;z-index:75;right:24px;bottom:112px;width:400px;max-width:calc(100vw - 32px);box-sizing:border-box;color:#27342e;background:linear-gradient(145deg,#fff,#f2f4f6);border:1px solid #dfe4e8;border-radius:20px;padding:16px 23px 22px;box-shadow:0 15px 60px #2333291b;isolation:isolate}
.card-moment::before{content:"";position:absolute;inset:7px;border:1px solid #ffffffb0;border-radius:14px;pointer-events:none;z-index:-1}
.card-moment[data-card=period]{--cm-color:#aa6676;--cm-light:#f4e3eb;background:linear-gradient(145deg,#fff,#f9eff3);border-color:#eadde3}
.card-moment[data-card=waiver]{--cm-color:#967b48;--cm-light:#f4ecda;background:linear-gradient(145deg,#fff,#f8f3e7);border-color:#e8dfcc}
.card-moment .cm-top{display:flex;justify-content:space-between;align-items:center;gap:15px}
.card-moment .cm-label{font-size:10px;letter-spacing:.06em;color:var(--cm-color)}
.card-moment .cm-close{display:grid;place-items:center;background:#ffffff65;border:1px solid #dfe3dd;width:32px;height:32px;flex:none;border-radius:50%;color:#6d7770;padding:7px;cursor:pointer;touch-action:manipulation}
.card-moment .cm-close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round}
.card-moment .cm-close:focus-visible{outline:2px solid var(--cm-color);outline-offset:3px}
.card-moment .cm-art{height:110px;margin-top:2px}
.card-moment .cm-art>svg{display:none;width:220px;height:110px;margin:0 auto;color:var(--cm-color);overflow:visible}
.card-moment[data-card=period] .cm-period,.card-moment[data-card=leave] .cm-leave,.card-moment[data-card=waiver] .cm-waiver{display:block}
.card-moment .cm-line{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.card-moment .cm-faint{opacity:.24}
.card-moment .cm-copy{text-align:center}
.card-moment .cm-title{font-size:20px;font-weight:500;letter-spacing:-.025em;line-height:1.65;margin:0;text-wrap:balance}
.card-moment .cm-subtitle{font-size:12px;line-height:1.9;color:#6d7770;margin:6px 0 0;text-wrap:balance}
.card-moment .cm-bloom{transform-origin:120px 65px}
.card-moment .cm-arc{stroke-dasharray:160;stroke-dashoffset:0}
.card-moment .cm-halo{fill:var(--cm-light);opacity:.6;transform-origin:120px 65px}
.card-moment .cm-sheet{transform-origin:120px 67px}
.card-moment .cm-lines{stroke-dasharray:100;stroke-dashoffset:0}
.card-moment .cm-fold{fill:var(--cm-light);stroke:currentColor;stroke-width:1.1;transform-origin:168px 34px}
.card-moment .cm-seal{transform-origin:120px 65px}
.card-moment .cm-check{stroke-dasharray:50;stroke-dashoffset:0;stroke-width:2}
.card-moment .cm-sparks{opacity:0}
.card-moment.cm-playing{animation:cm-appear .35s ease both}
.card-moment.cm-leaving{animation:cm-exit .24s ease both}
.card-moment.cm-playing .cm-bloom{animation:cm-bloom 2.2s cubic-bezier(.2,.65,.2,1) both}
.card-moment.cm-playing .cm-arc{animation:cm-arc-draw 1.65s ease both}
.card-moment.cm-playing .cm-arc.cm-second{animation-delay:.18s}
.card-moment.cm-playing .cm-halo{animation:cm-halo 2.2s ease both}
.card-moment.cm-playing .cm-sheet{animation:cm-unfold 2.2s cubic-bezier(.22,.65,.2,1) both}
.card-moment.cm-playing .cm-fold{animation:cm-fold-away 1.35s .2s ease both}
.card-moment.cm-playing .cm-lines{animation:cm-line-open 1.3s .45s ease both}
.card-moment.cm-playing .cm-seal{animation:cm-stamp 2.2s ease both}
.card-moment.cm-playing .cm-check{animation:cm-check-draw 1s .75s ease both}
.card-moment.cm-playing .cm-sparks{animation:cm-stamp-light 1.4s .55s ease both}
@keyframes cm-appear{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@keyframes cm-exit{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(4px)}}
@keyframes cm-bloom{0%{opacity:0;transform:translateY(8px) scale(.8)}38%{opacity:1}78%{transform:translateY(0) scale(1.04)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes cm-arc-draw{from{stroke-dashoffset:160}to{stroke-dashoffset:0}}
@keyframes cm-halo{0%{opacity:0;transform:scale(.58)}75%{opacity:.65;transform:scale(1.06)}100%{opacity:.6;transform:scale(1)}}
@keyframes cm-unfold{0%{opacity:0;transform:translateY(8px) scaleX(.32) skewY(-5deg)}24%{opacity:1}67%{transform:translateY(0) scaleX(1.025) skewY(0)}100%{opacity:1;transform:translateY(0) scaleX(1) skewY(0)}}
@keyframes cm-fold-away{0%{opacity:.9;transform:scaleX(1)}100%{opacity:.18;transform:scaleX(.12)}}
@keyframes cm-line-open{from{stroke-dashoffset:100;opacity:0}to{stroke-dashoffset:0;opacity:1}}
@keyframes cm-stamp{0%{opacity:0;transform:translateY(-12px) scale(1.15)}34%{opacity:1;transform:translateY(1px) scale(.975)}56%{transform:translateY(0) scale(1.015)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes cm-check-draw{from{stroke-dashoffset:50}to{stroke-dashoffset:0}}
@keyframes cm-stamp-light{0%{opacity:0}38%{opacity:.55}100%{opacity:0}}
@media(max-width:600px){.card-moment{right:16px;left:16px;width:auto;max-width:none;bottom:calc(102px + env(safe-area-inset-bottom,0px));padding:14px 18px 19px;border-radius:17px;max-height:calc(100dvh - 130px);overflow:auto}.card-moment .cm-title{font-size:18px}.card-moment .cm-subtitle{font-size:11px}.card-moment .cm-art,.card-moment .cm-art>svg{height:100px}}
@media(prefers-reduced-motion:reduce){.card-moment,.card-moment *{animation:none!important;transition:none!important}.card-moment .cm-arc,.card-moment .cm-lines,.card-moment .cm-check{stroke-dashoffset:0!important}.card-moment .cm-bloom,.card-moment .cm-halo,.card-moment .cm-sheet,.card-moment .cm-seal{transform:none!important;opacity:1!important}.card-moment .cm-sparks{display:none}.card-moment .cm-fold{opacity:.18}}
