/* /assets/css/slots.css (2026-10-29; round 3 and 4 2026-10-30; moved from /sales-tools/lp-lab/ in round 4, when the live
   pages took it): the slot picker of the live /lp/ and /shindan/, their labs and the booking lab, the smallest booking Alex
   asked for: pick one open slot, type an email, one button. The real calendar on the live pages (/api/) and the booking lab
   (/sales-tools/api/booking/); sample slots on the two labs, which never send anything (slots.js, opts.api).
   Uses the pages' own tokens (--cream, --gold, --ink, --line, --muted, --tan, --jp, --serif). */
.sl{text-align:left}
.sl [hidden]{display:none!important}
.sl-sample{display:flex;align-items:center;justify-content:center;gap:8px;margin:-6px 0 16px;font-size:13.5px;letter-spacing:.04em;color:var(--muted)}
.sl-tag{display:inline-block;padding:0 .7em;border:1px solid var(--tan);border-radius:20px;font-size:12.5px;line-height:1.8;letter-spacing:.08em;color:var(--gold-d)}
.sl-days{display:grid;gap:0;border-top:1px solid var(--line)}
.sl-day{display:grid;grid-template-columns:7.2em minmax(0,1fr);align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.sl-dl{margin:0;font-size:15px;line-height:1.5;letter-spacing:.02em;color:var(--ink);white-space:nowrap}
.sl-dl .w{color:var(--muted)}
.sl-ts{display:flex;flex-wrap:wrap;gap:8px}
.sl-t{min-width:84px;min-height:46px;padding:0 14px;border:1px solid #d6cbb6;border-radius:10px;background:#fff;cursor:pointer;
  font-family:var(--serif);font-size:16px;letter-spacing:.04em;color:var(--ink);-webkit-tap-highlight-color:transparent;
  transition:background .25s cubic-bezier(.22,.61,.36,1),border-color .25s,color .25s}
@media(hover:hover){.sl-t:hover{border-color:var(--gold)}}
.sl-t[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.sl-t:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.sl-more{display:block;margin:12px auto 0;padding:8px 4px;border:0;background:none;cursor:pointer;font-family:var(--jp);font-size:14.5px;letter-spacing:.04em;
  color:var(--gold-d);text-decoration:underline;text-decoration-color:rgba(142,107,78,.45);text-underline-offset:5px;text-decoration-thickness:1px}
.sl-go{margin:20px 0 0;animation:slin .45s cubic-bezier(.22,.61,.36,1) both}
@keyframes slin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.sl-sum{margin:0 0 14px;padding:12px 14px;background:var(--cream);border:1px solid var(--line);font-size:15.5px;line-height:1.8;letter-spacing:.04em;text-align:center}
.sl-sum b{font-weight:400;font-family:var(--serif)}
.sl-lb{display:block;margin:0 0 8px;font-size:15px;letter-spacing:.06em}
.sl-em{display:block;width:100%;height:54px;margin:0;padding:0 14px;font-family:var(--jp);font-size:17px;color:var(--ink);background:#fff;border:1px solid #d6cbb6;
  border-radius:6px;-webkit-appearance:none;appearance:none;outline:none;transition:border-color .2s}
.sl-em:focus{border-color:var(--gold)}
.sl-em[aria-invalid="true"]{border-color:#9a5a43}
.sl-btn{width:100%;min-height:56px;margin-top:12px;font-size:16px}
.sl-err{margin:10px 0 0;font-size:14px;line-height:1.8;color:#7a3d2a;text-align:center}
.sl-err:empty{display:none}
.sl-soon{margin:18px 0 0;font-size:14px;line-height:1.95;letter-spacing:.02em;color:var(--muted);text-align:center}
.sl-soon a{color:var(--gold-d);text-decoration:underline;text-decoration-color:rgba(142,107,78,.45);text-underline-offset:5px;text-decoration-thickness:1px}
.sl-done{text-align:center;outline:none;animation:slin .5s cubic-bezier(.22,.61,.36,1) both}
/* short Japanese lines break only between phrases (the <wbr>s in slots.js) */
.sl-done p,.sl-soon,.sl-sum{word-break:keep-all;overflow-wrap:anywhere}
.sl-done h3{margin:4px 0 14px;font-family:var(--jp);font-size:19px;letter-spacing:.08em;font-weight:400}
.sl-done p{margin:0;font-size:15px;line-height:2;letter-spacing:.03em}
.sl-done .sl-when{font-size:16.5px;margin-bottom:10px}
.sl-done .sl-where{margin:0 0 12px;padding:12px 14px;background:var(--cream);border:1px solid var(--line);font-size:15px;line-height:1.9}
.sl-done .sl-lab{margin-top:14px;font-size:13px;color:var(--muted)}
@media(max-width:379px){.sl-day{grid-template-columns:6.4em minmax(0,1fr);gap:8px}.sl-dl{font-size:14px}.sl-t{min-width:76px;padding:0 10px}}
/* real data (round 3): the list's own line while it loads, when nothing is open or it cannot load; the note above it
   when a time was just taken; the button while it books; the booking number on the confirmation */
.sl-state{margin:0;padding:18px 4px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:15px;line-height:1.95;letter-spacing:.03em;
  color:var(--muted);text-align:center;word-break:keep-all;overflow-wrap:anywhere}
.sl-note{margin:0 0 14px;padding:10px 14px;background:var(--cream);border:1px solid var(--line);font-size:15px;line-height:1.9;letter-spacing:.03em;
  text-align:center;word-break:keep-all;overflow-wrap:anywhere}
.sl-state a,.sl-note a,.sl-err a,.sl-done a{color:var(--gold-d);text-decoration:underline;text-decoration-color:rgba(142,107,78,.45);text-underline-offset:5px;text-decoration-thickness:1px}
.sl-err{word-break:keep-all;overflow-wrap:anywhere}
.sl-btn:disabled{opacity:.6;cursor:default}
.sl-code{white-space:nowrap;font-size:.9em;color:var(--muted)}
.sl-done .sl-no{margin:12px 0 0;font-size:14.5px;letter-spacing:.06em;color:var(--muted)}
.sl-done .sl-no .nw{margin-left:.8em;font-family:var(--serif);font-size:16px;letter-spacing:.08em;color:var(--ink)}
@media(prefers-reduced-motion:reduce){.sl-go,.sl-done{animation:none}}
/* the place line keeps the address and the walk each on one line */
.sl-where .nw{white-space:nowrap}
/* the Turnstile widget (live pages, round 4): invisible unless Cloudflare asks for a click, then centred above the button */
.sl-cf{display:flex;justify-content:center}
.sl-cf iframe{margin-top:12px;max-width:100%}
/* round 5 (2026-10-30, Alex: "choose Studio and then available time"): the studio step, shown only when more than one
   studio has open times (the same quiet buttons as the times, a little wider), and the one-line time-zone note above the
   days (outside Japan time, and always in English) */
.sl-studios{margin:0 0 16px}
.sl-sh{margin:0 0 10px;font-size:15px;letter-spacing:.06em;text-align:center;color:var(--ink)}
.sl-ss{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.sl-s{min-width:120px;min-height:48px;padding:0 18px;border:1px solid #d6cbb6;border-radius:10px;background:#fff;cursor:pointer;
  font-family:var(--jp);font-size:16px;letter-spacing:.06em;color:var(--ink);-webkit-tap-highlight-color:transparent;
  transition:background .25s cubic-bezier(.22,.61,.36,1),border-color .25s,color .25s}
@media(hover:hover){.sl-s:hover{border-color:var(--gold)}}
.sl-s[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.sl-s:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.sl-zone{margin:0 0 10px;font-size:13.5px;line-height:1.8;letter-spacing:.03em;color:var(--muted);text-align:center;word-break:keep-all;overflow-wrap:anywhere}
/* English (the picker sets lang="en" on its box): the Latin serif for every word, and a wider day column for "Wed 4 Nov" */
.sl[lang="en"]{font-family:var(--serif)}
.sl[lang="en"] .sl-s,.sl[lang="en"] .sl-em,.sl[lang="en"] .sl-more,.sl[lang="en"] .sl-done h3{font-family:var(--serif)}
.sl[lang="en"] .sl-day{grid-template-columns:6.6em minmax(0,1fr)}
.sl[lang="en"] .sl-done p,.sl[lang="en"] .sl-soon,.sl[lang="en"] .sl-sum,.sl[lang="en"] .sl-state,.sl[lang="en"] .sl-note,.sl[lang="en"] .sl-err{word-break:normal}
/* no open time (2026-10-31): one large button that writes to us, LINE as a small link under it */
.sl-empty{text-align:center}
.sl-empty .sl-state{border-bottom:0;padding-bottom:6px;font-size:17px;color:var(--ink)}
.sl-mail{display:flex;align-items:center;justify-content:center;width:100%;min-height:58px;margin:10px 0 0;padding:0 18px;box-sizing:border-box;
  background:var(--gold);color:#fff;border-radius:15px;font-size:18px;letter-spacing:.08em;text-decoration:none;transition:opacity .2s}
.sl-mail:hover{opacity:.88}
.sl-mail:focus-visible{outline:2px solid var(--gold-d);outline-offset:3px}
.sl-alt{margin:14px 0 4px;font-size:15px;letter-spacing:.04em}
.sl-alt a{color:var(--gold-d);text-decoration:underline;text-decoration-color:rgba(142,107,78,.45);text-underline-offset:5px;text-decoration-thickness:1px}
.sl[lang="en"] .sl-mail{letter-spacing:.03em}