/* ============================================================
   Skip-to-Content Link (Accessibility)
   ============================================================ */
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  word-wrap: normal !important;
}
/* 2.85.0 (C-P2-16, SC-073): fixed (style.css's position:static put it under the fixed top bar), and the accent-font
   colour !important — the head's a { color: link !important } painted it in the link colour, 1:1 on the accent. */
.screen-reader-text:focus,
a.screen-reader-text:focus {
  position: fixed !important;
  color: var(--gw-accent-font, #fff) !important;
  clip: auto !important;
  clip-path: none;
  display: block;
  height: auto;
  width: auto;
  left: 16px;
  top: 8px;
  z-index: 100001;
  background: var(--gw-accent, #C93358);
  color: var(--gw-accent-font, #fff);
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* ============================================================
   GW APP SHELL LAYOUT — Phase 1 Foundation
   Loaded only on gratitude wall pages (logged-in users).
   All rules scoped under body.gw-app-shell.
   ============================================================ */

/* -- CSS Custom Properties (static values; Phase 4 swaps to [data-theme] selectors) -- */
body.gw-app-shell {
  /* Sidebar widths are corrected for this theme's global `* { font-size:95% }` (style.css),
     which makes the root font 15.2px, not 16px. Dividing the intended px->rem value by 0.95
     lands on a true 200px/60px at the default font while still scaling with the browser font
     (which is what lets a larger-font user's labels keep fitting). If that global rule is ever
     removed, revert these to plain rem (12.5rem / 3.75rem). */
  --gw-sidebar-width: calc(12.5rem / 0.95);            /* = 200px at the 15.2px root */
  --gw-sidebar-width-collapsed: calc(3.75rem / 0.95);  /* = 60px */
  --gw-right-sidebar-width: 280px;
  --gw-topbar-height: 64px;

  /* Colors — light mode defaults (Phase 4 adds dark mode via [data-theme="dark"]) */
  --gw-sidebar-bg: #ffffff;
  --gw-sidebar-text: #555555;
  --gw-sidebar-hover-bg: #f5f5f5;
  --gw-sidebar-active-bg: #C93358;
  --gw-sidebar-active-text: #ffffff;
  --gw-sidebar-border: #ebebeb;
  --gw-topbar-bg: #ffffff;
  --gw-topbar-border: #ebebeb;
  --gw-main-bg: #f5f5f5;
  --gw-right-sidebar-bg: #ffffff;
  /* BC-086: AA-passing defaults — #C93358 takes white text at 5.1:1 (the old #EF5777 was 3.3:1),
     #6b6b6b secondary text is 4.9:1 on the #f5f5f5 page (the old #888888 was 3.3:1). _head.php
     overrides the accent tokens from the saved palette; these apply only where it does not. */
  --gw-accent: #C93358;
  --gw-accent-font: #ffffff;       /* text on an accent surface: grat_accent_font_color */
  --gw-accent-hover-font: #ffffff; /* text on an --gw-accent-hover surface: grat_secondary_accent_font_color */
  --gw-focus: #1a1a1a;             /* keyboard focus: grat_focus_outline_color */
  --gw-text-primary: #2d2d2d;
  --gw-text-secondary: #6b6b6b;
  --gw-text-tertiary: #707070;     /* 2.68.7 (C5): hint text — 4.95:1 on white cards, 4.54:1 on the #f5f5f5 page (the #999 fallback it fell back to was 2.85:1) */
  --gw-card-bg: #ffffff;
  --gw-input-bg: #ffffff;
  --gw-border: #dddddd;
  --gw-accent-hover: #A81C44;
  --gw-secondary: #4cb26a;

  /* Type scale */
  --gw-font-xs: 0.75rem;
  --gw-font-sm: 0.75rem;
  --gw-font-base: 0.85rem;
  --gw-font-md: 0.95rem;
  --gw-font-lg: 1.1rem;

  /* Transition */
  --gw-transition: 0.2s ease;
}

/* Scroll past fixed topbar for anchor links */
html {
  scroll-padding-top: var(--gw-topbar-height, 64px);
}

/* -- Dark Mode (Phase 4) -- */
html[data-theme="dark"] body.gw-app-shell {
  --gw-sidebar-bg: #1e1e1e;
  --gw-sidebar-text: #cccccc;
  --gw-sidebar-hover-bg: #2a2a2a;
  --gw-sidebar-active-bg: #C93358;
  --gw-sidebar-active-text: #ffffff;
  --gw-sidebar-border: #333333;
  --gw-topbar-bg: #1a1a1a;
  --gw-topbar-border: #333333;
  --gw-main-bg: #121212;
  --gw-right-sidebar-bg: #1e1e1e;
  --gw-accent: #C93358;
  --gw-accent-text: #d65c7a; /* 2.85.0 (C-P2-15, SC-076): the default accent's dark-mode text shade (4.5:1+ on #121212 / #1e1e1e); _head.php sets the site's own */
  --gw-focus: #e0e0e0; /* BC-086: the light-mode #1a1a1a is 1.1:1 on these surfaces */
  --gw-text-primary: #e0e0e0;
  --gw-text-secondary: #b0b0b0;
  --gw-text-tertiary: #999999;     /* 2.68.7 (C5): dark mode keeps the #999 it already showed (5.85:1 on #1e1e1e) */
  --gw-card-bg: #1e1e1e;
  --gw-input-bg: #2a2a2a;
  --gw-border: #444444;
  --gw-accent-hover: #A81C44;
  --gw-secondary: #4cb26a;
}

/* Dark mode overrides for elements using hardcoded colors */
html[data-theme="dark"] body.gw-app-shell .gw-card {
  background: var(--gw-card-bg);
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
html[data-theme="dark"] body.gw-app-shell .gw-card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
html[data-theme="dark"] body.gw-app-shell .gw-card__kebab-menu {
  background: var(--gw-card-bg);
  border-color: var(--gw-sidebar-border);
}
html[data-theme="dark"] body.gw-app-shell .gw-topbar__dropdown-panel {
  background: var(--gw-card-bg);
  border-color: var(--gw-sidebar-border);
}
html[data-theme="dark"] body.gw-app-shell .gw-postbar {
  background: var(--gw-card-bg);
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
html[data-theme="dark"] body.gw-app-shell .gw-rsb__widget {
  background: var(--gw-card-bg);
}
html[data-theme="dark"] body.gw-app-shell .gw-rsb__donate {
  background: var(--gw-accent);
}
html[data-theme="dark"] body.gw-app-shell .gw-topbar__search-input {
  background: var(--gw-card-bg);
  color: var(--gw-text-primary);
  border-color: var(--gw-topbar-border);
}

/* Dark mode toggle buttons */
.gw-topbar__theme-toggle {
  display: flex;
  gap: 2px;
}
.gw-topbar__theme-btn {
  background: none;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  padding: 5px 7px;
  border-radius: 6px;
  color: var(--gw-text-secondary);
  transition: background var(--gw-transition), color var(--gw-transition);
}
.gw-topbar__theme-btn:hover {
  color: var(--gw-text-primary);
}
.gw-topbar__theme-btn--active {
  background: var(--gw-accent);
  color: var(--gw-accent-font, #ffffff);
}
.gw-topbar__theme-btn--active:hover {
  color: var(--gw-accent-font, #ffffff);
}


/* ============================================================
   TOP BAR
   ============================================================ */
.gw-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--gw-topbar-height);
  background: var(--gw-topbar-bg);
  border-bottom: 1px solid var(--gw-topbar-border);
  display: flex;
  align-items: center;
  padding: 0 20px;
  z-index: 10100; /* above miniGratSubmission (10000), below lightbox (1000000002) */
}

.gw-topbar__left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: var(--gw-sidebar-width);
}

.gw-topbar__hamburger {
  display: none;
  background: none;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  padding: 6px;
  color: var(--gw-text-primary);
}

.gw-topbar__logo {
  height: 36px;
  max-height: 36px;
  width: auto;
}
/* Size class overrides (set via grat_logoSize option) */
.gw-topbar__logo.x-small { height: 22px; max-height: 22px; }
.gw-topbar__logo.small   { height: 28px; max-height: 28px; }
.gw-topbar__logo.regular { height: 36px; max-height: 36px; }
.gw-topbar__logo.large   { height: 48px; max-height: 48px; }
.gw-topbar__logo.x-large { height: 60px; max-height: 60px; }
/* SVGs need explicit dimensions to avoid 0×0 rendering */
img.gw-topbar__logo[src$=".svg"] {
  height: 36px;
  min-width: 1px;
}
img.gw-topbar__logo.x-small[src$=".svg"] { height: 22px; }
img.gw-topbar__logo.small[src$=".svg"]   { height: 28px; }
img.gw-topbar__logo.regular[src$=".svg"] { height: 36px; }
img.gw-topbar__logo.large[src$=".svg"]   { height: 48px; }
img.gw-topbar__logo.x-large[src$=".svg"] { height: 60px; }

.gw-topbar__org-name {
  font-size: var(--gw-font-base);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--gw-text-primary);
  white-space: nowrap;
  text-decoration: none;
}
.gw-topbar__org-name:hover { text-decoration: none; color: var(--gw-text-primary); }

.gw-topbar__center {
  flex: 1;
  display: flex;
  justify-content: center;
  padding: 0 20px;
}

.gw-topbar__search {
  position: relative;
  width: 100%;
  max-width: 440px;
}

.gw-topbar__search-input {
  width: 100%;
  height: 38px;
  border: 1px solid var(--gw-topbar-border);
  border-radius: 50px;
  padding: 0 16px 0 40px;
  font-size: 0.8rem;
  background: var(--gw-main-bg);
  outline: none;
  transition: border-color var(--gw-transition);
}
.gw-topbar__search-input:focus {
  border-color: var(--gw-accent);
  box-shadow: 0 0 0 3px var(--gw-accent-25, rgba(201, 51, 88, 0.25));
  outline: none;
}

.gw-topbar__search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gw-accent-text, var(--gw-accent));
  font-size: var(--gw-font-base);
  pointer-events: none;
}

.gw-topbar__right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.gw-topbar__btn {
  background: none;
  border: 1px solid var(--gw-topbar-border);
  border-radius: 50px;
  padding: 6px 14px;
  font-size: 0.7rem;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  color: var(--gw-text-primary);
  white-space: nowrap;
  transition: background var(--gw-transition), color var(--gw-transition);
}
.gw-topbar__btn:hover {
  background: var(--gw-main-bg);
}
.gw-topbar__btn--active {
  background: var(--gw-accent);
  color: var(--gw-accent-font, #fff);
  border-color: var(--gw-accent);
}

.gw-topbar__icon-btn {
  background: none;
  border: none;
  font-size: var(--gw-font-lg);
  cursor: pointer;
  padding: 6px;
  color: var(--gw-text-secondary);
  transition: color var(--gw-transition);
}
.gw-topbar__icon-btn:hover { color: var(--gw-accent-text, var(--gw-accent)); }
.gw-topbar__icon-btn--active { color: var(--gw-accent-text, var(--gw-accent)); }

.gw-topbar__user-link {
  font-size: var(--gw-font-sm);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gw-text-primary);
  text-decoration: none;
  padding: 6px 10px;
}
.gw-topbar__user-link:hover { color: var(--gw-accent-text, var(--gw-accent)); text-decoration: none; }
.gw-topbar__user-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
  margin-right: 4px;
}

/* Mobile auth buttons (logged-out) — hidden on desktop */
.gw-topbar__auth-mobile { display: none; }

/* Mobile user avatar (logged-in) — hidden on desktop */
.gw-topbar__user-avatar-mobile { display: none; }

/* -- Shared avatar initials circles -- */
.gw-avatar-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--gw-accent, #C93358);
  color: var(--gw-accent-font, #fff);
  font-weight: 700;
  font-size: 0.55rem;
  letter-spacing: 0.02em;
  line-height: 1;
  flex-shrink: 0;
  vertical-align: middle;
}
.gw-avatar-initials--xs { width: 22px; height: 22px; font-size: 0.5rem; }
.gw-avatar-initials--sm { width: 28px; height: 28px; font-size: 0.6rem; }
.gw-avatar-initials--md { width: 48px; height: 48px; font-size: 0.85rem; }
.gw-avatar-initials--lg { width: 100px; height: 100px; font-size: 1.6rem; }

/* Card recipient avatar (inline with "To: Name") */
.gw-card__recipient-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
  margin-right: 4px;
}

/* Topbar dropdown panels (FILTER / SORT) */
.gw-topbar__dropdown {
  position: relative;
  display: inline-block;
}

.gw-topbar__dropdown-panel {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: var(--gw-topbar-bg);
  border: 1px solid var(--gw-topbar-border);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 12px;
  z-index: 10200; /* above topbar */
}
.gw-topbar__dropdown-panel--open { display: block; }

.gw-topbar__dropdown-panel label {
  display: block;
  padding: 6px 10px;
  font-size: var(--gw-font-sm);
  text-transform: uppercase;
  color: var(--gw-text-primary);
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.gw-topbar__dropdown-panel label:hover { background: var(--gw-main-bg); }

/* BC-085: the options are real radios in a fieldset. The input is visually hidden but stays
   focusable; its label shows the focus ring and the current choice. */
.gw-topbar__radio-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.gw-topbar__option { position: relative; }
.gw-topbar__option-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.gw-topbar__option-input:focus-visible + span {
  outline: 2px solid var(--gw-focus, #1a1a1a);
  outline-offset: 3px;
  border-radius: 4px;
}
.gw-topbar__option-input:checked + span { font-weight: 700; }
.gw-topbar__option-input:checked + span::before { content: "\2713\00a0"; }

.gw-topbar__dropdown-header {
  font-size: var(--gw-font-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gw-text-secondary);
  padding: 4px 10px 2px;
  margin-top: 6px;
}
.gw-topbar__dropdown-header:first-child { margin-top: 0; }

/* Placeholders (hidden until later phases) */
.gw-topbar__placeholder { display: none; }


/* ============================================================
   APP SHELL GRID
   ============================================================ */
.gw-shell {
  min-height: calc(100vh - var(--gw-topbar-height));
  margin-top: var(--gw-topbar-height);
}


/* ============================================================
   LEFT SIDEBAR
   ============================================================ */
.gw-sidebar {
  position: fixed;
  top: var(--gw-topbar-height);
  left: 0;
  bottom: 0;
  width: var(--gw-sidebar-width);
  background: var(--gw-sidebar-bg);
  border-right: 1px solid var(--gw-sidebar-border);
  display: flex;
  flex-direction: column;
  overflow-x: hidden;              /* clip labels during collapse/expand transition */
  overflow-y: auto;
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* IE/Edge */
  padding: 16px 0;
  z-index: 10050; /* between content and topbar */
}
.gw-sidebar::-webkit-scrollbar {
  display: none;                  /* Chrome/Safari */
}

.gw-sidebar__nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gw-sidebar__nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  margin: 0 8px 2px;
  border-radius: 8px;
  color: var(--gw-sidebar-text);
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;             /* prevent text wrap during collapse animation */
  transition: background 0.15s, color 0.15s, gap 0.25s ease, padding 0.25s ease;
}
/* About item: hidden on desktop (≥900px), shown via media query below 899px */
.gw-sidebar__about-item { display: none; }

.gw-sidebar__nav-item:hover {
  background: var(--gw-sidebar-hover-bg);
  color: var(--gw-sidebar-text); /* keep text color unchanged on hover — only the background highlights */
  text-decoration: none;
}
.gw-sidebar__nav-item--active {
  background: var(--gw-sidebar-active-bg);
  color: var(--gw-sidebar-active-text);
  font-weight: 600;
  border-radius: 0;
  margin-left: 0;
  margin-right: 0;
}
.gw-sidebar__nav-item--active:hover {
  background: var(--gw-sidebar-active-bg);
  color: var(--gw-sidebar-active-text);
}

.gw-sidebar__nav-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--gw-font-md);
  flex-shrink: 0;
}

.gw-sidebar__spacer {
  flex: 1;
}

.gw-sidebar__bottom {
  padding: 8px;
  border-top: 1px solid var(--gw-sidebar-border);
}

.gw-sidebar__bottom .gw-sidebar__nav-item {
  font-size: var(--gw-font-sm);
  padding: 8px 12px;
  opacity: 0.7;
}
.gw-sidebar__bottom .gw-sidebar__nav-item:hover { opacity: 1; }

.gw-sidebar__copyright {
  font-size: var(--gw-font-xs);
  color: var(--gw-text-secondary);
  margin-top: 8px;
  padding: 10px 12px 0;
  border-top: 1px solid var(--gw-sidebar-border);
  opacity: 0.6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;         /* a long org name (grat_org_name) ellipsizes instead of a hard clip — no width/height change */
  transition: opacity 0.2s ease, max-height 0.25s ease, margin 0.25s ease, padding 0.25s ease;
  max-height: 40px;
}

.gw-sidebar__toggle {
  display: flex;
}

.gw-sidebar__toggle-btn {
  flex: 1;
  background: var(--gw-sidebar-hover-bg);
  border: none;
  border-radius: 0;
  color: var(--gw-sidebar-text);
  padding: 10px 8px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 0.15s, color 0.15s;
}
.gw-sidebar__toggle-btn:hover { background: var(--gw-sidebar-border); }
.gw-sidebar__toggle-btn--active {
  background: var(--gw-sidebar-active-bg);
  color: var(--gw-sidebar-active-text);
}

/* ============================================================
   SIDEBAR COLLAPSE — Desktop Icon Rail Mode
   ============================================================ */

/* Collapse toggle button (hidden by default, shown on desktop via media query) */
.gw-sidebar__collapse-btn {
  display: none;
  width: 100%;
  background: none;
  border: none;
  border-top: 1px solid var(--gw-sidebar-border);
  padding: 10px 0;
  cursor: pointer;
  color: var(--gw-sidebar-text);
  font-size: 0.8rem;
  text-align: center;
  opacity: 0.5;
  transition: color 0.15s, background 0.15s, opacity 0.15s;
}
.gw-sidebar__collapse-btn:hover {
  color: var(--gw-accent-text, var(--gw-accent));
  background: var(--gw-sidebar-hover-bg);
  opacity: 1;
}
.gw-sidebar__collapse-btn i { transition: transform 0.25s ease; }
.gw-sidebar--collapsed .gw-sidebar__collapse-btn i { transform: rotate(180deg); }
.gw-sidebar--collapsed .gw-sidebar__collapse-btn { opacity: 0.7; }

/* Gated transitions (added by JS after initial state, prevents load flash) */
.gw-sidebar.gw-sidebar--transitions { transition: width 0.25s ease; }
.gw-main.gw-main--transitions { transition: margin-left 0.25s ease; }

/* Collapsed sidebar */
.gw-sidebar--collapsed { width: var(--gw-sidebar-width-collapsed); }

/* Fade out + collapse text labels (smoother than display:none) */
.gw-sidebar__nav-label {
  overflow: hidden;
  opacity: 1;
  max-width: calc(10rem / 0.95);    /* = 160px at the 15.2px root (see --gw-sidebar-width note) */
  transition: opacity 0.2s ease, max-width 0.25s ease;
}
/* 2.85.0 (C-P2-16, SC-080): an expanded sidebar or open drawer lets a label wrap — under a user's text-spacing
   stylesheet (WCAG 1.4.12) "Memory Directory" overflowed its 160px and was cut off. Collapsed it stays on one line
   (no wrap during the collapse animation). */
.gw-sidebar:not(.gw-sidebar--collapsed) .gw-sidebar__nav-item,
.gw-sidebar.gw-sidebar--open .gw-sidebar__nav-item { white-space: normal; }
.gw-sidebar:not(.gw-sidebar--collapsed) .gw-sidebar__nav-label,
.gw-sidebar.gw-sidebar--open .gw-sidebar__nav-label { overflow-wrap: anywhere; min-width: 0; }
.gw-sidebar--collapsed .gw-sidebar__nav-label {
  opacity: 0;
  max-width: 0;
}

/* Center icons */
.gw-sidebar--collapsed .gw-sidebar__nav-item {
  justify-content: center;
  padding: 10px 0;
  margin: 0 4px 2px;
  gap: 0;
}
.gw-sidebar--collapsed .gw-sidebar__nav-item--active {
  margin-left: 0;
  margin-right: 0;
  border-radius: 0;
}

/* Bottom section */
.gw-sidebar--collapsed .gw-sidebar__bottom .gw-sidebar__nav-item {
  justify-content: center;
  padding: 8px 0;
  margin: 0 4px 2px;
}
.gw-sidebar--collapsed .gw-sidebar__bottom .gw-sidebar__nav-item--active {
  margin-left: 0;
  margin-right: 0;
}

/* Hide copyright */
.gw-sidebar--collapsed .gw-sidebar__copyright {
  opacity: 0;
  max-height: 0;
  margin: 0;
  padding: 0 12px;
  border-color: transparent;
}

/* Feed/Grid toggle: stack vertically */
.gw-sidebar--collapsed .gw-sidebar__toggle { flex-direction: column; }
.gw-sidebar--collapsed .gw-sidebar__toggle-btn { padding: 8px 0; }

/* Allow tooltips to overflow sidebar */
.gw-sidebar--collapsed { overflow: visible; }

/* Tooltips via ::after (collapsed mode only) */
.gw-sidebar--collapsed .gw-sidebar__nav-item { position: relative; }
.gw-sidebar--collapsed .gw-sidebar__nav-item::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 8px;
  background: var(--gw-text-primary);
  color: var(--gw-card-bg);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: var(--gw-font-sm);
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 10200;
}
.gw-sidebar--collapsed .gw-sidebar__nav-item:hover::after { opacity: 1; }

