/* Wrappie — web calendar editor (/make) and the preview bar. Ported from design/web/v8/prototype/src.html
   ("make (editor)", "dialogs, drawers, sheets", editor v3/v6 overrides; container queries → media queries,
   absolute frame layers → fixed). Loaded after site.css, so tokens, buttons, tiles, the gift card and pills come
   from there. Editor = calm work screen (v6): serif titles, burgundy progress, ink primary buttons. */

/* ---- preview bar (viewer pages under /make/<id>/preview) ---- */
.prevbar{position:relative;z-index:5;background:var(--infoSoft);color:var(--info);display:flex;align-items:center;gap:10px;padding:10px 16px;font-size:14px;line-height:19px;border-radius:var(--r6);margin:12px 0 0}
.prevbar svg{width:18px;height:18px;flex:none}
.prevbar .sp{flex:1}
.prevbar a{font-weight:600;white-space:nowrap;text-decoration:underline;text-underline-offset:3px}

/* ---- page ---- */
body.make{background:var(--background) var(--grain,none)}
.M{min-height:100vh;display:flex;flex-direction:column}
.M .muted{color:var(--textSecondary)}
.M .small{font-size:14px;line-height:20px}
.M .loading{display:flex;justify-content:center;padding:120px 0}
.mtop{height:64px;display:flex;align-items:center;gap:10px}
.mtop .sp{flex:1}
.mtop .back{display:inline-flex;align-items:center;gap:4px;height:40px;padding:0 10px 0 4px;border-radius:10px;font:500 16px var(--font-ui)}
.mtop .back svg{width:20px;height:20px}
.mtop .back:hover,.mtop .tb:hover{background:#0000000a}
.mtop .tb{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 12px;border-radius:12px;font:500 15px var(--font-ui)}
.mtop .tb svg{width:19px;height:19px}
.mtop .tb .lbl{display:none}
@media (min-width:960px){.mtop .tb .lbl{display:inline}}
.M .wm .mk::before,.M .wm .mk::after{display:none}
.M .wm .mk{background:var(--burgundy);box-shadow:none;border-radius:2px;width:3px;height:20px}
.menuw{position:relative}
.menuw .menu{position:absolute;right:0;top:46px;z-index:20;background:var(--surface);border-radius:14px;box-shadow:var(--shadow-dialog);padding:6px;width:230px;animation:fade .15s}
.menuw .menu button{display:flex;width:100%;align-items:center;height:42px;padding:0 12px;border-radius:9px;font-size:15px;text-align:left}
.menuw .menu button:hover{background:var(--background)}
.menuw .menu .danger{color:var(--destructive)}
/* reset at element specificity so class rules (.btn 600 17px, .ty 13px, .swt 13px…) win, as on <a class="btn"> */
:where(.M) button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.M .btn{border:0;cursor:pointer}
.M .btn:disabled{cursor:default}
.btn.dangerplain{height:44px;padding:0 12px;color:var(--destructive);font-weight:500}
.btn .spin.w,.spin.w{width:18px;height:18px;border-color:#ffffff40;border-top-color:#fff}
.btn.grow{flex:1}
.offscreen{position:fixed;left:-9999px;top:0;opacity:0}

/* ---- home ---- */
.mcol{width:100%;max-width:640px;margin:0 auto;padding-bottom:48px}
.mcol.home h1{margin-top:8px;font-family:var(--font-editorial);font-weight:500;letter-spacing:-.012em}
.mcol.home .kick{margin:22px 0 8px}
.mcol .small{margin-top:20px}
.hrows{display:grid;gap:10px;margin-top:8px}
.hrow{display:flex;gap:14px;align-items:center;background:var(--surface);border-radius:var(--r6);padding:12px 16px 12px 12px;border:1px solid var(--separator)}
.hrow:hover{border-color:#BDB3AA}
.hrow .tl{width:54px;flex:none}
.hrow .hx{flex:1;min-width:0}
.hrow .who{font:500 22px/26px var(--font-editorial);letter-spacing:-.01em}
.hrow .st{font-size:14px;color:var(--textSecondary);margin-top:3px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.hrow .bar{margin-top:9px}
.hrow .chev{width:18px;height:18px;color:var(--textTertiary);margin-left:auto;flex:none}
.mcol.empty{text-align:center;padding-top:12px}
.mcol.empty h1{font:500 34px/38px var(--font-editorial);letter-spacing:-.012em;text-wrap:balance}
@media (min-width:960px){.mcol.empty h1{font-size:44px;line-height:48px}}
.mcol.empty>p.muted{font-size:17px;line-height:25px;margin:10px auto 0;max-width:30em}
.mcol.empty .ctas{display:flex;gap:10px;justify-content:center;margin-top:26px;flex-wrap:wrap}
.fan{position:relative;height:250px;margin:10px 0 18px}
.fan>div{position:absolute;left:50%;top:14px}
.fan .gc{--s:.5}
.fan .f1{transform:translateX(-112%) rotate(-9deg)}
.fan .f2{transform:translateX(12%) rotate(8deg)}
.fan .f3{top:0;transform:translateX(-50%)}
.fan .f3 .gc{--s:.56}

/* ---- create ---- */
.create{display:grid;gap:32px;padding:12px 0 48px}
@media (min-width:960px){.create{grid-template-columns:560px 1fr;gap:64px;align-items:start;padding-top:24px}}
.create h1{font:500 34px/40px var(--font-editorial);letter-spacing:-.012em;margin-bottom:20px}
.create .pv{display:none}
@media (min-width:960px){.create .pv{display:flex;justify-content:center;padding-top:20px}.create .pv .gc{--s:1.05;box-shadow:var(--shadow-gift-lg)}}
.create .go{margin-top:28px}
.gc .forl{position:absolute;left:calc(22px*var(--s));top:calc(22px*var(--s));font:italic 500 22px var(--font-editorial);color:var(--onWrap2);max-width:calc(68% - 30px)}
.gc .forl b{display:block;font:500 calc(30px*var(--s))/1.1 var(--font-editorial);letter-spacing:-.01em;color:var(--onWrap);margin-top:4px;font-style:normal}

/* fields */
.field{background:var(--surface);border-radius:var(--r-field);padding:10px 14px 12px;margin-bottom:10px;display:block;box-shadow:inset 0 0 0 1px var(--separator)}
.field:focus-within{box-shadow:inset 0 0 0 1.5px var(--ink)}
.field.bad{box-shadow:inset 0 0 0 1.5px var(--destructive)}
.field .lb{display:block;font:600 12px var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--textSecondary);margin-bottom:4px}
.field input,.field textarea{border:0;outline:none;background:transparent;width:100%;font:400 17px/23px var(--font-ui);resize:none;color:var(--textPrimary)}
.field input.big{font:500 30px/36px var(--font-editorial);letter-spacing:-.01em}
.field textarea.serif{font:400 20px/28px var(--font-editorial)}
.field .row2{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.field .cnt{font-size:12px;color:var(--textTertiary);white-space:nowrap}
.ferr{color:var(--destructive);font-size:14px;margin:-4px 2px 10px;display:flex;gap:6px;align-items:center}
.ferr svg{width:16px;height:16px;flex:none}
.M ::placeholder{color:#A8A099}
.sect{font:600 12px var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--textSecondary);margin:20px 0 10px}
.swatches{display:grid;grid-template-columns:repeat(4,minmax(0,76px));gap:12px;align-items:start} /* always one row of four, even with long German names; start: a <button> centres its content when stretched */
@media (max-width:370px){.swatches{column-gap:8px}}
.swt{min-width:0;text-align:center;hyphens:auto;font-size:13px;position:relative;display:block}
.swt .tl{width:100%;margin-bottom:6px;cursor:pointer}
.swt.on .tl{outline:2.5px solid var(--ink);outline-offset:2.5px}
.swt small{display:block;font-size:12px;color:var(--textSecondary);margin-top:1px}
.swt .star{position:absolute;right:5px;top:5px;width:20px;height:20px;border-radius:50%;background:#ffffffe0;color:var(--premium);display:flex;align-items:center;justify-content:center;z-index:2}
.swt .star svg{width:12px;height:12px}
.swwrap{margin-top:18px}

/* ---- editor ---- */
.mhead{padding:8px 0 0}
.mhead .kick{display:inline-flex;font:600 12px/1.2 var(--font-ui);letter-spacing:.2em;text-transform:uppercase;color:var(--burgundy);margin-bottom:14px}
.mhead h1{font:500 48px/1 var(--font-editorial);letter-spacing:-.012em;display:flex;gap:12px;align-items:center;flex-wrap:wrap;text-wrap:balance}
@media (min-width:960px){.mhead h1{font-size:68px}}
.mhead h1 .pill{font:600 13px var(--font-ui);letter-spacing:0}
.prog{display:flex;align-items:center;gap:12px;margin-top:14px;font-size:15px;color:var(--textSecondary)}
.prog .bar{max-width:520px}
.M .bar{height:8px;border-radius:4px;background:var(--surfaceSunken);overflow:hidden;flex:1}
.M .bar i{display:block;height:100%;width:0;background:var(--burgundy);border-radius:4px}
.M .bar.o i{background:var(--success)}
.egrid{display:grid;gap:24px;margin-top:20px;padding-bottom:120px}
@media (min-width:960px){.egrid{grid-template-columns:1fr 300px;gap:40px;padding-bottom:48px;align-items:start}}
.side{display:none}
@media (min-width:960px){.side{display:block;position:sticky;top:20px}}
.scard{background:var(--surface);border-radius:var(--r6);padding:20px;border:1px solid var(--separator)}
.scard+.scard{margin-top:14px}
.scard h3{font:500 22px/26px var(--font-editorial);display:flex;gap:8px;align-items:center}
.scard p{font-size:14px;line-height:20px;color:var(--textSecondary);margin-top:6px}
.scard p.url{text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scard .row{display:flex;align-items:center;gap:12px}
.scard .row .rx{flex:1}
.scard .row .tl{width:40px;cursor:default}
.scard .row .tl .n{font-size:18px;left:5px}
.scard .l,.sharem .l{font:600 14px var(--font-ui);display:inline-flex;margin-top:10px;text-decoration:underline;text-underline-offset:3px}
.scard .hint{font-size:14px}
.dock{position:sticky;bottom:0;background:var(--background);box-shadow:0 -1px 0 var(--separator);padding:12px var(--margin) 30px;margin:16px calc(-1*var(--margin)) 0;z-index:4}
@media (min-width:960px){.dock{display:none}}
.sharem{margin-top:18px}
.sum{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.sum div{background:var(--surface);border-radius:var(--r6);padding:12px 14px;border:1px solid var(--separator)}
.sum b{display:block;font:500 32px/34px var(--font-editorial)}
.sum span{font-size:13px;color:var(--textSecondary);line-height:16px;display:block}
.edhint{margin:16px 0 12px}
.M .banner{border-radius:14px;padding:12px 14px;font-size:14px;line-height:20px;display:flex;gap:10px;align-items:flex-start}
.M .banner svg{width:18px;height:18px;flex:none;margin-top:1px}
.M .banner b{display:block;font-size:15px}
.M .banner.ok{background:var(--successSoft);color:var(--success)}
.M .banner.warn{background:var(--premiumSoft);color:var(--premium)}
.M .banner.bad{background:var(--accentSoft);color:var(--destructive)}

/* tiles in the editor: the app's DayTileView */
.M .tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media (min-width:960px){.M .tiles.wide{grid-template-columns:repeat(6,1fr);gap:14px}}
.M .tiles .tl{transition:transform .18s,box-shadow .18s;text-align:left}
.M .tiles .tl.pat{box-shadow:0 8px 16px -8px #1a171688}
.M .tiles .tl:hover{transform:translateY(-3px)}
.M .tl.pat{background:var(--box) center/cover;background-color:var(--wrap)}
.M .tl.pat>.bv,.M .tl.pat>.bh,.M .tl.pat>.kn{display:none}
.M .tl{border-radius:4px}
.M .tl .n{font-family:var(--font-editorial);font-weight:500;letter-spacing:0;bottom:calc(4px + .14em)} /* old-style 9/7/3 descend: keep them off the tile edge */
.M .tl.empty{background:transparent;outline:1.5px dashed #BDB3AA;outline-offset:-1.5px;box-shadow:none}
.M .tl.empty .n{color:var(--textTertiary)}
.M .tl.empty .plus{position:absolute;right:8px;top:8px;width:18px;height:18px;color:var(--textTertiary)}
.M .tl.empty:hover{background:#ffffff80}
.M .tl.open{background-color:var(--surface);box-shadow:inset 0 0 0 1px var(--separator)}
.M .tl.open .n{color:var(--textPrimary);font-size:20px;left:8px;top:7px;bottom:auto}
.M .tl.open .g{position:absolute;left:50%;top:56%;transform:translate(-50%,-50%);width:26px;height:26px;color:var(--textSecondary)}
.M .tl.open .g svg{width:100%;height:100%}
.M .tl .thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.M .tl.ph .n{color:#fff;text-shadow:0 1px 4px #0008}
.M .tl.cur{outline:2.5px solid var(--ink);outline-offset:2.5px}
.M .tl .badge{position:absolute;right:6px;bottom:6px;width:24px;height:24px;border-radius:50%;background:var(--surface);color:var(--textPrimary);display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px #0003}
.M .tl .badge svg{width:14px;height:14px}
.M .tl .badge.ok{background:var(--success);color:#fff}
.M .tl .lk{position:absolute;right:7px;top:7px;width:14px;height:14px;color:var(--textTertiary)}
.M .tl .tag{position:absolute;left:5px;right:5px;bottom:5px;font:700 10px var(--font-ui);letter-spacing:.06em;text-transform:uppercase;text-align:center;border-radius:6px;padding:4px 0;color:#fff}
.M .tl .tag.used{background:var(--accent)}.M .tl .tag.found{background:var(--success)}

/* ---- overlays ---- */
.M .scrim{position:fixed;inset:0;background:var(--scrim);animation:fade .2s;z-index:40}
.M .dlg{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(440px,calc(100% - 32px));background:var(--background);border-radius:24px;box-shadow:var(--shadow-dialog);padding:24px;animation:fade .18s;max-height:calc(100% - 40px);overflow:auto;z-index:41;display:block}
.M .dlg.wide{width:min(520px,calc(100% - 32px))}
.M .dlg h2{font:500 28px/32px var(--font-editorial);letter-spacing:-.012em;text-wrap:balance;padding-right:36px}
.M .dlg h2.c,.M .dlg p.c{text-align:center;padding-right:0}
.M .dlg p{font-size:16px;line-height:23px;color:var(--textSecondary);margin-top:8px}
.M .dlg .btns{display:flex;gap:10px;margin-top:22px;flex-direction:row-reverse}
.M .dlg .btns .btn{flex:1}
.M .dlg .x{position:absolute;right:14px;top:14px}
.M .dlg .x svg{width:18px;height:18px}
.M .dlg.alert{width:min(380px,calc(100% - 48px))}
.M .dlg .banner{margin-top:14px}
.M .dlg .fields{margin-top:18px}
.M .dlg .center{padding:40px 0 20px;text-align:center}
.M .dlg .center h2{margin-top:20px;padding:0}
.M .dlg .kicon{width:52px;height:52px;border-radius:16px;background:var(--surface);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-row);margin-bottom:16px}
.M .dlg .kicon svg{width:26px;height:26px}
.M .dlg .trio{display:flex;justify-content:center;gap:8px;margin:4px 0 18px}
.M .dlg .trio .tl{width:62px}
.M .dlg .buy{margin-top:18px}
.M .dlg .perks{margin-top:14px}
@media (max-width:639px){
  .M .dlg.sheet{left:0;right:0;top:auto;bottom:0;transform:none;width:auto;border-radius:24px 24px 0 0;animation:rise .3s cubic-bezier(.2,.9,.3,1);max-height:calc(100% - 24px);padding-bottom:34px}
  .M .dlg .btns{flex-direction:column}
  .M .dlg .btns .btn{flex:none;width:100%}
}
.M .linkbox{display:flex;gap:8px;align-items:center;background:var(--surface);border-radius:14px;padding:6px 6px 6px 14px;border:1px solid var(--separator);box-shadow:none;margin-top:18px;width:auto}
.M .linkbox code{flex:1;min-width:0;font:500 15px var(--font-ui);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.M .hint{font-size:14px;color:var(--textSecondary);text-align:center;margin-top:8px;line-height:20px}
.M .hint.left{text-align:left;display:flex;gap:8px;margin-top:12px}
.M .hint.left svg{width:18px;height:18px;flex:none}
.M .two{display:flex;gap:10px;margin-top:10px}
.M .two .btn{flex:1;height:48px;font-size:16px;padding:0 12px}
.perk{display:flex;gap:14px;align-items:center;padding:9px 0}
.perk .pi{width:44px;height:44px;border-radius:12px;background:var(--surface);display:flex;align-items:center;justify-content:center;flex:none;box-shadow:inset 0 0 0 1px var(--separator)}
.perk .pi svg{width:22px;height:22px}
.perk b{display:block;font:600 16px var(--font-ui)}.perk span{font-size:14px;color:var(--textSecondary)}
.hero3{position:relative;height:150px;margin:-4px 0 10px}
.hero3>span{position:absolute;top:20px;width:96px}
.hero3 .tl{box-shadow:0 18px 30px -14px #1a1716a0;cursor:default}
.hero3 .h1{left:calc(50% - 128px);transform:rotate(-9deg)}
.hero3 .h2{left:calc(50% - 48px);top:4px;z-index:2}
.hero3 .h3{left:calc(50% + 32px);transform:rotate(9deg)}
/* the middle card overlaps the inner edges of the side cards: keep their numbers and badges on the outer edge */
.hero3 .h1 .badge{right:auto;bottom:auto;left:6px;top:6px}
.hero3 .h3 .badge{bottom:auto;top:6px}
.hero3 .h3 .n{left:auto;right:8px}
.spin{width:20px;height:20px;border-radius:50%;border:2.5px solid var(--surfaceSunken);border-top-color:var(--ink);animation:sp 1s linear infinite;flex:none;display:inline-block}
.spin.big{width:34px;height:34px;border-width:3px}
@keyframes sp{to{transform:rotate(360deg)}}

/* drawer: 460 px from the right on desktop (the grid stays visible), full screen on phone */
.drawer{position:fixed;top:0;right:0;bottom:0;width:460px;max-width:100%;background:var(--background);box-shadow:var(--shadow-dialog);display:flex;flex-direction:column;animation:slide .28s cubic-bezier(.2,.9,.3,1);z-index:41}
@keyframes slide{from{transform:translateX(100%)}}
@media (max-width:639px){.drawer{width:auto;left:0;animation:rise .3s cubic-bezier(.2,.9,.3,1)}}
.drawer .dh{display:flex;align-items:flex-start;justify-content:space-between;padding:20px 20px 8px}
.drawer .dh h2{font:500 34px/38px var(--font-editorial);letter-spacing:-.012em}
.drawer .dh .ib svg{width:18px;height:18px}
.drawer .body{flex:1;overflow:auto;padding:8px 20px 20px}
.drawer .body>.sect:first-child{margin-top:6px}
.drawer .typech{margin-bottom:18px}
.drawer .df{padding:14px 20px 22px;border-top:1px solid var(--separator);display:flex;gap:10px;align-items:center;background:var(--background)}
.drawer .dbanner{margin:0 20px 12px}
.typech{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} /* equal chips: a long label wraps instead of widening its column */
.ty{height:66px;border-radius:14px;background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;font:500 13px var(--font-ui);position:relative;box-shadow:inset 0 0 0 1px var(--separator);padding:0 4px;text-align:center;line-height:15px;hyphens:auto;overflow-wrap:anywhere}
.ty:hover{box-shadow:inset 0 0 0 1.5px #BDB3AA}
.ty svg{width:22px;height:22px;flex:none}
.ty.on{background:var(--ink);color:#fff;box-shadow:none}
.ty .st{position:absolute;right:6px;top:6px;width:15px;height:15px;color:var(--premium)}
.ty .st svg{width:15px;height:15px}
.ty.on .st{color:#E9CF8F}
.drop{min-height:220px;border-radius:var(--r-card);background:var(--surface);outline:1.5px dashed #BDB3AA;outline-offset:-1.5px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--textSecondary);font-size:15px;text-align:center;padding:24px 30px}
.drop.compact{min-height:170px;margin-top:14px}
.drop>svg{width:30px;height:30px}
.drop b{color:var(--textPrimary);font-weight:600}
.drop.over{outline:2px solid var(--ink);background:#fff}
.drop small{font-size:13px;color:var(--textTertiary)}
.filepick{cursor:pointer}
.drop .filepick{height:40px;border-radius:12px;padding:0 16px;font-size:15px}
.M .ccard.shot{aspect-ratio:4/3;background:var(--surfaceSunken);overflow:hidden;border-radius:var(--r6);box-shadow:var(--shadow-row)}
.M .ccard.shot.small{aspect-ratio:16/9;margin-top:4px}
.M .ccard.shot img{width:100%;height:100%;object-fit:cover;display:block}
.drawer .field{margin-top:12px}
.drawer .ticket{margin-bottom:14px;box-shadow:var(--shadow-row)}
.drawer .ticket .top{min-height:110px}
.drawer .ticket h2{font-size:28px;line-height:32px}
.rec{display:flex;flex-direction:column;align-items:center;padding:14px 0 6px}
.ringw{position:relative;width:164px;height:164px;display:flex;align-items:center;justify-content:center}
.ringw svg.r,.circ svg.r{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.recb{width:80px;height:80px;border-radius:50%;background:var(--accent)!important;display:flex;align-items:center;justify-content:center;color:#fff!important;position:relative}
.recb.sm{width:60px;height:60px}
.recb i{width:28px;height:28px;border-radius:7px;background:#fff;display:block}
.recb.sm i{width:22px;height:22px}
.recb i.dot{border-radius:50%;width:24px;height:24px}
.recb svg{width:32px;height:32px}
.recb.sm svg{width:24px;height:24px}
.recb .pl{display:flex;margin-left:4px}
.recb .pl[hidden]{display:none}
.rec .time{font:600 34px var(--font-display);font-variant-numeric:tabular-nums;margin-top:12px;letter-spacing:-.01em}
.rec .btn.plain{margin-top:8px}
.rec .vid .circ{position:relative;width:240px;height:240px;border-radius:50%;overflow:hidden;background:var(--surfaceSunken)}
.rec .vid .circ video{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);border-radius:50%;object-fit:cover}
.rec .vid .circ video[data-live-cam]{transform:scaleX(-1)}
.rec .vid .circ .blank{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--textTertiary)}
.rec .vid .circ .blank svg{width:44px;height:44px}
.vrow{display:flex;align-items:center;gap:18px;margin-top:16px}
.vrow .time{margin:0;font-size:28px}
.vrow .btn.plain{margin:0}
.or{display:flex;align-items:center;gap:12px;margin:16px 0 4px;color:var(--textTertiary);font-size:13px}
.or span{flex:1;height:1px;background:var(--separator)}
.processing{display:flex;align-items:center;gap:12px;background:var(--surface);border-radius:14px;padding:14px;box-shadow:var(--shadow-row);font-size:15px}

/* toast */
.toast{position:fixed;left:50%;bottom:40px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 18px;border-radius:14px;font:500 15px var(--font-ui);white-space:nowrap;display:none;gap:8px;align-items:center;z-index:60}
.toast.on{display:flex;animation:fade .2s}
.toast svg{width:18px;height:18px}

/* wrong key / errors */
.M .err-page{text-align:center;padding:80px 16px;max-width:480px;margin:0 auto}
.M .err-page .ic{width:64px;height:64px;border-radius:20px;background:var(--surface);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;color:var(--textSecondary);box-shadow:var(--shadow-row)}
.M .err-page .ic svg{width:28px;height:28px}
.M .err-page h1{font:500 34px/38px var(--font-editorial)}
.M .err-page p{color:var(--textSecondary);margin-top:10px}
.M .err-page .btn{margin-top:26px}

/* gift cards in the editor (empty state, create preview) = the viewer's card: box art, serif numeral (v5/v6) */
.M .gc{border-radius:calc(8px*var(--s))}
.M .gc .lid{background:var(--box) center/cover;background-color:var(--wrap)}
.M .gc>.bv,.M .gc>.bh,.M .gc>.bow{display:none}
.M .gc .num{font:500 calc(132px*var(--s))/1 var(--font-editorial);letter-spacing:-.02em;font-variant-numeric:lining-nums;left:calc(22px*var(--s));bottom:calc(6px*var(--s));text-shadow:0 2px 0 #00000022,0 10px 30px #00000040}
.M .gc .forl{max-width:calc(50% - 34px*var(--s))}
/* review prompt in the side column and its dialog */
.scard.fbk .btn{margin-top:12px}
.scard.fbk.done{display:flex;gap:10px;align-items:center;color:var(--success,#2e7d4f)}
.scard.fbk.done svg{width:20px;height:20px;flex:none}
.scard.fbk.done p{margin:0;color:inherit}
.dlg .ck{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--textSecondary);margin-top:4px}
.dlg .ck input{margin-top:2px;accent-color:var(--burgundy,#6E1423)}
/* v7 polish: the new-calendar preview names sit under the card (never over the bow); every button is a pill; photo
   tiles get a dark chip behind the day number; the wrapping thumbnail in the side card is readable */
.create .pv{flex-direction:column;align-items:center}
.create .pv .forl{position:static;max-width:min(100%,420px);margin:0 0 24px;text-align:center;color:var(--textSecondary);font:italic 500 20px var(--font-editorial);overflow-wrap:anywhere}
.create .pv .forl b{font-size:32px;color:var(--ink);margin-top:2px}
.M .btn,.M .btn.small,.btn,.btn.small,.M .scard .btn{border-radius:999px}
.M .tl.ph .n{color:#fff;text-shadow:none;background:#1a0e0b8c;border-radius:99px;min-width:24px;height:24px;line-height:24px;padding:0 6px;text-align:center;left:6px;top:6px;font-size:16px}
.scard .row .tl{width:52px}
.scard .row .tl .n{font-size:20px}
.create .pv .forl b{display:block}
.M .tl.ph .n{font:600 14px/26px var(--font-ui)!important;height:26px;min-width:26px}
.scard .row .tl{flex:none}
.create .pv .forl b{font-style:normal}
/* the editor's coupon preview matches what the recipient sees (cream top, burgundy serif title, a plain tear line) */
.M .ticket{border-radius:16px;overflow:hidden;background:var(--surface);box-shadow:0 0 0 1px var(--separator)}
.M .ticket .top{background:#F6EDE2!important;background-image:none!important;color:#6E1423;min-height:0;padding:22px 24px}
.M .ticket .top .kick{color:#9A6B2F}
.M .ticket .top h2{font:500 30px/1.1 var(--font-editorial)!important;letter-spacing:-.01em;color:#6E1423}
.M .ticket .perf{border-top:2px dashed #D9C9B6;margin:0 16px}
.M .ticket .perf::before,.M .ticket .perf::after{display:none}
.M .ticket .bot{min-height:44px}
/* German and Dutch type names wrap badly on phones: smaller labels, no hyphenation */
@media (max-width:639px){.M .ty{font-size:12px;letter-spacing:-.01em;padding:0 4px;hyphens:auto;line-height:1.2;text-align:center}}
/* a sent calendar with an empty day coming up */
.scard.warn{background:#FBF1DC;border-color:#E9D6A8;display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start}
.scard.warn svg{width:20px;height:20px;color:#8A6A1F;margin-top:1px}
.scard.warn p{margin:0;color:#5E4813;font-size:14px;line-height:1.45}
.scard.warn .btn{grid-column:2;justify-self:start;margin-top:4px}

/* eight day types: four to a row */
.typech{grid-template-columns:repeat(4,minmax(0,1fr))}
/* presentation options (note style, photo/coupon reveal) */
.opts{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.opt{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:999px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--separator);font:500 14px var(--font-ui);color:var(--ink)}
.opt:hover{box-shadow:inset 0 0 0 1.5px #BDB3AA}
.opt.on{background:var(--ink);color:#fff;box-shadow:none}
.opt .st{width:14px;height:14px;color:var(--premium)}
.opt.on .st{color:#E9CF8F}
/* an opened question day: the recipient's answer */
.answer{margin-top:14px;background:var(--surface);border-radius:14px;padding:16px 18px;box-shadow:inset 0 0 0 1px var(--separator);display:grid;gap:8px}
.answer .q{font:500 20px/1.25 var(--font-editorial,Georgia,serif)}
.answer .lb{font:600 12px var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--textSecondary)}
.answer p{font:italic 500 18px/1.4 var(--font-editorial,Georgia,serif);white-space:pre-line}

/* recording: live microphone level and the "we can't hear you" hint */
.rec .lvl{width:140px;height:6px;border-radius:3px;background:var(--surfaceSunken);overflow:hidden;margin-top:10px}
.rec .lvl i{display:block;width:100%;height:100%;border-radius:3px;background:var(--accent);transform:scaleX(0);transform-origin:left center;transition:transform 80ms linear}
.rec .lvl[hidden],.M .banner[hidden]{display:none}
.rec .banner.mic{margin-top:12px;max-width:340px;text-align:left}
.M .hint a{text-decoration:underline;text-underline-offset:3px}