/* Base reset */
html,body{margin:0}
[hidden]{display:none!important}
img{max-width:100%}

/* Layout: brand-clean. Cream ground, attendance list left, the print resting on one aqua field in the middle, face maker right. Coral is the only loud color. */
@font-face{font-family:"Birdie";src:url(../fonts/TAYBirdie-Regular.woff) format("woff");font-display:swap}
@font-face{font-family:"Jelly Habit";src:url(../fonts/TAYJellyHabit-Regular.woff) format("woff");font-display:swap}
@font-face{font-family:"Dreamboat";src:url(../fonts/TAYDreamboat-Thin.woff) format("woff");font-display:swap}
:root{
  --ground:#f4f2eb; --ink:#2e2924; --coral:#f0725e; --pink:#f6b4aa; --aqua:#badce1; --tan:#d4c0a9;
  --card:#fbfaf6; --soft:#7b736b; --print:#f7f5ee;
  --display:"Dreamboat","Arial Black",sans-serif; --title:"Jelly Habit","Segoe Script",cursive;
  --ui:"Birdie",system-ui,-apple-system,"Segoe UI",sans-serif; --name:"Birdie","Trebuchet MS",sans-serif;
}
*{box-sizing:border-box}
body{background:var(--ground);color:var(--ink);font:400 15.5px/1.5 var(--ui);letter-spacing:.03em;font-synthesis:none}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.cap{font-family:var(--display);text-transform:uppercase;letter-spacing:.06em;font-weight:400}
.wrap{max-width:1480px;margin:0 auto;padding-block:18px 32px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:18px}
header{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px}
.brand{display:flex;align-items:center;gap:12px;margin:0;font:400 19px/1.1 var(--display);letter-spacing:.06em;text-transform:uppercase}
.brand img{width:60px;height:60px}
.steps{display:flex;flex-wrap:wrap;gap:4px 22px;list-style:none;margin:0;padding:0;font:400 10px var(--display);letter-spacing:.06em;text-transform:uppercase;counter-reset:s}
.steps li{counter-increment:s}.steps li::before{content:counter(s);color:var(--coral);margin-right:.6em}
.steps{align-items:center}
.btn.go{margin-left:auto;flex:none;background:var(--pink);color:var(--ink);padding:13px 20px;font-size:10px}
.desk{display:grid;grid-template-columns:240px minmax(0,1fr) 400px;gap:18px;align-items:start}
.panel{background:var(--card);border-radius:20px;padding:18px}
.panel h2{font:400 13px var(--display);letter-spacing:.06em;text-transform:uppercase;margin:0}
/* attendance */
.count{font-size:14px;color:var(--soft);margin:2px 0 12px}
.call{display:flex;flex-wrap:wrap;gap:10px 8px;align-items:flex-end}
.call input{flex:1 1 100%;min-width:0;font-family:var(--name);letter-spacing:.04em;border:0;border-bottom:2px solid var(--ink);padding:6px 2px;background:none;font-size:16px;border-radius:0}
.call input:focus-visible,.who input:focus-visible{outline:0;border-bottom-color:var(--coral)}
.call.off{opacity:.35;pointer-events:none}
body.paid .wm{display:none}
a.btn{text-decoration:none;text-align:center}
.saved{background:rgba(186,220,225,.45);border-radius:12px;padding:10px 12px;font-size:14px}.saved .link{padding:0}
.call input::placeholder{color:var(--soft)}
.btn{border:0;border-radius:999px;background:var(--coral);color:var(--ground);padding:13px 15px;font:400 10px var(--display);letter-spacing:.06em;text-transform:uppercase;transition:transform .12s;display:inline-block;line-height:1;text-box:trim-both cap alphabetic}
@supports not (text-box:trim-both cap alphabetic){.btn{padding-top:calc(13px + .2em)}}
.btn:hover{transform:translateY(-1px)}.btn:active{transform:scale(.96)}
.btn.line{background:none;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn.line[aria-pressed=true]{background:var(--ink);color:var(--card)}
.link{background:none;border:0;padding:8px 0 0;color:var(--ink);text-decoration:underline;text-underline-offset:3px;font-size:13px}
#pastego{margin-top:10px}
#paste:focus-visible{outline:0;border-color:var(--coral)}
#paste{width:100%;min-height:96px;border:2px dashed var(--tan);border-radius:12px;padding:8px;background:#fff;resize:vertical;margin-top:8px}
.names{list-style:none;margin:12px 0 0;padding:0;max-height:54vh;overflow:auto;display:flex;flex-direction:column;gap:4px}
.names li{display:flex;align-items:center;gap:8px;min-height:36px;border-radius:18px;padding:0 4px 0 12px}
.names li.sel{background:var(--pink)}
.nmw{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;padding:7px 0;gap:3px}
.names .nm{max-width:100%;text-align:left;background:none;border:0;padding:0;font:400 16px/1.3 var(--name);letter-spacing:.04em;overflow-wrap:anywhere}
.tick{width:22px;height:22px;flex:none;border:2px solid var(--tan);border-radius:50%;display:grid;place-items:center;background:var(--card)}
.tick.on{border:0;background:none}.tick img{width:22px;height:22px;animation:pop .4s cubic-bezier(.2,1.6,.4,1)}
.tag{border:0;background:none;padding:0;font:400 8px var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}
.x{background:none;border:0;color:var(--soft);font-size:18px;line-height:1;padding:4px 8px;border-radius:50%}.x:hover{color:var(--coral)}
.example{font-size:14px;color:var(--soft);margin-top:10px}
/* stage */
.stage{background:var(--aqua);border-radius:20px;padding:22px 18px 16px;display:flex;flex-direction:column;align-items:center;gap:14px;min-width:0;position:relative;overflow:hidden}
.sheet{position:relative;width:100%;aspect-ratio:4/5;max-width:min(100%,calc((100vh - 230px)*.8));min-width:min(100%,300px);background:#fff;box-shadow:0 10px 26px rgba(46,41,36,.16);container-type:inline-size;overflow:hidden;isolation:isolate;touch-action:pan-y;transition:max-width .35s}
.sheet.land{aspect-ratio:5/4;max-width:min(100%,calc((100vh - 230px)*1.25))}
.kid{position:absolute;padding:0;border:0;background:none;cursor:grab;touch-action:none;transition:left .4s cubic-bezier(.3,1.3,.5,1),top .4s cubic-bezier(.3,1.3,.5,1),width .4s,opacity .25s;-webkit-tap-highlight-color:transparent;user-select:none}
.kid svg{display:block;width:100%;overflow:visible;pointer-events:none;transition:transform .18s}
.kid:hover svg{transform:rotate(-3deg) scale(1.06)}
.sheet.has-sel .kid:not(.sel):not(.drag){opacity:.55}.sheet.has-sel .kid:not(.sel):hover{opacity:.85}
.kid.drag{transition:none;z-index:3000!important;cursor:grabbing}
.kid.over svg{transform:scale(1.16) rotate(3deg)}.kid.drag svg{transform:scale(1.2) rotate(4deg);filter:drop-shadow(0 8px 6px rgba(46,41,36,.22))}
.kid.pop svg{animation:pop .55s cubic-bezier(.2,1.6,.4,1)}
.here{position:absolute;left:56%;top:2%;background:var(--coral);color:var(--ground);font:400 clamp(7px,1.6cqw,11px) var(--display);letter-spacing:.06em;padding:.45em .9em;border-radius:1.2em 1.2em 1.2em .2em;animation:here 1.4s forwards;pointer-events:none;white-space:nowrap}
@keyframes pop{0%{transform:scale(0) rotate(-20deg)}100%{transform:none}}
@keyframes here{0%{opacity:0;transform:translateY(8px) scale(.6)}15%,75%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-10px)}}
@keyframes spin{to{transform:rotate(360deg)}}
.ttl{position:absolute;z-index:1500;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0}
.ttl input{width:100%;border:0;background:none;text-align:center;color:var(--ink);font:400 5.2cqw/1.7 var(--title);letter-spacing:.01em;padding:0 .2em;margin:-.25em 0;flex:none;border-radius:6px}
.ttl input::placeholder{color:var(--tan)}
.ttl input:hover,.ttl input:focus{background:rgba(212,192,169,.22)}
.ttl input:focus-visible{outline:0;background:rgba(212,192,169,.34)}
.wm{position:absolute;inset:0;z-index:2500;pointer-events:none;opacity:.17;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='380'%3E%3Cg transform='rotate(-24 260 190)' text-anchor='middle' font-family='Arial Black,Arial,sans-serif' font-weight='900' font-size='15' letter-spacing='4' fill='%232e2924' stroke='%23ffffff' stroke-width='.8' paint-order='stroke'%3E%3Ctext x='260' y='182'%3ESCHOOLYARD SQUAD%3C/text%3E%3Ctext x='260' y='208'%3EPREVIEW%3C/text%3E%3C/g%3E%3C/svg%3E");background-size:62% auto}
.mb{display:none}
.empty{position:absolute;inset:0 0 25%;display:grid;place-items:center;text-align:center;color:var(--soft);font-size:clamp(14px,3.6cqw,20px);padding:0 14%}
.stagebar{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:center;font-size:14px;width:100%;position:relative}
.stagebar span{flex:1 1 220px}
/* maker: the group of kids, then the lost and found */
.maker{display:flex;flex-direction:column;gap:14px}
.who{display:flex;align-items:center;gap:8px}
.who input{flex:1;min-width:0;border:0;border-bottom:2px solid var(--ink);border-radius:0;background:none;font:400 22px var(--name);letter-spacing:.04em;padding:2px 4px;text-align:center}
.arrow{width:34px;height:34px;border-radius:50%;border:2px solid var(--ink);background:none;font-size:17px;line-height:1;flex:none}
.arrow:hover{background:var(--ink);color:var(--card)}
.hint{font-size:14px;color:var(--soft);margin:4px 0 0}
.crowd{display:grid;grid-template-columns:repeat(5,1fr);gap:26px 8px;padding:24px 20px 48px;background:var(--ground);border-radius:16px}
.pk{aspect-ratio:1/.92;border:0;background:none;padding:0;position:relative;cursor:grab;touch-action:manipulation;border-radius:50%}
.pk svg{display:block;width:100%;height:100%;overflow:visible;pointer-events:none;animation:bob 2.6s ease-in-out infinite;animation-delay:var(--d);transition:transform .15s}
.pk:hover,.pk:focus-visible{z-index:5}.pk:hover svg,.pk:focus-visible svg{animation:none;transform:scale(1.3) rotate(-5deg)}
@keyframes bob{50%{transform:translateY(-6%)}}
.big{position:relative;background:var(--ground);border-radius:16px;display:grid;place-items:center;padding:4px;transition:box-shadow .15s}
.big.over{box-shadow:inset 0 0 0 3px var(--coral)}
.big svg{width:min(56%,210px);overflow:visible;touch-action:none}
.big .base,.big text{pointer-events:none}.big [data-acc]{cursor:grab;pointer-events:all}
.btn.swap{position:absolute;left:8px;top:8px;padding:7px 9px;font-size:6.5px;box-shadow:inset 0 0 0 1.5px var(--ink)}
.cubby{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.acc{border:0;background:var(--ground);border-radius:14px;padding:10px 4px 8px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:grab;touch-action:none;font-size:13px;font-weight:500;transition:transform .12s;user-select:none}
.acc:hover{transform:translateY(-3px) rotate(-2deg)}
.acc svg{width:70px;height:40px;pointer-events:none}
.acc.on{box-shadow:inset 0 0 0 2px var(--coral)}.acc.on svg{opacity:.28}
.ghost{position:fixed;left:0;top:0;z-index:4000;pointer-events:none;will-change:transform}
.ghost svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 8px 6px rgba(46,41,36,.25))}
.conf{position:fixed;width:10px;height:14px;z-index:90;pointer-events:none;border-radius:2px}
.closer{display:none}
.mtop{display:contents}
.sw{display:flex;flex-wrap:wrap;gap:9px}
.sw button{width:28px;height:28px;border-radius:50%;border:0;box-shadow:0 0 0 3px var(--card),0 0 0 4px var(--tan);transition:transform .12s}
.sw button:hover{transform:scale(1.12)}
.sw button[aria-pressed=true]{box-shadow:0 0 0 3px var(--card),0 0 0 6px var(--coral)}
.cols{grid-template-columns:minmax(0,1fr)!important;gap:8px!important}.cols > span{margin-top:6px}
.cols .sw{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px;padding:3px}
.cols .sw button{width:100%;height:auto;aspect-ratio:1;max-width:46px;justify-self:center}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button{border:0;box-shadow:inset 0 0 0 2px var(--ink);background:none;border-radius:999px;padding:5px 13px;font-size:14px;font-weight:500}
.chips button[aria-pressed=true]{background:var(--ink);color:var(--card)}
.row2{display:grid;grid-template-columns:auto 1fr;gap:12px 14px;align-items:center}
.row2 > span{font:400 8px var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}
.next{padding:17px 14px;font-size:11px}
/* checkout */
.veil{position:fixed;inset:0;background:rgba(46,41,36,.55);display:grid;place-items:center;z-index:50;padding:16px}
.card{background:var(--card);border-radius:22px;max-width:440px;width:100%;overflow:auto;max-height:100%}
.card .top{background:var(--pink);display:flex;align-items:flex-end;gap:14px;padding:18px 22px 0}
.card .top img{width:64px;margin-bottom:-14px;transform:rotate(8deg)}
.card h3{font:400 15px/1.3 var(--display);letter-spacing:.06em;text-transform:uppercase;margin:0 0 16px;text-wrap:balance}
.card .in{padding:26px 22px 22px;display:flex;flex-direction:column;gap:12px}
.opt{box-shadow:inset 0 0 0 2px var(--ink);border-radius:14px;padding:12px 14px;display:flex;gap:10px;align-items:flex-start}
.opt input{accent-color:var(--coral);margin-top:3px}
.incl{margin:8px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:4px;font-size:14px}
.opt b{display:block}.opt small{color:var(--soft)}
.warn{background:rgba(246,180,170,.4);border-radius:12px;padding:10px 12px;font-size:14px}.warn .link{padding:0}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.note{font-size:14px;color:var(--soft)}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--ground);padding:10px 18px;border-radius:999px;z-index:60;font-weight:500;max-width:calc(100% - 32px);text-align:center}
@media (max-width:1080px){
  .desk{grid-template-columns:230px minmax(0,1fr)}
  .maker{position:fixed;left:0;right:0;bottom:0;z-index:30;border-radius:22px 22px 0 0;max-height:58%;overflow:auto;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));transform:translateY(105%);transition:transform .3s;box-shadow:0 -8px 30px rgba(46,41,36,.25)}
  .maker.open{transform:none}
  .closer{display:block;align-self:flex-end}
  .big svg{width:min(34%,130px)}
  .crowd{grid-template-columns:repeat(6,1fr)}
  .wrap.mk{padding-bottom:60vh}
}
@media (max-width:720px){
  .desk{grid-template-columns:minmax(0,1fr)}
  .stage{order:-1}.names{max-height:240px}
  .brand{font-size:18px}.brand img{width:48px;height:48px}header{flex-wrap:nowrap;gap:10px}.brand{font-size:clamp(10px,3.5vw,15px)!important;gap:8px;min-width:0}.brand img{width:clamp(36px,11vw,44px)!important;height:clamp(36px,11vw,44px)!important;flex:none}.btn.go{padding:13px 15px}.steps{margin-left:auto;flex:none}.steps li:not(:last-child){display:none}.steps li::before{content:none}.mb{display:inline}.empty{padding:0 4%}.stagebar{flex-direction:column;text-align:center}.stagebar span{flex:none}
  .sheet,.sheet.land{max-width:100%}
  /* phones: the face maker fills the screen, and the kid being edited stays pinned at the top while the choices scroll */
  .maker{top:0;max-height:none;height:100dvh;border-radius:0;padding-top:0;overscroll-behavior:contain}
  .maker>:first-child:not(.mtop){margin-top:max(16px,env(safe-area-inset-top,0px))}
  .mtop{display:flex;flex-direction:column;gap:10px;position:sticky;top:0;z-index:5;background:var(--card);padding:max(12px,env(safe-area-inset-top,0px)) 0 10px;margin-bottom:-6px;box-shadow:0 10px 10px -10px rgba(46,41,36,.18)}
  .mtop .big svg{width:auto;height:min(26dvh,220px)}
  .wrap.mk{padding-bottom:0}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Loading: shown from the first paint until the art has arrived and the class is drawn. */
.ld{display:none}
body.loading .ld{position:absolute;inset:0;z-index:3000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7cqw;background:var(--print)}
.lddots{display:grid;grid-template-columns:repeat(4,13cqw);gap:5cqw 6cqw}
.lddots i{aspect-ratio:1;border-radius:50%;background:var(--tan);animation:ldpulse 1.5s ease-in-out infinite both}
.lddots i:nth-child(4n+2){animation-delay:.12s}.lddots i:nth-child(4n+3){animation-delay:.24s}.lddots i:nth-child(4n+4){animation-delay:.36s}
.lddots i:nth-child(n+5){animation-delay:.2s}.lddots i:nth-child(n+5):nth-child(4n+2){animation-delay:.32s}.lddots i:nth-child(n+5):nth-child(4n+3){animation-delay:.44s}.lddots i:nth-child(n+5):nth-child(4n+4){animation-delay:.56s}
.lddots i:nth-child(n+9){animation-delay:.4s}.lddots i:nth-child(n+9):nth-child(4n+2){animation-delay:.52s}.lddots i:nth-child(n+9):nth-child(4n+3){animation-delay:.64s}.lddots i:nth-child(n+9):nth-child(4n+4){animation-delay:.76s}
.ld p{margin:0;font-family:var(--display);text-transform:uppercase;letter-spacing:.14em;font-size:max(11px,3.4cqw);color:var(--soft);text-align:center;padding:0 8cqw}
@keyframes ldpulse{0%,100%{opacity:.22;transform:scale(.9)}50%{opacity:.6;transform:scale(1)}}
.sk{display:block;background:var(--tan);opacity:.3;border-radius:999px;animation:skpulse 1.5s ease-in-out infinite}
.names li.sk{min-height:0;height:14px;width:var(--w);margin:11px 0 11px 12px;padding:0}
.sk.bar{height:14px;width:var(--w)}
.skgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:6px}.skgrid .sk{aspect-ratio:1;border-radius:50%}
@keyframes skpulse{0%,100%{opacity:.18}50%{opacity:.38}}
body.loading .ttl,body.loading .wm,body.loading .sheet .kid,body.loading .count,body.loading .example{visibility:hidden}
body.loading .call,body.loading #pastebtn,body.loading .stagebar,body.loading #go{opacity:.45;pointer-events:none}
body.loading.failed .lddots i,body.loading.failed .sk{animation:none}
@media (prefers-reduced-motion:reduce){.lddots i,.sk{animation:none}}