/* Body class drives external elements */
body.gw-app-shell.gw-sidebar-collapsed .gw-main {
  margin-left: var(--gw-sidebar-width-collapsed);
}

/* Sidebar collapsed state is now set server-side by PHP — no early JS class needed */

/* Show collapse button on desktop only */
@media (min-width: 1200px) {
  .gw-sidebar__collapse-btn { display: block; }
}

/* --- Mobile extras (hidden on desktop, shown in hamburger on mobile) --- */
.gw-sidebar__mobile-extras {
  display: none;
  padding: 12px 16px;
  border-top: 1px solid var(--gw-sidebar-border);
}
.gw-sidebar__mobile-extras-label {
  font-size: var(--gw-font-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gw-text-secondary);
  margin-bottom: 8px;
}
/* Mobile-only theme toggle + view toggle: hidden on desktop, shown via mobile-extras block */
.gw-sidebar__mobile-theme {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}
/* User link: desktop version visible by default, mobile version hidden */
.gw-sidebar__user-mobile { display: none; }

@media (max-width: 767px) {
  .gw-sidebar__user-desktop { display: none !important; }
  .gw-sidebar__user-mobile  { display: flex !important; }
  /* Hide desktop feed/grid toggle on mobile (duplicate exists in mobile-extras) */
  .gw-sidebar__toggle { display: none !important; }
}

.gw-sidebar__mobile-view {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}
.gw-sidebar__theme-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--gw-sidebar-border);
  border-radius: 6px;
  background: none;
  color: var(--gw-sidebar-text);
  font-size: var(--gw-font-sm);
  cursor: pointer;
}
.gw-sidebar__theme-btn:hover {
  background: var(--gw-sidebar-hover-bg);
}

@media (max-width: 767px) {
  .gw-sidebar__mobile-extras {
    display: block;
  }
}


/* ============================================================
   MAIN CONTENT AREA
   ============================================================ */
.gw-main {
  background: var(--gw-main-bg);
  min-height: calc(100vh - var(--gw-topbar-height));
  padding: 20px;
  margin-left: var(--gw-sidebar-width);
  margin-right: var(--gw-right-sidebar-width);
}


/* ============================================================
   RIGHT SIDEBAR
   ============================================================ */
.gw-right-sidebar {
  position: fixed;
  top: var(--gw-topbar-height);
  right: 0;
  bottom: 0;
  width: var(--gw-right-sidebar-width);
  background: var(--gw-right-sidebar-bg);
  border-left: 1px solid var(--gw-topbar-border);
  overflow-y: auto;
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* IE/Edge */
  padding: 16px;
  z-index: 100; /* Below left sidebar (10080) and topbar (10100) */
}
.gw-right-sidebar::-webkit-scrollbar {
  display: none;                  /* Chrome/Safari */
}

