/* Social in the Sheet layer (23 Sep 2026). Loaded after sheet.css; uses its tokens.
   One ordered page: your groups as cards, start something, a quieter Discover.
   Global standings are a sub-page of Social with its own Today | Streaks. */

/* ---------- root ---------- */
#dlg-board .social-root{display:grid;gap:0;min-width:0;padding-top:4px}
#dlg-board .social-section{display:grid;gap:12px;min-width:0}
#dlg-board .social-root h3.es-eyebrow{margin:0;font:700 12px/1.2 var(--card-label,inherit);letter-spacing:.14em;text-transform:uppercase;color:var(--es-ink-2)}
#dlg-board .social-cards{display:grid;gap:12px}
#dlg-board .social-start{display:grid;gap:10px;margin-top:22px}
#dlg-board .social-start .btn{width:100%;min-height:54px;margin:0;font-size:17px}
#dlg-board .social-discover{margin-top:34px;gap:4px}
#dlg-board .social-root>.social-join{display:flex;justify-content:center;margin:22px 0 0}
#dlg-board .social-join .es-link.group-join-link{width:auto;min-height:44px;padding:0 4px;border:0;background:none;color:var(--es-ink-2);font-size:15px;text-align:center}

/* empty: two lines, then the two buttons */
#dlg-board .social-empty{display:grid;gap:8px;padding:10px 0 2px}
#dlg-board .social-empty-title{margin:0;font:900 34px/1 var(--display);letter-spacing:.005em;color:var(--es-ink);text-transform:none}
#dlg-board .social-empty p{margin:0;max-width:32ch;color:var(--es-ink-2);font-size:16px;line-height:1.45}

/* ---------- group card: surface, hairline, soft shadow, one tap target ---------- */
#dlg-board .group-card.social-card{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"copy chev" "score score";align-items:start;gap:0 10px;width:100%;min-height:0;margin:0;padding:16px 16px 16px 18px;
  background:var(--es-surface);color:var(--es-ink);border:1px solid var(--es-line);border-radius:20px;box-shadow:var(--es-shadow-soft);text-align:left;cursor:pointer;
  transition:transform .15s ease,background-color .15s ease,border-color .15s ease}
#dlg-board .group-card.social-card.official-group-card{border-color:var(--es-line)!important}
#dlg-board .group-card.social-card:hover{border-color:var(--es-line-strong)}
#dlg-board .group-card.social-card:active{transform:scale(.985);background:var(--es-surface-2)}
#dlg-board .social-card .group-card-copy{grid-area:copy;display:grid;gap:4px;min-width:0}
#dlg-board .social-card>svg{grid-area:chev;width:20px;height:20px;margin-top:1px;color:var(--es-ink-3);fill:none;stroke:currentColor;stroke-width:2}
#dlg-board .social-card-name{display:flex;align-items:center;gap:8px;min-width:0}
#dlg-board .social-card-name b{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 18px/1.2 var(--card-label,inherit);color:var(--es-ink)}
#dlg-board .social-badge{flex:none;display:inline-block;padding:4px 6px;border-radius:6px;box-shadow:inset 0 0 0 1.2px var(--es-line-strong);color:var(--es-ink-2);font:700 10px/1 var(--card-label,inherit);letter-spacing:.12em;text-transform:uppercase}
#dlg-board .social-card-line{display:block;color:var(--es-ink-2);font-size:14.5px;line-height:1.35}
#dlg-board .social-card .group-yesterday{color:var(--es-ink-3);font-size:13px;line-height:1.35}
#dlg-board .social-card-score{grid-area:score;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:14px;min-width:0}
#dlg-board .social-card-score .es-dots{padding-bottom:5px}
#dlg-board .social-card-total{font:900 38px/.9 var(--display);letter-spacing:.01em;font-variant-numeric:tabular-nums;color:var(--es-ink)}
#dlg-board .social-card-waiting{color:var(--es-ink-3);font-size:13.5px;padding-bottom:3px}

/* ---------- Discover: quiet rows, no card ---------- */
#dlg-board .social-rows{display:grid}
#dlg-board .social-row{display:flex;align-items:center;gap:14px;width:100%;min-height:64px;padding:10px 2px;background:none;border:0;border-bottom:1px solid var(--es-line);border-radius:0;color:var(--es-ink);text-align:left;cursor:pointer}
#dlg-board .social-row:last-child{border-bottom:0}
#dlg-board .social-row:active{opacity:.7}
#dlg-board .social-row-mark{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--es-line-strong);color:var(--es-ink-2)}
#dlg-board .social-row-mark svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#dlg-board .social-row-copy{flex:1;min-width:0;display:grid;gap:3px}
#dlg-board .social-row-copy b{font:700 16.5px/1.2 var(--card-label,inherit);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#dlg-board .social-row-copy small{color:var(--es-ink-2);font-size:14px;line-height:1.3}
#dlg-board .social-row>svg:last-child{flex:none;width:20px;height:20px;color:var(--es-ink-3);fill:none;stroke:currentColor;stroke-width:2}

/* ---------- segmented (Global Today | Streaks, group Today | Leaderboard | Activity) ----------
   launch-polish.css draws a moving pill with !important; recolour that pill
   rather than fight its geometry: tinted track, solid ink selection. */