/* Terms, privacy and refund pages, and the links to them */
.foot{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center;font-size:13px;color:var(--soft);padding:6px 0 0}
.foot a,.legal a{color:inherit;text-underline-offset:3px}
a.brand{color:inherit;text-decoration:none}
body.doc header{justify-content:space-between}
.legal{max-width:760px;width:100%;margin:0 auto;padding:28px clamp(18px,5vw,44px) 36px;font-size:16px;line-height:1.65}
.legal h1{font:400 24px/1.2 var(--display);text-transform:uppercase;letter-spacing:.06em;margin:0 0 4px}
.legal h2{font:400 15px/1.3 var(--display);text-transform:uppercase;letter-spacing:.06em;margin:28px 0 6px}
.legal p{margin:0 0 12px}.legal ul{margin:0 0 12px;padding-left:22px}.legal li{margin-bottom:6px}
.legal .legalnav{margin-top:28px;padding-top:16px;border-top:2px solid var(--ground);font-size:14px;color:var(--soft)}
.legal .legalnav a[aria-current]{color:var(--ink);text-decoration:none}

/* touch screens: the face maker is tap-only, so a finger on an accessory or on the face scrolls the panel as usual */
@media (pointer:coarse){.acc,.big svg{touch-action:pan-y}.acc,.pk{cursor:pointer}}

