/* REVL ARTIFACT SHELL: studio page LIVE TEST, "sign in to book" as locked: AR, the AM drawer in
   white (Macca, 3 Oct). From round-2/signin/signin.css with the other treatments and the rail left
   out. True black type on white, one motion speed (.35s), entrances only. */

:root{--si-t:.35s;--si-e:cubic-bezier(.2,.7,.2,1)}
html{scrollbar-gutter:stable}
html.si-lock{overflow:hidden}

/* ================= the timetable rows ================= */
.row .si-bk-btn{min-width:108px}
.row .si-bk-btn svg{width:12px;height:12px}
.row .si-bk-btn[aria-expanded="true"]{border-color:var(--grey)}
.row .si-bk-btn.is-booked,.row .si-bk-btn.is-booked:hover{border-color:transparent;background:none;color:var(--white);cursor:default;gap:8px}
.row.si-wait .row-note{visibility:hidden}

/* the quiet signed-in line */
.si-who{display:flex;align-items:center;gap:18px;font-family:var(--fmono);font-weight:400;font-size:12px;letter-spacing:-.02em;text-transform:uppercase;color:var(--dim)}
.si-who .btn-text,.si-me .btn-text{font-size:12px;padding:6px 0;color:var(--grey);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line)}
.si-who .btn-text:hover,.si-me .btn-text:hover{color:var(--white)}
.si-who-side{margin-top:44px}
.si-who-main{margin-top:20px;padding-left:16px}
@media (min-width:1025px){ .si-who-main{display:none} }
@media (max-width:1024px){ .si-who-side{display:none} }

/* ================= the flow, shared ================= */
.si-body{display:flex;flex-direction:column;align-items:stretch}
.si-step-in{animation:siIn var(--si-t) var(--si-e) both}
@keyframes siIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.si-head{margin:0 0 26px}
.si-h{margin:0;font-size:30px;color:var(--white);outline:none}
.si-line{margin:12px 0 0;font-weight:400;font-size:13px;color:var(--beige)}
.si-sent{margin:12px 0 0;color:var(--dim);font-size:17px;overflow-wrap:anywhere}
.si-sent span{color:var(--white)}
.si-f{display:flex;flex-direction:column;gap:16px}
.si-field label{line-height:17px}
.si-f .box input{width:0}
.si-new,.si-resend{padding-left:0!important}
.si-d::selection{background:transparent}
.si-go{width:100%;height:56px}
.si-new,.si-resend{align-self:flex-start;margin-top:14px}
.si-code{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.si-d{width:100%;min-width:0;height:64px;padding:0;text-align:center;background:var(--panel);border:1px solid transparent;border-radius:4px;outline:none;font-family:var(--disp);font-weight:700;font-size:28px;color:var(--white);caret-color:var(--white);transition:border-color .2s ease}
.si-d:focus{border-color:var(--dim)}

.si-bk{display:flex;flex-direction:column;margin:0 0 30px}
.si-bk p{margin:0}
.si-bk-name{font-family:var(--fut);font-weight:400;text-transform:none;font-size:20px;line-height:1.3;color:var(--white);margin-bottom:2px!important}
.si-bk-when{color:var(--white);font-size:18px}
.si-bk-coach{color:var(--dim);font-size:17px;margin-top:2px!important}
.si-bk-addr{color:var(--grey);font-size:17px;line-height:1.5;margin-top:16px!important}
.si-bk-addr span{display:block}
.si-as{margin:16px 0 0;font-weight:400;font-size:12px;color:var(--dim);text-align:center}

.si-sum p{margin:0}
.si-when{font-weight:400;font-size:13px;color:var(--beige);display:flex;gap:16px;flex-wrap:wrap}
.si-wl{font-weight:700}
.si-name{font-size:36px;color:var(--white);margin-top:12px!important}
.si-coach{font-size:17px;color:var(--dim);margin-top:6px!important}

/* ================= overlays ================= */
.si-layer{position:absolute;top:0;left:0;width:100%;height:0;z-index:90}
.si-scrim{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.64);animation:siFade var(--si-t) ease both}
@keyframes siFade{from{opacity:0}to{opacity:1}}
.si-panel{z-index:91;background:var(--midblack);color:var(--grey)}
.si-x{position:absolute;top:18px;right:18px;z-index:3;width:44px;height:44px;display:grid;place-items:center;border-radius:4px;color:var(--dim);transition:color .2s ease}
.si-x:hover{color:var(--white)}
.si-x svg{width:14px;height:14px}
@keyframes siRight{from{transform:translateX(100%)}to{transform:none}}
@keyframes siUp{from{transform:translateY(100%)}to{transform:none}}

