/* ShredRoster public demo: the few styles the public build adds on top of each page's own CSS.
   The waitlist page, the paired calls to action, and the "Join the waitlist" button in each demo's slim bar. */

/* links config.js turns off (an empty PRIVACY_URL or APP_URL): beats the footer's display:flex */
a[data-privacy][hidden],a[data-app-link][hidden],[data-privacy-wrap][hidden]{display:none}

/* ---------- the Private beta tag beside the logo (website, picker, 404 and every demo's slim bar) ---------- */
.beta-tag{display:inline-flex;align-items:center;flex:none;height:20px;margin-left:12px;padding:0 8px;border:1px solid rgba(246,213,107,.5);border-radius:999px;
  color:#f6d56b;font-family:inherit;font-style:normal;font-weight:600;font-size:10px;line-height:1;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap}
.dbar-logo .beta-tag{margin-left:10px;height:19px;font-size:9.5px}
.nav-logo,.pbar .logo,.dbar-logo{text-decoration:none}
@media (max-width:380px){
  .nav-logo img,.pbar .logo img{height:24px}
  .nav-logo .beta-tag,.pbar .logo .beta-tag{margin-left:8px}
}
/* the picker and 404 header: Back to site shrinks to its chevron on narrow phones, so the tag never crowds */
@media (max-width:420px){
  .pbar .back{font-size:0;gap:0;min-width:44px;justify-content:center}
  .pbar .back .ic{width:20px;height:20px}
}

/* ---------- website footer: contact ---------- */
.foot-contact{margin-top:14px;color:#a6a39b;font-size:.95rem}
.foot-contact a{color:var(--gold-b);text-decoration:none}
.foot-contact a:hover{text-decoration:underline}

/* ---------- website: See the demo next to Join the waitlist ---------- */
.nav .nav-demo{margin-right:-16px}
@media (max-width:1180px){.nav .nav-demo{display:none}}
.cta .hero-cta{gap:12px}
.cta .btn-ghost{background:transparent;border-color:rgba(13,11,7,.42);color:#0d0b07}
.cta .btn-ghost::after{background:linear-gradient(105deg,transparent 30%,rgba(13,11,7,.12) 48%,transparent 66%)}
.cta .btn-ghost:hover{border-color:#0d0b07;color:#0d0b07}
.cta .btn-ghost:focus-visible{outline-color:#0d0b07}
/* the pricing page's Lineup band is a dark card inside a light section: its ghost button keeps the dark-ground look */
.light .lb .btn-ghost{background:rgba(255,255,255,.03);color:var(--text)}
.light .lb .btn-ghost:hover{border-color:rgba(246,213,107,.5);color:var(--gold-b)}
.menu .btn + .btn{margin-top:8px}
.gf-card .wl-mini{display:grid;gap:22px}
.gf-card .wl-mini p{color:#d9d5cc;line-height:1.55}

/* ---------- waitlist page: the /login layout and motion, two roles ----------
   Coach is brand gold with the copy on the left; Gym owner is silver and the sides swap (box left, copy right).
   The colours, glow, buttons and focus rings come from the login page's role tokens (--rc, --rc-b, --rc-glow,
   --rc-ink), which transition; the side swap is a FLIP slide in /assets/public.js. */
.login.wl .seg-auth.roles{grid-template-columns:repeat(2,minmax(0,1fr))}
.login.wl .seg-auth.roles .seg-ind{width:calc((100% - 8px) / 2)}
.login.wl .seg-auth.roles[data-on="gym"] .seg-ind{transform:translateX(100%)}
.login.wl[data-role="gym"] .auth-bg{--gx:12%}
/* during the slide the box passes over the copy, never the other way round (order:-1 would paint it first) */
.login.wl .auth-side{position:relative;z-index:1}
@media (min-width:901px){
  .login.wl[data-role="gym"] .auth-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1fr)}
  .login.wl[data-role="gym"] .auth-side{order:-1}
}
.wl-short{margin-top:24px;max-width:46ch;color:#a6a39b;font-size:1.02rem;line-height:1.5}
.wl-short b{color:var(--rc-b);font-weight:500;transition:color .4s var(--ease)}
.login.wl .wl-demo{margin-top:4px;font-size:.98rem}
.wl-q{margin-top:6px;color:#a6a39b;font-size:.95rem}
.wl-q a{color:var(--rc-b);text-decoration:none;transition:color .4s var(--ease)}
.wl-q a:hover{text-decoration:underline}
.wl-done .done-sub a{color:var(--rc-b);text-decoration:none;white-space:nowrap}
.wl-done .done-sub a:hover{text-decoration:underline}
/* phones and narrow tablets: the copy stays (it is the pitch), above the box */
@media (max-width:900px){
  .login.wl .auth-side{order:0}
  .login.wl .auth-copy h1{display:block;font-size:clamp(2.6rem,11vw,4rem)}
  .login.wl .auth-points{display:grid;min-height:0;margin-top:20px}
  .login.wl .copy-in > .copy-link{display:inline-flex}
  .login.wl .auth-mark{display:none}
}

/* the form */
.wl-set{min-width:0;margin:0;padding:0;border:0}
.wl-set[hidden]{display:none}
#wl-form{container:wlform / inline-size}
/* every label is one line: the Optional chip sits inline and never adds height */
.login.wl .fld > label{display:flex;align-items:center;gap:6px;min-height:22px;line-height:1.25;white-space:nowrap}
.login.wl .fld .opt{flex:none;margin:0;padding:0 7px;font-size:.7rem;line-height:16px}
/* two-column rows: label, input and message share rows across both fields, so the inputs always line up */
.login.wl .fld-2{grid-template-rows:auto auto auto;row-gap:7px}
.login.wl .fld-2 > .fld{display:grid;grid-row:span 3;grid-template-rows:subgrid;margin-bottom:7px}
@container wlform (max-width:400px){.login.wl .fld-2{grid-template-columns:minmax(0,1fr)}}
@media (max-width:479px){.login.wl .fld-2{grid-template-columns:minmax(0,1fr)}}
.wl-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.wl-fail{margin:2px 0 6px;padding:12px 14px;border-radius:var(--r-btn);border:1px solid rgba(255,59,74,.45);background:rgba(255,59,74,.08);color:#ffb3ba;font-size:.95rem;line-height:1.45}
.wl-fail[hidden]{display:none}
.wl-fail a{color:#fff;font-weight:600}
.wl-note{margin-top:14px;color:#a6a39b;font-size:.88rem;line-height:1.5;text-align:center}
.wl-note a{color:var(--rc-b);font-weight:500;text-decoration:none;transition:color .4s var(--ease)}
.wl-note a:hover{text-decoration:underline}
#wl-submit[disabled]{opacity:.6;cursor:progress}

/* after a successful send: the You're in panel, in the role colour */
.login.wl.is-done .seg-auth.roles{display:none}
.login.wl.is-done .card-f{border-color:color-mix(in srgb,var(--rc-b) 40%,transparent)}
.wl-done{padding-top:4px}
.wl-in{font-family:var(--f-display);font-style:italic;font-weight:800;text-transform:uppercase;letter-spacing:.14em;font-size:.86rem;color:var(--rc-b)}
.wl-done .done-h{font-size:clamp(1.8rem,3vw,2.2rem)}
.wl-done .done-sub{max-width:34ch;line-height:1.5}

/* ---------- demos: a 0 draws nothing ---------- */
/* gym coach page, vertical bars: a 0 month keeps its slot but shows no stub (was a 2px bar at 35% opacity) */
.vb i.z{visibility:hidden}

/* ---------- demo picker ---------- */
.pick-head .pk-wl{margin-top:4px}

/* ---------- demos: Join the waitlist in the slim bar ---------- */
.dbar-cta{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;flex:none;border-radius:6px;background:linear-gradient(180deg,#f6d56b,#e8b73c);color:#171103;font-weight:600;font-size:13.5px;line-height:1;white-space:nowrap;text-decoration:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
.dbar-cta:hover{background:linear-gradient(180deg,#fbe08a,#efc04a)}
.dbar-cta:focus-visible{outline:2px solid #f6d56b;outline-offset:2px}
/* the gym demo's coach view carries the most in its bar (role, viewing as, the button, back): make room on narrow desktops */
@media (min-width:768px) and (max-width:1100px){
  html.as-coach .dbar{gap:12px}
  html.as-coach .dbar .dbar-me-l{display:none}
  html.as-coach .dbar .dbar-back{justify-content:center;min-width:44px;gap:0;font-size:0}
  html.as-coach .dbar .dbar-back svg{width:18px;height:18px}
}
@media (min-width:768px) and (max-width:900px){
  html.as-coach .dbar{gap:10px;padding:0 16px}
  html.as-coach .dbar .dbar-logo img{height:20px}
  html.as-coach .dbar .dbar-role button{padding:7px 10px}
}
@media (max-width:767px){
  .dbar .dbar-note{display:none}
  .dbar .dbar-cta{justify-self:end;margin-left:auto;min-height:34px;padding:0 12px;font-size:13px}
  .dbar .dbar-back{justify-content:center;min-width:44px;gap:0;font-size:0}
  .dbar .dbar-back svg{width:18px;height:18px}
}

/* ---------- touch screens (iPad, phone): the public build's own controls at least 44px (step 14) ---------- */
@media (pointer:coarse){
  .dbar .dbar-cta{min-height:44px}
  .dbar .dbar-back{min-width:44px;min-height:44px}
  .nav-menu{min-width:44px}
}