/* The Ten List - booking sheet on partner place pages (owner decisions 24-25.10.2026, docs/META_bron_v_nashem_formate_eskizy_2026-10-24.md:
   B6 sheet on the phone and panel in place of the card on the desktop; series 3 and 4: no "next" buttons, 1 adult by default, dates for the
   party, the field slides right-to-left, finger swipe both ways, back arrow in the header, forward arrow only while nothing changed (N1),
   bookgravity step pills 20/32 x 6 with the width animation, the one button is Send request at the end). Tokens come from the page skin. */
.ttlb-dim{position:fixed;inset:0;background:rgba(16,48,43,.35);z-index:60;animation:ttlb-fade .2s var(--m-ease)}
@keyframes ttlb-fade{from{opacity:0}}
.ttlb-sheet{position:fixed;left:0;right:0;bottom:0;z-index:61;background:var(--card);border-radius:24px 24px 0 0;padding:10px 18px calc(18px + env(safe-area-inset-bottom));max-height:90vh;max-height:90dvh;overflow:auto;display:flex;flex-direction:column;gap:10px;box-shadow:0 -8px 30px rgba(16,48,43,.18);animation:ttlb-up .3s var(--m-ease);overscroll-behavior:contain;-webkit-user-select:none;user-select:none}
@keyframes ttlb-up{from{transform:translateY(40px);opacity:0}}
.ttlb-sheet::before{content:"";width:40px;height:4px;border-radius:99px;background:var(--line);margin:0 auto 4px;flex:none}
.ttlb-sheet>*,.ttlb-panel>*{flex:none}
.ttlb-panel{display:flex;flex-direction:column;gap:10px;-webkit-user-select:none;user-select:none}
html.ttlb-open{overflow:hidden}
.pl-side.ttlb-on>:not(.ttlb-panel){display:none}
/* header: round back arrow on the left, forward arrow on the right only while nothing changed (N1), close on the far right */
.ttlb-hd{display:flex;align-items:center;gap:10px}.ttlb-hd img{width:44px;height:44px;border-radius:10px;object-fit:cover;background:var(--line);flex:none}
.ttlb-hd .t{min-width:0;flex:1}.ttlb-hd b{display:block;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ttlb-hd span{display:block;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ttlb-hd .bk,.ttlb-hd .fw{width:44px;height:44px;border-radius:99px;background:var(--accent);box-shadow:0 2px 6px rgba(16,48,43,.18);display:grid;place-items:center;color:#fff;flex:none;border:0;cursor:pointer;padding:0;font:inherit}
.ttlb-hd .bk svg,.ttlb-hd .fw svg{width:24px;height:24px}.ttlb-hd .fw svg{transform:scaleX(-1)}.ttlb-hd .bk:active,.ttlb-hd .fw:active{transform:scale(.94)}
.ttlb-hd .fw{animation:ttlb-fwin .3s var(--m-ease)}@keyframes ttlb-fwin{from{opacity:0;transform:translateX(8px)}}
.ttlb-hd .x{width:30px;height:30px;border-radius:99px;background:#eef3f1;display:grid;place-items:center;font-size:18px;color:var(--muted);border:0;cursor:pointer;padding:0;flex:none;font-family:inherit}
/* bookgravity step pills: 6 px high, 20 px wide, the current one 32 px, gap 16 px, labels 10 px; width and colour animate */
.ttlb-steps{display:flex;justify-content:center;gap:16px;margin:4px 0 2px}.ttlb-steps .s{display:flex;flex-direction:column;align-items:center;gap:4px;border:0;background:none;padding:0;font-family:inherit;cursor:default}
.ttlb-steps .s i{display:block;width:20px;height:6px;border-radius:99px;background:#d6dedb;transition:width .25s var(--m-ease),background-color .25s}
.ttlb-steps .s span{font-size:12px;font-weight:400;line-height:1;color:#9fb0ab;transition:color .25s}
.ttlb-steps .s.cur i{width:32px;background:var(--accent)}.ttlb-steps .s.cur span{color:var(--accent)}
.ttlb-steps .s.ok i{background:var(--accent)}.ttlb-steps .s.ok span{color:rgba(14,94,87,.7)}.ttlb-steps .s.ok{cursor:pointer}
/* guest rows in the sample format: icon, name, "age 13+" grey, counter on the right */
.ttlb-row{display:flex;align-items:center;gap:10px;background:#eef3f1;border-radius:12px;padding:12px 12px 12px 14px;font-size:16px;color:var(--ink)}
.ttlb-row .ri{width:22px;height:22px;flex:none;color:var(--ink)}.ttlb-row .ri svg{width:22px;height:22px;display:block}
.ttlb-row .tx{display:flex;align-items:baseline;gap:8px;flex:1;min-width:0}.ttlb-row .tx em{font-style:normal;font-size:14px;color:var(--muted)}
.ttlb-cnt{display:flex;align-items:center;gap:10px;margin-left:auto}.ttlb-cnt b{min-width:22px;text-align:center;font:400 18px var(--ff-body)}
.ttlb-cnt button{width:36px;height:36px;border-radius:99px;border:1.5px solid var(--accent);background:var(--card);color:var(--accent);font:400 20px var(--ff-body);line-height:1;display:grid;place-items:center;cursor:pointer;padding:0}
.ttlb-cnt button.f{background:var(--accent);color:#fff}.ttlb-cnt button:disabled{opacity:.35;cursor:default}
.ttlb-case{font:400 12px var(--ff-body);letter-spacing:.08em;text-transform:uppercase;color:var(--sunset);margin:0 0 -4px}
/* calendar: open days bold, few spots a gold dot, not enough for the party struck through */
.ttlb-cal{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.ttlb-cal .mh{display:flex;justify-content:space-between;align-items:center;font-weight:400;font-size:14px;margin-bottom:6px}.ttlb-cal .mh span{color:var(--accent)}
.ttlb-cal .mh button{border:0;background:none;font:400 18px var(--ff-body);color:var(--ink);cursor:pointer;padding:0 8px;line-height:1}.ttlb-cal .mh button:disabled{color:#c3cdc9;cursor:default}
.ttlb-cal .g{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center;font-size:14px}
.ttlb-cal .g i{font:400 12px var(--ff-body);color:var(--muted);font-style:normal;text-transform:uppercase}
.ttlb-cal .g em{font-style:normal;padding:5px 0;border-radius:8px;color:#9fb0ab;position:relative;border:0;background:none;font-family:inherit;font-size:14px}
.ttlb-cal .g em.ok{color:var(--ink);cursor:pointer;font-weight:400}.ttlb-cal .g em.on{background:var(--accent);color:#fff}
.ttlb-cal .g em.few::after{content:"";position:absolute;left:50%;bottom:1px;width:5px;height:5px;margin-left:-2.5px;border-radius:99px;background:var(--gold)}.ttlb-cal .g em.on.few::after{background:#fff}
.ttlb-cal .g em.no{color:#c3cdc9;text-decoration:line-through;text-decoration-color:#c3cdc9;cursor:pointer}
.ttlb-leg{display:flex;gap:14px;flex-wrap:wrap;font:400 12px var(--ff-body);color:var(--muted);letter-spacing:.04em;margin:-4px 0 0}.ttlb-leg i{display:inline-block;width:7px;height:7px;border-radius:99px;background:var(--gold);margin-right:5px;vertical-align:middle}.ttlb-leg s{color:#c3cdc9}
.ttlb-hint{font-size:12px;color:var(--ink);background:var(--gold-soft);border-radius:10px;padding:8px 10px;margin:0}
/* few open dates: chips instead of a month */
.ttlb-dchips{display:flex;flex-wrap:wrap;gap:8px}.ttlb-dchip{border:1.5px solid var(--line);background:var(--card);border-radius:12px;padding:8px 12px;line-height:1.15;cursor:pointer;min-width:84px;text-align:left;font-family:inherit;color:var(--ink)}
.ttlb-dchip small{display:block;font:400 12px var(--ff-body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}.ttlb-dchip b{font:400 16px var(--ff-body)}.ttlb-dchip em{font-style:normal;display:block;font-size:12px;color:var(--sunset);margin-top:2px}
.ttlb-dchip.on{background:var(--accent);border-color:var(--accent);color:#fff}.ttlb-dchip.on small,.ttlb-dchip.on em{color:#cfe7e2}.ttlb-dchip.no{opacity:.5;text-decoration:line-through}
/* the lane slides right-to-left in 450 ms; a finger drags it */
.ttlb-track{overflow:hidden;position:relative;touch-action:pan-y;transition:height .45s var(--m-ease)}.ttlb-lane{display:flex;align-items:flex-start;transition:transform .45s var(--m-ease);will-change:transform}.ttlb-lane.drag{transition:none}
.ttlb-pane{flex:none;width:100%;display:flex;flex-direction:column;gap:10px;min-width:0}
@media(prefers-reduced-motion:reduce){.ttlb-lane,.ttlb-track{transition:none}.ttlb-sheet,.ttlb-dim,.ttlb-hd .fw{animation:none}}
.ttlb-lab{font:400 12px var(--ff-body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:6px 0 -4px}
.ttlb-chips{display:flex;flex-wrap:wrap;gap:8px}.ttlb-chip{border:1px solid var(--line);background:var(--card);border-radius:99px;padding:8px 13px;font:400 14px var(--ff-body);color:var(--ink);cursor:pointer}
.ttlb-chip.on{background:var(--accent);color:#fff;border-color:var(--accent)}.ttlb-chip.soft{color:#9fb0ab;border-style:dashed}.ttlb-chip.soft.on{color:#fff;border-style:solid}
/* phone field that fills itself: a remembered number rests calm, typing shows a caret, the code goes out on its own */
.ttlb-inp{display:flex;align-items:center;gap:8px;background:#eef3f1;border-radius:12px;padding:10px 14px;font-size:16px}
.ttlb-inp:focus-within{outline:2px solid var(--accent)}.ttlb-inp input{font:inherit;font-size:16px;background:none;border:0;outline:0;color:var(--ink);min-width:0;padding:0}
.ttlb-inp.good{outline:2px solid var(--accent);background:var(--accent-soft)}.ttlb-inp.bad{outline:2px solid var(--sunset);background:#fbeeec}.ttlb-inp.good:focus-within{outline-color:var(--accent)}.ttlb-inp.bad:focus-within{outline-color:var(--sunset)}.ttlb-inp .num{flex:1}
.ttlb-inp .chg{font:400 12px var(--ff-body);color:var(--accent);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;border:0;background:none;padding:0}
.ttlb-inp .wa{width:22px;height:22px;color:var(--accent);flex:none}.ttlb-inp .wa svg{width:22px;height:22px;display:block}
.ttlb-stat{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted);margin:-2px 0 0}.ttlb-stat i{width:8px;height:8px;border-radius:99px;background:var(--line);flex:none}
.ttlb-stat.sent i{background:var(--gold)}.ttlb-stat.ok i{background:var(--accent)}.ttlb-stat.err i{background:var(--sunset)}.ttlb-stat.warn{color:#b7791f}.ttlb-stat.warn i{background:var(--gold)}.ttlb-stat.err{color:var(--sunset)}.ttlb-stat b{color:var(--ink);font-weight:400}
.ttlb-code{display:flex;gap:10px;justify-content:center;position:relative}.ttlb-code span{width:52px;height:56px;border-radius:12px;border:1.5px solid var(--accent);display:grid;place-items:center;font:400 24px var(--ff-body);background:var(--card)}
.ttlb-code span.on{box-shadow:0 0 0 4px var(--accent-soft)}.ttlb-code input{position:absolute;inset:0;width:100%;height:100%;opacity:0;font-size:24px;border:0;background:none}
.ttlb-fine{font-size:12px;color:var(--muted);line-height:1.4;margin:0;text-align:center}.ttlb-fine button{border:0;background:none;color:var(--accent);font:inherit;cursor:pointer;padding:0}.ttlb-fine button:disabled{color:var(--muted);cursor:default}
.ttlb-sum{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:14px;background:#eef3f1;border-radius:12px;padding:12px 14px}.ttlb-sum span{color:var(--muted)}.ttlb-sum b{font-weight:400}
.ttlb-tot{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);padding-top:10px}.ttlb-tot b{font-family:var(--ff-body);font-weight:400;font-size:24px;color:var(--accent)}.ttlb-tot span{font-size:14px;color:var(--muted)}
.ttlb-foot{margin-top:auto;display:flex;align-items:center;gap:12px;padding-top:10px;border-top:1px solid var(--line)}
/* 26.10.2026 (owner's constructor): the price footer opens step 1, so it sits on top with the line below; the header and pills live in the panes */
.ttlb-foot.top{margin-top:0;padding-top:0;padding-bottom:10px;border-top:0;border-bottom:1px solid var(--line)}.ttlb-pane>*{flex:none}
.ttlb-foot .p{flex:1;line-height:1.2}.ttlb-foot .p b{font-family:var(--ff-body);font-weight:400;font-size:24px;color:var(--accent);display:block}.ttlb-foot .p span{font-size:12px;color:var(--muted)}
.ttlb-foot .w{font:400 12px var(--ff-body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:right;line-height:1.3}
/* A11 (26.10.2026, The_Ten_List_62): the sheet also lives on ranking pages, which have no .pl-btn rule (it is in the place-page CSS only), so the
   Book button there was a grey system button; the base style lives here now, the hover matches the skin (audit A1) */
.ttlb-foot .pl-btn{display:flex;align-items:center;justify-content:center;padding:14px 18px;border-radius:99px;font:400 16px var(--ff-body);text-decoration:none;border:1.5px solid var(--accent);cursor:pointer}
.ttlb-foot .pl-btn:not(.pri){color:var(--accent);background:var(--card)}.ttlb-foot .pl-btn.pri{background:var(--accent);color:#fff}
@media(hover:hover){.ttlb-foot .pl-btn.pri:hover{background:#0b514b}.ttlb-foot .pl-btn:not(.pri):hover{background:var(--accent-soft)}}
.ttlb-foot .pl-btn{width:auto;flex:1;white-space:nowrap}.ttlb-foot .pl-btn:disabled{opacity:.5;cursor:default}
.ttlb-done{text-align:center;padding:6px 0}.ttlb-done .ok{width:56px;height:56px;border-radius:99px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;margin:0 auto 10px}.ttlb-done .ok svg{width:30px;height:30px}
.ttlb-done h4{font-family:var(--ff-display);font-weight:400;font-size:24px;margin:0 0 4px}.ttlb-done p{margin:0 0 10px;font-size:14px;color:var(--muted)}
.ttlb-panel .ttlb-foot .pl-btn{font-size:14px;padding:12px 14px}.ttlb-panel .ttlb-foot .p span{font-size:12px}
/* B3a (owner 26.10.2026): the sheet without a schedule. The button rule is self-contained: list pages carry no .pl-btn of their own. */
.ttlb-empty{background:#eef3f1;border-radius:12px;padding:18px 16px 16px;text-align:center}.ttlb-empty .ic{width:48px;height:48px;border-radius:99px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;margin:0 auto 8px}.ttlb-empty .ic svg{width:26px;height:26px}.ttlb-empty h4{font-family:var(--ff-display);font-weight:400;font-size:24px;margin:0 0 4px;color:var(--ink)}.ttlb-empty p{margin:0 0 12px;font-size:14px;color:var(--muted);line-height:1.4}.ttlb-empty .bt{display:flex;gap:10px;max-width:440px;margin:0 auto}
.ttlb-empty .bt .pl-btn{display:flex;align-items:center;justify-content:center;flex:1;width:auto;padding:12px 14px;border-radius:99px;font:400 16px var(--ff-body);text-decoration:none;border:1.5px solid var(--accent);color:var(--accent);background:var(--card);cursor:pointer;white-space:nowrap}.ttlb-empty .bt .pl-btn.pri{background:var(--accent);color:#fff}.ttlb-empty .bt .pl-btn:disabled{opacity:.5;cursor:default}
/* The Gravity block on the ranking pages (ensure-gravity-book.mjs). Since 26.10.2026 ~23:2x (owner's button "Yes, booking right in the card",
   The_Ten_List_71) the block carries no booking of its own: the labeled text, a standard place card .pc (photo, "Padonan, Canggu · Partner", name,
   Group class 2 hours, From 300k IDR) and Book a class, both plain links to the place page /canggu/recovery/gravity-stretching; the same on every width.
   The card has no entry animation (with the skin's m-in on .pc, motion.js held the studio photo with the card, stand 26.10: +684/+949 ms, limit 500).
   The D1 two-column block (the offer card aside with the panel in it, PR 15) is gone. */
.gbook{margin:12px 0 0;display:flex;align-items:center;gap:12px;flex-wrap:wrap}.gbook .btn{margin:0}.gbook-note{font:400 12px var(--ff-body);letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.cross .gbook-pc{display:flex;max-width:300px;margin:14px 0 0;animation:none}.cross .gbook-pc:hover{transform:none}
/* The card of the Gravity place page is the booking (data-book-auto): from 761 px the builder prints step 1 of the panel inside the card
   (.ttlb-panel[data-ttlb-pre]) and book.js adopts it, so the first frame already has it; the card keeps its partner flag on top and the two honesty
   lines under the panel, is not sticky (it grows downward step by step) and has no entry animation. The phone keeps the standard card, its
   Book a class button and the sheet. */
@media(max-width:760px){.pl-side>.ttlb-panel[data-ttlb-pre]{display:none}}
@media(min-width:761px){
.pl-side[data-book-auto]{position:static;animation:none}
.pl-side[data-book-auto]>:not(.ttlb-panel):not(.pl-flag):not(.pl-chk){display:none}
.pl-side.ttlb-on[data-book-auto]>.pl-flag{display:block}.pl-side.ttlb-on[data-book-auto]>.pl-chk{display:flex}
.pl-side[data-book-auto]>.ttlb-panel{order:1}.pl-side[data-book-auto]>.pl-chk{order:2}
.pl-side[data-book-auto] .ttlb-hd .x{display:none}
}
.ttlb-area{text-decoration:none}
/* Step 3: the ticket, sketch A (owner's button 26.10.2026; scripts/eskizy/bilet-build.mjs on the dev stand): code in a dashed frame, one line of facts,
   Save to Photos + Add to calendar, the summary folded. The same block in the phone sheet and in the D1 panel on the computer. */
.tk{display:flex;flex-direction:column;gap:12px}
.tk .ok{width:40px;height:40px;border-radius:99px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;flex:none}.tk .ok svg{width:22px;height:22px}
.tk-top{display:flex;align-items:center;gap:12px}.tk-top .t b{display:block;font-size:20px;line-height:1.2}.tk-top .t span{display:block;font-size:13px;color:var(--muted)}
.tk-code{border:1.5px dashed var(--accent);border-radius:12px;padding:10px 14px;text-align:center}.tk-code small{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}.tk-code b{display:block;font-weight:400;font-size:34px;letter-spacing:.06em;color:var(--accent);line-height:1.15}
.tk-code.soft{border-style:solid;border-color:var(--line);background:#eef3f1}.tk-code.soft b{font-size:17px;color:var(--ink);letter-spacing:0}
.tk-meta{margin:0;text-align:center;line-height:1.3}.tk-meta b{display:block;font-weight:400;font-size:17px}.tk-meta span{font-size:13px;color:var(--muted)}
.tk-act{display:flex;gap:10px}.tk .pl-btn{display:flex;align-items:center;justify-content:center;gap:8px;flex:1;padding:12px 14px;border-radius:99px;font:400 16px var(--ff-body);border:1.5px solid var(--accent);color:var(--accent);background:var(--card);cursor:pointer;white-space:nowrap}.tk .pl-btn.pri{background:var(--accent);color:#fff}.tk .pl-btn svg{width:18px;height:18px;flex:none}
@media(hover:hover){.tk .pl-btn.pri:hover{background:#0b514b}.tk .pl-btn:not(.pri):hover{background:var(--accent-soft)}}
.tk .ttlb-fine{text-align:center}
.tk-det{border-top:1px solid var(--line);padding-top:8px}.tk-det summary{font-size:13px;color:var(--muted);cursor:pointer;letter-spacing:.06em;text-transform:uppercase}.tk-det .ttlb-sum{margin-top:8px}.tk-det .ttlb-fine{text-align:left}
.tk-close{border:0;background:none;color:var(--accent);font:400 16px var(--ff-body);cursor:pointer;padding:6px;align-self:center}
/* the partner note under the name on the Gravity place page (badge "partner", one line why it has no number and no rating) */
.pl-partner{display:flex;gap:10px;align-items:flex-start;background:var(--accent-soft);border-radius:10px;padding:10px 14px;font-size:14px;line-height:1.45;margin:14px 0 0;max-width:66ch}.pl-partner .badge{flex:none;margin-top:1px}