/* ============================================================
   RALLY V3 - the members' lounge
   Room-scoped styles only. Link AFTER cobalt-tokens.css,
   cobalt-components.css and v3-shell.css: composition only,
   every color and size reads through the cobalt tokens.

   The lounge is a personal room: my card, my bookings, my tab,
   my savings - PLUS the club's PROPER booking desk. The home's
   grid stays the QUICK counter; a member who is already in the
   room and means business books right here, deliberately: date,
   court, time, who splits, confirm. Both registers run on the
   same engine (v3-core.js), so they can never disagree.
   ============================================================ */

/* ---------------- role gating: whose room is it ----------------
   A guest has no lounge, so the sign-in state shows instead. The
   swap is display-gated off html[data-role], so the demo View-as
   dock flips it live - no reload, same page. */
.lounge-guest{display:none}
.lounge-mine{display:none}
html[data-role="guest"] .lounge-guest{display:block}
html[data-role="member"] .lounge-mine,
html[data-role="desk"] .lounge-mine,
html[data-role="owner"] .lounge-mine{display:block}

/* ---------------- page head ---------------- */
.lg-head{display:flex; align-items:flex-end; justify-content:space-between; gap:12px 14px;
  flex-wrap:wrap; margin-bottom:18px}
.lg-head h1{margin:0; font-size:var(--fs-h1); letter-spacing:-.03em; line-height:1.12}
.lg-head .sub{margin-top:5px; font-size:var(--fs-sm); color:var(--ink-2); font-weight:600}

/* ---------------- the lounge grid ---------------- */
.lgrid{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
  align-items:stretch; margin-bottom:18px}

/* ---------------- my membership card ----------------
   The one deliberately-branded object in the room: your card looks
   like your card in both themes. The tint is a leaf node - identity
   repaints it (member purple, desk brand blue, owner deep primary)
   without moving anything. */
