/* css/groups.css
 *
 * Groups (Ben, 2026-10-20): the Groups page -- the Library's filter panel
 * (.mk-*, css/marketplace.css) beside a wall of group cards -- and one
 * group's page, Facebook's shape in this site's colours: a cover, the name and
 * the buttons, tabs, and the Discussion Board's feed (css/community.css)
 * beside an About card. Every selector here is .gr-. See includes/groups.php.
 */

/* ----------------------------------------------------------------- buttons */

.gr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: 6px;
    border: 1px solid transparent;
    font: 600 14px var(--font-sans);
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s, filter .15s;
}

.gr-btn--sm {
    padding: 5px 12px;
    font-size: 13px;
}

.gr-btn--solid {
    background: var(--primary);
    color: #fff;
}

.gr-btn--solid:hover {
    filter: brightness(.93);
    color: #fff;
}

.gr-btn--solid i {
    color: inherit !important;
}

.gr-btn--line {
    background: var(--white);
    border-color: var(--border);
    color: var(--text-soft);
}

.gr-btn--line:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* "Owner": a label in the row of buttons, not one to press. */
.gr-role-label,
.gr-role-label:hover {
    cursor: default;
    border-color: var(--border);
    color: var(--text-soft);
}

.gr-role-label i {
    color: var(--gold);
}

.gr-danger,
.gr-danger i {
    color: var(--danger) !important;
}

/* ------------------------------------------------------------ the menus */

.gr-menu {
    position: relative;
    display: inline-block;
}

.gr-menu-list {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 30;
    min-width: 230px;
    list-style: none;
    margin: 0;
    padding: 6px 0;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(13, 13, 26, .14);
}

.gr-menu.is-open .gr-menu-list {
    display: block;
}

.gr-menu-list button,
.gr-menu-list label {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: none;
    border: 0;
    padding: 8px 14px;
    text-align: left;
    font: 14px var(--font-sans);
    color: var(--ink);
    cursor: pointer;
    margin: 0;
}

.gr-menu-list button i,
.gr-menu-list label i {
    width: 16px;
    color: var(--muted);
}

.gr-menu-list button:hover,
.gr-menu-list label:hover {
    background: var(--gold-tint);
}

/* --------------------------------------------------------- the Groups page */

.gr-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.gr-wrap .mk-list.is-loading {
    opacity: .5;
    pointer-events: none;
}

.gr-topic-icon {
    width: 16px;
    color: var(--muted);
    font-size: 12px;
}

.gr-topics li.is-empty .mk-facet-name {
    color: var(--muted);
}

.gr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 18px;
    margin-top: 14px;
}

.gr-card {
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
}

.gr-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(54, 74, 99, .16);
}

.gr-card.is-mine {
    border-color: var(--gold-light);
}

/* A group's picture, WHOLE (Ben, 2026-10-20): members upload squares, posters
   and banners, and there is no crop tool, so nothing is cut. The picture sits
   inside its frame at its own shape (contain), and the room it leaves is
   filled by a blurred, darkened copy of itself -- ::before, from --gr-pic,
   set by groupCover() in includes/groups.php. */
.gr-pic {
    position: relative;
    overflow: hidden;
    background: #1d1d2b;
}

.gr-pic::before {
    content: "";
    position: absolute;
    inset: -16px;
    background: var(--gr-pic) center / cover no-repeat;
    filter: blur(14px) brightness(.8);
}

.gr-pic > img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* On a card on the Groups page. */
.gr-cover {
    position: relative;
    height: 170px;
    overflow: hidden;
    background: var(--panel-head-bg);
}

.gr-cover--plain,
.gr-head-pic--plain,
.gr-thumb--plain {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, .9);
}

.gr-cover--plain i {
    font-size: 40px;
}

/* The cover a group has before it has a picture: its topic's icon, on one of
   six washes, so a wall of new groups is not six identical grey strips. */