/* checkout: the three things you get, and nothing else */
.gets{list-style:none;margin:2px 0 6px;padding:0;display:flex;flex-direction:column;gap:10px;font-size:17px}
.gets li{display:flex;align-items:center;gap:12px}
.gets li::before{content:"";flex:none;width:20px;height:18px;background:var(--coral);-webkit-mask:url(../img/heart.png) center/contain no-repeat;mask:url(../img/heart.png) center/contain no-repeat}
.link.center{align-self:center;font-size:14px;color:var(--soft)}

/* First-visit walkthrough: a dimmed page with one part lit, and a small card beside it */
.tour{position:fixed;inset:0;z-index:5000}
.tourhole{position:fixed;border-radius:22px;box-shadow:0 0 0 9999px rgba(46,41,36,.58);transition:left .28s ease,top .28s ease,width .28s ease,height .28s ease;pointer-events:none}
.tourtip{position:fixed;width:min(320px,calc(100vw - 24px));background:var(--card);border-radius:20px;padding:18px 20px 16px;box-shadow:0 14px 40px rgba(46,41,36,.3);transition:left .28s ease,top .28s ease}
.tourtip h3{margin:2px 0 6px;font:400 18px/1.2 var(--display);text-transform:uppercase;letter-spacing:.07em}
.tourtip p{margin:0 0 14px;font-size:16px;line-height:1.5}
.tourn{font-size:12px;color:var(--soft);letter-spacing:.08em}
.tourbtns{display:flex;align-items:center;justify-content:space-between;gap:12px}
.tourbtns .btn{min-width:120px}.tourbtns .link{padding:0;color:var(--soft)}
.foot .link{padding:0;font-size:13px;color:inherit}
@media (prefers-reduced-motion:reduce){.tourhole,.tourtip{transition:none}}
.tourtip:focus{outline:0}

