/* Groups (Elliott, 2026-10-20): the Groups tab, a group's QR code and
   page, the Join page for someone who scanned it, and groups in Who can join.
   Built to the "Chillin group QR" mockup. Shares friend-link.css's page and
   sheet styles (.fl-page, .fl-go, .fl-later). */

/* The Groups tab (Elliott, 2026-10-24): invites, Make a group, then one row per group, read
   like a list of chats. */
#home .groups-section .section-heading { padding: 0; border: 0; margin: 0 0 16px; }
#home #groups-title { font-size: 16px; line-height: 24px; font-weight: 600; letter-spacing: 0; }
#home #groups-title:focus { outline: none; }
.gr-home { display: grid; gap: 16px; }
.gr-home[hidden], .gr-home [hidden] { display: none !important; }
.gr-start { height: 48px; border: 0; border-radius: 14px; background: var(--bloom-surface); color: var(--bloom-ink); font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; }
.gr-start:focus-visible, .gr-row:focus-visible { outline: 2px solid var(--bloom-ink); outline-offset: 2px; }
.gr-empty { margin: 0; padding: 0 4px; font-size: 14px; line-height: 1.45; color: var(--bloom-muted); }
/* Make a group: its own sheet, sitting in what's visible above the keyboard (Elliott, 2026-10-24). */
.gr-form { display: grid; gap: 8px; }
.gr-label { font-size: 13px; font-weight: 700; color: var(--bloom-muted); }
/* One quiet box: a thin line that darkens while typing, no ring round it. */
.gr-called { min-width: 0; width: 100%; box-sizing: border-box; height: 50px; padding: 0 14px; border: 1px solid var(--bloom-line); border-radius: 14px; background: var(--bloom-surface); font: inherit; font-size: 16px; font-weight: 600; color: var(--bloom-ink); }
.gr-called:focus, .gr-called:focus-visible { outline: none; border-color: var(--bloom-ink); background: #fff; }
.gr-called[aria-invalid="true"] { border-color: #c2361a; }
.gr-until { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; font-size: 14px; color: var(--bloom-muted); }
.gr-days { height: 38px; padding: 0 10px; border: 0; border-radius: 12px; background: var(--bloom-surface); color: var(--bloom-ink); font: inherit; font-size: 14px; font-weight: 600; }
.gr-make { margin-top: 8px; }
.gr-error, .gr-sheet > p.gr-error { margin: 0; min-height: 0; font-size: 14px; color: #b2361a; }
.gr-sheet > p.gr-error:not(:empty) { margin-bottom: 12px; }
/* Empty, it takes no room but stays on the page, so a screen reader hears its first message. */
.gr-error:empty { position: absolute; }
.gr-list { display: grid; }
.gr-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 72px; padding: 8px 0; border: 0; border-bottom: 1px solid var(--bloom-line);
  border-radius: 0; background: none; color: var(--bloom-ink); font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.gr-row:last-child { border-bottom: 0; }
/* A row dims under the finger, as a chat list does (2026-10-26). */
.gr-row { transition: opacity .14s; }
.gr-row:active { opacity: .55; transition-duration: .06s; }
/* A little pile: two cards and whoever posted last. */
.gr-mini { position: relative; flex: none; width: 48px; height: 52px; }
.gr-mini i { position: absolute; inset: 2px 4px; border-radius: 12px; background: #fff; box-shadow: 0 3px 8px #00000012; }
.gr-mini i:nth-child(1) { transform: rotate(-8deg); background: #f6f4ee; }
.gr-mini .gr-mini-face { position: absolute; left: 7px; top: 9px; width: 34px; height: 34px; font-size: 14px; }
.gr-mini-plus { position: absolute; inset: 0; display: grid; place-items: center; color: var(--bloom-muted); font-size: 18px; font-weight: 800; }
.gr-row-words { flex: 1; min-width: 0; display: grid; gap: 2px; }
.gr-row-words b { font-size: 16px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gr-said { font-size: 14px; color: var(--bloom-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gr-said.fresh { color: var(--bloom-ink); font-weight: 600; }
.gr-row-side { flex: none; display: grid; justify-items: end; gap: 6px; font-size: 12px; color: var(--bloom-muted); }
.gr-row-live { display: inline-flex; align-items: center; gap: 5px; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--bloom-live-text); font-weight: 800; }
.gr-row-live::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--bloom-live); }
.gr-row-new { min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 10px; background: var(--bloom-ink); color: #fff; font-weight: 800; line-height: 20px; text-align: center; }

/* Sheets: Join, alerts, the QR code and a group's page. */
.gr-sheet { position: fixed; inset: auto 12px max(12px, env(safe-area-inset-bottom)) 12px; width: auto; max-width: 480px; max-height: calc(100dvh - 24px);
  margin: 0 auto; padding: 22px 20px 18px; border: 0; border-radius: 30px; background: #fff; color: var(--bloom-ink); text-align: center;
  box-shadow: 0 20px 50px #0003; overflow-y: auto; box-sizing: border-box; animation: fl-rise .4s cubic-bezier(.3, 1.2, .5, 1); }
/* While typing, iOS scrolls the page up instead of shrinking it, so a sheet held to the
   bottom slid its title under the status bar, blurred there in the iPhone app (Elliott,
   2026-10-21). With the keyboard up it sits in what's visible instead, below the status
   bar (app.js keepFieldClear sets the class and the visible area). */
html.keyboard-up .gr-sheet[open] {
  inset: calc(var(--keyboard-view-top, 0px) + max(12px, env(safe-area-inset-top))) 12px auto 12px;
  max-height: calc(var(--keyboard-view-height, 90dvh) - max(12px, env(safe-area-inset-top)) - 12px);
}
.gr-sheet::backdrop { background: #0004; }
.gr-sheet h2 { outline: none; margin: 4px 0 6px; font-size: 26px; letter-spacing: -.5px; line-height: 1.15; overflow-wrap: anywhere; }
.gr-sheet > p { margin: 0 0 16px; font-size: 15px; line-height: 1.4; color: var(--bloom-muted); }
.gr-sheet .fl-kicker { margin: 0; }
.gr-bell { width: 52px; height: 52px; fill: none; stroke: var(--bloom-ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.gr-tip { padding: 12px 14px; border-radius: 16px; background: var(--bloom-surface); text-align: left; font-size: 14px !important; }
.gr-tip b { color: var(--bloom-ink); }
.gr-inline { padding: 0; border: 0; background: none; color: var(--bloom-ink); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }

.gr-make-sheet { text-align: left; }
.gr-make-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.gr-make-top h2 { margin: 0 0 4px; }
.gr-make-top .gr-done { flex: none; font-size: 15px; color: var(--bloom-muted); }
.gr-make-sheet > p { margin-bottom: 14px; }
/* Typing, only what's needed to make it stays, so Make QR code clears the keyboard on a small phone. */
html.keyboard-up .gr-make-sheet > p { display: none; }
html.keyboard-up .gr-make-top h2 { font-size: 22px; }

.gr-code-sheet { inset: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)) 12px; display: flex; flex-direction: column; }
.gr-code-sheet:not([open]) { display: none; }
.gr-code-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; font-size: 14px; color: var(--bloom-muted); }
.gr-done { font-size: 16px; font-weight: 700; color: var(--bloom-ink); text-decoration: none; }
.gr-qr { display: block; width: min(76vw, 300px); aspect-ratio: 1; margin: 12px auto 0; padding: 10px; box-sizing: border-box;
  border: 1px solid var(--bloom-line); border-radius: 22px; background: #fff; image-rendering: pixelated; }
.gr-note { margin: 14px 8px 18px !important; font-size: 14px !important; }
.gr-code-sheet .fl-go { margin-top: auto; }
.gr-stop { align-self: center; margin-top: 12px; font-size: 14px; color: var(--bloom-muted); }

.gr-group-sheet { inset: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)) 12px; text-align: left; }
.gr-back { font-size: 15px; font-weight: 700; color: var(--bloom-muted); text-decoration: none; }
.gr-group-sheet h2 { margin-top: 10px; margin-bottom: 0; }
.gr-sub { margin: 0 0 14px !important; font-size: 14px !important; }
.gr-settings { display: grid; padding: 2px 14px; border: 1px solid var(--bloom-line); border-radius: 18px; }
.gr-sheet .gr-setting { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 0; border: 0;
  border-bottom: 1px solid var(--bloom-line); background: none; color: var(--bloom-ink); font: inherit; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; }
.gr-sheet .gr-setting:last-child { border-bottom: 0; }
.gr-toggle { appearance: none; position: relative; width: 48px; height: 30px; margin: 0; flex: none; border-radius: 15px; background: #d7d4cc; cursor: pointer; transition: background .2s; }
.gr-toggle::after { content: ""; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #0003; transition: transform .2s; }
.gr-toggle:checked { background: var(--bloom-ink); }
.gr-toggle:checked::after { transform: translateX(18px); }
.gr-members { list-style: none; margin: 10px 0 0; padding: 0; }
.gr-member { display: flex; align-items: center; gap: 12px; min-height: 58px; border-bottom: 1px solid var(--bloom-line); }
.gr-member:last-child { border-bottom: 0; }
.gr-loading { color: var(--bloom-muted); font-size: 14px; }
.gr-member-face { width: 40px; height: 40px; flex: none; font-size: 15px; border-radius: 50%; background-size: cover; }
.gr-member-copy { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.gr-member-name { font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gr-member-note { font-size: 13px; color: var(--bloom-muted); }
.gr-add { flex: none; height: 34px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--bloom-ink); color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.gr-add:disabled { background: var(--bloom-surface); color: var(--bloom-muted); opacity: 1; }
.gr-more-button { flex: none; width: 40px; height: 40px; border: 0; border-radius: 12px; background: none; color: var(--bloom-muted); font: inherit; font-size: 15px; letter-spacing: 1px; cursor: pointer; }
.gr-leave { display: block; width: 100%; margin-top: 16px; padding: 14px 0 4px; font-size: 15px; font-weight: 700; color: #b2361a; text-align: center; }

/* The page for someone who scanned the code and has no profile yet. */
.gr-page h1 { font-size: 30px; letter-spacing: -.8px; overflow-wrap: anywhere; }
.gr-crowd { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 22px 0 24px; padding: 22px 18px; text-align: center;
  border: 1px solid var(--bloom-line); border-radius: 24px; background: #fff; box-shadow: 0 8px 24px #0000000d; }
.gr-crowd b { font-size: 16px; }
.gr-crowd p { margin: 0; font-size: 15px; line-height: 1.4; color: var(--bloom-muted); }
.gr-faces { display: flex; padding-left: 10px; }
.gr-face { width: 40px; height: 40px; margin-left: -10px; box-sizing: border-box; border: 3px solid #fff; border-radius: 50%; font-size: 14px; background-size: cover; display: grid; place-items: center; }
.gr-more { background: var(--bloom-surface); color: var(--bloom-ink); font-size: 12px; font-weight: 800; }

/* Your groups in Who can join, after your tags. */
.island #hangout-audience-groups:not([hidden]) { display: flex; flex-direction: column; gap: 2px; order: 4; padding: 3px 0; border-top: 1px solid var(--bloom-line); margin: 3px 10px 0; }
#hangout-audience-groups[hidden] { display: none; }
.island #hangout-audience-groups button { display: flex; align-items: center; width: calc(100% + 20px); min-height: 48px; margin: 0 -10px; padding: 10px 14px;
  border: 0; border-radius: 16px; background: transparent; color: var(--bloom-ink); font: inherit; font-size: 15px; font-weight: 600; text-align: left; }
.island #hangout-audience-groups button[aria-pressed="true"] { background: var(--bloom-surface); }
.audience-group-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audience-group-count { flex: 1; margin-left: 5px; color: var(--bloom-muted); font-weight: 400; white-space: nowrap; }
.island #hangout-audience-groups button[aria-pressed="true"]::after { content: "✓"; font-weight: 700; color: var(--bloom-live-text); }

@media (prefers-reduced-motion: reduce) {
  .gr-sheet { animation: none; }
  .gr-toggle, .gr-toggle::after { transition: none; }
}

/* Invites from friends (2026-10-23): a card per group on the Friends tab, Join or Not now. */
.gr-invites { display: grid; gap: 10px; }
.gr-chevron { margin-left: auto; color: var(--bloom-muted); font-size: 20px; }
.gr-invites[hidden] { display: none; }
.gr-invite { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 12px 12px 12px 14px; border: 1px solid var(--bloom-line); border-radius: 20px; background: #fff; }
.gr-invite-face { flex: none; width: 44px; height: 44px; border-radius: 50%; background-size: cover; display: grid; place-items: center; font-size: 15px; }
.gr-invite-words { flex: 1 1 calc(100% - 56px); min-width: 0; display: grid; line-height: 1.25; }
.gr-invite-words b { font-size: 17px; font-weight: 800; overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.gr-invite-words small { font-size: 13px; font-weight: 700; color: var(--bloom-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gr-invite-join { flex: none; margin-left: 56px; height: 40px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--bloom-ink); color: #fff; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; }
.gr-invite-later { flex: none; padding: 6px 2px; font-size: 13px; font-weight: 700; color: var(--bloom-muted); }
/* Choosing friends to invite. */
.gr-picker-sheet { inset: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)) 12px; text-align: left; }
.gr-pick-list { list-style: none; margin: 0 0 12px; padding: 0; }
.gr-pick { display: flex; align-items: center; gap: 12px; min-height: 58px; border-bottom: 1px solid var(--bloom-line); cursor: pointer; }
.gr-pick-list li:last-child .gr-pick { border-bottom: 0; }
.gr-pick input { flex: none; width: 24px; height: 24px; accent-color: var(--bloom-ink); }
.gr-sheet > .gr-faces { justify-content: center; margin-bottom: 10px; }
/* Bring people in: your friends, OR a share link (Elliott, 2026-10-24). */
.gr-picker-sheet .gr-code-top { margin-bottom: 10px; }
.gr-picker-sheet h2 { margin-bottom: 14px; }
.gr-bring { display: grid; }
.gr-bring > .gr-label { margin: 0 0 2px; font-size: 12px; letter-spacing: .06em; }
.gr-bring > .gr-note { margin: 4px 0 8px !important; }
.gr-bring > .gr-error:not(:empty) { margin-bottom: 10px; }
.gr-sheet > p.gr-or { display: flex; align-items: center; gap: 10px; margin: 16px 0; font-size: 12px; font-weight: 800; letter-spacing: .06em; color: var(--bloom-muted); }
.gr-or::before, .gr-or::after { content: ""; flex: 1; height: 1px; background: var(--bloom-line); }
.gr-share-row { display: grid; gap: 3px; width: 100%; padding: 14px 16px; border: 1px solid var(--bloom-line); border-radius: 18px; background: none;
  color: var(--bloom-ink); font: inherit; text-align: left; cursor: pointer; }
.gr-share-row b { font-size: 16px; }
.gr-share-row small { font-size: 14px; line-height: 1.35; color: var(--bloom-muted); }
.gr-share-row:disabled { opacity: .6; }
/* The share link: its address under the QR code, and the date it stops working. */
.gr-sheet > p.gr-url { margin: 10px 0 4px; font-size: 13px; font-weight: 700; color: var(--bloom-muted); overflow-wrap: anywhere; }
.gr-code-sheet .gr-until { margin: 10px 0 16px; }
.gr-until-date { padding: 8px 10px; border-radius: 12px; background: var(--bloom-surface); color: var(--bloom-ink); font-size: 14px; }