/* -- Right Sidebar Widgets (Phase 6) -- */
.gw-rsb__widget {
  margin-bottom: 20px;
  padding: 16px;
  border-radius: 12px;
  background: var(--gw-card-bg, #ffffff);
}

.gw-rsb__header {
  font-size: var(--gw-font-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gw-text-primary);
  margin: 0 0 10px;
}

.gw-rsb__text {
  font-size: var(--gw-font-base);
  line-height: 1.55;
  color: var(--gw-text-secondary);
  margin: 0 0 8px;
}
.gw-rsb__text:last-child { margin-bottom: 0; }

/* Donate widget */
.gw-rsb__donate {
  background: var(--gw-accent);
  color: var(--gw-accent-font, #ffffff);
}

.gw-rsb__donate-progress {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}

.gw-rsb__donate-current {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--gw-accent-font, #ffffff);
}

.gw-rsb__donate-goal {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gw-accent-font, #ffffff); /* 2.85.0 (C-P2-15, SC-077): full strength — rgba(255,255,255,0.8) was 3.78:1 on the accent */
}

.gw-rsb__donate-bar {
  height: 8px;
  background: rgba(255,255,255,0.3);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 14px;
}

.gw-rsb__donate-bar-fill {
  height: 100%;
  background: #ffffff;
  border-radius: 4px;
  transition: width 0.4s ease;
}

.gw-rsb__donate-btn {
  display: block;
  text-align: center;
  background: #ffffff;
  color: var(--gw-accent-text, var(--gw-accent));
  font-size: var(--gw-font-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 10px;
  border-radius: 50px;
  text-decoration: none;
  transition: opacity 0.2s;
}
.gw-rsb__donate-btn:hover {
  opacity: 0.9;
  text-decoration: none;
  color: var(--gw-accent-text, var(--gw-accent));
}

/* Tagline (How to Share) */
.gw-rsb__tagline {
  font-size: var(--gw-font-sm);
  font-weight: 600;
  color: var(--gw-accent-text, var(--gw-accent));
  margin: 4px 0 0;
  letter-spacing: 0.02em;
}

/* Guideline items */
.gw-rsb__guideline {
  margin-bottom: 10px;
}
.gw-rsb__guideline:last-child { margin-bottom: 0; }

.gw-rsb__guideline-label {
  display: block;
  font-size: var(--gw-font-sm);
  font-weight: 600;
  color: var(--gw-text-primary);
  margin-bottom: 2px;
}


/* ============================================================
   POST BAR — Phase 3
   ============================================================ */
.gw-postbar {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--gw-card-bg);
  border-radius: 24px;
  padding: 8px 8px 8px 20px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  margin-bottom: 4px;
  position: relative;
  z-index: 10; /* Above cards so @ mention dropdown isn't behind kebab menus, below sidebar overlay (10000) */
}
.gw-postbar--has-chip { padding-left: 8px; }

/* Icons & button always pinned to top — padded to visually center with first text line */
.gw-postbar__icons {
  margin-top: 10px;
}
.gw-postbar__btn {
  margin-top: 0;
}

/* -- Logged-out login/register prompt (replaces the bar for guests) -- */
.gw-postbar--login {
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 14px 20px;
}
.gw-postbar__login-text {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--gw-text-secondary);
  font-size: 0.95rem;
  font-weight: 500;
}
.gw-postbar__login-icon {
  color: var(--gw-accent-text, var(--gw-accent));
}
.gw-postbar__login-actions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}
.gw-postbar__login-btn,
.gw-postbar__login-btn:link,
.gw-postbar__login-btn:visited {
  display: inline-block;
  padding: 8px 22px;
  border-radius: 50px;
  background: var(--gw-accent) !important;
  color: var(--gw-accent-font, #fff) !important;
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: opacity 0.2s;
}
.gw-postbar__login-btn:hover,
.gw-postbar__login-btn:focus {
  background: var(--gw-accent) !important;
  color: var(--gw-accent-font, #fff) !important;
  opacity: 0.9;
}
.gw-postbar__login-reg {
  color: var(--gw-text-secondary);
  font-size: 0.9rem;
}
@media (max-width: 480px) {
  .gw-postbar--login {
    justify-content: center;
    text-align: center;
  }
}

/* 2.68.7 (C4h): on a phone the message box, the media icons and POST do not fit on one line. The box was the only
   one that could shrink (flex:1, min-width:0), so with every media type switched on it fell to about a third of the
   bar and its placeholder was cut mid-word ("What are you gratefu"). The box now takes the whole first line and the
   icons sit under it with POST at the end of that line, so the prompt reads in full however many types are enabled.
   Above this width the single line is unchanged. The login prompt (.gw-postbar--login) has its own rules above. */
@media (max-width: 575.98px) {
  .gw-postbar:not(.gw-postbar--login) {
    flex-wrap: wrap;
    padding-left: 16px;
    row-gap: 2px;
  }
  .gw-postbar:not(.gw-postbar--login) .gw-postbar__input {
    flex: 1 1 100%;
    order: 1;
  }
  .gw-postbar:not(.gw-postbar--login) .gw-postbar__recipient { order: 0; }
  .gw-postbar:not(.gw-postbar--login) .gw-postbar__icons {
    order: 2;
    margin-top: 0;
    align-self: center;
  }
  .gw-postbar:not(.gw-postbar--login) .gw-postbar__btn {
    order: 3;
    margin-left: auto;   /* the box no longer pushes it over, so POST keeps the end of its line */
  }
  /* 2.68.7 (QC #5): the chip's own inset outranks the rule above only when it is as specific — without this the
     bar with a recipient chip kept 16px on a phone instead of the 8px it has everywhere else. */
  .gw-postbar--has-chip:not(.gw-postbar--login) { padding-left: 8px; }
}

/* -- @ Mention autocomplete dropdown -- */
.gw-mention {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 220px;
  overflow-y: auto;
  background: var(--gw-card-bg);
  border: 1px solid var(--gw-topbar-border, #ebebeb);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  z-index: 10200;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--gw-text-secondary) transparent;
}
.gw-mention::-webkit-scrollbar { width: 5px; }
.gw-mention::-webkit-scrollbar-track { background: transparent; }
.gw-mention::-webkit-scrollbar-thumb { background: var(--gw-text-secondary); border-radius: 3px; }
.gw-mention::-webkit-scrollbar-thumb:hover { background: var(--gw-accent); }
.gw-mention__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.1s;
}
.gw-mention__item:first-child { border-radius: 12px 12px 0 0; }
.gw-mention__item:last-child { border-radius: 0 0 12px 12px; }
.gw-mention__item:hover,
.gw-mention__item--active {
  background: var(--gw-accent-10, rgba(201, 51, 88, 0.1));
}
.gw-mention__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.gw-mention__initials {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--gw-accent);
  color: var(--gw-accent-font, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  flex-shrink: 0;
}
.gw-mention__info {
  flex: 1;
  min-width: 0;
}
.gw-mention__name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gw-text-primary);
}
.gw-mention__meta {
  font-size: 0.7rem;
  color: var(--gw-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gw-mention__empty {
  padding: 12px 14px;
  font-size: 0.8rem;
  color: var(--gw-text-secondary);
  text-align: center;
}
html[data-theme="dark"] body.gw-app-shell .gw-mention {
  border-color: #333;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}

/* -- Recipient chip below postbar -- */
.gw-postbar__recipient {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  margin: 3px 0 0;
  border: 1px solid var(--gw-accent);
  border-radius: 20px;
  font-size: 0.75rem;
  color: var(--gw-accent-text, var(--gw-accent));
  background: var(--gw-accent-10, rgba(201, 51, 88, 0.1));
  flex-shrink: 0;
  white-space: nowrap;
  line-height: 1.4;
}
.gw-postbar__recipient-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
}
.gw-postbar__recipient-initials {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--gw-accent);
  color: var(--gw-accent-font, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.55rem;
  font-weight: 700;
}
.gw-postbar__recipient-label {
  font-weight: 600;
}
.gw-postbar__recipient-close {
  background: none;
  border: none;
  color: var(--gw-accent-text, var(--gw-accent));
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0 0 0 4px;
  opacity: 0.6;
  transition: opacity 0.15s;
}
.gw-postbar__recipient-close:hover { opacity: 1; }

/* -- Free-text recipient chip variant -- */
.gw-postbar__recipient--freetext { border-style: dashed; }
.gw-postbar__recipient-freetext-icon {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--gw-accent); color: var(--gw-accent-font, #fff);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.55rem;
}
/* -- Free-text email invite field -- */
.gw-postbar__freetext-email {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  padding: 0 80px 8px 24px; font-size: 0.75rem;
  color: var(--gw-text-secondary); margin-top: -4px;
}
.gw-postbar__freetext-email-label {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--gw-accent); color: var(--gw-accent-font, #fff);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; flex-shrink: 0; margin-bottom: 0;
}
.gw-postbar__freetext-email-input {
  border: 1px solid var(--gw-border, #ddd); border-radius: 6px;
  padding: 5px 10px; font-size: 0.75rem; flex: 1; min-width: 120px;
  background: var(--gw-input-bg, #fff); color: var(--gw-text-primary);
  outline: none;
}
.gw-postbar__freetext-email-input:focus { border-color: var(--gw-accent); }
.gw-postbar__freetext-email-hint {
  flex-basis: 100%; padding: 0 0 0 34px;
  font-size: 0.65rem; color: var(--gw-text-tertiary, #999);
  font-style: italic; margin-top: -2px;
}
/* -- Free-text item in mention dropdown -- */
.gw-mention__item--freetext { border-top: 1px dashed var(--gw-border, #ddd); }
.gw-mention__freetext-icon {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--gw-accent-10, rgba(201,51,88,0.1)); color: var(--gw-accent-text, var(--gw-accent));
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem; flex-shrink: 0; margin-right: 10px;
}

/* -- Unclaimed free-text recipient on cards & lightbox -- */
/* 2.85.0 (C-P2-15, SC-077): marked by italics, not by fading — opacity 0.85 took the name to 4.07:1 */
.gw-card__recipient-name--unclaimed { font-style: italic; }
.gw-lightbox__recipient--unclaimed { font-style: italic; }

/* -- Clickable @mention links in card messages -- */
.gw-mention-link {
  color: var(--gw-accent-text, var(--gw-accent));
  cursor: pointer; /* 2.68.5: a <span data-href> on cards */
  font-weight: inherit;
  font-size: inherit;
  text-decoration: none;
  display: inline; /* Prevent -webkit-box from treating link as a box child */
}
.gw-mention-link:hover {
  text-decoration: underline;
}
/* Inside text-hero cards: @mention span is invisible (same as surrounding text) */
.gw-mention-span {
  color: inherit;
  font-weight: inherit;
  font-size: inherit;
  display: inline; /* Prevent -webkit-box from treating span as a box child */
}
.gw-mention-span--unclaimed {
  color: var(--gw-accent-text, var(--gw-accent));
  opacity: 0.7;
}
/* Lightbox text-hero: @mention links match surrounding white text */
.gw-lightbox__text-hero .gw-mention-link,
.gw-lightbox__text-hero .gw-mention-link:hover {
  color: inherit;
  font-weight: inherit;
  font-size: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* -- Background color/gradient picker for text-only posts -- */
.gw-bg-picker {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.gw-bg-swatch {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  border: none;
  transition: box-shadow 0.15s, transform 0.15s;
  flex-shrink: 0;
}
.gw-bg-swatch:hover {
  transform: scale(1.15);
}
.gw-bg-swatch--active {
  box-shadow: 0 0 0 2px var(--gw-card-bg, #fff), 0 0 0 4px var(--gw-accent, #C93358);
}

/* @ mention dropdown inside preview lightbox — float over content */
.gw-mention--preview {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  width: min(520px, 85vw);
  max-height: 200px;
  z-index: 1000000020;
}

.gw-postbar__input {
  flex: 1;
  border: none;
  background: none;
  font-size: var(--gw-font-base);
  color: var(--gw-text-primary);
  outline: none;
  min-width: 0;
  resize: none;
  line-height: 1.4;
  max-height: 200px;
  overflow-y: hidden;
  font-family: inherit;
  padding-top: 8px;
  padding-bottom: 8px;
}
.gw-postbar__input--scrollable {
  overflow-y: auto;
}
.gw-postbar__input::placeholder {
  color: var(--gw-text-secondary);
}

.gw-postbar__icons {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.gw-postbar__icon {
  color: var(--gw-text-secondary);
  font-size: 1rem;
  /* 2.85.0 (C-P2-16, SC-082): a 24 x 24 px hit area at least (WCAG 2.2 2.5.8) — the glyph alone was about 16 px */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  transition: color 0.15s;
  cursor: pointer;
}
.gw-postbar__icon:hover { color: var(--gw-accent-text, var(--gw-accent)); }

.gw-postbar__gif {
  cursor: pointer;
  background: var(--gw-text-secondary);
  color: var(--gw-card-bg);
  font-size: 0.55rem;
  font-weight: 700;
  padding: 2px 4px;
  border-radius: 3px;
  line-height: 1;
  transition: background 0.15s;
}
.gw-postbar__gif:hover { background: var(--gw-accent); color: var(--gw-accent-font, #ffffff); }

.gw-postbar__btn {
  background: var(--gw-accent);
  color: var(--gw-accent-font, #ffffff);
  border: none;
  border-radius: 50px;
  padding: 10px 22px;
  font-size: var(--gw-font-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: opacity 0.2s;
  flex-shrink: 0;
}
.gw-postbar__btn:hover { opacity: 0.9; }

.gw-postbar__counter {
  text-align: right;
  font-size: 0.7rem;
  color: var(--gw-text-secondary);
  margin-top: 2px;
  margin-bottom: 2px;
  padding-right: 12px; /* 2.85.0 (C-P2-15, SC-077): no opacity — 0.6 took the counter to 2.34:1 */
}
.gw-postbar__counter--warn { color: #a85300; }  /* 2.85.0: #e67e22 was 2.6:1 on white */
.gw-postbar__counter--limit { color: #c0392b; font-weight: 600; } /* 2.85.0: #e74c3c was 3.8:1 */
html[data-theme="dark"] .gw-postbar__counter--warn { color: #f5a35c; }
html[data-theme="dark"] .gw-postbar__counter--limit { color: #ff7b6b; }

/* -- Mini submission form inside app shell -- */
body.gw-app-shell #miniGratSubmission {
  display: none;            /* hidden by CSS immediately — no FOUC */
  background: var(--gw-card-bg);
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  margin-bottom: 20px;
}
body.gw-app-shell #miniGratSubmission .form-signin {
  margin-top: 0 !important;
  padding: 0;
}
body.gw-app-shell #miniGratSubmission textarea.form-control {
  border-radius: 8px;
  border: 1px solid var(--gw-sidebar-border, #e0e0e0);
  background: var(--gw-main-bg);
  color: var(--gw-text-primary);
  resize: vertical;
}
body.gw-app-shell #miniGratSubmission .icon-wrapper {
  color: var(--gw-text-secondary);
  border-color: var(--gw-sidebar-border, #e0e0e0);
}
body.gw-app-shell #miniGratSubmission .icon-wrapper:hover {
  color: var(--gw-accent-text, var(--gw-accent));
  border-color: var(--gw-accent);
}
body.gw-app-shell #miniGratSubmission .mini-pview-btn {
  background: var(--gw-accent);
  color: var(--gw-accent-font, #fff);
  border-radius: 50px;
}


/* ============================================================
   HIDE OLD LAYOUT ELEMENTS (scoped to app shell)
   ============================================================ */
body.gw-app-shell #gratitude-header,
body.gw-app-shell #mainFooter,
body.gw-app-shell #mobile-menu,
body.gw-app-shell .jumbotron {
  display: none !important;
}
/* 2.85.0 (C-P2-14, SC-074): the legacy banner holds the page's h1 — visually hidden, not display:none, so the wall and
   directory pages keep a level-1 heading for screen readers (they exposed none). */
body.gw-app-shell .banner-heading {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important;
}

body.gw-app-shell #gratitudeContainer {
  display: block !important;
  padding-top: 0 !important;
  max-width: none !important;
  grid-template-columns: none !important;
}

/* Hide inline filter/sort form in app shell — topbar handles it */
body.gw-app-shell #gratitudeContainer form#filter {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
}

body.gw-app-shell #gratitudeContainer > #leftSidebar,
body.gw-app-shell #gratitudeContainer > #rightSidebar {
  display: none !important;
}

body.gw-app-shell #miniGratSubmission {
  position: relative !important;
}

body.gw-app-shell #feedContainer {
  max-width: 100%;
}


/* ============================================================
   MOBILE SIDEBAR OVERLAY
   ============================================================ */
body.gw-sidebar-overlay {
  overflow: hidden; /* prevent background scroll while sidebar open */
}
body.gw-sidebar-overlay::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 10000; /* above content/miniGratSubmission, below topbar */
}


/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */

/* Tablet: sidebars hidden, single column, hamburger visible */
@media (max-width: 1199px) {
  .gw-main,
  body.gw-app-shell.gw-sidebar-collapsed .gw-main {
    margin-left: 0;
  }

  .gw-sidebar {
    top: var(--gw-topbar-height);
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 10080; /* above overlay (10000), below topbar (10100) */
    padding-top: 16px;
  }
  .gw-sidebar--open {
    transform: translateX(0);
  }

  /* Right sidebar stays visible 900–1199px; hidden at 899px via separate breakpoint below */

  .gw-topbar__hamburger {
    display: block;
  }

  .gw-topbar__left {
    min-width: auto;
  }

  /* Force expanded sidebar on mobile/tablet (overlay mode) regardless of saved state */
  .gw-sidebar--collapsed {
    width: var(--gw-sidebar-width);
  }
  .gw-sidebar--collapsed .gw-sidebar__nav-label { opacity: 1; max-width: calc(10rem / 0.95); }
  .gw-sidebar--collapsed .gw-sidebar__nav-item {
    justify-content: flex-start;
    padding: 10px 20px;
    margin: 0 8px 2px;
  }
  .gw-sidebar--collapsed .gw-sidebar__nav-item--active {
    margin-left: 0;
    margin-right: 0;
    border-radius: 0;
  }
  .gw-sidebar--collapsed .gw-sidebar__bottom .gw-sidebar__nav-item {
    justify-content: flex-start;
    padding: 8px 12px;
    margin: 0;
  }
  .gw-sidebar--collapsed .gw-sidebar__copyright { opacity: 0.6; max-height: 40px; margin-top: 8px; padding: 10px 12px 0; border-color: var(--gw-sidebar-border); }
  .gw-sidebar--collapsed .gw-sidebar__toggle { flex-direction: row; }
  .gw-sidebar--collapsed .gw-sidebar__nav-item::after { display: none; }
  .gw-sidebar__collapse-btn { display: none !important; }
}

/* --- Right sidebar hidden + About nav visible below 899px --- */
@media (max-width: 899px) {
  .gw-main {
    margin-right: 0;
  }
  .gw-right-sidebar {
    display: none;
  }
  .gw-sidebar__about-item {
    display: list-item !important;
  }
}

/* --- Filters wrapper (inline on desktop) --- */
.gw-topbar__filters {
  display: contents; /* children flow normally in topbar on desktop */
}


/* Mobile: native-app-like experience (v2.28.0) */
@media (max-width: 767px) {

  /* --- Prevent horizontal overflow on mobile --- */
  html, body {
    overflow-x: hidden;
  }

  /* --- Phase 3: Topbar — compact height, scaled logo --- */
  body.gw-app-shell {
    --gw-topbar-height: 52px;
  }
  .gw-topbar {
    padding: 6px 12px;
  }
  .gw-topbar__logo,
  .gw-topbar__logo.x-small,
  .gw-topbar__logo.small,
  .gw-topbar__logo.regular,
  .gw-topbar__logo.large,
  .gw-topbar__logo.x-large,
  img.gw-topbar__logo[src$=".svg"] {
    height: 28px !important;
    max-height: 28px !important;
  }
  .gw-topbar__center {
    display: none;
  }

  /* Hide desktop-only items (moved to hamburger sidebar) */
  .gw-topbar__desktop-only {
    display: none !important;
  }

  /* Hide filter/sort text labels — icons only on mobile */
  .gw-topbar__btn-label {
    display: none;
  }

  /* Mobile auth buttons (logged-out) */
  .gw-topbar__auth-mobile {
    display: flex;
    gap: 6px;
    align-items: center;
  }
  /* Login button: outline style — accent border + text, transparent bg
     !important needed to override legacy `a { color:...!important }` in _head.php */
  .gw-topbar__auth-btn {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 6px 14px;
    border-radius: 50px;
    text-decoration: none !important;
    border: 1.5px solid var(--gw-accent);
    color: var(--gw-accent-text, var(--gw-accent)) !important;
    background: transparent !important;
    white-space: nowrap;
    min-height: 32px;
    display: flex;
    align-items: center;
    transition: background 0.15s, color 0.15s, filter 0.15s;
  }
  /* Login hover: fill accent bg, white text */
  .gw-topbar__auth-btn:hover {
    background: var(--gw-accent) !important;
    color: var(--gw-accent-font, #fff) !important;
    text-decoration: none !important;
  }
  /* Register button: solid accent bg, white text */
  .gw-topbar__auth-btn.gw-topbar__auth-btn--primary {
    background: var(--gw-accent) !important;
    color: var(--gw-accent-font, #fff) !important;
    border-color: var(--gw-accent);
  }
  /* Register hover: slightly darken */
  .gw-topbar__auth-btn.gw-topbar__auth-btn--primary:hover {
    filter: brightness(0.85);
    color: var(--gw-accent-font, #fff) !important;
    text-decoration: none !important;
  }

  /* Mobile user avatar (logged-in) */
  .gw-topbar__user-avatar-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    text-decoration: none;
  }
  .gw-topbar__user-avatar-mobile img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
  }
  .gw-topbar__user-avatar-mobile i {
    font-size: 1.5rem;
    color: var(--gw-accent-text, var(--gw-accent));
  }
  .gw-topbar__user-avatar-mobile .gw-avatar-initials--xs {
    width: 28px;
    height: 28px;
  }

  /* Push right group to far right on mobile */
  .gw-topbar__right {
    margin-left: auto;
  }

  /* Filters stay inline in topbar on mobile */
  .gw-topbar__filters {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  /* --- Phase 1: Touch targets — 44px minimum --- */
  .gw-topbar__hamburger {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  .gw-topbar__btn {
    padding: 10px 12px;
    font-size: 0.7rem;
    min-height: 44px;
  }
  .gw-topbar__icon-btn {
    width: 44px;
    height: 44px;
  }
  .gw-card__kebab-btn {
    width: 44px;
    height: 44px;
  }
  .gw-card__footer-btn {
    min-height: 44px;
    padding: 12px 0;
  }
  .gw-lightbox__close {
    width: 44px;
    height: 44px;
    font-size: 1.1rem;
  }
  .gw-lightbox__arrow {
    width: 44px;
    height: 44px;
    font-size: var(--gw-font-lg);
  }
  .gw-lightbox__arrow--prev { left: 8px; }
  .gw-lightbox__arrow--next { right: 8px; }
  .gw-sidebar__nav-item {
    min-height: 44px;
  }
  .gw-sidebar__bottom .gw-sidebar__nav-item {
    min-height: 44px;
    padding: 10px 12px;
  }

  /* --- Phase 2: Edge-to-edge cards --- */
  .gw-main {
    padding: 8px 0 0;
  }
  .gw-card {
    border-radius: 0;
  }
  .gw-card-col {
    margin-bottom: 12px;
  }
  .gw-card__image img {
    border-radius: 0;
  }

  /* Post bar keeps breathing room */
  .gw-postbar {
    margin: 12px;
    padding: 6px 6px 6px 14px;
    align-items: center; /* vertically center everything at single-line */
  }
  .gw-postbar--multiline {
    align-items: flex-start; /* top-align when textarea grows */
  }
  .gw-postbar--multiline .gw-postbar__icons {
    margin-top: 10px;
  }
  .gw-postbar--multiline .gw-postbar__btn {
    margin-top: 4px;
  }
  .gw-postbar__icons {
    margin-top: 0; /* override desktop 10px */
  }
  .gw-postbar__btn {
    margin-top: 0;
  }
  .gw-postbar__input {
    font-size: 0.8rem;
  }
  /* Prevent placeholder from wrapping on mobile — show ellipsis */
  .gw-postbar__input:placeholder-shown {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .gw-postbar__btn {
    padding: 8px 16px;
    font-size: 0.7rem;
    min-height: 44px;
  }
  .gw-postbar__char-count {
    margin-right: 12px;
  }

  /* --- Phase 4: Safe area support --- */
  .gw-topbar {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
  .gw-sidebar {
    padding-left: env(safe-area-inset-left);
  }
  body.gw-app-shell {
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* --- Phase 5: Body scroll lock on sidebar overlay --- */
  body.gw-sidebar-overlay {
    overflow: hidden;
  }

  /* --- Tighter card gap --- */
  body.gw-app-shell #response.row {
    gap: 12px;
  }
}

/* --- Disable hover effects on touch devices --- */
@media (hover: none) {
  .gw-card:hover {
    transform: none !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
  }
  .gw-card__footer-btn:hover {
    background: none;
    color: var(--gw-text-secondary);
  }
}

/* Full desktop: ensure hamburger stays hidden */
@media (min-width: 1200px) {
  .gw-topbar__hamburger {
    display: none !important;
  }
}


/* ============================================================
   NOTIFICATION BELL + DROPDOWN — Phase 8
   ============================================================ */
.gw-notif {
  position: relative;
}
.gw-notif--pulse {
  animation: gw-notif-pulse 0.8s ease-in-out 4;
  transform-origin: center;
}
@keyframes gw-notif-pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}
.gw-notif__bell {
  position: relative;
}
.gw-notif__badge {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  background: #fff;
  color: var(--gw-accent-text, var(--gw-accent));
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  border-radius: 50%;
  border: 2px solid var(--gw-topbar-bg);
  z-index: 10150;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.gw-notif__panel {
  position: absolute;
  top: 100%;
  right: 0;
  width: 340px;
  max-height: 420px;
  overflow-y: auto;
  background: var(--gw-card-bg);
  border: 1px solid var(--gw-topbar-border);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  z-index: 10250;
  margin-top: 8px;
}
.gw-notif__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--gw-topbar-border);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--gw-text-primary);
}
.gw-notif__mark-read {
  background: none;
  border: none;
  color: var(--gw-accent-text, var(--gw-accent));
  font-size: var(--gw-font-sm);
  cursor: pointer;
  padding: 0;
}
.gw-notif__mark-read:hover {
  text-decoration: underline;
}
.gw-notif__list {
  padding: 0;
}
/* 2.68.7 (C3): "Show older" at the foot of the list pages back through older notices. */
.gw-notif__older {
  display: block;
  width: 100%;
  padding: 10px 16px;
  background: none;
  border: none;
  color: var(--gw-accent-text, var(--gw-accent));
  font-size: var(--gw-font-sm);
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}
.gw-notif__older:hover {
  text-decoration: underline;
}
.gw-notif__older[aria-busy="true"] {
  opacity: 0.5;
  cursor: progress;
}
.gw-notif__empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--gw-text-secondary);
  font-size: var(--gw-font-base);
  margin: 0;
}
.gw-notif__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--gw-topbar-border);
  cursor: pointer;
  transition: background 0.15s;
}
.gw-notif__item:hover {
  background: var(--gw-sidebar-hover-bg, rgba(0,0,0,0.04));
}
.gw-notif__item--unread {
  border-left: 3px solid var(--gw-accent);
}
.gw-notif__item-avatar,
.gw-notif__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.gw-notif__item-body {
  flex: 1;
  min-width: 0;
}
.gw-notif__item-text {
  font-size: 0.8rem;
  color: var(--gw-text-primary);
  line-height: 1.35;
  margin: 0;
}
.gw-notif__item-text strong {
  font-weight: 600;
}
.gw-notif__item-time {
  font-size: 0.7rem;
  color: var(--gw-text-secondary);
  margin-top: 3px;
}
/* -- Notification verify/reject actions -- */
.gw-notif__actions {
  display: flex; gap: 6px; margin-top: 6px;
}
.gw-notif__btn {
  padding: 3px 10px; border-radius: 4px; border: none;
  font-size: 0.7rem; font-weight: 600; cursor: pointer;
}
.gw-notif__btn--verify {
  background: var(--gw-accent); color: var(--gw-accent-font, #fff);
}
.gw-notif__btn--verify:hover { opacity: 0.85; }
.gw-notif__btn--reject {
  background: var(--gw-border, #ddd); color: var(--gw-text-primary);
}
.gw-notif__btn--reject:hover { opacity: 0.85; }
.gw-notif__btn:disabled { opacity: 0.5; cursor: default; }
.gw-notif__status {
  font-size: 0.7rem; font-weight: 600;
  color: var(--gw-accent-text, var(--gw-accent)); margin-top: 4px;
}

/* ============================================================
   CARD COMPONENT — Phase 2
   ============================================================ */

/* -- Feed container layout -- */
body.gw-app-shell #response.row,
body.gw-app-shell .gw-wall-grid {
  display: block !important;
  flex-wrap: nowrap !important;
  margin: 0 !important;
}

body.gw-app-shell.feed #response.row,
body.gw-app-shell.feed .gw-wall-grid {
  max-width: var(--gw-feed-max-width, 580px);
  margin: 0 auto !important;
}

/* Detail/directory pages (term + person walls) honor the feed-width preset
   too, so the recipient header, photo gallery, and post grid form one
   centered column matching the main feed. The #gratitudeContainer /
   #staffGratContainer ID rules force `max-width: none !important`, so the
   grid override below must be ID-specific AND !important to win. (v2.54.1) */
body.gw-app-shell.feed .gw-recipient-header,
body.gw-app-shell.feed .gw-term-gallery {
  max-width: var(--gw-feed-max-width, 580px);
}
body.gw-app-shell.feed #gratitudeContainer.gw-wall-grid,
body.gw-app-shell.feed #staffGratContainer.gw-wall-grid {
  max-width: var(--gw-feed-max-width, 580px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.gw-app-shell.grid #response.row,
body.gw-app-shell.grid .gw-wall-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start; /* Cards size to their own content, not tallest in row */
  max-width: none;
}

/* Detail/directory pages (term + person walls) get a real grid in grid view
   too. Their card grid is #gratitudeContainer / #staffGratContainer, whose ID
   rules force `display:block !important; max-width:none !important; grid-
   template-columns:none !important`. Since !important beats specificity, EVERY
   property we're overriding (incl. grid-template-columns at all breakpoints)
   must also be !important — otherwise the grid keeps `grid-template-columns:
   none` and collapses to a full-width single column. (v2.55.2 / v2.56.1) */
body.gw-app-shell.grid #gratitudeContainer.gw-wall-grid,
body.gw-app-shell.grid #staffGratContainer.gw-wall-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px;
  align-items: start;
  max-width: none !important;
}
@media (max-width: 1199px) {
  body.gw-app-shell.grid #gratitudeContainer.gw-wall-grid,
  body.gw-app-shell.grid #staffGratContainer.gw-wall-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 767px) {
  body.gw-app-shell.grid #gratitudeContainer.gw-wall-grid,
  body.gw-app-shell.grid #staffGratContainer.gw-wall-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Override Bootstrap col-* on grid items in app shell */
body.gw-app-shell .grid-toggle,
body.gw-app-shell .grid-toggle[class*="col-"] {
  flex: none !important;
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* -- Card wrapper -- */
.gw-card-col {
  margin-bottom: 24px;
  width: 100%;
  overflow: visible;
}
/* Grid view: gap handles spacing, no margin needed */
body.gw-app-shell.grid .gw-card-col {
  margin-bottom: 0;
}

.gw-card {
  border-radius: 16px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  position: relative;
  transition: box-shadow var(--gw-transition), transform var(--gw-transition);
}
.gw-card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  transform: translateY(-2px);
}

/* -- Card link (lightbox trigger) -- */
.gw-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.gw-card__link:hover {
  text-decoration: none;
  color: inherit;
}

/* -- Card image -- */
.gw-card__image {
  width: 100%;
  padding-top: 75%; /* 4:3 — shows more of each image */
  background-size: cover;
  background-position: center center;
  background-color: #e0e0e0;
}

/* -- Privacy flag -- */
.gw-card .privacy-flag {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
}

/* -- Kebab menu -- */
.gw-card__kebab {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
}

.gw-card__kebab-btn {
  background: rgba(0,0,0,0.35);
  border: none;
  color: var(--gw-accent-text, var(--gw-accent));
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.gw-card__kebab-btn:hover {
  background: rgba(0,0,0,0.55);
}

.gw-card__kebab-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 160px;
  background: #ffffff;
  border: 1px solid #ebebeb;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  padding: 6px 0;
  z-index: 10;
}
.gw-card__kebab-menu--open {
  display: block;
}

.gw-card__kebab-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 14px;
  background: none;
  border: none;
  font-size: 0.8rem;
  color: var(--gw-text-primary);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}
.gw-card__kebab-menu button:hover {
  background: var(--gw-main-bg);
}
.gw-card__kebab-menu button i {
  width: 18px;
  text-align: center;
  color: var(--gw-text-secondary);
}

/* -- Card body -- */
.gw-card__body {
  padding: 16px 16px 8px;
}

.gw-card__recipient {
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: var(--gw-accent-text, var(--gw-accent));
  font-weight: 600;
  font-size: var(--gw-font-md);
  margin-bottom: 2px;
}
/* Hidden in feed/list view (sender already shown in footer with avatar).
   Visible only in grid view where footer is more compact. */
.gw-card__from { display: none; }
body.gw-app-shell.grid .gw-card__from {
  display: block;
  font-size: var(--gw-font-xs);
  color: var(--gw-text-secondary);
  margin-bottom: 6px;
}

/* -- Message + date on one row when no recipient -- */
.gw-card__message-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.gw-card__message-row .gw-card__message {
  flex: 1; min-width: 0;
}
.gw-card__message-row .gw-card__date {
  flex-shrink: 0;
}

.gw-card__message {
  color: var(--gw-text-secondary);
  font-size: var(--gw-font-base);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  white-space: normal;
}

/* -- Action bar (reactions + share combined) -- */
/* -- Combined sender + reactions row -- */
.gw-card__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 16px;
  border-top: 1px solid var(--gw-topbar-border, #ebebeb);
  background: rgba(0, 0, 0, 0.02);
}
html[data-theme="dark"] body.gw-app-shell .gw-card__actions {
  border-top-color: #333;
  background: rgba(255, 255, 255, 0.03);
}
.gw-card__actions .gw-card__sender {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  padding: 0;
  border-top: none;
}
.gw-card__actions .gw-card__reactions {
  margin-left: auto;
  padding: 2px 0 4px;
}
.gw-card__sender-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.gw-card__sender-name {
  font-size: 0.75rem;
  color: var(--gw-text-secondary);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* -- Comment + Share action buttons -- */
.gw-card__footer-actions {
  display: flex;
  border-top: 1px solid var(--gw-topbar-border, #ebebeb);
  background: rgba(0, 0, 0, 0.02);
}
.gw-card__footer-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 0;
  font-size: 0.85rem;
  color: var(--gw-text-secondary);
  cursor: pointer;
  background: none;
  border: none;
  transition: background 0.15s, color 0.15s;
  line-height: 1;
}
.gw-card__footer-btn:first-child {
  border-right: 1px solid var(--gw-topbar-border, #ebebeb);
}
.gw-card__footer-btn:hover {
  background: var(--gw-accent-20, rgba(201, 51, 88, 0.2));
  color: var(--gw-accent-hover, #A81C44);
}
html[data-theme="dark"] body.gw-app-shell .gw-card__footer-actions {
  border-top-color: #333;
  background: rgba(255, 255, 255, 0.03);
}
html[data-theme="dark"] body.gw-app-shell .gw-card__footer-btn:first-child {
  border-right-color: #333;
}

/* -- Text-only card variant -- */
/* -- Video card -- */
.gw-card__video-wrap {
  position: relative;
  width: 100%;
  background: #000;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
}
.gw-card__video {
  width: 100%;
  display: block;
  max-height: 400px;
  object-fit: cover;
}
.gw-card__play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  pointer-events: none;
}

/* -- Audio card -- */
.gw-card__audio-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  background: var(--gw-accent, #C93358);
  border-radius: 12px 12px 0 0;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
}
.gw-card__audio-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}
.gw-card__audio {
  width: 100%;
  max-width: 280px;
}

.gw-card--text-only .gw-card__text-hero {
  background: var(--gw-accent, #C93358);
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  padding: clamp(14px, 3vw, 20px) clamp(14px, 3vw, 20px);
  border-radius: 12px 12px 0 0;
  overflow: hidden;
}
.gw-card--text-only .gw-card__text-hero-msg {
  color: #fff;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 600;
  text-align: center;
  line-height: 1.5;
  margin: 0;
  word-break: break-word;
  white-space: normal;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  /* Clamp text — fewer lines at larger font fills 4:3 ratio better */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gw-card--text-only .gw-card__message {
  display: none;
}

/* -- Text-only lightbox media -- */
.gw-lightbox__media.gw-lightbox__media--text {
  background: var(--gw-accent, #C93358);
  display: flex;
  align-items: center;
  justify-content: center;
}
.gw-lightbox__text-hero {
  padding: 40px 32px;
  text-align: center;
  overflow-y: auto;
  max-height: 100%;
}
.gw-lightbox__text-hero p {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.6;
  margin: 0;
  word-break: break-word;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  /* Clamp to preview in lightbox media — match card preview */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* -- Text-only submission preview -- */
.gw-text-preview-hero {
  background: var(--gw-accent, #C93358);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  padding: 32px 24px;
  border-radius: 10px;
  margin-bottom: 12px;
}
.gw-text-preview-hero p {
  color: #fff;
  font-size: 1.25rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.5;
  margin: 0;
  word-break: break-word;
}

/* -- Reaction row (cards + lightbox shared button styles) -- */
.gw-card__reactions,
.gw-lightbox__reactions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.gw-card__reactions {
  padding: 2px 16px 4px;
}

.gw-lightbox__reactions {
  padding: 8px 20px 12px;
  flex-shrink: 0;
}

.gw-react-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 6px 10px;
  border-radius: 20px;
  cursor: pointer;
  font-size: var(--gw-font-sm, 0.85rem);
  color: var(--gw-text-secondary);
  transition: background 0.15s, color 0.15s;
  line-height: 1;
  position: relative;
}

/* 2.85.0 (C-P2-12, SC-066): the who-reacted tooltip is one real element (#gw-react-tip, gw-utils.js), shown on hover AND
   keyboard focus, hoverable and dismissible with Escape — the ::after version was hover-only and invisible to assistive
   technology. Positioned at the button's top centre (left / top set by the script). */
.gw-react-tip {
  position: absolute;
  transform: translate(-50%, -100%);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  white-space: pre-line;
  text-align: left;
  max-width: 260px;
  line-height: 1.6;
  background: var(--gw-text-primary, #222);
  color: #fff;
  /* Appended to <body>, so it must clear the whole lightbox stack (.gw-lightbox 1000000002, share popup / dialogs
     1000000010, mention preview 1000000020): reactions inside the lightbox show the tooltip too. */
  z-index: 1000000030;
}
.gw-react-tip[hidden] { display: none; }
html[data-theme="dark"] .gw-react-tip {
  background: #e0e0e0;
  color: #111;
}

.gw-react-btn i {
  font-size: 0.95rem;
}

.gw-react-btn span:empty {
  display: none;
}

.gw-react-btn:hover {
  background: var(--gw-accent-20, rgba(201, 51, 88, 0.2));
  color: var(--gw-accent-hover, #A81C44);
}

.gw-react-btn--active {
  color: var(--gw-accent-text, var(--gw-accent));
}

.gw-react-btn--active:hover {
  background: var(--gw-accent-25, rgba(201, 51, 88, 0.25));
  color: var(--gw-accent-hover, #A81C44);
}

html[data-theme="dark"] body.gw-app-shell .gw-react-btn:hover {
  background: var(--gw-accent-25, rgba(201, 51, 88, 0.25));
  color: #ffffff;
}

.gw-lightbox__reactions .gw-react-btn {
  font-size: var(--gw-font-base, 0.9rem);
}

.gw-lightbox__reactions .gw-react-btn i {
  font-size: 1.1rem;
}

/* -- Grid mode card adjustments -- */
body.gw-app-shell.grid .gw-card__image {
  padding-top: 100%; /* square for grid */
}

body.gw-app-shell.grid .gw-card__recipient {
  font-size: 0.8rem;
}

body.gw-app-shell.grid .gw-card__message {
  -webkit-line-clamp: 2;
  font-size: 0.8rem;
}

/* Grid mode: compact action bar & footer */
body.gw-app-shell.grid .gw-card__actions {
  padding: 4px 10px;
}
body.gw-app-shell.grid .gw-card__actions .gw-card__sender {
  display: none;
}
body.gw-app-shell.grid .gw-card__footer-btn span {
  display: none;
}
body.gw-app-shell.grid .gw-card__footer-btn {
  padding: 6px 0;
}

/* Disable hover transform in grid — prevents Safari columns repaint glitch */
body.gw-app-shell.grid .gw-card:hover {
  transform: none;
}

/* -- Responsive grid columns -- */
@media (max-width: 1199px) {
  body.gw-app-shell.grid #response.row,
  body.gw-app-shell.grid .gw-wall-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  body.gw-app-shell.grid #response.row,
  body.gw-app-shell.grid .gw-wall-grid {
    grid-template-columns: 1fr;
  }

  body.gw-app-shell.feed #response.row {
    max-width: 100%;
  }
}

/* ============================================================
   LIGHTBOX — Phase 5
   ============================================================ */
@keyframes gwFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes gwSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.gw-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000000002;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: gwFadeIn 0.2s ease;
}

.gw-lightbox__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.85);
}

.gw-lightbox__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(0,0,0,0.06);
  color: var(--gw-text-secondary);
  border: none;
  font-size: var(--gw-font-base);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s;
}
.gw-lightbox__close:hover { background: rgba(0,0,0,0.12); }
html[data-theme="dark"] body.gw-app-shell .gw-lightbox__close {
  background: rgba(255,255,255,0.1);
  color: #ccc;
}
html[data-theme="dark"] body.gw-app-shell .gw-lightbox__close:hover {
  background: rgba(255,255,255,0.18);
}

.gw-lightbox__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--gw-accent);
  color: var(--gw-accent-font, #ffffff);
  border: none;
  font-size: var(--gw-font-lg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transition: opacity 0.2s;
}
.gw-lightbox__arrow:hover { opacity: 0.85; }
.gw-lightbox__arrow--prev { left: 16px; }
.gw-lightbox__arrow--next { right: 16px; }

.gw-lightbox__content {
  position: relative;
  z-index: 2;
  max-width: 960px;
  width: 92%;
  height: 80vh;
  overflow: hidden;
  border-radius: 16px;
  background: var(--gw-card-bg, #ffffff);
  animation: gwSlideUp 0.25s ease;
  display: flex;
  flex-direction: row;
}

/* Dark mode lightbox content */
html[data-theme="dark"] body.gw-app-shell .gw-lightbox__content {
  background: #1e1e1e;
}

/* Left: image panel */
.gw-lightbox__media {
  width: 55%;
  height: 100%;
  background: #000;
  border-radius: 16px 0 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.gw-lightbox__image {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 0;
  object-fit: contain;
}

/* Right: content panel */
.gw-lightbox__panel {
  width: 45%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--gw-text-secondary) transparent;
}
.gw-lightbox__panel::-webkit-scrollbar { width: 6px; }
.gw-lightbox__panel::-webkit-scrollbar-track { background: transparent; }
.gw-lightbox__panel::-webkit-scrollbar-thumb { background: var(--gw-text-secondary); border-radius: 3px; }
.gw-lightbox__panel::-webkit-scrollbar-thumb:hover { background: var(--gw-accent); }

.gw-lightbox__panel-header {
  display: flex;
  flex-direction: column;
  padding: 16px 20px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--gw-topbar-border, #ebebeb);
}
html[data-theme="dark"] body.gw-app-shell .gw-lightbox__panel-header {
  border-bottom-color: #333;
}

.gw-lightbox__caption {
  padding: 16px 20px 40px;
  flex-shrink: 1;
  overflow-y: auto;
  min-height: 0;
  max-height: 37vh;
  position: relative;
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 98%);
  mask-image: linear-gradient(to bottom, #000 82%, transparent 98%);
}
/* Remove fade mask when content doesn't overflow */
.gw-lightbox__caption--short {
  -webkit-mask-image: none;
  mask-image: none;
}

.gw-lightbox__recipient {
  color: var(--gw-accent-text, var(--gw-accent));
  font-weight: 600;
  font-size: 1rem;
}
.gw-lightbox__sender {
  font-size: 0.85rem;
  color: var(--gw-text-secondary);
  margin-top: 2px;
  margin-bottom: 4px;
}

.gw-lightbox__message {
  color: var(--gw-text-secondary);
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 20px;
}

html[data-theme="dark"] body.gw-app-shell .gw-lightbox__message {
  color: #cccccc;
}

.gw-lightbox__share {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  border-top: 1px solid var(--gw-topbar-border, #ebebeb);
  border-bottom: 1px solid var(--gw-topbar-border, #ebebeb);
  flex-shrink: 0;
}

html[data-theme="dark"] body.gw-app-shell .gw-lightbox__share {
  border-top-color: #333;
  border-bottom-color: #333;
}

.gw-lightbox__share-label {
  color: var(--gw-accent-text, var(--gw-accent));
  font-weight: 600;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.gw-lightbox__share-icon {
  color: var(--gw-accent-text, var(--gw-accent));
  font-size: 1rem;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  transition: opacity 0.15s;
}
.gw-lightbox__share-icon:hover { opacity: 0.7; }

/* Scroll lock */
body.gw-lightbox-open {
  overflow: hidden !important;
}

/* Responsive lightbox — stack vertically on mobile */
@media (max-width: 767px) {
  .gw-lightbox__arrow {
    display: none !important;
  }
  .gw-lightbox__content {
    flex-direction: column;
    width: calc(100% - 24px);
    max-width: calc(100% - 24px);
    height: auto;
    max-height: 95vh;
    position: relative;
    overflow: hidden;
    will-change: transform;
  }
  .gw-lightbox__media {
    width: 100%;
    height: auto;
    max-height: 40vh;
    border-radius: 16px 16px 0 0;
    flex-shrink: 0;
  }
  .gw-lightbox__image {
    max-height: 40vh;
    width: 100%;
    object-fit: contain;
  }
  .gw-lightbox__panel {
    width: 100%;
    height: auto;
    max-height: 55vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
  }
  .gw-lightbox__close {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
    border-radius: 50%;
    background: rgba(0,0,0,0.5);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  }
  html[data-theme="dark"] body.gw-app-shell .gw-lightbox__close {
    background: rgba(0,0,0,0.6);
    color: #fff;
  }
  .gw-lightbox__panel-header {
    position: sticky;
    top: 0;
    background: var(--gw-card-bg, #ffffff);
    z-index: 2;
    padding: 10px 14px;
  }
  html[data-theme="dark"] body.gw-app-shell .gw-lightbox__panel-header {
    background: #1e1e1e;
  }
  .gw-lightbox__caption {
    padding: 10px 14px 40px;
    max-height: 18vh;
    overflow-y: auto;
    flex-shrink: 1;
    -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 98%);
    mask-image: linear-gradient(to bottom, #000 82%, transparent 98%);
  }
  .gw-lightbox__caption--short {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .gw-lightbox__message {
    font-size: 0.82rem;
  }
  .gw-lightbox__reactions {
    padding: 6px 14px;
  }
  .gw-lightbox__share {
    padding: 6px 14px;
  }
  .gw-lightbox__comments {
    padding: 0 14px 14px;
    min-height: 120px;
    flex: 1 1 auto;
  }
  .gw-lightbox__comment-avatar {
    width: 32px;
    height: 32px;
  }
  .gw-lightbox__comment-form {
    position: sticky;
    bottom: 0;
    background: var(--gw-card-bg, #ffffff);
    padding: 8px 14px;
    border-top: 1px solid var(--gw-topbar-border, #ebebeb);
    margin-top: 0;
    z-index: 3;
  }
  html[data-theme="dark"] body.gw-app-shell .gw-lightbox__comment-form {
    background: #1e1e1e;
    border-top-color: #333;
  }
  .gw-lightbox__comment-input {
    padding-right: 44px;
    font-size: 0.85rem;
    min-height: 36px;
  }
  .gw-lightbox__comment-btn {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    color: var(--gw-accent-text, var(--gw-accent));
    padding: 4px 8px;
    font-size: 1rem;
    border-radius: 0;
  }
}


/* -- Lightbox Comment Section (Phase 8H) -- */
.gw-lightbox__comments {
  padding: 0 20px 20px;
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 75px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.gw-lightbox__comments::-webkit-scrollbar { display: none; }

html[data-theme="dark"] body.gw-app-shell .gw-lightbox__comments {
  /* inherits panel background */
}

.gw-lightbox__comments-header {
  font-weight: 600;
  font-size: var(--gw-font-base);
  color: var(--gw-text-primary);
  padding: 14px 0 10px;
}

.gw-lightbox__comment-count {
  font-weight: 400;
  color: var(--gw-text-secondary);
  font-size: 0.8rem;
}

.gw-lightbox__comments-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gw-lightbox__comment {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.gw-lightbox__comment-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.gw-lightbox__comment-body {
  flex: 1;
  min-width: 0;
}

.gw-lightbox__comment-author {
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--gw-text-primary);
  margin-right: 6px;
}

.gw-lightbox__comment-date {
  font-size: 0.7rem;
  color: var(--gw-text-secondary);
}

.gw-lightbox__comment-text {
  font-size: 0.8rem;
  color: var(--gw-text-secondary);
  line-height: 1.45;
  margin-top: 2px;
}

html[data-theme="dark"] body.gw-app-shell .gw-lightbox__comment-text {
  color: #bbb;
}

.gw-lightbox__comment-delete {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 2px 4px;
  cursor: pointer;
  color: var(--gw-text-secondary);
  opacity: 0.5;
  font-size: 0.75rem;
  line-height: 1;
  transition: opacity 0.15s ease, color 0.15s ease;
}

.gw-lightbox__comment-delete:hover {
  opacity: 1;
  color: #e2405a;
}

/* 2.82.1 (YS-COMM-4): report a comment — same quiet control, a 24px target. */
.gw-lightbox__comment-report {
  flex-shrink: 0;
  background: none;
  border: none;
  min-width: 24px;
  min-height: 24px;
  padding: 2px 4px;
  cursor: pointer;
  color: var(--gw-text-secondary);
  opacity: 0.6;
  font-size: 0.75rem;
  line-height: 1;
}

.gw-lightbox__comment-report:hover,
.gw-lightbox__comment-report:focus-visible {
  opacity: 1;
}

/* 2.85.1: the comment-report dialog (gwReportComment) — above the lightbox (1000000002). */
.gw-lightbox__comment-report[aria-disabled="true"] {
  opacity: 0.35;
  cursor: default;
}
.gw-comment-report__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000000020;
}
.gw-comment-report__panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 440px;
  box-sizing: border-box;
  padding: 24px;
  border-radius: 14px;
  background: var(--gw-card-bg, #fff);
  color: var(--gw-text-primary, #1d2327);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  z-index: 1000000021;
}
.gw-comment-report__title {
  margin: 0 0 12px;
  font-size: 1.1rem;
  font-weight: 700;
}
.gw-comment-report__label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
}
.gw-comment-report__hint {
  margin: 2px 0 8px;
  font-size: 0.8rem;
  color: var(--gw-text-secondary, #595959);
}
.gw-comment-report__reason {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  /* 2.85.1 (review): --gw-border is #ddd / #444 — 1.4:1, under the 3:1 a form control's edge needs (WCAG 1.4.11). */
  border: 1px solid var(--gw-text-tertiary, #707070);
  border-radius: 8px;
  background: var(--gw-input-bg, #fff);
  color: inherit;
  /* 16px at least: iPhone Safari zooms the page into a focused field set smaller, and this one is focused on open. */
  font-size: max(16px, 0.85rem);
}
.gw-comment-report__status {
  min-height: 1.2em;
  margin: 8px 0 12px;
  font-size: 0.8rem;
}
.gw-comment-report__status--error {
  color: #721c24;
}
html[data-theme="dark"] .gw-comment-report__status--error {
  color: #f5a0a8;
}
.gw-comment-report__actions {
  display: flex;
  gap: 10px;
}
.gw-comment-report__actions button {
  flex: 1;
  min-height: 44px; /* the theme's touch target on phones */
  padding: 10px;
  border: none;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.gw-comment-report__send {
  background: var(--gw-accent, #C93358);
  color: var(--gw-accent-font, #fff);
}
.gw-comment-report__send:disabled {
  opacity: 0.5;
  cursor: default;
}
.gw-comment-report__cancel {
  background: var(--gw-border, #eee);
  color: var(--gw-text-primary, #333);
}

.gw-lightbox__comment-pending {
  font-size: 0.78rem;
  color: var(--gw-text-secondary);
  font-style: italic;
  margin-top: 8px;
}

.gw-lightbox__comment-form {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  align-items: flex-end;
}

.gw-lightbox__comment-input {
  flex: 1;
  border: 1px solid var(--gw-topbar-border, #ddd);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.8rem;
  resize: none;
  background: var(--gw-main-bg, #f5f5f5); /* 2.68.7 (C5): the page colour the palette sets (--gw-bg was declared nowhere, so it stayed #f5f5f5 under the palette's text colour) */
  color: var(--gw-text-primary);
  font-family: inherit;
}

html[data-theme="dark"] body.gw-app-shell .gw-lightbox__comment-input {
  background: #2a2a2a;
  border-color: #444;
  color: #eee;
}

.gw-lightbox__comment-input:focus {
  outline: none;
  border-color: var(--gw-accent);
}

.gw-lightbox__comment-btn {
  background: var(--gw-accent);
  color: var(--gw-accent-font, #fff);
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s;
}

.gw-lightbox__comment-btn:hover {
  opacity: 0.85;
}

/* -- Hide old card elements in app shell -- */
body.gw-app-shell .gratitude-lightbox-wrapper .icon-wrapper-circle,
body.gw-app-shell .gratitude-lightbox-wrapper h6.text-uppercase,
body.gw-app-shell .gratitude-lightbox-wrapper .report-wrap,
body.gw-app-shell .gratitude-lightbox-wrapper .tipping-wrap,
body.gw-app-shell .gratitude-lightbox-wrapper .share-link {
  display: none !important;
}


/* ============================================================
   DIRECTORY PAGES — App Shell Integration
   Staff, User, Senior, Memory, Message directories.
   ============================================================ */

/* Reset the old 3-col grid layout in app shell */
body.gw-app-shell div#staff-directory {
  display: block !important;
  grid-template-columns: none !important;
  max-width: 960px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
}

/* Show the filter sidebar inline */
body.gw-app-shell #staff-directory > .container#leftSidebar {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
}

/* Hide old grid/list toggle — app shell has its own */
body.gw-app-shell #staff-directory #toggleContainer {
  display: none !important;
}

/* Hide sidebar feed/grid toggle on directory pages (fixed grid layout) */
body.gw-app-shell.page-template-staff-directory .gw-sidebar__toggle,
body.gw-app-shell.page-template-memories-directory .gw-sidebar__toggle,
body.gw-app-shell.page-template-user-directory .gw-sidebar__toggle,
body.gw-app-shell.page-template-senior-directory .gw-sidebar__toggle {
  display: none !important;
}

/* Hide the legacy form — compact toolbar handles it */
body.gw-app-shell #staff-directory form#filter.gw-staff-hidden-form {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  padding: 0 !important;
  margin: -1px !important;
}

/* Compact toolbar */
body.gw-app-shell .gw-staff-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 0 20px;
}

body.gw-app-shell .gw-staff-toolbar select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--gw-card-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E") no-repeat right 12px center;
  border: 1px solid var(--gw-topbar-border);
  border-radius: 50px;
  padding: 7px 32px 7px 16px;
  font-size: var(--gw-font-sm);
  color: var(--gw-text-primary);
  cursor: pointer;
  transition: border-color var(--gw-transition);
  min-width: 180px;
}

body.gw-app-shell .gw-staff-toolbar select:hover,
body.gw-app-shell .gw-staff-toolbar select:focus {
  border-color: var(--gw-accent);
  outline: none;
}

body.gw-app-shell .gw-staff-sort-group {
  display: flex;
  gap: 0;
  border: 1px solid var(--gw-topbar-border);
  border-radius: 50px;
  overflow: hidden;
}

body.gw-app-shell .gw-staff-sort-btn {
  background: var(--gw-card-bg);
  border: none;
  padding: 7px 14px;
  font-size: var(--gw-font-sm);
  color: var(--gw-text-secondary);
  cursor: pointer;
  transition: background var(--gw-transition), color var(--gw-transition);
  white-space: nowrap;
}

body.gw-app-shell .gw-staff-sort-btn:first-child {
  border-right: 1px solid var(--gw-topbar-border);
}

body.gw-app-shell .gw-staff-sort-btn--active {
  background: var(--gw-accent);
  color: var(--gw-accent-font, #fff);
}

body.gw-app-shell .gw-staff-sort-btn:hover:not(.gw-staff-sort-btn--active) {
  background: var(--gw-sidebar-hover-bg);
}

/* Dark mode toolbar */
html[data-theme="dark"] body.gw-app-shell .gw-staff-toolbar select {
  background-color: var(--gw-card-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23aaa'/%3E%3C/svg%3E");
}
html[data-theme="dark"] body.gw-app-shell .gw-staff-sort-btn {
  background: var(--gw-card-bg);
}

/* Directory feed container */
body.gw-app-shell #staff-directory #feedContainer {
  max-width: 100% !important;
  padding: 0 !important;
}

body.gw-app-shell #staff-directory #response.row {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 0 !important;
  max-width: none !important;
}

/* Override Bootstrap col-* so cards fill their CSS grid cell. Applies to
   both users mode and terms mode (terms mode mirrors the users-mode card
   design as of v2.49.0). */
body.gw-app-shell #staff-directory .staffPhotoWrapper,
body.gw-app-shell #staff-directory .staffPhotoWrapper[class*="col-"] {
  flex: none !important;
  max-width: none !important;
  width: 100% !important;
  min-height: auto !important;
  border-radius: 12px !important;
  background: var(--gw-card-bg);
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  padding: 0 !important;
  margin-bottom: 0 !important;
  overflow: hidden;
  transition: box-shadow var(--gw-transition), transform var(--gw-transition);
}

body.gw-app-shell #staff-directory .staffPhotoWrapper:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  transform: translateY(-2px);
}

/* Accent band at top of card */
body.gw-app-shell #staff-directory .gw-staff-accent {
  height: 4px;
  background: var(--gw-accent);
  border-radius: 12px 12px 0 0;
}

/* Circular avatar area */
body.gw-app-shell #staff-directory .gw-staff-avatar-wrap {
  display: flex;
  justify-content: center;
  padding: 20px 0 12px;
}

body.gw-app-shell #staff-directory .gw-staff-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--gw-accent);
}

body.gw-app-shell #staff-directory .gw-staff-initials {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gw-accent-font, #fff);
  background: var(--gw-accent);
  letter-spacing: 1px;
}

/* Hide old headshot remnant in USERS mode only — terms mode uses .staff-headshot
   as the active term thumbnail and must stay visible. */
body.gw-app-shell #staff-directory.gw-dir-users .staff-headshot {
  display: none !important;
}

body.gw-app-shell #staff-directory .staffName {
  font-size: var(--gw-font-base);
  font-weight: 600;
  color: var(--gw-text-primary);
  margin: 0 14px 2px;
  text-align: center;
}

body.gw-app-shell #staff-directory .staffTitle {
  font-size: var(--gw-font-sm);
  color: var(--gw-text-secondary);
  margin: 0 14px 14px;
  font-weight: 400;
  text-align: center;
}

body.gw-app-shell #staff-directory .mobile-buttons {
  display: flex;
  gap: 8px;
  padding: 0 14px 14px;
}

body.gw-app-shell #staff-directory .mobile-buttons .btn {
  flex: 1;
  padding: 6px 10px;
  font-size: var(--gw-font-sm);
  border-radius: 50px;
  text-align: center;
  border: 1px solid var(--gw-topbar-border);
  color: var(--gw-text-primary);
  background: transparent;
  text-decoration: none;
  transition: background var(--gw-transition), color var(--gw-transition), border-color var(--gw-transition), opacity var(--gw-transition);
}

body.gw-app-shell #staff-directory .mobile-buttons .btn:hover {
  background: var(--gw-accent);
  color: var(--gw-accent-font, #fff);
  border-color: var(--gw-accent);
}

/* Dark mode directory cards */
html[data-theme="dark"] body.gw-app-shell #staff-directory .staffPhotoWrapper {
  background: var(--gw-card-bg);
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
html[data-theme="dark"] body.gw-app-shell #staff-directory .mobile-buttons .btn {
  border-color: var(--gw-sidebar-border);
  background: transparent;
  color: var(--gw-text-primary);
}

/* Responsive directory grid */
@media (max-width: 1199px) {
  body.gw-app-shell #staff-directory #response.row {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 767px) {
  body.gw-app-shell #staff-directory #response.row {
    grid-template-columns: 1fr;
  }
}

/* Search results header */
body.gw-app-shell .gw-search-header {
  text-align: center;
  padding: 4px 0 12px;
}
body.gw-app-shell .gw-search-header h2 {
  font-size: var(--gw-font-lg);
  font-weight: 600;
  color: var(--gw-text-primary);
  margin: 0;
}
body.gw-app-shell .gw-search-header h2 span {
  color: var(--gw-accent-text, var(--gw-accent));
}

/* Search empty state */
body.gw-app-shell .gw-search-empty {
  text-align: center;
  padding: 80px 20px;
  color: var(--gw-text-secondary);
  grid-column: 1 / -1;
}
body.gw-app-shell .gw-search-empty i {
  font-size: 2.5rem;
  margin-bottom: 16px;
  display: block;
}
body.gw-app-shell .gw-search-empty h3 {
  font-size: var(--gw-font-lg);
  color: var(--gw-text-primary);
  margin-bottom: 8px;
}
body.gw-app-shell .gw-search-empty p {
  font-size: var(--gw-font-base);
  margin: 0;
}

/* Search results — section headers */
body.gw-app-shell .gw-search-section-header {
  font-size: var(--gw-font-lg);
  font-weight: 600;
  color: var(--gw-text-primary);
  padding: 4px 0 0;
  margin: 0;
}
body.gw-app-shell .gw-search-section-header--border {
  border-top: 1px solid var(--gw-topbar-border);
  margin-top: 24px;
  padding-top: 24px;
}

/* Search results — 2.68.7 (C1f): the note under a staff list cut at the cap */
body.gw-app-shell .gw-search-refine {
  text-align: center;
  font-size: var(--gw-font-base);
  color: var(--gw-text-secondary);
  margin: 16px 0 0;
}

/* Search results — gratitude cards */
body.gw-app-shell .gw-search-grat-list {
  padding: 12px 0 0;
}
body.gw-app-shell .gw-search-grat-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: var(--gw-card-bg);
  border-radius: 12px;
  margin-bottom: 12px;
  border: 1px solid var(--gw-topbar-border);
  text-decoration: none;
  color: var(--gw-text-primary);
  transition: border-color var(--gw-transition), box-shadow var(--gw-transition);
}
body.gw-app-shell .gw-search-grat-card:hover {
  border-color: var(--gw-accent);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  text-decoration: none;
  color: var(--gw-text-primary);
}
body.gw-app-shell .gw-search-grat-card__thumb {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--gw-main-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
body.gw-app-shell .gw-search-grat-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body.gw-app-shell .gw-search-grat-card__thumb i {
  font-size: 1.2rem;
  color: var(--gw-accent-text, var(--gw-accent));
}
body.gw-app-shell .gw-search-grat-card__body {
  flex: 1;
  min-width: 0;
}
body.gw-app-shell .gw-search-grat-card__body h5 {
  font-size: var(--gw-font-base);
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--gw-text-primary);
}
body.gw-app-shell .gw-search-grat-card__body p {
  font-size: var(--gw-font-sm);
  color: var(--gw-text-secondary);
  margin: 0;
  line-height: 1.4;
}
body.gw-app-shell .gw-search-grat-card__sender {
  font-size: 0.7rem;
  color: var(--gw-text-secondary);
  margin-top: 4px;
  display: block;
}

/* Live search dropdown */
.gw-search__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--gw-card-bg);
  border: 1px solid var(--gw-topbar-border);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  margin-top: 4px;
  z-index: 10200;
  max-height: 400px;
  overflow-y: auto;
  display: none;
}
.gw-search__dropdown-section {
  padding: 8px 0;
}
.gw-search__dropdown-section + .gw-search__dropdown-section {
  border-top: 1px solid var(--gw-topbar-border);
}
.gw-search__dropdown-label {
  padding: 4px 16px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gw-text-secondary);
  font-weight: 600;
}
.gw-search__dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  text-decoration: none;
  color: var(--gw-text-primary);
  transition: background var(--gw-transition);
}
.gw-search__dropdown-item:hover,
.gw-search__dropdown-item--active {
  background: var(--gw-main-bg);
  text-decoration: none;
  color: var(--gw-text-primary);
}
.gw-search__dropdown-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.gw-search__dropdown-initials {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--gw-accent);
  color: var(--gw-accent-font, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 600;
  flex-shrink: 0;
}
.gw-search__dropdown-item div {
  min-width: 0;
  flex: 1;
}
.gw-search__dropdown-item strong {
  display: block;
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gw-search__dropdown-item small {
  display: block;
  font-size: 0.75rem;
  color: var(--gw-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gw-search__dropdown-all {
  display: block;
  text-align: center;
  padding: 10px;
  font-size: 0.8rem;
  color: var(--gw-accent-text, var(--gw-accent));
  font-weight: 600;
  border-top: 1px solid var(--gw-topbar-border);
  text-decoration: none;
}
.gw-search__dropdown-all:hover {
  background: var(--gw-main-bg);
  text-decoration: none;
  color: var(--gw-accent-text, var(--gw-accent));
}
.gw-search__dropdown-empty {
  text-align: center;
  padding: 16px;
  color: var(--gw-text-secondary);
  font-size: 0.85rem;
}

/* Generic pages in app shell — consistent spacing */
body.gw-app-shell .gw-main > .container {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}


/* ============================================================
   CONTENT PAGES — Privacy, Terms, Community Guidelines, FAQs
   Card-wrapped, constrained-width prose within the app shell.
   ============================================================ */

body.gw-app-shell .gw-content-page {
  max-width: 800px;
  margin: 2rem auto;
  background: var(--gw-card-bg);
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  padding: 2.5rem 2.5rem 2rem;
}

/* Page title */
body.gw-app-shell .gw-content-page__title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--gw-text-primary);
  margin: 0 0 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--gw-sidebar-border);
}

/* Hide the first content H1 when it duplicates the page title */
body.gw-app-shell .gw-content-page__title + h1 { display: none; }

/* Prose typography */
body.gw-app-shell .gw-content-page h1 { font-size: 1.5rem; font-weight: 800; margin: 1.5rem 0 0.75rem; color: var(--gw-text-primary); }
body.gw-app-shell .gw-content-page h2 { font-size: 1.2rem; font-weight: 700; margin: 1.5rem 0 0.5rem; color: var(--gw-text-primary); }
body.gw-app-shell .gw-content-page h3 { font-size: 1.05rem; font-weight: 700; margin: 1.25rem 0 0.5rem; color: var(--gw-text-primary); }
body.gw-app-shell .gw-content-page h4,
body.gw-app-shell .gw-content-page h5,
body.gw-app-shell .gw-content-page h6 { font-size: 0.95rem; font-weight: 700; margin: 1rem 0 0.4rem; color: var(--gw-text-primary); }

body.gw-app-shell .gw-content-page p {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--gw-text-primary);
  margin: 0 0 1rem;
}

body.gw-app-shell .gw-content-page ul,
body.gw-app-shell .gw-content-page ol {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--gw-text-primary);
  padding-left: 1.5rem;
  margin: 0 0 1rem;
}

body.gw-app-shell .gw-content-page li { margin-bottom: 0.35rem; }

body.gw-app-shell .gw-content-page a {
  color: var(--gw-accent-text, var(--gw-accent));
  text-decoration: none;
}
body.gw-app-shell .gw-content-page a:hover { text-decoration: underline; }

body.gw-app-shell .gw-content-page img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 0.5rem 0;
}

body.gw-app-shell .gw-content-page hr {
  border: none;
  border-top: 1px solid var(--gw-sidebar-border);
  margin: 1.5rem 0;
}

body.gw-app-shell .gw-content-page strong { color: var(--gw-text-primary); }

/* Responsive */
@media (max-width: 767px) {
  body.gw-app-shell .gw-content-page {
    margin: 1rem;
    padding: 1.5rem 1.25rem;
  }
}


/* ============================================================
   STATUS PAGES — Thank You, Profile Updated
   Centered card with heading + action buttons.
   ============================================================ */

body.gw-app-shell .gw-status-page {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 3rem 1rem;
}

body.gw-app-shell .gw-status-page__card {
  text-align: center;
  max-width: 480px;
  width: 100%;
  background: var(--gw-card-bg);
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  padding: 2.5rem 2rem 2rem;
}

body.gw-app-shell .gw-status-page__heading {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--gw-text-primary);
  margin: 0 0 0.75rem;
}

body.gw-app-shell .gw-status-page__text {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--gw-text-secondary);
  margin: 0 0 1.75rem;
}

body.gw-app-shell .gw-status-page__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body.gw-app-shell .gw-status-page__btn {
  display: block;
  padding: 12px 20px;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-align: center;
  border: 2px solid var(--gw-sidebar-border);
  background: transparent;
  color: var(--gw-text-primary);
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
body.gw-app-shell .gw-status-page__btn:hover {
  border-color: var(--gw-accent);
  color: var(--gw-accent-text, var(--gw-accent));
  text-decoration: none;
}

/* Accent variant (Donate) */
body.gw-app-shell .gw-status-page__btn--accent {
  background: var(--gw-accent);
  border-color: var(--gw-accent);
  color: var(--gw-accent-font, #fff);
}
body.gw-app-shell .gw-status-page__btn--accent:hover {
  background: var(--gw-accent-hover, #A81C44);
  border-color: var(--gw-accent-hover, #A81C44);
  color: var(--gw-accent-hover-font, #fff);
}


/* ============================================================
   RECIPIENT PROFILE PAGE — /recipients/username/
   Profile header card + gratitude grid below.
   ============================================================ */

body.gw-app-shell #staffGratContainer { padding-top: 0; }

/* Profile header card */
body.gw-app-shell .gw-recipient-header {
  max-width: 800px;
  margin: 2rem auto 1.5rem;
  background: var(--gw-card-bg);
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  padding: 2rem;
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}

body.gw-app-shell .gw-recipient-header__avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--gw-sidebar-border);
}

body.gw-app-shell .gw-recipient-header__info {
  flex: 1;
  min-width: 0;
}

body.gw-app-shell .gw-recipient-header__name {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--gw-text-primary);
  margin: 0 0 2px;
}

body.gw-app-shell .gw-recipient-header__dept {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gw-accent-text, var(--gw-accent));
  margin: 0 0 2px;
}

body.gw-app-shell .gw-recipient-header__title {
  font-size: 0.85rem;
  font-style: italic;
  color: var(--gw-text-secondary);
  margin: 0 0 8px;
}

body.gw-app-shell .gw-recipient-header__bio {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--gw-text-secondary);
  margin: 0 0 1rem;
}

body.gw-app-shell .gw-recipient-header__cta {
  display: inline-block;
  padding: 10px 24px;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  background: var(--gw-accent);
  color: var(--gw-accent-font, #fff) !important;
  transition: background 0.2s, opacity 0.2s;
}
body.gw-app-shell .gw-recipient-header__cta:hover {
  background: var(--gw-accent); /* keep resting color on hover — no flip, just a subtle dim */
  color: var(--gw-accent-font, #fff) !important;
  opacity: 0.6;
  text-decoration: none;
}

/* Recipient not found */
body.gw-app-shell .gw-recipient-notfound {
  max-width: 480px;
  margin: 3rem auto;
  text-align: center;
  background: var(--gw-card-bg);
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  padding: 2.5rem 2rem;
}
body.gw-app-shell .gw-recipient-notfound h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gw-text-primary);
  margin: 0;
}

/* Gratitude grid below the profile */
body.gw-app-shell #staffGratContainer .container { max-width: 800px; }
body.gw-app-shell #staffGratContainer .gratitude-lightbox-wrapper {
  border-radius: 12px;
  overflow: hidden;
}

