/* ============================================================
   Legacy Theme: app layout
   Loads after every other stylesheet, so it only has to override.
   Everything is scoped to body.legacy-app, so removing that class
   (or switching the tab bar and app look off) restores the plain layout.
   ============================================================ */

:root {
  --lg-navy: var(--urs-navy, #0a1f44);
  --lg-navy2: #12306b;
  --lg-gold: var(--urs-accent, #c9960c);
  --lg-gold2: #e6b52e;
  --lg-bg: #f2f4f9;
  --lg-card: #ffffff;
  --lg-ink: #131d35;
  --lg-muted: #667087;
  --lg-line: #e4e8f1;
  --lg-r: 20px;
  --lg-bar: 64px;
  --lg-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --lg-safe-b: env(safe-area-inset-bottom, 0px);
  --lg-safe-t: env(safe-area-inset-top, 0px);
  --lg-stack: 0px; /* height of another bottom menu (Duila) the tab bar sits above; set by legacy-app.js */
}
html[data-urs-theme='dark'] {
  --lg-bg: #07142f;
  --lg-card: #0f2a5c;
  --lg-ink: #eef1f8;
  --lg-muted: #aab6d3;
  --lg-line: #1c3a74;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body.legacy-app {
  background: var(--lg-bg);
  color: var(--lg-ink);
  font-family: var(--lg-font);
  font-size: 15px;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--lg-bar) + var(--lg-safe-b) + var(--lg-stack) + 22px);
}
body.legacy-app.legacy-no-tabbar { padding-bottom: 0; }
body.legacy-app *, body.legacy-app *::before, body.legacy-app *::after { box-sizing: border-box; }
body.legacy-app .gridbit-site-container { overflow: visible; overflow-x: clip; }

