/* The booking sheet. Shared by section 1 (tap state), section 2 (steps) and section 3 (demo phone). */
.sheet{position:absolute;left:0;right:0;bottom:0;top:0;background:var(--paper);display:flex;flex-direction:column;transform:translateY(100%);transition:transform .32s var(--out);z-index:6}
.sheet.up{transform:none}
.sheet .top{display:flex;align-items:center;gap:12px;padding:54px 18px 0}
.sheet .crumb{font-size:13px;color:var(--ink-50);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sheet .crumb b{font-weight:500;color:var(--ink-70)}
.sheet .iconbtn{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--line-strong);background:var(--card);display:flex;align-items:center;justify-content:center}
.sheet .iconbtn svg{width:16px;height:16px;stroke:var(--ink);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sheet .prog{display:flex;gap:5px;padding:14px 18px 0}
.sheet .prog i{flex:1;height:3px;border-radius:2px;background:var(--line)}
.sheet .prog i.on{background:var(--ink)}
.sheet h2{font-size:28px;line-height:1.15;padding:16px 18px 14px;font-weight:300}
.sheet .body{flex:1;overflow:auto;padding:0 18px 18px}
.sheet .foot{padding:12px 18px 26px;display:flex;gap:10px;align-items:center;border-top:1px solid var(--line);background:var(--paper)}
.sheet .foot .by{font-size:12px;color:var(--ink-50);flex:1}
.sheet .foot .by b{font-family:var(--serif);font-weight:400;color:var(--ink-70)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border-radius:12px;border:1.5px solid var(--ink);background:var(--ink);color:#fff;font-weight:500;font-size:16px;transition:opacity .2s}
.btn[disabled]{opacity:.3}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
/* choice cards */
.opt{display:flex;width:100%;text-align:left;align-items:center;gap:14px;padding-right:44px;background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:10px;font-size:15px;font-weight:500;position:relative;transition:border-color .15s,transform .15s}
.opt:active{transform:scale(.985)}
.opt .ic{width:34px;height:34px;flex:none}
.opt .ic svg{width:34px;height:34px;stroke:var(--ink);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.opt.on{border-color:var(--ink)}
.opt.on::after{content:"";position:absolute;right:16px;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;background:var(--ink);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5 9-10'/></svg>");background-size:11px;background-position:center;background-repeat:no-repeat}
/* picker tiles: 4 or fewer choices, 2x2. Icons at 48px, label under. Photo tiles (Luke, 27 Oct, option B): the square picture is the card, label on a dark gradient at the foot, selected gets an ink ring. */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:136px;padding:18px 10px 14px;background:var(--card);border:1.5px solid var(--line);border-radius:14px;font-size:15px;font-weight:500;line-height:1.25;text-align:center;transition:border-color .15s,transform .15s}
.tile:active{transform:scale(.985)}
.tile .ic{width:48px;height:48px}
.tile .ic svg{width:48px;height:48px;stroke:var(--ink);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tile.on{border-color:var(--ink)}
.tile.on::after{content:"";position:absolute;right:10px;top:10px;width:18px;height:18px;border-radius:50%;background:var(--ink);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5 9-10'/></svg>");background-size:11px;background-position:center;background-repeat:no-repeat;z-index:1}
.tile.photo{align-items:stretch;justify-content:flex-start;text-align:left;min-height:0;padding:0;gap:0;border:0;border-radius:14px;overflow:hidden;font-size:14px;line-height:1.2;box-shadow:0 1px 0 rgba(31,29,26,.08),0 6px 16px -8px rgba(31,29,26,.25)}
.tile.photo .lbl{position:absolute;left:0;right:0;bottom:0;padding:34px 10px 10px;color:#fff;font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.35);background:linear-gradient(transparent,rgba(31,29,26,.72))}
.tile.photo.on{box-shadow:0 0 0 2.5px var(--ink),0 6px 16px -8px rgba(31,29,26,.25)}
.pic{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;background:var(--tag);overflow:hidden}
.pic img{width:100%;height:100%;object-fit:cover;display:block}
.pic-mark{font-style:normal;font-size:11px;font-weight:600;letter-spacing:.04em;color:#fff;background:var(--accent);padding:2px 6px;border-radius:4px}
/* date strip */
.month{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;font-weight:500}
.month .arrows{display:flex;gap:6px}
.month .arrows button{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--line);background:var(--card)}
.days{display:flex;gap:8px;overflow:auto;padding-bottom:6px;margin:0 -18px;padding-left:18px;padding-right:18px;scrollbar-width:none}
.days::-webkit-scrollbar{display:none}
.day{flex:none;width:56px;height:66px;border-radius:12px;border:1.5px solid var(--line);background:var(--card);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.day small{font-size:11px;color:var(--ink-50);text-transform:uppercase;letter-spacing:.04em}
.day b{font-size:18px;font-weight:500}
.day.on{background:var(--ink);border-color:var(--ink);color:#fff}
.day.on small{color:rgba(255,255,255,.7)}
.day.off{opacity:.35}
.times{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.time{height:46px;border-radius:12px;border:1.5px solid var(--line);background:var(--card);font-size:15px;font-weight:500;display:flex;align-items:center;justify-content:center;gap:8px}
.time i{width:7px;height:7px;border-radius:50%;background:var(--ok)}
.time.on{border-color:var(--ink);background:var(--ink);color:#fff}
.time.on i{background:#fff}
.slot-lbl{font-size:13px;color:var(--ink-50);margin:18px 0 0}
/* fields */
.field{display:flex;align-items:center;gap:12px;background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:0 16px;height:56px;margin-bottom:10px;font-size:15px}
.field svg{width:18px;height:18px;stroke:var(--ink-50);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.field input{border:0;outline:0;background:transparent;font:inherit;flex:1;color:var(--ink)}
.field input::placeholder{color:var(--ink-50)}
.field.on{border-color:var(--ink)}
/* done */
.done{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:8px}
.done .tick{width:64px;height:64px;border-radius:50%;background:var(--mint);display:flex;align-items:center;justify-content:center;margin-bottom:16px;animation:pop .5s var(--pop)}
.done .tick svg{width:28px;height:28px;stroke:var(--mint-ink);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.done h2{padding:0 0 6px}
.done p{color:var(--ink-70);margin:0 0 18px;font-size:15px}
.sum{width:100%;text-align:left;background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:4px 16px}
.sum div{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px}
.sum div:last-child{border:0}
.sum span{color:var(--ink-50)}
.sum b{font-weight:500}
.done .mark{display:flex;align-items:center;gap:10px;margin-top:22px;font-size:13px;color:var(--ink-50)}
.done .mark .face{border-radius:50%;border:1.5px solid var(--ink);display:flex}
.done .mark b{font-family:var(--serif);font-weight:400;color:var(--ink-70)}
@keyframes pop{0%{transform:scale(0)}70%{transform:scale(1.1)}100%{transform:scale(1)}}
.step-in{animation:stepin .28s var(--out)}
@keyframes stepin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}