/* Group Timer social drawer. Uses the existing StudyTick theme tokens only. */
.group-timer-page .group-social-actions{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 22px}
.group-timer-page .group-social-nav-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:9px 16px;border:1px solid var(--sc-border,#d9e5dd);border-radius:12px;background:var(--sc-surface,#fff);color:var(--sc-text,#223b30);font-size:14px;font-weight:700;box-shadow:0 3px 12px rgba(25,54,43,.04);cursor:pointer}
.group-timer-page .group-social-nav-btn:hover{border-color:var(--sc-accent-strong,#168562);background:var(--sc-accent-soft,#e3f3ec)}
.group-timer-page .group-social-overlay[hidden],.group-timer-page .group-social-overlay [hidden]{display:none!important}
.group-social-open{overflow:hidden}
.group-timer-page .group-social-overlay{position:fixed;inset:0;z-index:10001;display:flex;justify-content:flex-end}
.group-timer-page .group-social-backdrop{position:absolute;inset:0;background:rgba(14,26,24,.60);border:0;cursor:pointer}
.group-timer-page .group-social-panel{position:relative;z-index:1;width:min(540px,100%);height:100%;max-height:100dvh;overflow-y:auto;overscroll-behavior:contain;background:var(--sc-surface,#fffdf8);color:var(--sc-text,#253b31);box-shadow:-12px 0 45px rgba(0,0,0,.19);padding:clamp(20px,4vw,30px);display:flex;flex-direction:column;gap:18px}
.group-timer-page .group-social-panel-header{display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--sc-border);padding-bottom:15px}
.group-timer-page .group-social-panel-header h2{margin:0;font-size:clamp(20px,3vw,25px);color:var(--sc-text)}
.group-timer-page .social-close{min-width:40px;min-height:40px;border:1px solid var(--sc-border);border-radius:50%;cursor:pointer;font-size:20px}
.group-timer-page .social-message{padding:11px 13px;background:var(--sc-accent-soft);color:var(--sc-text);border:1px solid var(--sc-border);border-radius:10px;font-size:13px}
.group-timer-page .social-message[data-type="error"]{border-color:#bd7775}
.group-timer-page .social-message[data-type="success"]{border-color:var(--sc-accent-strong)}
.group-timer-page .social-auth-note{margin:0;font-size:13px;color:var(--sc-muted)}
.group-timer-page .social-auth-note a{font-weight:700}
.group-timer-page .social-tabs{display:flex;flex-wrap:wrap;gap:6px;padding:4px;background:var(--sc-surface-soft);border-radius:12px}
.group-timer-page .social-tabs button{flex:1 1 100px;min-height:40px;margin:0;padding:7px 10px;border:1px solid transparent;border-radius:9px;font-weight:650;cursor:pointer}
.group-timer-page .social-tabs button[aria-selected="true"]{background:var(--sc-accent-soft);color:var(--sc-text);border-color:var(--sc-accent-strong)}
.group-timer-page .social-period-wrap{display:flex;align-items:center;gap:12px;justify-content:space-between;font-size:13px;color:var(--sc-muted)}
.group-timer-page .social-period-wrap select{max-width:172px;margin:0}
.group-timer-page .social-top10{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.group-timer-page .social-rank-row{display:flex;align-items:center;gap:11px;min-width:0;padding:11px;border:1px solid var(--sc-border);border-radius:12px;background:var(--sc-surface-raised);font-size:14px}
.group-timer-page .social-rank-row.social-podium{border-color:rgba(179,143,82,.45);background:linear-gradient(125deg,var(--sc-surface-raised),var(--sc-accent-soft))}
.group-timer-page .social-rank-number{min-width:34px;text-align:center;font-size:18px;font-variant-numeric:tabular-nums}
.group-timer-page .social-rank-identity,.group-timer-page .social-friend-name{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1;overflow-wrap:anywhere}
.group-timer-page .social-rank-identity small,.group-timer-page .social-friend-name small{font-size:12px;color:var(--sc-muted)}
.group-timer-page .social-rank-score{font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--sc-text)}
.group-timer-page .social-my-rank{padding:14px;border-radius:12px;background:var(--sc-accent-soft);font-size:14px;font-weight:700}
.group-timer-page .social-empty{color:var(--sc-muted);font-size:13px;margin:6px 0 12px;line-height:1.6}
.group-timer-page .social-muted-copy{color:var(--sc-muted);font-size:12px;margin:0;line-height:1.6}
.group-timer-page .social-section{padding:14px 0;border-top:1px solid var(--sc-border)}
.group-timer-page .social-section h3{font-size:16px;margin:0 0 13px;color:var(--sc-text)}
.group-timer-page .social-profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.group-timer-page .social-profile-grid label{display:flex;flex-direction:column;font-size:13px;font-weight:650;gap:5px}
.group-timer-page .social-profile-grid input{min-width:0;margin:0}
.group-timer-page .social-privacy-choice{display:flex;align-items:flex-start;gap:9px;margin-top:12px;font-size:13px;line-height:1.45}
.group-timer-page .social-privacy-choice input{width:18px;height:18px;min-height:18px;flex:none;margin:1px 0}
.group-timer-page .social-save-btn{min-height:42px;margin-top:14px;padding:9px 15px;border-radius:9px;background:var(--sc-accent);color:#142c23;font-weight:750;cursor:pointer}
.group-timer-page .social-friend-list{list-style:none;margin:10px 0;padding:0;display:grid;gap:10px}
.group-timer-page .social-friend-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 0;border-bottom:1px solid var(--sc-border);font-size:13px}
.group-timer-page .social-friend-row:last-child{border-bottom:0}
.group-timer-page .social-action-pair{display:flex;flex-wrap:wrap;gap:6px}
.group-timer-page .social-inline-btn,.group-timer-page .social-add-friend,.group-timer-page .social-invite-link{display:inline-flex;align-items:center;min-height:33px;border:1px solid var(--sc-accent-strong);border-radius:9px;padding:6px 10px;font-size:12px;font-weight:700;background:var(--sc-accent-soft);color:var(--sc-text);text-decoration:none;cursor:pointer}
.group-timer-page .social-muted-btn{border-color:var(--sc-border);background:var(--sc-surface-soft)}
.group-timer-page .social-danger{border-color:#bd7775}
.group-timer-page .social-find-row{display:flex;gap:8px}
.group-timer-page .social-find-row input{flex:1;min-width:0;margin:0}
.group-timer-page .social-find-row button{border:1px solid var(--sc-accent-strong);border-radius:8px;padding:8px 13px;cursor:pointer}
.group-timer-page #groupMembers .social-member-action{display:flex;align-items:center;margin-left:auto;gap:5px}
.group-timer-page #groupMembers .social-member-badge{font-size:11px;color:var(--sc-muted)}
.group-timer-page #groupMembers .social-add-friend{white-space:nowrap;min-height:34px}
@media(max-width:560px){.group-timer-page .group-social-panel{padding:18px;border-radius:0}.group-timer-page .social-profile-grid{grid-template-columns:1fr}.group-timer-page .group-social-actions{margin-bottom:15px}.group-timer-page .group-social-nav-btn{flex:1}}
@media(prefers-reduced-motion:reduce){.group-timer-page .group-social-overlay *{animation:none!important;transition:none!important}}

/* Palette-aware social identity: outlined trophy and Tick Buddies insignia.
   Outlined SVGs inherit their theme-specific foreground, no emoji or icon font dependency. */
.group-timer-page .group-social-nav-btn{
  min-height:53px;padding:7px 17px 7px 9px;gap:11px;border-radius:15px;
  border:1px solid var(--sc-border,#dce6df);background:var(--sc-surface-raised,#fffdf8);
  color:var(--sc-text,#243b31);font-weight:700;letter-spacing:-.012em;
  box-shadow:0 3px 13px rgba(21,49,38,.055);transition:border-color .18s,background-color .18s,box-shadow .18s;
}
.group-timer-page .group-social-nav-btn:hover{border-color:var(--sc-accent-strong,#168562);box-shadow:0 5px 16px rgba(21,49,38,.09)}
.group-timer-page .group-social-nav-btn:focus-visible{outline:3px solid var(--sc-accent-strong,#168562);outline-offset:3px}
.group-timer-page .group-social-icon-badge{width:35px;height:35px;flex:none;display:grid;place-items:center;border-radius:11px;border:1px solid transparent}
.group-timer-page .group-social-symbol{width:22px;height:22px;display:block;flex:none}
.group-timer-page .group-social-nav-btn--leaderboard .group-social-icon-badge{
  color:var(--sc-accent-strong);background:var(--sc-accent-soft);border-color:var(--sc-border);
}
.group-timer-page .group-social-nav-btn--friends .group-social-icon-badge{
  color:var(--sc-accent-strong);background:var(--sc-accent-soft);border-color:var(--sc-border);
}
.group-timer-page .group-social-nav-label{white-space:nowrap}
.group-timer-page #socialRequestsCount{white-space:nowrap;color:var(--sc-accent-strong,#188061);font-size:12px}
.group-timer-page #groupSocialTitle{display:flex;align-items:center;gap:11px}
.group-timer-page .group-social-heading-icon{width:37px;height:37px;display:grid;place-items:center;flex:none;border-radius:12px;background:var(--sc-surface-soft);color:var(--sc-accent-strong)}
.group-timer-page .group-social-heading-icon .group-social-title-trophy{color:var(--sc-accent-strong)}
.group-timer-page .group-social-heading-icon .group-social-title-friends{color:var(--sc-accent-strong)}
.group-timer-page .group-social-heading-icon .group-social-symbol{width:23px;height:23px}
.group-timer-page .group-social-heading-icon [hidden]{display:none!important}
html[data-theme="dark"] .group-timer-page .group-social-nav-btn--leaderboard .group-social-icon-badge{
  color:var(--sc-accent-strong);background:var(--sc-accent-soft);border-color:var(--sc-border);
}
html[data-theme="dark"] .group-timer-page .group-social-nav-btn--friends .group-social-icon-badge{
  color:var(--sc-accent-strong);background:var(--sc-accent-soft);border-color:var(--sc-border);
}
html[data-theme="dark"] .group-timer-page .group-social-heading-icon .group-social-title-trophy{color:var(--sc-accent-strong)}
html[data-theme="dark"] .group-timer-page .group-social-heading-icon .group-social-title-friends{color:var(--sc-accent-strong)}
@media(max-width:390px){.group-timer-page .group-social-nav-btn{padding:6px 9px;gap:7px}.group-timer-page .group-social-icon-badge{height:32px;width:32px}.group-timer-page .group-social-symbol{width:20px;height:20px}}
@media(prefers-reduced-motion:reduce){.group-timer-page .group-social-nav-btn{transition:none}}

/* Signed-in room members: keep names unchanged and make add-friend action compact. */
.group-timer-page #groupMembers li{min-width:0;gap:10px}
.group-timer-page #groupMembers .social-member-action{margin-inline-start:auto;flex:0 0 auto;align-self:center}
.group-timer-page #groupMembers .social-add-friend{
 display:inline-flex;justify-content:center;align-items:center;
 min-width:41px;min-height:37px;padding:3px 7px;border-radius:10px;
 font-family:inherit;font-weight:700;
 font-size:12px;line-height:1.3;color:var(--sc-accent-strong,#188061);
 border:1px solid var(--sc-border,#cbded3);background:var(--sc-accent-soft,#e5f4ec);
 cursor:pointer;transition:background .15s,border-color .15s,transform .15s;
}
.group-timer-page #groupMembers .social-add-friend:hover{
 border-color:var(--sc-accent-strong,#188061);background:var(--sc-surface-raised,#fff);
 transform:translateY(-1px)
}
.group-timer-page #groupMembers .social-add-friend:focus-visible{
 outline:3px solid var(--sc-accent-strong,#188061);outline-offset:2px
}
.group-timer-page #groupMembers .social-add-friend--not-ready{
 border-style:dashed;opacity:.76
}
.group-timer-page #groupMembers .social-member-badge{
 display:inline-flex;align-items:center;justify-content:center;min-height:31px;
 padding:4px 8px;border-radius:9px;color:var(--sc-accent-strong,#188061);
 background:var(--sc-accent-soft,#e5f4ec);font-size:11px;font-weight:700;white-space:nowrap
}
html[data-theme="dark"] .group-timer-page #groupMembers .social-add-friend{
 background:var(--sc-accent-soft);color:var(--sc-accent-strong);border-color:var(--sc-border)
}
html[data-theme="dark"] .group-timer-page #groupMembers .social-add-friend:hover{
 background:var(--sc-surface-raised);border-color:var(--sc-accent-strong)
}
@media(prefers-reduced-motion:reduce){.group-timer-page #groupMembers .social-add-friend{transition:none;transform:none!important}}

/* Keep the single 👤➕ Add Friend action legible alongside room names. */
.group-timer-page #groupMembers li .social-add-friend{white-space:nowrap;min-width:0;padding-inline:9px}
.group-timer-page #groupMembers li{align-items:center}
.group-timer-page .social-name-guidance{display:block;color:var(--sc-muted,#65746c);font-size:11px;font-weight:400;line-height:1.45;max-width:28ch}
@media(max-width:390px){.group-timer-page #groupMembers li .social-add-friend{font-size:11px;padding-inline:6px}}



/* Refined optical treatment, using ONLY the exact original StudyTick SVG marks.
   The 67:33 geometry, stroke widths, color values and 150px–320px size do not change.
   A second, blurred copy of the original SVG sits BEHIND the untouched foreground ring;
   this creates depth without painting new colors onto either segment. */
.group-timer-page .group-social-ring-stage{
 position:absolute;
 inset:0 min(540px,100%) 0 0;
 display:grid;
 place-items:center;
 pointer-events:none;
}
.group-timer-page .group-social-ring-breathe{
 width:clamp(150px,22vw,320px);
 aspect-ratio:1;
 position:relative;
 isolation:isolate;
 pointer-events:none;
 animation:stSocialRingBreathe 8s ease-in-out infinite;
}
/* Ambient reflection follows the ring's actual original SVG segments exactly. */
.group-timer-page .group-social-ring-breathe::before{
 content:"";
 position:absolute;
 inset:0;
 z-index:0;
 background:url("/studytick-mark-light.svg") center/100% 100% no-repeat;
 filter:blur(12px);
 opacity:.11;
 pointer-events:none;
 animation:stSocialRingAuraLight 9s ease-in-out infinite;
}
html[data-theme="dark"] .group-timer-page .group-social-ring-breathe::before{
 background-image:url("/studytick-mark-dark.svg");
 animation-name:stSocialRingAuraDark;
}
.group-timer-page .group-social-ring-image{
 position:absolute;
 inset:0;
 z-index:1;
 display:block;
 background:url("/studytick-mark-light.svg") center/100% 100% no-repeat;
 pointer-events:none;
 animation:stSocialRingRotate 24s linear infinite, stSocialRingGlowLight 8s ease-in-out infinite;
}
html[data-theme="dark"] .group-timer-page .group-social-ring-image{
 background-image:url("/studytick-mark-dark.svg");
 animation-name:stSocialRingRotate,stSocialRingGlowDark;
}
/* A thin specular sweep aligned precisely with the SVG stroke:
   radius 16.2/40 = 40.5%, width 2.7/40 = 6.75% of the viewBox. */
.group-timer-page .group-social-ring-image::after{
 content:"";
 position:absolute;
 inset:0;
 pointer-events:none;
 border-radius:50%;
 background:conic-gradient(
  from 0deg,
  transparent 0deg,
  rgba(255,255,255,.03) 12deg,
  rgba(255,255,255,.23) 22deg,
  rgba(255,255,255,.08) 30deg,
  transparent 43deg,
  transparent 360deg
 );
 -webkit-mask:radial-gradient(circle,transparent 36.8%,#000 37.2%,#000 43.8%,transparent 44.2%);
 mask:radial-gradient(circle,transparent 36.8%,#000 37.2%,#000 43.8%,transparent 44.2%);
 opacity:0;
 animation:stSocialRingShine 9s ease-in-out infinite;
}
html[data-theme="dark"] .group-timer-page .group-social-ring-image::after{
 background:conic-gradient(
  from 0deg,
  transparent 0deg,
  rgba(255,255,255,.02) 12deg,
  rgba(255,255,255,.22) 22deg,
  rgba(255,255,255,.07) 30deg,
  transparent 43deg,
  transparent 360deg
 );
}
@keyframes stSocialRingRotate{to{transform:rotate(360deg)}}
@keyframes stSocialRingBreathe{
 0%,100%{transform:translateY(0) scale(1)}
 50%{transform:translateY(-3px) scale(1.012)}
}
@keyframes stSocialRingGlowLight{
 0%,100%{filter:drop-shadow(0 0 4px rgba(20,29,33,.09))}
 50%{filter:drop-shadow(0 0 10px rgba(20,29,33,.15))}
}
@keyframes stSocialRingGlowDark{
 0%,100%{filter:drop-shadow(0 0 6px rgba(176,232,210,.16))}
 50%{filter:drop-shadow(0 0 13px rgba(176,232,210,.28))}
}
@keyframes stSocialRingAuraLight{
 0%,100%{opacity:.09;transform:scale(1)}
 50%{opacity:.18;transform:scale(1.025)}
}
@keyframes stSocialRingAuraDark{
 0%,100%{opacity:.18;transform:scale(1)}
 50%{opacity:.29;transform:scale(1.025)}
}
@keyframes stSocialRingShine{
 0%,13%,73%,100%{opacity:0;transform:rotate(-30deg)}
 24%{opacity:.53}
 50%{opacity:.53;transform:rotate(190deg)}
 66%{opacity:0;transform:rotate(240deg)}
}
@media(max-width:700px){
 .group-timer-page .group-social-ring-stage{display:none}
}
@media(prefers-reduced-motion:reduce){
 .group-timer-page .group-social-ring-breathe,
 .group-timer-page .group-social-ring-breathe::before,
 .group-timer-page .group-social-ring-image,
 .group-timer-page .group-social-ring-image::after{animation:none!important;transform:none!important}
 .group-timer-page .group-social-ring-breathe::before{opacity:0!important}
 .group-timer-page .group-social-ring-image{filter:none!important}
 .group-timer-page .group-social-ring-image::after{opacity:0!important}
}

/* All three social navigation controls inherit the selected palette.
   Distinguish the Memorendum by icon only—not a bright button background. */
.group-timer-page .group-social-nav-btn.group-memorendum-link{text-decoration:none}
.group-timer-page .group-social-nav-btn.group-memorendum-link .group-social-icon-badge{
  color:var(--sc-accent-strong);background:var(--sc-accent-soft);border-color:var(--sc-border);
}
html[data-theme="dark"] .group-timer-page .group-social-nav-btn.group-memorendum-link .group-social-icon-badge{
  color:var(--sc-accent-strong);background:var(--sc-accent-soft);border-color:var(--sc-border);
}

/* Match the TickNotes Dashboard return control while retaining the existing link. */
.group-timer-page .group-header .group-back {
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:42px;padding:9px 13px;border:1px solid var(--sc-button-border);
  border-radius:11px;background:var(--sc-button-bg);color:var(--sc-button-text);
  font-size:13px;font-weight:700;text-decoration:none;
}
.group-timer-page .group-header .group-back svg {
  display:block;width:17px;height:17px;flex:none;stroke:currentColor;stroke-width:1.8;
}
.group-timer-page .group-header .group-back:hover {
  background:var(--sc-button-bg-hover);border-color:var(--sc-accent-strong);
}

/* Consecutive rank layout and guest participation; independent of theme palette. */
.group-timer-page .social-rank-number{flex:0 0 42px;min-width:42px;direction:ltr;unicode-bidi:isolate;white-space:nowrap}
.group-timer-page .social-rank-row{min-width:0}
.group-timer-page .social-guest-section{min-width:0}
.group-timer-page .social-guest-list{list-style:none;margin:9px 0 0;padding:0;display:grid;gap:7px}
.group-timer-page .social-guest-row{min-width:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:10px;border:1px solid var(--sc-border);background:var(--sc-surface-soft);font-size:13px}
.group-timer-page .social-guest-name{flex:1;min-width:0;overflow-wrap:anywhere;font-weight:650}
.group-timer-page .social-guest-status{flex:none;color:var(--sc-muted);font-size:12px}
.group-timer-page .social-guest-section .social-muted-copy{line-height:1.65}

/* The ring must stay OUTSIDE the social drawer in both LTR and RTL.
   Physical left/right insets previously placed it underneath Arabic-script drawers. */
.group-timer-page .group-social-overlay{direction:inherit}
.group-timer-page .group-social-ring-stage{
  inset:auto;
  inset-block:0;
  inset-inline-start:0;
  inset-inline-end:min(540px,100%);
  min-width:0;
  overflow:hidden;
}
.group-timer-page .group-social-panel{min-width:0;overflow-x:hidden}
.group-timer-page .group-social-panel-header{min-width:0}
.group-timer-page .group-social-panel-header h2{min-width:0;flex:1 1 auto;overflow-wrap:anywhere;line-height:1.35}
.group-timer-page .group-social-panel-header .social-close{flex:0 0 40px}
.group-timer-page #groupSocialTitleText{min-width:0;overflow-wrap:anywhere}
.group-timer-page .social-tabs button{min-width:0;overflow-wrap:anywhere}
.group-timer-page .social-period-wrap{min-width:0;flex-wrap:wrap}
.group-timer-page .social-period-wrap select{max-width:100%;min-width:130px}
@media(max-width:900px){
 .group-timer-page .group-social-ring-stage{display:none!important}
}

/* The existing leaderboard backdrop ring: preserve its exact 67:33 shape and
   current navy/mint SVG gradients, adding a surface-reflection layer rather
   than substituting a separate logo or recoloring its strokes. */
.group-timer-page .group-social-ring-image::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:50%;
  background:conic-gradient(from 270deg,
    transparent 0deg,rgba(255,255,255,.08) 19deg,
    rgba(255,255,255,.40) 41deg,rgba(255,255,255,.16) 56deg,
    transparent 78deg,transparent 240deg,
    rgba(255,255,255,.06) 278deg,transparent 302deg);
  -webkit-mask:url("/studytick-mark-light.svg") center/100% 100% no-repeat;
  mask:url("/studytick-mark-light.svg") center/100% 100% no-repeat;
  opacity:.85;mix-blend-mode:screen;
}
html[data-theme="dark"] .group-timer-page .group-social-ring-image::before{
  -webkit-mask-image:url("/studytick-mark-dark.svg");
  mask-image:url("/studytick-mark-dark.svg");
  opacity:.9;
}
.group-timer-page .group-social-ring-image::after{
  -webkit-mask:url("/studytick-mark-light.svg") center/100% 100% no-repeat;
  mask:url("/studytick-mark-light.svg") center/100% 100% no-repeat;
}
html[data-theme="dark"] .group-timer-page .group-social-ring-image::after{
  -webkit-mask-image:url("/studytick-mark-dark.svg");
  mask-image:url("/studytick-mark-dark.svg");
}
@media(prefers-reduced-motion:reduce){
  .group-timer-page .group-social-ring-image::before{opacity:.8}
}