@media (max-width: 767px) {
  body.gw-app-shell .gw-recipient-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 1rem;
    padding: 1.5rem;
  }
  body.gw-app-shell .gw-recipient-header__cta { width: 100%; text-align: center; }
}


/* ============================================================
   SUBMISSION PAGE — Modern form styling within app shell
   ============================================================ */

/* Hide slideshow column inside app shell (redundant once user is logged in) */
body.gw-app-shell #submissionContainer > .row > .col-md-6:first-child {
  display: none;
}

/* Center the form column as a card */
body.gw-app-shell #submissionContainer > .row > .col-md-6:last-child {
  flex: 0 0 100%;
  max-width: 600px;
  margin: 0 auto;
}

body.gw-app-shell #submissionContainer {
  max-width: 700px;
  margin: 2rem auto;
  padding: 0;
}

body.gw-app-shell #submissionContainer .px-4 {
  background: var(--gw-card-bg);
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  padding: 2rem !important;
}

/* Form heading */
body.gw-app-shell .form-signin h1.h3 {
  color: var(--gw-text-primary);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

/* Form labels */
body.gw-app-shell .form-signin label {
  color: var(--gw-text-secondary);
  font-size: 0.85rem;
  font-weight: 600;
}

/* Form inputs and selects */
body.gw-app-shell .form-signin .form-control {
  background: var(--gw-card-bg);
  border: 1px solid var(--gw-sidebar-border);
  border-radius: 8px;
  color: var(--gw-text-primary);
  padding: 10px 14px;
  font-size: 0.9rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}

/* Select dropdowns need explicit height to prevent text cutoff */
body.gw-app-shell .form-signin select.form-control {
  height: auto;
  min-height: 44px;
  padding: 10px 14px;
  line-height: 1.4;
}

body.gw-app-shell .form-signin .form-control:focus {
  border-color: var(--gw-accent);
  box-shadow: 0 0 0 3px var(--gw-accent-15, rgba(201,51,88,0.15)); /* 2.75.2: follows the accent (was a fixed pre-2.68 pink) */
  outline: none;
}

/* Media icon row — flexbox, equal width, no truncation */
body.gw-app-shell #iconsContainer {
  display: flex !important;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 12px;
}