.gr-tint-0 { background: linear-gradient(135deg, #6576ff, #8f6ee9); }
.gr-tint-1 { background: linear-gradient(135deg, #c9a84c, #e3b95c); }
.gr-tint-2 { background: linear-gradient(135deg, #005e6a, #2a8f8a); }
.gr-tint-3 { background: linear-gradient(135deg, #b4505a, #e07a5f); }
.gr-tint-4 { background: linear-gradient(135deg, #364a63, #5a7397); }
.gr-tint-5 { background: linear-gradient(135deg, #2bb673, #4cc9a0); }

.gr-card-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px 14px;
    flex: 1;
}

.gr-card-name {
    font: 700 17px var(--font-sans);
    color: var(--ink);
    text-decoration: none;
    line-height: 1.25;
}

.gr-card-name:hover {
    color: var(--primary);
}

.gr-card-meta {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.4;
}

.gr-privacy i,
.gr-topic i,
.gr-place i {
    font-size: 11px;
    margin-right: 2px;
}

.gr-card-desc {
    margin: 6px 0 0;
    font-size: 14px;
    color: var(--text-soft);
    line-height: 1.45;
    flex: 1;
}

.gr-card-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    min-height: 30px;
}

.gr-you {
    font: 600 13px var(--font-sans);
    color: var(--logo-green);
}

.gr-new {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font: 700 12px var(--font-sans);
}

/* Invitations, above the wall. */
.gr-invites {
    padding: 0;
    margin-bottom: 18px;
}

.gr-invites-head {
    padding: 10px 16px;
    background: var(--panel-head-bg);
    font: 700 15px var(--font-sans);
    color: var(--ink);
}

.gr-invites-head i {
    color: var(--gold);
    margin-right: 6px;
}

.gr-invite-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-top: 1px solid var(--border);
    background: var(--white);
}

.gr-thumb {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 6px;
    overflow: hidden;
}

.gr-thumb--plain i {
    font-size: 16px;
}

.gr-invite-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.gr-invite-name {
    font: 700 15px var(--font-sans);
    color: var(--ink);
    text-decoration: none;
}

.gr-invite-sub {
    font-size: 13px;
    color: var(--muted);
}

.gr-invite-note {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    color: var(--text-soft);
    font-style: italic;
    white-space: pre-line;
}

.gr-invite-btns,
.gr-invitebar-btns {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
}

/* ------------------------------------------------------------ one group */

.gr-back {
    margin-bottom: 14px;
}

/* The top card (Ben, 2026-10-20): the picture on the left, as a poster sits
   beside a script's title, and the name, kind, first lines and buttons to its
   right. The tabs are a card of their own under it. */
.gr-head {
    padding: 18px;
    background: var(--white);
    overflow: visible;
    margin-bottom: 14px;
    /* Above the tabs card after it, so the Owner / Joined and Manage menus
       hang over it rather than behind it. */
    position: relative;
    z-index: 5;
}

.gr-head-top {
    display: flex;
    gap: 22px;
    align-items: flex-start;
}

.gr-head-pic {
    flex: 0 0 200px;
    width: 200px;
    height: 200px;
    border-radius: 8px;
    overflow: hidden;
}

.gr-head-pic--plain i {
    font-size: 64px;
}

/* A picture here is shown as itself (Ben, 2026-10-20): no blurred backing,
   no frame, its own shape across the column and set at the top -- a tall one
   capped so it cannot stretch the card. The plain tile above keeps its square. */
.gr-head-pic.gr-pic {
    height: auto;
    background: none;
    border-radius: 0;
    overflow: visible;
}

.gr-head-pic.gr-pic::before {
    display: none;
}

.gr-head-pic.gr-pic > img {
    width: 100%;
    height: auto;
    max-height: 320px;
    object-fit: contain;
    object-position: top center;
    border-radius: 8px;
}

.gr-head-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gr-head-name {
    margin: 0 0 4px;
    font: 700 28px var(--font-sans);
    color: var(--ink);
    line-height: 1.2;
}

.gr-head-meta {
    font-size: 14px;
    color: var(--muted);
}

/* The first lines of what it is about; the rest is on About. */
.gr-head-desc {
    margin: 8px 0 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-dark);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gr-head-btns {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 14px;
}

/* A phone: the picture above the words, centred. */
@media (max-width: 640px) {
    .gr-head-top {
        flex-direction: column;
        align-items: center;
        gap: 14px;
    }

    .gr-head-pic {
        flex-basis: auto;
    }

    .gr-head-body {
        width: 100%;
    }
}

.gr-invitebar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 16px 0 0;
    padding: 10px 14px;
    background: var(--gold-tint);
    border: 1px solid var(--gold-light);
    border-radius: 8px;
    font-size: 15px;
    color: var(--ink);
}

.gr-invitebar > i {
    color: var(--gold);
}

.gr-invitebar > span:first-of-type {
    flex: 1;
    min-width: 200px;
}

/* The tabs, a full-width card of their own under the top card. */
/* The tabs and what each shows, in one card (Ben, 2026-10-20): the bar is
   the card's top strip, and the posts, members and scripts sit beneath it on
   the card's own surface, each in its white box -- the dashboard's way of
   holding things in a card. Not clipped: a member's menu may hang out of it. */
.gr-panel {
    overflow: visible;
}

.gr-panel > .gr-body {
    padding: 18px;
}

/* The last box in a tab ends at the panel's padding, not a card's margin too. */
.gr-panel .gr-pane > .card:last-child {
    margin-bottom: 0;
}

.gr-tabs {
    display: flex;
    gap: 2px;
    padding: 0 12px;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    border-radius: 10px 10px 0 0;
    /* Swiped sideways on a phone; no bar drawn under the tabs. */
    overflow-x: auto;
    scrollbar-width: none;
}

.gr-tabs::-webkit-scrollbar {
    display: none;
}

.gr-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 12px 14px;
    background: none;
    border: 0;
    border-bottom: 3px solid transparent;
    font: 600 15px var(--font-sans);
    color: var(--text-soft);
    cursor: pointer;
    white-space: nowrap;
}

.gr-tab:hover {
    color: var(--ink);
}

.gr-tab.is-on {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.gr-tab-badge {
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: 11px;
}

.gr-tab-n {
    color: var(--muted);
    font-weight: 500;
    font-size: 13px;
}

.gr-body {
    container-type: inline-size;
    container-name: grbody;
}

.gr-layout {
    display: grid;
    grid-template-columns: minmax(0, 640px) minmax(240px, 300px);
    gap: 24px;
    align-items: start;
}

.gr-layout--one {
    grid-template-columns: minmax(0, 760px);
}

.gr-main {
    min-width: 0;
    /* The feed's own narrow rules (css/community.css) are written for a
       container named community -- the Board's page, or a thread embedded on
       another page. The group's feed column is one too, so its entry box wraps
       and drops the word Post exactly as the Board's does. */
    container-type: inline-size;
    container-name: community;
}

.gr-side {
    position: sticky;
    top: calc(var(--header-height, 50px) + 12px);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@container grbody (max-width: 810px) {
    .gr-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .gr-side {
        position: static;
        order: -1;
    }

    .gr-side .gr-side-card:not(:first-child) {
        display: none;
    }
}

.gr-side-card {
    padding: 14px 16px;
    background: var(--white);
    margin-bottom: 0;
}

.gr-side-title,
.gr-section-title {
    margin: 0 0 8px;
    font: 700 16px var(--font-sans);
    color: var(--ink);
}

.gr-section-title {
    margin-top: 18px;
}

.gr-section-title:first-child,
.gr-member-search + .gr-section-title {
    margin-top: 0;
}

.gr-count {
    color: var(--muted);
    font-weight: 500;
    font-size: 14px;
}

.gr-about-text {
    margin: 0 0 10px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--text-dark);
}

.gr-about-facts {
    font-size: 13px;
    color: var(--muted);
}

.gr-side-scripts {
    list-style: none;
    margin: 0 0 6px;
    padding: 0;
}

.gr-side-scripts li {
    display: flex;
    flex-direction: column;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
}

.gr-side-scripts a {
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
}

.gr-side-scripts a:hover {
    color: var(--primary);
}

.gr-side-scripts span {
    font-size: 12px;
    color: var(--muted);
}

.gr-note {
    margin-bottom: 12px;
    padding: 10px 14px;
    background: var(--gold-tint);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    color: var(--text-dark);
}

.gr-note i {
    color: var(--gold);
    margin-right: 4px;
}

.gr-locked {
    padding: 36px 20px;
    background: var(--white);
    text-align: center;
    color: var(--text-soft);
}

.gr-locked > i {
    display: block;
    font-size: 30px;
    /* Font Awesome 7 gives an icon a width of its own, so a block one sits at
       the left unless it is centred itself. */
    margin: 0 auto 10px;
    color: var(--muted);
}

.gr-locked p {
    max-width: 480px;
    margin: 0 auto 14px;
    font-size: 15px;
}

/* About, whole. */
.gr-about,
.gr-members,
.gr-scripts {
    padding: 18px 20px;
    background: var(--white);
    /* .card hides what spills over; a member's menu on the last row has to. */
    overflow: visible;
}

.gr-facts {
    list-style: none;
    margin: 14px 0 6px;
    padding: 0;
    display: grid;
    gap: 12px;
}

.gr-facts li {
    display: flex;
    gap: 12px;
    font-size: 14px;
    color: var(--text-soft);
    line-height: 1.45;
}

.gr-facts li > i {
    width: 18px;
    margin-top: 3px;
    color: var(--muted);
    text-align: center;
}

.gr-facts b {
    color: var(--ink);
}

/* ------------------------------------------------------------- members */

.gr-member-search {
    width: 100%;
    max-width: 320px;
    margin-bottom: 14px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font: 14px var(--font-sans);
}

.gr-mlist {
    list-style: none;
    margin: 0 0 6px;
    padding: 0;
}

.gr-mrow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.gr-mrow:last-child {
    border-bottom: 0;
}

.gr-avatar {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--panel-head-bg);
    color: var(--text-soft);
    font: 700 16px var(--font-sans);
}

.gr-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gr-mtext {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    flex: 1;
    min-width: 160px;
}

.gr-mname {
    font: 600 15px var(--font-sans);
    color: var(--ink);
    text-decoration: none;
}

a.gr-mname:hover {
    color: var(--primary);
}

.gr-msub {
    flex-basis: 100%;
    font-size: 12px;
    color: var(--muted);
}

.gr-mnote {
    flex-basis: 100%;
    margin-left: 50px;
    font-size: 13px;
    color: var(--text-soft);
    font-style: italic;
    white-space: pre-line;
}

.gr-mbtns {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.gr-role,
.gr-right {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font: 600 11px var(--font-sans);
    text-transform: uppercase;
    letter-spacing: .03em;
}

.gr-role--owner {
    background: var(--gold-tint);
    color: #8a6d1e;
    border: 1px solid var(--gold-light);
}

.gr-role--admin {
    background: #eef0ff;
    color: var(--primary);
    border: 1px solid var(--primary-dim);
}

.gr-right {
    background: #eefaf3;
    color: #1f8a56;
    border: 1px solid #c7ecd8;
}

.gr-empty {
    font-size: 14px;
    color: var(--muted);
}

/* ------------------------------------------------------------- scripts */

.gr-scripts-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.gr-scripts-intro {
    margin: 0;
    font-size: 14px;
    color: var(--text-soft);
}

.gr-slist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.gr-srow {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 0;
    border-top: 1px solid var(--border);
}

.gr-poster {
    flex: 0 0 auto;
    width: 54px;
    height: 80px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--panel-head-bg);
}

.gr-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gr-poster.is-blank {
    background: var(--panel-head-bg) url(/siteimages/p6.webp);
}

.gr-stext {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.gr-stitle {
    font: 700 16px var(--font-sans);
    color: var(--ink);
    text-decoration: none;
}

a.gr-stitle:hover {
    color: var(--primary);
}

.gr-ep {
    margin-left: 6px;
    font-weight: 500;
    color: var(--muted);
}

.gr-sby,
.gr-ssub {
    font-size: 13px;
    color: var(--muted);
}

.gr-slog {
    font-size: 14px;
    color: var(--text-soft);
    line-height: 1.45;
}

/* ------------------------------------------------------------- dialogs */

.gr-pop .swal2-html-container {
    text-align: left;
    margin: 10px 18px 0;
}

/* Create / Edit Group has to fit a laptop's screen (about 768px tall, less
   the browser's own bars) without scrolling: a smaller title, and the form
   set close. */
.gr-pop .swal2-title {
    font-size: 1.55em;
    padding: .6em 1em 0;
}

.gr-pop .swal2-actions {
    margin-top: .9em;
}

.gr-form {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 14px;
}

.gr-form .gr-label {
    margin-top: 6px;
}

.gr-form .gr-hint {
    margin: 2px 0 0;
    font-size: 12.5px;
}

/* What the chosen kind of group means, under its menu. */
.gr-form .gr-kind-note {
    font-size: 13px;
    color: var(--text-soft);
    line-height: 1.4;
}

.gr-label {
    display: block;
    margin-top: 10px;
    /* A little air between a label and the box or menu under it. */
    margin-bottom: 3px;
    font: 600 14px var(--font-sans);
    color: var(--ink);
}

.gr-input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font: 15px var(--font-sans);
    color: var(--ink);
    background: var(--white);
}

textarea.gr-input {
    resize: vertical;
    min-height: 70px;
}

/* What the group is about: two lines to start, growing as it is written.
   The box and its hidden copy (.grow-wrap, css/dashboard.css) must measure
   alike, so both take the input's own font, padding and border here. */
.gr-grow > textarea.gr-input {
    min-height: 0;
    resize: none;
    overflow: hidden;
}

.gr-grow > textarea.gr-input,
.gr-grow::after {
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font: 15px/1.4 var(--font-sans);
    overflow-wrap: anywhere;
}

.gr-check {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-top: 8px;
    /* The words 2px lower, level with the box: the padding moves both, and
       the box gives the 2px back in its own margin. */
    padding-top: 2px;
    color: var(--text-dark);
    cursor: pointer;
}

.gr-check input {
    margin-top: 1px;
}

.gr-check[hidden],
.gr-where[hidden] {
    display: none;
}

.gr-row2,
.gr-row3 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.gr-row3 {
    grid-template-columns: 1fr 1fr 1fr;
    margin-top: 6px;
}

/* Name wider than the topic beside it. */
.gr-row2--name {
    grid-template-columns: 3fr 2fr;
}

@media (max-width: 560px) {
    .gr-row2,
    .gr-row3 {
        grid-template-columns: 1fr;
    }
}

.gr-hint {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--muted);
}

.gr-details {
    margin-top: 6px;
}

.gr-details summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--text-soft);
}

.gr-genres {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 4px 10px;
    margin-top: 8px;
}

.gr-genre {
    display: flex;
    gap: 6px;
    align-items: center;
    cursor: pointer;
    color: var(--text-dark);
}

/* The cover picture box at the top of Create / Edit Group: a dashed strip
   until a picture is dropped or chosen, then the picture itself, cropped as a
   card's cover is, with x to take it off. groupCoverDrop() in js/groups.js. */
.gr-coverdrop {
    position: relative;
    height: 96px;
    border: 2px dashed var(--border);
    border-radius: 8px;
    background: var(--bg-light, #f5f6fa);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    transition: border-color .2s, background .2s;
}

.gr-coverdrop:hover,
.gr-coverdrop:focus-visible,
.gr-coverdrop.is-over {
    border-color: var(--primary);
    background: #eef0ff;
    outline: none;
}

.gr-coverdrop-text {
    font-size: 14px;
    color: var(--text-soft);
    text-align: center;
    padding: 0 12px;
}

.gr-coverdrop-text i {
    color: var(--primary);
    margin-right: 4px;
}

.gr-coverdrop-text em {
    color: var(--muted);
}

/* The kinds of picture it takes, on a line of their own. */
.gr-coverdrop-types {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    color: var(--muted);
    letter-spacing: .03em;
}

/* Whole, over its blurred copy, as everywhere (.gr-pic) -- the box is a
   dashed drop target, not a .gr-pic frame, until there is a picture. */
.gr-coverdrop.gr-pic {
    background: var(--bg-light, #f5f6fa);
}

.gr-coverdrop:not(.has-img)::before {
    display: none;
}

.gr-coverdrop img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: none;
    z-index: 1;
}

.gr-coverdrop.has-img {
    border-style: solid;
    height: 150px;
}

.gr-coverdrop.has-img img {
    display: block;
}

.gr-coverdrop.has-img .gr-coverdrop-text {
    display: none;
}

/* Uploading: the picture shows, dimmed, until the server has it. */
.gr-coverdrop.is-busy img {
    opacity: .55;
}

.gr-coverdrop.is-busy::after {
    content: "Uploading\2026";
    z-index: 2;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(13, 13, 26, .65);
    color: #fff;
    font: 600 13px var(--font-sans);
}

.gr-coverdrop-x {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 0;
    background: rgba(13, 13, 26, .65);
    color: #fff;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    display: none;
    z-index: 2;
}

.gr-coverdrop.has-img .gr-coverdrop-x {
    display: block;
}

/* A group's notification settings: one row a kind of activity, its words on
   the left and a switch on the right (renderGroupNotifyForm()). */
.gr-notify {
    text-align: left;
}

.gr-switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
}

.gr-switch-text {
    display: flex;
    flex-direction: column;
    font-size: 13.5px;
    color: var(--text-soft);
}

.gr-switch-text b {
    font-size: 15px;
    color: var(--ink);
}

/* The checkbox drawn as an on/off switch. */
.gr-switch {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    position: relative;
    width: 42px;
    height: 24px;
    margin: 0;
    border-radius: 999px;
    background: #cfd3de;
    cursor: pointer;
    transition: background .2s;
}

.gr-switch::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    transition: transform .2s;
}

.gr-switch:checked {
    background: var(--primary);
}

.gr-switch:checked::after {
    transform: translateX(18px);
}

.gr-switch:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.gr-notify .gr-hint {
    margin-top: 12px;
}

/* "Add a cover picture" and "Later", after a group is made. */
.gr-offer-btns {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 14px;
}

.gr-dialog-text {
    margin: 0 0 10px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-dark);
}

.gr-picks {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 280px;
    overflow-y: auto;
}

.gr-pick {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
}

.gr-pick:hover {
    background: var(--gold-tint);
}

.gr-pick-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.gr-pick-text b {
    color: var(--ink);
}

.gr-pick-text span {
    font-size: 12px;
    color: var(--muted);
}

.gr-shared-now {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
}

.gr-shared-now li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
    color: var(--text-dark);
}

/* ------------------------------------------------------------ narrow */

@media (max-width: 640px) {
    .gr-head-name {
        font-size: 22px;
    }

    .gr-invite-row {
        flex-wrap: wrap;
    }

    .gr-mbtns {
        margin-left: 50px;
    }
}