/* ============================================================
   Surf China — the surf-session picker's look (Assets/sc-session-picker.js), on
   /sessions and Book Your Wave. Both pages define the shared tokens (--ocean,
   --sand, --sand-dark, --white, --charcoal, --warm-gray, --gold, --ocean-deep,
   --r-card, --r-pill); the picker's own are here.
   ============================================================ */
:root{
  --lv-b2-bg:#faf1dc; --lv-b2-br:#e3ca92; --lv-b2-ink:#856327;
  --lv-b4-bg:#e3f1f2; --lv-b4-br:#a3d0d4; --lv-b4-ink:#1d666e;
  --lv-i-bg:#e2edf4;  --lv-i-br:#9fc3d6;  --lv-i-ink:#0a4d68;
  --lv-a-bg:#fbe8e0;  --lv-a-br:#eab9a5;  --lv-a-ink:#a04c2a;
  --ease:cubic-bezier(.23,1,.32,1);
}
.panel{background:var(--white);border:1px solid var(--sand-dark);border-radius:var(--r-card)}
/* the level filter's toggle */
.fchip{border:1px solid var(--sand-dark);background:var(--white);border-radius:var(--r-pill);padding:.55rem 1.15rem;
  font-size:.85rem;font-weight:500;display:inline-flex;align-items:center;gap:.45rem;
  transition:border-color .2s var(--ease),background .2s var(--ease),color .2s var(--ease),transform .16s var(--ease)}
.fchip:hover{border-color:var(--ocean)}
.fchip:active{transform:scale(.96)}
.fchip[aria-pressed="true"]{background:var(--ocean);border-color:var(--ocean);color:var(--white)}
.fchip .cds{font-family:'Montserrat',sans-serif;font-size:.66rem;font-weight:600;opacity:.65}

/* day strip */
.strip-wrap{margin-bottom:.9rem}
.months{display:flex;gap:.45rem;margin-bottom:.7rem}
.months[hidden]{display:none}
.mbtn{border:1px solid var(--sand-dark);background:var(--white);border-radius:var(--r-pill);padding:.45rem .95rem;
  font-size:.78rem;font-weight:500;transition:border-color .2s var(--ease),background .2s var(--ease),color .2s var(--ease)}
.mbtn:hover{border-color:var(--ocean)}
.mbtn[aria-selected="true"]{background:var(--ocean);border-color:var(--ocean);color:var(--white)}
.strip{display:flex;gap:.45rem;overflow-x:auto;padding:.25rem .15rem .7rem;scroll-snap-type:x proximity;
  scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.strip::-webkit-scrollbar{height:4px}
.strip::-webkit-scrollbar-thumb{background:var(--sand-dark);border-radius:2px}
.dbtn{flex:0 0 auto;scroll-snap-align:center;width:60px;padding:.55rem .2rem .6rem;text-align:center;
  border:1px solid var(--sand-dark);border-radius:var(--r-card);background:var(--white);position:relative;
  transition:border-color .2s var(--ease),background .2s var(--ease),transform .16s var(--ease)}
.dbtn:hover:not([disabled]){border-color:var(--ocean)}
.dbtn:active:not([disabled]){transform:scale(.96)}
.mbtn,.dbtn,.stp{cursor:pointer}   /* a page without /sessions' button reset (Book Your Wave) */
.dbtn[disabled]{opacity:.4;cursor:not-allowed}
.dbtn .dow{display:block;font-size:.6rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--warm-gray)}
.dbtn .num{display:block;font-family:'Montserrat',sans-serif;font-size:1.1rem;font-weight:800;line-height:1.25;font-variant-numeric:tabular-nums}
.dbtn .mon{display:block;font-size:.58rem;letter-spacing:.07em;text-transform:uppercase;color:var(--warm-gray)}
.dbtn[aria-pressed="true"]{background:var(--ocean);border-color:var(--ocean)}
.dbtn[aria-pressed="true"] .dow,.dbtn[aria-pressed="true"] .num,.dbtn[aria-pressed="true"] .mon{color:var(--white)}
.dbtn.hol .num{color:#b03a2e}
.dbtn[aria-pressed="true"].hol .num{color:var(--gold)}
.dbtn .pip{position:absolute;top:4px;right:5px;min-width:15px;height:15px;border-radius:var(--r-pill);background:var(--gold);
  color:var(--ocean-deep);font-family:'Montserrat',sans-serif;font-size:.58rem;font-weight:700;line-height:15px;padding:0 3px}

/* day panel */
.panel{overflow:hidden;min-width:0}
.panel__head{padding:1rem clamp(1rem,3vw,1.4rem);border-bottom:1px solid var(--sand-dark);
  display:flex;align-items:baseline;justify-content:space-between;gap:.8rem;flex-wrap:wrap}
.panel__date{font-family:'Montserrat',sans-serif;font-size:1.05rem;font-weight:800;letter-spacing:-.01em}
.panel__meta{font-size:.76rem;color:var(--warm-gray)}
.panel__meta strong{color:var(--ocean);font-weight:600}
.panel__meta .pk{color:#b03a2e;font-weight:600}
.lane{min-width:0;padding:1rem clamp(1rem,3vw,1.4rem);border-bottom:1px solid var(--sand-dark)}
.lane:last-child{border-bottom:none}
.lane__top{display:flex;align-items:center;justify-content:space-between;gap:.7rem;margin-bottom:.65rem;flex-wrap:wrap}
.lane__name{font-size:.8rem;font-weight:600;display:flex;align-items:center;gap:.45rem}
.lane__price{font-size:.76rem;color:var(--warm-gray);font-variant-numeric:tabular-nums}
.lane__price b{font-family:'Montserrat',sans-serif;color:var(--charcoal);font-weight:700;font-size:.86rem}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(148px,100%),1fr));gap:.5rem;min-width:0}
.slot{display:grid;grid-template-columns:1fr 74px;align-items:center;gap:.3rem;
  border:1px solid var(--sand-dark);border-radius:var(--r-card);background:var(--white);padding:.5rem .55rem .5rem .7rem;
  cursor:pointer;transition:border-color .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease)}
