/*
 * scope_card.css — the Everyone / My communities / one community card on
 * Marketplace and Find It (pages/scope_card.php), and its picker sheet.
 * Tokens from main.css; the switch parts are drawn here because auth.css is
 * not loaded on these pages.
 */
.wg-sc-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin: 0 0 12px;
  background: var(--wg-tint); border: 1px solid var(--wg-border-soft); border-radius: var(--wg-radius-card);
  transition: border-color .16s ease; }
.wg-sc-card.is-on { border-color: var(--wg-color); }
.wg-sc-orb { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--wg-raised); color: var(--wg-color-ink); flex: 0 0 auto; }
.wg-sc-orb .wg-ico { width: 20px; height: 20px; grid-area: 1 / 1; }
.wg-sc-card .wg-sc-ico-mine { display: none; }
.wg-sc-card.is-on .wg-sc-ico-all { display: none; }
.wg-sc-card.is-on .wg-sc-ico-mine { display: block; }
.wg-sc-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wg-sc-t { font-weight: 800; font-size: 0.95rem; }
.wg-sc-b { font-size: 0.8rem; color: var(--wg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wg-sc-link { align-self: flex-start; margin-top: 2px; padding: 0; border: 0; background: none; font: inherit; font-size: 0.82rem; font-weight: 700; color: var(--wg-color-ink); cursor: pointer; }
.wg-sc-link:focus-visible { outline: none; box-shadow: var(--wg-focus-ring); border-radius: 4px; }
/* the switch */
.wg-sc-switch { position: relative; flex: 0 0 auto; cursor: pointer; }
.wg-sc-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.wg-sc-switch .wg-switch-track { display: block; width: 46px; height: 27px; border-radius: 999px; background: var(--wg-border); position: relative; transition: background .18s ease; }
.wg-sc-switch .wg-switch-knob { position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%; background: var(--wg-raised); box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .18s var(--wg-ease-spring); }
.wg-sc-switch input:checked + .wg-switch-track { background: var(--wg-color); }
.wg-sc-switch input:checked + .wg-switch-track .wg-switch-knob { transform: translateX(19px); }
.wg-sc-switch input:focus-visible + .wg-switch-track { box-shadow: var(--wg-focus-ring); }
/* the sheet */
.wg-sc-sheet { max-height: 86vh; overflow: auto; }
.wg-sc-opt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; margin-bottom: 8px; text-align: left; font: inherit; font-weight: 700; color: var(--wg-text); cursor: pointer;
  background: var(--wg-raised); border: 1px solid var(--wg-border-soft); border-radius: var(--wg-radius); }
.wg-sc-opt > span { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.wg-sc-opt small { font-weight: 500; color: var(--wg-muted); font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wg-sc-opt-ico { width: 20px; height: 20px; color: var(--wg-color-ink); flex: 0 0 auto; }
.wg-sc-opt-check { width: 20px; height: 20px; color: var(--wg-color); visibility: hidden; flex: 0 0 auto; }
.wg-sc-opt.is-on { border-color: var(--wg-color); background: var(--wg-tint); }
.wg-sc-opt.is-on .wg-sc-opt-check { visibility: visible; }
.wg-sc-opt:focus-visible { outline: none; box-shadow: var(--wg-focus-ring); }
.wg-sc-sheet-label { font-size: 0.78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--wg-muted); margin: 14px 0 8px; }
@media (prefers-reduced-motion: reduce) { .wg-sc-card, .wg-sc-switch .wg-switch-track, .wg-sc-switch .wg-switch-knob { transition: none; } }