/* the print is a white page with the cream panel set in from the edges; the preview shows the same */
.sheet::before{content:"";position:absolute;inset:3.5cqw;background:var(--print);pointer-events:none}

/* the footer links sit in the seating chart's column, so they are centered under the board at every width */
.desk>.foot{grid-column:2}
@media (max-width:720px){.desk>.foot{grid-column:1}}

/* A paid class after its edit window: a notice with the two things left to do, and a builder that is plainly not editable */
.lockbar:empty{display:none}
.lockbar{align-self:stretch;background:var(--card);border-radius:16px;padding:14px 16px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 18px}
.lockbar b{display:block;font:400 15px/1.3 var(--display);text-transform:uppercase;letter-spacing:.06em}
.lockbar span{font-size:14px;color:var(--soft)}
.lockbtns{display:flex;flex-wrap:wrap;gap:8px}
body.locked .roll{opacity:.5}
body.locked .stagebar{visibility:hidden}
body.locked .sheet .kid{cursor:default}
body.locked .ttl input:hover{background:none}
@media (max-width:720px){.lockbar{flex-direction:column;justify-content:center;text-align:center}.lockbtns{flex-direction:column;align-items:stretch;width:100%}}

/* a round close chip in a card's top right corner */
.card{position:relative}
.xchip{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;border:0;background:var(--card);display:grid;place-items:center;cursor:pointer;padding:0}
.xchip svg{width:14px;height:14px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round}
.xchip:hover{background:#fff}.xchip:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.card:not(:has(.top)) .xchip{background:var(--ground)}.card:not(:has(.top)) h3{padding-right:40px}
/* browsers tint a field light blue after filling in a remembered value; keep the title and name fields clear */
.ttl input:-webkit-autofill,.ttl input:autofill,#newname:-webkit-autofill,#kname:-webkit-autofill{-webkit-text-fill-color:var(--ink);transition:background-color 100000s 0s;-webkit-box-shadow:0 0 0 100px transparent inset;box-shadow:0 0 0 100px transparent inset;background-clip:text}
.lockbar b,.lockbar span{text-wrap:balance}

/* My classes: classes set aside on this device */
.example{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.shelf{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.shelf li{display:flex;align-items:center;gap:10px}
.shelfopen{flex:1;min-width:0;text-align:left;background:var(--ground);border:0;border-radius:14px;padding:12px 14px;cursor:pointer;font:inherit;color:inherit}
.shelfopen:hover{background:rgba(186,220,225,.5)}
.shelfopen b{display:block;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shelfopen span{font-size:13px;color:var(--soft)}
.shelf .link{padding:0;flex:none;color:var(--soft)}

.example .link.soft{color:var(--soft);margin-top:10px}
.socgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px;align-items:start}
.socgrid img{width:100%;border-radius:8px;box-shadow:0 0 0 1px rgba(46,41,36,.12);-webkit-touch-callout:default;user-select:auto}

/* the empty seat being worked on stands out from the other empty seats */
.sheet .kid.sel .blank .bf{fill:#fbddd6;stroke:var(--coral);stroke-width:6}
.sheet .kid.sel .blank .be{fill:var(--coral)}.sheet .kid.sel .blank .bm{stroke:var(--coral)}