.slot:hover:not(.gone){border-color:var(--ocean)}
.slot:not([aria-pressed="true"]):not(.gone):hover{background:var(--sand)}
.slot:focus-visible{outline:2px solid var(--ocean);outline-offset:2px}
.slot[aria-pressed="true"]{border-color:var(--ocean);background:rgba(10,77,104,.06);box-shadow:inset 0 0 0 1px var(--ocean)}
.slot.gone{opacity:.38;cursor:not-allowed}
/* time and code share a line when the chip is wide enough; on a phone the code
   wraps under the time rather than slide beneath the reserved stepper column */
.slot__l{min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:.2rem .45rem}
.slot__t{font-family:'Montserrat',sans-serif;font-size:.9rem;font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums}
/* the stepper column is always laid out, only hidden — so a chip never resizes when picked */
.slot__x{font-family:'Montserrat',sans-serif;font-size:.6rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#b4461f;white-space:nowrap}
.slot.gone .slot__x{color:inherit}
.slot__s{display:flex;align-items:center;justify-content:flex-end;gap:.12rem;visibility:hidden}
.slot[aria-pressed="true"] .slot__s{visibility:visible}
.stp{width:24px;height:24px;border-radius:50%;border:1px solid var(--sand-dark);background:var(--white);
  font-size:.85rem;line-height:1;color:var(--charcoal);display:flex;align-items:center;justify-content:center;
  transition:background .2s var(--ease),border-color .2s var(--ease),transform .16s var(--ease)}
.stp:hover:not([disabled]){background:var(--sand);border-color:var(--ocean)}
.stp:active:not([disabled]){transform:scale(.9)}
.stp[disabled]{opacity:.3;cursor:default}
.slot__n{font-family:'Montserrat',sans-serif;font-size:.86rem;font-weight:800;min-width:1.4ch;text-align:center;font-variant-numeric:tabular-nums}
.lv{display:inline-flex;align-items:center;justify-content:center;font-family:'Montserrat',sans-serif;font-size:.6rem;font-weight:700;
  letter-spacing:.06em;padding:.14rem .32rem;border-radius:5px;border:1px solid transparent}
.lv--B2{background:var(--lv-b2-bg);border-color:var(--lv-b2-br);color:var(--lv-b2-ink)}
.lv--B4{background:var(--lv-b4-bg);border-color:var(--lv-b4-br);color:var(--lv-b4-ink)}
.lv--I1,.lv--I2{background:var(--lv-i-bg);border-color:var(--lv-i-br);color:var(--lv-i-ink)}
.lv--A1,.lv--A2{background:var(--lv-a-bg);border-color:var(--lv-a-br);color:var(--lv-a-ink)}
.empty{padding:2.4rem 1.5rem;text-align:center;color:var(--warm-gray);font-size:.9rem}
.empty strong{display:block;font-family:'Montserrat',sans-serif;color:var(--charcoal);font-size:1rem;margin-bottom:.4rem}

/* wave level: one card per level — the filter AND the introduction. Tapping the card
   ticks the level; its watch buttons open the setting's clip without ticking anything. */
.lvcs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
@media(max-width:700px){.lvcs{grid-template-columns:minmax(0,1fr)}}
.lvc{display:flex;flex-direction:column;gap:.45rem;background:var(--white);border:1px solid var(--sand-dark);
  border-radius:var(--r-card);padding:.85rem .9rem .9rem;cursor:pointer;
  transition:border-color .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease)}
