/* SmashR web app — Sessions, Session details, Booked, Sign in / My bookings,
   Host. Same tokens as the homepage (4 Oct 2026 design: near-black panels,
   lime accent, Inter). No inline scripts or styles are needed by these
   pages, so they can run under a strict CSP. */
:root{
  --bg:#090b10;--panel:#121620;--panel-2:#171c27;--text:#f7f8fb;--muted:#a8b0c0;
  --faint:rgba(168,176,192,.7);--lime:#b9ff4a;--lime-dim:#a6ef35;--on-lime:#111;
  --line:#2a3040;--danger:#ff8a98;--ok:#7ee08a;--field:#0c1016;
  --s-badminton:#b9ff4a;--s-tennis:#ff3b30;--s-pickleball:#32d2f0;
  --s-padel:#b388ff;--s-squash:#ff9500;--s-pop_tennis:#ff5fa2;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.6 Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-height:100vh}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
[hidden]{display:none!important}
.wrap{width:min(1180px,calc(100% - 32px));margin:0 auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Top bar */
.bar{border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10;background:rgba(9,11,16,.92);backdrop-filter:blur(15px)}
.bar .wrap{display:flex;align-items:center;gap:18px;min-height:70px;flex-wrap:wrap}
.logo{font-weight:950;font-size:25px;letter-spacing:-1px;text-decoration:none}
.logo span{color:var(--lime)}
.bar nav{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.bar nav a{font-size:14px;font-weight:600;text-decoration:none;padding:8px 12px;border-radius:999px;color:#d8dde7}
.bar nav a:hover{color:#fff}
.bar nav a[aria-current="page"]{color:var(--lime)}

h1,.h1{font-weight:850;font-size:clamp(32px,5vw,52px);line-height:1.05;letter-spacing:-1.2px;margin:34px 0 10px}
h2{font-weight:850;font-size:24px;line-height:1.2;letter-spacing:-.8px;margin:0 0 10px}
.lede{color:var(--muted);margin:0 0 22px;max-width:640px}
.muted{color:var(--muted)}
.small{font-size:13px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;padding:11px 16px;font-weight:850;text-decoration:none;min-height:44px}
.btn-primary{background:var(--lime);color:var(--on-lime)}
.btn-primary[disabled]{opacity:.45;cursor:not-allowed}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--line)}
.btn-ghost:hover{background:var(--panel)}
.btn-danger{background:transparent;color:var(--danger);border:1px solid rgba(255,138,152,.5)}
.btn-block{width:100%}
/* A form's main button sits below its field, not touching it. */
form.panel > .btn-block{margin-top:14px}
.link{background:none;border:0;padding:0;color:var(--lime);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* Filters */
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:18px}
.chip{border:1px solid var(--line);background:transparent;border-radius:999px;padding:9px 13px;font-size:13px;font-weight:700;color:#fff}
.chip[aria-pressed="true"]{border-color:var(--lime);color:var(--lime)}
.field{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:700;color:var(--muted)}
.input,select.input{background:var(--field);border:1px solid var(--line);border-radius:10px;padding:11px 12px;color:var(--text);min-height:44px;width:100%}
.filters .input{width:auto;min-width:150px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}

/* Session cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:10px;text-decoration:none;position:relative;transition:transform .15s,background .15s}
a.card:hover{transform:translateY(-3px);background:var(--panel-2)}
.card::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:3px;background:var(--accent,var(--lime))}
.sport-badminton{--accent:var(--s-badminton)}.sport-tennis{--accent:var(--s-tennis)}
.sport-pickleball{--accent:var(--s-pickleball)}.sport-padel{--accent:var(--s-padel)}
.sport-squash{--accent:var(--s-squash)}.sport-pop_tennis{--accent:var(--s-pop_tennis)}
.more-row{text-align:center}
.pre{white-space:pre-line}
/* Sign in: "or" divider + Google button (secondary to the email code) */
.or{display:flex;align-items:center;gap:12px;color:var(--faint);font-size:12px;margin:18px 0 14px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.g-btn{display:flex;justify-content:center;min-height:44px}
/* Host pages */
.form-wrap{max-width:760px}
.stack{display:flex;flex-direction:column;gap:14px}
.stack > h2{margin:0}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
textarea.input{resize:vertical;min-height:84px}
fieldset.plain{border:0;padding:0;margin:0}
fieldset.plain legend{padding:0;margin-bottom:6px}
.venue-opt{text-align:left;cursor:pointer;color:var(--text);font:inherit;padding:12px 14px;gap:4px}
.venue-opt:hover{background:var(--panel-2)}
.venue-opt::before{display:none}
.roster{margin:8px 0 0;padding-left:18px}
.host-head{justify-content:space-between;align-items:center;margin:26px 0 12px}
.host-head h2{margin:0}
#payments{margin-bottom:8px}
.about{margin-top:20px}
.sport{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent,var(--lime))}
.card h3{margin:0;font-size:18px;line-height:1.25}
.meta{display:flex;flex-direction:column;gap:4px;font-size:13.5px;color:var(--muted)}
.meta span{display:flex;gap:8px;align-items:flex-start}
.meta svg{flex:none;margin-top:3px}
.card-foot{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:8px;border-top:1px solid var(--line)}
.price{font-weight:800;font-size:18px}
.places{font-size:12.5px;font-weight:700;color:var(--muted)}
.places.low{color:var(--lime)}
.places.full{color:var(--danger)}

/* Panels / detail */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:22px}
.detail{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:18px;align-items:start;margin-bottom:40px}
@media (max-width:820px){.detail{grid-template-columns:1fr}}
.kv{display:grid;grid-template-columns:auto 1fr;gap:10px 16px;margin:16px 0 0;font-size:14.5px}
.kv dt{color:var(--muted);font-weight:700}
.kv dd{margin:0}
.total{display:flex;justify-content:space-between;align-items:baseline;margin:6px 0 14px}
.total strong{font-size:26px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;margin:10px 0}
.check input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--lime);flex:none}
.note{font-size:12.5px;color:var(--faint);margin:12px 0 0}
.notice{border-radius:12px;padding:12px 14px;font-size:14px;margin:12px 0;border:1px solid var(--line);background:rgba(185,255,74,.06)}
.notice.error{background:rgba(255,138,152,.08);border-color:rgba(255,138,152,.4);color:#ffd2d8}
.notice.ok{background:rgba(126,224,138,.08);border-color:rgba(126,224,138,.4)}
.empty{padding:40px 20px;text-align:center;color:var(--muted)}
.center{max-width:460px;margin:0 auto}
.tabs{display:flex;gap:6px;margin:0 0 16px}
.list{display:flex;flex-direction:column;gap:12px}
.list .card .actions{display:flex;gap:10px;flex-wrap:wrap}
.badge{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:6px;background:var(--panel-2);color:var(--muted)}
.badge.ok{color:var(--ok)}
.badge.warn{color:var(--lime)}
.badge.off{color:var(--danger)}
.code-input{letter-spacing:.5em;font-size:22px;text-align:center;font-weight:800}
.spinner{width:22px;height:22px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--lime);animation:spin .8s linear infinite;display:inline-block;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation:none}a.card{transition:none}}
footer.foot{border-top:1px solid var(--line);margin-top:56px;padding:35px 0 50px;font-size:13px;color:var(--muted)}
footer.foot a{color:var(--muted)}
/* Primary call to action in the top bar (matches the homepage). */
.bar nav a.nav-cta{background:var(--lime);color:var(--on-lime);font-weight:850;border-radius:12px;padding:8px 14px}
.bar nav a.nav-cta:hover{color:var(--on-lime)}
.filters{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:11px}
.filters[role="group"]{background:none;border:0;padding:0}
.filters .input{flex:1 1 160px}
/* Phones: keep the bar to one row — account link and "Find a game". */
@media (max-width:620px){
  .bar .wrap{flex-wrap:nowrap;gap:10px}
  .bar nav{flex-wrap:nowrap;gap:4px}
  .bar nav a{padding:8px 10px}
  .bar nav a[href^="/#"],.bar nav a[href="/host/"]{display:none}
}