/* ---------- AM: side drawer ---------- */
.si-AM .si-panel{position:fixed;top:0;right:0;bottom:0;width:min(480px,100vw);overflow-y:auto;overscroll-behavior:contain;padding:44px 48px 48px;animation:siRight var(--si-t) var(--si-e) both}
.si-AM .si-top{padding-right:48px;margin-bottom:72px}
.si-AM .si-x{top:30px;right:30px}
.si-AM .si-h{font-size:24px}
/* the class is already in the summary: the booked step adds only the address */
.si-has-sum .si-bk-name,.si-has-sum .si-bk-when,.si-has-sum .si-bk-coach{display:none}
.si-has-sum .si-bk-addr{margin-top:0!important}

/* ================= laptop heights ================= */
@media (min-width:900px) and (max-height:820px){
  .si-AM .si-top{margin-bottom:48px}
}

/* ================= phones ================= */
@media (max-width:720px){
  .row .si-bk-btn{min-width:92px}
  .row.si-wait .row-coach::after{content:none}
  .si-who-main{padding-left:0}

  .si-h{font-size:26px}
  .si-d{height:58px;font-size:24px}

  /* the bottom sheet */
  .si-AM .si-panel{position:fixed;top:auto;left:0!important;right:0;bottom:0;width:auto;max-height:calc(100svh - 40px);overflow-y:auto;overscroll-behavior:contain;border:0;border-radius:6px 6px 0 0;padding:28px 20px calc(24px + env(safe-area-inset-bottom));animation:siUp var(--si-t) var(--si-e) both}
  .si-AM .si-top{margin-bottom:34px;padding-right:44px}
  .si-AM .si-name{font-size:30px}
  .si-AM .si-x{top:16px;right:10px}
}

/* ---------- AR: the AM drawer in white (Macca, 3 Oct: "going off that grey ... just go white") ---------- */
.si-white .si-AM .si-panel{background:var(--white);color:var(--ground)}
.si-white .si-AM .si-h,.si-white .si-AM .si-name,.si-white .si-AM .si-bk-name,.si-white .si-AM .si-bk-when{color:var(--ground)}
.si-white .si-AM .si-when,.si-white .si-AM .si-line{color:rgba(0,0,0,.6)}
.si-white .si-AM .si-coach,.si-white .si-AM .si-bk-coach,.si-white .si-AM .si-sent,.si-white .si-AM .si-as{color:rgba(0,0,0,.6)}
.si-white .si-AM .si-sent span,.si-white .si-AM .si-bk-addr{color:var(--ground)}
.si-white .si-AM .field label{color:rgba(0,0,0,.6)}
.si-white .si-AM .box{background:var(--white);border-color:rgba(0,0,0,.2)}
.si-white .si-AM .box:focus-within{border-color:var(--ground)}
.si-white .si-AM .box input{color:var(--ground);caret-color:var(--ground)}
.si-white .si-AM .box input:-webkit-autofill{-webkit-text-fill-color:var(--ground);-webkit-box-shadow:0 0 0 1000px var(--white) inset}
.si-white .si-AM .si-d{background:var(--white);border-color:rgba(0,0,0,.2);color:var(--ground);caret-color:var(--ground)}
.si-white .si-AM .si-d:focus{border-color:var(--ground)}
.si-white .si-AM .btn-primary{background:var(--ground);border-color:var(--ground);color:var(--white)}
.si-white .si-AM .btn-text{color:rgba(0,0,0,.6);text-decoration-color:rgba(0,0,0,.2)}
.si-white .si-AM .btn-text:hover{color:var(--ground)}
/* the waitlist/cap screens' app-store buttons (Macca, 4 Oct): a plain .btn had no white-panel
   treatment before now (every other drawer button is .btn-primary or .btn-text) — white text on
   the white panel was invisible. */
.si-white .si-AM .app p{color:rgba(0,0,0,.6)}
.si-AM .si-body .app{margin-top:0}
.si-AM .si-body .app + .si-f{margin-top:28px}
.si-white .si-AM .app .btn{border-color:rgba(0,0,0,.2);color:var(--ground)}
.si-white .si-AM .app .btn:hover{border-color:rgba(0,0,0,.4)}
.si-white .si-AM .si-x{color:rgba(0,0,0,.6)}
.si-white .si-AM .si-x:hover{color:var(--ground)}
.si-white .si-AM .err{color:var(--ground)}

/* live: the server's words, a busy button, a failed booking */
.si-err{margin:0;font-size:15px;color:var(--white)}
.si-white .si-AM .si-err{color:var(--ground)}
.si-AM .si-go[disabled]{opacity:.6;cursor:default}
.si-AM[data-step="busy"] .si-h{color:rgba(0,0,0,.6)}
.si-AM[data-step="fail"] .si-h{font-size:22px;line-height:1.25}
.si-white .si-AM .field.has-err .box{border-color:var(--ground)}
.si-white .si-AM .field.has-err label{color:var(--ground)}