.lvc:hover{border-color:var(--ocean)}
.lvc:has(.fchip[aria-pressed="true"]){border-color:var(--ocean);background:rgba(10,77,104,.05);box-shadow:inset 0 0 0 1px var(--ocean)}
.lvc .fchip{display:flex;align-items:center;justify-content:space-between;gap:.6rem;width:100%;border:0;border-radius:0;
  background:none;padding:0;font-family:'Montserrat',sans-serif;font-size:.98rem;font-weight:800;color:var(--charcoal);text-align:left}
.lvc .fchip:hover{border:0;color:var(--charcoal)}
.lvc .fchip:active{transform:none}
.lvc .fchip[aria-pressed="true"]{background:none;color:var(--charcoal)}
.lvc .fchip:focus-visible{outline:2px solid var(--ocean);outline-offset:4px;border-radius:4px}
.lvc__tick{flex:none;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--sand-dark);display:grid;place-items:center;
  font-size:.7rem;color:transparent;transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
.lvc .fchip[aria-pressed="true"] .lvc__tick{background:var(--ocean);border-color:var(--ocean);color:var(--white)}
.lvc__intro{font-size:.8rem;line-height:1.5;color:var(--warm-gray)}
.lvc__watch{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:auto;padding-top:.15rem}
.lvc .watch{font-size:.76rem;padding:.24rem .7rem .24rem .28rem}
.lvc .watch__play{width:20px;height:20px}
.lvc .watch__play::after{left:7px;top:5px}
/* watch buttons: play a setting's clip in the overlay */
.watch{display:inline-flex;align-items:center;gap:.45rem;border:1px solid var(--sand-dark);background:var(--white);
  border-radius:var(--r-pill);padding:.28rem .8rem .28rem .32rem;font-size:.8rem;font-weight:600;
  transition:border-color .2s var(--ease),background .2s var(--ease),transform .16s var(--ease)}
.watch:hover{border-color:var(--ocean);background:var(--sand)}
.watch:active{transform:scale(.97)}
.watch:focus-visible{outline:2px solid var(--ocean);outline-offset:2px}
.watch__play{position:relative;flex:none;width:22px;height:22px;border-radius:50%;background:var(--ocean)}
.watch__play::after{content:"";position:absolute;left:8px;top:6px;border-style:solid;border-width:5px 0 5px 8px;
  border-color:transparent transparent transparent var(--white)}

/* the clip overlay */
.clip{border:0;padding:0;margin:auto;width:min(720px,calc(100% - 2rem));max-height:calc(100% - 2rem);
  border-radius:var(--r-card);overflow:hidden;background:var(--white);color:var(--charcoal);
  box-shadow:0 24px 60px rgba(9,46,62,.35)}
.clip::backdrop{background:rgba(9,46,62,.62)}
html:has(.clip[open]){overflow:hidden}
.clip__media{position:relative;overflow:hidden;background:var(--ocean-deep);aspect-ratio:16/9}
.clip__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1}
/* a portrait clip (B2's iPhone footage, 3:4) is shown whole, never cropped to a band of
   wall: a taller box, contained, over a blurred copy of its own first frame */
.clip__media.tall{aspect-ratio:auto;height:min(62vh,560px)}
.clip__media.tall video{object-fit:contain}
.clip__media.tall::before{content:"";position:absolute;inset:-30px;background:var(--poster) center/cover no-repeat;
  filter:blur(22px) brightness(.55)}
.clip__body{padding:1rem 1.2rem 1.3rem}
.clip__head{display:flex;align-items:center;gap:.6rem}
.clip__head .lv{min-width:2.5rem;padding:.3rem .4rem;font-size:.7rem}
.clip__head h2{flex:1;font-size:1.15rem;font-weight:800;letter-spacing:-.01em}
.clip__x{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--sand-dark);font-size:1.25rem;line-height:1;
  color:var(--warm-gray);transition:border-color .2s var(--ease),color .2s var(--ease)}
.clip__x:hover{border-color:var(--ocean);color:var(--charcoal)}
.clip__meta{font-size:.78rem;color:var(--warm-gray);margin-top:.25rem}
.clip__desc{font-size:.88rem;line-height:1.55;margin-top:.6rem}
/* a phone gets a bottom sheet */
@media(max-width:560px){.clip{width:100%;max-width:100%;margin:auto 0 0;border-radius:var(--r-card) var(--r-card) 0 0}}