/* =====================================================================
   Collarspace Groups - Milestone 1
   cs_groups_2026_10_25a.css

   Scope: every rule is rooted at .gr-wrap / .gr-* so nothing here can
   reach the rest of the site. Loaded from the page body, after
   header76.asp's own stylesheets, so it wins on equal specificity.

   Width: the header76 shell is a fixed 778px table with a 161px nav
   column, leaving ~617px. The feed is therefore designed at 617px and
   never tries to widen the page. Below 1024px the shell is flattened by
   the same reset journal.asp uses.
   ===================================================================== */

.gr-wrap {
  box-sizing: border-box;
  width: 100%;
  max-width: 617px;
  margin: 0 auto;
  padding: 0 6px;
  font-family: "Trebuchet MS", Geneva, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  color: #1d1d1f;
  text-align: left;
}

.gr-wrap *,
.gr-wrap *::before,
.gr-wrap *::after { box-sizing: border-box; }

.gr-wrap a { color: #8e2d5a; text-decoration: none; }
.gr-wrap a:hover { text-decoration: underline; }
.gr-wrap img { max-width: 100%; height: auto; }
.gr-wrap form { margin: 0; }

/* ---------------- header ---------------- */
.gr-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px 0 10px;
  border-bottom: 1px solid #ddd;
  margin-bottom: 12px;
}
.gr-head-main { flex: 1 1 220px; min-width: 0; }
.gr-title {
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 700;
  color: #111;
  overflow-wrap: break-word;
}
.gr-sub { margin: 4px 0 0; color: #666; font-size: 13px; }
.gr-head-actions { flex: 0 0 auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------------- buttons ---------------- */
.gr-btn {
  display: inline-block;
  min-height: 38px;
  padding: 9px 16px;
  border: 1px solid #c9c9cf;
  border-radius: 20px;
  background: #fff;
  color: #333 !important;
  font: 600 14px/1.2 "Trebuchet MS", Geneva, Arial, sans-serif;
  text-align: center;
  cursor: pointer;
  text-decoration: none !important;
  vertical-align: middle;
}
.gr-btn:hover { background: #f0f0f3; }
.gr-btn-primary { background: #8e2d5a; border-color: #8e2d5a; color: #fff !important; }
.gr-btn-primary:hover { background: #7a244c; }
.gr-btn-danger { background: #fff; border-color: #b3243a; color: #b3243a !important; }
.gr-btn-danger:hover { background: #fdeff1; }
.gr-btn-sm { min-height: 32px; padding: 6px 12px; font-size: 13px; border-radius: 16px; }
.gr-btn[disabled], .gr-btn.is-disabled { opacity: .55; cursor: default; }

/* ---------------- tabs ---------------- */
.gr-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  border-bottom: 1px solid #ddd;
  margin: 0 0 14px;
  padding: 0;
  scrollbar-width: none;
}
.gr-tabs::-webkit-scrollbar { display: none; }
.gr-tab {
  flex: 0 0 auto;
  padding: 10px 14px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  color: #555 !important;
  font: 600 14px/1.2 "Trebuchet MS", Geneva, Arial, sans-serif;
  cursor: pointer;
  text-decoration: none !important;
  white-space: nowrap;
}
.gr-tab:hover { color: #111 !important; }
.gr-tab.is-active { color: #8e2d5a !important; border-bottom-color: #8e2d5a; }

/* ---------------- cards ---------------- */
.gr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gr-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 12px;
  overflow: hidden;
}
.gr-card-body { padding: 12px; flex: 1 1 auto; min-width: 0; }
.gr-card-name {
  font-weight: 700;
  font-size: 15px;
  color: #111 !important;
  overflow-wrap: break-word;
  display: block;
}
.gr-card-desc {
  margin: 6px 0 0;
  color: #666;
  font-size: 13px;
  max-height: 54px;
  overflow: hidden;
}
.gr-card-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-top: 1px solid #eee;
  font-size: 12px;
  color: #777;
}
.gr-card-top { display: flex; gap: 10px; align-items: center; }

/* ---------------- avatars / icons ---------------- */
.gr-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #e8e2e6;
  color: #6b3f52;
  font-weight: 700;
  font-size: 17px;
  text-transform: uppercase;
  user-select: none;
}
.gr-avatar-lg { width: 64px; height: 64px; font-size: 26px; border-radius: 16px; }
.gr-avatar-sm { width: 30px; height: 30px; font-size: 13px; }
.gr-av1 { background: #f3e2ec; color: #7b2a4f; }
.gr-av2 { background: #e2ecf3; color: #28536b; }
.gr-av3 { background: #e9f3e2; color: #3d5a2c; }
.gr-av4 { background: #f5ecd8; color: #6d5420; }
.gr-av5 { background: #ece2f3; color: #52306b; }
.gr-av6 { background: #f3e6e2; color: #6b3b28; }

.gr-icon {
  display: inline-block;
  width: 100%;
  height: 96px;
  background: #efe9ec center/cover no-repeat;
}

/* ---------------- chips / notes ---------------- */
.gr-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  background: #eef1f4;
  color: #4a5a66;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
}
.gr-chip-private { background: #f5e9d8; color: #7a5720; }
.gr-chip-hidden { background: #e9e9ee; color: #555; }
.gr-chip-pending { background: #fdeff1; color: #a3203a; }
.gr-chip-role { background: #efe2f3; color: #5c2f73; }

.gr-note {
  padding: 10px 12px;
  border-radius: 10px;
  background: #eaf6ec;
  border: 1px solid #bfe0c6;
  color: #245c31;
  font-size: 14px;
  margin: 0 0 12px;
}
.gr-warn {
  padding: 10px 12px;
  border-radius: 10px;
  background: #fdf3e3;
  border: 1px solid #ecd3a4;
  color: #6b4a12;
  font-size: 14px;
  margin: 0 0 12px;
}
.gr-error {
  padding: 10px 12px;
  border-radius: 10px;
  background: #fdeff1;
  border: 1px solid #efc2cb;
  color: #8c1c30;
  font-size: 14px;
  margin: 0 0 12px;
}
.gr-empty {
  padding: 28px 16px;
  text-align: center;
  color: #777;
  background: #fafafb;
  border: 1px dashed #d5d5da;
  border-radius: 12px;
  font-size: 14px;
}

/* ---------------- group hero ---------------- */
.gr-hero {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 12px;
  background: #fff;
  margin-bottom: 12px;
}
.gr-hero-main { flex: 1 1 auto; min-width: 0; }
.gr-hero-desc { margin: 6px 0 0; color: #555; font-size: 14px; white-space: pre-line; }
.gr-hero-meta { margin: 8px 0 0; color: #777; font-size: 12px; display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------------- composer ---------------- */
.gr-composer {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 14px;
}
.gr-composer-row { display: flex; gap: 10px; align-items: flex-start; }
.gr-composer-fields { flex: 1 1 auto; min-width: 0; }
.gr-textarea, .gr-input, .gr-select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #c9c9cf;
  border-radius: 10px;
  background: #fff;
  color: #111;
  font: 15px/1.4 "Trebuchet MS", Geneva, Arial, sans-serif;
}
.gr-textarea { min-height: 84px; resize: vertical; }
.gr-textarea:focus, .gr-input:focus, .gr-select:focus {
  outline: 2px solid #c98aa8;
  outline-offset: 1px;
  border-color: #8e2d5a;
}
.gr-composer-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.gr-count { color: #888; font-size: 12px; margin-left: auto; }
.gr-label { display: block; margin: 0 0 4px; font-size: 13px; font-weight: 700; color: #444; }
.gr-field { margin-bottom: 12px; }
.gr-check { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: #444; margin: 6px 0; }
.gr-check input { margin-top: 3px; }
.gr-hint { color: #777; font-size: 12px; margin: 4px 0 0; }
.gr-form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ---------------- feed ---------------- */
.gr-feed { display: flex; flex-direction: column; gap: 12px; }
.gr-post {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 12px;
}
.gr-post.is-pinned { border-color: #d9b98e; background: #fffdf8; }
.gr-post-head { display: flex; gap: 10px; align-items: center; }
.gr-post-who { flex: 1 1 auto; min-width: 0; }
.gr-post-name { font-weight: 700; color: #111; font-size: 14px; overflow-wrap: break-word; }
.gr-post-meta { color: #888; font-size: 12px; }
.gr-post-title { margin: 10px 0 0; font-size: 17px; font-weight: 700; color: #111; }
.gr-post-body {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.5;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.gr-post-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #eee;
  font-size: 13px;
  color: #777;
}
.gr-post-foot a { font-weight: 600; }
.gr-post-menu { position: relative; flex: 0 0 auto; }

/* details/summary gives us a menu with no JavaScript */
.gr-menu { position: relative; }
.gr-menu > summary {
  list-style: none;
  cursor: pointer;
  padding: 4px 10px;
  border: 1px solid #ddd;
  border-radius: 14px;
  font-size: 13px;
  color: #555;
  background: #fff;
}
.gr-menu > summary::-webkit-details-marker { display: none; }
.gr-menu[open] > summary { background: #f0f0f3; }
.gr-menu-list {
  position: absolute;
  right: 0;
  top: 34px;
  z-index: 40;
  min-width: 168px;
  background: #fff;
  border: 1px solid #d5d5da;
  border-radius: 10px;
  box-shadow: 0 8px 22px rgba(0,0,0,.14);
  padding: 6px;
}
.gr-menu-list a,
.gr-menu-list button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: #333 !important;
  font: 14px/1.2 "Trebuchet MS", Geneva, Arial, sans-serif;
  cursor: pointer;
  text-decoration: none !important;
}
.gr-menu-list a:hover,
.gr-menu-list button:hover { background: #f2f2f5; }
.gr-menu-list .is-danger { color: #b3243a !important; }

/* ---------------- comments ---------------- */
.gr-comments { margin-top: 12px; border-top: 1px solid #eee; padding-top: 10px; }
.gr-comment { display: flex; gap: 8px; margin-bottom: 10px; }
.gr-comment-main { flex: 1 1 auto; min-width: 0; }
.gr-comment-bubble {
  background: #f4f4f6;
  border-radius: 12px;
  padding: 8px 11px;
  overflow-wrap: break-word;
}
.gr-comment-name { font-weight: 700; font-size: 13px; color: #111; }
.gr-comment-date { color: #8a8a8f; font-size: 11px; margin-left: 6px; }
.gr-comment-body { font-size: 14px; margin-top: 2px; }
.gr-comment-actions { display: flex; gap: 10px; margin: 3px 0 0 4px; font-size: 12px; color: #777; }
.gr-comment-children { margin: 8px 0 0 18px; padding-left: 10px; border-left: 2px solid #eee; }
.gr-comment-form { display: flex; gap: 8px; margin-top: 6px; }
.gr-comment-form .gr-textarea { min-height: 44px; }
.gr-locked { color: #8c1c30; font-size: 13px; font-weight: 700; }

/* ---------------- pager ---------------- */
.gr-pager { display: flex; justify-content: center; gap: 10px; margin: 16px 0 4px; }

/* ---------------- members / rules ---------------- */
.gr-member {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid #eee;
}
.gr-member:last-child { border-bottom: 0; }
.gr-member-main { flex: 1 1 auto; min-width: 0; }
.gr-member-name { font-weight: 700; font-size: 14px; overflow-wrap: break-word; }
.gr-member-sub { color: #888; font-size: 12px; }
.gr-rules { margin: 0; padding-left: 20px; }
.gr-rules li { margin-bottom: 8px; }
.gr-section { background: #fff; border: 1px solid #ddd; border-radius: 12px; padding: 14px; margin-bottom: 12px; }
.gr-section h2 { margin: 0 0 10px; font-size: 17px; color: #111; }
.gr-kv { display: flex; gap: 8px; font-size: 14px; margin-bottom: 6px; }
.gr-kv b { flex: 0 0 110px; color: #555; }

/* ---------------- admin ---------------- */
.gr-admin-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.gr-stat {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 10px;
  text-align: center;
}
.gr-stat b { display: block; font-size: 22px; color: #111; }
.gr-stat span { font-size: 11px; color: #777; text-transform: uppercase; letter-spacing: .03em; }
.gr-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.gr-table th, .gr-table td { text-align: left; padding: 7px 6px; border-bottom: 1px solid #eee; vertical-align: top; }
.gr-table th { color: #666; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
.gr-inline { display: inline; }

/* ---------------- responsive ----------------
   Below 1024px header76's fixed table shell is flattened, exactly as
   journal.asp does it, and the side nav is replaced by the mobile strip
   from mobilemenu.asp. Without this the 617px design sits inside a
   160px-wide body (header82/86a pin body width) and everything cramps. */
@media (max-width: 1024px) {
  table[width="994"], table[width="778"], table[width="619"],
  table[width="994"] > tbody, table[width="778"] > tbody, table[width="619"] > tbody,
  table[width="994"] > tbody > tr, table[width="778"] > tbody > tr, table[width="619"] > tbody > tr,
  table[width="994"] > tbody > tr > td, table[width="778"] > tbody > tr > td, table[width="619"] > tbody > tr > td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
  table[width="994"], table[width="778"], table[width="619"] { overflow: hidden; }
  table[width="619"] > tbody > tr > td[background] { display: none !important; }
  table[width="778"] > tbody > tr > td[width="161"] { display: none !important; }
  table.rounded, table[width="781"] { width: 100% !important; max-width: 100% !important; }
  table.rounded td.thm_headerText[width="400"] { display: none; }

  html { width: 100% !important; max-width: 100% !important; overflow-x: hidden; }
  body { width: auto !important; max-width: 100% !important; height: auto !important; }

  table[width=""], table[width="994"] table, table[width="778"] table, table[width="619"] table {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* The content wrapper the pages are actually rendered inside:
     main > table[1325] > tr > td[width="1"][background] + td[width="160"].
     A 1px vertical rule and a 160px spacer column may not size the page,
     and the min-content of the 160 cell is what pinned .gr-wrap to 463px
     inside a 390px viewport. Same treatment as the 778/619 shells above. */
  table[width="1325"],
  table[width="1325"] > tbody,
  table[width="1325"] > tbody > tr,
  table[width="1325"] > tbody > tr > td {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
  }
  table[width="1325"] { width: 100% !important; table-layout: fixed; overflow: hidden; }
  table[width="1325"] > tbody > tr > td[background] { display: none !important; }
  table[width="1325"] td[width="160"] { width: auto !important; }

  /* Belt and braces: no future content wrapper can pin the page again.
     The groups markup contains no <table> of its own, so this cannot
     reach a .gr-* component. */
  main > table { width: 100% !important; max-width: 100% !important; table-layout: fixed; }
  main > table td, main > table th { width: auto !important; max-width: 100% !important; }

  .gr-wrap { max-width: 100%; font-size: 16px; padding-bottom: 96px; }
  .gr-grid { grid-template-columns: 1fr; }
  .gr-form-2 { grid-template-columns: 1fr; }
  .gr-admin-grid { grid-template-columns: 1fr 1fr; }
  .gr-title { font-size: 22px; }
  .gr-btn { min-height: 44px; padding: 11px 18px; font-size: 15px; }
  .gr-btn-sm { min-height: 38px; padding: 8px 14px; font-size: 14px; }
  .gr-textarea { min-height: 96px; font-size: 16px; }
  .gr-input, .gr-select { font-size: 16px; }
  .gr-hero { padding: 10px; }
  .gr-hero-desc { font-size: 15px; }
  .gr-post-body { font-size: 16px; }
  .gr-comment-body { font-size: 15px; }
  .gr-menu-list { position: static; box-shadow: none; border: 0; padding: 0; margin-top: 6px; }
  .gr-menu-list a, .gr-menu-list button { min-height: 42px; }
  .gr-table { font-size: 14px; }

  /* Flex children default to min-width:auto, which is how a long word or a
     button row pushes a card wider than the phone. */
  .gr-hero-main, .gr-head-main, .gr-card-titles, .gr-card-body,
  .gr-post-who, .gr-comment-main, .gr-member-main, .gr-composer-fields,
  .gr-field, .gr-attach-media { min-width: 0; }
  .gr-input, .gr-select, .gr-textarea { width: 100%; max-width: 100%; }
}

@media (max-width: 380px) {
  .gr-admin-grid { grid-template-columns: 1fr; }
  .gr-avatar { width: 34px; height: 34px; font-size: 15px; }
}

/* ---------------- small utilities used by the pages ---------------- */
.gr-card-titles { min-width: 0; flex: 1 1 auto; }
.gr-card-chips { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 4px; }
.gr-push { margin-left: auto; }
.gr-ml6 { margin-left: 6px; }
.gr-select-auto { width: auto; }
.gr-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gr-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* link-styled submit button (used for inline Delete) */
.gr-linkbtn {
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  color: #8e2d5a;
  font: 600 12px/1.2 "Trebuchet MS", Geneva, Arial, sans-serif;
  cursor: pointer;
  text-decoration: none;
}
.gr-linkbtn:hover { text-decoration: underline; }

/* =====================================================================
   Desktop width
   ---------------------------------------------------------------------
   header76.asp opens a 619px content column, so a 617px feed only ever
   filled a third of a 1920px screen. The layout target is <main>, which is
   ~1324px. The table holding the nav is left alone; the inner wrapper is
   given an explicit width and overflows its 619px cell to the right, the
   same approach journal.asp uses.
   ===================================================================== */
@media (min-width: 1025px) {
  /* Do NOT resize the table that holds the nav: header.asp keeps the nav in a
     static 161px column of table[width="778"]. Forcing that table to
     width:auto collapses the nav to 80px and slides the content under it.
     Only the inner wrapper is widened; it overflows its 619px cell to the
     right, which is exactly what journal.asp does. */

  /* the content cell is shrink-to-fit, so an explicit width is required -
     max-width alone resolves against a content-sized parent and does nothing */
  .gr-wrap { width: 1320px; max-width: calc(100vw - 200px); padding: 0 12px; font-size: 15px; }

  /* discovery: three cards across */
  .gr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

  /* discussion / detail: feed plus a 320px reference column */
  .gr-cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
  .gr-col-side { position: sticky; top: 44px; }
  .gr-col-side .gr-section { margin-bottom: 12px; }
  .gr-col-side .gr-post-body { font-size: 14px; }

  /* admin: two columns of panels */
  .gr-admin-cols { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
  .gr-admin-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gr-admin-cols .gr-textarea, .gr-admin-cols .gr-input { max-width: 100%; }
}

@media (min-width: 1025px) {
  .gr-cols-single { grid-template-columns: minmax(0, 1fr); }
  .gr-col-main { min-width: 0; }
  .gr-col-main .gr-post-body { max-width: 900px; }
}

/* ---------------- reactions ---------------- */
.gr-react { position: relative; display: inline-block; }
.gr-react > summary {
  list-style: none;
  cursor: pointer;
  padding: 4px 10px;
  border: 1px solid #ddd;
  border-radius: 14px;
  font-size: 13px;
  color: #555;
  background: #fff;
  white-space: nowrap;
}
.gr-react > summary::-webkit-details-marker { display: none; }
.gr-react[open] > summary { background: #f0f0f3; }
.gr-react.is-on > summary {
  border-color: #b3243a;
  color: #b3243a;
  font-weight: 700;
}
.gr-react-list {
  position: absolute;
  left: 0;
  top: 32px;
  z-index: 41;
  background: #fff;
  border: 1px solid #d5d5da;
  border-radius: 10px;
  box-shadow: 0 8px 22px rgba(0,0,0,.14);
  padding: 6px;
}
.gr-react-form { display: flex; gap: 2px; }
.gr-react-pick {
  border: 0;
  background: none;
  border-radius: 7px;
  padding: 6px 9px;
  font: 12px/1.2 "Trebuchet MS", Geneva, Arial, sans-serif;
  color: #444;
  cursor: pointer;
  white-space: nowrap;
}
.gr-react-pick:hover { background: #f2f2f5; }
.gr-react-pick.is-on { background: #fbe9ec; color: #b3243a; font-weight: 700; }
.gr-react-stat { font-size: 13px; color: #777; }
.gr-comment-actions .gr-react > summary { padding: 1px 8px; font-size: 12px; }
.gr-comment-actions .gr-react-list { top: 26px; }

@media (max-width: 700px) {
  /* no floating panel on a phone: open it in the flow instead of over
     the next post, and give the picks a touch-sized target */
  .gr-react-list {
    position: static;
    left: auto;
    top: auto;
    box-shadow: none;
    border: 0;
    padding: 4px 0 0;
  }
  .gr-react-form { flex-wrap: wrap; }
  .gr-react-pick { min-height: 40px; padding: 8px 12px; font-size: 13px; }
}

/* ---------------- polls ---------------- */
.gr-newpoll { margin-top: 8px; }
.gr-newpoll > summary {
  list-style: none;
  cursor: pointer;
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid #ddd;
  border-radius: 14px;
  font-size: 13px;
  color: #555;
  background: #fff;
}
.gr-newpoll > summary::-webkit-details-marker { display: none; }
.gr-newpoll[open] > summary { background: #f0f0f3; }
.gr-newpoll-body { padding: 10px 0 0; }
.gr-newpoll-opts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.gr-newpoll-opts .gr-input { max-width: 100%; }

.gr-poll {
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid #e2e2e6;
  border-radius: 12px;
  background: #fafafb;
}
.gr-poll-q { font-weight: 700; font-size: 15px; color: #111; }
.gr-poll-meta { font-size: 12px; color: #7a7a80; margin: 2px 0 10px; }
.gr-poll-form { display: block; }
.gr-poll-opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  margin: 0 0 6px;
  padding: 9px 12px;
  border: 1px solid #dcdce1;
  border-radius: 9px;
  background: #fff;
  color: #222;
  font: 14px/1.3 "Trebuchet MS", Geneva, Arial, sans-serif;
  cursor: pointer;
  overflow: hidden;
}
button.gr-poll-opt:hover { border-color: #b3243a; }
.gr-poll-opt.is-mine { border-color: #b3243a; }
.gr-poll-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: #f2dfe3;
  z-index: 0;
}
.gr-poll-opt.is-mine .gr-poll-bar { background: #f6cfd6; }
.gr-poll-lab {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
}
.gr-poll-you {
  margin-left: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #b3243a;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.gr-poll-n {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  font-weight: 700;
  font-size: 13px;
  color: #555;
}
.gr-poll-form.is-static .gr-poll-opt { cursor: default; }
.gr-poll-hint { margin: 8px 0 0; font-size: 12px; color: #7a7a80; }

@media (max-width: 700px) {
  .gr-newpoll-opts { grid-template-columns: minmax(0, 1fr); }
  .gr-poll-opt { min-height: 44px; }
}

/* ---------------- attachments ---------------- */
.gr-attach {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.gr-attach-img { display: block; }
.gr-attach-img img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 320px;
  object-fit: cover;
  border: 1px solid #e2e2e6;
  border-radius: 10px;
  background: #f4f4f6;
}
.gr-attach-file {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  border: 1px solid #dcdce1;
  border-radius: 9px;
  background: #fafafb;
  color: #333 !important;
  text-decoration: none !important;
  font-size: 13px;
}
.gr-attach-file:hover { border-color: #b3243a; }
.gr-attach-kind {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #b3243a;
}
.gr-attach-name { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
.gr-attach-size { flex: 0 0 auto; color: #777; font-size: 12px; white-space: nowrap; }

/* Inline video and audio. Both span the full row: a 150px player is
   useless and a native <audio> control needs its own width. */
.gr-attach-media {
  grid-column: 1 / -1;
  min-width: 0;
}
.gr-attach-video {
  display: block;
  width: 100%;
  max-height: 420px;
  background: #000;
  border: 1px solid #e2e2e6;
  border-radius: 10px;
}
.gr-attach-audio {
  display: block;
  width: 100%;
  margin: 0 0 2px;
}
.gr-attach-cap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 12px;
}
.gr-attach-open {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
  color: #333 !important;
  text-decoration: none !important;
}
.gr-attach-open:hover { color: #b3243a !important; text-decoration: underline !important; }

.gr-upload { margin-top: 10px; }
.gr-upload > summary {
  list-style: none;
  cursor: pointer;
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid #ddd;
  border-radius: 14px;
  font-size: 13px;
  color: #555;
  background: #fff;
}
.gr-upload > summary::-webkit-details-marker { display: none; }
.gr-upload[open] > summary { background: #f0f0f3; }
.gr-upload-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.gr-file {
  font: 13px "Trebuchet MS", Geneva, Arial, sans-serif;
  max-width: 100%;
  padding: 4px 0;
}

@media (max-width: 700px) {
  .gr-attach { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .gr-attach-img img { max-height: 240px; }
  .gr-attach-video { max-height: 260px; }
  .gr-upload-form { display: block; }
  .gr-upload-form .gr-file { display: block; margin-bottom: 8px; }
}





/* ---------------- notifications ---------------- */
.gr-badge {
  display: inline-block;
  min-width: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #b3243a;
  color: #fff !important;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
}
.gr-notify-all { margin: 10px 0 0; }
.gr-notify { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.gr-notify-row { margin: 0; }
.gr-notify-row button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid #e2e2e6;
  border-radius: 10px;
  background: #fff;
  color: #333;
  font: 14px/1.35 "Trebuchet MS", Geneva, Arial, sans-serif;
  cursor: pointer;
}
.gr-notify-row button:hover { border-color: #b3243a; }
.gr-notify-row.is-unread button { border-color: #d9a3af; background: #fdf7f8; }
.gr-notify-row.is-unread .gr-notify-text { font-weight: 700; }
.gr-notify-main { display: flex; flex-direction: column; min-width: 0; }
.gr-notify-text { color: #111; overflow-wrap: break-word; }
.gr-notify-sub { font-size: 12px; color: #7a7a80; }

/* ---------------- in-group search ---------------- */
.gr-search { margin: 0 0 12px; }
.gr-search-row { display: flex; gap: 8px; align-items: center; }
.gr-search-row .gr-input { flex: 1 1 auto; min-width: 0; }
.gr-results { display: flex; flex-direction: column; gap: 8px; }
.gr-result {
  display: block;
  padding: 10px 12px;
  border: 1px solid #e2e2e6;
  border-radius: 10px;
  background: #fff;
  color: #333 !important;
  text-decoration: none !important;
}
.gr-result:hover { border-color: #b3243a; }
.gr-result-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.gr-result-kind {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #b3243a;
}
.gr-result-title { font-weight: 700; color: #111; }
.gr-result-meta { margin-left: auto; font-size: 12px; color: #7a7a80; }
.gr-result-snippet {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.45;
  color: #444;
  overflow-wrap: break-word;
}
.gr-result-snippet mark { background: #fbe9a0; color: inherit; padding: 0 1px; }

@media (max-width: 700px) {
  .gr-search-row { flex-wrap: wrap; }
  .gr-search-row .gr-btn { min-height: 40px; }
  .gr-result-meta { margin-left: 0; }
}

/* --- member badges (07_badges) ------------------------------------- */
.gr-badge-chip { background: #e8eef8; color: #2c4a75; }
.gr-badge-star { background: #fff3cc; color: #7a5b00; }
.gr-badge-prolific { background: #f3e6f8; color: #5c2f73; }
.gr-badge-writer { background: #e6f4f8; color: #1f5566; }
.gr-badge-liked { background: #fde9ef; color: #8f2440; }
.gr-badge-veteran { background: #eef0e4; color: #4f5726; }
.gr-badge-host { background: #e9f6ec; color: #245c31; }
.gr-badge-first { background: #eef1f4; color: #4a5a66; }

@media (max-width: 640px) {
  .gr-badge-chip { font-size: 10px; padding: 2px 6px; }
}