/* ---------- Top bar ---------- */
body.legacy-app #gridbit-header {
  position: sticky;
  top: 0;
  z-index: 900;
}
body.admin-bar.legacy-app #gridbit-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar.legacy-app #gridbit-header { top: 46px; } }
@media (max-width: 600px) { body.admin-bar.legacy-app #gridbit-header { top: 0; } }

body.legacy-app .gridbit-header-inside {
  background: linear-gradient(135deg, var(--lg-navy) 0%, var(--lg-navy2) 100%);
  border-radius: 0 0 24px 24px;
  box-shadow: 0 10px 30px rgba(10, 31, 68, .28);
  padding-top: var(--lg-safe-t);
}
body.legacy-app .gridbit-header-inside-content { padding: 10px 16px !important; }
body.legacy-app .gridbit-header-inside-container {
  align-items: center;
  flex-wrap: nowrap;
  gap: 12px;
}
body.legacy-app .gridbit-logo {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  flex: 1 1 auto !important;
  margin: 0 !important;
  text-align: left !important;
  order: 0 !important;
}
body.legacy-app .site-branding { display: flex; align-items: center; gap: 10px; }
body.legacy-app .gridbit-custom-logo-image { flex: 0 0 auto; }
body.legacy-app .gridbit-logo-img { max-height: 38px; width: auto; margin: 0 !important; border-radius: 10px; }
body.legacy-app .gridbit-site-title { font: 800 20px/1.1 var(--lg-font) !important; letter-spacing: -.02em; margin: 0 !important; }
body.legacy-app .gridbit-site-title a { color: #fff; text-shadow: none; }
body.legacy-app .gridbit-site-description { font: 500 12px/1.2 var(--lg-font) !important; color: rgba(255, 255, 255, .72); margin-top: 3px !important; }
body.legacy-app .gridbit-custom-logo-active .gridbit-custom-logo-info { margin-top: 0 !important; }

body.legacy-app .gridbit-header-menu {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  flex: 0 1 auto !important;
  margin: 0 !important;
  order: 1 !important;
}
body.legacy-app .gridbit-primary-responsive-menu-icon { display: none !important; }
body.legacy-app .gridbit-primary-nav-menu { display: flex !important; flex-wrap: nowrap; gap: 2px; width: auto; }
body.legacy-app .gridbit-primary-nav-menu > li > a {
  font: 600 14px/1 var(--lg-font) !important;
  color: rgba(255, 255, 255, .88);
  text-shadow: none;
  padding: 11px 14px;
  border-radius: 999px;
  background: none !important;
  text-decoration: none !important;
  transition: background .18s ease, color .18s ease;
}
body.legacy-app .gridbit-primary-nav-menu > li > a:hover,
body.legacy-app .gridbit-primary-nav-menu > li > a:focus-visible,
body.legacy-app .gridbit-primary-nav-menu .current-menu-item > a,
body.legacy-app .gridbit-primary-nav-menu .current_page_item > a {
  background: rgba(255, 255, 255, .14) !important;
  color: #fff;
}
body.legacy-app .gridbit-primary-nav-menu .sub-menu,
body.legacy-app .gridbit-primary-nav-menu .children {
  background: var(--lg-navy);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
}
body.legacy-app .gridbit-primary-nav-menu .sub-menu a,
body.legacy-app .gridbit-primary-nav-menu .children a { border: 0; border-top: 1px solid rgba(255, 255, 255, .08); }

.legacy-top-actions { display: flex; align-items: center; gap: 8px; order: 2; flex: 0 0 auto; }
.legacy-icon-btn {
  appearance: none;
  -webkit-appearance: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, .13);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  transition: background .18s ease, transform .12s ease;
}
.legacy-icon-btn:hover, .legacy-icon-btn:focus-visible { background: rgba(255, 255, 255, .24); color: #fff; }
.legacy-icon-btn:active { transform: scale(.94); }
.legacy-icon-btn svg { width: 21px; height: 21px; }
.legacy-back-btn { display: none; }
body.legacy-app.singular .legacy-back-btn, body.legacy-app.single .legacy-back-btn, body.legacy-app.page .legacy-back-btn { display: inline-flex; }

@media (max-width: 900px) {
  body.legacy-app .gridbit-header-menu { display: none !important; }
  body.legacy-app .gridbit-site-description { display: none; }
}

/* ---------- Page frame ---------- */
body.legacy-app .gridbit-outer-wrapper { max-width: 1180px; }
body.legacy-app #gridbit-wrapper-outside { padding-top: 18px; }
body.legacy-app .gridbit-posts-wrapper .gridbit-posts-header-inside { padding: 4px 4px 10px; }
body.legacy-app .gridbit-posts-wrapper .gridbit-posts-heading {
  font: 800 24px/1.15 var(--lg-font);
  letter-spacing: -.02em;
  color: var(--lg-ink);
  text-shadow: none;
}

/* ---------- Feed cards ---------- */
body.legacy-app .gridbit-posts-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 18px;
  overflow: visible;
}
body.legacy-app .gridbit-posts-grid::before, body.legacy-app .gridbit-posts-grid::after { display: none; }
body.legacy-app .gridbit-grid-post.gridbit-3-col {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  clear: none !important;
}
body.legacy-app .gridbit-grid-post {
  background: var(--lg-card);
  border-radius: var(--lg-r);
  border: 1px solid var(--lg-line);
  box-shadow: 0 8px 24px rgba(19, 29, 53, .07);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
body.legacy-app .gridbit-grid-post:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(19, 29, 53, .13); }
body.legacy-app .gridbit-grid-post:active { transform: scale(.992); }
body.legacy-app .gridbit-grid-post-inside { height: 100%; display: flex; flex-direction: column; }
body.legacy-app .gridbit-grid-post-inside > .gridbit-grid-post-thumbnail.gridbit-grid-post-block:last-child { margin: 0; }
body.legacy-app .gridbit-grid-post-thumbnail { aspect-ratio: 16 / 10; background: var(--lg-line); }
body.legacy-app .gridbit-grid-post-thumbnail-link, body.legacy-app .gridbit-grid-post-thumbnail-link:hover { opacity: 1; height: 100%; }
body.legacy-app .gridbit-grid-post-thumbnail-img { width: 100%; height: 100%; object-fit: cover; }
body.legacy-app .gridbit-grid-post:hover .gridbit-grid-post-thumbnail-img { transform: scale(1.04); }

body.legacy-app .gridbit-grid-thumbnail-meta {
  left: 10px; right: 10px; bottom: 10px; width: auto;
  border-radius: 14px;
  background: rgba(10, 31, 68, .62) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font: 600 12px/1.2 var(--lg-font);
  padding: 8px 10px;
}
body.legacy-app .gridbit-grid-thumbnail-meta a, body.legacy-app .gridbit-grid-thumbnail-meta .gridbit-grid-post-meta { color: #fff !important; }
body.legacy-app .gridbit-grid-thumbnail-meta img { border-radius: 50%; }

body.legacy-app .gridbit-grid-post-details-meta { font: 600 11.5px/1.3 var(--lg-font); color: var(--lg-muted) !important; padding: 0 16px; }
body.legacy-app .gridbit-grid-post-details-meta-inside { padding: 14px 0 0; }
body.legacy-app .gridbit-grid-post-details-meta a { color: var(--lg-muted) !important; background: var(--lg-bg); padding: 4px 9px; border-radius: 999px; margin: 0 4px 4px 0; }
body.legacy-app .gridbit-grid-post .gridbit-grid-post-header-inside { padding: 10px 16px 4px; }
body.legacy-app .gridbit-grid-post .gridbit-grid-post-title {
  font: 800 17px/1.28 var(--lg-font);
  letter-spacing: -.01em;
  text-shadow: none;
  color: var(--lg-ink) !important;
}
body.legacy-app .gridbit-grid-post .gridbit-grid-post-title a { color: var(--lg-ink) !important; }
body.legacy-app .gridbit-grid-post .gridbit-grid-post-title a:hover { color: var(--lg-gold) !important; text-decoration: none; }
body.legacy-app .gridbit-grid-post-snippet { padding: 0 16px 18px; font: 400 14px/1.55 var(--lg-font); color: var(--lg-muted); }
body.legacy-app .gridbit-grid-post-snippet a { color: var(--lg-gold) !important; }

/* ---------- Single posts and pages ---------- */
body.legacy-app article.hentry,
body.legacy-app .gridbit-box {
  background: var(--lg-card);
  border-radius: var(--lg-r);
  border: 1px solid var(--lg-line);
  box-shadow: 0 8px 24px rgba(19, 29, 53, .07);
}
body.legacy-app .entry-content, body.legacy-app .entry-content p { font-family: var(--lg-font); color: var(--lg-ink); line-height: 1.7; }
body.legacy-app .entry-title, body.legacy-app .post-title { font-family: var(--lg-font); font-weight: 800; letter-spacing: -.02em; color: var(--lg-ink); }
body.legacy-app .entry-content a { color: var(--lg-gold); }
body.legacy-app .entry-content img { border-radius: 14px; }

/* ---------- Buttons and forms ---------- */
body.legacy-app .gridbit-load-more-btn,
body.legacy-app button[type=submit], body.legacy-app input[type=submit], body.legacy-app .button {
  border-radius: 999px;
  font-family: var(--lg-font);
  font-weight: 700;
}
body.legacy-app input[type=text], body.legacy-app input[type=email], body.legacy-app input[type=search],
body.legacy-app input[type=url], body.legacy-app input[type=password], body.legacy-app textarea, body.legacy-app select {
  border-radius: 14px;
  font-family: var(--lg-font);
}

/* ---------- Hide old chrome ---------- */
body.legacy-app .gridbit-scroll-top { bottom: calc(var(--lg-bar) + var(--lg-safe-b) + var(--lg-stack) + 34px); right: 14px; border-radius: 50%; }

/* ---------- Tab bar ---------- */
.legacy-tabbar {
  position: fixed;
  left: 0; right: 0; bottom: var(--lg-stack);
  z-index: 950;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  height: calc(var(--lg-bar) + var(--lg-safe-b));
  padding: 6px 6px var(--lg-safe-b);
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border-top: 1px solid var(--lg-line);
  box-shadow: 0 -10px 30px rgba(19, 29, 53, .08);
  border-radius: 22px 22px 0 0;
}
html[data-urs-theme='dark'] .legacy-tabbar { background: rgba(10, 31, 68, .92); }
.legacy-tab {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: none;
  color: var(--lg-muted);
  font: 600 11px/1 var(--lg-font);
  text-decoration: none;
  cursor: pointer;
  border-radius: 16px;
  padding: 4px 2px;
  transition: color .15s ease;
}
.legacy-tab svg { width: 24px; height: 24px; transition: transform .15s ease; }
.legacy-tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legacy-tab:hover { color: var(--lg-ink); }
.legacy-tab:active svg { transform: scale(.88); }
.legacy-tab.is-active { color: var(--lg-navy); }
html[data-urs-theme='dark'] .legacy-tab.is-active { color: var(--lg-gold2); }
.legacy-tab.is-active svg { color: var(--lg-gold); }
.legacy-tab.is-active::after {
  content: "";
  width: 18px; height: 3px;
  border-radius: 3px;
  background: var(--lg-gold);
  margin-top: 1px;
}

@media (min-width: 901px) {
  .legacy-tabbar {
    left: 50%; right: auto; bottom: calc(18px + var(--lg-stack));
    transform: translateX(-50%);
    width: min(460px, calc(100% - 40px));
    height: var(--lg-bar);
    padding: 6px;
    border: 1px solid var(--lg-line);
    border-radius: 999px;
    box-shadow: 0 18px 44px rgba(19, 29, 53, .22);
  }
  body.legacy-app { padding-bottom: calc(var(--lg-bar) + var(--lg-stack) + 52px); }
  body.legacy-app .gridbit-scroll-top { bottom: 28px; right: 24px; }
}

/* ---------- Sheets (search and menu) ---------- */
.legacy-sheet-backdrop {
  position: fixed; inset: 0;
  background: rgba(7, 20, 47, .55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden;
  transition: opacity .22s ease, visibility .22s ease;
  z-index: 980;
}
.legacy-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 990;
  max-height: 86vh;
  overflow-y: auto;
  background: var(--lg-card);
  color: var(--lg-ink);
  border-radius: 26px 26px 0 0;
  padding: 10px 20px calc(24px + var(--lg-safe-b));
  transform: translateY(105%);
  visibility: hidden;
  transition: transform .28s cubic-bezier(.2, .8, .2, 1), visibility .28s;
  box-shadow: 0 -20px 60px rgba(0, 0, 0, .3);
  font-family: var(--lg-font);
}
.legacy-sheet::before { content: ""; display: block; width: 44px; height: 5px; border-radius: 5px; background: var(--lg-line); margin: 0 auto 16px; }
body.legacy-sheet-open .legacy-sheet-backdrop { opacity: 1; visibility: visible; }
body.legacy-sheet-open[data-sheet="search"] #legacy-search-sheet,
body.legacy-sheet-open[data-sheet="menu"] #legacy-menu-sheet { transform: translateY(0); visibility: visible; }
body.legacy-sheet-open { overflow: hidden; }
@media (min-width: 901px) {
  .legacy-sheet { left: 50%; right: auto; width: min(560px, calc(100% - 40px)); margin-left: calc(min(560px, calc(100% - 40px)) / -2); bottom: 96px; border-radius: 26px; max-height: 70vh; }
}
.legacy-sheet h2 { font: 800 20px/1.2 var(--lg-font); margin: 0 0 14px; color: var(--lg-ink); }
.legacy-search-form { display: flex; gap: 10px; }
.legacy-search-form input[type=search] {
  flex: 1; min-width: 0;
  height: 50px;
  padding: 0 18px;
  border: 1px solid var(--lg-line);
  background: var(--lg-bg);
  color: var(--lg-ink);
  border-radius: 999px;
  font-size: 16px;
}
.legacy-search-form button {
  height: 50px; padding: 0 22px;
  border: 0; border-radius: 999px;
  background: var(--lg-gold); color: #1b1300;
  font: 800 15px/1 var(--lg-font);
  cursor: pointer;
}
.legacy-menu-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.legacy-menu-list a {
  display: block;
  padding: 15px 18px;
  background: var(--lg-bg);
  border-radius: 16px;
  color: var(--lg-ink);
  font: 700 16px/1.2 var(--lg-font);
  text-decoration: none;
}
.legacy-menu-list a:hover, .legacy-menu-list a:focus-visible { background: var(--lg-line); }
.legacy-menu-list .sub-menu { list-style: none; margin: 6px 0 0 12px; padding: 0; display: grid; gap: 6px; }
.legacy-menu-list .sub-menu a { font-weight: 600; font-size: 15px; padding: 12px 16px; }

/* Softer motion for people who ask for it */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body.legacy-app *, .legacy-sheet, .legacy-sheet-backdrop { transition: none !important; animation: none !important; }
}

/* Photo caption chip: author and date sit side by side and wrap only when they must */
body.legacy-app .gridbit-grid-thumbnail-meta-inside { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
body.legacy-app .gridbit-grid-thumbnail-meta-inside::after { display: none; }


/* ---------- Nothing may sit on top of the tab bar ---------- */
/* The Control Center link now lives at the top of the Menu sheet for administrators, so the old floating pill is hidden whenever the tab bar is on. */
body.legacy-app:not(.legacy-no-tabbar) .glhcc-float { display: none !important; }
.legacy-sheet .legacy-admin-link {
  display: flex; align-items: center; justify-content: center;
  margin: 0 0 12px; padding: 13px 16px;
  background: var(--lg-navy); color: #fff !important;
  border: 1px solid var(--lg-gold); border-radius: 999px;
  font: 700 14px/1 var(--lg-font); text-decoration: none;
}
.legacy-sheet .legacy-admin-link:hover { background: var(--lg-gold); color: var(--lg-navy) !important; }

/* ---------- Version 2.0.4: shorter post grid cards, height only ---------- */
body.legacy-app .gridbit-grid-post .gridbit-grid-post-thumbnail { aspect-ratio: 2.4 / 1 !important; }
body.legacy-app .gridbit-grid-thumbnail-meta { left: 8px; right: 8px; bottom: 8px; padding: 4px 8px !important; border-radius: 12px; }
body.legacy-app .gridbit-grid-thumbnail-meta .gridbit-grid-thumbnail-meta-inside { padding: 2px 4px !important; }
body.legacy-app .gridbit-grid-thumbnail-meta img, body.legacy-app .gridbit-grid-thumbnail-meta .avatar { width: 26px !important; height: 26px !important; max-width: 26px !important; border-width: 1px !important; }
body.legacy-app .gridbit-grid-post-details-meta-inside { padding: 8px 0 0; }
body.legacy-app .gridbit-grid-post .gridbit-grid-post-header-inside { padding: 6px 14px 2px; }
body.legacy-app .gridbit-grid-post .gridbit-grid-post-title { font-size: 16px; line-height: 1.25; }
body.legacy-app .gridbit-grid-post-snippet { padding: 0 14px 12px; font-size: 13.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Version 2.0.5: real GetLegacyHomes logo in the header ---------- */
body.legacy-app .legacy-brand { display: flex; align-items: center; }
body.legacy-app .legacy-brand-link, body.legacy-app .legacy-brand-link:hover { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; }
body.legacy-app .legacy-brand-logo { height: 38px; width: auto; max-width: none; display: block; border-radius: 0; margin: 0; }
body.legacy-app .legacy-brand-text { display: flex; flex-direction: column; gap: 3px; line-height: 1; }
body.legacy-app .legacy-brand-text strong { font: 800 18px/1 var(--lg-font); letter-spacing: -.02em; color: #fff; }
body.legacy-app .legacy-brand-text small { font: 700 8.5px/1 var(--lg-font); letter-spacing: .14em; text-transform: uppercase; color: #d7ae4f; }
@media (max-width: 360px) { body.legacy-app .legacy-brand-text small { display: none; } }

/* ---------- Version 2.0.6: full width single posts, no grids or card boxes ---------- */
body.legacy-app.single .gridbit-main-wrapper-inside,
body.legacy-app.single-post .gridbit-main-wrapper-inside,
body.legacy-app .gridbit-singular-page .gridbit-main-wrapper-inside { max-width: none !important; width: 100% !important; padding-left: 14px !important; padding-right: 14px !important; box-sizing: border-box; }
body.legacy-app.single .gridbit-main-wrapper,
body.legacy-app.single .gridbit-posts-wrapper,
body.legacy-app.single .gridbit-post-singular,
body.legacy-app.single .gridbit-box,
body.legacy-app.single .gridbit-box-inside { max-width: none !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
body.legacy-app.single .gridbit-post-singular .entry-content > *,
body.legacy-app.single .gridbit-post-singular .entry-header-inside,
body.legacy-app.single .gridbit-post-singular .gridbit-entry-footer,
body.legacy-app.single .gridbit-post-singular .gridbit-tags-links { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
body.legacy-app.single .gridbit-post-singular .entry-title { max-width: none !important; }
body.legacy-app.single .gridbit-post-singular .gridbit-thumbnail-alignwide,
body.legacy-app.single .gridbit-post-singular .gridbit-thumbnail-alignfull { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
/* every grid on a single post becomes a plain stacked block */
body.legacy-app.single .gridbit-posts-wrapper *, body.legacy-app.single #comments * { grid-template-columns: none !important; }
body.legacy-app.single #comments, body.legacy-app.single #comments ol, body.legacy-app.single #comments ul { display: block; }
/* author box, comments and the reply form lose their card look and run the full width */
body.legacy-app.single #comments, body.legacy-app.single .comments-area, body.legacy-app.single .comment-respond,
body.legacy-app.single .comment-body, body.legacy-app.single .comment-list > li,
body.legacy-app.single [class*="author-box"], body.legacy-app.single [class*="authorbox"] { max-width: none !important; width: 100% !important; background: none !important; box-shadow: none !important; border-radius: 0 !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box; }
body.legacy-app.single .comment-respond input[type="text"], body.legacy-app.single .comment-respond input[type="email"], body.legacy-app.single .comment-respond input[type="url"], body.legacy-app.single .comment-respond textarea { width: 100% !important; box-sizing: border-box; }

/* ---------- Version 2.0.7: category text never shown ---------- */
body.legacy-app .gridbit-entry-meta-single-cats, body.legacy-app .gridbit-summary-post-cat-links, body.legacy-app .gridbit-grid-post-cat-links, body.legacy-app .gridbit-tags-links.gridbit-cat-links { display: none !important; }

/* ---------- Version 2.0.8: author card keeps its dark card look at full width ---------- */
body.legacy-app.single .gridbit-author-card { width: 100% !important; max-width: none !important; box-sizing: border-box; margin-left: 0 !important; margin-right: 0 !important; background: var(--gridbit-navy, #10244a) !important; border-radius: 22px !important; overflow: hidden; }
body.legacy-app.single .gridbit-author-card .gridbit-author-bio-top { display: flex !important; align-items: center; gap: 14px; }
body.legacy-app.single .gridbit-author-card .gridbit-author-bio-gravatar { display: inline-flex !important; width: auto !important; flex: 0 0 auto; background: linear-gradient(135deg, var(--gridbit-gold, #d4af37), #f4dd8a) !important; border-radius: 50% !important; padding: 3px; }
body.legacy-app.single .gridbit-author-card .gridbit-author-bio-gravatar img { width: 64px; height: 64px; border-radius: 50% !important; }
body.legacy-app.single .gridbit-author-card .gridbit-author-bio-name, body.legacy-app.single .gridbit-author-card .gridbit-author-bio-name a { color: #fff !important; }
body.legacy-app.single .gridbit-author-card .gridbit-author-bio-count { color: #b9c4d8 !important; }
body.legacy-app.single .gridbit-author-card .gridbit-author-bio-cta { display: inline-flex !important; width: auto !important; }

/* ---------- Version 2.0.9: no Edit profile line and no Engage label inside the comment box ---------- */
body.legacy-app .comment-respond .logged-in-as, body.legacy-app .comment-form .logged-in-as, body.legacy-app .gridbit-comments-enhanced .logged-in-as { display: none !important; }
body.legacy-app .comment-form-comment > label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

/* ---------- Version 2.0.10: blue card titles, faint black descriptions ---------- */
body.legacy-app .gridbit-grid-post .gridbit-grid-post-title a, body.legacy-app .gridbit-grid-post .gridbit-grid-post-title a:visited { color: #1a56db !important; }
body.legacy-app .gridbit-grid-post .gridbit-grid-post-title a:hover { color: #1e40af !important; }
body.legacy-app .gridbit-grid-post-snippet, body.legacy-app .gridbit-grid-post-snippet p, body.legacy-app .gridbit-grid-post-snippet a, body.legacy-app .gridbit-grid-post-snippet a:visited, body.legacy-app .gridbit-grid-post-snippet a:hover, body.legacy-app .gridbit-grid-post-snippet a:focus, body.legacy-app .gridbit-uc-links .gridbit-grid-post-snippet a { color: #4b5563 !important; text-decoration: none !important; }

/* ---------- Version 2.0.11: the member avatar replaces the search icon in the top bar ---------- */
body.legacy-app .legacy-avatar-btn { padding: 0; overflow: hidden; border-radius: 50%; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid #d4af37; background: rgba(255,255,255,.12); }
body.legacy-app .legacy-avatar-btn img, body.legacy-app .legacy-avatar-btn .legacy-avatar-img { width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 50%; display: block; }
body.legacy-app .legacy-avatar-guest svg { width: 22px; height: 22px; }

/* ---------- Version 2.0.13: single posts and business profiles run truly edge to edge ---------- */
body.legacy-app.single .gridbit-outer-wrapper,
body.legacy-app.single #gridbit-wrapper-outside,
body.legacy-app.single .gridbit-container#gridbit-wrapper { max-width: none !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box; }
body.legacy-app.single .gridbit-main-wrapper-inside { padding-left: 0 !important; padding-right: 0 !important; }
body.legacy-app.single .gridbit-post-singular .entry-content, body.legacy-app.single .gridbit-post-singular .entry-content > .glhbd-profile { padding-left: 0 !important; padding-right: 0 !important; }
body.legacy-app.single { overflow-x: clip; }

/* ---------- Version 2.0.17: the logo and tagline always show in full, on any phone width ---------- */
/* The tagline used to be hidden on screens 360px wide or narrower, so the brand looked cut off. It now stays, and wraps onto two lines if it must. */
body.legacy-app .legacy-brand,
body.legacy-app .legacy-brand-link { min-width: 0; max-width: 100%; overflow: visible; }
body.legacy-app .legacy-brand-logo { flex: 0 0 auto; height: 38px; width: auto; min-width: 54px; max-width: none; padding: 1px; object-fit: contain; overflow: visible; }
body.legacy-app .legacy-brand-text { min-width: 0; overflow: visible; }
body.legacy-app .legacy-brand-text strong { white-space: nowrap; }
body.legacy-app .legacy-brand-text small { display: block !important; font-size: 8px; letter-spacing: .08em; line-height: 1.15; white-space: normal; overflow: visible; }
body.legacy-app .gridbit-logo { min-width: 0; overflow: visible !important; }
body.legacy-app .gridbit-header-inside-container { min-width: 0; }
/* The top bar always spans the full screen, edge to edge, and the page never scrolls sideways. */
body.legacy-app #gridbit-header { width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; left: 0; right: 0; }
body.legacy-app .gridbit-header-inside, body.legacy-app .gridbit-header-inside-content { width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; }
html { overflow-x: clip; }
@media (max-width: 360px) {
  body.legacy-app .gridbit-header-inside-content { padding: 10px 12px !important; }
  body.legacy-app .gridbit-header-inside-container { gap: 8px; }
  body.legacy-app .legacy-brand-link { gap: 7px; }
  body.legacy-app .legacy-brand-text strong { font-size: 16px; }
}

/* ---------- Version 2.0.18: member picture sheet ---------- */
body.legacy-app button.legacy-avatar-btn { cursor: pointer; font: inherit; }
body.legacy-avatar-open { overflow: hidden; }
.legacy-avatar-overlay { position: fixed; inset: 0; background: rgba(8, 16, 36, .55); z-index: 100000; }
.legacy-avatar-overlay[hidden], .legacy-avatar-sheet[hidden] { display: none; }
.legacy-avatar-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100001; margin: 0 auto; max-width: 520px; max-height: 88vh; overflow-y: auto; background: #fff; color: #0a1f44; border-radius: 22px 22px 0 0; padding: 10px 20px calc(22px + env(safe-area-inset-bottom, 0px)); box-sizing: border-box; box-shadow: 0 -12px 40px rgba(8, 16, 36, .35); }
.legacy-avatar-grab { width: 44px; height: 4px; border-radius: 4px; background: #cfd6e6; margin: 0 auto 10px; }
.legacy-avatar-head { display: flex; align-items: center; justify-content: space-between; }
.legacy-avatar-head h2 { margin: 0; font-size: 19px; color: #0a1f44; }
.legacy-avatar-x { border: 0; background: none; font-size: 28px; line-height: 1; color: #55627f; cursor: pointer; padding: 4px 8px; }
.legacy-avatar-preview { width: 132px; height: 132px; margin: 14px auto; border-radius: 50%; overflow: hidden; border: 3px solid #d4af37; background: #eef2fb; }
.legacy-avatar-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.legacy-avatar-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.legacy-avatar-btn-main, .legacy-avatar-btn-save, .legacy-avatar-btn-ghost { border-radius: 999px; padding: 11px 20px; font-weight: 700; font-size: 14px; cursor: pointer; border: 1px solid #0a1f44; font-family: inherit; }
.legacy-avatar-btn-main { background: #0a1f44; color: #fff; }
.legacy-avatar-btn-save { background: #d4af37; border-color: #d4af37; color: #0a1f44; }
.legacy-avatar-btn-ghost { background: transparent; color: #0a1f44; }
.legacy-avatar-btn-save[hidden], .legacy-avatar-btn-ghost[hidden], .legacy-avatar-delete[hidden], .legacy-avatar-gallery-wrap[hidden] { display: none; }
.legacy-avatar-msg { min-height: 20px; margin: 10px 0 0; text-align: center; font-size: 13px; color: #55627f; }
.legacy-avatar-msg.is-bad { color: #b3261e; }
.legacy-avatar-gallery-wrap h3 { margin: 14px 0 8px; font-size: 14px; color: #0a1f44; }
.legacy-avatar-gallery { display: flex; gap: 10px; flex-wrap: wrap; }
.legacy-avatar-thumb { position: relative; width: 64px; height: 64px; }
.legacy-avatar-thumb > button:first-child { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; padding: 0; border: 2px solid #dbe3f3; background: #eef2fb; cursor: pointer; }
.legacy-avatar-thumb.is-current > button:first-child { border-color: #d4af37; }
.legacy-avatar-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.legacy-avatar-thumb-x { position: absolute; top: -5px; right: -5px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: #b3261e; color: #fff; font-size: 15px; line-height: 1; cursor: pointer; padding: 0; }
.legacy-avatar-hint { margin: 8px 0 0; font-size: 12px; color: #6b7690; }
.legacy-avatar-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 12px; border-top: 1px solid #e4e8ef; }
.legacy-avatar-delete { border: 0; background: none; color: #b3261e; font-weight: 700; font-size: 13px; cursor: pointer; padding: 6px 0; text-decoration: underline; text-underline-offset: 3px; font-family: inherit; }
.legacy-avatar-account { color: #2b62c2; font-weight: 700; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; margin-left: auto; }
html[data-urs-theme="dark"] .legacy-avatar-sheet { background: #0f1b36; color: #e8eaf0; }
html[data-urs-theme="dark"] .legacy-avatar-head h2, html[data-urs-theme="dark"] .legacy-avatar-gallery-wrap h3 { color: #fff; }
html[data-urs-theme="dark"] .legacy-avatar-btn-main { background: #d4af37; border-color: #d4af37; color: #0a1f44; }
html[data-urs-theme="dark"] .legacy-avatar-btn-ghost { color: #e8eaf0; border-color: #4a5a80; }
html[data-urs-theme="dark"] .legacy-avatar-foot { border-top-color: #22325a; }
html[data-urs-theme="dark"] .legacy-avatar-account { color: #8fb8ff; }
html[data-urs-theme="dark"] .legacy-avatar-msg, html[data-urs-theme="dark"] .legacy-avatar-hint { color: #9aa5c0; }

/* ---------- Version 2.0.19: the sticky top bar is full width on every page ----------
   Some plugin pages, such as the wallet dashboard, were squeezing the bar into a small
   centred box and hiding the logo. These rules set the bar's width and its logo area
   again, with the strongest selectors, so the bar is the same on every page. */
html body.legacy-app #gridbit-header {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  float: none !important;
  display: block !important;
  transform: none !important;
  z-index: 900 !important;
}
html body.legacy-app #gridbit-header .gridbit-header-inside,
html body.legacy-app #gridbit-header .gridbit-header-inside-content {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
html body.legacy-app #gridbit-header .gridbit-header-inside {
  background: linear-gradient(135deg, var(--lg-navy) 0%, var(--lg-navy2) 100%) !important;
  border-radius: 0 0 24px 24px !important;
}
html body.legacy-app #gridbit-header .gridbit-header-inside-container {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  max-width: 100% !important;
}
html body.legacy-app #gridbit-header .gridbit-logo {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
}
html body.legacy-app #gridbit-header .legacy-brand,
html body.legacy-app #gridbit-header .legacy-brand-link {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
}
html body.legacy-app #gridbit-header .legacy-brand-text { display: flex !important; }
html body.legacy-app #gridbit-header .legacy-top-actions { display: flex !important; }

/* Used by the width check in legacy-app.js when a page still squeezes the bar. */
html body.legacy-app #gridbit-header.legacy-header-forced {
  position: fixed !important;
  width: 100vw !important;
  max-width: 100vw !important;
}

/* ---------- Version 2.0.22: scrolling avatars on the same line as the logo and the account picture ----------
   Row order: logo (never shrinks), scrolling members (takes the space left), back button and my picture. */
html body.legacy-app #gridbit-header .gridbit-header-inside-container > .gas-scroll-bar {
  order: 1 !important;
  flex: 1 1 0 !important;
  min-width: 56px !important;
  width: auto !important;
  max-width: 100% !important;
  height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
  z-index: 1;
}
html body.legacy-app #gridbit-header .gas-scroll-bar .gas-track-outer {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
html body.legacy-app #gridbit-header .gas-scroll-bar .gas-track-outer::-webkit-scrollbar { display: none; }
html body.legacy-app #gridbit-header .gas-scroll-bar .gas-track { padding: 3px 4px; }
/* The logo keeps its place and its full size while the avatars scroll beside it. */
html body.legacy-app #gridbit-header.legacy-has-avatars .gridbit-logo {
  flex: 0 0 auto !important;
  order: 0 !important;
}
html body.legacy-app #gridbit-header.legacy-has-avatars .legacy-top-actions { order: 2 !important; }

/* Version 2.0.23: the member's own picture sits first, right after the logo. */
html body.legacy-app #gridbit-header.legacy-has-avatars .gridbit-header-inside-container > .legacy-avatar-btn {
  order: 1 !important;
  flex: 0 0 auto !important;
}
html body.legacy-app #gridbit-header.legacy-has-avatars .gridbit-header-inside-container > .gas-scroll-bar { order: 2 !important; }
html body.legacy-app #gridbit-header.legacy-has-avatars .legacy-top-actions { order: 3 !important; }

/* ---------- Version 2.0.24: golden plus on the member's own round picture only ---------- */
html body.legacy-app #gridbit-header .legacy-avatar-btn {
  position: relative;
  overflow: visible;
}
html body.legacy-app #gridbit-header .legacy-avatar-btn::after {
  content: "+";
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f3d36b 0%, #d4af37 55%, #b8901f 100%);
  color: #0a1f44;
  border: 2px solid #0a1f44;
  box-sizing: border-box;
  font: 800 14px/12px Arial, Helvetica, sans-serif;
  text-align: center;
  pointer-events: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}

/* ---------- Version 2.0.25: always room for at least two scrolling avatars ----------
   The strip never gets narrower than two avatars side by side. When the screen is narrow the
   brand words give way first (the logo mark itself stays), never the avatars and never the
   member's own round picture. */
html body.legacy-app #gridbit-header .gridbit-header-inside-container > .gas-scroll-bar {
  flex: 1 0 104px !important;
  min-width: 104px !important;
}
html body.legacy-app #gridbit-header .gas-scroll-bar .gas-track { gap: 10px !important; }
html body.legacy-app #gridbit-header.legacy-has-avatars .gridbit-logo {
  flex: 0 1 auto !important;
  min-width: 0 !important;
}
html body.legacy-app #gridbit-header.legacy-has-avatars .legacy-brand-text {
  min-width: 0;
  overflow: hidden;
}
html body.legacy-app #gridbit-header.legacy-has-avatars .legacy-brand-text strong {
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 480px) {
  html body.legacy-app #gridbit-header.legacy-has-avatars .gridbit-header-inside-container { gap: 6px !important; }
  html body.legacy-app #gridbit-header.legacy-has-avatars .gridbit-header-inside-content { padding-left: 12px !important; padding-right: 12px !important; }
  html body.legacy-app #gridbit-header.legacy-has-avatars .legacy-brand-text small { display: none !important; }
  html body.legacy-app #gridbit-header.legacy-has-avatars .legacy-brand-text strong { font-size: 14px; }
  html body.legacy-app #gridbit-header.legacy-has-avatars .legacy-top-actions { gap: 4px; }
}

/* ---------- Version 2.0.26: full logo, and no dark blocks beside the avatars ----------
   The dark blue blocks were the plugin's 32px edge covers, drawn at both ends of the strip. They
   are removed here. The logo mark, the brand name and the tagline always show in full, and the
   scrolling avatars are a little smaller on phones so two still fit beside them. */
html body.legacy-app #gridbit-header .gas-scroll-bar::before,
html body.legacy-app #gridbit-header .gas-scroll-bar::after,
html body.legacy-app #gridbit-header .gas-item::after {
  content: none !important;
  display: none !important;
}
html body.legacy-app #gridbit-header.legacy-has-avatars .gridbit-logo {
  flex: 0 0 auto !important;
  min-width: max-content !important;
  overflow: visible !important;
}
html body.legacy-app #gridbit-header.legacy-has-avatars .legacy-brand-text { overflow: visible !important; }
html body.legacy-app #gridbit-header.legacy-has-avatars .legacy-brand-text strong {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}
html body.legacy-app #gridbit-header.legacy-has-avatars .legacy-brand-text small { display: block !important; }
html body.legacy-app #gridbit-header .gridbit-header-inside-container > .gas-scroll-bar {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}
@media (max-width: 480px) {
  html body.legacy-app #gridbit-header.legacy-has-avatars .legacy-brand-text small { display: block !important; }
  html body.legacy-app #gridbit-header.legacy-has-avatars .legacy-brand-text strong { font-size: 15px; }
  html body.legacy-app #gridbit-header .gas-scroll-bar .gas-item,
  html body.legacy-app #gridbit-header .gas-scroll-bar .gas-item img {
    width: 30px !important;
    height: 30px !important;
  }
  html body.legacy-app #gridbit-header .gas-scroll-bar .gas-track { gap: 8px !important; padding: 3px 2px; }
  html body.legacy-app #gridbit-header .gas-scroll-bar .gas-online-dot { width: 8px !important; height: 8px !important; }
}

/* ---------- Version 2.0.27: posts are listed like suggested accounts ---------- */
html body.legacy-app:not(.single) .gridbit-posts-grid {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
html body.legacy-app .gridbit-grid-post.legacy-feed-post {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--lg-line);
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  padding: 16px 0 18px;
  min-width: 0;
  max-width: 100%;
  transform: none !important;
  transition: opacity .25s ease, max-height .3s ease, padding .3s ease;
}
html body.legacy-app .gridbit-grid-post.legacy-feed-post:hover { box-shadow: none; transform: none !important; }
html body.legacy-app .gridbit-grid-post.legacy-feed-post:last-child { border-bottom: 0; }
.legacy-feed-row { display: flex; align-items: center; gap: 10px; }
.legacy-feed-avatar {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  display: block;
  background: var(--lg-line);
}
.legacy-feed-avatar img, .legacy-feed-avatar-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.legacy-feed-text { flex: 1 1 0; min-width: 0; font-family: var(--lg-font); }
.legacy-feed-title { margin: 0 !important; font: 800 17px/1.25 var(--lg-font) !important; letter-spacing: 0 !important; text-transform: none !important; }
.legacy-feed-title a { color: var(--lg-ink); text-decoration: none; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legacy-feed-handle { margin-top: 2px; font: 600 14px/1.3 var(--lg-font); color: var(--lg-ink); opacity: .86; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legacy-feed-desc { margin: 12px 2px 0 !important; font: 500 14px/1.5 var(--lg-font); color: var(--lg-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.legacy-feed-desc a { color: inherit; text-decoration: none; }
.legacy-feed-wa {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: #25d366;
  color: #fff !important;
  font: 800 14px/1 var(--lg-font);
  text-decoration: none !important;
  box-shadow: 0 4px 12px rgba(37, 211, 102, .32);
  -webkit-tap-highlight-color: transparent;
}
.legacy-feed-wa:hover, .legacy-feed-wa:focus { background: #1ebe5a; color: #fff !important; }
.legacy-feed-wa:active { transform: scale(.97); }
.legacy-feed-x {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--lg-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: .8;
}
.legacy-feed-x:hover { opacity: 1; }
.legacy-feed-strip {
  display: grid;
  gap: 2px;
  margin-top: 14px;
  border-radius: 18px;
  overflow: hidden;
  grid-template-columns: repeat(4, 1fr);
  text-decoration: none;
}
.legacy-feed-strip-1 { grid-template-columns: 1fr; }
.legacy-feed-strip-2 { grid-template-columns: repeat(2, 1fr); }
.legacy-feed-strip-3 { grid-template-columns: repeat(3, 1fr); }
.legacy-feed-tile { position: relative; display: block; aspect-ratio: 1 / 1; background: var(--lg-line); overflow: hidden; }
.legacy-feed-strip-1 .legacy-feed-tile { aspect-ratio: 16 / 9; }
.legacy-feed-tile img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; border-radius: 0; }
.legacy-feed-new {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .5);
  color: #fff;
  font: 800 12px/1 var(--lg-font);
  font-style: normal;
}
.legacy-feed-post.is-hiding { opacity: 0; }
html[data-urs-theme='dark'] .legacy-feed-title a, html[data-urs-theme='dark'] .legacy-feed-handle { color: #eef0f6; }
@media (max-width: 380px) {
  .legacy-feed-avatar { width: 48px; height: 48px; }
  .legacy-feed-wa { padding: 0 11px; font-size: 13px; }
  .legacy-feed-wa svg { width: 16px; height: 16px; }
}

/* ---------- Version 2.0.28: single posts use the whole screen width with an even side gutter ----------
   Text, headings, lists, quotes, tables and plugin panels all run the full width. Block editor layout
   rules and plugin wrappers can no longer squeeze them into a narrow column. */
body.legacy-app.single .gridbit-post-singular,
body.legacy-app.single .gridbit-post-singular .entry-content,
body.legacy-app.single .gridbit-post-singular .entry-content [class*="is-layout-"],
body.legacy-app.single .gridbit-post-singular .entry-content .wp-block-group,
body.legacy-app.single .gridbit-post-singular .entry-content .wp-block-columns,
body.legacy-app.single .gridbit-post-singular .entry-content .wp-block-group__inner-container {
  max-width: none !important;
  width: 100% !important;
  box-sizing: border-box;
}
body.legacy-app.single .gridbit-post-singular .entry-content > :where(:not(.alignleft):not(.alignright):not(.aligncenter)),
body.legacy-app.single .gridbit-post-singular .entry-content [class*="is-layout-"] > :where(:not(.alignleft):not(.alignright):not(.aligncenter)) {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
body.legacy-app.single .gridbit-post-singular .entry-content > :where(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, pre, dl, figure, table),
body.legacy-app.single .gridbit-post-singular .entry-header-inside {
  padding-left: 16px !important;
  padding-right: 16px !important;
  box-sizing: border-box;
}
body.legacy-app.single .gridbit-post-singular .entry-content p,
body.legacy-app.single .gridbit-post-singular .entry-content li { line-height: 1.7; }
body.legacy-app.single .gridbit-post-singular .entry-content img { max-width: 100%; height: auto; }
body.legacy-app.single .gridbit-post-singular .entry-title { padding-left: 0 !important; padding-right: 0 !important; }

/* ---------- Version 2.0.29: comment box without the navy frame, and comment text at full width ---------- */
/* 1. The navy frame around the comment box is removed. The voice recorder and the text box sit directly on the page. */
html body.legacy-app #respond,
html body.legacy-app .comment-respond {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-top: 8px !important;
}
html body.legacy-app #respond h3,
html body.legacy-app #respond .comment-reply-title { color: var(--lg-ink) !important; }
html body.legacy-app #respond label,
html body.legacy-app #respond .logged-in-as { color: var(--lg-muted) !important; }
html body.legacy-app #respond .logged-in-as a { color: var(--lg-gold) !important; }
html body.legacy-app #respond input[type="text"],
html body.legacy-app #respond input[type="email"],
html body.legacy-app #respond input[type="url"],
html body.legacy-app #respond textarea {
  background: #fff !important;
  color: var(--lg-ink) !important;
  border: 1px solid var(--lg-line) !important;
}
html body.legacy-app #respond input::placeholder,
html body.legacy-app #respond textarea::placeholder { color: var(--lg-muted) !important; opacity: .8; }
html[data-urs-theme='dark'] body.legacy-app #respond h3,
html[data-urs-theme='dark'] body.legacy-app #respond .comment-reply-title { color: #eef1f8 !important; }

/* 2. Each engagement is a vertical stack: name, text, read more, then the like and reply row. */
html body.legacy-app #comments .comment-body,
html body.legacy-app .comment-list .comment-body {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
html body.legacy-app #comments .comment-body > *,
html body.legacy-app .comment-list .comment-body > * {
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
}
html body.legacy-app #comments .comment-content {
  hyphens: manual !important;
  -webkit-hyphens: manual !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}
html body.legacy-app #comments .comment-content a { word-break: break-word !important; }
html body.legacy-app #comments .comment-content p { margin: 0 0 6px !important; }
/* the read more button is plain blue text, not a filled box */
html body.legacy-app #comments .gp-comment-readmore {
  width: auto !important;
  align-self: flex-start;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  color: #3a7bd5 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}
html body.legacy-app #comments .reply {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px !important;
  margin-top: 4px !important;
}
html body.legacy-app #comments .reply a.comment-reply-link { margin-left: auto; }

/* ---------- Version 2.0.30: the member picture and name always show on every engagement ----------
   Written with the strongest selectors, so no plugin rule that cleans up author bylines can hide
   the picture or the name inside the engagement list. Pictures that fail to load get a letter circle. */
html body.legacy-app #comments .comment-body > .comment-meta {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  position: static !important;
}
html body.legacy-app #comments .comment-meta .comment-author,
html body.legacy-app #comments .comment-meta .comment-author.vcard {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  align-items: center !important;
  gap: 12px !important;
  height: auto !important;
}
html body.legacy-app #comments .comment-author .gridbit-avatar-wrap {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex: 0 0 auto !important;
  position: relative;
  width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  float: none !important;
}
html body.legacy-app #comments .comment-author img.avatar {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  border-radius: 50% !important;
  border: 2px solid var(--lg-gold) !important;
  object-fit: cover !important;
  background: var(--lg-line);
}
html body.legacy-app #comments .comment-author .gridbit-comment-authorcol {
  display: flex !important;
  visibility: visible !important;
  flex-direction: column !important;
  min-width: 0;
}
html body.legacy-app #comments .comment-author .fn,
html body.legacy-app #comments .comment-author .fn a {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
html body.legacy-app #comments .legacy-avatar-fallback {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--lg-gold);
  background: linear-gradient(135deg, var(--lg-navy) 0%, var(--lg-navy2) 100%);
  color: #fff;
  font: 800 18px/1 var(--lg-font);
  text-transform: uppercase;
  box-sizing: border-box;
}

/* ---------- Version 2.0.32: night mode for the app shell ----------
   The Reputation plugin no longer sets html[data-urs-theme], so the rules above that wait for it never apply.
   Night mode is now body.glh-dark (set by the Wallet Dashboard plugin from the member's saved choice).
   Everything below is scoped to that class, so light mode is unchanged. Colours come from the dashboard's night
   tokens, with the same values as fallbacks in case the dashboard stylesheet is not on the page. */
body.glh-dark.legacy-app {
  --lg-bg: var(--glh-night-bg, #080B10);
  --lg-card: var(--glh-night-surface, #151A22);
  --lg-ink: var(--glh-night-text, #F5F0E5);
  --lg-muted: var(--glh-night-text-secondary, #A9B1BF);
  --lg-line: var(--glh-night-border, #303743);
}
body.glh-dark .legacy-tabbar {
  background: rgba(8, 11, 16, .96);
  border-top-color: var(--glh-night-border-gold, rgba(217, 165, 46, .35));
  box-shadow: 0 -10px 30px rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body.glh-dark .legacy-tab { color: var(--glh-night-text-secondary, #A9B1BF); }
body.glh-dark .legacy-tab:hover { color: var(--glh-night-text, #F5F0E5); }
body.glh-dark .legacy-tab.is-active { color: var(--glh-night-gold-light, #F0C65B); }
body.glh-dark .legacy-tab.is-active svg { color: var(--glh-night-gold, #D9A52E); }
body.glh-dark .legacy-tab.is-active::after { background: var(--glh-night-gold, #D9A52E); }
body.glh-dark .legacy-tab:focus-visible { outline: 2px solid var(--glh-night-gold-light, #F0C65B); outline-offset: 2px; }
@media (min-width: 901px) {
  body.glh-dark .legacy-tabbar {
    border: 1px solid var(--glh-night-border-gold, rgba(217, 165, 46, .35));
    box-shadow: 0 18px 44px rgba(0, 0, 0, .6);
  }
}
body.glh-dark .legacy-sheet-backdrop { background: rgba(0, 0, 0, .65); }
body.glh-dark .legacy-sheet {
  background: var(--glh-night-surface-raised, #1C222C);
  border-top: 1px solid var(--glh-night-border-gold, rgba(217, 165, 46, .35));
}
body.glh-dark .legacy-avatar-sheet { background: var(--glh-night-surface-raised, #1C222C); color: var(--glh-night-text, #F5F0E5); }
body.glh-dark .legacy-avatar-head h2,
body.glh-dark .legacy-avatar-gallery-wrap h3 { color: var(--glh-night-text, #F5F0E5); }
body.glh-dark .legacy-avatar-btn-main { background: var(--glh-night-gold-dark, #946713); border-color: var(--glh-night-gold-dark, #946713); color: #fff; }
body.glh-dark .legacy-avatar-btn-ghost { color: var(--glh-night-text, #F5F0E5); border-color: var(--glh-night-border, #303743); }
body.glh-dark .legacy-avatar-foot { border-top-color: var(--glh-night-border, #303743); }
body.glh-dark .legacy-avatar-account { color: var(--glh-night-info, #79B8F3); }
body.glh-dark .legacy-avatar-msg,
body.glh-dark .legacy-avatar-hint { color: var(--glh-night-text-secondary, #A9B1BF); }
@media (prefers-reduced-motion: reduce) {
  body.glh-dark .legacy-tab, body.glh-dark .legacy-tab svg { transition: none; }
}

/* ---------- Version 2.0.33: my own picture is the same size as the scrolling avatars ----------
   The own picture was 42 pixels while the scrolling avatars are 38 (30 on phones), so it looked bigger.
   The size comes from --legacy-avatar-size, which legacy-app.js copies from the first scrolling avatar so
   it also follows the size chosen in the Avatar Scroll settings. */
html body.legacy-app #gridbit-header .legacy-avatar-btn {
  width: var(--legacy-avatar-size, 38px) !important;
  height: var(--legacy-avatar-size, 38px) !important;
  min-width: var(--legacy-avatar-size, 38px) !important;
  box-sizing: border-box;
}
html body.legacy-app #gridbit-header .legacy-avatar-btn::after {
  width: 14px;
  height: 14px;
  right: -4px;
  bottom: -4px;
  font: 800 11px/10px Arial, Helvetica, sans-serif;
}
@media (max-width: 480px) {
  html body.legacy-app #gridbit-header .legacy-avatar-btn {
    width: var(--legacy-avatar-size, 30px) !important;
    height: var(--legacy-avatar-size, 30px) !important;
    min-width: var(--legacy-avatar-size, 30px) !important;
  }
}

/* Version 2.0.34: the longer correct motto wraps neatly under the site name. */
body.legacy-app .legacy-brand-text small { max-width: 210px; font-size: 7.5px; letter-spacing: .05em; line-height: 1.25; white-space: normal; }

/* ============================================================
   Version 2.0.35: pages run the full screen width, and the footer sits at the bottom.
   1. Pages (sign in, account, footer pages) no longer sit in a 95 percent wide column
      with a white card around them. The wrapper is the full width of the screen.
   2. The footer is pinned to the bottom of the screen on short pages, so there is no
      empty grey space under it and it never floats in the middle of the page.
   ============================================================ */

/* 1. Full width frame for pages and for the member account page (also when it opens on the profile address) */
body.legacy-app.singular .gridbit-outer-wrapper,
body.legacy-app.singular #gridbit-wrapper-outside,
body.legacy-app.singular #gridbit-wrapper,
body.legacy-app.singular .gridbit-content-wrapper,
body.legacy-app.singular .gridbit-main-wrapper,
body.legacy-app.singular .gridbit-main-wrapper-inside,
body.legacy-app.singular .gridbit-posts-wrapper,
body.legacy-app.singular .gridbit-post-singular,
body.legacy-app.singular .gridbit-box,
body.legacy-app.singular .gridbit-box-inside,
body.legacy-app.singular .entry-content,
body.legacy-app.urs-has-private-profile .gridbit-outer-wrapper,
body.legacy-app.urs-has-private-profile #gridbit-wrapper-outside,
body.legacy-app.urs-has-private-profile #gridbit-wrapper,
body.legacy-app.urs-has-private-profile .gridbit-content-wrapper,
body.legacy-app:has(.urs-account-dashboard-mode) .gridbit-outer-wrapper,
body.legacy-app:has(.urs-account-dashboard-mode) #gridbit-wrapper-outside,
body.legacy-app:has(.urs-account-dashboard-mode) #gridbit-wrapper,
body.legacy-app:has(.urs-account-dashboard-mode) .gridbit-content-wrapper {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box;
}
/* The header keeps its own inner wrapper, so only the page area above is widened. */
body.legacy-app.singular #gridbit-wrapper-outside,
body.legacy-app.urs-has-private-profile #gridbit-wrapper-outside,
body.legacy-app:has(.urs-account-dashboard-mode) #gridbit-wrapper-outside { padding-top: 0 !important; }
/* No white card, border or rounded corners around a page: what sits inside already has its own design. */
body.legacy-app.singular .gridbit-post-singular,
body.legacy-app.singular .gridbit-box,
body.legacy-app.singular .gridbit-box-inside {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
body.legacy-app.singular .entry-content { margin-top: 0 !important; margin-bottom: 0 !important; }
/* Plain text pages (About, Terms and so on) keep an even side gutter, plugin panels run edge to edge. */
body.legacy-app.page .entry-content > :where(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, pre, dl, figure, table) {
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}
body.legacy-app.page .entry-content > :where(ul, ol) { margin-left: 0; margin-right: 0; padding-left: 36px; }
body.legacy-app.page .gridbit-post-singular { padding-bottom: 24px !important; }

/* The sign in notice card ("You're signed in") fills the width on phones and stays a tidy card on large screens. */
body.legacy-app .urs-loggedin-wrap { width: 100%; max-width: 420px; }
@media (max-width: 600px) {
  body.legacy-app .urs-loggedin-wrap { max-width: none; }
  body.legacy-app .urs-loggedin-card { border-radius: 0; box-shadow: none; }
}

/* 2. The footer stays at the bottom of the screen */
body.legacy-app.legacy-no-tabbar { padding-bottom: 0 !important; }
body.legacy-app .gridbit-site-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
body.legacy-app .gridbit-site-container > #gridbit-header,
body.legacy-app .gridbit-site-container > #gridbit-header-end,
body.legacy-app .gridbit-site-container > #gridbit-wrapper-outside,
body.legacy-app .gridbit-site-container > .gridbit-header-image { width: 100%; flex: 0 0 auto; }
body.legacy-app .gridbit-site-container > #gridbit-wrapper-outside { flex: 1 0 auto; }
/* The footer from the Reputation plugin takes whatever space is left above it, and clears a bottom bar such as Duila. */
body.legacy-app .gridbit-site-container > .urs-auth-footer {
  flex: 0 0 auto;
  margin-top: auto;
  margin-left: 0;
  margin-right: 0;
  width: 100%;
  padding-bottom: calc(var(--lg-safe-b) + var(--lg-stack));
}

/* Version 2.0.36: the top bar stays pinned on every page.
   The theme sets html to overflow-y scroll, so any plugin or rule that puts overflow-x hidden on the body turns the body into its own
   scroll box and a sticky bar stops sticking. Clip blocks sideways scrolling the same way but does not create a scroll box.
   This one rule wins over those rules everywhere (single posts, pages, dashboards, plugin pages). */
html body.legacy-app { overflow-x: clip !important; }