body.gw-app-shell #iconsContainer > div[class*="col"] {
  flex: 1 1 0;
  max-width: none;
  width: auto;
  padding: 0;
  margin-bottom: 0 !important;
}

/* Media icon buttons */
body.gw-app-shell #iconsContainer .icon-wrapper {
  background: var(--gw-accent-10, rgba(201,51,88,0.1)); /* 2.75.2: follows the accent */
  border: none;
  color: var(--gw-accent-text, var(--gw-accent));
  border-radius: 12px;
  padding: 16px 8px;
  transition: background 0.15s, transform 0.15s;
  cursor: pointer;
  white-space: nowrap;
  width: 100%;
}

body.gw-app-shell #iconsContainer .icon-wrapper:hover {
  background: var(--gw-accent-20, rgba(201,51,88,0.2)); /* 2.75.2: follows the accent */
  transform: translateY(-2px);
  color: var(--gw-accent-text, var(--gw-accent));
}

body.gw-app-shell #iconsContainer .icon-wrapper i {
  font-size: 1.5rem !important;
  color: var(--gw-accent-text, var(--gw-accent));
}

body.gw-app-shell #iconsContainer .icon-wrapper span {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--gw-text-secondary);
  background: transparent;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  border: none;
}

body.gw-app-shell #iconsContainer .icon-wrapper.selected,
body.gw-app-shell #iconsContainer .icon-wrapper.selected span {
  background: var(--gw-accent);
  color: var(--gw-accent-font, #ffffff);
}

body.gw-app-shell #iconsContainer .icon-wrapper.selected i {
  color: var(--gw-accent-font, #ffffff);
}

/* Preview button */
body.gw-app-shell #previewBtn {
  margin-top: 16px;
  background: var(--gw-accent);
  color: var(--gw-accent-font, #ffffff);
  border: none;
  border-radius: 50px;
  padding: 12px 32px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: opacity 0.15s, transform 0.15s;
}

body.gw-app-shell #previewBtn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  color: var(--gw-accent-font, #ffffff);
}

/* Progress bar */
body.gw-app-shell #movProg {
  border-radius: 8px;
  overflow: hidden;
  border-color: var(--gw-sidebar-border);
}

body.gw-app-shell #movProg .progress-bar {
  background: var(--gw-accent);
}

/* Footer info text */
body.gw-app-shell #submissionContainer small,
body.gw-app-shell #submissionContainer .d-inline-block,
body.gw-app-shell #submissionContainer > .row span {
  color: var(--gw-text-secondary);
}

body.gw-app-shell #submissionContainer hr {
  border-color: var(--gw-sidebar-border);
}

/* Dark mode: submission card shadow */
html[data-theme="dark"] body.gw-app-shell #submissionContainer .px-4 {
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

/* Registration form — same card treatment */
body.gw-app-shell #regFormWrap {
  margin-left: 0;
  margin-right: 0;
  padding: 0 20px;
}
body.gw-app-shell #regFormWrap .form-signin {
  background: var(--gw-card-bg);
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  padding: 2rem;
  width: 100%;
  max-width: 620px;
  margin: 2rem auto;
  /* Override Bootstrap col-sm-5 which constrains to 41.67% */
  flex: 0 0 100%;
}

body.gw-app-shell #regFormWrap .form-signin h1.h3 {
  color: var(--gw-text-primary);
  font-size: 1.5rem;
  font-weight: 700;
}

body.gw-app-shell #regFormWrap .form-signin label {
  color: var(--gw-text-secondary);
  font-size: 0.85rem;
  font-weight: 600;
}

body.gw-app-shell #regFormWrap .form-signin .form-control {
  background: var(--gw-card-bg);
  border: 1px solid var(--gw-sidebar-border);
  border-radius: 8px;
  color: var(--gw-text-primary);
  padding: 10px 14px;
  font-size: 0.9rem;
}

body.gw-app-shell #regFormWrap .form-signin .form-control:focus {
  border-color: var(--gw-accent);
  box-shadow: 0 0 0 3px var(--gw-accent-15, rgba(201,51,88,0.15)); /* 2.75.2: follows the accent (was a fixed pre-2.68 pink) */
  outline: none;
}

body.gw-app-shell #regFormWrap .form-signin .btn-primary {
  background: var(--gw-accent);
  border-color: var(--gw-accent);
  color: var(--gw-accent-font, #ffffff);
  border-radius: 50px;
  padding: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

body.gw-app-shell #regFormWrap .form-signin .btn-primary:hover {
  opacity: 0.9;
}

body.gw-app-shell #regFormWrap .form-signin small,
body.gw-app-shell #regFormWrap .form-signin span {
  color: var(--gw-text-secondary);
}

body.gw-app-shell #regFormWrap .form-signin a {
  color: var(--gw-accent-text, var(--gw-accent));
}

html[data-theme="dark"] body.gw-app-shell #regFormWrap .form-signin {
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

/* ==========================================================================
   2.71.0 — Account tabs (Profile · Alerts · My posts) and the Alerts card
   Matches the profile card (#regFormWrap .form-signin): 16px radius, soft shadow, 620px column.
   ========================================================================== */