.memcard{border:0; color:#fff; position:relative; overflow:hidden;
  background:linear-gradient(150deg, var(--membership), color-mix(in srgb, var(--membership) 62%, #12071f));
  border-radius:var(--r-lg); padding:var(--card-pad); box-shadow:var(--shadow-2);
  display:flex; flex-direction:column; gap:4px}
html[data-role="desk"] .memcard{
  background:linear-gradient(150deg, var(--pr-600), color-mix(in srgb, var(--pr-600) 58%, #071224))}
html[data-role="owner"] .memcard{
  background:linear-gradient(150deg, var(--pr-500), color-mix(in srgb, var(--pr-700) 80%, #060d1d))}
.memcard::after{content:""; position:absolute; right:-52px; top:-52px; width:170px; height:170px;
  border-radius:50%; background:radial-gradient(circle at 35% 35%, rgba(255,255,255,.22), transparent 65%)}
.memcard .mtop{display:flex; align-items:center; gap:10px}
.memcard .mtop .wmk{font-weight:800; letter-spacing:-.03em; font-size:16px}
.memcard .mtop .wmk i{font-style:normal; opacity:.7}
.memcard .mtier{margin-left:auto; font-size:var(--fs-micro); font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; background:rgba(255,255,255,.18); border-radius:var(--r-full);
  padding:4px 12px; white-space:nowrap}
.memcard h2{margin:14px 0 0; font-size:22px; font-weight:800; letter-spacing:-.02em}
.memcard .mperk{font-size:var(--fs-sm); font-weight:650; opacity:.85}
.memcard .mmeta{display:flex; flex-wrap:wrap; gap:4px 18px; margin-top:16px; font-size:var(--fs-xs); opacity:.8}
.memcard .mmeta b{display:block; font-size:var(--fs-sm); letter-spacing:-.01em; opacity:1}

/* ---------------- quick verbs ---------------- */
.quickrow{display:flex; flex-wrap:wrap; gap:10px; margin:14px 0 18px}

/* ---------------- booking rows (coming up / recently played) ---------------- */
.bkrow{display:flex; align-items:center; gap:13px; padding:13px 0; border-top:1px solid var(--line); min-width:0}
.bkrow:first-child{border-top:0; padding-top:2px}
.bkrow .date{cursor:default; flex:0 0 auto}
.bkrow .info{min-width:0; flex:1}
.bkrow .info b{display:block; font-size:14.5px; letter-spacing:-.01em}
.bkrow .info span{display:block; font-size:var(--fs-xs); color:var(--ink-2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bkrow .side{margin-left:auto; text-align:right; display:flex; flex-direction:column;
  align-items:flex-end; gap:5px; flex:0 0 auto}
.bkrow .side .amt{font-weight:750; font-variant-numeric:tabular-nums; font-size:14px; white-space:nowrap}
.bkrow .side .amt s{color:inherit; opacity:.55; font-weight:550; margin-right:6px}
.rowhint{padding:12px 2px 4px; font-size:var(--fs-sm); color:var(--ink-2); font-weight:600}
.rowhint a{color:var(--brand-ink); font-weight:750}
.rowhint a:hover{text-decoration:underline}
.more{font-size:12.5px; font-weight:750; color:var(--brand-ink); white-space:nowrap}
.more:hover{text-decoration:underline}

/* ---------------- the PROPER booking desk ----------------
   Two registers, one engine: this is the home's quick counter at a
   deliberate density. Two columns from 920px (picker 1.55fr, summary
   1fr - the same proportions as the home's .tabgrid). */
.bookcard{margin-bottom:18px; scroll-margin-top:14px}
.bookgrid{display:grid; gap:18px; align-items:start; margin-top:4px}
.bookgrid>*{min-width:0}
@media (min-width:920px){ .bookgrid{grid-template-columns:1.55fr 1fr} }

.bookcard .datestrip .date{cursor:pointer}
.bkhead{display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  margin:16px 2px 10px; flex-wrap:wrap}
.bkhead b{font-size:14.5px; letter-spacing:-.01em}
.bkhead .bkrate{font-size:var(--fs-sm); color:var(--ink-2); font-weight:650;
  font-variant-numeric:tabular-nums; white-space:nowrap}
.bkhead .bkrate s{color:var(--ink-3); font-weight:550}

.slotgrid{display:grid; gap:8px; grid-template-columns:repeat(auto-fill,minmax(92px,1fr));
  margin:12px 0 14px}
.slot .p s{opacity:.55; font-weight:550; margin-right:5px}
.slot.sel .p s{color:var(--on-brand)}
/* "Your booking" chip carries the membership tint, not the brand */
.slot.mine{background:var(--membership-tint); border-color:var(--membership);
  color:var(--membership-ink)}
.slot.mine .p{color:var(--membership-ink); opacity:.8}

/* the summary: its own panel inside the desk */
.bksum{border:1px solid var(--line); border-radius:var(--r-lg); padding:16px;
  background:var(--surface)}
.splitrow{display:flex; align-items:center; justify-content:space-between; gap:10px;
  flex-wrap:wrap; margin-top:6px}
.splitrow .sr-t{font-size:14.5px; letter-spacing:-.01em}
.splitrow .sr-s{font-size:var(--fs-xs); color:var(--ink-2)}
.friends{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.friend{display:inline-flex; align-items:center; gap:8px; background:var(--surface-2);
  border:1px solid var(--line); border-radius:var(--r-full); padding:5px 14px 5px 6px;
  font-size:var(--fs-sm); font-weight:650; min-height:40px}
.friend.add{background:transparent; border-style:dashed; color:var(--brand-ink);
  padding:5px 14px; cursor:pointer; font:inherit; font-size:var(--fs-sm); font-weight:650}
.friend.add:hover{border-color:var(--brand); background:var(--brand-tint)}
.bkcta{width:100%; margin-top:14px}
.bknote{min-height:28px; align-items:flex-start; text-align:center}
.bksum .stamprow{display:flex; justify-content:center; height:22px; margin-top:8px}
.bkdone{display:flex; gap:10px; align-items:center; margin-top:12px; padding:12px 14px;
  border-radius:var(--r-md); background:var(--ok-tint); color:var(--ok-ink)}
.bkdone[hidden]{display:none}
.bkdone .ic{flex:0 0 auto}
.bkdone b{display:block; font-size:var(--fs-sm); letter-spacing:-.01em}
.bkdone span{display:block; font-size:var(--fs-xs); opacity:.85}

/* ---------------- my tab (reads the live shared tab) ---------------- */
.tabact{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:14px}
.linetab{flex:0 0 auto; display:inline-flex; align-items:center; gap:4px; min-height:28px; padding:0 10px;
  border:1px solid var(--line-strong); border-radius:var(--r-full); background:var(--surface);
  color:var(--ink-2); font:inherit; font-size:12px; font-weight:700; cursor:pointer; transition:.13s}
.linetab:hover{border-color:var(--brand); background:var(--brand-tint); color:var(--brand-ink)}

/* ---------------- guest state (graceful, never a broken dashboard) ---------------- */
.lounge-guest .card{max-width:560px; margin:clamp(8px,4vw,34px) auto 0}
.gbtns{display:flex; gap:10px; flex-wrap:wrap; justify-content:center}

/* ---------------- footer ---------------- */
.shell-foot .frame{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.shell-foot .grow{flex:1}