:root #dlg-board .tabs.board-period-tabs{margin:0 0 16px}
:root #dlg-board .tabs.board-period-tabs[hidden]{display:none}
:root #dlg-board .tabs:is(.board-period-tabs,.group-tabs){border:0;border-radius:13px;background:var(--band-none);box-shadow:none}
:root #dlg-board .tabs:is(.board-period-tabs,.group-tabs)>button{border-radius:10px;color:var(--es-ink-2);font:700 14px/1.2 var(--card-label,inherit)}
:root #dlg-board .tabs:is(.board-period-tabs,.group-tabs)>button:is([aria-selected=true],[aria-pressed=true]){color:var(--es-btn-text)!important}
:root #dlg-board .tabs:is(.board-period-tabs,.group-tabs).segmented-control::before{height:calc(var(--selection-h) - 8px)!important;border-radius:10px!important;background:var(--es-btn)!important;box-shadow:none!important}
:root #dlg-board .tabs:is(.board-period-tabs,.group-tabs):not([data-segment-ready])>button:is([aria-selected=true],[aria-pressed=true])::before{border-radius:10px;background:var(--es-btn);box-shadow:none}

/* ---------- group detail: same materials, same logic ---------- */
#dlg-board .group-detail .group-heading .group-emblem{border-radius:16px}
#dlg-board .group-heading p{color:var(--es-ink-2)}
#dlg-board .group-notice{border:1px solid var(--es-line);border-left:0;border-radius:14px;padding:12px 14px;background:var(--es-surface);box-shadow:var(--es-shadow-soft);color:var(--es-ink)!important}
#dlg-board .group-stack .group-board-heading h4{margin:0;font:700 12px/1.2 var(--card-label,inherit);letter-spacing:.14em;text-transform:uppercase;color:var(--es-ink-2)}
#dlg-board .group-board-heading>span{color:var(--es-ink-2);font-size:14px}
/* The standings sit on one surface card with hairline rows. */
#dlg-board .group-today .group-board,#dlg-board .activity-list,#dlg-board .group-today>.board{margin-top:10px;padding:4px 12px;background:var(--es-surface);border:1px solid var(--es-line);border-radius:20px;box-shadow:var(--es-shadow-soft)}
#dlg-board .group-today .group-board li,#dlg-board .group-today>.board li,#dlg-board .activity-list li{border:0;border-bottom:1px solid var(--es-line);border-radius:0;background:none;box-shadow:none}
#dlg-board .group-today .group-board li:last-child,#dlg-board .group-today>.board li:last-child,#dlg-board .activity-list li:last-child{border-bottom:0}
#dlg-board .group-today .group-board li.me,#dlg-board .group-today .group-board li.me.place-1,#dlg-board .group-today>.board li.me,#dlg-board .activity-list li.me{background:var(--es-me);box-shadow:none;border-radius:12px;border-bottom-color:transparent;margin-inline:-6px;padding-inline:10px}
#dlg-board .group-board li .rk,#dlg-board .group-today>.board li .rk{color:var(--es-ink-2);font-variant-numeric:tabular-nums}
#dlg-board .group-board li .tot{font-family:var(--display);color:var(--es-ink)}
#dlg-board .group-member-initials{background:var(--es-surface-2);border-color:var(--es-line);color:var(--es-ink-2)}
/* Score strips: the band dots. */
#dlg-board .group-today .group-score-strip{display:flex;align-items:center;justify-content:flex-end;gap:4px;width:80px}
#dlg-board .group-score-strip i,#dlg-board .group-today .group-score-strip i{flex:none;width:12px;height:12px;border-radius:50%;background:var(--band,var(--band-none));box-shadow:none}
#dlg-board .group-score-strip .g-good{--band:var(--band-good)}#dlg-board .group-score-strip .g-ok{--band:var(--band-ok)}#dlg-board .group-score-strip .g-meh{--band:var(--band-meh)}#dlg-board .group-score-strip .g-bad{--band:var(--band-bad)}
/* A perfect 100 is the gold plate, never a green ring. */
#dlg-board .group-score-strip .is-perfect{background:var(--perfect-metal);box-shadow:inset 0 0 0 1px var(--perfect-metal-edge),inset 0 1px 0 #fff9dc99}
#dlg-board .group-score-strip.is-empty{opacity:1}
#dlg-board :is(.player-panel,.group-completion,.friend-nudge,.winner-day){background:var(--es-surface);border:1px solid var(--es-line);border-radius:18px;box-shadow:var(--es-shadow-soft)}
#dlg-board .winner-track{background:var(--band-none)}
#dlg-board .winner-track i{background:var(--es-ink-2)}
#dlg-board progress{accent-color:var(--es-ink-2)}
#dlg-board .group-stack .settings-list{background:var(--es-surface);border:1px solid var(--es-line);border-radius:18px;box-shadow:var(--es-shadow-soft)}
@media (max-width:360px){#dlg-board .group-today .group-score-strip{width:64px;gap:2px}#dlg-board .group-score-strip i,#dlg-board .group-today .group-score-strip i{width:10px;height:10px}}
#dlg-board .group-heading h3 .official-badge{display:inline-block;vertical-align:middle;margin-left:6px;padding:4px 6px;border-radius:6px;box-shadow:inset 0 0 0 1.2px var(--es-line-strong);color:var(--es-ink-2);font:700 10px/1 var(--card-label,inherit);letter-spacing:.12em;text-transform:uppercase}

/* ---------- Global standings: a calm top three, then one flat board ---------- */
#dlg-board .global-board{display:grid;gap:14px;min-width:0}
#dlg-board .global-board>.global-summary{margin:0;color:var(--es-ink-2);font:500 14px/1.4 var(--font-ui);letter-spacing:0;text-transform:none}
#dlg-board .gs-viewer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;padding:10px 14px;border:0;border-radius:14px;background:var(--es-me);color:var(--es-ink);font:500 15px/1.3 var(--font-ui);box-shadow:none}
#dlg-board .gs-viewer::before,#dlg-board .gs-viewer::after{content:none}
#dlg-board .gs-viewer b{font-weight:800}
#dlg-board .gs-viewer .gs-viewer-score{font:900 24px/1 var(--display);font-variant-numeric:tabular-nums}
#dlg-board .gs-viewer-score small,#dlg-board .gs-top strong small,#dlg-board .gs-list .tot small{margin-left:2px;font:600 11px/1 var(--font-ui);color:var(--es-ink-3)}
#dlg-board .gs-layout{display:grid;gap:12px;margin:0;padding:0;border:0;background:none;box-shadow:none}
#dlg-board .gs-podium{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;padding:0;background:var(--es-surface);border:1px solid var(--es-line);border-radius:20px;box-shadow:var(--es-shadow-soft);overflow:hidden}
#dlg-board .gs-top{display:grid;justify-items:center;align-content:start;gap:7px;min-width:0;padding:14px 8px 16px;text-align:center}
#dlg-board .gs-top+.gs-top{border-left:1px solid var(--es-line)}
#dlg-board .gs-top.place-1{box-shadow:inset 0 3px 0 var(--es-coral)}
#dlg-board .gs-top.me{background:var(--es-me)}
#dlg-board .gs-top-place{font:700 11px/1 var(--card-label,var(--font-ui));letter-spacing:.14em;text-transform:uppercase;color:var(--es-ink-2)}
#dlg-board .gs-avatar{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;overflow:hidden;background:var(--es-surface-2);border:1px solid var(--es-line);color:var(--es-ink-2);font:700 13px/1 var(--font-ui)}
#dlg-board .gs-avatar img{width:100%;height:100%;object-fit:cover}
#dlg-board .gs-top .hd{display:block;max-width:100%;min-height:24px;margin:0;padding:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:none;border:0;box-shadow:none;color:var(--es-ink);font:600 14px/24px var(--font-ui);text-align:center}
#dlg-board .gs-top .hd img{display:none}
#dlg-board .gs-top .hd small{display:none}
#dlg-board .gs-top strong{font:900 28px/1 var(--display);font-variant-numeric:tabular-nums;color:var(--es-ink)}
#dlg-board .board.gs-list{list-style:none;margin:0;padding:4px 12px;background:var(--es-surface);border:1px solid var(--es-line);border-radius:20px;box-shadow:var(--es-shadow-soft)}
#dlg-board .gs-list>li{display:grid;grid-template-columns:2.2em minmax(0,1fr) auto;align-items:center;gap:10px;min-height:54px;margin:0;padding:5px 2px;border:0;border-bottom:1px solid var(--es-line);border-radius:0;background:none;box-shadow:none}
#dlg-board .gs-list>li::before,#dlg-board .gs-list>li::after{content:none}
#dlg-board .gs-list>li:last-child{border-bottom:0}
#dlg-board .gs-list>li.me{background:var(--es-me);border-radius:12px;border-bottom-color:transparent;margin-inline:-6px;padding-inline:8px}
#dlg-board .gs-list>li.is-pinned{margin-top:6px}
#dlg-board .gs-list .rk{color:var(--es-ink-2);font:600 14px/1 var(--font-ui);font-variant-numeric:tabular-nums}
#dlg-board .gs-list .hd{display:flex;align-items:center;gap:10px;min-width:0;min-height:44px;margin:0;padding:0;overflow:hidden;background:none;border:0;box-shadow:none;color:var(--es-ink);font:600 15.5px/1.2 var(--font-ui);text-align:left;white-space:nowrap;text-overflow:ellipsis}
#dlg-board .gs-list .hd img{flex:none;width:28px;height:28px;border-radius:50%}
#dlg-board .gs-list .hd small{color:var(--es-ink-3);font:500 12.5px/1.2 var(--font-ui)}
#dlg-board .gs-list .tot{font:900 22px/1 var(--display);font-variant-numeric:tabular-nums;color:var(--es-ink);text-align:right}
#dlg-board .gs-empty{display:grid;gap:6px;justify-items:start;margin:0;padding:18px 2px;text-align:left;color:var(--es-ink-2);font:15px/1.4 var(--font-ui)}
#dlg-board .gs-empty b{color:var(--es-ink);font-size:17px}
#dlg-board .global-board>.global-limit{width:100%;min-height:48px;margin:0}
#dlg-board .gs-viewer>span{display:inline;min-width:0}
#dlg-board .gs-viewer>span b{display:inline;font:800 15px/1.3 var(--font-ui)}

/* ---------- Social page, one lead line when you have no groups yet ---------- */
#dlg-board .social-empty{padding:4px 0 0}
#dlg-board .social-empty p{max-width:34ch;color:var(--es-ink);font-size:18px;line-height:1.4}

/* ---------- sub-pages sit on the grid, never in a card ---------- */
#dlg-board #board-body>.group-stack:not(.group-detail):not(.member-profile):not(.group-competition){padding:0;background:none;border:0;border-radius:0;box-shadow:none}
#dlg-board .group-stack>p:not(.subtle):not(.group-notice){color:var(--es-ink-2);font-size:16px;line-height:1.45}
#dlg-board .group-form-eyebrow{margin:0}
/* sheet-style forms: a label, a quiet filled field, one primary action */
#dlg-board .group-field{display:grid;gap:8px;margin:0;color:var(--es-ink-2);font:700 12px/1.2 var(--card-label,var(--font-ui));letter-spacing:.14em;text-transform:uppercase}
#dlg-board .group-field :is(input,select,textarea){width:100%;min-height:52px;margin:0;padding:12px 14px;border:1px solid var(--es-line-strong);border-radius:14px;background:var(--es-surface);box-shadow:none;color:var(--es-ink);font:500 17px/1.3 var(--font-ui);letter-spacing:0;text-transform:none}
#dlg-board .group-field textarea{min-height:96px;resize:vertical}
#dlg-board .group-field :is(input,select,textarea):focus-visible{outline:2px solid var(--focus);outline-offset:1px;border-color:transparent}
#dlg-board .group-field :is(input,select,textarea)::placeholder{color:var(--es-ink-3)}
#dlg-board form.group-stack{gap:14px;margin:0;padding:0;background:none;border:0;box-shadow:none}
#dlg-board form.group-stack>.btn.primary{width:100%;min-height:54px;margin-top:4px}
#dlg-board .form-note{margin:0}
#dlg-board .group-skip{justify-self:center}
#dlg-board .social-join .es-link{text-decoration-color:var(--es-line-strong)}

/* ---------- group Today: who played, then who is still to play ---------- */
#dlg-board .group-today .group-board-heading{display:flex;align-items:center;gap:10px;min-height:44px}
#dlg-board .group-today .group-board-heading h4{flex:1;min-width:0}
#dlg-board .group-refresh{flex:none;display:grid;place-items:center;width:40px;height:40px;margin:0 -8px 0 0;padding:0;border:0;border-radius:50%;background:none;box-shadow:none;color:var(--es-ink-2)}
#dlg-board .group-refresh svg{width:18px;height:18px}
#dlg-board .group-refresh:active{background:var(--band-none)}
#dlg-board .group-first{margin:10px 0 0;color:var(--es-ink-2)}
#dlg-board .group-waiting{display:grid;gap:4px;margin-top:22px}
#dlg-board .group-waiting-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--es-line)}
#dlg-board .group-waiting-list li{margin:0;padding:0;border-bottom:1px solid var(--es-line);background:none;border-radius:0}
#dlg-board .group-waiting-list .member-link{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:6px 2px;background:none;border:0;border-radius:0;box-shadow:none;color:var(--es-ink);font:500 16px/1.2 var(--font-ui);text-align:left}
#dlg-board .group-waiting-list .member-link .group-member-avatar{width:30px;height:30px;flex:none;font-size:11px}
#dlg-board .group-waiting-list .member-link .group-member-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#dlg-board .group-waiting-list .member-link .group-member-name small{color:var(--es-ink-3)}
#dlg-board .group-waiting-list .member-link>span[aria-hidden]{color:var(--es-ink-3)}
#dlg-board .group-invite{margin-top:8px}

/* ---------- group settings: grouped flat rows, like Settings ---------- */
#dlg-board .group-settings-page{gap:26px}
#dlg-board .gset-intro{margin:0}
#dlg-board .gset-group{display:grid;gap:8px}
#dlg-board .gset-list{display:grid;border-top:1px solid var(--es-line)}
#dlg-board .gset-list>*{border-bottom:1px solid var(--es-line)}
#dlg-board .gset-row{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;margin:0;padding:12px 2px;background:none;border:0;border-radius:0;box-shadow:none;color:var(--es-ink);font:500 16px/1.3 var(--font-ui);text-align:left;list-style:none;cursor:pointer}
#dlg-board .gset-row::-webkit-details-marker{display:none}
#dlg-board .gset-row::marker{content:''}
#dlg-board .gset-row:active{background:var(--band-none)}
#dlg-board .gset-label{flex:1;min-width:0}
#dlg-board .gset-value{flex:0 1 auto;max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--es-ink-2);font-size:15px}
#dlg-board .gset-row>svg{flex:none;width:16px;height:16px;color:var(--es-ink-3);fill:none;stroke:currentColor;stroke-width:2;transition:transform .18s ease}
#dlg-board .gset-item[open]>.gset-row>svg{transform:rotate(90deg)}
#dlg-board .gset-item{margin:0;padding:0;background:none;border-radius:0;box-shadow:none}
#dlg-board .gset-drawer{display:grid;gap:12px;padding:2px 2px 18px;margin:0;background:none;border:0;box-shadow:none}
#dlg-board .gset-drawer fieldset{margin:0;padding:0;border:0}
#dlg-board .gset-drawer .btn{min-height:48px}
#dlg-board .gset-leave{display:grid;gap:10px;border-top:1px solid var(--es-line);border-bottom:1px solid var(--es-line)}

/* ---------- destructive rows and confirms, shared by settings and profiles ---------- */
#dlg-board :is(.gset-row,.safety-row).is-danger{color:var(--es-coral);font-weight:700}
#dlg-board .safety-rows{display:grid;margin-top:12px;border-top:1px solid var(--es-line)}
#dlg-board .safety-rows>*{margin:0;padding:0;border:0;border-bottom:1px solid var(--es-line);border-radius:0;background:none;box-shadow:none}
#dlg-board .safety-row{display:flex;align-items:center;width:100%;min-height:52px;margin:0;padding:10px 2px;background:none;border:0;border-radius:0;box-shadow:none;color:var(--es-ink-2);font:500 16px/1.3 var(--font-ui);text-align:left;list-style:none;cursor:pointer}
#dlg-board .safety-row::-webkit-details-marker{display:none}
#dlg-board .safety-row::marker{content:''}
#dlg-board .player-report[open]>.safety-row{color:var(--es-ink)}
#dlg-board .player-report>form{padding:0 2px 16px}
#dlg-board .player-block>[role=status]:empty{display:none}
#dlg-board .player-block>[role=status]{margin:0;padding:0 2px 12px}
#dlg-board .safety-confirm{display:grid;gap:12px;padding:12px 2px 16px}
#dlg-board .safety-confirm>p{margin:0;color:var(--es-ink);font-size:15.5px;line-height:1.45}
#dlg-board .safety-confirm [role=status]:empty{display:none}

/* ---------- member and public profiles: one record card, the rest flat ---------- */
#dlg-board .member-profile{gap:0}
#dlg-board .member-profile>.player-panel:not(.player-summary){margin:22px 0 0;padding:18px 0 0;background:none;border:0;border-top:1px solid var(--es-line);border-radius:0;box-shadow:none}
#dlg-board .member-profile>.player-panel h4,#dlg-board .member-profile .player-section-heading h4{margin:0 0 10px;font:700 12px/1.2 var(--card-label,var(--font-ui));letter-spacing:.14em;text-transform:uppercase;color:var(--es-ink-2)}
#dlg-board .member-profile>.player-summary{margin:4px 0 0}
#dlg-board .member-profile>.friend-nudge{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin:22px 0 0;padding:16px 0 0;background:none;border:0;border-top:1px solid var(--es-line);border-radius:0;box-shadow:none}
#dlg-board .member-profile>.friend-nudge>div{flex:1 1 180px;min-width:0}
#dlg-board .member-profile>.friend-nudge h4{margin:0 0 4px;font:700 12px/1.2 var(--card-label,var(--font-ui));letter-spacing:.14em;text-transform:uppercase;color:var(--es-ink-2)}
#dlg-board .member-profile>.friend-nudge .btn{min-height:44px}
#dlg-board .member-profile>.safety-rows{margin-top:30px}
#dlg-board .member-profile .member-day{border-color:var(--es-line)}

/* ---------- Eyeshot Global preview ---------- */
#dlg-board .official-preview{display:grid;gap:10px;margin:0}
#dlg-board .official-preview[hidden]{display:none}
#dlg-board .official-faces{display:flex;align-items:center;gap:0;margin-bottom:6px}
#dlg-board .official-face{display:grid;place-items:center;width:34px;height:34px;margin-left:-8px;border-radius:50%;border:2px solid var(--es-ground);background:var(--es-surface-2);color:var(--es-ink-2);font:700 11px/1 var(--font-ui);object-fit:cover}
#dlg-board .official-face:first-child{margin-left:0}
#dlg-board .official-faces small{margin-left:12px;color:var(--es-ink-2);font-size:14px}
#dlg-board .official-top{list-style:none;margin:0;padding:0;border-top:1px solid var(--es-line)}
#dlg-board .official-top li{display:grid;grid-template-columns:3em minmax(0,1fr) auto;align-items:center;gap:10px;min-height:48px;border-bottom:1px solid var(--es-line)}
#dlg-board .official-top .rk{color:var(--es-ink-2);font:600 14px/1 var(--font-ui)}
#dlg-board .official-top .hd{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 15.5px/1.2 var(--font-ui);color:var(--es-ink)}
#dlg-board .official-top b{font:900 22px/1 var(--display);font-variant-numeric:tabular-nums}
#dlg-board .official-review .group-heading p{color:var(--es-ink-2)}

/* ---------- desktop: one readable column ---------- */
@media (min-width:760px){
  :root #dlg-board>.dlg{max-width:664px;margin-inline:auto}
}
#dlg-board .gset-leave{border:0}
#dlg-board .gset-leave>.gset-row{padding-inline:2px}
#dlg-board .official-review .group-heading{grid-template-columns:auto minmax(0,1fr)}
#dlg-board .official-review .group-heading p{white-space:normal;overflow-wrap:anywhere;min-width:0}
/* two group views, two equal halves */
:root #dlg-board .tabs.group-tabs{display:grid;grid-template-columns:1fr 1fr}
#dlg-board .gs-viewer.global-viewer>span:first-child{display:block;min-width:0}
#dlg-board .gs-viewer.global-viewer>span:first-child b{display:inline;overflow:visible}
/* group Leaderboard: flat sections, hairline rows */
#dlg-board .group-competition{gap:22px}
#dlg-board .group-competition>.player-panel{margin:0;padding:0;background:none;border:0;border-radius:0;box-shadow:none}
#dlg-board .group-competition h4{margin:0 0 8px;font:700 12px/1.2 var(--card-label,var(--font-ui));letter-spacing:.14em;text-transform:uppercase;color:var(--es-ink-2)}
#dlg-board .group-competition .player-section-heading{min-height:44px}
#dlg-board .group-competition .player-section-heading h4{margin:0}
#dlg-board .winner-bars{gap:0;border-top:1px solid var(--es-line)}
#dlg-board .winner-bars>button{min-height:52px;padding:8px 2px;border:0;border-bottom:1px solid var(--es-line);border-radius:0;background:none;color:var(--es-ink)}
#dlg-board .winner-bars>button[aria-pressed=true]{background:var(--es-me);border-radius:10px;border-bottom-color:transparent;padding-inline:8px}
#dlg-board .winner-day{margin:0;padding:0 2px;background:none;border:0;border-bottom:1px solid var(--es-line);border-radius:0;box-shadow:none}
#dlg-board .winner-day:first-child{margin-top:0;border-top:1px solid var(--es-line)}
#dlg-board .gset-list>.gset-row{border-bottom:1px solid var(--es-line)}
#dlg-board .safety-rows>.safety-row,#dlg-board .safety-rows>.member-removal{border-bottom:1px solid var(--es-line)}
#dlg-board .gs-viewer{justify-self:stretch;width:auto;max-width:none;box-sizing:border-box}
/* Eyeshot Global: its members today, then the way to everyone. */
.group-global-link{display:flex;align-items:center;gap:12px;width:100%;min-height:60px;margin-top:4px;padding:12px 16px;border:1px solid var(--es-line);border-radius:16px;background:var(--es-surface);color:var(--es-ink);text-align:left;box-shadow:var(--es-shadow-soft);cursor:pointer}
.group-global-link>span{flex:1;display:grid;gap:2px}
.group-global-link small{color:var(--es-ink-2);font-size:.85rem}
.group-global-link svg{width:18px;height:18px;color:var(--es-ink-3)}
/* ---------- Global standings, with some life (23 Sep, AJ: "a bit drab") ---------- */
#dlg-board{--gold:#E2B64B;--silver:#B9C4D0;--bronze:#C98A56}
:root[data-theme="light"] #dlg-board{--gold:#B8891E;--silver:#8593A3;--bronze:#A4652F}
/* Podium order 2 · 1 · 3, first place raised and crowned in gold. */
#dlg-board .gs-podium{align-items:end;overflow:visible;background:none;border:0;box-shadow:none;gap:8px}
#dlg-board .gs-top{--medal:var(--es-line-strong);position:relative;border:1px solid var(--es-line);border-radius:18px;background:var(--es-surface);box-shadow:var(--es-shadow-soft);padding-top:16px}
#dlg-board .gs-top+.gs-top{border-left:1px solid var(--es-line)}
#dlg-board .gs-top.place-1{--medal:var(--gold);order:2;padding-top:22px;padding-bottom:20px;box-shadow:inset 0 3px 0 var(--medal),var(--es-shadow)}
#dlg-board .gs-top.place-2{--medal:var(--silver);order:1;box-shadow:inset 0 3px 0 var(--medal),var(--es-shadow-soft)}
#dlg-board .gs-top.place-3{--medal:var(--bronze);order:3;box-shadow:inset 0 3px 0 var(--medal),var(--es-shadow-soft)}
#dlg-board .gs-top .gs-top-place{color:var(--medal)}
#dlg-board .gs-top .gs-avatar{border:2px solid var(--medal);color:var(--es-ink)}
#dlg-board .gs-top.place-1 .gs-avatar{width:52px;height:52px;font-size:16px;background:color-mix(in srgb,var(--gold) 18%,var(--es-surface-2))}
#dlg-board .gs-top.place-1::before{content:"";position:absolute;top:-13px;left:50%;width:26px;height:20px;transform:translateX(-50%) rotate(-6deg);background:var(--perfect-metal);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 20'%3E%3Cpath d='M2 17 1 5l7 5 5-9 5 9 7-5-1 12Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 20'%3E%3Cpath d='M2 17 1 5l7 5 5-9 5 9 7-5-1 12Z'/%3E%3C/svg%3E") center/contain no-repeat}
#dlg-board .gs-top.place-1 strong{font-size:36px}
#dlg-board .gs-top.me{background:color-mix(in srgb,var(--es-coral) 10%,var(--es-surface))}
/* Rows: rank in the display face, and a share-of-500 bar under each name. */
#dlg-board .gs-list .rk{font:900 20px/1 var(--display);color:var(--es-ink-3)}
#dlg-board .gs-list>li[style*="--share"]{position:relative;padding-bottom:10px}
#dlg-board .gs-list>li[style*="--share"]::after{content:"";position:absolute;left:calc(2.2em + 12px);right:4px;bottom:7px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--es-ink-3) var(--share),var(--band-none) var(--share));opacity:.55}
#dlg-board .gs-list>li.me[style*="--share"]::after{background:linear-gradient(90deg,var(--es-coral) var(--share),var(--band-none) var(--share));opacity:1}
#dlg-board .gs-list>li.me .rk{color:var(--es-coral)}
#dlg-board .gs-list>li.me .hd{font-weight:800}

/* =====================================================================
   Owner round (23 Sep, late): Discover first, emblem + faces on cards,
   solid cards under every list (AJ: "too much transparency"), and a
   centred invitation.
   ===================================================================== */
/* Discover leads; Your groups follows; one action; the quiet link. */
#dlg-board .social-root>.social-discover{margin-top:0;gap:12px}
#dlg-board .social-root>.social-discover+.social-mine{margin-top:30px}
#dlg-board .social-root>.social-mine:first-child{margin-top:0}
#dlg-board .social-empty{padding:0}
#dlg-board .social-empty p{margin:0;color:var(--es-ink-2);font-size:16px;line-height:1.45}
/* Discover rows sit on a card too. */
#dlg-board .social-rows{padding:0 16px;background:var(--es-surface);border:1px solid var(--es-line);border-radius:20px;box-shadow:var(--es-shadow-soft)}
#dlg-board .social-row{padding:12px 0}

/* Group card: emblem at left, copy, chevron; then member faces and your total. */
#dlg-board .group-card.social-card{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"mark copy chev" "score score score";gap:0 14px;padding:16px}
#dlg-board .social-card-mark{grid-area:mark;display:block}
#dlg-board .social-card-mark .group-emblem{width:48px;height:48px;border-radius:14px}
#dlg-board .social-card-mark .group-emblem svg{width:28px;height:28px}
#dlg-board .social-card-score{align-items:center;margin-top:14px;padding-top:12px;border-top:1px solid var(--es-line)}
#dlg-board .social-faces{display:flex;align-items:center;min-width:0}
#dlg-board .social-face{flex:none;display:grid;place-items:center;width:32px;height:32px;margin-left:-8px;border-radius:50%;overflow:hidden;background:var(--es-surface-2);border:2px solid var(--es-surface);box-shadow:inset 0 0 0 1px var(--es-line-strong);color:var(--es-ink);font:700 11px/1 var(--font-ui);font-style:normal;letter-spacing:.02em}
#dlg-board .social-face:first-child{margin-left:0}
#dlg-board .social-face img{width:100%;height:100%;object-fit:cover}
#dlg-board .social-face:not(.is-waiting):not(.is-more){background:var(--es-ink-2);box-shadow:none;color:var(--es-surface)}
#dlg-board .social-face.is-me:not(.is-waiting){background:var(--es-coral);color:var(--es-coral-ink,#fff)}
#dlg-board .social-face.is-waiting{background:var(--es-surface);border:1.5px dashed var(--es-line-strong);box-shadow:none;color:var(--es-ink-3)}
#dlg-board .social-face.is-waiting img{opacity:.45}
#dlg-board .social-face.is-more{background:var(--band-none);box-shadow:none;color:var(--es-ink-2);font-size:11.5px}
#dlg-board .social-card-total{font-size:34px}

/* Group Today: the still-to-play list is a card like the standings. */
#dlg-board .group-waiting-list{padding:0 14px;border:1px solid var(--es-line);border-radius:20px;background:var(--es-surface);box-shadow:var(--es-shadow-soft)}
#dlg-board .group-waiting-list li:last-child{border-bottom:0}
#dlg-board .group-waiting-list .member-link{padding:6px 0}
#dlg-board .group-waiting h4.es-eyebrow{margin:0 0 6px}

/* Group Leaderboard: Most wins and Recent winners each on one card. */
#dlg-board .group-competition>.player-panel>p.subtle{margin:0 0 10px}
#dlg-board .winner-bars{padding:4px 14px;border:1px solid var(--es-line);border-radius:20px;background:var(--es-surface);box-shadow:var(--es-shadow-soft)}
#dlg-board .winner-bars>button:last-child{border-bottom:0}
#dlg-board .winner-bars>button[aria-pressed=true]{margin-inline:-8px}
#dlg-board [data-winner-days]:has(.winner-day){padding:0 14px;border:1px solid var(--es-line);border-radius:20px;background:var(--es-surface);box-shadow:var(--es-shadow-soft)}
#dlg-board [data-winner-days] .winner-day,#dlg-board [data-winner-days] .winner-day:first-child{margin:0;padding:0;border:0;border-bottom:1px solid var(--es-line);border-radius:0;background:none;box-shadow:none}
#dlg-board [data-winner-days] .winner-day:last-child{border-bottom:0}
#dlg-board .winner-day summary>b{flex:none;display:inline-flex;align-items:baseline;white-space:nowrap;font:900 22px/1 var(--display);font-variant-numeric:tabular-nums;color:var(--es-ink)}
#dlg-board .winner-day summary>b small{display:inline;margin:0 0 0 2px;font:600 11px/1 var(--font-ui);color:var(--es-ink-3)}
#dlg-board .winner-day>.settings-row{border-top:1px solid var(--es-line)}

/* Group settings: iOS inset-grouped cards under their eyebrows. */
#dlg-board .gset-group{gap:8px}
#dlg-board .gset-group>h4.es-eyebrow{margin:0;padding:0 4px}
#dlg-board .gset-list,#dlg-board .gset-leave{padding:0 16px;border:1px solid var(--es-line);border-radius:16px;background:var(--es-surface);box-shadow:var(--es-shadow-soft)}
#dlg-board .gset-list>*,#dlg-board .gset-list>.gset-row{border-bottom:1px solid var(--es-line)}
#dlg-board .gset-list>:last-child{border-bottom:0}
#dlg-board .gset-row,#dlg-board .gset-leave>.gset-row{padding-inline:0}
#dlg-board .gset-leave{gap:0}
#dlg-board .gset-leave>.safety-confirm{padding:14px 0 16px}
#dlg-board .gset-leave:has(>.gset-row[hidden]){padding-top:2px}

/* Member profiles and public players: Nudge, then Report / Block / Remove, each a card. */
#dlg-board .member-profile>.friend-nudge{padding:14px 16px;border:1px solid var(--es-line);border-radius:16px;background:var(--es-surface);box-shadow:var(--es-shadow-soft)}
#dlg-board .safety-rows{padding:0 16px;border:1px solid var(--es-line);border-radius:16px;background:var(--es-surface);box-shadow:var(--es-shadow-soft)}
#dlg-board .safety-rows>*:last-child{border-bottom:0}
#dlg-board .safety-row{padding-inline:0}
#dlg-board .player-report>form,#dlg-board .player-block>[role=status]{padding-inline:0}
#dlg-board .safety-confirm{padding-inline:0}
#dlg-board .member-list{list-style:none;margin:0;padding:0 14px;border:1px solid var(--es-line);border-radius:16px;background:var(--es-surface);box-shadow:var(--es-shadow-soft)}
#dlg-board .member-list>li{border-bottom:1px solid var(--es-line)}
#dlg-board .member-list>li:last-child{border-bottom:0}

/* The invitation: centred mark, name, people, one action. */
#dlg-board .group-invite-page{gap:22px;padding-top:12px}
#dlg-board .invite-hero{display:grid;justify-items:center;gap:10px;text-align:center}
#dlg-board .invite-mark{display:grid;place-items:center;width:112px;height:112px;margin-bottom:6px;border-radius:50%;overflow:hidden;background:var(--es-surface);border:1px solid var(--es-line);box-shadow:var(--es-shadow)}
#dlg-board .invite-mark img{width:100%;height:100%;object-fit:cover}
#dlg-board .invite-mark .group-emblem{width:100%;height:100%;border-radius:50%}
#dlg-board .invite-mark .group-emblem svg{width:52px;height:52px}
#dlg-board .invite-kicker{margin:0;color:var(--es-ink-2)!important;font:500 16px/1.3 var(--font-ui)!important;letter-spacing:0}
#dlg-board .group-invite-page h3.invite-name{margin:0;max-width:100%;overflow-wrap:anywhere;font:900 clamp(34px,10vw,46px)/1 var(--display);letter-spacing:.005em;color:var(--es-ink);text-transform:none}
#dlg-board .invite-faces{display:flex;justify-content:center;margin-top:6px}
#dlg-board .invite-face{flex:none;display:grid;place-items:center;width:40px;height:40px;margin-left:-10px;border-radius:50%;border:2px solid var(--es-ground,var(--es-surface));background:var(--es-surface-2);color:var(--es-ink-2);font:700 12.5px/1 var(--font-ui);font-style:normal}
#dlg-board .invite-face:first-child{margin-left:0}
#dlg-board .invite-face svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}
#dlg-board .invite-face.tone-0{background:color-mix(in srgb,var(--band-good) 30%,var(--es-surface))}
#dlg-board .invite-face.tone-1{background:color-mix(in srgb,var(--band-ok) 30%,var(--es-surface))}
#dlg-board .invite-face.tone-2{background:color-mix(in srgb,var(--es-coral) 26%,var(--es-surface))}
#dlg-board .invite-face.tone-3{background:color-mix(in srgb,var(--band-meh) 30%,var(--es-surface))}
#dlg-board .invite-face.is-more{background:var(--es-surface);box-shadow:inset 0 0 0 1px var(--es-line-strong);color:var(--es-ink)}
#dlg-board .invite-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 10px;margin:4px 0 0;color:var(--es-ink-2)!important;font:500 14.5px/1.3 var(--font-ui)!important}
#dlg-board .invite-meta>span{display:inline-flex;align-items:center;gap:6px}
#dlg-board .invite-meta svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8}
#dlg-board .invite-form{width:100%;max-width:420px;justify-self:center;margin-inline:auto;align-self:center}
#dlg-board .invite-form>.invite-note{margin:0;text-align:center;font-size:13px;color:var(--es-ink-3)}
#dlg-board .invite-form>.form-note{text-align:center}
#dlg-board:has(.group-invite-page) .destination-header>.destination-title{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#dlg-board .group-invite-page>.group-skip{align-self:center;justify-self:center;margin:-8px auto 0;min-height:44px;padding:0 8px;border:0;background:none;color:var(--es-ink-2);font-size:15.5px}
/* Member profile sections: each on a card, not ruled onto the grid. */
#dlg-board .member-profile>.player-panel:not(.player-summary){margin:18px 0 0;padding:16px;border:1px solid var(--es-line);border-radius:18px;background:var(--es-surface);box-shadow:var(--es-shadow-soft)}
#dlg-board .member-profile>.player-history{padding-block:14px 4px}
#dlg-board .member-profile .member-day{border-color:var(--es-line)}
#dlg-board .member-profile .member-day:last-child{border-bottom:0}
#dlg-board .member-profile>.friend-nudge{margin-top:18px}
#dlg-board .member-profile>.safety-rows{margin-top:18px}
#dlg-board .member-day summary>b{flex:none;display:inline-flex;align-items:baseline;white-space:nowrap}
#dlg-board .member-day summary>b small{display:inline;margin:0 0 0 2px;font-size:.75em;color:var(--es-ink-3)}
/* Standings rows: every place keeps its number; the top three wear their medal, tied or not. No rail beside them. */
#dlg-board .gs-list>li[class*="place-"] .rk{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font-size:17px;color:var(--es-ground);background:var(--medal)}
#dlg-board .gs-list>li.place-1{--medal:var(--gold)}#dlg-board .gs-list>li.place-2{--medal:var(--silver)}#dlg-board .gs-list>li.place-3{--medal:var(--bronze)}
#dlg-board .gs-list>li.place-1 .tot{color:var(--gold)}
/* Group header: room above the back link, and settings as a quiet drawn icon
   like You's gear, not a filled disc of text dots. */
#dlg-board[data-group-detail="true"] .destination-header:has(.group-back){position:relative;padding-top:10px}
#dlg-board[data-group-detail="true"] .destination-header [data-group-settings]{position:absolute;top:12px;right:-6px;width:40px;height:40px;min-width:40px;min-height:40px;padding:8px;background:none!important;border:0;box-shadow:none;color:var(--es-ink-2);letter-spacing:0}
#dlg-board[data-group-detail="true"] .destination-header [data-group-settings]>svg{width:22px;height:22px;fill:currentColor;stroke:none}
#dlg-board[data-group-detail="true"] .destination-header [data-group-settings]:hover{color:var(--es-ink)}
/* Just joined, not played: the notice is the way in. */
#dlg-board .group-play-cta{display:grid;gap:12px;width:100%;max-width:none;box-sizing:border-box}
#dlg-board .group-play-cta p{margin:0;color:var(--es-ink-2);font-size:15px;line-height:1.45}
#dlg-board .group-play-cta p b{color:var(--es-ink)}
#dlg-board .group-play-cta .btn{width:100%;gap:8px}
#dlg-board .group-play-cta .btn svg{width:18px;height:18px}
#dlg-board .group-notice{width:100%;max-width:none;box-sizing:border-box}
#dlg-board .group-waiting-list .group-play-me .group-play-label{display:inline-flex;align-items:center;gap:2px;font:700 14px/1 var(--card-label);color:var(--coral)}
#dlg-board .group-waiting-list .group-play-me .group-play-label svg{width:16px;height:16px}
/* Global standings: a guest's way onto the board, first on the page. */
#dlg-board .global-join{display:grid;gap:12px;margin:4px 0 14px;padding:14px 16px;border:1px solid var(--es-line);border-radius:14px;background:var(--es-surface);box-shadow:var(--es-shadow-soft)}
#dlg-board .global-join p{margin:0;color:var(--es-ink-2);font-size:15px;line-height:1.45}
#dlg-board .global-join p b{color:var(--es-ink)}
#dlg-board .global-join .btn{width:100%}