.gw-account-nav {
  max-width: 620px;
  margin: 1.5rem auto 0;
  padding: 0 20px;
}
.gw-account-nav__list {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--gw-card-bg, #fff);
  border: 1px solid var(--gw-border, #ddd);
  border-radius: 999px;
}
.gw-account-nav__item { flex: 1 1 0; margin: 0; }
.gw-account-nav__link {
  display: block;
  text-align: center;
  padding: 10px 12px;
  min-height: 44px;
  border-radius: 999px;
  color: var(--gw-text-secondary, #6b6b6b);
  font-weight: 600;
  font-size: var(--gw-font-md, 0.95rem);
  text-decoration: none;
  transition: background var(--gw-transition, 0.2s ease), color var(--gw-transition, 0.2s ease);
}
.gw-account-nav__link:hover { background: var(--gw-sidebar-hover-bg, #f5f5f5); color: var(--gw-text-primary, #2d2d2d); text-decoration: none; }
.gw-account-nav__link.is-current,
.gw-account-nav__link.is-current:hover { background: var(--gw-accent, #C93358); color: var(--gw-accent-font, #fff) !important; } /* over _head.php's a { color: … !important } */
.gw-account-nav__link:focus-visible { outline: 3px solid var(--gw-focus, #1a1a1a); outline-offset: 2px; }

.gw-account-wrap { padding: 0 20px; }
/* The Alerts card is a <form>: the theme's legacy `form span { text-align:center; margin-top:10px; font:14px Lato; … }`
   would centre its row labels and push each switch's thumb out of its track. Undo it inside the card (one class, so
   the component rules below, also one class and later, still apply). */
.gw-alerts :where(span) {
  margin-top: 0;
  text-align: inherit;
  font: inherit;
  letter-spacing: normal;
  color: inherit;
  text-transform: none;
}
.gw-alerts label { text-transform: none; }
.gw-alerts {
  background: var(--gw-card-bg, #fff);
  color: var(--gw-text-primary, #2d2d2d);
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  padding: 2rem;
  max-width: 620px;
  margin: 1.25rem auto 2rem;
  text-align: left;
}
html[data-theme="dark"] .gw-alerts { box-shadow: 0 2px 12px rgba(0,0,0,0.3); }
.gw-alerts__title { font-size: 1.5rem; font-weight: 700; margin: 0 0 4px; color: var(--gw-text-primary, #2d2d2d); }
.gw-alerts__intro, .gw-alerts__note, .gw-alerts__always { color: var(--gw-text-secondary, #6b6b6b); font-size: var(--gw-font-base, 0.85rem); margin: 0; }
.gw-alerts__note { margin-top: 8px; }
.gw-alerts__always { margin-top: 1.25rem; }
.gw-alerts__status { min-height: 1.4em; margin: 8px 0 0; font-size: var(--gw-font-base, 0.85rem); font-weight: 600; color: var(--gw-secondary, #4cb26a); }
.gw-alerts__section { border: 0; margin: 1.5rem 0 0; padding: 0; min-width: 0; }
.gw-alerts__section-title {
  display: block;
  width: 100%;
  font-size: var(--gw-font-xs, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gw-text-tertiary, #707070);
  margin: 0 0 6px;
  padding: 0;
}
.gw-alerts__rows { list-style: none; margin: 0; padding: 0; }
.gw-alerts__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--gw-border, #ddd);
}
.gw-alerts__row:first-child { border-top: 0; }
.gw-alerts__row-label { flex: 1 1 auto; font-size: var(--gw-font-md, 0.95rem); }
.gw-alerts__row-switches { display: flex; gap: 18px; flex: 0 0 auto; }
.gw-alerts__hour { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.gw-alerts__hour[hidden] { display: none; }
.gw-alerts__hour label { margin: 0; font-weight: 600; color: var(--gw-text-secondary, #6b6b6b); font-size: var(--gw-font-base, 0.85rem); }
.gw-alerts__hour select {
  min-height: 44px;
  padding: 6px 12px;
  border: 1px solid var(--gw-border, #ddd);
  border-radius: 8px;
  background: var(--gw-input-bg, #fff);
  color: var(--gw-text-primary, #2d2d2d);
}
.gw-alerts__actions { margin-top: 1.25rem; }
.gw-alerts__actions[hidden] { display: none; }
.gw-alerts__save { border-radius: 50px; padding: 12px 28px; font-weight: 600; background: var(--gw-accent, #C93358); border-color: var(--gw-accent, #C93358); color: var(--gw-accent-font, #fff); }

/* The on/off switch — a real checkbox (role="switch") drawn as a track and thumb */
.gw-switch { position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 4px; margin: 0; cursor: pointer; min-width: 52px; }
.gw-switch input { position: absolute; opacity: 0; width: 44px; height: 44px; margin: 0; top: -10px; left: 50%; transform: translateX(-50%); cursor: pointer; }
.gw-switch__track {
  position: relative;
  width: 40px;
  height: 24px;
  border-radius: 12px;
  background: var(--gw-border, #ccc);
  transition: background var(--gw-transition, 0.2s ease);
}
.gw-switch__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  transition: left var(--gw-transition, 0.2s ease);
}
.gw-switch input:checked + .gw-switch__track { background: var(--gw-accent, #C93358); }
.gw-switch input:checked + .gw-switch__track .gw-switch__thumb { left: 19px; }
.gw-switch input:focus-visible + .gw-switch__track { outline: 3px solid var(--gw-focus, #1a1a1a); outline-offset: 2px; }
.gw-switch__text { font-size: var(--gw-font-xs, 0.75rem); color: var(--gw-text-secondary, #6b6b6b); font-weight: 600; }
.gw-switch--none { cursor: default; justify-content: center; }
.gw-switch--none .gw-switch__text { font-size: 1rem; line-height: 24px; }

/* Two-way choice drawn as a segmented control */
.gw-segmented { display: inline-flex; padding: 4px; gap: 4px; border-radius: 999px; background: var(--gw-main-bg, #f5f5f5); border: 1px solid var(--gw-border, #ddd); flex-wrap: wrap; }
.gw-segmented__opt { position: relative; margin: 0; }
.gw-segmented__opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.gw-segmented__opt span { display: block; padding: 10px 18px; min-height: 44px; line-height: 24px; border-radius: 999px; font-weight: 600; font-size: var(--gw-font-base, 0.85rem); color: var(--gw-text-secondary, #6b6b6b); cursor: pointer; }
.gw-segmented__opt input:checked + span { background: var(--gw-card-bg, #fff); color: var(--gw-text-primary, #2d2d2d); box-shadow: 0 1px 4px rgba(0,0,0,0.12); }
.gw-segmented__opt input:focus-visible + span { outline: 3px solid var(--gw-focus, #1a1a1a); outline-offset: 2px; }

@media (max-width: 575px) {
  .gw-alerts { padding: 1.25rem; border-radius: 12px; }
  .gw-alerts__row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .gw-alerts__row-switches { gap: 24px; }
  .gw-account-nav__link { padding: 10px 6px; font-size: var(--gw-font-base, 0.85rem); }
}
@media (prefers-reduced-motion: reduce) {
  .gw-switch__track, .gw-switch__thumb, .gw-account-nav__link { transition: none; }
}

/* 2.71.0 — the bell on phones, its footer link, the sidebar's Notifications count, the desktop account menu */
.gw-notif__footer { border-top: 1px solid var(--gw-topbar-border, #ebebeb); padding: 10px 16px; text-align: center; }
.gw-notif__settings { color: var(--gw-accent, #C93358); font-weight: 600; font-size: var(--gw-font-base, 0.85rem); text-decoration: none; }
.gw-notif__settings:hover { text-decoration: underline; }
.gw-notif__panel:focus { outline: none; }
.gw-notif__bell:focus-visible, .gw-account-menu__btn:focus-visible { outline: 3px solid var(--gw-focus, #1a1a1a); outline-offset: 2px; }
.gw-sidebar__notif { width: calc(100% - 16px); background: none; border: 0; text-align: left; cursor: pointer; font: inherit; }
.gw-sidebar__nav-icon { position: relative; }
.gw-sidebar__notif-count {
  position: absolute; top: -6px; right: -10px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 9px; background: var(--gw-accent, #C93358); color: var(--gw-accent-font, #fff);
  font-size: 10px; font-weight: 700; line-height: 18px; text-align: center;
}
.gw-sidebar__notif-count[hidden] { display: none; }
.gw-account-menu { position: relative; }
.gw-account-menu__btn { background: none; border: 0; cursor: pointer; font: inherit; display: inline-flex; align-items: center; gap: 8px; }
.gw-account-menu__caret { font-size: 0.7em; opacity: 0.7; }
.gw-account-menu__list {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 190px; margin: 0; padding: 6px; list-style: none;
  background: var(--gw-card-bg, #fff); border: 1px solid var(--gw-topbar-border, #ebebeb); border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18); z-index: 10250;
}
.gw-account-menu__list[hidden] { display: none; }
.gw-account-menu__item {
  display: block; padding: 10px 14px; border-radius: 8px; color: var(--gw-text-primary, #2d2d2d) !important;
  text-decoration: none; font-size: var(--gw-font-base, 0.85rem); font-weight: 500;
}
.gw-account-menu__item:hover, .gw-account-menu__item:focus-visible { background: var(--gw-sidebar-hover-bg, #f5f5f5); color: var(--gw-text-primary, #2d2d2d); text-decoration: none; }
.gw-account-menu__item--logout { border-top: 1px solid var(--gw-border, #ddd); border-radius: 0 0 8px 8px; margin-top: 4px; }
@media (max-width: 767px) {
  .gw-notif__panel {
    position: fixed;
    top: calc(var(--gw-topbar-height, 52px) + 4px);
    left: 8px;
    right: 8px;
    width: auto;
    max-height: calc(100dvh - var(--gw-topbar-height, 52px) - 16px);
    margin-top: 0;
  }
}

/* 2.71.0 — My posts (Sent / Received / Pending) */
.gw-myposts {
  background: var(--gw-card-bg, #fff);
  color: var(--gw-text-primary, #2d2d2d);
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  padding: 2rem;
  max-width: 760px;
  margin: 1.25rem auto 2rem;
}
html[data-theme="dark"] .gw-myposts { box-shadow: 0 2px 12px rgba(0,0,0,0.3); }
.gw-myposts__title { font-size: 1.5rem; font-weight: 700; margin: 0 0 1rem; }
.gw-myposts__tabs { display: flex; width: 100%; margin-bottom: 1rem; }
.gw-segmented__link {
  flex: 1 1 0; display: block; text-align: center; padding: 10px 12px; min-height: 44px; line-height: 24px; white-space: nowrap;
  border-radius: 999px; font-weight: 600; font-size: var(--gw-font-base, 0.85rem);
  color: var(--gw-text-secondary, #6b6b6b); text-decoration: none;
}
.gw-segmented__link:hover { color: var(--gw-text-primary, #2d2d2d); text-decoration: none; }
.gw-segmented__link.is-current { background: var(--gw-card-bg, #fff); color: var(--gw-text-primary, #2d2d2d) !important; box-shadow: 0 1px 4px rgba(0,0,0,0.12); }
.gw-segmented__link:focus-visible { outline: 3px solid var(--gw-focus, #1a1a1a); outline-offset: 2px; }
.gw-myposts__count {
  display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px; border-radius: 10px;
  background: var(--gw-border, #ddd); color: var(--gw-text-primary, #2d2d2d); font-size: 0.7rem; line-height: 18px;
}
.gw-myposts__empty { color: var(--gw-text-secondary, #6b6b6b); text-align: center; padding: 2rem 0; margin: 0; }
.gw-myposts__list { list-style: none; margin: 0; padding: 0; }
.gw-myposts__row {
  display: flex; align-items: center; gap: 14px; padding: 12px 0;
  border-top: 1px solid var(--gw-border, #ddd);
}
.gw-myposts__row:first-child { border-top: 0; }
.gw-myposts__thumb {
  flex: 0 0 64px; width: 64px; height: 64px; border-radius: 10px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--gw-main-bg, #f5f5f5); color: var(--gw-text-tertiary, #707070); font-size: 1.3rem;
}
.gw-myposts__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gw-myposts__body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.gw-myposts__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.gw-myposts__chip {
  display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 0.7rem; font-weight: 600;
  background: var(--gw-main-bg, #f5f5f5); color: var(--gw-text-secondary, #6b6b6b); border: 1px solid var(--gw-border, #ddd);
}
.gw-myposts__chip--private { background: transparent; }
.gw-myposts__chip--pending { background: var(--gw-accent, #C93358); border-color: var(--gw-accent, #C93358); color: var(--gw-accent-font, #fff); }
.gw-myposts__date { font-size: 0.75rem; color: var(--gw-text-tertiary, #707070); }
.gw-myposts__who { font-weight: 600; font-size: var(--gw-font-md, 0.95rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gw-myposts__msg { color: var(--gw-text-secondary, #6b6b6b); font-size: var(--gw-font-base, 0.85rem); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.gw-myposts__actions { flex: 0 0 auto; }
.gw-myposts__btn {
  display: inline-block; padding: 8px 16px; min-height: 40px; border-radius: 999px; font-weight: 600; font-size: var(--gw-font-base, 0.85rem);
  border: 1px solid var(--gw-accent, #C93358); color: var(--gw-accent, #C93358); text-decoration: none;
}
.gw-myposts__btn:hover, .gw-myposts__btn:focus-visible { background: var(--gw-accent, #C93358); color: var(--gw-accent-font, #fff) !important; text-decoration: none; }
.gw-myposts__btn:focus-visible { outline: 3px solid var(--gw-focus, #1a1a1a); outline-offset: 2px; }
@media (max-width: 575px) {
  .gw-myposts { padding: 1.25rem; border-radius: 12px; }
  .gw-myposts__thumb { flex-basis: 52px; width: 52px; height: 52px; }
  .gw-myposts__row { flex-wrap: wrap; }
  .gw-myposts__actions { flex-basis: 100%; padding-left: 66px; }
  .gw-segmented__link { padding: 10px 4px; }
  .gw-myposts__count { margin-left: 2px; padding: 0 5px; }
}

/* Responsive: submission pages on mobile */
@media (max-width: 767px) {
  body.gw-app-shell #submissionContainer {
    margin: 1rem;
    width: auto; /* 2.86.0: Bootstrap's width:100% plus this margin ran 1rem past the screen (Bootstrap 5 widens the phone viewport for it; 4 clipped it) */
  }
  body.gw-app-shell #submissionContainer .px-4 {
    padding: 1.25rem !important;
  }
}


/* ============================================================
   DESIGN REFINEMENTS — Matching Mockups
   ============================================================ */

/* -- Sidebar nav items -- */
.gw-sidebar__nav-item {
  border-radius: 50px;
}

/* -- Sidebar: active = full-width, no radius, bold -- */
.gw-sidebar__nav-item--active {
  font-weight: 600;
  border-radius: 0;
}

/* -- Topbar right icon buttons: pink circle style for key actions -- */
.gw-topbar__icon-btn {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.95rem;
}

/* Active icon buttons get accent bg */
.gw-topbar__icon-btn--active {
  background: var(--gw-accent);
  color: var(--gw-accent-font, #ffffff);
}
.gw-topbar__icon-btn--active:hover {
  color: var(--gw-accent-font, #ffffff);
  opacity: 0.9;
}

/* Notification bell & user-facing icons in topbar right — accent circles */
.gw-notif__bell {
  background: var(--gw-accent);
  color: var(--gw-accent-font, #ffffff) !important;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  border: none;
  cursor: pointer;
  transition: opacity var(--gw-transition);
}
.gw-notif__bell:hover {
  opacity: 0.9;
  color: var(--gw-accent-font, #ffffff) !important;
}

/* User link circle icon */
.gw-topbar__user-link {
  display: flex;
  align-items: center;
  gap: 6px;
}
.gw-topbar__user-link i {
  background: var(--gw-accent);
  color: var(--gw-accent-font, #ffffff);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}

/* -- Theme toggle: rounded pill group -- */
.gw-topbar__theme-toggle {
  background: var(--gw-main-bg);
  border-radius: 50px;
  padding: 2px;
}
.gw-topbar__theme-btn {
  border-radius: 50px;
  padding: 5px 10px;
  font-size: 0.85rem;
}
.gw-topbar__theme-btn--active {
  background: var(--gw-accent);
  color: var(--gw-accent-font, #ffffff);
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}

/* -- Search bar: ensure full pill roundness, pink icon -- */
.gw-topbar__search-input {
  border-radius: 50px;
  font-size: var(--gw-font-base);
}

/* -- Filter/Sort buttons: subtle, no border by default -- */
.gw-topbar__btn {
  border: none;
  background: none;
  color: var(--gw-text-secondary);
  font-size: var(--gw-font-sm);
  font-weight: 600;
  padding: 6px 12px;
}
.gw-topbar__btn:hover {
  color: var(--gw-text-primary);
  background: none;
}

/* -- Post bar: POST button full pill -- */
.gw-postbar__btn {
  border-radius: 50px;
  padding: 10px 24px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* -- Cards: matching design roundness -- */
.gw-card {
  border-radius: 16px;
}
.gw-card__image img {
  border-radius: 16px 16px 0 0;
}


/* -- Right sidebar donate button: full pill -- */
.gw-rsb__donate-btn {
  border-radius: 50px;
  font-weight: 700;
  padding: 10px 16px;
}

/* -- Right sidebar widget "ADD TO CART" style button (future) -- */
.gw-rsb__widget .btn,
.gw-rsb__widget button {
  border-radius: 50px;
}

/* -- Sidebar bottom items: hover shows accent color -- */
.gw-sidebar__bottom .gw-sidebar__nav-item:hover {
  color: var(--gw-accent-text, var(--gw-accent));
  background: var(--gw-sidebar-hover-bg);
}

/* -- Lightbox close button: slightly larger, square-rounded in design -- */
.gw-lightbox__close {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  font-size: 1rem;
}

/* -- Lightbox arrows: slightly larger, square-rounded -- */
.gw-lightbox__arrow {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  font-size: 1rem;
}


/* ===================================================================
   Bug Report Button & Modal
   =================================================================== */

/* -- Floating trigger button -- */
body.gw-app-shell .gw-bugreport__trigger {
  position: fixed;
  bottom: 68px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--gw-accent);
  color: var(--gw-accent-font, #fff);
  font-size: 1.1rem;
  cursor: pointer;
  z-index: 10000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
body.gw-app-shell .gw-bugreport__trigger:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

/* -- Overlay backdrop -- */
body.gw-app-shell .gw-bugreport__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 10300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

/* -- Modal container -- */
body.gw-app-shell .gw-bugreport__modal {
  background: var(--gw-card-bg);
  border-radius: 12px;
  max-width: 520px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  padding: 24px;
}

/* -- Header -- */
body.gw-app-shell .gw-bugreport__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
body.gw-app-shell .gw-bugreport__title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--gw-text-primary);
  margin: 0;
}
body.gw-app-shell .gw-bugreport__close {
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--gw-text-secondary);
  cursor: pointer;
  padding: 0 4px;
}
body.gw-app-shell .gw-bugreport__close:hover {
  color: var(--gw-text-primary);
}

/* -- Form elements -- */
body.gw-app-shell .gw-bugreport__label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gw-text-primary);
  margin-bottom: 4px;
  margin-top: 12px;
}
body.gw-app-shell .gw-bugreport__label:first-of-type {
  margin-top: 0;
}
body.gw-app-shell .gw-bugreport__required {
  color: #e74c3c;
}
body.gw-app-shell .gw-bugreport__hint {
  font-weight: 400;
  color: var(--gw-text-secondary);
  font-size: 0.8rem;
}
body.gw-app-shell .gw-bugreport__textarea,
body.gw-app-shell .gw-bugreport__select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--gw-border, #ddd);
  border-radius: 8px;
  font-size: 0.9rem;
  color: var(--gw-text-primary);
  background: var(--gw-input-bg, #fff);
  font-family: inherit;
  resize: vertical;
  box-sizing: border-box;
}
body.gw-app-shell .gw-bugreport__textarea:focus,
body.gw-app-shell .gw-bugreport__select:focus {
  outline: none;
  border-color: var(--gw-accent);
  box-shadow: 0 0 0 2px var(--gw-accent-15, rgba(201, 51, 88, 0.15));
}
body.gw-app-shell .gw-bugreport__row {
  display: flex;
  gap: 12px;
}
body.gw-app-shell .gw-bugreport__field {
  flex: 1;
}
body.gw-app-shell .gw-bugreport__file {
  display: block;
  width: 100%;
  font-size: 0.85rem;
  color: var(--gw-text-secondary);
  margin-top: 4px;
}

/* -- Status message -- */
body.gw-app-shell .gw-bugreport__status {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.85rem;
  margin-top: 12px;
  text-align: center;
}
body.gw-app-shell .gw-bugreport__status--success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}
body.gw-app-shell .gw-bugreport__status--error {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

/* -- Submit button -- */
body.gw-app-shell .gw-bugreport__submit {
  display: block;
  width: 100%;
  padding: 12px;
  margin-top: 16px;
  border: none;
  border-radius: 8px;
  background: var(--gw-accent);
  color: var(--gw-accent-font, #fff);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}
body.gw-app-shell .gw-bugreport__submit:hover {
  background: var(--gw-accent-hover, #A81C44);
}
body.gw-app-shell .gw-bugreport__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* -- Dark mode overrides -- */
html[data-theme="dark"] body.gw-app-shell .gw-bugreport__textarea,
html[data-theme="dark"] body.gw-app-shell .gw-bugreport__select {
  background: var(--gw-input-bg, #2a2a2a);
  border-color: var(--gw-border, #444);
  color: var(--gw-text-primary);
}
html[data-theme="dark"] body.gw-app-shell .gw-bugreport__status--success {
  background: #1e3a2a;
  color: #75d99a;
  border-color: #2d5a3e;
}
html[data-theme="dark"] body.gw-app-shell .gw-bugreport__status--error {
  background: #3a1e22;
  color: #f5a0a8;
  border-color: #5a2d33;
}

/* -- Mobile (<=767px) -- */
@media (max-width: 767px) {
  body.gw-app-shell .gw-bugreport__trigger {
    bottom: 64px;
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
  body.gw-app-shell .gw-bugreport__modal {
    width: 95%;
    padding: 18px;
  }
  body.gw-app-shell .gw-bugreport__row {
    flex-direction: column;
    gap: 0;
  }
}

/* ===================================================================
   Claim Message Modal — first-login prompt for registration-flow claimants
   =================================================================== */
body.gw-app-shell .gw-claimmsg__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 10300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
body.gw-app-shell .gw-claimmsg__modal {
  background: var(--gw-card-bg);
  border-radius: 12px;
  max-width: 520px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  padding: 24px;
}
body.gw-app-shell .gw-claimmsg__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
body.gw-app-shell .gw-claimmsg__title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--gw-text-primary);
  margin: 0;
}
body.gw-app-shell .gw-claimmsg__close {
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--gw-text-secondary);
  cursor: pointer;
  padding: 0 4px;
}
body.gw-app-shell .gw-claimmsg__close:hover {
  color: var(--gw-text-primary);
}
body.gw-app-shell .gw-claimmsg__intro {
  font-size: 0.95rem;
  color: var(--gw-text-primary);
  margin: 0 0 16px;
}
body.gw-app-shell .gw-claimmsg__field {
  margin-bottom: 12px;
}
body.gw-app-shell .gw-claimmsg__label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gw-text-primary);
  margin-bottom: 4px;
  margin-top: 12px;
}
body.gw-app-shell .gw-claimmsg__field .gw-claimmsg__label,
body.gw-app-shell .gw-claimmsg__form > .gw-claimmsg__label:first-of-type {
  margin-top: 0;
}
body.gw-app-shell .gw-claimmsg__hint {
  font-weight: 400;
  color: var(--gw-text-secondary);
  font-size: 0.8rem;
}
body.gw-app-shell .gw-claimmsg__email-display {
  padding: 10px 12px;
  border: 1px solid var(--gw-border, #ddd);
  border-radius: 8px;
  font-size: 0.9rem;
  color: var(--gw-text-secondary);
  background: var(--gw-input-bg, #f4f4f4);
  word-break: break-all;
}
body.gw-app-shell .gw-claimmsg__textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--gw-border, #ddd);
  border-radius: 8px;
  font-size: 0.9rem;
  color: var(--gw-text-primary);
  background: var(--gw-input-bg, #fff);
  font-family: inherit;
  resize: vertical;
  box-sizing: border-box;
}
body.gw-app-shell .gw-claimmsg__textarea:focus {
  outline: none;
  border-color: var(--gw-accent);
  box-shadow: 0 0 0 2px var(--gw-accent-15, rgba(201, 51, 88, 0.15));
}
body.gw-app-shell .gw-claimmsg__counter {
  font-size: 0.75rem;
  color: var(--gw-text-secondary);
  text-align: right;
  margin-top: 4px;
}
body.gw-app-shell .gw-claimmsg__status {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.85rem;
  margin-top: 12px;
  text-align: center;
}
body.gw-app-shell .gw-claimmsg__status--success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}
body.gw-app-shell .gw-claimmsg__status--error {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}
body.gw-app-shell .gw-claimmsg__actions {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}
body.gw-app-shell .gw-claimmsg__skip {
  flex: 1;
  padding: 12px;
  border: 1px solid var(--gw-border, #ddd);
  border-radius: 8px;
  background: transparent;
  color: var(--gw-text-secondary);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
body.gw-app-shell .gw-claimmsg__skip:hover {
  background: var(--gw-input-bg, #f4f4f4);
  color: var(--gw-text-primary);
}
body.gw-app-shell .gw-claimmsg__submit {
  flex: 2;
  padding: 12px;
  border: none;
  border-radius: 8px;
  background: var(--gw-accent);
  color: var(--gw-accent-font, #fff);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}
body.gw-app-shell .gw-claimmsg__submit:hover {
  background: var(--gw-accent-hover, #A81C44);
}
body.gw-app-shell .gw-claimmsg__submit:disabled,
body.gw-app-shell .gw-claimmsg__skip:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
html[data-theme="dark"] body.gw-app-shell .gw-claimmsg__textarea,
html[data-theme="dark"] body.gw-app-shell .gw-claimmsg__email-display {
  background: var(--gw-input-bg, #2a2a2a);
  border-color: var(--gw-border, #444);
  color: var(--gw-text-primary);
}
html[data-theme="dark"] body.gw-app-shell .gw-claimmsg__email-display {
  color: var(--gw-text-secondary);
}
html[data-theme="dark"] body.gw-app-shell .gw-claimmsg__skip {
  border-color: var(--gw-border, #444);
}
html[data-theme="dark"] body.gw-app-shell .gw-claimmsg__status--success {
  background: #1e3a2a;
  color: #75d99a;
  border-color: #2d5a3e;
}
html[data-theme="dark"] body.gw-app-shell .gw-claimmsg__status--error {
  background: #3a1e22;
  color: #f5a0a8;
  border-color: #5a2d33;
}
@media (max-width: 767px) {
  body.gw-app-shell .gw-claimmsg__modal {
    width: 95%;
    padding: 18px;
  }
}

/* ===================================================================
   Feature Request — Floating Button & Modal  (super_admin only)
   =================================================================== */

/* -- Floating trigger button (above bug report) -- */
body.gw-app-shell .gw-featurereq__trigger {
  position: fixed;
  bottom: 120px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--gw-secondary, #4cb26a);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  z-index: 10000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
body.gw-app-shell .gw-featurereq__trigger:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

/* -- Overlay backdrop -- */
body.gw-app-shell .gw-featurereq__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 10300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

/* -- Modal container -- */
body.gw-app-shell .gw-featurereq__modal {
  background: var(--gw-card-bg);
  border-radius: 12px;
  max-width: 520px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  padding: 24px;
}

/* -- Header -- */
body.gw-app-shell .gw-featurereq__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
body.gw-app-shell .gw-featurereq__title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--gw-text-primary);
  margin: 0;
}
body.gw-app-shell .gw-featurereq__close {
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--gw-text-secondary);
  cursor: pointer;
  padding: 0 4px;
}
body.gw-app-shell .gw-featurereq__close:hover {
  color: var(--gw-text-primary);
}

/* -- Form elements -- */
body.gw-app-shell .gw-featurereq__label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gw-text-primary);
  margin-bottom: 4px;
  margin-top: 12px;
}
body.gw-app-shell .gw-featurereq__label:first-of-type {
  margin-top: 0;
}
body.gw-app-shell .gw-featurereq__required {
  color: #e74c3c;
}
body.gw-app-shell .gw-featurereq__input,
body.gw-app-shell .gw-featurereq__textarea,
body.gw-app-shell .gw-featurereq__select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--gw-border, #ddd);
  border-radius: 8px;
  font-size: 0.9rem;
  color: var(--gw-text-primary);
  background: var(--gw-input-bg, #fff);
  font-family: inherit;
  box-sizing: border-box;
}
body.gw-app-shell .gw-featurereq__textarea {
  resize: vertical;
}
body.gw-app-shell .gw-featurereq__input:focus,
body.gw-app-shell .gw-featurereq__textarea:focus,
body.gw-app-shell .gw-featurereq__select:focus {
  outline: none;
  border-color: var(--gw-secondary, #4cb26a);
  box-shadow: 0 0 0 2px rgba(76, 178, 106, 0.15);
}

/* -- Status message -- */
body.gw-app-shell .gw-featurereq__status {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.85rem;
  margin-top: 12px;
  text-align: center;
}
body.gw-app-shell .gw-featurereq__status--success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}
body.gw-app-shell .gw-featurereq__status--error {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

/* -- Submit button -- */
body.gw-app-shell .gw-featurereq__submit {
  display: block;
  width: 100%;
  padding: 12px;
  margin-top: 16px;
  border: none;
  border-radius: 8px;
  background: var(--gw-secondary, #4cb26a);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}
body.gw-app-shell .gw-featurereq__submit:hover {
  background: #3d9a58;
}
body.gw-app-shell .gw-featurereq__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* -- Dark mode overrides -- */
html[data-theme="dark"] body.gw-app-shell .gw-featurereq__input,
html[data-theme="dark"] body.gw-app-shell .gw-featurereq__textarea,
html[data-theme="dark"] body.gw-app-shell .gw-featurereq__select {
  background: var(--gw-input-bg, #2a2a2a);
  border-color: var(--gw-border, #444);
  color: var(--gw-text-primary);
}
html[data-theme="dark"] body.gw-app-shell .gw-featurereq__status--success {
  background: #1e3a2a;
  color: #75d99a;
  border-color: #2d5a3e;
}
html[data-theme="dark"] body.gw-app-shell .gw-featurereq__status--error {
  background: #3a1e22;
  color: #f5a0a8;
  border-color: #5a2d33;
}

/* -- Mobile (<=767px) -- */
@media (max-width: 767px) {
  body.gw-app-shell .gw-featurereq__trigger {
    bottom: 112px;
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
  body.gw-app-shell .gw-featurereq__modal {
    width: 95%;
    padding: 18px;
  }
}

/* ===================================================================
   Legacy Lightbox Popups — Modernized Styles
   Giphy search, Camera/Upload, Image Library
   Restyled to match the app shell design language (CSS-only).
   NOTE: style.css uses !important on legacy popup rules — we must
   counter with !important here to override the dark-gray defaults.
   =================================================================== */

/* -- Overlay backdrop -- */
body.gw-app-shell .basicLightbox {
  background: rgba(0, 0, 0, 0.6) !important;
  z-index: 1000000001 !important; /* above everything except custom lightbox */
}

/* -- Card container -- */
body.gw-app-shell .basicLightbox #bp_wrapper {
  background-color: var(--gw-card-bg) !important;
  color: var(--gw-text-primary) !important;
  border-radius: 16px !important;
  border-top: none !important;
  border-bottom: none !important;
  max-width: 560px;
  width: 90vw;
  max-height: 80vh;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* -- Header bar -- */
body.gw-app-shell .basicLightbox #bp_header {
  display: flex !important;
  float: none !important;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px !important;
  border-bottom: 1px solid var(--gw-topbar-border);
  background-color: transparent !important;
  color: var(--gw-text-primary) !important;
  width: auto !important;
  font-size: inherit !important;
}
body.gw-app-shell .basicLightbox #bp_header h3,
body.gw-app-shell .basicLightbox #bp_header h5 {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--gw-text-primary) !important;
  margin: 0;
  text-transform: none !important;
  letter-spacing: 0;
  line-height: 1.4;
}
body.gw-app-shell .basicLightbox .closeModal {
  font-size: 1.4rem;
  color: var(--gw-text-secondary);
  cursor: pointer;
  transition: color var(--gw-transition);
}
body.gw-app-shell .basicLightbox .closeModal:hover {
  color: var(--gw-text-primary);
}

/* -- Donate lightbox close button -- */
body.gw-app-shell .basicLightbox .gw-donate-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: #2d2d2d;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  transition: background 0.2s, transform 0.15s;
  z-index: 10;
}
body.gw-app-shell .basicLightbox .gw-donate-close:hover {
  background: #f3f4f6;
  transform: scale(1.08);
}

/* -- Scrollable content area -- */
body.gw-app-shell .basicLightbox #bp_container {
  padding: 20px 24px 24px;
  overflow-y: auto;
  flex: 1;
  max-height: calc(80vh - 70px);
  text-align: left;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--gw-text-secondary) transparent;
}
body.gw-app-shell .basicLightbox #bp_container::-webkit-scrollbar {
  width: 6px;
}
body.gw-app-shell .basicLightbox #bp_container::-webkit-scrollbar-track {
  background: transparent;
}
body.gw-app-shell .basicLightbox #bp_container::-webkit-scrollbar-thumb {
  background: var(--gw-text-secondary);
  border-radius: 3px;
}
body.gw-app-shell .basicLightbox #bp_container::-webkit-scrollbar-thumb:hover {
  background: var(--gw-accent);
}
body.gw-app-shell .basicLightbox #bp_container > img {
  margin-top: 0 !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  border-radius: 10px;
}

/* -- Giphy search form -- */
body.gw-app-shell #giphyForm {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
body.gw-app-shell #giphyForm input#query {
  flex: 1;
  padding: 10px 16px;
  border: 1px solid var(--gw-sidebar-border) !important;
  border-radius: 24px;
  font-size: 0.9rem;
  color: var(--gw-text-primary);
  background: var(--gw-sidebar-bg) !important;
  font-family: inherit;
  max-width: none !important;
  width: auto;
}
body.gw-app-shell #giphyForm input#query::placeholder {
  color: var(--gw-text-secondary);
}
body.gw-app-shell #giphyForm input#query:focus {
  outline: none;
  border-color: var(--gw-accent) !important;
  box-shadow: 0 0 0 2px var(--gw-accent-15, rgba(201, 51, 88, 0.15));
}
body.gw-app-shell #giphyForm #giphyReturn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--gw-accent) !important;
  color: var(--gw-accent-font, #fff) !important;
  font-size: 1.1rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--gw-transition);
}
body.gw-app-shell #giphyForm #giphyReturn:hover {
  background: var(--gw-accent-hover, #A81C44) !important;
}

/* -- Giphy results grid -- */
body.gw-app-shell #giphySelection {
  width: 100%;
}
body.gw-app-shell #giphySelection #giphyContainer {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 100% !important;
}
body.gw-app-shell #giphySelection #giphyContainer > .col-md-8 {
  max-width: 100% !important;
  flex: none !important;
  padding: 0 !important;
}
body.gw-app-shell #giphySelection img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
body.gw-app-shell #giphySelection img:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
body.gw-app-shell #loadMore {
  display: block !important;
  width: 100%;
  padding: 10px;
  border: 1px solid var(--gw-accent) !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--gw-accent-text, var(--gw-accent)) !important;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  margin-top: 12px;
  transition: background var(--gw-transition), color var(--gw-transition);
}
body.gw-app-shell #loadMore:hover {
  background: var(--gw-accent) !important;
  color: var(--gw-accent-font, #fff) !important;
}
body.gw-app-shell #loadMore.hide {
  display: none !important;
}
body.gw-app-shell img.giphy-attribution-lg {
  display: block;
  margin: 16px auto 0 !important;
  opacity: 0.6;
}

/* -- Giphy attribution in preview popup -- */
body.gw-app-shell .basicLightbox .gw-giphy-attr {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 8px 12px;
  margin-top: 8px;
  background: #f5f5f5;
  border-radius: 8px;
}
body.gw-app-shell .basicLightbox .gw-giphy-attr img {
  height: 18px !important;
  width: auto !important;
  max-width: 120px !important;
  display: block;
  border-radius: 0 !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  margin: 0 !important;
}
html[data-theme="dark"] body.gw-app-shell .basicLightbox .gw-giphy-attr {
  background: rgba(255, 255, 255, 0.08);
}

/* -- Preview message textarea -- */
body.gw-app-shell .basicLightbox .gw-preview-msg {
  width: 100%;
  padding: 12px 14px;
  margin-top: 12px;
  border: 1px solid var(--gw-topbar-border);
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--gw-text-primary);
  background: var(--gw-sidebar-bg);
  resize: vertical;
  min-height: 48px;
  max-height: 140px;
  line-height: 1.4;
}
body.gw-app-shell .basicLightbox .gw-preview-msg:focus {
  outline: none;
  border-color: var(--gw-accent);
  box-shadow: 0 0 0 2px var(--gw-accent-15, rgba(201, 51, 88, 0.15));
}
body.gw-app-shell .basicLightbox .gw-preview-msg::placeholder {
  color: var(--gw-text-secondary);
}

/* -- Preview image description (BC-084: optional alt text) -- */
body.gw-app-shell .basicLightbox .gw-preview-alt__label {
  display: block;
  margin: 12px 0 4px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gw-text-primary);
  text-align: left;
}
body.gw-app-shell .basicLightbox .gw-preview-alt__opt { font-weight: 400; color: var(--gw-text-secondary); }
body.gw-app-shell .basicLightbox .gw-preview-alt {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--gw-topbar-border);
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--gw-text-primary);
  background: var(--gw-sidebar-bg);
}
body.gw-app-shell .basicLightbox .gw-preview-alt:focus {
  outline: 2px solid var(--gw-focus, #1a1a1a);
  outline-offset: 1px;
  border-color: var(--gw-accent);
}
body.gw-app-shell .basicLightbox .gw-preview-alt__help {
  display: block;
  margin-top: 4px;
  font-size: 0.75rem;
  color: var(--gw-text-secondary);
  text-align: left;
}

/* -- Upload / Take Picture buttons -- */
body.gw-app-shell .basicLightbox #uploadImage,
body.gw-app-shell .basicLightbox #captureImage {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 20px;
  margin-bottom: 12px;
  border-radius: 12px;
  border: 2px solid var(--gw-topbar-border);
  background: var(--gw-card-bg) !important;
  color: var(--gw-text-primary) !important;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: border-color var(--gw-transition), background var(--gw-transition), color var(--gw-transition);
}
body.gw-app-shell .basicLightbox #uploadImage:hover,
body.gw-app-shell .basicLightbox #captureImage:hover {
  border-color: var(--gw-accent);
  background: var(--gw-accent-06, rgba(201, 51, 88, 0.06)) !important;
  color: var(--gw-accent-text, var(--gw-accent)) !important;
}

/* -- Library image grid -- */
body.gw-app-shell #librarySelection {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
body.gw-app-shell #librarySelection .row {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
body.gw-app-shell #librarySelection .col-12,
body.gw-app-shell #librarySelection .col-md-4 {
  max-width: 100% !important;
  flex: none !important;
  padding: 0 !important;
}
body.gw-app-shell #librarySelection img.select-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
body.gw-app-shell #librarySelection img.select-image:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* -- Dark mode for legacy popups -- */
html[data-theme="dark"] body.gw-app-shell .basicLightbox #bp_header {
  border-bottom-color: var(--gw-sidebar-border);
}
html[data-theme="dark"] body.gw-app-shell .basicLightbox #uploadImage,
html[data-theme="dark"] body.gw-app-shell .basicLightbox #captureImage {
  border-color: var(--gw-sidebar-border);
}

/* -- Mobile for legacy popups -- */
@media (max-width: 767px) {
  body.gw-app-shell .basicLightbox #bp_wrapper {
    width: 95vw;
    max-height: 85vh;
  }
  body.gw-app-shell .basicLightbox #bp_header {
    padding: 16px 16px 12px !important;
  }
  body.gw-app-shell .basicLightbox #bp_container {
    padding: 16px;
  }
}

/* ===================================================================
   Cookie Consent Revisit Button — CookieYes Plugin Override
   Move out of sidebar area so it doesn't overlap feed/grid toggle
   =================================================================== */
/* Hide the cookie revisit button once consent has been given.
   CookieYes adds data-cky-tag="revisit-consent" after the banner is accepted;
   the banner itself gets display:none, but the revisit button stays visible.
   Hide it unconditionally — users can still clear cookies to re-trigger. */
.cky-btn-revisit-wrapper.cky-revisit-bottom-left {
  display: none !important;
}

body.gw-app-shell .cky-btn-revisit-wrapper.cky-revisit-bottom-left {
  left: auto !important;
  right: 16px !important;
  bottom: 16px !important;
  z-index: 9999 !important;   /* below sidebar (10100) and modals */
}
body.gw-app-shell .cky-btn-revisit-wrapper .cky-btn-revisit {
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}
body.gw-app-shell .cky-btn-revisit-wrapper .cky-btn-revisit:hover {
  opacity: 1;
}
body.gw-app-shell .cky-btn-revisit-wrapper .cky-btn-revisit img {
  width: 18px !important;
  height: 18px !important;
}

/* On mobile, ensure cookie button doesn't overlap bottom content */
@media (max-width: 767px) {
  body.gw-app-shell .cky-btn-revisit-wrapper.cky-revisit-bottom-left {
    right: 12px !important;
    bottom: 12px !important;
  }
}

/* ===================================================================
   Report Post Modal — ensure readable text in dark mode.
   The Bootstrap modal uses a white background, but dark mode inherits
   light text colors, making content invisible.
   =================================================================== */
html[data-theme="dark"] body.gw-app-shell #reportingModal .modal-content {
  color: #333;
}
html[data-theme="dark"] body.gw-app-shell #reportingModal .modal-title {
  color: #222 !important;
}
html[data-theme="dark"] body.gw-app-shell #reportingModal .modal-body {
  color: #444;
}
html[data-theme="dark"] body.gw-app-shell #reportingModal label {
  color: #333;
}
html[data-theme="dark"] body.gw-app-shell #reportingModal .form-control {
  color: #333;
  background: #fff;
}

/* ===================================================================
   Share Popup — multi-platform share options (Facebook, X, LinkedIn)
   =================================================================== */
.gw-share-popup {
  position: fixed;
  inset: 0;
  z-index: 1000000010; /* above lightbox (1000000002) */
}
.gw-share-popup__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
}
.gw-share-popup__panel {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%) scale(0.95);
  background: var(--gw-card-bg, #fff);
  border-radius: 16px;
  padding: 20px 24px 24px;
  min-width: 280px;
  max-width: 340px;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
}
.gw-share-popup--visible .gw-share-popup__panel {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.gw-share-popup__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.gw-share-popup__title {
  margin: 0; /* 2.83.0: a heading now (it names the dialog) — same look */
  line-height: 1.3;
  font-weight: 700;
  font-size: 1rem;
  color: var(--gw-text-primary, #e0e0e0);
}
.gw-share-popup__close {
  background: none;
  border: none;
  font-size: 1.8rem;
  cursor: pointer;
  color: var(--gw-text-primary, #e0e0e0);
  line-height: 1;
  padding: 0 4px;
  opacity: 0.7;
  transition: opacity 0.15s;
}
.gw-share-popup__close:hover {
  opacity: 1;
}
.gw-share-popup__options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gw-share-popup__btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border: 1px solid var(--gw-border, rgba(255,255,255,0.15));
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--gw-text-primary, #e0e0e0);
  transition: background 0.15s, border-color 0.15s;
}
.gw-share-popup__btn:hover {
  background: var(--gw-sidebar-hover-bg, rgba(255,255,255,0.08));
  border-color: var(--gw-accent, #C93358);
}
.gw-share-popup__btn i {
  font-size: 1.1rem;
  width: 20px;
  text-align: center;
}
.gw-share-popup__btn--facebook i { color: #1877F2; }
.gw-share-popup__btn--x .gw-icon-x { width: 16px; height: 16px; fill: var(--gw-text-primary, #000); vertical-align: middle; }
.gw-share-popup__btn--linkedin i { color: #0A66C2; }
.gw-share-popup__btn--copy i { color: var(--gw-accent, #C93358); }

/* ===================================================================
   GIF Pause — Play/Pause Overlay & Card Image Wrapper
   =================================================================== */
body.gw-app-shell .gw-card__image-wrap {
  position: relative;
  display: block;
}
body.gw-app-shell .gw-gif-overlay {
  /* 2.83.0 (C-P1-24, SC-041, OD-28): every GIF card and the lightbox carry their own Pause / Play button —
     it was hidden (global toggle only), so a playing GIF had no control on a phone.
     2.86.0: moved from the bottom right — where it sat over the card's footer actions — to the image's top left, and
     drawn like the kebab button opposite it (32 px translucent disc). The ::before keeps a 44 x 44 px target. */
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,.35);
  color: #ffffff;
  font-size: .75rem;
  line-height: 1;
  cursor: pointer;
  opacity: .8;
  transition: background .2s, opacity .2s;
}
body.gw-app-shell .gw-gif-overlay::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
}
body.gw-app-shell .gw-gif-overlay .fa-play {
  margin-left: 2px; /* optical centre of the triangle */
}
/* A private card's "Private" pill already holds the top left: the button sits under it. */
body.gw-app-shell .gw-card--private .gw-gif-overlay {
  top: 44px;
}
body.gw-app-shell .gw-gif-overlay:focus-visible {
  outline: 3px solid var(--gw-focus, #1a1a1a);
  outline-offset: 2px;
  opacity: 1;
}
/* Always show the play button when GIF is paused */
body.gw-app-shell .gw-gif-overlay--paused {
  opacity: 1;
}
/* Show pause button on card/lightbox hover */
body.gw-app-shell .gw-card:hover .gw-gif-overlay,
body.gw-app-shell .gw-lightbox__media:hover .gw-gif-overlay {
  opacity: 1;
}
body.gw-app-shell .gw-gif-overlay:hover {
  background: rgba(0,0,0,.55);
}
/* ===================================================================
   Settings Popup (Topbar) — gear icon + dropdown panel
   =================================================================== */
.gw-settings-popup { position: relative; }
.gw-settings-popup__btn { position: relative; }
.gw-settings-popup__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 240px;
  background: var(--gw-card-bg, #fff);
  border: 1px solid var(--gw-topbar-border, #ebebeb);
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.12);
  z-index: 10200;
  padding: 0;
  overflow: hidden;
}
.gw-settings-popup__header {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gw-text-secondary);
  padding: 12px 16px 8px;
}
.gw-settings-popup__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 14px;
}
.gw-settings-popup__label {
  font-size: 0.82rem;
  color: var(--gw-text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}
.gw-settings-popup__label i {
  font-size: 0.9rem;
  color: var(--gw-text-secondary);
  width: 16px;
  text-align: center;
}
/* Toggle switch */
.gw-settings-popup__toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.gw-settings-popup__toggle-track {
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: var(--gw-accent, #C93358);
  position: relative;
  transition: background 0.2s ease;
}
.gw-settings-popup__toggle-thumb {
  position: absolute;
  top: 2px;
  left: 18px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: left 0.2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.gw-settings-popup__toggle--off .gw-settings-popup__toggle-track {
  background: #ccc;
}
.gw-settings-popup__toggle--off .gw-settings-popup__toggle-thumb {
  left: 2px;
}
.gw-settings-popup__toggle-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gw-text-secondary);
  min-width: 20px;
}

/* GIF badge label on cards */
body.gw-app-shell .gw-gif-badge {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border-radius: 4px;
  z-index: 5;
  pointer-events: none;
}

/* ===================================================================
   Reduced Motion — respect prefers-reduced-motion user preference.
   Disables transitions, animations, and transforms for users with
   motion sensitivity (C7).
   =================================================================== */
@media (prefers-reduced-motion: reduce) {
  body.gw-app-shell,
  body.gw-app-shell *,
  body.gw-app-shell *::before,
  body.gw-app-shell *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================================
   Landing Page  —  /welcome/
   ========================================================================= */
body.gw-landing,
body.gw-landing.gw-app-shell,
html body.gw-landing {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gw-main-bg) !important;
  background-image: none !important;
  color: var(--gw-text-primary); /* 2.68.7 (C5): was the undeclared --gw-font-color; _head.php's !important body colour wins either way */
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
html:has(body.gw-landing) {
  background: var(--gw-main-bg) !important;
}
.gw-landing__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 1.5rem;
  max-width: 520px;
  width: 100%;
  animation: gwLandingFadeIn 0.6s ease-out both;
}
@keyframes gwLandingFadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.gw-landing__logo {
  max-width: 160px;
  height: auto;
  margin-bottom: 2rem;
  animation: gwLandingFadeIn 0.5s ease-out 0.1s both;
}
.gw-landing__heading {
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 0.5rem;
  color: var(--gw-text-primary, #e0e0e0);
  letter-spacing: -0.02em;
  animation: gwLandingFadeIn 0.5s ease-out 0.15s both;
}
.gw-landing__subheading {
  font-size: clamp(1rem, 3vw, 1.25rem);
  font-weight: 400;
  margin: 0 0 1.5rem;
  color: var(--gw-accent, #C93358);
  opacity: 0.9;
  animation: gwLandingFadeIn 0.5s ease-out 0.25s both;
}
.gw-landing__note {
  font-size: 0.85rem;
  color: var(--gw-text-primary, #aaa);
  opacity: 0.6;
  margin: -0.75rem 0 1.25rem;
  font-style: italic;
}
.gw-landing__body {
  max-width: 480px;
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--gw-text-primary, #ccc);
  opacity: 0.85;
}
.gw-landing__actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  max-width: 320px;
  animation: gwLandingFadeIn 0.5s ease-out 0.35s both;
}
.gw-landing__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0.85rem 1.5rem;
  border-radius: 14px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  border: none;
  font-family: inherit;
  position: relative;
  overflow: hidden;
}
.gw-landing__btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, transparent 50%);
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.gw-landing__btn:hover::after {
  opacity: 1;
}
.gw-landing__btn:hover {
  transform: translateY(-2px);
}
.gw-landing__btn:active {
  transform: translateY(0);
}
.gw-landing__btn--primary {
  background: var(--gw-accent, #C93358);
  color: var(--gw-accent-font, #fff) !important;
}
.gw-landing__btn--secondary {
  background: var(--gw-accent-hover, var(--gw-accent, #C93358));
  color: var(--gw-accent-hover-font, #fff) !important;
}
.gw-landing__btn--outline {
  background: transparent;
  border: 2px solid var(--gw-accent-25, rgba(201,51,88,0.25));
  color: var(--gw-accent-text, var(--gw-accent, #C93358)) !important; /* 2.85.0 (C-P2-15): the text shade in dark mode */
}
.gw-landing__btn--outline:hover {
  background: var(--gw-accent, #C93358);
  border-color: var(--gw-accent, #C93358);
  color: var(--gw-accent-font, #fff) !important;
}
.gw-landing__btn--outline::after {
  display: none;
}
.gw-landing__btn:disabled {
  opacity: 0.5;
  cursor: wait;
}
.gw-landing__btn:disabled::after {
  display: none;
}

/* ============================================================
   Quick Post Picker Cards (Upload / Record / Take Picture)
   ============================================================ */
.gw-qp-picker {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.gw-qp-picker__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 120px;
  padding: 24px 20px;
  background: rgba(255,255,255,0.05);
  border-radius: 16px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  border: 1px solid rgba(255,255,255,0.08);
}
.gw-qp-picker__card:hover {
  background: rgba(255,255,255,0.1);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.gw-qp-picker__card:active {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.gw-qp-picker__card i {
  font-size: 1.5rem;
  color: var(--gw-accent, #C93358);
}
.gw-qp-picker__card span {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gw-text-primary); /* 2.68.7 (C5): --gw-font-color was declared nowhere — #ccc labels on the white light-mode picker */
  opacity: 0.8;
}
.gw-qp-picker__card--accent {
  background: var(--gw-accent, #C93358);
  border-color: transparent;
}
.gw-qp-picker__card--accent:hover {
  background: var(--gw-accent-hover, #A81C44);
  box-shadow: 0 8px 24px var(--gw-accent-30, rgba(201,51,88,0.3)); /* 2.75.2: follows the accent (was a fixed pre-2.68 pink) */
}
.gw-qp-picker__card--accent i,
.gw-qp-picker__card--accent span {
  color: var(--gw-accent-font, #fff);
  opacity: 1;
}
/* Light mode adjustments. 2.68.7 (C5): light mode is the ABSENCE of data-theme (nothing ever sets
   a light data-theme value), so these were dead; the accent cards are left out so they keep the accent fill. */
html:not([data-theme="dark"]) .gw-qp-picker__card:not(.gw-qp-picker__card--accent) {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.08);
}
html:not([data-theme="dark"]) .gw-qp-picker__card:not(.gw-qp-picker__card--accent):hover {
  background: rgba(0,0,0,0.08);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

/* ============================================================
   Card Skeleton Loaders
   ============================================================ */
@keyframes gw-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.gw-card--skeleton {
  background: var(--gw-card-bg, #2a2a2a);
  border-radius: 16px;
  overflow: hidden;
  min-height: 280px;
}
.gw-skeleton {
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.04) 50%, transparent 100%);
  background-size: 800px 100%;
  animation: gw-shimmer 1.5s ease-in-out infinite;
  border-radius: 8px;
}
.gw-skeleton--media { width: 100%; height: 180px; border-radius: 16px 16px 0 0; }
.gw-skeleton--text { height: 14px; margin: 12px 16px; width: 60%; }
.gw-skeleton--text-short { height: 12px; margin: 8px 16px; width: 40%; }
.gw-skeleton--avatar { width: 32px; height: 32px; border-radius: 50%; margin: 12px 16px; display: inline-block; }

/* Lightbox loading spinner */
.gw-lightbox--loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}
.gw-lightbox--loading::after {
  content: '';
  width: 36px;
  height: 36px;
  border: 3px solid rgba(255,255,255,0.15);
  border-top-color: var(--gw-accent, #C93358);
  border-radius: 50%;
  animation: gw-spin 0.7s linear infinite;
}
@keyframes gw-spin { to { transform: rotate(360deg); } }

/* Dashboard nomination badges */
.gw-dashboard__badge--pending { background: #ff9800; color: #fff; padding: 2px 8px; border-radius: 10px; font-size: 0.75rem; font-weight: 600; }
.gw-dashboard__badge--claimed { background: #2196f3; color: #fff; padding: 2px 8px; border-radius: 10px; font-size: 0.75rem; font-weight: 600; }
.gw-dashboard__badge--verified { background: #4caf50; color: #fff; padding: 2px 8px; border-radius: 10px; font-size: 0.75rem; font-weight: 600; }
.gw-dashboard__badge--rejected { background: #f44336; color: #fff; padding: 2px 8px; border-radius: 10px; font-size: 0.75rem; font-weight: 600; }
.gw-dashboard__badge--expired { background: #9e9e9e; color: #fff; padding: 2px 8px; border-radius: 10px; font-size: 0.75rem; font-weight: 600; }

/* ============================================================
   About Modal (right sidebar content on small screens)
   ============================================================ */
.gw-about-modal {
  position: fixed;
  inset: 0;
  z-index: 1000000010;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gw-about-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
}
.gw-about-modal__panel {
  position: relative;
  background: var(--gw-card-bg, #fff);
  border-radius: 16px;
  padding: 28px 24px;
  max-width: 480px;
  width: 90vw;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}
.gw-about-modal__close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--gw-text-secondary);
  cursor: pointer;
  line-height: 1;
}
.gw-about-modal__close:hover { color: var(--gw-text-primary); }
.gw-about-modal__section {
  margin-bottom: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--gw-topbar-border); /* 2.68.7 (C5): the divider token its siblings use; --gw-border-color was declared nowhere */
}
.gw-about-modal__section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

/* ============================================================
   Post Timestamps
   ============================================================ */
.gw-card__date {
  font-size: 0.7rem;
  color: var(--gw-text-secondary);
  margin-left: auto;
}
.gw-lightbox__date {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--gw-text-secondary);
  margin-top: 2px;
}


/* ==================================================================
   ACCESSIBILITY — reduce motion
   v2.41.0 I6: honor OS-level reduced-motion preference across the app.
   Disables every CSS transition/animation and smooth-scroll when the
   user has opted in via `prefers-reduced-motion: reduce`. Scoped with
   `!important` to override specific `.gw-*` component rules.
   ================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   TERM GALLERY — horizontal photo strip on /memory/<term>/ and
   /messages/<term>/ pages. Visually distinct from the post-card
   grid so visitors don't mistake curated photos for commentable
   posts. Click → photo-only lightbox (assets/js/gw-term-gallery.js).
   Scoped to app shell; legacy layout still uses the old grid markup.
   ============================================================ */
.gw-term-gallery {
  max-width: 800px;
  margin: 0 auto 1.5rem;
  padding: 0 1rem;
}

.gw-term-gallery__title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gw-text-secondary);
  margin: 0 0 0.5rem;
}

.gw-term-gallery__strip {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 4px 4px 12px;
  margin: 0 -4px;
  scrollbar-width: thin;
  scrollbar-color: var(--gw-sidebar-border) transparent;
}

.gw-term-gallery__strip::-webkit-scrollbar {
  height: 6px;
}
.gw-term-gallery__strip::-webkit-scrollbar-thumb {
  background: var(--gw-sidebar-border);
  border-radius: 3px;
}
.gw-term-gallery__strip::-webkit-scrollbar-track {
  background: transparent;
}

/* 2.85.0 (C-P2-12, SC-069): each thumbnail button sits in a role="listitem" cell, which takes the strip's flex sizing */
.gw-term-gallery__cell {
  flex: 0 0 160px;
  scroll-snap-align: start;
}
.gw-term-gallery__item {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  border: 0;
  padding: 0;
  background: var(--gw-sidebar-border);
  scroll-snap-align: start;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.gw-term-gallery__item:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}

.gw-term-gallery__item:focus-visible {
  outline: 2px solid var(--gw-accent);
  outline-offset: 2px;
}

.gw-term-gallery__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gw-term-gallery__expand-icon {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}

.gw-term-gallery__item:hover .gw-term-gallery__expand-icon,
.gw-term-gallery__item:focus-visible .gw-term-gallery__expand-icon {
  opacity: 1;
}

@media (max-width: 575.98px) {
  .gw-term-gallery__cell {
    flex-basis: 130px;
  }
}

/* ============================================================
   PHOTO-ONLY LIGHTBOX — opened by gw-term-gallery.js. Uses the
   basicLightbox modal shell; this styles the inner content.
   Not scoped to app shell because basicLightbox renders its
   placeholder at document root.
   ============================================================ */
.gw-photo-lightbox {
  position: relative;
  width: 100%;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gw-photo-lightbox__image {
  display: block;
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  margin: 0 auto;
  border-radius: 8px;
  background: #000;
  user-select: none;
  -webkit-user-drag: none;
}

.gw-photo-lightbox__close,
.gw-photo-lightbox__nav {
  position: absolute;
  background: rgba(0,0,0,0.55);
  color: #fff;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  line-height: 1;
  transition: background 0.15s ease;
}

.gw-photo-lightbox__close:hover,
.gw-photo-lightbox__nav:hover {
  background: rgba(0,0,0,0.75);
}

.gw-photo-lightbox__close {
  top: -16px;
  right: -16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 20px;
  z-index: 2;
}

.gw-photo-lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 28px;
  font-weight: 300;
}

.gw-photo-lightbox__nav--prev { left: -56px; }
.gw-photo-lightbox__nav--next { right: -56px; }

.gw-photo-lightbox__counter {
  position: absolute;
  bottom: -32px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.55);
  color: #fff;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

@media (max-width: 767.98px) {
  .gw-photo-lightbox__close { top: 8px; right: 8px; }
  .gw-photo-lightbox__nav--prev { left: 8px; }
  .gw-photo-lightbox__nav--next { right: 8px; }
  .gw-photo-lightbox__counter { bottom: 8px; }
}

/* ==========================================================================
   Clickable directory cards (v2.54.0)
   Wraps memory, message, and staff directory cards so the entire card
   navigates to the View URL. Inner links/buttons keep their own behavior.
   ========================================================================== */
.gw-clickable-card {
  cursor: pointer;
}
.gw-clickable-card:focus-visible {
  outline: 2px solid var(--gw-accent, #C93358);
  outline-offset: 3px;
}

/* ==========================================================================
   Submission preview modal (v2.54.0)
   Wraps the typed message and the action buttons rendered into the
   basicLightbox `data-caption`. Buttons reuse the existing
   .gw-preview-btn--primary / --secondary styles already in _head.php.
   ========================================================================== */
.gw-preview-message {
  margin: 0 auto 18px;
  max-width: 580px;
  padding: 0 4px;
  font-size: 1rem;
  line-height: 1.55;
  color: #fff;
  white-space: pre-wrap;
  word-break: break-word;
}
.gw-preview-actions {
  display: flex;
  flex-direction: row;
  gap: 12px;
  margin-top: 8px;
  padding: 0 12px;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}
.gw-preview-actions .gw-preview-btn {
  flex: 1 1 0;
  min-width: 0;
}
@media (max-width: 480px) {
  .gw-preview-actions {
    flex-direction: column;
    gap: 10px;
  }
}


/* ===================================================================
   2.83.0 — accessibility, medium findings (R7: C-P1-17 … C-P1-24)
   =================================================================== */
/* C-P1-22 (SC-039, SC-068): toasts — a close button, pointer events on (hover pauses the countdown), stacked */
.gw-toasts {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 1000000010;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: 90%;
  pointer-events: none;
}
.gw-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #2d2d2d;
  color: #ffffff;
  padding: 8px 8px 8px 18px;
  border-radius: 8px;
  font-size: 0.85rem;
  line-height: 1.4;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: auto;
  text-align: left;
}
.gw-toast--visible { opacity: 1; }
.gw-toast[hidden] { display: none !important; }
.gw-toast--error { background: #8a1c1c; }
.gw-toast--anchored {
  position: fixed;
  transform: translateX(-50%);
  z-index: 1000000010;
  white-space: nowrap;
}
.gw-toast__close {
  flex: 0 0 auto;
  min-width: 28px;
  min-height: 28px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #ffffff;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.gw-toast__close:focus-visible { outline: 2px solid #ffffff; outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) {
  .gw-toast { transition: none; }
}
/* C-P1-22: the infinite-scroll loader's words are for screen readers; the spinner stays visual */
.gw-scroll-status { min-height: 1px; }

/* C-P1-19 (SC-042): the closed phone / tablet drawer is hidden from Tab and screen readers, after its slide-out */
@media (max-width: 1199px) {
  body.gw-app-shell .gw-sidebar:not(.gw-sidebar--open) {
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
  }
  body.gw-app-shell .gw-sidebar.gw-sidebar--open {
    visibility: visible;
    transition: transform 0.25s ease, visibility 0s linear 0s;
  }
}
/* C-P1-19 (SC-043): the legacy filter form is read by the scripts but never shown or focused */
body.gw-app-shell form#filter[hidden] { display: none !important; }

/* C-P1-19 (SC-038): Change Photo — the file input is focusable (visually hidden), its label shows the focus */
.gw-file-input-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  clip-path: inset(50%);
}
.gw-file-input-sr:focus-visible + label {
  outline: 3px solid var(--gw-focus, #1a1a1a);
  outline-offset: 2px;
}

/* C-P1-19 (SC-037): a notification is a button (or link) holding the avatar, message and time */
.gw-notif__open {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.gw-notif__open:focus-visible { outline: 3px solid var(--gw-focus, #1a1a1a); outline-offset: 2px; }
.gw-notif__item { flex-wrap: wrap; }
.gw-notif__item > .gw-notif__actions { flex-basis: 100%; margin-left: 46px; }

/* C-P1-20 (SC-044): the phone Filter / Sort words stay readable to screen readers (the 767px rule above hid them) */
@media (max-width: 767px) {
  .gw-topbar__btn .gw-topbar__btn-label.gw-topbar__btn-label--sr-mobile {
    display: inline !important;
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* C-P1-23 (SC-040): the transcript under a post's player */
.gw-lightbox__transcript {
  margin: 10px 0 0;
  font-size: 0.85rem;
  color: var(--gw-text-primary, #2d2d2d);
}
.gw-lightbox__transcript summary { cursor: pointer; font-weight: 600; }
.gw-lightbox__transcript summary:focus-visible { outline: 3px solid var(--gw-focus, #1a1a1a); outline-offset: 2px; }
.gw-lightbox__transcript-text { margin: 8px 0 0; white-space: pre-wrap; word-break: break-word; max-height: 12em; overflow: auto; }
.gw-preview-transcript { display: block; width: 100%; margin: 10px 0 4px; }
.gw-preview-transcript__label { display: block; font-weight: 600; font-size: 0.85rem; }
.gw-preview-transcript textarea { width: 100%; min-height: 70px; }
.gw-preview-transcript__help { display: block; font-size: 0.75rem; color: var(--gw-text-secondary, #6b6b6b); }

/* C-P1-24 (SC-041): the phone drawer's GIF switch */
.gw-sidebar__gif-switch[aria-checked="false"] { opacity: .7; }
body.gw-app-shell .gw-lightbox__media { position: relative; } /* C-P1-24: the lightbox GIF's Pause / Play button sits on the image */
.gw-notif__open .gw-notif__body, .gw-notif__open .gw-notif__message, .gw-notif__open .gw-notif__time { display: block; }
.gw-notif__open .gw-notif__body { flex: 1; min-width: 0; }
.gw-avatar-status { min-height: 1.2em; margin-top: 6px; font-size: 0.8rem; }
.gw-avatar-status--error { color: #a3141f; }
.gw-preview-transcript__error { color: #a3141f; font-size: 0.8rem; min-height: 1em; }