/* Groups styles, shared by /social (Home) and /hub (the Groups panel, SH7j).
   Linked from live/social/index.html and live/SouthEnd_Pickleball_Hub.html. */

/* --- SH7j: hub only. Everything in this section is scoped to .sg-hub (the hub's
   Groups panel, which also holds the hub's sheet host), so Social never matches it.
   The copies below repeat Social base rules the widget needs; Social keeps its own
   in live/social/index.html. testing/unit/test-hub-groups-panel.js pins that every
   copied selector still exists there. --- */
.sg-hub{--gold-dk:#7a4f00;--wash:#f4f7f3;--gold-glow:rgba(232,160,32,.35);}
/* SH7j hub copies: begin */
.sg-hub .sh-av{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:50%;overflow:hidden;font-family:"Bebas Neue",sans-serif;letter-spacing:.04em;line-height:1;}
.sg-hub .sh-av img{width:100%;height:100%;object-fit:cover;display:block;}
.sg-hub .sh-av--sm{width:30px;height:30px;font-size:13px;}
.sg-hub .sh-av--md{width:42px;height:42px;font-size:17px;}
.sg-hub .sh-av--lg{width:56px;height:56px;font-size:23px;}
.sg-hub .sh-av--t0{background:var(--green);color:var(--gold-lt);}
.sg-hub .sh-av--t1{background:var(--green-dk);color:#fff;}
.sg-hub .sh-av--t2{background:var(--gold);color:var(--ink);}
.sg-hub .sh-av--t3{background:var(--green-lt);color:#fff;}
.sg-hub .sh-av.has-photo{background:var(--wash);}
.sg-hub .sh-skel{display:block;border-radius:10px;background:linear-gradient(90deg,#e9efe8 0%,#f6f8f5 45%,#e9efe8 90%);background-size:300% 100%;animation:sg-hub-shimmer 1.3s ease-in-out infinite;}
.sg-hub .sh-skel--line{width:48px;height:10px;border-radius:999px;}
.sg-hub .sh-skel--row{height:68px;border-radius:14px;}
.sg-hub .sh-see-all{font-family:"Bebas Neue",sans-serif;font-size:15px;letter-spacing:.1em;color:var(--green);background:none;border:none;border-radius:10px;padding:8px 10px;margin-right:-8px;min-height:40px;cursor:pointer;transition:background .15s,color .15s;}
.sg-hub .sh-sheet{position:fixed;inset:0;z-index:236;display:flex;align-items:flex-end;justify-content:center;}
.sg-hub .sh-sheet-backdrop{position:absolute;inset:0;background:rgba(9,26,16,.58);}
.sg-hub .sh-sheet-card{position:relative;display:flex;flex-direction:column;width:100%;max-width:520px;max-height:86vh;max-height:86dvh;background:#fff;border-radius:20px 20px 0 0;border-top:3px solid var(--gold);box-shadow:0 -14px 44px rgba(0,0,0,.28);padding-bottom:env(safe-area-inset-bottom,0px);animation:sg-hub-sheet-up .2s ease-out;}
.sg-hub .sh-sheet-grab{width:40px;height:4px;border-radius:2px;background:var(--rule);margin:8px auto 0;flex:0 0 auto;}
.sg-hub .sh-sheet-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 12px 10px 18px;border-bottom:1px solid var(--rule);flex:0 0 auto;}
.sg-hub .sh-sheet-title{font-family:"Bebas Neue",sans-serif;font-size:23px;letter-spacing:.12em;color:var(--green-dk);display:flex;align-items:center;gap:9px;}
.sg-hub .sh-sheet-title::before{content:"";width:4px;height:18px;border-radius:2px;background:var(--gold);}
.sg-hub .sh-sheet-count{font-family:"DM Sans",sans-serif;font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--muted);}
.sg-hub .sh-sheet-x{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:none;background:var(--wash);color:var(--green-dk);cursor:pointer;flex:0 0 auto;transition:background .15s;}
.sg-hub .sh-sheet-x svg{width:20px;height:20px;}
.sg-hub .sh-sheet-body{overflow-y:auto;overscroll-behavior:contain;padding:12px 16px 18px;flex:1;min-height:0;}
.sg-hub .sh-sheet :focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.sg-hub .sh-sheet .sh-sheet-card:focus,.sg-hub .sh-sheet .sh-sheet-card:focus-visible{outline:none;}
.sg-hub .fr-name{font-family:"Bebas Neue",sans-serif;font-size:18px;letter-spacing:.03em;color:var(--green);
  background:none;border:none;padding:0;cursor:pointer;text-align:left;text-decoration:underline;text-underline-offset:3px;
  display:inline-flex;align-items:center;gap:6px;max-width:100%;}
.sg-hub .fr-btn{font-family:"Bebas Neue",sans-serif;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  border-radius:999px;padding:7px 14px;cursor:pointer;border:1.5px solid transparent;transition:transform .12s,box-shadow .15s,background .15s,border-color .15s,color .15s;white-space:nowrap;}
.sg-hub .fr-btn:disabled{opacity:.55;cursor:default;transform:none;}
.sg-hub .fr-btn--primary{background:var(--gold);color:var(--ink);border-color:var(--gold);box-shadow:0 4px 14px rgba(232,160,32,.28);}
.sg-hub .fr-btn--ghost{background:#fff;color:var(--green-dk);border-color:rgba(45,148,88,.4);}
.sg-hub .fr-btn--danger{background:#fff;color:var(--red);border-color:rgba(192,57,43,.32);}
.sg-hub .sm-pick{display:flex;align-items:center;gap:12px;width:100%;padding:9px 10px;border:1.5px solid transparent;border-radius:14px;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;transition:background .15s,border-color .15s;}
.sg-hub .sm-pick-txt{display:flex;flex-direction:column;min-width:0;flex:1;}
.sg-hub .sm-pick-name{font-family:"Bebas Neue",sans-serif;font-size:19px;letter-spacing:.03em;color:var(--green-dk);line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sg-hub .sm-pick-skill{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:2px;}
.sg-hub .sm-pick:active{transform:scale(.96);}
.sg-hub .sm-thumb{position:relative;display:inline-flex;width:76px;height:76px;border-radius:14px;overflow:hidden;border:1.5px solid var(--rule);box-shadow:0 4px 12px rgba(15,63,34,.12);}
.sg-hub .sm-thumb img{width:100%;height:100%;object-fit:cover;}
.sg-hub .sm-thumb-x{position:absolute;top:4px;right:4px;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;border-radius:50%;border:none;background:rgba(17,24,16,.8);color:#fff;cursor:pointer;}
.sg-hub .sm-thumb-x svg{width:14px;height:14px;}
.sg-hub .sh-switch{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:46px;border-top:1px solid var(--rule);cursor:pointer;}
.sg-hub .sh-switch-lbl{font-size:14px;font-weight:600;color:var(--ink);}
.sg-hub .sh-switch input{position:absolute;opacity:0;width:1px;height:1px;}
.sg-hub .sh-switch-ui{position:relative;flex:0 0 auto;width:42px;height:24px;border-radius:999px;background:var(--rule);transition:background .15s;}
.sg-hub .sh-switch-ui::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s;}
.sg-hub .sh-switch input:checked+.sh-switch-ui{background:var(--green);}
.sg-hub .sh-switch input:checked+.sh-switch-ui::after{transform:translateX(18px);}
.sg-hub .sh-switch input:focus-visible+.sh-switch-ui{outline:2px solid var(--gold);outline-offset:2px;}
@media (hover: hover) and (pointer: fine) {
  .sg-hub .sh-see-all:hover{background:rgba(45,148,88,.1);color:var(--green-dk);}
  .sg-hub .sh-sheet-x:hover{background:var(--rule);}
  .sg-hub .fr-name:hover{color:var(--green-dk);}
  .sg-hub .fr-btn:hover{transform:translateY(-1px);}
  .sg-hub .fr-btn--primary:hover{background:var(--gold-lt);}
  .sg-hub .fr-btn--ghost:hover{background:rgba(45,148,88,.08);border-color:var(--green-lt);}
  .sg-hub .fr-btn--danger:hover{background:rgba(192,57,43,.07);}
  .sg-hub .sm-pick:hover{background:var(--wash);border-color:var(--rule);}
}
@media(min-width:769px){
  .sg-hub .sh-sheet{align-items:center;padding:24px;}
  .sg-hub .sh-sheet-card{border-radius:20px;max-height:min(640px,86vh);max-height:min(640px,86dvh);}
  .sg-hub .sh-sheet-grab{display:none;}
  .sg-hub .sh-sheet-hd{padding-top:14px;}
}
@media(max-width:520px){
  .sg-hub .fr-btn{padding:7px 10px;}
}
@media (prefers-reduced-motion: reduce){
  .sg-hub .sh-skel{animation:none;}
  .sg-hub .sh-sheet-card{animation:none;}
  .sg-hub .sh-sheet *{transition:none!important;}
  .sg-hub .sm-pick:active{transform:none;}
}
/* SH7j hub copies: end */
@keyframes sg-hub-shimmer{0%{background-position:100% 0;}100%{background-position:0 0;}}
@keyframes sg-hub-sheet-up{from{opacity:0;transform:translateY(28px);}to{opacity:1;transform:none;}}
/* The sheet-open lock, hub class only (Social has its own on html.sh-sheet-open). */
html.sh-sheet-open body.sg-hub-page{overflow:hidden;}

/* The panel fit: the row sits in the .hub-dash body; the toast confirms sheet actions. */
.sg-hub .hub-dash__body{color:var(--ink);}
.sg-hub .sg-row{margin:0 -6px;}
.sg-hub-toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:240;max-width:calc(100% - 32px);transform:translateX(-50%);padding:10px 16px;border-radius:12px;background:var(--green-dk);color:#fff;font-size:13.5px;font-weight:600;line-height:1.4;box-shadow:0 10px 28px rgba(0,0,0,.28);}

/* SH-D28: the non-member glimpse (membersOnlyPreviewHtml) with its embedded note. */
.sg-preview{position:relative;padding:0 6px 4px;}
.sg-pv-glimpse{opacity:.5;filter:saturate(.6);pointer-events:none;user-select:none;-webkit-user-select:none;}
.sg-pv-hd{display:flex;align-items:center;justify-content:space-between;padding:2px 2px 4px;}
.sg-pv-bar{display:block;border-radius:999px;background:#dfe7dc;}
.sg-pv-bar--n{width:24px;height:10px;}
.sg-pv-bar--join{width:84px;height:12px;}
.sg-pv-row{display:flex;gap:12px;padding:8px 0 12px;overflow:hidden;}
.sg-pv-circle{flex:0 0 auto;width:92px;display:flex;flex-direction:column;align-items:center;gap:10px;}
.sg-pv-av{display:inline-flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:50%;box-shadow:0 0 0 3px #fff,0 0 0 5px rgba(232,160,32,.4);}
.sg-pv-av svg{width:34px;height:34px;}
.sg-pv-bar--name{width:58px;height:10px;background:#c9d6c5;filter:blur(2.5px);}
.sg-pv-note{position:relative;display:flex;align-items:center;gap:12px;max-width:440px;margin:-38px auto 2px;padding:12px 16px;border-radius:16px;background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(232,160,32,.5);box-shadow:0 10px 28px rgba(15,63,34,.16);}
.sg-pv-ic{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--green-dk);color:var(--gold);}
.sg-pv-ic svg{width:20px;height:20px;}
.sg-pv-txt{display:flex;flex-direction:column;gap:2px;min-width:0;}
.sg-pv-title{font-family:"Bebas Neue",sans-serif;font-size:18px;letter-spacing:.05em;line-height:1.05;color:var(--green-dk);}
.sg-pv-sub{font-size:12.5px;line-height:1.4;color:var(--muted);}
@media(min-width:769px){
  .sg-pv-circle{width:104px;}
  .sg-pv-av{width:84px;height:84px;}
}

/* --- Groups (SH7c1). Brief items noted as [n]. --- */
/* [1] the row: large circles (72px phone, 84px desktop), bigger than the Friends rail */
.sg-sec{position:relative;}
.sg-row{display:flex;gap:12px;padding:8px 6px 10px;margin:0 -6px;scroll-snap-type:x proximity;scrollbar-width:none;}
.sg-row::-webkit-scrollbar{display:none;}
.sg-circle{flex:0 0 auto;width:92px;display:flex;flex-direction:column;align-items:center;gap:7px;padding:4px 2px;background:none;border:none;border-radius:16px;font:inherit;color:var(--ink);cursor:pointer;scroll-snap-align:start;transition:transform .15s;}
.sg-av{box-shadow:0 0 0 3px #fff,0 0 0 5px rgba(232,160,32,.55),0 8px 18px rgba(15,63,34,.18);}
.sg-av--row{width:72px;height:72px;font-size:28px;}
.sg-av--md{width:42px;height:42px;font-size:17px;box-shadow:none;}
.sg-av--lg{width:64px;height:64px;font-size:25px;}
.sg-av--xl{width:112px;height:112px;font-size:42px;}
.sg-av--add{background:#fff;color:var(--green);border:2px dashed rgba(45,148,88,.5);box-shadow:none;}
.sg-av--add svg{width:28px;height:28px;}
.sg-name{max-width:100%;font-family:"Bebas Neue",sans-serif;font-size:16px;letter-spacing:.04em;line-height:1.05;color:var(--green-dk);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sg-circle--new .sg-name{color:var(--green);}
/* MC: "N members" under a group circle; never wider than the 72px (84px desktop) disc. */
.sg-members{max-width:72px;margin-top:-4px;font-size:10.5px;font-weight:700;letter-spacing:.02em;line-height:1.2;color:var(--muted,#5a6357);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sg-skel-row{display:flex;gap:12px;padding:8px 0 10px;overflow:hidden;}
.sg-skel-circle{display:flex;flex-direction:column;align-items:center;gap:9px;width:92px;flex:0 0 auto;}
.sg-skel-av{width:72px;height:72px;border-radius:50%;flex:0 0 auto;}
/* [6] the desktop tooltip (shown from JS only on (hover: hover) and (pointer: fine)) */
.sg-tip{position:absolute;z-index:6;max-width:240px;padding:8px 12px;border-radius:10px;background:var(--green-dk);color:#fff;font-size:12.5px;line-height:1.4;box-shadow:0 10px 24px rgba(15,63,34,.28);pointer-events:none;overflow-wrap:anywhere;}
.sg-tip::before{content:"";position:absolute;left:var(--sg-tip-x,50%);top:-5px;width:10px;height:10px;margin-left:-5px;background:var(--green-dk);transform:rotate(45deg);}
/* [2] the tap card */
.sg-sheet .sh-sheet-card{animation-duration:.18s;}
.sg-sheet--card .sh-sheet-card{max-width:420px;}
.sg-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:10px 6px 6px;}
.sg-card-title{font-family:"Bebas Neue",sans-serif;font-weight:400;font-size:30px;letter-spacing:.04em;line-height:1;color:var(--green-dk);margin-top:10px;overflow-wrap:anywhere;}
.sg-card-desc,.sg-info-desc{font-size:14px;line-height:1.5;color:var(--ink);max-width:360px;overflow-wrap:anywhere;}
.sg-card-count{display:inline-flex;align-items:center;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-dk);background:rgba(232,160,32,.16);border-radius:999px;padding:4px 10px;}
.sg-actions{display:flex;flex-direction:column;gap:10px;width:100%;margin-top:12px;}
.sg-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:10px 18px;border-radius:12px;border:1.5px solid transparent;font-family:"Bebas Neue",sans-serif;font-size:18px;letter-spacing:.12em;cursor:pointer;transition:transform .15s,background .15s;}
.sg-btn--gold{background:var(--gold);color:var(--ink);border-color:var(--gold);box-shadow:0 6px 16px var(--gold-glow);}
.sg-btn--ghost{background:#fff;color:var(--green-dk);border-color:rgba(45,148,88,.4);}
.sg-btn--danger{background:#fff;color:var(--red);border-color:rgba(192,57,43,.32);}
/* [3] create / edit forms */
.sg-field{position:relative;display:flex;flex-direction:column;gap:6px;margin-bottom:16px;}
.sg-label{font-family:"Bebas Neue",sans-serif;font-size:14px;letter-spacing:.12em;color:var(--green);display:flex;align-items:baseline;gap:8px;}
.sg-label small{font-family:"DM Sans",sans-serif;font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:none;color:var(--muted);}
.sg-of{margin-left:auto;font-family:"DM Sans",sans-serif;font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--gold-dk);}
.sg-input{width:100%;font-family:"DM Sans",sans-serif;font-size:16px;color:var(--ink);padding:11px 14px;border:1.5px solid var(--rule);border-radius:12px;background:var(--wash);-webkit-appearance:none;appearance:none;}
.sg-input:focus{outline:none;border-color:var(--gold);background:#fff;box-shadow:0 0 0 3px var(--gold-glow);}
.sg-input::placeholder{color:var(--muted);}
.sg-textarea{resize:vertical;min-height:64px;line-height:1.45;}
.sg-count{align-self:flex-end;font-size:10.5px;font-weight:600;color:var(--muted);}
.sg-photo-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.sg-thumb{width:76px;height:76px;}
.sg-photo-pick{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border-radius:999px;border:1.5px dashed rgba(45,148,88,.5);background:#fff;color:var(--green-dk);font-size:13px;font-weight:700;cursor:pointer;}
.sg-photo-pick svg{width:20px;height:20px;color:var(--green);}
.sg-photo-pick:focus-within{outline:2px solid var(--gold);outline-offset:2px;}
.sg-file{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;}
.sg-search{margin-bottom:8px;}
.sg-flist{display:flex;flex-direction:column;gap:4px;}
.sg-fpick.is-on{background:#fff6e0;border-color:rgba(232,160,32,.6);}
.sg-check{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;border:2px solid var(--rule);color:var(--ink);background:#fff;}
.sg-check svg{width:16px;height:16px;}
.sg-fpick.is-on .sg-check{background:var(--gold);border-color:var(--gold);}
.sg-pick-cta{flex:0 0 auto;font-family:"Bebas Neue",sans-serif;font-size:14px;letter-spacing:.1em;color:var(--green-dk);background:var(--wash);border:1.5px solid var(--rule);border-radius:999px;padding:6px 12px;}
.sg-foot{flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:12px 16px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--rule);background:#fff;border-radius:0 0 20px 20px;}
.sg-status{flex:1;min-width:0;font-size:12.5px;line-height:1.4;color:var(--muted);}
.sg-status.is-warn{color:var(--red);font-weight:600;}
.sg-foot-btn{min-width:130px;}
.sg-note{font-size:13px;line-height:1.5;color:var(--muted);padding:4px 2px 8px;}
/* [4] the info sheet */
.sg-info-head{display:flex;align-items:center;gap:14px;padding:6px 0 14px;}
.sg-info-txt{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:5px;}
.sg-info-name{font-family:"Bebas Neue",sans-serif;font-weight:400;font-size:26px;letter-spacing:.04em;line-height:1;color:var(--green-dk);overflow-wrap:anywhere;}
.sg-edit{align-self:flex-start;}
.sg-info-grow{display:flex;flex-direction:column;margin-bottom:6px;}
.sg-full{font-size:13px;font-weight:700;color:var(--gold-dk);background:#fffaf0;border:1.5px solid rgba(232,160,32,.5);border-radius:12px;padding:10px 12px;}
.sg-mute{border-top:0;margin-bottom:4px;}
.sg-info-sec{margin-top:14px;}
.sg-info-title{font-family:"Bebas Neue",sans-serif;font-size:16px;letter-spacing:.14em;color:var(--green-dk);display:flex;align-items:center;gap:8px;margin-bottom:4px;}
.sg-info-title::before{content:"";width:4px;height:14px;border-radius:2px;background:var(--gold);}
.sg-mem{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--rule);flex-wrap:wrap;}
.sg-mem-id{flex:1;min-width:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.sg-mem-name{font-size:17px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;}
.sg-mem-sub{flex-basis:100%;font-size:11.5px;color:var(--muted);}
.sg-chip-cap{font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-dk);background:rgba(232,160,32,.18);border-radius:999px;padding:3px 8px;}
.sg-you{font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);background:var(--wash);border-radius:999px;padding:3px 8px;}
.sg-mem-acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;margin-left:auto;}
.sg-info-tail{display:flex;flex-direction:column;gap:6px;margin-top:20px;padding-top:12px;border-top:1px solid var(--rule);}
/* [5] group invite cards */
#sg-invites:not(:empty){margin-bottom:8px;}
.sh-home .sg-invite .sh-invite-who{cursor:default;}
.sg-inv-from{font-size:12px;color:var(--muted);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* SH7f: members-only card, Join groups sheet, join mode, people chips, requests */
.sg-blocked{display:flex;align-items:center;gap:14px;padding:16px;border-radius:16px;background:var(--wash);border:1.5px dashed rgba(45,148,88,.35);}
.sg-blocked-ic{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:#fff;color:var(--green);box-shadow:0 0 0 3px rgba(232,160,32,.35);}
.sg-blocked-ic svg{width:22px;height:22px;}
.sg-blocked-txt{display:flex;flex-direction:column;gap:3px;min-width:0;}
.sg-blocked-title{font-family:"Bebas Neue",sans-serif;font-size:20px;letter-spacing:.05em;line-height:1.05;color:var(--green-dk);}
.sg-blocked-sub{font-size:13px;line-height:1.45;color:var(--muted);}
.sg-sheet--dir .sh-sheet-card{max-width:520px;}
.sg-dlist{display:flex;flex-direction:column;gap:4px;}
.sg-dlist .sh-skel--row{margin-bottom:8px;}
.sg-drow{display:flex;align-items:center;gap:12px;padding:10px;border:1.5px solid transparent;border-radius:14px;flex-wrap:wrap;background:var(--wash);}
.sg-drow.is-hl{background:#fff6e0;border-color:rgba(232,160,32,.6);}
.sg-drow-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.sg-drow-title{font-family:"Bebas Neue",sans-serif;font-size:19px;letter-spacing:.04em;line-height:1.05;color:var(--green-dk);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sg-drow-desc{font-size:12.5px;line-height:1.4;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sg-drow-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:2px;}
.sg-drow-count{font-size:11px;font-weight:700;color:var(--muted);}
.sg-drow-act{flex:0 0 auto;display:flex;align-items:center;gap:8px;margin-left:auto;}
.sg-info-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.sg-mode-chip{display:inline-flex;align-items:center;font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;border-radius:999px;padding:3px 8px;}
.sg-mode-chip--open{color:var(--green);background:rgba(45,148,88,.12);}
.sg-mode-chip--hidden{color:var(--muted,#5a6357);background:rgba(17,24,16,.07);margin-left:6px;}
/* VIS: "Make visible?" under Invite only */
.sg-vis{margin-top:10px;padding-top:8px;}
.sg-vis .sh-switch-lbl{display:flex;flex-direction:column;gap:2px;}
.sg-vis-sub{font-size:12px;font-weight:400;line-height:1.4;color:var(--muted,#5a6357);}
.sg-mode-chip--request{color:var(--muted);background:var(--wash);border:1px solid var(--rule);}
.sg-requested{font-family:"Bebas Neue",sans-serif;font-size:14px;letter-spacing:.1em;color:var(--gold-dk);}
.sg-withdraw{font:inherit;font-size:12px;font-weight:600;color:var(--muted);text-decoration:underline;text-underline-offset:2px;background:none;border:none;padding:8px 4px;min-height:36px;cursor:pointer;}
.sg-dfull{font-family:"Bebas Neue",sans-serif;font-size:14px;letter-spacing:.1em;color:var(--muted);}
.sg-seg{display:flex;gap:4px;padding:4px;border-radius:12px;background:var(--wash);border:1.5px solid var(--rule);}
.sg-seg-btn{flex:1;min-height:40px;border:none;border-radius:9px;background:none;font-family:"Bebas Neue",sans-serif;font-size:16px;letter-spacing:.1em;color:var(--muted);cursor:pointer;transition:background .15s,color .15s;}
.sg-seg-btn.is-on{background:#fff;color:var(--green-dk);box-shadow:0 2px 8px rgba(15,63,34,.12),0 0 0 1.5px var(--gold);}
.sg-mode-note{font-size:12.5px;line-height:1.45;color:var(--muted);margin-top:6px;}
.sg-chips{display:flex;flex-wrap:wrap;gap:6px;}
.sg-chips:empty{display:none;}
.sg-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;min-height:34px;padding:5px 8px 5px 12px;border-radius:999px;border:1.5px solid rgba(232,160,32,.6);background:#fff6e0;font:inherit;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;}
.sg-chip-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sg-chip svg{flex:0 0 auto;width:14px;height:14px;color:var(--gold-dk);}
.sg-hint{text-align:center;padding:14px 2px;}
/* SH7i: the Home widget (badge, invite circles, want-in pill, card faces + last message, header count, empty card) */
#sg-hd-act{flex:1;min-width:0;display:flex;align-items:center;justify-content:flex-end;gap:10px;}
.sg-hd-n{margin-right:auto;font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--muted);}
.sg-av-wrap{position:relative;display:inline-flex;flex:0 0 auto;}
.sg-badge{position:absolute;top:-2px;right:-7px;z-index:2;display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;padding:0 7px;border-radius:999px;background:var(--gold);color:var(--ink);box-shadow:0 0 0 2px #fff,0 4px 10px rgba(15,63,34,.22);font-family:"DM Sans",sans-serif;font-size:12.5px;font-weight:700;line-height:1;}
.sg-badge--pop{animation:sg-badge-pop .35s ease-out;}
@keyframes sg-badge-pop{0%{transform:scale(0);}60%{transform:scale(1.2);}100%{transform:scale(1);}}
.sg-want{position:absolute;top:-10px;left:50%;z-index:1;transform:translateX(-50%);white-space:nowrap;padding:3px 8px;border-radius:999px;background:var(--green-dk);color:#fff;box-shadow:0 0 0 2px #fff;font-size:10px;font-weight:700;letter-spacing:.03em;line-height:1.2;}
.sg-av.sg-av--inv{background:#fff;color:var(--green);box-shadow:0 8px 18px rgba(15,63,34,.12);outline:2px dashed var(--green-lt);outline-offset:3px;}
.sg-inv-tag{margin-top:-3px;font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-dk);background:rgba(232,160,32,.16);border-radius:999px;padding:2px 7px;}
.sg-sheet--invite .sh-sheet-card{max-width:420px;}
.sg-inv-sheet-from{font-size:13.5px;color:var(--muted);}
.sg-faces{display:inline-flex;align-items:center;padding-left:10px;margin-top:4px;}
.sg-face{display:inline-flex;margin-left:-10px;border-radius:50%;box-shadow:0 0 0 2px #fff;}
.sg-face .sh-av{width:34px;height:34px;font-size:14px;}
.sg-face--more{align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 7px;border-radius:999px;background:var(--wash);color:var(--green-dk);font-size:12px;font-weight:700;}
.sg-card-last{display:flex;justify-content:center;gap:4px;max-width:100%;font-size:13.5px;line-height:1.45;color:var(--ink);}
.sg-last-who,.sg-last-new{flex:0 0 auto;white-space:nowrap;font-weight:700;}
.sg-last-who{color:var(--green-dk);}
.sg-last-new{color:var(--gold-dk);}
.sg-last-txt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sg-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:20px 16px;border-radius:16px;background:linear-gradient(135deg,var(--wash),#fff);border:1.5px dashed rgba(45,148,88,.45);}
.sg-empty-title{font-family:"Bebas Neue",sans-serif;font-size:24px;letter-spacing:.05em;line-height:1.05;color:var(--green-dk);}
.sg-empty-sub{max-width:340px;font-size:13.5px;line-height:1.5;color:var(--muted);}
.sg-empty-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;width:100%;margin-top:8px;}
.sg-empty-acts .sg-btn{flex:1 1 140px;max-width:220px;}
/* [7] motion: press feedback; hover lift on pointer devices only; nothing at rest */
.sg-circle:active{transform:translateY(1px) scale(.97);}
.sg-btn:active{transform:translateY(1px);}
@media (hover: hover) and (pointer: fine) {
  .sg-circle:hover{transform:translateY(-3px);}
  .sg-btn--gold:hover{background:var(--gold-lt);}
  .sg-btn--ghost:hover{background:rgba(45,148,88,.08);}
  .sg-btn--danger:hover{background:rgba(192,57,43,.07);}
  .sg-photo-pick:hover{border-color:var(--green-lt);}
  .sg-seg-btn:hover{color:var(--green-dk);}
  .sg-chip:hover{background:#ffefc6;}
  .sg-withdraw:hover{color:var(--red);}
  /* SH8c2: Home's match cards (styles at the end of this file) */
  .sh-gm:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(15,63,34,.16);}
  .sh-gm-in:hover{background:var(--gold-lt);}
  /* LV: the level pills (styles at the end of this file) */
  .sg-lv-pill:hover{background:rgba(45,148,88,.08);transform:translateY(-1px);}
}
@media(min-width:769px){
  .sg-circle{width:104px;}
  .sg-av--row,.sg-skel-av{width:84px;height:84px;font-size:32px;}
  .sg-skel-circle{width:104px;}
  .sg-name{font-size:17px;}
  .sg-members{max-width:84px;font-size:11px;}
}
@media(max-width:520px){
  .sg-mem-acts{flex-basis:100%;justify-content:flex-start;padding-left:52px;margin-left:0;}
}
@media (prefers-reduced-motion: reduce){
  .sg-circle:active,.sg-btn:active{transform:none;}
  .sg-circle,.sg-btn{transition:none;}
  .sg-badge--pop{animation:none;}
}

/* SH8c2: the gold "Next: Tue 6pm" line under a group circle (Social Home and the hub). */
.sg-next{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;max-width:100%;margin-top:-4px;font-size:10.5px;font-weight:700;letter-spacing:.01em;line-height:1.25;text-align:center;color:var(--gold-dk);overflow:hidden;overflow-wrap:anywhere;}

/* SH8c2: open-spot cards for my groups' matches in Home's This week. The title
   link stretches over the card (opens the group chat); I'm in sits above it. */
.sh-gm{position:relative;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:#fffaf0;border:1.5px solid rgba(232,160,32,.5);border-left:4px solid var(--gold);box-shadow:0 3px 14px rgba(15,63,34,.05);transition:transform .15s,box-shadow .15s;}
.sh-gm.is-full{background:#fff;border-color:var(--rule);border-left-color:var(--rule);}
.sh-gm-av{box-shadow:0 0 0 2px #fff,0 0 0 3.5px rgba(232,160,32,.55);}
.sh-gm-main{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px;}
.sh-gm-kicker{font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-dk);}
.sh-gm-title{max-width:100%;font-family:"Bebas Neue",sans-serif;font-size:19px;letter-spacing:.04em;line-height:1.05;color:var(--green-dk);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sh-gm-title::after{content:"";position:absolute;inset:0;border-radius:14px;}
.sh-gm-title:focus-visible{outline:none;}
.sh-gm-title:focus-visible::after{outline:2px solid var(--gold);outline-offset:2px;}
.sh-gm-when{display:flex;align-items:baseline;gap:6px;max-width:100%;min-width:0;font-family:"Bebas Neue",sans-serif;font-size:16px;letter-spacing:.06em;line-height:1.1;color:var(--green);}
.sh-gm-time{flex:0 0 auto;white-space:nowrap;}
.sh-gm-place{min-width:0;font-family:"DM Sans",sans-serif;font-size:12px;font-weight:600;letter-spacing:0;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sh-gm-place::before{content:"\00b7";margin-right:6px;color:var(--muted);}
.sh-gm-spots{margin-top:3px;font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-dk);background:rgba(232,160,32,.16);border-radius:999px;padding:3px 8px;}
.sh-gm.is-full .sh-gm-spots{color:var(--muted);background:var(--wash);}
.sh-gm-act{position:relative;z-index:1;flex:0 0 auto;display:flex;align-items:center;}
.sh-gm-in{min-height:40px;padding:8px 16px;border-radius:999px;border:1.5px solid var(--gold);background:var(--gold);color:var(--ink);font-family:"Bebas Neue",sans-serif;font-size:16px;letter-spacing:.1em;white-space:nowrap;cursor:pointer;box-shadow:0 4px 14px rgba(232,160,32,.28);transition:transform .15s,background .15s;}
.sh-gm-yes{font-family:"Bebas Neue",sans-serif;font-size:15px;letter-spacing:.1em;white-space:nowrap;color:var(--green);background:rgba(45,148,88,.12);border-radius:999px;padding:6px 12px;}
.sh-gm:active{transform:translateY(1px);}
.sh-gm-in:active{transform:translateY(1px);}
@media (prefers-reduced-motion: reduce){
  .sh-gm,.sh-gm-in{transition:none;}
  .sh-gm:active,.sh-gm-in:active{transform:none;}
}

/* LV (owner 2026-10-15): the level groups. Hub pills + note, the pill's preview card, Social's section. */
.sg-lv-pill--beginner,.sg-lv-card--beginner,.sg-lv-item--beginner{--lv:#2d9458;}
.sg-lv-pill--intermediate,.sg-lv-card--intermediate,.sg-lv-item--intermediate{--lv:#e8a020;}
.sg-lv-pill--advanced,.sg-lv-card--advanced,.sg-lv-item--advanced{--lv:#0f3f22;}
.sg-lv{margin:0 0 14px;}
.sg-lv-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;}
.sg-lv-pill{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:6px 14px;border-radius:999px;border:1.5px solid rgba(45,148,88,.4);background:#fff;color:var(--green-dk,#0f3f22);font-family:"Bebas Neue",sans-serif;font-size:16px;letter-spacing:.1em;line-height:1;cursor:pointer;transition:transform .15s,background .15s;}
.sg-lv-pill::before{content:"";flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:var(--lv);}
.sg-lv-pill.is-mine{background:rgba(45,148,88,.1);border-color:var(--lv);}
.sg-lv-pill.is-mine::before{display:none;}
.sg-lv-pill svg{width:14px;height:14px;color:var(--lv);}
/* MC: the member count bubble at the end of a level pill. */
.sg-lv-n{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--lv);color:#fff;font-family:"DM Sans",sans-serif;font-size:11px;font-weight:700;letter-spacing:0;line-height:1;}
.sg-lv-pill--intermediate .sg-lv-n{color:var(--ink,#111810);} /* white on gold is too faint */
.sg-lv-pill:active{transform:translateY(1px);}
.sg-lv-pill:focus-visible{outline:2px solid var(--gold,#e8a020);outline-offset:2px;}
.sg-lv-note{margin:0 0 9px;text-align:center;font-size:12px;line-height:1.45;color:var(--muted,#5a6357);}
.sg-lv-mark{display:inline-flex;align-items:center;justify-content:center;width:76px;height:76px;border-radius:50%;background:var(--lv);color:#fff;font-family:"Bebas Neue",sans-serif;font-size:40px;line-height:1;box-shadow:0 6px 18px rgba(15,63,34,.18);}
.sg-lv-facts{font-size:12px;line-height:1.45;color:var(--muted,#5a6357);}
.sg-lv-soon{display:block;padding:10px 0;font-size:13px;font-weight:700;letter-spacing:.04em;text-align:center;color:var(--muted,#5a6357);}
.sg-lv-list{display:grid;gap:10px;}
.sg-lv-item{padding:14px 14px 12px;border-radius:14px;border:1px solid var(--rule,#dde5d9);border-left:4px solid var(--lv);background:#fff;}
.sg-lv-item-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.sg-lv-item-hd .sg-card-count{flex:0 0 auto;white-space:nowrap;}
.sg-lv-sub{font-family:"Bebas Neue",sans-serif;font-weight:400;font-size:23px;letter-spacing:.06em;line-height:1;color:var(--green-dk,#0f3f22);}
.sg-lv-desc{margin:6px 0 10px;font-size:13.5px;line-height:1.5;color:var(--ink,#111810);}
.sg-lv-act .sg-btn{width:100%;min-height:44px;font-size:17px;}
.sg-lv-act .sg-lv-soon{text-align:left;padding:4px 0;}
@media(min-width:769px){
  .sg-lv-list{grid-template-columns:repeat(3,1fr);}
  .sg-lv-item{display:flex;flex-direction:column;}
  .sg-lv-desc{flex:1 1 auto;}
}
@media(max-width:520px){
  /* three small pills stay on one row on a phone; each sizes to its label (equal
     thirds pushed INTERMEDIATE + its count past the border). The level-coloured
     count stands in for the dot, and only the label may shrink (last resort) so
     the dot, check and count never get squeezed */
  .sg-lv-pills{flex-wrap:nowrap;gap:4px;}
  .sg-lv-pill{flex:1 1 auto;min-width:0;justify-content:center;gap:3px;padding:6px 5px;font-size:12.5px;letter-spacing:.02em;white-space:nowrap;}
  .sg-lv-pill>span:not(.sg-lv-n){min-width:0;overflow:hidden;text-overflow:ellipsis;}
  .sg-lv-pill::before,.sg-lv-pill svg,.sg-lv-n{flex:0 0 auto;}
  .sg-lv-pill:has(.sg-lv-n)::before{display:none;}
  .sg-lv-pill::before{width:7px;height:7px;}
  .sg-lv-pill svg{width:12px;height:12px;}
  .sg-lv-n{min-width:16px;height:16px;padding:0 4px;font-size:10px;}
}
@media (prefers-reduced-motion: reduce){
  .sg-lv-pill,.sg-lv-pill:active{transition:none;transform:none;}
}