/* =============================================================================
   TRIBE — the member design system. One sheet. Shared components live here;
   CSS used by a single page lives in that page's template.
   Order matters: the component layer below loads before the core system
   (tokens, base, buttons...) further down, which wins ties.
   ============================================================================= */

/* Loads last. Sections, in order:
   tokens · dark theme · base · buttons · pills & badges · feed · composer bar · header bar
   post menu · post page · rail · dropdowns · aside · profile modal · person card · messages
   save bar · top nav · post editor · comments · forms · status badges · data table · avatar
   tabs · deal depot · help · bank · profile page · tribe admin · spinner · toast · auctions
   layout · utilities */

/* Tokens and base live in tribe.css. */

/* =============================================================================
                              MOBILE BOTTOM BAR
   ============================================================================= */
/* The phone bottom bar, its badge, and the "More" sheet it opens.
   Owns the --tc-bn-h contract other sheets measure against.
   Merged from tcbottomnav-cb3.css on 2026-09-20; load order preserved. */

/* ============================================================
   TribeCity Modern UI — Mobile Bottom Navigation Bar
   Dedicated stylesheet for the sticky bottom tab bar + "More"
   bottom sheet. Markup: views/templates/header/bottomNavMobile.tpl
   Loaded by: views/templates/layouts/head.tpl

   Additive — does not touch the hamburger drawer (tcmobilemenu.css).
   Kept separate so each mobile pattern owns its own tokens.
   ============================================================ */

/* Tokens — tweak the whole bar/sheet from one place */
:root {
  --tc-bn-bg:           #ffffff;
  --tc-bn-fg:           #6b7280;
  --tc-bn-fg-active:    #1f2430;
  --tc-bn-border:       rgba(0, 0, 0, 0.10);
  --tc-bn-surface:      rgba(0, 0, 0, 0.04);
  --tc-bn-surface-hov:  rgba(0, 0, 0, 0.07);
  --tc-bn-overlay:      rgba(15, 18, 26, 0.45);
  --tc-bn-accent:       var(--tc-brand, #e8a66d);
  --tc-bn-active-bg:    color-mix(in srgb, var(--tc-brand) 12%, transparent);
  --tc-bn-radius:       16px;
  --tc-bn-ease:         cubic-bezier(0.22, 1, 0.36, 1);
  --tc-bn-speed:        0.28s;
  --tc-bn-z:            900;          /* below the fixed top header (1000) */
}

/* ---------- Sticky bottom bar ---------- */
.tc-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: stretch;
  height: calc(var(--tc-bn-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--tc-bn-bg);
  border-top: 1px solid var(--tc-bn-border);
  z-index: var(--tc-bn-z);
}

.tc-bn-tab {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Tight icon-to-label gap so the pair reads as one unit (operator: closer
     + prettier). Extra top pad gives the icon air under the bar's top edge. */
  gap: 2px;
  padding: 9px 2px 7px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--tc-bn-fg);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s ease, transform 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.tc-bn-tab:active { transform: scale(0.94); }
.tc-bn-tab:focus-visible { background: var(--tc-bn-surface); }

.tc-bn-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 26px;
}
.tc-bn-icon img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  opacity: 0.72;
  transition: opacity 0.15s ease;
}
.tc-bn-icon svg {
  width: 17px;
  height: 17px;
  opacity: 1;
  stroke-width: 2.2;
}
.tc-bn-icon i {
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
  -webkit-text-stroke: .3px currentColor;
}

.tc-bn-label {
  max-width: 100%;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Active tab — accent color + a short rounded indicator line above the icon
   (operator preference over the pill: cleaner). Badge-safe — the line is a
   ::before on the tab, it never touches .tc-bn-icon, so the unread bubble
   stays anchored. */
.tc-bn-tab { position: relative; }
.tc-bn-tab.active { color: var(--tc-bn-accent); }
/* phones keep :hover on whatever was tapped, and .tribe-base a:hover (0,2,1) sets
   color:inherit - scoped here so a tab is its own colour in every state */
.tc-bottom-nav a.tc-bn-tab:hover { color: var(--tc-bn-fg); }
.tc-bottom-nav .tc-bn-tab.active,
.tc-bottom-nav .tc-bn-tab.active:hover { color: var(--tc-bn-accent); }
.tc-bn-tab.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 3px;
  background: var(--tc-bn-accent);
  border-radius: 999px;
}
.tc-bn-tab.active .tc-bn-label { font-weight: 700; }
.tc-bn-tab.active .tc-bn-icon img { opacity: 1; }
.tc-bn-tab.active .tc-bn-icon svg { opacity: 1; }

/* Unread badge bubble */
.tc-bn-badge {
  position: absolute;
  top: -5px;
  right: -9px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: #e8632f;
  border-radius: 999px;
}

/* ---------- "More" bottom sheet ---------- */
.tc-bn-sheet-overlay {
  position: fixed;
  inset: 0;
  height: 100vh;
  background: var(--tc-bn-overlay);
  z-index: calc(var(--tc-bn-z) + 1);
  display: none;
  opacity: 0;
  transition: opacity var(--tc-bn-speed) ease-in-out;
}

.tc-bn-sheet-panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  padding: 8px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  background: var(--tc-bn-bg);
  color: var(--tc-bn-fg-active);
  border-top: 1px solid var(--tc-bn-border);
  border-radius: var(--tc-bn-radius) var(--tc-bn-radius) 0 0;
  transform: translateY(100%);
  transition: transform var(--tc-bn-speed) var(--tc-bn-ease);
  z-index: calc(var(--tc-bn-z) + 2);
}

.tc-bn-sheet.active .tc-bn-sheet-panel { transform: translateY(0); }
.tc-bn-sheet.active .tc-bn-sheet-overlay { display: block; opacity: 1; }

.tc-bn-sheet-handle {
  align-self: center;
  width: 36px;
  height: 4px;
  margin: 2px 0 10px;
  background: rgba(0, 0, 0, 0.18);
  border-radius: 999px;
  flex-shrink: 0;
}

.tc-bn-sheet-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--tc-bn-fg);
  cursor: pointer;
  transition: color 0.15s ease, transform 0.15s ease;
  z-index: 2;
}
.tc-bn-sheet-close:active { transform: scale(0.94); }
.tc-bn-sheet-close svg { width: 18px; height: 18px; display: block; }

.tc-bn-sheet-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Sheet header — a titled row ("More") that gives the tile grid a clear top
   edge and lets the first row clear the absolutely-positioned close button
   (which is why the old padding-right:44px hack is gone). */

/* Tile grid — 3-up icon tiles (icon over label), replacing the old vertical
   list. Scannable at a glance; each tile keeps its link, active state, and
   unread badge. */
.tc-bn-sheet-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.tc-bn-sheet-link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 4px;
  min-height: 72px;
  background: var(--tc-bn-surface);
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--tc-bn-fg-active);
  text-align: center;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.tc-bn-sheet-link:active { transform: scale(0.96); }
.tc-bn-sheet-link:focus-visible {
  background: var(--tc-bn-surface-hov);
  color: var(--tc-bn-fg-active);
  text-decoration: none;
}
/* Active tile — accent tint + accent border (the transparent base border
   keeps geometry identical so nothing shifts on activation). */
.tc-bn-sheet-link.active {
  background: var(--tc-bn-active-bg);
  border-color: var(--tc-bn-accent);
}
.tc-bn-sheet-link-icon {
  width: auto;
  font-size: 20px;
  line-height: 1;
  text-align: center;
  color: var(--tc-bn-fg);
  flex-shrink: 0;
}
.tc-bn-sheet-link.active .tc-bn-sheet-link-icon { color: var(--tc-bn-accent); }
.tc-bn-sheet-link-text {
  max-width: 100%;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Badge floats on the tile's top-right corner (was an inline row-end pill). */
.tc-bn-sheet-link .tc-bn-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  margin-left: 0;
  box-shadow: none;
  min-width: 18px;
  height: 18px;
  font-size: 10px;
}

/* ---------- "You" tab — bottom-bar avatar + identity/account sheet ---------- */
/* Avatar shown in the bottom bar's trailing slot (replaces the old More dots). */
/* Active "You" — accent ring on the avatar (in addition to the shared top line). */

/* Identity card at the top of the You sheet. */
/* MEMBERSHIP TICKET */
/* The membership row at the top of the mobile sheet. Was a stub-and-body
   "ticket" with notches punched by radial gradients — it read as broken at
   sheet width. A plain card says the same thing and survives any width. */
/* THE MEMBERSHIP TICKET — a real ticket shape: a stub at the top, a perforated
   rule with a notch punched out of each edge, and the pass number + barcode on
   the counterfoil below. Used by the desktop rail and the mobile More sheet. */
/* The ticket is a DARK glass card, not a white tile: it sits on the rail, which
   is dark, and a white tile there read as a pasted-on rectangle. The surface is
   50% black over the glass so the background photo still comes through it. */
.tribe-memberticket {
  display: block;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgb(255 255 255 / .14);
  border-radius: var(--tc-radius-tile);
  background-color: rgb(0 0 0 / .5);
  color: rgb(255 255 255 / .72);
  text-decoration: none;
}
.tribe-memberticket:hover,
.tribe-memberticket:focus {
  text-decoration: none;
  color: rgb(255 255 255 / .72);
  border-color: rgb(255 255 255 / .28);
}
/* .tribe-glass comes later and would replace the 50% black with light glass.
   Rail only: the mobile More sheet keeps its light card (below). */
.tribe-window__rail .tribe-memberticket.tribe-glass { background: linear-gradient(rgb(0 0 0 / .5), rgb(0 0 0 / .5)), var(--tc-sheen), var(--tc-glass); }

.tribe-memberticket__top { display: block; padding: var(--tc-space-4) var(--tc-space-4) var(--tc-space-3); }
/* White, not brand: the brand colour is per-tribe and several of them fail
   against a 50%-black surface. White is legible for every tribe. */
.tribe-memberticket__label {
  display: block;
  font-size: var(--tc-text-base);
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
}
.tribe-memberticket__since {
  display: block;
  margin-top: 2px;
  font-size: var(--tc-text-xs);
  color: rgb(255 255 255 / .6);
}

/* The perforation. The dashes are this element's own top border; the two
   notches are pseudo-elements the width of a circle, pulled half off each
   edge and painted in the SURROUNDING colour so they read as holes.
   --tc-mt-notch is what the notch is punched against: the rail and the mobile
   sheet sit on different surfaces, so each sets it rather than guessing. */
.tribe-memberticket {
  --tc-mt-notch: var(--tc-white-2);
}
.tribe-memberticket__perf {
  position: relative;
  display: block;
  height: 0;
  margin: 0 var(--tc-space-4);
  border-top: 1px dashed rgb(255 255 255 / .28);
}
.tribe-memberticket__perf::before,
.tribe-memberticket__perf::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--tc-mt-notch);
  transform: translateY(-50%);
}
/* pulled out past the padding so each notch bites the card edge */
.tribe-memberticket__perf::before { left: calc(var(--tc-space-4) * -1 - 7px); }
.tribe-memberticket__perf::after  { right: calc(var(--tc-space-4) * -1 - 7px); }

.tribe-memberticket__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tc-space-3);
  padding: var(--tc-space-3) var(--tc-space-4) var(--tc-space-4);
}
.tribe-memberticket__pass {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--tc-text-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  /* the same quiet white as "Member since" - solid white made the pass number
     shout louder than the title above it */
  color: rgb(255 255 255 / .6);
}
/* Decorative barcode. Repeating-linear-gradient rather than an image: no
   request, and it inherits the ink colour in either theme. */
.tribe-memberticket__code {
  flex: 0 0 auto;
  width: 84px;
  height: 22px;
  background-image: repeating-linear-gradient(
    to right,
    rgb(255 255 255 / .6) 0 1px,
    transparent 1px 3px,
    rgb(255 255 255 / .6) 3px 5px,
    transparent 5px 6px,
    rgb(255 255 255 / .6) 6px 7px,
    transparent 7px 10px
  );
}

/* In the mobile More sheet the ticket sits on the light sheet, so it is a light card. */
.tc-bn-sheet .tribe-memberticket {
  --tc-mt-notch: var(--tc-bn-bg);
  border-color: rgb(var(--tc-ink) / .1);
  background-color: rgb(var(--tc-ink) / .04);
  color: rgb(var(--tc-ink) / .72);
}
.tc-bn-sheet .tribe-memberticket:hover,
.tc-bn-sheet .tribe-memberticket:focus { color: rgb(var(--tc-ink) / .72); border-color: rgb(var(--tc-ink) / .2); }
.tc-bn-sheet .tribe-memberticket__label { color: rgb(var(--tc-ink)); }
.tc-bn-sheet .tribe-memberticket__since,
.tc-bn-sheet .tribe-memberticket__pass { color: rgb(var(--tc-ink) / .6); }
.tc-bn-sheet .tribe-memberticket__perf { border-top-color: rgb(var(--tc-ink) / .2); }
.tc-bn-sheet .tribe-memberticket__code {
  background-image: repeating-linear-gradient(to right,
    rgb(var(--tc-ink) / .55) 0 1px, transparent 1px 3px,
    rgb(var(--tc-ink) / .55) 3px 5px, transparent 5px 6px,
    rgb(var(--tc-ink) / .55) 6px 7px, transparent 7px 10px);
}

/* Section labels between the sheet's blocks (Go to / Your account). */
/* Account link list (relocated from the old top-header profile dropdown). */
.tc-bn-you-sep {
  height: 1px;
  background: var(--tc-bn-border);
  margin: 4px 4px;
}

/* ---------- Content offset (mobile only) ----------
   The bar is fixed; reserve space so it never covers the
   footer / page bottom. Scoped via :has() so it only applies
   on pages that actually render the bar (authenticated pages)
   — public/login pages have no .tc-bottom-nav and get no dead
   space. Desktop & tablet are untouched (media query). */
@media screen and (max-width: 767px) {
  body:has(.tc-bottom-nav) {
    padding-bottom: calc(var(--tc-bn-h) + env(safe-area-inset-bottom, 0px));
  }
}

/* ---------- iOS app only: extra room under the tab bar ----------
   The bottom nav was getting visually cut off inside the iOS wrapper. The
   .is-ios-app class comes from $isIOSApp (tc_app cookie AND an iOS UA — see
   core.class.php) and is emitted on <html> in layouts/head.tpl, so this cannot
   affect Android, mobile web, or desktop.

   Deliberately scoped to iOS ONLY: an earlier global version of this change was
   reverted (87aeaa0) because the extra space was wrong on web/Android.

   RAISE THE TOKEN — never add a second additive term.
   --tc-bn-h is a CONTRACT, not a private variable: five fixed surfaces anchor
   themselves directly above this bar by reading it (post-detail comment compose,
   messaging composer, live-event card, save bar, push soft-ask). An earlier
   version of this block grew the bar with a hardcoded "+ 20px" on height while
   leaving --tc-bn-h at 62px, so all five sat 20px too low and the bar painted
   over them — which read on iPhone as the comment box and the tab bar glitching
   into each other. It is the same defect as the reverted --tc-bn-pad-extra token
   (74e6990, reverted 2026-08-11, PR 219 staging + 221 prod); a hardcoded literal
   slipped the review that a second named token would not have.

   Raising the token instead means the bar's own height calc, the body reserve,
   and all five anchored surfaces follow automatically with no per-surface edit.
   padding-bottom keeps the extra 20px BELOW the tab row, so the row itself stays
   62px rather than stretching, and it stays on top of safe-area-inset-bottom so
   home-indicator devices still clear the indicator. */
/* The token moved to tribe.css as :root.is-ios-app — a plain .is-ios-app
   ties :root on specificity and loses to the later sheet. */

.is-ios-app .tc-bottom-nav {
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}

/* ---------- iOS app: software keyboard handling ----------
   tc-ios-keyboard-cb2.js sets html.kb-open and --tc-kb-inset whenever the software
   keyboard is up, under EITHER keyboard model:

     older builds  Capacitor resizes the WebView, so the fixed nav jumps up above
                   the keyboard and the page reflows.
     1.0(5)+       Keyboard.resize = "none": nothing reflows, but the keyboard
                   covers whatever is anchored to the bottom.

   The same treatment fixes both: get the 82px tab bar out of the way while typing
   and stop reserving space for it. A bar riding on the keyboard eats the room the
   composer needs, and you cannot navigate mid-comment anyway.

   All of it is scoped to .is-ios-app (tc_app cookie AND iOS UA), so Android, mobile
   web and desktop never see it. */
.is-ios-app.kb-open .tc-bottom-nav {
  transform: translateY(110%);
  transition: transform 0.18s ease;
  pointer-events: none;
}

@media screen and (max-width: 767px) {
  /* Stop reserving the bar's height while it is hidden. Under the resize model the
     viewport is already short, so the reserved space is what pushes the composer
     off-screen; under the overlay model we swap it for the keyboard inset. */
  .is-ios-app.kb-open body:has(.tc-bottom-nav) {
    padding-bottom: var(--tc-kb-inset, 0px);
  }
}

/* Keep the composer reachable: it is a normal in-flow element, so once the bar is
   out of the way it only needs a little clearance from the keyboard edge. */
.is-ios-app.kb-open .tribe-composer,
.is-ios-app.kb-open .tribe-composer--main {
  scroll-margin-bottom: 16px;
}

/* =============================================================================
                                       BADGES
   ============================================================================= */
/* .tribe-badge + one colour + optional shape:
   colour  (default grey) · --brand tint · --solid tribe colour · --success · --danger · --warning · --muted · --photo
   shape   --caps small uppercase label · --count number bubble */
.tribe-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tc-space-1);
  flex: 0 0 auto;
  padding: 3px var(--tc-space-3);
  border-radius: var(--tc-radius-pill);
  background: rgb(var(--tc-ink) / .07);
  color: rgb(var(--tc-ink) / .72);
  font-size: var(--tc-text-xs);
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.4;
  white-space: nowrap;
}
.tribe-badge:empty { display: none; }
.tribe-badge svg { width: 12px; height: 12px; flex: 0 0 auto; }

/* colours */
.tribe-badge--brand { background: var(--tc-brand-soft); color: rgb(var(--tc-ink)); }
.tribe-badge--solid { background: var(--tc-brand-fill); color: var(--tc-text-on-brand); }
.tribe-badge--success { background: color-mix(in srgb, var(--tc-success) 14%, transparent); color: var(--tc-success-ink); }
.tribe-badge--danger { background: color-mix(in srgb, var(--tc-danger) 14%, transparent); color: var(--tc-danger); }
.tribe-badge--warning { background: color-mix(in srgb, var(--tc-warning) 18%, transparent); color: var(--tc-warning-ink); }
.tribe-badge--muted { color: rgb(var(--tc-ink) / .55); }
/* --photo — dark glass over an image, same in both themes */
.tribe-badge--photo { background: rgba(0, 0, 0, .62); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* fallback without color-mix */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .tribe-badge--success,
.tribe-badge--danger,
.tribe-badge--warning { background: rgb(var(--tc-ink) / .07); }
}

/* shapes */
.tribe-badge--caps { padding: 3px var(--tc-space-1); border-radius: 3px; font-family: var(--tc-font-display); font-size: var(--tc-text-2xs); font-weight: 500; letter-spacing: -.2px; text-transform: none; line-height: 1.3; }
.tribe-badge--count { min-width: 18px; height: 18px; padding: 0 5px; font-size: var(--tc-text-2xs); font-weight: 700; letter-spacing: 0; line-height: 1; }

/* placement */
.tribe-ui .bell-badge { position: absolute; top: -2px; right: -4px; border: 2px solid var(--tc-white); }

/* =============================================================================
                                 FEED CONTROLS
   ============================================================================= */
/* The search, view-toggle and filter controls that sit inside a page header. */

.tribe-feed-controls { display: inline-flex; align-items: center; gap: var(--tc-space-2); }

/* the square icon buttons in the controls cluster — its own control, so the
   cluster can size down on a phone without touching .tribe-btn everywhere */
.tribe-fc-btn {
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--tc-btn-h);
  height: var(--tc-btn-h);
  padding: 0;
  border: 1px solid rgb(var(--tc-ink) / .12);
  border-radius: var(--tc-radius-btn);
  background-color: rgb(var(--tc-ink) / .06);
  color: rgb(var(--tc-ink) / .72);
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}
.tribe-fc-btn:hover { background-color: rgb(var(--tc-ink) / .1); color: rgb(var(--tc-ink)); }
.tribe-fc-btn.is-active { background-color: rgb(var(--tc-ink)); border-color: rgb(var(--tc-ink)); color: var(--tc-white); }
.tribe-fc-btn svg { width: 17px; height: 17px; }

/* the pending count pinned to the button's corner */
.tribe-fc-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: var(--tc-radius-pill);
  background: var(--tc-danger);
  color: #fff;
  font-size: var(--tc-text-xs);
  font-weight: 600;
  line-height: 1;
}

/* PAGE TITLE */
/* lane title — one class for every page heading */
.tribe-fc-heading {
  font-family: var(--tc-font-display);
  font-size: var(--tc-text-lg);
  font-weight: 600;
  color: rgb(var(--tc-ink));
  letter-spacing: -.3px;
  /* block margins zeroed; margin-right auto pushes the controls over */
  margin: 0 auto 0 0;
  /* line-height stated so h1 and div titles match */
  line-height: 1.45;
}

/* SEARCH field */
.tribe-fc-search { display: flex; align-items: center; position: relative; }

/* :root, not a bare class. The control floor in FORMS below is
    at (0,1,0) and sits LATER in this sheet, so a
   plain .tribe-fc-search-input tied and lost — the field rendered full width
   with a border instead of staying collapsed, and the icon only focused it
   instead of sliding it open. (0,1,1) settles it. */
:root .tribe-fc-search-input {
  width: 0;
  min-width: 0;
  /* the token, not a hardcoded 38 — the button next to it is --tc-btn-h, and
     the two were 5px apart in height once the buttons were shortened */
  height: var(--tc-btn-h);
  padding: 0;
  opacity: 0;
  border: 1px solid transparent;
  /* the field and the button read as ONE control: this rounds its outer (left)
     edge only, and the button squares the edge they share */
  border-radius: var(--tc-radius-btn) 0 0 var(--tc-radius-btn);
  background: var(--tc-white);
  color: rgb(var(--tc-ink));
  font: inherit;
  font-size: var(--tc-text-sm);
  box-sizing: border-box;
  transition: width var(--tc-ease), opacity var(--tc-ease), padding var(--tc-ease), border-color var(--tc-ease);
}

/* VIEW SWITCH — list / grid */
/* THE VIEW SWITCH sits in a row with the search button and the posts filter and
   has to read as the same family. Measured before this change: those two were
   33px tall at y=43 with a 5px radius, while this group was 35px at y=42 with a
   7.2px radius - one pixel higher, two pixels taller and visibly rounder, which
   is what made the row look unaligned.

   box-sizing + an explicit height is what fixes it: the group wraps 33px items
   in a 1px border, so without it the border ADDS to the item height instead of
   being absorbed by it. --tc-radius-btn, not --tc-radius-control, so the corner
   matches the buttons either side. */
.tribe-fc-view {
  display: inline-flex;
  box-sizing: border-box;
  height: var(--tc-btn-h);
  border: 1px solid rgb(var(--tc-ink) / .12);
  border-radius: var(--tc-radius-btn);
  background: rgb(var(--tc-ink) / .06);
  overflow: hidden;
}

.tribe-fc-view a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--tc-btn-h);
  height: 100%;
  /* the group carries the fill now, so the items are transparent until active -
     the old #00000010 on each item double-tinted against the group */
  background: none;
  color: rgb(var(--tc-ink) / .72);
  text-decoration: none;
}
/* VIEW SWITCH — list / grid */
.tribe-fc-view a:hover { background: rgb(var(--tc-ink) / .04); color: rgb(var(--tc-ink)); }
.tribe-fc-view a.is-active { background: rgb(var(--tc-ink)); color: var(--tc-white); }

.tribe-fc-view a svg { width: 16px; height: 16px; }

/* SEARCH RESULTS */
/* the banner under the composer: what was found, and a field to search again */
/* Symmetric gap: it sat flush against the composer above it, so the two read
   as one undivided white slab. Its left/right edges already line up with the
   feed cards below. */
.tribe-search-results { margin-top: var(--tc-space-5); margin-bottom: var(--tc-space-5); }
.tribe-search-results__head {
  display: flex;
  align-items: baseline;
  gap: var(--tc-space-4);
  margin-bottom: var(--tc-space-4);
}
.tribe-search-results__count { flex: 1 1 auto; min-width: 0; color: rgb(var(--tc-ink) / .72); }
.tribe-search-results__count strong { color: rgb(var(--tc-ink)); }
.tribe-search-results__clear { flex: 0 0 auto; font-size: var(--tc-text-sm); }
.tribe-search-results__form { display: flex; gap: var(--tc-space-3); }
.tribe-search-results__form input { flex: 1 1 auto; min-width: 0; }

@media (max-width: 767px) {
  /* sizes come from --tc-btn-h now; only the glyph needs a nudge */
  .tribe-fc-btn svg,
  .tribe-fc-view a svg { width: 15px; height: 15px; }
}

/* FILTER POPUP */
.tribe-fc-pop {
  position: absolute;
  top: 44px;
  right: 0;
  z-index: 60;
  display: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--tc-ease), transform var(--tc-ease);
}
/* FILTER POPUP */
.tribe-fc-pop.is-open { display: block; opacity: 1; transform: translateY(0); }

.tribe-fc-menu { min-width: 230px; }

.tribe-fc-label { flex: 1 1 auto; line-height: 1.4; }
.tribe-fc-count { color: rgb(var(--tc-ink) / .55); font-size: var(--tc-text-xs); }
.tribe-fc-count--muted { opacity: .6; }
/* the x on an active filter label */
.tribe-fc-clear { color: rgb(var(--tc-ink) / .55); }

/* SEARCH field */
:root .tribe-fc-search.is-open .tribe-fc-search-input {
  width: 200px;
  padding: 0 var(--tc-space-4);
  border-color: rgb(var(--tc-ink) / .12);
  opacity: 1;
  /* no gap: it butts straight against the button. The shared edge is also
     de-doubled so the pair shows one hairline, not two. */
  margin-right: 0;
  border-right-color: transparent;
}
/* The global .tribe-base :focus-visible ring is a 3px halo. On this field it
   reads as a second, fatter border outside the one the open state already
   draws, and it spills over the button they share an edge with. The open state
   is its own focus affordance, so drop the halo and lean on the border. */
:root .tribe-fc-search-input:focus-visible {
  box-shadow: none;
  border-color: var(--tc-brand);
}

/* only while the field is open — on its own the button is a normal square icon */
:root .tribe-fc-search.is-open .tribe-fc-btn { border-radius: 0 var(--tc-radius-btn) var(--tc-radius-btn) 0; }

/* title + one-line subtitle inside the 60px bar (subtitle never wraps) */
.tribe-fc-headgroup {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  min-width: 0;
  margin-right: auto;
}

.tribe-fc-headgroup .tribe-fc-heading { line-height: 1.25; margin-right: 0; }

.tribe-fc-subheading {
  margin: 0;
  font-size: var(--tc-text-xs);
  line-height: 1.25;
  color: rgb(var(--tc-ink) / .72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =============================================================================
                               RAIL — TRIBE SWITCHER
   ============================================================================= */
/* switcher trigger */
.tribe-selector { display: flex; align-items: center; }
.tribe-ui .currentTribe { width: 100%; }

/* plain row, separated by a rule */
.tribe-ui .currentTribe .dropdown-toggle {
  display: flex;
  align-items: center;
  gap: var(--tc-space-3);
  padding: var(--tc-space-1) var(--tc-space-2) var(--tc-space-1) var(--tc-space-1);
  border: 0;
  border-radius: var(--tc-radius-control);
  background: none;
  color: rgb(var(--tc-ink));
  font-size: var(--tc-text-sm);
  cursor: pointer;
  transition: background-color var(--tc-ease);
}
.tribe-ui .currentTribe .dropdown-toggle:hover { background: rgb(var(--tc-ink) / .05); }

.tribe-ui .currentTribe .fi-tr-angle-down { flex: 0 0 auto; font-size: var(--tc-text-2xs); opacity: .6; }

/* TRIBE NAME */
/* TRIBE NAME */
.tribe-toggle-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 600;
}

/* TRIBE WORDMARK — shown instead of the name when the tribe sets a Main Header
   Logo. Uploads are trimmed to their ink (logoTrimBox), then boxed to 180x36 and
   letterboxed by object-fit: never stretched, never able to push the rail. */
.tribe-switcher-logo {
  flex: 1 1 auto;
  width: auto;
  max-width: 180px;
  height: 36px;
  min-width: 0;
  object-fit: contain;
  object-position: left center;
}
/* one image for both themes — flip it only under dark. hue-rotate keeps a
   coloured mark's hue after the lightness flip; on black/white ink it is a no-op */
[data-theme="dark"] .tribe-switcher-logo--invert-dark { filter: invert(1) hue-rotate(180deg); }
@media (max-width: 1023px) {
  /* the bar is 56px tall; the logo sizes to its text, clear of the caret */
  .tribe-switcher-logo { width: fit-content; max-width: 160px; height: 28px; margin-right: 20px; }
}

/* =============================================================================
                                   RAIL — FOOTER
   ============================================================================= */
/* coins and the dropdown toggles */

/* the header's icon cluster. Carried an inline style until 2026-09-23, which
   beat every sheet — the rail's own gap could not take effect. */
.header-actions { display: flex; align-items: center; gap: var(--tc-space-3); }

/* COIN PILL */
.tribe-ui .coins-display {
  display: inline-flex;
  align-items: center;
  gap: var(--tc-space-2);
  height: 32px;
  padding: 0 var(--tc-space-4);
  border: 1px solid rgb(var(--tc-ink) / .12);
  border-radius: var(--tc-radius-control);
  background: rgb(var(--tc-ink) / .04);
  color: rgb(var(--tc-ink));
  font-size: var(--tc-text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--tc-ease);
}

.tribe-ui .coins-display:hover,
.tribe-ui .coins-display:focus {
  background: rgb(var(--tc-ink) / .09);
  color: rgb(var(--tc-ink));
  text-decoration: none;
}

.tribe-ui .coin-icon {
  /* No `width`. A tribe's coin image is whatever aspect it was uploaded at, and
     forcing 18x18 with object-fit:contain letterboxed the wide ones inside a
     square box - so the mark drew smaller than the box it reserved and sat off
     from the number beside it. Height alone fixes the line and lets the width
     follow the image. */
  height: 18px;
  width: auto;
  flex-shrink: 0;
  object-fit: contain;
  display: block;
}

/* messages / alerts icons */
.tribe-ui .bell-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--tc-space-1);
  background: none;
  /* .78 at rest so the open state (full ink) is visibly brighter. At .92 there
     was almost no distance between "idle" and "this panel is open", which is
     the only signal left now that the background circle is gone. */
  color: rgb(var(--tc-ink) / .78);
  cursor: pointer;
}
.tribe-ui .bell-toggle:hover { color: rgb(var(--tc-ink)); }

.tribe-ui .bell-toggle .header-icon {
  display: block;
  width: 20px;
  height: 20px;
  color: inherit;
}

/* These toggles carry an ICON-FONT glyph now, not an inline <svg>. A glyph is
   text: the 20px box above constrains its container but the mark itself is sized
   by font-size, so without this it rendered at the inherited body size. line-height
   1 keeps it centred in the square box rather than sitting on a text baseline. */
.tribe-ui .bell-toggle i.header-icon {
  /* 17, not 20. These glyphs carry more ink than the 1.6-stroke SVGs they
     replaced, so at the same nominal size they read noticeably heavier than the
     nav icons beside them and dominated a 32px toggle. */
  font-size: 17px;
  line-height: 1;
}

/* OPTICAL, not metric. Measured on a canvas, fi-tr-bell and fi-tr-envelopes ink
   to exactly the same height at 17px - so the CSS looked correct while the bell
   still read as the taller of the two. The cause is shape, not size: the bell is
   a narrow upright form and the envelope a wide flat one, and at equal height
   the upright form looks larger. A point off the bell brings its drawn height to
   11px against the envelope's 12 and the pair sits level. Do not "correct" this
   back to a single shared value; the numbers being equal is the problem. */
.tribe-ui .bell-toggle i.fi-tr-bell.header-icon { font-size: 16px; }

.tribe-ui .profile-menu { display: flex; align-items: center; cursor: pointer; }

/* PROFILE AVATAR BUTTON */
.tribe-ui .profile-menu-toggle {
  --tc-av: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: rgb(var(--tc-ink) / .09);
  color: rgb(var(--tc-ink) / .72);
}

.tribe-ui .profile-menu-toggle img { width: 100%; height: 100%; object-fit: cover; }
.tribe-ui .profile-menu-toggle .fa { font-size: var(--tc-text-xl); }

/* theme toggle — label shows the theme you would switch to */
.tribe-theme-toggle__off { display: none; }
[data-theme="dark"] .tribe-theme-toggle__on { display: none; }
[data-theme="dark"] .tribe-theme-toggle__off { display: inline; }

/* profile menu */
/* The profile dropdown matches the rail column it opens from, so the panel and
   the menu share one edge instead of the menu jutting past it. --tc-col-side is
   the rail's own width token.

   Specificity note: `.tribe-ui .profile-menu-list` alone is (0,2,0) and ties
   with `.tribe-ui .dropdown-menu` further down this sheet, which the menu also
   matches - the later rule won the tie and the menu kept sizing itself to its
   content (measured 380px against a 264px rail, overhanging the feed).
   `.profile-menu` in the middle takes this to (0,3,0) so the intent is not
   decided by source order. max-width keeps it inside a narrow viewport. */
.tribe-ui .profile-menu .profile-menu-list {
  /* No `width` here on purpose. When this menu opens in the rail tray it is a
     popover positioned by html/js/tc-rail-menus.js, which writes width, left and
     top as INLINE styles - so any width declared here is dead on that path and
     only looks authoritative. That file is where the rail width is applied.
     What still belongs here is releasing the 180px min-width inherited from
     .tribe-ui .dropdown-menu, which would otherwise be the floor on surfaces
     the script does not manage. */
  min-width: 0;
  max-width: calc(100vw - var(--tc-space-6) * 2);
}

/* The account header of the profile menu. It is an identity strip, not a hero:
   at 12/14 padding around a 44px avatar it took most of the panel's height
   before a single link was reached. */
.tribe-ui .profile-menu-account {
  display: flex;
  align-items: center;
  gap: var(--tc-space-3);
  padding: var(--tc-space-2) var(--tc-space-3);
  margin-bottom: var(--tc-space-1);
  border-radius: var(--tc-radius-tile);
  background: rgb(var(--tc-ink) / .05);
}

.tribe-ui .profile-menu-avatar {
  /* 34, close to the 35px component default. At 44 it was the largest thing in
     the panel and towered over the name it belongs to. */
  --tc-av: 34px;
  border: 1px solid rgb(var(--tc-ink) / .12);
  background: var(--tc-white);
}

.tribe-ui .profile-menu-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tribe-ui .profile-menu-avatar .fa-user { font-size: var(--tc-text-xl); color: rgb(var(--tc-ink) / .72); }
.tribe-ui .profile-menu-details { flex: 1; min-width: 0; }

/* ── The profile panel ────────────────────────────────────────────────────
   It opens over the rail, which is already dark glass, so at the shared panel
   background it read as the same sheet of material and had no edge of its own.
   A ~25% black wash under the glass separates it without turning it opaque. */
/* The glass panel. Scoped HERE, to the profile menu, because this is the one
   dropdown whose contents were built for a dark surface - it opens over the dark
   rail and its rows are white. The notifications and messages panels share the
   .dropdown-menu class but not that assumption. */
.tribe-ui .profile-menu .profile-menu-list {
  padding: var(--tc-space-2);
  background-color: rgb(0 0 0 / .25);
  -webkit-backdrop-filter: blur(60px) saturate(100%) brightness(0.5);
  backdrop-filter: blur(60px) saturate(100%) brightness(0.5);
}

/* No rules BETWEEN the links - they chopped the panel into fragments that
   implied groupings the list does not really have. The exception is the one
   above Sign Out, which separates "go somewhere" from "leave", and is kept by
   the more specific rule below. */
.tribe-ui .profile-menu .profile-menu-list > .divider { display: none; }
.tribe-ui .profile-menu .profile-menu-list > .divider--signout {
  display: block;
  margin: var(--tc-space-2) var(--tc-space-2);
  background: rgb(255 255 255 / .14);
}

/* Rubik (the display face) for the whole panel - the account name, the email
   and every link - so it matches the rail nav it opens from rather than the
   body face. */
.tribe-ui .profile-menu .profile-menu-list,
.tribe-ui .profile-menu .profile-menu-list > li > a,
.tribe-ui .profile-menu-name,
.tribe-ui .profile-menu-email {
  font-family: var(--tc-font-display);
}

/* The icons take the row's own colour. They were dimmed to 55% here, which was
   overcorrecting - they read as disabled rather than quiet. Reverted: no colour
   rule at all, so the icon and its label match. */

.tribe-ui .profile-menu-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--tc-text-base);
  font-weight: 600;
  color: rgb(var(--tc-ink));
}

.tribe-ui .profile-menu-email {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--tc-text-xs);
  color: rgb(var(--tc-ink) / .72);
}

/* PROFILE AVATAR BUTTON */
.tribe-ui .profile-menu-toggle:hover { background: rgb(var(--tc-ink) / .12); }

/* =============================================================================
                                       MENUS
   ============================================================================= */
/* One menu everywhere. Bootstrap's own markup gets the same look:
   panel  .tribe-menu / .dropdown-menu     row  .tribe-menu__item / .dropdown-menu > li > a
   rule   .tribe-menu__sep / .divider      the row an icon sits in is 16px wide */
.tribe-ui .dropdown-menu {
  min-width: 180px;
  padding: var(--tc-space-1);
  margin: var(--tc-space-1) 0 0;
  list-style: none;
  border: 1px solid rgb(var(--tc-ink) / .12);
  border-radius: var(--tc-radius-tile);
  /* The plain surface. The glass treatment lives on the PROFILE panel only
     (further down) - it was briefly applied to every .dropdown-menu, and that
     was wrong: the notifications and messages panels put their own dark body
     text inside this box on the assumption it is a light surface, so a
     brightness(0.5) backdrop turned them into dark text on a dark panel. */
  background: var(--tc-white);
  box-shadow: var(--tc-shadow);
  color: rgb(var(--tc-ink));
  font-size: var(--tc-text-sm);
}

.tribe-ui .dropdown-menu > li > a {
  display: flex;
  align-items: center;
  gap: var(--tc-space-3);
  width: 100%;
  padding: var(--tc-space-2) var(--tc-space-4);
  border: 0;
  border-radius: var(--tc-radius-control);
  background: none;
  color: rgb(var(--tc-ink));
  font-family: inherit;
  font-size: var(--tc-text-sm);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.tribe-ui .dropdown-menu > li > a:hover,
.tribe-ui .dropdown-menu > li > a:focus,
.tribe-ui .dropdown-menu > .active > a {
  background: rgb(var(--tc-ink) / .04);
  background-image: none;
  color: rgb(var(--tc-ink));
  text-decoration: none;
}

.tribe-ui .dropdown-menu > li > a .fa {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  opacity: .65;
}

.tribe-ui .dropdown-menu > .divider { height: 1px; margin: var(--tc-space-1) var(--tc-space-2); background: rgb(var(--tc-ink) / .07); padding: 0; }

/* --- rail flyout and its panels --- */
/* rail flyout — positioned by tc-rail-menus.js */
.tribe-ui .dropdown-menu:popover-open {
  position: fixed;
  inset: auto;
  right: auto;
  margin: 0;
  padding: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--tc-glass-line);
  border-radius: var(--tc-radius-panel);
  background: var(--tc-sheen), var(--tc-glass);
  box-shadow: 0 18px 48px rgba(16, 18, 22, .22);
  -webkit-backdrop-filter: blur(60px) saturate(150%);
  backdrop-filter: blur(60px) saturate(150%);
  color: rgb(var(--tc-ink));
  /* fade + 2px on open */
  animation: tcMenuIn 180ms var(--tc-motion);
}

@keyframes tcMenuIn {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: none; }
}

/* reduced motion: fade only */
@media (prefers-reduced-motion: reduce) {
  .tribe-ui .dropdown-menu:popover-open { animation: tcMenuFade .14s ease-out; }
  @keyframes tcMenuFade { from { opacity: 0; } to { opacity: 1; } }
}

/* --- the alerts / messages popup --- */
/* The profile menu's sibling: same panel, same gutter, same row shape. Only
   the header row, the scrolling list and the avatar rows are its own.
   Unscoped like .tribe-menu — the legacy header shows this popup too and has
   no .tribe-ui. On the desktop rail :popover-open repaints it as glass and
   tc-rail-menus.js sets the width, exactly as it does for the profile menu. */
.notifications-dropdown .notifications-menu {
  width: 360px;
  max-width: min(400px, 92vw);
  max-height: none;
  padding: var(--tc-space-1);
  overflow: hidden;
  border: 1px solid rgb(var(--tc-ink) / .12);
  border-radius: var(--tc-radius-tile);
  background: var(--tc-white);
  color: rgb(var(--tc-ink));
  font-size: var(--tc-text-sm);
}

/* header row — one row tall, ruled off from the list below it */
.notifications-dropdown .notifications-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tc-space-2);
  padding: var(--tc-space-2) var(--tc-space-3);
  border-bottom: 1px solid rgb(var(--tc-ink) / .07);
}

.notifications-dropdown .notifications-menu-header form { margin: 0; }

.notifications-dropdown .notifications-menu-title {
  display: flex;
  align-items: center;
  gap: var(--tc-space-2);
  font-size: var(--tc-text-sm);
  font-weight: 600;
  letter-spacing: .01em;
  color: rgb(var(--tc-ink));
}

/* the header glyph sits at the same weight as a menu row's icon */
.notifications-dropdown .notifications-menu-title .fa { width: 16px; opacity: .65; }

/* see-all / clear-all / open-inbox — a ghost action, not a button */
.notifications-dropdown .notifications-menu-clear {
  display: inline-flex;
  align-items: center;
  height: 26px;
  text-decoration: none;
  padding: 0 var(--tc-space-3);
  border: 1px solid rgb(var(--tc-ink) / .12);
  border-radius: var(--tc-radius-pill);
  background: rgb(var(--tc-ink) / .04);
  color: rgb(var(--tc-ink) / .72);
  font-size: var(--tc-text-xs);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--tc-ease), color var(--tc-ease);
}

.notifications-dropdown .notifications-menu-clear:hover,
.notifications-dropdown .notifications-menu-clear:focus {
  background: rgb(var(--tc-ink) / .1);
  color: rgb(var(--tc-ink));
  text-decoration: none;
}
/* phones: See all / Clear all / Open Inbox take a full thumb target */
@media (max-width: 767px) {
  .notifications-dropdown .notifications-menu-clear { height: var(--tc-tap); padding: 0 var(--tc-space-4); }
}

/* the scrolling list — the panel's gutter is its only side padding */
.notifications-dropdown .notifications-menu-list {
  max-height: min(420px, 60vh);
  padding: var(--tc-space-1) 0 0;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
}

.notifications-dropdown .notifications-menu-list::-webkit-scrollbar { width: 6px; }

.notifications-dropdown .notifications-menu-list::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: rgb(var(--tc-ink) / .18);
}

/* main.css rules every row off with a hardcoded #ccc line — the rows are
   rounded hover tiles here, as in every other menu */
.notifications-dropdown .notification-dropdown-item { position: relative; border-bottom: 0; }

/* a row, shared by the messages and alerts panels */
.notifications-dropdown .notification-message-item,
.notifications-dropdown .notification-dropdown-item .notification {
  display: flex;
  align-items: center;
  gap: var(--tc-space-3);
  padding: var(--tc-space-2);
  border-bottom: 0;
  border-radius: var(--tc-radius-control);
  color: rgb(var(--tc-ink));
  text-decoration: none;
  transition: background-color var(--tc-ease);
}

/* rows are split by hairlines rather than floating as separate tiles */
.notifications-dropdown .notifications-menu-list > li + li { border-top: 1px solid rgb(var(--tc-ink) / .07); }

/* the row is the hover tile, so the rounding shows */
.notifications-dropdown .notification-message-item:hover,
.notifications-dropdown .notification-message-item:focus,
.notifications-dropdown .notification-dropdown-item:hover .notification {
  background: rgb(var(--tc-ink) / .04);
  background-image: none;
  color: rgb(var(--tc-ink));
  text-decoration: none;
}

/* the toggle reads as pressed while its panel is open. These are popovers, so
   the state lives on the MENU — :has() reads it back onto the trigger. The
   legacy header still uses bootstrap's .open on the wrapper. */
.notifications-dropdown.open > .dropdown-toggle,
.messages-dropdown.open > .dropdown-toggle,
.notifications-dropdown:has(.notifications-menu:popover-open) > .dropdown-toggle,
.messages-dropdown:has(.dropdown-menu:popover-open) > .dropdown-toggle,
.profile-menu:has(.dropdown-menu:popover-open) > .dropdown-toggle,
.profile-menu.open > .dropdown-toggle {
  /* NO background circle. These toggles are inline <span>s, so the fill painted
     against the inline content box rather than the 32px square the glyph sits
     in - it read as a blob offset from the icon. The icon going full-strength
     says "this panel is open" without needing a box to be correct. */
  border-radius: var(--tc-radius-pill);
  background: none;
  color: rgb(var(--tc-ink));
}

/* the avatar gets a ring rather than a fill, which a photo would hide */
.profile-menu:has(.dropdown-menu:popover-open) > .profile-menu-toggle,
.profile-menu.open > .profile-menu-toggle {
  box-shadow: 0 0 0 2px var(--tc-white), 0 0 0 4px rgb(var(--tc-ink) / .35);
}

/* a hairline ring separates a row avatar from the row's hover tint */
.notifications-dropdown .notification-message-item img,
.notifications-dropdown .notification-dropdown-item .notification .image img {
  border: 1px solid rgb(var(--tc-ink) / .12);
}

/* --- alerts rows --- */
/* tribalry.css lays this row out as percentage columns (image 14 / clear 10 /
   message 68 / icon 8), which collapses under flex; these give it the same
   avatar + body + trailing-action shape the messages rows already have. The
   :last-child twin matches tribalry's own :last-child width override. */
.notifications-dropdown .notification-dropdown-item .notification .image {
  width: var(--tc-av, 40px);
  flex: 0 0 auto;
}

/* main.css pads .img-circle-header out to a 76px pill and rings it grey */
.notifications-dropdown .notification-dropdown-item .notification .image .img-circle-header,
.notifications-dropdown .notification-dropdown-item .notification .image .square-crop-image {
  width: var(--tc-av, 40px);
  height: var(--tc-av, 40px);
  padding: 0;
  border: 0;
  border-radius: var(--tc-radius-pill);
  background-color: rgb(var(--tc-ink) / .06);
  background-position: center;
  background-size: cover;
}

.notifications-dropdown .notification-dropdown-item .notification .message,
.notifications-dropdown .notification-dropdown-item .notification .message:last-child {
  width: auto;
  min-width: 0;
  flex: 1 1 auto;
  padding: 0;
  font-size: var(--tc-text-sm);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.notifications-dropdown .notification-dropdown-item .notification .message .date {
  margin-top: 2px;
  font-size: var(--tc-text-xs);
  color: rgb(var(--tc-ink) / .55);
}

/* the name in a row reads like a message row's name */
.notifications-dropdown .notification-dropdown-item .notification .message strong { font-weight: 600; color: rgb(var(--tc-ink)); }

/* clear ✕ — last in the row, revealed on hover or keyboard focus */
.notifications-dropdown .notification-dropdown-item .notification .clear-bt {
  width: auto;
  flex: 0 0 auto;
  order: 5;
  opacity: 0;
  transition: opacity var(--tc-ease);
}

.notifications-dropdown .notification-dropdown-item .notification .clear-bt form { margin: 0; }

.notifications-dropdown .notification-dropdown-item .notification .clear-bt .btn-link {
  padding: 0;
  border: 0;
  background: none;
  color: rgb(var(--tc-ink) / .72);
}

.notifications-dropdown .notification-dropdown-item:hover .clear-bt,
.notifications-dropdown .notification-dropdown-item .clear-bt:focus-within { opacity: .7; }

/* tablets have no hover and no swipe-to-clear, so keep it faintly visible */
@media (hover: none) and (min-width: 768px) {
  .notifications-dropdown .notification-dropdown-item .notification .clear-bt { opacity: .45; }
}

.tribe-ui .notification-message-item.unread .nm-name { font-weight: 700; color: rgb(var(--tc-ink)); }
.tribe-ui .notification-message-item.unread .nm-last { font-weight: 600; color: rgb(var(--tc-ink)); }

.tribe-ui .nm-avatar {
  position: relative;
  color: rgb(var(--tc-ink) / .72);
}

.tribe-ui .nm-body { flex: 1; min-width: 0; }
.tribe-ui .nm-row1 { display: flex; align-items: baseline; gap: var(--tc-space-2); }

.tribe-ui .nm-row2 {
  display: flex;
  align-items: center;
  gap: var(--tc-space-2);
  margin-top: 2px;
}

.tribe-ui .nm-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--tc-text-sm);
  font-weight: 500;
  color: rgb(var(--tc-ink) / .72);
}

.tribe-ui .nm-last {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--tc-text-xs);
  color: rgb(var(--tc-ink) / .72);
}

.tribe-ui .nm-time { flex-shrink: 0; font-size: var(--tc-text-xs); color: rgb(var(--tc-ink) / .55); }

/* AVATAR STACK — two overlapping member photos + a count, for group rows */
/* .tribe-avatar (later in this sheet) clips and fills; a stack must do neither */
.tribe-avatar-stack,
.tribe-avatar.tribe-avatar-stack { position: relative; overflow: visible; border: 0; background: transparent; }
.tribe-avatar-stack .tribe-stack-av { position: absolute; --tc-av: 62%; }
.tribe-avatar-stack .tribe-stack-av:nth-child(1) { top: 0; left: 0; z-index: 1; }
.tribe-avatar-stack .tribe-stack-av:nth-child(2) { right: 0; bottom: 0; z-index: 2; }
.tribe-avatar-stack .tribe-stack-count {
  position: absolute;
  right: -3px;
  bottom: -3px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border: 1.5px solid var(--tc-white);
  border-radius: var(--tc-radius-pill);
  background: var(--tc-brand-fill);
  color: var(--tc-text-on-brand);
  font-size: var(--tc-text-2xs);
  font-weight: 700;
  line-height: 1;
}

/* tribe switcher menu rows — scrolls past its cap with no visible scrollbar */
.tribe-dropdown {
  min-width: 260px;
  max-height: min(420px, 60vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  padding: var(--tc-space-2);
  margin: 0;
  list-style: none;
}
.tribe-dropdown::-webkit-scrollbar { display: none; }

.tribe-dropdown > li { border-bottom: 0; }

.tribe-dropdown > li > a {
  display: flex;
  align-items: center;
  gap: var(--tc-space-4);
  padding: var(--tc-space-1);
  margin-bottom: 3px;
  border: 1px solid transparent;
  border-radius: var(--tc-radius-control);
  color: rgb(var(--tc-ink));
  font-size: var(--tc-text-sm);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--tc-ease), border-color var(--tc-ease);
}

/* kill the Bootstrap theme gradient */
.tribe-dropdown > li > a:hover,
.tribe-dropdown > li > a:focus {
  background-color: rgb(var(--tc-ink) / .06);
  background-image: none;
  color: rgb(var(--tc-ink));
  text-decoration: none;
}

/* current tribe — bordered */
.tribe-dropdown > li.is-active-tribe > a,
.tribe-dropdown > li.is-active-tribe > a:hover,
.tribe-dropdown > li.is-active-tribe > a:focus {
  border-color: rgb(var(--tc-ink) / .12);
  background-color: rgb(var(--tc-ink) / .09);
  background-image: none;
  font-weight: 600;
}

.tribe-dropdown .tribe-img,
.tribe-dropdown .superadmin-icon {
  width: var(--tc-av);
  height: var(--tc-av);
  border: 1px solid rgb(var(--tc-ink) / .12);
}

/* the shield sits in the same 32px column as every tribe avatar */
.tribe-dropdown .superadmin-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgb(var(--tc-ink));
  font-size: var(--tc-text-md);
}

.tribe-dropdown .tribe-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tribe-dropdown .unread-tribe {
  flex-shrink: 0;
  font-size: var(--tc-text-xs);
  font-weight: 600;
  color: rgb(var(--tc-ink) / .72);
}

/* SuperAdmin row — ruled off from the tribes below it */
.tribe-dropdown .superadmin-entry,
.tribe-dropdown .superadmin-entry:hover {
  padding-bottom: var(--tc-space-2);
  margin-bottom: var(--tc-space-2);
  border-bottom: 1px solid rgb(var(--tc-ink) / .12);
  background-color: transparent;
  background-image: none;
}

.tribe-dropdown .superadmin-entry .tribe-name { color: rgb(var(--tc-ink)); font-weight: 600; }

/* no brand fill: on a tribe whose colour is pale the shield vanished. Same
   treatment as every other row's avatar. */
.tribe-dropdown .superadmin-entry .superadmin-icon {
  border: 1px solid rgb(var(--tc-ink) / .12);
  background: rgb(var(--tc-ink) / .05);
  color: rgb(var(--tc-ink));
  font-size: var(--tc-text-md);
}

/* empty state — same box as a run of rows, centred */
.notifications-dropdown .notification-empty {
  padding: var(--tc-space-8) var(--tc-space-5);
  color: rgb(var(--tc-ink) / .72);
  font-size: var(--tc-text-base);
  text-align: center;
}

/* Matches .fi as well as .fa. The empty-state glyphs became icon-font `.fi`
   elements, and this rule still named only `.fa` - so the icon lost its block
   display, its size and its colour and rendered as an oversized mark jammed
   against the text. Sized down too: it is a quiet placeholder, not a hero. */
.notifications-dropdown .notification-empty .fa,
.notifications-dropdown .notification-empty .fi {
  display: block;
  margin-bottom: var(--tc-space-2);
  color: rgb(var(--tc-ink) / .35);
  font-size: 22px;
  line-height: 1;
}

/* loading state — one quiet line, no row chrome */
.notifications-dropdown .notification-loading {
  padding: var(--tc-space-5);
  color: rgb(var(--tc-ink) / .72);
  font-size: var(--tc-text-sm);
  text-align: center;
}

/* a row that failed to clear — one line above it, in danger ink */
.notifications-dropdown .notification-clear-error {
  padding: var(--tc-space-2) var(--tc-space-5);
  color: var(--tc-danger);
  font-size: var(--tc-text-sm);
  text-align: center;
}

/* phones and tablets: both header panels drop from under the top bar in the
   same box, so alerts and profile read as one set */
@media (max-width: 1023px) {
  .tribe-ui .notifications-dropdown .notifications-menu,
  .tribe-ui .profile-menu .profile-menu-list {
    position: fixed;
    top: calc(var(--tc-topbar-h, 56px) + var(--tc-space-2));
    left: var(--tc-space-4);
    right: var(--tc-space-4);
    width: auto;
    min-width: 0;
    max-width: none;
    margin: 0;
  }
  /* Phones: the panel drops over the light lane, not the dark rail, so it takes
     the plain dropdown surface instead of the dark glass. */
  .tribe-ui .profile-menu .profile-menu-list {
    padding: var(--tc-space-2);
    background: var(--tc-white);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .tribe-ui .profile-menu .profile-menu-list > .divider--signout { background: rgb(var(--tc-ink) / .1); }
}

/* =============================================================================
                                 TOP NAV TAB STRIP
   ============================================================================= */
/* legacy page nav, unscoped */

.tribe-topnav {
  width: 100%;
  margin: 0 auto;
  background-color:#ffffff !important;
  border-bottom: 1px solid #f0f0f0;
  padding: 5px;
}

/* FA icon spacing inside each tab. */
.tribe-topnav .tribe-tab .fa { margin-right: 3px; opacity: 0.85; }

/* Per-tab unread badge (v3 tabs primitive doesn't ship one). */
.tribe-topnav .tribe-tab {
  position: relative;
  font-size: 13px;
  letter-spacing: -.3px;
  font-weight: 400;
  transition: 0.1s ease-in-out;
  border-radius: 4px;
}

.tribe-topnav .tribe-tab.active { box-shadow: #c7c7c7 0px 1px 2px; }
.tribe-topnav .tribe-tab:hover { background-color: #f7f8f9; transition: 0.1s ease-in-out; }

.tribe-topnav .tribe-tab-badge {
  position: absolute;
  top: 2px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 9999px;
  background: #ff6b35;
  color: #ffffff;
  font-size: 10px;
  line-height: 16px;
  font-weight: 700;
  text-align: center;
}

.tribe-topnav .tribe-tabs-table { background-color: white; }

/* sticky mode — pinned under the header */
.tribe-topnav.tc-topnav--sticky {
  position: fixed;
  top: calc(var(--header-h, 70px) + var(--tc-topbar-h, 0px));
  left: 0;
  right: 0;
  z-index: 999;
  margin: 0;
}

/* =============================================================================
                                      AVATARS
   ============================================================================= */
/* .tribe-avatar + a size:  --sm 28px · (default) 40px · --lg 96px.
   A one-off size sets --tc-av instead of earning a class.
   --ring = the white cut-out ring overlapping facepiles use. */
.tribe-avatar {
  box-sizing: border-box;
  /* A hairline so a light or white profile photo still has an edge against a
     light card - without it the avatar dissolved into the surface and only the
     ones with dark photos read as images at all. box-sizing:border-box above is
     what keeps --tc-av the OUTER size, so adding this does not grow the box. */
  border: 1px solid #e4e4e4;
  width: var(--tc-av, 40px);
  height: var(--tc-av, 40px);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--tc-radius-pill);
  background: var(--tc-white-3) center / cover no-repeat;
  object-fit: cover;
  box-shadow: none;
  color: rgb(var(--tc-ink) / .72);
}
/* The component's own default. The var() fallbacks elsewhere stay at 40px on
   purpose - they are read by non-.tribe-avatar elements (the notification rows
   in this sheet) that were sized against 40 and are not part of this step. */
.tribe-avatar    { --tc-av: 35px; }
.tribe-avatar--sm { --tc-av: 28px; }
.tribe-avatar--lg { --tc-av: 96px; }

/* the byline avatar in a feed row takes the new smallest step. Scoped by
   context rather than by editing tcFeedAuthor.tpl, so the component keeps one
   class and this stays a CSS-only, single-line revert. */
.tribe-feed-author .tribe-avatar { --tc-av: 24px; }
.tribe-avatar--ring { border: 2px solid var(--tc-white); }

/* =============================================================================
                    LAYOUT — legacy wrappers only
   =============================================================================
   The shell lives in tribe.css. These neutralise the #page / #contentBody /
   #header wrappers adminLayout.tpl still emits; they die with those wrappers.
   Never on .tribe-public (login, legal, onboarding): those pages scroll
   normally and keep their footer. The exclusion sits in :where() so every
   selector keeps the specificity it had before. */
@media (min-width: 1024px) {
  :root:where(:not(.tribe-public)),
  .tribe-base:where(:root:not(.tribe-public) *) { height: 100%; overflow: hidden; }
  .tribe-ui:where(:not(.tribe-public)) #page { background: none; padding: 0; height: auto; overflow: visible; }
  .tribe-ui:where(:not(.tribe-public)) #contentBody { margin: 0; padding: 0; max-width: none; }
  .tribe-ui:where(:not(.tribe-public)) .externalFooter { display: none; }
  .tribe-ui:where(:not(.tribe-public)) #header { display: none; }
}

@media (max-width: 1023px) {
  .tribe-ui:where(:not(.tribe-public)) #header .header-content { display: none; }
  .tribe-ui:where(:not(.tribe-public)) #contentBody { margin-top: 0; padding-top: var(--tc-topbar-h); }
}

html.tribe-ui.hut #page,
html.tribe-ui.invitations #page { background-color: transparent; }

html.hut #page,
html.invitations #page { background-color: #f7f8f9; }

/* =============================================================================
                                     UTILITIES
   ============================================================================= */
/* For one-off adjustments, so a component never gets forked to move something
   4px. Bootstrap 5 names, our token values. Bootstrap 3 defines none of these,
   so nothing here collides; names BS3 already owns (text-muted, text-center,
   hidden, small) are deliberately NOT redefined.
   spacing 1 = 4px · 2 = 8px · 3 = 10px · 4 = 12px · 5 = 14px · 6 = 18px · 7 = 24px · 8 = 32px */

/* layout */
.tribe-ui .d-flex { display: flex; }
.tribe-ui .d-inline-flex { display: inline-flex; }
.tribe-ui .d-block { display: block; }
.tribe-ui .d-inline-block { display: inline-block; }
.tribe-ui .d-grid { display: grid; }
.tribe-ui .d-none { display: none; }
.tribe-ui .flex-column { flex-direction: column; }
.tribe-ui .flex-wrap { flex-wrap: wrap; }
.tribe-ui .flex-1 { flex: 1 1 auto; min-width: 0; }
.tribe-ui .flex-none { flex: 0 0 auto; }
.tribe-ui .flex-nowrap { flex-wrap: nowrap; }
.tribe-ui .min-w-0 { min-width: 0; }
.tribe-ui .tabular { font-variant-numeric: tabular-nums; }
.tribe-ui .align-items-center { align-items: center; }
.tribe-ui .align-items-start { align-items: flex-start; }
.tribe-ui .align-items-end { align-items: flex-end; }
.tribe-ui .justify-content-center { justify-content: center; }
.tribe-ui .justify-content-between { justify-content: space-between; }
.tribe-ui .justify-content-end { justify-content: flex-end; }

/* gaps */
.tribe-ui .gap-1 { gap: var(--tc-space-1); }
.tribe-ui .gap-2 { gap: var(--tc-space-2); }
.tribe-ui .gap-3 { gap: var(--tc-space-3); }
.tribe-ui .gap-4 { gap: var(--tc-space-4); }
.tribe-ui .gap-5 { gap: var(--tc-space-5); }
.tribe-ui .gap-6 { gap: var(--tc-space-6); }
.tribe-ui .gap-7 { gap: var(--tc-space-7); }

/* margin — 0 and the scale, plus the two auto pushes */
.tribe-ui .m-0 { margin: 0; }
.tribe-ui .mt-0 { margin-top: 0; }
.tribe-ui .mb-0 { margin-bottom: 0; }
.tribe-ui .mt-1 { margin-top: var(--tc-space-1); }
.tribe-ui .mt-2 { margin-top: var(--tc-space-2); }
.tribe-ui .mt-3 { margin-top: var(--tc-space-3); }
.tribe-ui .mt-4 { margin-top: var(--tc-space-4); }
.tribe-ui .mt-5 { margin-top: var(--tc-space-5); }
.tribe-ui .mt-6 { margin-top: var(--tc-space-6); }
.tribe-ui .mt-7 { margin-top: var(--tc-space-7); }
.tribe-ui .mb-1 { margin-bottom: var(--tc-space-1); }
.tribe-ui .mb-2 { margin-bottom: var(--tc-space-2); }
.tribe-ui .mb-3 { margin-bottom: var(--tc-space-3); }
.tribe-ui .mb-4 { margin-bottom: var(--tc-space-4); }
.tribe-ui .mb-5 { margin-bottom: var(--tc-space-5); }
.tribe-ui .mb-6 { margin-bottom: var(--tc-space-6); }
.tribe-ui .mb-7 { margin-bottom: var(--tc-space-7); }
.tribe-ui .ms-auto { margin-left: auto; }
.tribe-ui .me-auto { margin-right: auto; }
.tribe-ui .mx-auto { margin-left: auto; margin-right: auto; }
.tribe-ui .mt-auto { margin-top: auto; }

/* padding */
.tribe-ui .p-0 { padding: 0; }
.tribe-ui .p-3 { padding: var(--tc-space-3); }
.tribe-ui .p-4 { padding: var(--tc-space-4); }
.tribe-ui .p-5 { padding: var(--tc-space-5); }
.tribe-ui .p-6 { padding: var(--tc-space-6); }
.tribe-ui .p-7 { padding: var(--tc-space-7); }
.tribe-ui .pt-0 { padding-top: 0; }
.tribe-ui .py-2 { padding-top: var(--tc-space-2); padding-bottom: var(--tc-space-2); }
.tribe-ui .py-3 { padding-top: var(--tc-space-3); padding-bottom: var(--tc-space-3); }
.tribe-ui .pb-0 { padding-bottom: 0; }

/* type — sizes are the type tokens, not px */
.tribe-ui .fs-2xs { font-size: var(--tc-text-2xs); }
.tribe-ui .fs-xs { font-size: var(--tc-text-xs); }
.tribe-ui .fs-sm { font-size: var(--tc-text-sm); }
.tribe-ui .fs-base { font-size: var(--tc-text-base); }
.tribe-ui .fs-md { font-size: var(--tc-text-md); }
.tribe-ui .fs-lg { font-size: var(--tc-text-lg); }
.tribe-ui .fs-xl { font-size: var(--tc-text-xl); }
.tribe-ui .fw-400 { font-weight: 400; }
.tribe-ui .fw-500 { font-weight: 500; }
.tribe-ui .fw-600 { font-weight: 600; }
.tribe-ui .fw-700 { font-weight: 700; }
.tribe-ui .ff-display { font-family: var(--tc-font-display); }
.tribe-ui .text-uppercase { text-transform: uppercase; letter-spacing: .05em; }
.tribe-ui .text-nowrap { white-space: nowrap; }
.tribe-ui .lh-tight { line-height: 1.2; }

/* ink levels — the three the system uses */
.tribe-ui .text-ink { color: rgb(var(--tc-ink)); }
.tribe-ui .text-quiet { color: rgb(var(--tc-ink) / .72); }
.tribe-ui .text-subtle { color: rgb(var(--tc-ink) / .55); }
.tribe-ui .text-brand { color: var(--tc-brand); }
.tribe-ui .text-danger-ink { color: var(--tc-danger); }

/* box */
.tribe-ui .w-100 { width: 100%; }
.tribe-ui .mw-100 { max-width: 100%; }
/* no .rounded here — main.css owns that name (5px) */
.tribe-ui .rounded-pill { border-radius: var(--tc-radius-pill); }
.tribe-ui .border-0 { border: 0; }
.tribe-ui .bg-none { background: none; }

/* One section per surface. Everything here is a candidate for deletion: when a
   page can be built from the system sheet plus utilities, its section goes. */

/* =============================================================================
                                 FEED — CARD TYPE
   ============================================================================= */
/* title and body type shared by stream cards and forum rows */

/* TITLE */
.tribe-feed-card__title,
.tribe-feed-row-title {
  font-family: var(--tc-font);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
  color: rgb(var(--tc-ink));
  margin: 0 0 var(--tc-space-2);
  letter-spacing: -.5px;
}

/* the stream card's title tracks tighter than the forum row's. Same rule above
   otherwise, so this only overrides the one property they disagree on. */
.tribe-feed-card__title { letter-spacing: -.8px; }

/* DESCRIPTION / excerpt */
.tribe-feed-card__excerpt,
.tribe-feed-row-excerpt {
  font-size: var(--tc-text-sm);
  line-height: 1.6;
  color: rgb(var(--tc-ink) / .72);
}

/* stat — views / comments / likes (feed cards and the post page share it) */
.tribe-meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--tc-space-1);
  /* Hit area, not spacing. The chip's ink is only ~14px tall, which is well
     under the 24px minimum for a touch target — and on a post page these are
     the primary actions, not passive stats. The padding grows the target to
     ~26px and the equal negative margin cancels its effect on layout, so the
     row measures and looks exactly as before on every surface. */
  padding: 6px 4px;
  margin: -6px -4px;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: var(--tc-text-xs);
  line-height: 1;
  color: rgb(var(--tc-ink) / .55);
  text-decoration: none;
  transition: color var(--tc-ease);
}

/* hover on any stat: the label warms, nothing else moves */
.tribe-meta-item:hover,
.tribe-meta-item:focus-visible {
  background: none;
  color: rgb(var(--tc-ink));
  text-decoration: none;
}

/* the stat svgs ship no width/height and no paint attributes */
.tribe-meta-item svg,
.tribe-feed-icon-svg {
  /* 15, not 14: at 14 the comment / views / like glyphs read as noise next to
     the avatars on a phone. Applies wherever the row layout is used, not just
     /tribefire. */
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

/* disabled while a like is in flight */
.tribe-meta-item:disabled { opacity: .6; cursor: default; }

/* liked: the heart fills, in the tribe's own like colour when it has set one */
.tribe-meta-item.is-liked { color: var(--tc-like-color, var(--tc-danger)); }
.tribe-meta-item.is-liked svg,
.tribe-meta-item.is-liked .tribe-feed-icon-svg { fill: currentColor; stroke: currentColor; }

/* =============================================================================
                                FEED — STREAM CARD
   ============================================================================= */
/* full-width card on News / Stories / Posts */

/* THE CARD — padding, hairline, hover */
.tribe-feed-card {
  display: block;
  position: relative;
  padding: var(--tc-space-6);
  border-bottom: 1px solid rgb(var(--tc-ink) / .07);
  color: inherit;
  text-decoration: none;
  /* the row is a big surface, so the wash fades in rather than snapping */
  transition: background-color 160ms ease;
}
.tribe-feed-card:last-child { border-bottom: 0; }
/* barely-there wash — enough to show the whole row is the target, no more */
.tribe-feed-card:hover { background: rgb(var(--tc-ink) / .022); text-decoration: none; }

/* author row */
.tribe-feed-card__head {
  display: flex;
  align-items: center;
  gap: var(--tc-space-3);
  padding-right: 34px;
  margin-bottom: var(--tc-space-4);
}

/* author text column */
.tribe-feed-card__meta { min-width: 0; margin-right: auto; }

/* author name */
/* negative margin pulls the timestamp up under the name - the two are one
   two-line identity block, and the name's line box left a gap between them */
.tribe-feed-card__name { display: flex; align-items: center; gap: var(--tc-space-2); min-width: 0; font-size: var(--tc-text-base); font-weight: 600; color: rgb(var(--tc-ink)); margin-bottom: -5px; }
.tribe-feed-card__name-text { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--tc-font-display); }

/* timestamp */
.tribe-feed-card__time { font-size: var(--tc-text-xs); color: rgb(var(--tc-ink) / .55); }

/* PINNED — a soft pill in the tribe's colour, beside the author's name / time */
.tribe-pin {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: none;
  height: 18px;
  padding: 0 7px 0 5px;
  border-radius: var(--tc-radius-pill);
  background: var(--tc-brand-fill);
  color: var(--tc-text-on-brand);
  font-family: var(--tc-font);
  font-size: var(--tc-text-2xs);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.tribe-pin svg { width: 10px; height: 10px; display: block; }

/* a sponsored deal reads as an offer: the meta line is the label, not a time */
.tribe-feed-card--deal .tribe-feed-card__time {
  font-size: var(--tc-text-2xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgb(var(--tc-ink) / .72);
}

/* "Read more" link */
.tribe-feed-card__readmore {
  color: var(--tc-link);
  font-size: var(--tc-text-sm);
  white-space: nowrap;
  margin-left: 5px;
}
/* It does not react on its own — the whole row is the link, and the row's wash
   is the hover. Bootstrap's `a:hover {color:#23527c}` is (0,1,1) and was
   recolouring it; this is (0,2,0) and holds the colour still. */
.tribe-feed-card__readmore:hover,
.tribe-feed-card__readmore:focus,
.tribe-feed-card:hover .tribe-feed-card__readmore {
  color: var(--tc-link);
  text-decoration: none;
}

/* MEDIA BOX — deal tiles use this too */
.tribe-feed-card__media {
  display: block;
  position: relative;
  margin-top: var(--tc-space-5);
  margin-bottom: var(--tc-space-5);
  border-radius: var(--tc-radius-media);
  overflow: hidden;
  background-color: var(--tc-white-3);
  background-position: center;
  background-size: cover;
  aspect-ratio: 4 / 3;
}

.tribe-feed-card__media-bg,
.tribe-feed-card__media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* POST PHOTO — uncropped, blurred fill behind */
.tribe-feed-card__media--post { aspect-ratio: auto; font-size: 0; }

.tribe-feed-card__media--post .tribe-feed-card__media-bg {
  position: absolute;
  inset: 0;
  filter: blur(16px) brightness(.92);
  transform: scale(1.6);
}

.tribe-feed-card__media--post .tribe-feed-card__media-img {
  position: relative;
  height: auto;
  max-height: 520px;
  object-fit: contain;
  margin: 0 auto;
}

/* footer row */
.tribe-feed-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tc-space-4);
  margin-top: var(--tc-space-4);
}

/* stats group */
.tribe-feed-card__stats {
  display: inline-flex;
  align-items: center;
  gap: var(--tc-space-5);
  margin-left: auto;
}

/* THE CARD — padding, hairline, hover */
.tribe-feed-card--row {
  display: grid;
  grid-template-columns: 160px 1fr;
  grid-template-areas: "thumb header" "thumb body";
  grid-template-rows: auto 1fr;
  column-gap: var(--tc-space-6);
  row-gap: 0;
  /* vertical padding carries the gap between rows (+10px over the sides) */
  padding: 28px var(--tc-space-6);
}

.tribe-feed-card--row.tc-feed-card--noimg,
.tribe-feed-card--row.tc-feed-card--video {
  grid-template-columns: 1fr;
  grid-template-areas: "header" "thumb" "body";
  grid-template-rows: auto auto 1fr;
}

/* a row card that navigates on click */
.tribe-feed-card[data-href] { cursor: pointer; }

/* SPONSORED CARD — the ad slot spliced into a feed. Emitted by
   viewTribefireModernAd.tpl and components/posts/feedAdBox.tpl, which carried
   no rules at all, so it rendered as bare markup. */
.tc-feed-card--ad {
  position: relative;
  display: block;
  overflow: hidden;
  color: rgb(var(--tc-ink));
  text-decoration: none;
}
.tc-feed-card--ad:hover { text-decoration: none; }

.tc-feed-ad-chip {
  position: absolute;
  top: var(--tc-space-4);
  left: var(--tc-space-4);
  z-index: 1;
  padding: 2px var(--tc-space-3);
  border-radius: var(--tc-radius-pill);
  background: rgb(16 18 24 / .62);
  color: #fff;
  font-size: var(--tc-text-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.tc-feed-ad-media { display: block; overflow: hidden; border-radius: var(--tc-radius-media); }
.tc-feed-ad-media img { display: block; width: 100%; height: auto; object-fit: cover; }

.tc-feed-ad-body { padding: var(--tc-space-4) 0 0; }
.tc-feed-ad-title {
  font-size: var(--tc-text-md);
  font-weight: 600;
  line-height: 1.3;
  color: rgb(var(--tc-ink));
}
.tc-feed-ad-company {
  margin-top: 2px;
  font-size: var(--tc-text-sm);
  color: rgb(var(--tc-ink) / .72);
}

.tc-feed-ad-coin {
  position: absolute;
  top: var(--tc-space-4);
  right: var(--tc-space-4);
  z-index: 1;
}
.tc-feed-ad-coin img { width: 26px; height: 26px; display: block; }

/* like button — liked state */
.tribe-like-btn[aria-pressed="true"] { color: var(--tc-danger); }
.tribe-like-btn[aria-pressed="true"] svg { fill: currentColor; }

@media (max-width: 767px) {
  .tribe-feed-card--row {
    grid-template-columns: 1fr;
    grid-template-areas: "header" "thumb" "body";
    grid-template-rows: auto auto 1fr;
    /* space-6, not space-4: the row collapses to a single column here, so the
       side padding is the only thing holding the text off the card edge. */
    padding: var(--tc-space-6);
  }
  /* the media sits under the text once the column collapses */
  .tribe-feed-card--row .tribe-feed-row-thumb { margin: var(--tc-space-3) 0 0; }
}

/* =============================================================================
                                 FEED — FORUM ROW
   ============================================================================= */
/* thumb left, header and body right */

/* header cell */
.tribe-feed-row-header { grid-area: header; min-width: 0; }

/* clears the meatball, which shares this corner */
.tribe-feed-row-header .tribe-feed-author { padding-right: 34px; }

/* SQUARE THUMBNAIL */
.tribe-feed-row-thumb,
.tribe-feed-row-video { grid-area: thumb; }

.tribe-feed-row-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  align-self: start;
  overflow: hidden;
  border-radius: var(--tc-radius-media);
  background: var(--tc-white-3);
}

/* body cell */
.tribe-feed-row-body {
  grid-area: body;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* On a phone the row collapses to one column, so this block lands directly
   under the image and the meta icons + commenter avatars sat tight against it.
   Desktop keeps them side by side and needs no gap. */
@media (max-width: 767px) {
  .tribe-feed-row-body { margin-top: 20px; }
}

/* author avatar */

/* author NAME */
.tribe-feed-author-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 220px;
  font-size: var(--tc-text-sm);
  font-weight: 600;
  color: rgb(var(--tc-ink));
}

/* author line */
.tribe-feed-author-sep { flex-shrink: 0; font-size: var(--tc-text-sm); color: rgb(var(--tc-ink) / .55); }

/* timestamp */
/* date — title size, regular weight */
.tribe-feed-author-time {
  flex-shrink: 0;
  font-size: var(--tc-text-xs);
  font-weight: 400;
  color: rgb(var(--tc-ink) / .72);
}

.tribe-feed-row-title a { color: rgb(var(--tc-ink)); text-decoration: none; }

/* SUBTITLE */
.tribe-feed-row-subtitle {
  margin: 0 0 var(--tc-space-3);
  font-size: var(--tc-text-base);
  line-height: 1.45;
  color: rgb(var(--tc-ink) / .72);
}

/* participant facepile */
/* participant facepile */
.tribe-feed-avatars {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tribe-feed-avatars .tribe-feed-avatar {
  margin-left: -8px;
}
/* participant facepile */
.tribe-feed-avatars .tribe-feed-avatar:first-child { margin-left: 0; }

.tribe-feed-avatars .tribe-feed-avatar--more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-image: none;
  color: rgb(var(--tc-ink) / .72);
  font-size: var(--tc-text-xs);
  font-weight: 600;
}

.tribe-feed-avatars-empty { display: inline-block; }

/* ONE STAT — icon + count: hover, disabled and liked all live with the
   component at the top of this sheet. */

@media (max-width: 767px) {
  .tribe-feed-row-title { font-size: var(--tc-text-lg); }
  .tribe-feed-row-excerpt { font-size: var(--tc-text-sm); }
}

/* =============================================================================
                            FEED — LISTS & EMPTY STATE
   ============================================================================= */


.tribe-feed-empty {
  margin-bottom: var(--tc-space-4);
  padding: var(--tc-space-6);
  border: 1px dashed rgb(var(--tc-ink) / .12);
  border-radius: var(--tc-radius-control);
  background: var(--tc-white);
  color: rgb(var(--tc-ink) / .72);
  text-align: center;
}

.tribe-feed-composer-row { max-width: none; }
.tribe-feed-composer-row .tribe-composer-bar { margin: 0; }

/* =============================================================================
                                   COMPOSER BAR
   ============================================================================= */
/* "Start a conversation" row above a feed */

/* composer bar — the "start a conversation" row above a forum feed */
.tribe-composer-bar {
  /* relative: the photo control sits INSIDE the field, absolutely placed. */
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--tc-space-3);
  /* space-6 on the sides, matching .tribe-page-body and the cards below it —
     at space-5 the composer's contents sat a notch inboard of everything else */
  padding: var(--tc-space-5) var(--tc-space-6);
  margin: 0 0 var(--tc-space-5);
  border-bottom: 1px solid rgb(var(--tc-ink) / .12);
  text-decoration: none;
}
/* only the field reacts to hover */
.tribe-composer-bar:hover { text-decoration: none; }

.tribe-composer-bar__prompt {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /* right padding clears the send button */
  padding: 12px;
  border-radius: 8px;
  /* same edge as .tribe-composer__field */
  border: 1px solid rgb(var(--tc-ink) / .12);
  background: rgb(var(--tc-ink) / .05);
  color: rgb(var(--tc-ink) / .72);
  font-size: var(--tc-text-sm);
}

/* send button — inside the field, right edge */
.tribe-composer-bar__send {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: rgb(var(--tc-ink) / .72);
}

.tribe-composer-bar__send svg { width: 18px; height: 18px; }
.tribe-composer-bar:hover .tribe-composer-bar__prompt { background: rgb(var(--tc-ink) / .08); }

@media (max-width: 767px) {
  .tribe-composer-bar__avatar { display: none; }
  .tribe-composer-bar { gap: var(--tc-space-2); padding: var(--tc-space-4) var(--tc-space-6); }
  .tribe-composer-bar__send { width: 28px; height: 28px; }
  .tribe-composer-bar__prompt { padding: var(--tc-space-3) var(--tc-space-3); font-size: var(--tc-text-sm); }
}

/* =============================================================================
                                     POST MENU
   ============================================================================= */
/* three-dot menu in a card corner */

/* pinned top-right of the card */
.tribe-post-meatball {
  position: absolute;
  top: var(--tc-space-4);
  right: var(--tc-space-4);
  z-index: 2;
}

.tribe-post-meatball-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* the small-control token, not a literal 30 — they were numerically equal and
     drifted apart below 768px where the token drops to 28 */
  width: var(--tc-btn-h-sm);
  height: var(--tc-btn-h-sm);
  padding: 0;
  border: 0;
  background: none;
  color: rgb(var(--tc-ink) / .55);
  cursor: pointer;
  border-radius: var(--tc-radius-pill);
}
.tribe-post-meatball-btn:hover { background: rgb(var(--tc-ink) / .04); color: rgb(var(--tc-ink)); }

.tribe-post-meatball-menu {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 20;
  margin-top: var(--tc-space-1);
  min-width: 180px;
}

.tribe-post-meatball.is-open .tribe-post-meatball-menu { display: block; }

/* =============================================================================
                                     POST PAGE
   ============================================================================= */
/* top bar, header, hero, body, action bar, composer */

/* page wrapper */

.tribe-identity-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

/* PERSON LINK - an author's or commenter's name/avatar opening /profile/<id>.
   <a> where it stands alone; [data-person-href] inside another link (tc-person-link.js) */
.tribe-person-link { color: inherit; text-decoration: none; }
[data-person-href] { cursor: pointer; }
/* color held on hover: main.css a:hover would turn a name tan */
a.tribe-person-link:hover,
.tribe-person-link[data-person-href]:hover { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* a comment author sits in the bubble: keep its ink, not the member-content link blue */
.tribe-comment-body a.tribe-comment-author,
.tribe-comment-body a.tribe-comment-author:hover { color: rgb(var(--tc-ink)); }
.tribe-person-link--av { display: inline-flex; flex: none; border-radius: 50%; }
.tribe-person-link--av:hover { text-decoration: none; }
.tribe-person-link:focus-visible,
[data-person-href]:focus-visible { outline: none; box-shadow: var(--tc-focus); border-radius: 4px; }
/* avatars keep their circle when focused */
.tribe-person-link--av:focus-visible,
.tribe-avatar[data-person-href]:focus-visible,
.tc-post-tile-author-avatar[data-person-href]:focus-visible { border-radius: 50%; }

/* author name */
.tribe-author {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--tc-text-md);
  font-weight: 600;
  color: rgb(var(--tc-ink));
}

/* TITLE */
.tribe-post-title {
  margin: 0 0 var(--tc-space-3);
  font-family: var(--tc-font);
  font-size: var(--tc-text-lg);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: rgb(var(--tc-ink));
}

/* subtitle (.tribe-news-subtitle = legacy alias) */
.tribe-post-subtitle,
.tribe-news-subtitle {
  margin: 0 0 var(--tc-space-5);
  font-size: var(--tc-text-sm);
  line-height: 1.5;
  color: rgb(var(--tc-ink) / .72);
}



/* HERO IMAGE */
.tribe-post-hero-frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  font-size: 0;
  margin-bottom: var(--tc-space-6);
  border-radius: var(--tc-radius-media);
  background: var(--tc-white-3);
}

.tribe-post-hero-frame__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(16px) brightness(.92);
  transform: scale(1.6);
}

.tribe-post-hero {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  max-height: 560px;
  object-fit: contain;
  margin: 0 auto;
}

.tribe-post-hero-embed { margin-bottom: var(--tc-space-6); }

/* one 16:9 rounded frame for every player: the composer preview (.tribe-embed)
   and the |videoembed output on feed cards, Tribefire rows and post pages (.tc-embed) */
.tribe-embed,
.tc-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--tc-radius-media);
  background: #000;
}

/* a feed card's player sits under the excerpt, set apart from it */
.tc-feed-card__video { margin-top: 15px; }

.tribe-embed iframe,
.tribe-embed video,
.tc-embed iframe,
.tc-embed video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.tribe-embed--file video { object-fit: contain; }

/* BODY PROSE — headings, lists, quotes, images */
.tribe-post-text {
  padding: 0;
  font-size: var(--tc-text-base);
  line-height: 1.55;
  color: rgb(var(--tc-ink));
  word-wrap: break-word;
}
/* post-body extras */
.tribe-post-text blockquote.tc-pullquote {
  margin: var(--tc-space-7) 0;
  padding: var(--tc-space-6) var(--tc-space-7);
  border-left: 4px solid var(--tc-brand);
  background: none;
  font-family: var(--tc-font);
  font-style: italic;
  font-size: var(--tc-text-lg);
  line-height: 1.45;
  color: rgb(var(--tc-ink));
}/* action bar under the post body — likes / comments / share.
   The chips are .tribe-meta-item, the same component the feed rows use, so the
   gap here matches .tribe-feed-card__stats. */

/* share chip, right after the link has been copied */
.tribe-meta-item.is-copied { color: var(--tc-success); }

/* comment like button */
/* comment like button */
.tribe-comment-like-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--tc-space-1);
  padding: 2px var(--tc-space-2);
  border: 0;
  border-radius: var(--tc-radius-control);
  background: none;
  color: rgb(var(--tc-ink) / .72);
  font-size: var(--tc-text-sm);
  line-height: 1;
  cursor: pointer;
}
/* comment actions — colour shift on hover, no plate */
.tribe-comment-like-btn:hover { background: none; color: rgb(var(--tc-ink)); }
.tribe-comment-like-btn:disabled { opacity: .6; cursor: default; }
.tribe-comment-like-btn.is-liked { color: var(--tc-danger); }

.tribe-comment-like-btn svg { fill: none; stroke: currentColor; }

.tribe-comments-empty {
  margin: 0 0 var(--tc-space-3);
  font-size: var(--tc-text-base);
  color: rgb(var(--tc-ink) / .72);
}

.tribe-comments-retry {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--tc-space-3);
  padding: var(--tc-space-6) 0;
  font-size: var(--tc-text-base);
  color: rgb(var(--tc-ink) / .72);
}

/* BODY PROSE — headings, lists, quotes, images */
.tribe-post-text p:last-child { margin-bottom: 0; }
.tribe-comment-like-btn.is-liked svg { fill: currentColor; stroke: currentColor; }

/* =============================================================================
                             ASIDE — WHAT'S HAPPENING
   ============================================================================= */

/* SECTION CARD */
.tribe-shell-sec,
.tribe-shell-empty {
  padding: var(--tc-space-4) var(--tc-space-5);
  border-bottom: 1px solid rgb(var(--tc-ink) / .07);
}

/* SECTION HEADING */
.tribe-shell-sechead {
  display: flex;
  align-items: center;
  gap: var(--tc-space-2);
  margin-bottom: var(--tc-space-1);
  color: rgb(var(--tc-ink));
  font-size: var(--tc-text-base);
  /* 500, not 600. These are quiet section labels in a side rail, and at 600 they
     carried the same weight as the post titles listed under them - so the rail
     read as a column of headlines with nothing subordinate to them. */
  font-weight: 500;
  letter-spacing: -.4px;
}

.tribe-shell-sechead .fa { font-size: var(--tc-text-xs); opacity: .55; }
.tribe-shell-sechead + .tribe-shell-row { border-top: 0; }

/* one row */
/* one row */
.tribe-shell-row { display: block; padding: var(--tc-space-2) 0; border-top: 1px solid rgb(var(--tc-ink) / .07); }

/* row thumbnail */
.tribe-shell-rowthumb {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: var(--tc-radius-media);
  background: var(--tc-white-3) center / cover no-repeat;
}

/* ROW TITLE */
.tribe-shell-rowtitle {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgb(var(--tc-ink) / .9);
  font-family: var(--tc-font-display);
  font-size: var(--tc-text-sm);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -.1px;
}

/* row date */
.tribe-shell-rowdate {
  display: block;
  margin-top: 2px;
  color: rgb(var(--tc-ink) / .72);
  font-size: var(--tc-text-xs);
}

.tribe-shell-rowstats .fa { font-size: var(--tc-text-xs); opacity: .55; }

/* one row */

.tribe-shell-rowfoot .tribe-feed-avatar {
  --tc-av: 22px;
  margin-left: -7px;
}
/* one row */
.tribe-shell-rowfoot .tribe-feed-avatar:first-child { margin-left: 0; }

.tribe-shell-rowfoot .tribe-feed-avatar--more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-image: none;
  color: rgb(var(--tc-ink) / .72);
  font-size: var(--tc-text-2xs);
  font-weight: 600;
}

/* =============================================================================
                                   PROFILE PAGE
   =============================================================================
   /profile/<id>. One column at every width: the hero card, the info cards, then the posts.
     .tribe-profile-pagehero   cover wash, avatar lapping it, name + role chip, joined, actions
     .tribe-profile-info       Bio, Contact, Details, Happiness, one under another
     .tribe-profile-hp         a happiness profile: name + answer chips
     .tribe-profile-coins      the give-coins popup form */
/* -pagehero, not -hero: the profile MODAL owns .tribe-profile-hero */
.tribe-profile-pagehero { display: block; overflow: hidden; padding: 0; }
.tribe-profile-pagehero__cover {
  height: 140px;
  background-color: var(--tc-brand);
  background-image: linear-gradient(120deg, rgb(var(--tc-ink) / .18), transparent 62%);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.tribe-profile-pagehero__body {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--tc-space-5);
  padding: 0 var(--tc-space-6) var(--tc-space-6);
}
/* the avatar laps the cover; the ring separates it from the cover behind */
.tribe-profile-pagehero__avatar {
  --tc-av: 96px;
  flex: 0 0 auto;
  margin-top: -48px;
  border: 4px solid var(--tc-white);
  background-color: var(--tc-white-2);
}
.tribe-profile-pagehero__id { flex: 1 1 220px; min-width: 0; padding-top: var(--tc-space-4); }
.tribe-profile-pagehero__name {
  margin: 0;
  font-family: var(--tc-font-display);
  font-size: var(--tc-text-xl);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: rgb(var(--tc-ink));
}
.tribe-profile-pagehero__joined { margin: 2px 0 0; font-size: var(--tc-text-xs); color: rgb(var(--tc-ink) / .55); }
.tribe-profile-pagehero__sub { margin: var(--tc-space-1) 0 0; font-size: var(--tc-text-sm); color: rgb(var(--tc-ink) / .72); }
.tribe-profile-pagehero__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tc-space-1) var(--tc-space-2); }
.tribe-profile-pagehero__actions { flex: 0 0 auto; display: flex; gap: var(--tc-space-2); padding-bottom: var(--tc-space-1); }

/* the info cards: one stack at every width, never side by side */
.tribe-profile-info { display: flex; flex-direction: column; gap: var(--tc-space-5); margin-top: var(--tc-space-5); }
.tribe-profile-info > .tribe-card { margin: 0; }
/* the posts: the same width, under the info */
.tribe-card.tribe-profile-posts { margin: var(--tc-space-5) 0 0; }
/* Give coins beside Message: icon-only on a phone so the header fits 390px */
@media (max-width: 767px) {
  .tribe-profile-gift .tribe-profile-gift__label { display: none; }
}

.tribe-profile-bio { margin: 0; font-size: var(--tc-text-sm); line-height: 1.6; color: rgb(var(--tc-ink) / .82); }
.tribe-profile-gate { margin: var(--tc-space-4) 0 0; font-size: var(--tc-text-xs); color: rgb(var(--tc-ink) / .55); }
.tribe-infolist + .tribe-profile-gate { padding-top: var(--tc-space-4); border-top: 1px solid rgb(var(--tc-ink) / .07); }

.tribe-profile-hp + .tribe-profile-hp { margin-top: var(--tc-space-5); }
.tribe-profile-hp__name {
  margin-bottom: var(--tc-space-2);
  font-size: var(--tc-text-xs);
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: rgb(var(--tc-ink) / .55);
}
.tribe-profile-hp__answers { display: flex; flex-wrap: wrap; gap: var(--tc-space-1); }
/* a long answer wraps inside its card rather than running off it */
.tribe-profile-hp__answers .tribe-badge { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }

.tribe-profile-coins__result { margin: var(--tc-space-2) 0 0; font-size: var(--tc-text-xs); color: rgb(var(--tc-ink) / .72); }
.tribe-profile-coins__result:empty { display: none; }

/* posts: the feed cards bring their own hairlines; the card edge ends the last */
.tribe-profile-posts .tribe-feed-card:last-child { border-bottom: 0; }

@media (max-width: 600px) {
  .tribe-profile-pagehero__cover { height: 104px; }
  .tribe-profile-pagehero__avatar { --tc-av: 76px; margin-top: -38px; }
  .tribe-profile-pagehero__actions { width: 100%; }
}

/* INFO LIST — facts as icon + value, no labels (the icon carries the meaning;
   a visually hidden label carries it for screen readers) */
.tribe-infolist { display: flex; flex-direction: column; gap: var(--tc-space-3); margin: 0; padding: 0; list-style: none; }
.tribe-infolist > li {
  display: flex;
  align-items: flex-start;
  gap: var(--tc-space-3);
  min-width: 0;
  font-size: var(--tc-text-sm);
  line-height: 1.45;
  color: rgb(var(--tc-ink) / .82);
  overflow-wrap: anywhere;
}
.tribe-infolist__icon { flex: none; width: 18px; height: 18px; margin-top: 1px; color: rgb(var(--tc-ink) / .45); }
/* a mailto / tel / website value reads as plain text; underlined on hover */
.tribe-infolist__link { text-decoration: none; }
.tribe-infolist__link,
.tribe-infolist__link:hover,
.tribe-infolist__link:focus { color: inherit; }
.tribe-infolist__link:hover,
.tribe-infolist__link:focus-visible { text-decoration: underline; }

/* =============================================================================
                                   PROFILE MODAL
   ============================================================================= */
/* profile modal. reached from any avatar, so it ships on every page. */
/* qualified: .tribe-overlay__card sets max-width later in this sheet */
.tribe-overlay__card.tribe-modal-xl { max-width: 1120px; }

.tribe-profile-modal .tribe-overlay__card {
  overflow: hidden;
  border: 0;
  border-radius: var(--tc-radius-panel);
  background: var(--tc-white);
  box-shadow: 0 24px 48px rgb(var(--tc-ink) / .22);
}

/* the popup stacks its own top bar over its tabs */
.tribe-profile-modal .tribe-overlay__head { display: block; padding: 0; border-bottom: 0; }
.tribe-profile-modal .tribe-overlay__foot { display: none; }
/* a popup can hold more than one step; the hidden one takes no room */
.tribe-overlay__foot[hidden],
.tribe-overlay__body[hidden] { display: none; }

.tribe-profile-modal .tribe-overlay__body {
  padding: var(--tc-space-6) var(--tc-space-8);
  max-height: calc(100vh - 220px);
  overflow-y: auto;
  background: var(--tc-white);
}

.tribe-profile-topbar {
  display: flex;
  align-items: center;
  gap: var(--tc-space-4);
  padding: var(--tc-space-4) var(--tc-space-8);
  border-bottom: 1px solid rgb(var(--tc-ink) / .07);
}

.tribe-profile-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: var(--tc-font);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 700;
  color: rgb(var(--tc-ink));
}

/* happiness panel */
.tribe-profile-happiness-title {
  margin: 0 0 var(--tc-space-3);
  padding-bottom: var(--tc-space-2);
  border-bottom: 1px solid rgb(var(--tc-ink) / .07);
  font-size: var(--tc-text-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgb(var(--tc-ink) / .72);
}

.tribe-profile-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--tc-radius-pill);
  background: none;
  color: rgb(var(--tc-ink) / .72);
  font-size: var(--tc-text-md);
  cursor: pointer;
  transition: background-color var(--tc-ease), color var(--tc-ease);
}

/* TAB STRIP */
.tribe-profile-tabs {
  display: flex;
  gap: var(--tc-space-1);
  margin: 0;
  padding: 0 var(--tc-space-8);
  list-style: none;
  border-bottom: 1px solid rgb(var(--tc-ink) / .07);
}

.tribe-profile-tabs > li { position: relative; margin: 0; list-style: none; }

.tribe-profile-tabs > li > a {
  display: inline-flex;
  align-items: center;
  gap: var(--tc-space-2);
  padding: var(--tc-space-4) var(--tc-space-5);
  border-bottom: 2px solid transparent;
  color: rgb(var(--tc-ink) / .72);
  font-size: var(--tc-text-base);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--tc-ease), border-color var(--tc-ease);
}

.tribe-profile-tabs > li.active > a { color: var(--tc-brand-strong); border-bottom-color: var(--tc-brand); }
.tribe-profile-tabs > li.disabled > a { opacity: .4; pointer-events: none; }

/* HERO — avatar + name + email */
.tribe-profile-hero {
  display: flex;
  align-items: center;
  gap: var(--tc-space-4);
  padding-bottom: var(--tc-space-4);
  margin-bottom: var(--tc-space-4);
  border-bottom: 1px solid rgb(var(--tc-ink) / .07);
}

/* padding 0 — cancels .square-crop-image's aspect hack */
.tribe-profile-hero-avatar {
  position: relative;
  padding: 0;
  box-shadow: var(--tc-shadow);
}

/* profile hero meta row */
.tribe-profile-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* row gap larger than the column gap so wrapped lines read as lines */
  gap: var(--tc-space-3) var(--tc-space-6);
  font-size: var(--tc-text-sm);
  color: rgb(var(--tc-ink) / .72);
}

.tribe-profile-hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: var(--tc-space-2);
  min-width: 0;
  /* an item never breaks mid-phrase */
  white-space: nowrap;
}

.tribe-profile-hero-meta i { font-size: var(--tc-text-sm); opacity: .75; }

.tribe-profile-hero-info {
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-1);
  flex: 1;
  min-width: 0;
}

.tribe-profile-hero-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--tc-space-2);
  min-width: 0;
  font-family: var(--tc-font);
  font-size: var(--tc-text-xl);
  font-weight: 700;
  line-height: 1.2;
  color: rgb(var(--tc-ink));
}

.tribe-profile-hero-subtitle {
  min-width: 0;
  font-size: var(--tc-text-sm);
  line-height: 1.4;
  color: rgb(var(--tc-ink) / .72);
}
/* HERO — avatar + name + email */
.tribe-profile-hero-subtitle:empty { display: none; }

.tribe-profile-hero-email {
  font-size: var(--tc-text-sm);
  font-weight: 600;
  color: var(--tc-link);
  text-decoration: none;
  word-break: break-all;
}
.tribe-profile-hero-email:hover { text-decoration: underline; }
.tribe-profile-hero-email:empty { display: none; }

/* DETAILS TABLE */
.tribe-profile-table {
  width: 100%;
  margin: 0 0 var(--tc-space-4);
  border-collapse: collapse;
  font-size: var(--tc-text-base);
  color: rgb(var(--tc-ink));
}

.tribe-profile-table tr { border-bottom: 1px solid rgb(var(--tc-ink) / .07); }
/* DETAILS TABLE */
.tribe-profile-table tr:last-child { border-bottom: 0; }

.tribe-profile-table th,
.tribe-profile-table td {
  padding: var(--tc-space-3) 0;
  vertical-align: top;
  line-height: 1.4;
}

.tribe-profile-table th {
  width: 140px;
  padding-right: var(--tc-space-4);
  white-space: nowrap;
  text-align: left;
  font-size: var(--tc-text-xs);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgb(var(--tc-ink) / .72);
}

.tribe-profile-table td { font-weight: 500; word-break: break-word; overflow-wrap: anywhere; }
.tribe-profile-table td a { color: var(--tc-link); font-weight: 600; }

.tribe-profile-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--tc-space-4);
  min-width: 0;
  padding: var(--tc-space-2) 0;
  border-bottom: 1px solid rgb(var(--tc-ink) / .07);
  font-size: var(--tc-text-base);
}
.tribe-profile-meta-row:last-child { border-bottom: 0; }




.tribe-profile-about {
  margin-top: var(--tc-space-6);
  padding-top: var(--tc-space-4);
  border-top: 1px solid rgb(var(--tc-ink) / .07);
}

.tribe-profile-about-label {
  margin-bottom: var(--tc-space-2);
  font-size: var(--tc-text-xs);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgb(var(--tc-ink) / .72);
}

.tribe-profile-about-body { line-height: 1.55; color: rgb(var(--tc-ink)); }

/* GIVE COINS bar */
.tribe-profile-give-coins {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--tc-space-2);
  margin: var(--tc-space-4) 0;
  padding: var(--tc-space-3) var(--tc-space-4);
  border: 1px solid var(--tc-brand);
  border-radius: var(--tc-radius-control);
  background: var(--tc-brand-soft);
}

.tribe-profile-give-coins input,
.tribe-profile-give-coins button {
  height: 36px;
  padding: var(--tc-space-2) var(--tc-space-4);
  font-size: var(--tc-text-sm);
  line-height: 1.2;
}

.tribe-profile-give-coins input[type="number"] { width: 80px; flex: 0 0 auto; }
.tribe-profile-give-coins input[type="text"] { flex: 1 1 140px; min-width: 120px; }
.tribe-profile-give-coins button { flex: 0 0 auto; font-weight: 600; }

.tribe-profile-give-coins .sentResult {
  flex: 1 1 100%;
  margin: 0;
  padding: 0;
  font-size: var(--tc-text-sm);
  color: var(--tc-brand-strong);
}
/* GIVE COINS bar */
.tribe-profile-give-coins .sentResult:empty { display: none; }

/* happiness panel */
.tribe-profile-happiness {
  padding: var(--tc-space-4) var(--tc-space-5);
  border-radius: var(--tc-radius-control);
  background: rgb(var(--tc-ink) / .05);
}

.tribe-profile-happiness .ProfileName {
  margin-bottom: 2px;
  font-size: var(--tc-text-sm);
  font-weight: 600;
  color: rgb(var(--tc-ink));
}

.tribe-profile-happiness .ProfileAnswers {
  margin: 0;
  padding-left: var(--tc-space-6);
  font-size: var(--tc-text-sm);
  line-height: 1.4;
  color: rgb(var(--tc-ink) / .72);
}

/* CHAT TAB */
.tribe-chat-scroller {
  height: 340px;
  overflow-y: auto;
  margin-bottom: var(--tc-space-4);
  padding: var(--tc-space-4);
  border: 1px solid rgb(var(--tc-ink) / .07);
  border-radius: var(--tc-radius-control);
  background: rgb(var(--tc-ink) / .05);
}

.tribe-chat-scroller .chat-message {
  max-width: 78%;
  margin-bottom: var(--tc-space-2);
  padding: var(--tc-space-3) var(--tc-space-5);
  border-radius: var(--tc-radius-panel);
  font-size: var(--tc-text-base);
  line-height: 1.4;
  word-wrap: break-word;
  clear: both;
}

.tribe-chat-scroller .chat-message.text-left {
  float: left;
  border: 1px solid rgb(var(--tc-ink) / .07);
  border-top-left-radius: var(--tc-space-1);
  background: var(--tc-white);
  color: rgb(var(--tc-ink));
}

.tribe-chat-scroller .chat-message.text-right {
  float: right;
  border-top-right-radius: var(--tc-space-1);
  background: var(--tc-brand-fill);
  color: var(--tc-text-on-brand);
}

.tribe-chat-send { display: flex; align-items: center; gap: var(--tc-space-2); }
.tribe-chat-send input[type="text"] { flex: 1; }

.tribe-chat-report-form {
  display: flex;
  align-items: center;
  gap: var(--tc-space-2);
  padding: var(--tc-space-4) var(--tc-space-8);
  border-bottom: 1px solid rgb(var(--tc-ink) / .07);
  background: rgb(var(--tc-ink) / .05);
}

.tribe-chat-report-form input[type="text"] { flex: 1; }
.tribe-profile-close:hover { background: rgb(var(--tc-ink) / .05); color: rgb(var(--tc-ink)); }

/* TAB STRIP */
.tribe-profile-tabs > li > a:hover { color: rgb(var(--tc-ink)); }

@media (max-width: 767px) {
  .tribe-modal-xl { width: auto; max-width: calc(100vw - 20px); margin: var(--tc-space-3) auto; }
  .tribe-profile-topbar { padding: var(--tc-space-4); gap: var(--tc-space-3); }
  .tribe-profile-title { font-size: var(--tc-text-lg); }
  .tribe-profile-tabs { padding: 0 var(--tc-space-3); overflow-x: auto; flex-wrap: nowrap; }
  .tribe-profile-tabs > li > a {
    padding: var(--tc-space-3) var(--tc-space-4);
    font-size: var(--tc-text-sm);
    white-space: nowrap;
  }
  .tribe-profile-modal .tribe-overlay__body { padding: var(--tc-space-4); max-height: calc(100vh - 160px); }
  .tribe-profile-hero { gap: var(--tc-space-3); }
  .tribe-profile-hero-avatar.tribe-avatar { --tc-av: 72px; }
  .tribe-profile-hero-name { font-size: var(--tc-text-lg); }
  .tribe-profile-table th { width: 100px; font-size: var(--tc-text-2xs); }
  .tribe-profile-give-coins input[type="text"] { flex-basis: 100%; }
  .tribe-profile-give-coins button { width: 100%; }
  .tribe-chat-scroller { height: 260px; }
}/* on a phone the header stacks and reads left-aligned rather than cramped */
@media (max-width: 600px) {.tribe-profile-pagehero__actions .tribe-btn { flex: 1 1 auto; }
}
@media (min-width: 1200px) {}

/* the deep-linked card reads as lifted, matching :hover */
.tribe-directory-grid .tribe-card--link.open {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgb(var(--tc-ink) / .10);
}

/* filter transitions */
.tribe-directory-grid .tribe-card--link.is-filtering-out { opacity: 0; transform: scale(.92); }
.tribe-directory-grid .tribe-card--link.is-filtering-in { animation: tribeDirFilterIn 260ms var(--tc-motion) forwards; }
.tribe-directory-grid .tribe-card--link.is-hidden { display: none; }
/* Beyond the progressive-rendering window. A SEPARATE class from .is-hidden on
   purpose: that one belongs to the search/tag filter, and one class shared
   between two independent reasons to hide a card means each keeps clobbering
   the other's state. */
.tribe-directory-grid .tribe-card--link.is-paged-out { display: none; }
@keyframes tribeDirFilterIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .tribe-directory-grid .tribe-card--link.is-filtering-in,
  .tribe-directory-grid .tribe-card--link.is-filtering-out { animation: none; transform: none; opacity: 1; }
}

/* Same card as the auction grid: the CARD carries the inset and the photo
   floats inside it with its own radius. (A margin on .tribe-card-media would
   not work — it is width:100%, so any margin overflows the card.) */
.tribe-directory-grid .tribe-card { padding: var(--tc-space-3); }
.tribe-directory-grid .tribe-card-media {
  border-radius: var(--tc-radius-media);
  overflow: hidden;
}

/* the member's name and tag line, centred under the photo */
.tribe-directory-grid .tribe-card-body {
  padding: var(--tc-space-4) 0 0;
  text-align: center;
}
.tribe-directory-grid .tribe-card-title {
  font-size: var(--tc-text-base);
  font-weight: 600;
  line-height: 1.35;
}
/* the role badge sits on the photo, as the auction card's chips do */
.tribe-directory-grid .tribe-card-media .tribe-badge {
  position: absolute;
  top: var(--tc-space-3);
  left: var(--tc-space-3);
  z-index: 2;
}/* =============================================================================
                                    PERSON CARD
   ============================================================================= */
.tribe-personcard-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1090;
  /* a scrim, not a surface — literal so it cannot invert in dark mode */
  background: rgba(16, 18, 24, .45);
}

.tribe-personcard-backdrop.open { display: block; }

.tribe-personcard {
  display: none;
  position: fixed;
  z-index: 1091;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* the token, not 340: the operator wants this popover to read as the same
     column as the rail rather than a wider slab floating over it. */
  width: var(--tc-col-side, 264px);
  max-width: 92vw;
  max-height: 88vh;
  overflow-y: auto;
  padding: var(--tc-space-7);
  border: 1px solid rgb(var(--tc-ink) / .12);
  border-radius: var(--tc-radius-window);
  background: var(--tc-white);
  box-shadow: 0 24px 60px rgb(var(--tc-ink) / .28);
}

.tribe-personcard.open { display: block; }

.tribe-personcard-close {
  position: absolute;
  top: var(--tc-space-2);
  right: var(--tc-space-3);
  border: 0;
  background: none;
  cursor: pointer;
  font-size: var(--tc-text-lg);
  line-height: 1;
  color: rgb(var(--tc-ink) / .55);
}

/* avatar */
.tribe-personcard-avatar {
  --tc-av: 56px;
  color: rgb(var(--tc-ink) / .55);
  font-size: var(--tc-text-xl);
}

.tribe-personcard-role {
  display: none;
  margin-top: 3px;
  font-size: var(--tc-text-xs);
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--tc-brand-strong);
}

.tribe-personcard-role.show { display: block; }

.tribe-personcard-contact a {
  display: flex;
  align-items: center;
  gap: var(--tc-space-2);
  font-size: var(--tc-text-sm);
  color: rgb(var(--tc-ink));
  text-decoration: none;
}
.tribe-personcard-contact a:hover { color: var(--tc-brand-strong); }

.tribe-personcard-contact a i { width: 15px; color: rgb(var(--tc-ink) / .55); }

/* person card — the small popover profile, also on every page */
.tribe-ui .viewFullProfile[data-tribememberid] { cursor: pointer; }

@media (max-width: 767px) {
  .tribe-personcard { width: 92vw; }
}

/* MESSAGES lives in views/templates/bodyMessages.tpl, not here.

   A ~460-line .tribe-messages block sat at this spot and was DEAD: the
   staging merge kept that template's own inline <style>, which emits tc-*
   names, so not one selector here ever matched. It was also incomplete -
   missing the convo tabs, the create button, the message avatar, the
   load-older controls and every html.messages layout rule - so it could not
   simply be adopted either.

   Removed 2026-09-23 rather than resurrected. The page builds most of its
   markup in JS as strings (446 tc-* references in that one file), so moving
   it onto this sheet is a rename of every one of them on a live realtime
   surface with no test coverage. That is worth doing deliberately, not as a
   side effect of a CSS batch. The template is the single owner until then. */

/* =============================================================================
                                    POST EDITOR
   ============================================================================= */
/* create/edit for News, Stories, Forums, Posts, Training, Questions */

/* the form column. the lane already caps the width, so no max-width here. */
/* No horizontal inset: the cards sit flush in the lane the way feed cards do
   on /news, so the page header text and the card text line up. With a 32px
   inset the header (which pulls full-bleed) started 33-36px left of the card
   text and the page read as two different grids. */

/* action bar — full-bleed sticky bar */
/* The editor bar is the standard .tribe-feed-controls-row; all it adds is the
   full-bleed pull so it spans the lane inside .tribe-edit-wrap’s inset. */
.tribe-editbar {
  margin: calc(-1 * var(--tc-space-6)) 0 var(--tc-space-6);
}

.tribe-ui .ql-container.ql-snow { border-radius: 0 0 var(--tc-radius-control) var(--tc-radius-control); }

/* media in the editor mirrors how it renders on the post page */
.tribe-ui .ql-snow .ql-toolbar .ql-pullquote::before,
.tribe-ui .ql-snow.ql-toolbar .ql-pullquote::before { content: "\275D"; font-size: var(--tc-text-lg); line-height: 1; }

/* DANGER ZONE */

/* MODALS */
.tribe-edit-modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 1000;
  align-items: center; justify-content: center;
  background: rgba(16, 18, 24, .55);
}
.tribe-edit-modal {
  width: 90%; max-width: 460px;
  padding: var(--tc-space-8);
  border-radius: var(--tc-radius-panel);
  background: var(--tc-white);
  box-shadow: 0 20px 60px rgb(var(--tc-ink) / .25);
  text-align: center;
}
.tribe-edit-modal h3 {
  margin: 0 0 var(--tc-space-4);
  font-family: var(--tc-font-display);
  font-size: var(--tc-text-xl); font-weight: 600;
  color: rgb(var(--tc-ink));
}
.tribe-edit-modal p {
  margin: 0 0 var(--tc-space-7);
  font-size: var(--tc-text-base); line-height: 1.5;
  color: rgb(var(--tc-ink) / .72);
}
.tribe-edit-modal__actions { display: flex; justify-content: center; gap: var(--tc-space-3); }

/* inline form error */
.tribe-edit-error {
  margin-bottom: var(--tc-space-4);
  padding: var(--tc-space-3) var(--tc-space-5);
  border: 1px solid var(--tc-danger);
  border-radius: var(--tc-radius-control);
  background: var(--tc-danger-soft);
  color: var(--tc-danger);
  font-size: var(--tc-text-base);
}
/* note card — icon + paragraph */

/* note text — no top margin */

/* old posting form: confirm modal and loading overlay */
.tribe-ui .modal-notification-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: rgb(var(--tc-ink) / .55);
}
.tribe-ui .modal-notification-content {
  width: 90%; max-width: 460px;
  padding: var(--tc-space-8);
  border-radius: var(--tc-radius-panel);
  background: var(--tc-white);
  box-shadow: 0 20px 60px rgb(var(--tc-ink) / .25);
  text-align: center;
}
.tribe-ui .modal-notification-title {
  margin: 0 0 var(--tc-space-4);
  font-family: var(--tc-font-display);
  font-size: var(--tc-text-xl); font-weight: 600;
  color: rgb(var(--tc-ink));
}
.tribe-ui .modal-notification-message {
  margin: 0 0 var(--tc-space-7);
  font-size: var(--tc-text-base); line-height: 1.5;
  color: rgb(var(--tc-ink) / .72);
}
.tribe-ui .modal-notification-actions { display: flex; justify-content: center; gap: var(--tc-space-3); }
.tribe-ui table.full-screen-loading {
  position: fixed; inset: 0; z-index: 9999;
  width: 100%; height: 100%;
  background: rgb(var(--tc-ink) / .75);
}
.tribe-ui table.full-screen-loading img { width: 200px; max-width: 100%; }

/* =============================================================================
                                     COMMENTS
   ============================================================================= */
/* row, bubble, actions, replies, thread lines, composer */

/* ---- Comment item ---- */
.tribe-comment {
  display: flex;
  /* no gap — Bootstrap's clearfix is a flex item here; spacing lives on .tribe-comment-main */
  /* row gap — the stem reaches exactly this far */
  --tc-comment-gap: var(--tc-space-6);
  /* avatar size + nudge — the stem starts at its bottom edge */
  --tc-comment-avatar-size:  28px;
  --tc-comment-avatar-nudge:  3px;
  margin: 0 0 var(--tc-comment-gap) 0;
  align-items: flex-start;
  /* positioning context for the thread lines */
  position: relative;
}

/* A comment whose reply is open holds no trailing gap — the reply belongs to
   it, and the container's own padding is the separation. */
.tribe-comment:has(+ .tribe-reply-container:not(.hide)) { margin-bottom: 0; }

.tribe-comment-avatar {
  flex: 0 0 auto;
  /* nudge down (margin keeps the rail aligned) */
  margin-top: var(--tc-comment-avatar-nudge);
}


/* avatar-to-text spacing */
.tribe-comment-main {
  flex: 1;
  min-width: 0;
  /* the token, so the reply box below cannot drift from this value */
  margin-left: var(--tc-comment-main-gap, 10px);
  /* positioning context for the actions menu */
  position: relative;
}

/* edit/report menu — top-right of the bubble */
.tribe-comment-menu {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 1;
}

/* the author's name — now the first line INSIDE the bubble */
.tribe-comment-identity {
  display: flex;
  align-items: baseline;
  gap: var(--tc-space-2);
  min-width: 0;
  flex-wrap: wrap;
  margin-bottom: 2px;
}

.tribe-comment-author {
  font-weight: 700;
  color: rgb(var(--tc-ink));
  font-size: 13px;
  line-height: 1.4;
}

/* role label in the actions row */

.tribe-comment-tools .dropdown { display: inline-block; }

.tribe-comment-body {
  /* bubble fill */
  background: #00000010; /* translucent, so it follows whatever the content area is set to */
  border-radius: var(--tc-radius-control);
  /* room for the corner menu */
  padding: 10px 34px 10px 14px;
  font-size: 13px;
  margin-top: 5px;
  line-height: 1.5;
  color: #424242;
  word-wrap: break-word;
  /* full width */
  /* positioning context for the actions menu in its top-right corner */
  position: relative;
}

/* Video embedded in a comment. PORTED from components/tcPostView.styles.tpl
   (staging 2637f8c7) when that partial was deleted in the sheet consolidation —
   renamed .tc-comment-body -> .tribe-comment-body to match this namespace.
   Without it, comments carrying a YouTube/Vimeo <iframe> break two ways, both
   measured by that commit against real stored rows: an iframe with width="560"
   renders 560px wide in a 375px viewport (185px of horizontal PAGE scroll), and
   one with no width/height falls back to 300x150. 283 existing comments are in
   one of those two shapes. The <div class="embed-responsive"> the markup relied
   on is not on the comment allowlist, so it is stripped at render and nothing
   else sizes the frame. */
.tribe-comment-body iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--tc-radius-media);
  margin: var(--tc-space-2) 0;
}

.tribe-comment-body p:last-child { margin-bottom: 0; }

.tribe-comment-body img {
  display: block;
  clear: both;
  max-width: 300px;
  height: auto;
  border-radius: 5px;
  margin: 8px 0 5px;
}

/* actions row under the bubble */
/* time + Reply left, like right */
.tribe-comment-actions {
  margin-top: 2px;
  padding-left: 2px;
  display: flex;
  align-items: center;
  gap: var(--tc-space-1);
}

/* the word on each button — "Like", "Reply". One rule so the pair matches. */
.tribe-comment-action-label { font-weight: 600; font-size: var(--tc-text-xs); }

/* like count */
.tribe-like-count {
  font-variant-numeric: tabular-nums;
  color: rgb(var(--tc-ink) / .55);
  font-size: var(--tc-text-sm);
  margin-top: 2px;
}
.tribe-comment-like-btn.is-liked .tribe-like-count { color: inherit; }

/* corner menu — shows on hover */
.tribe-comment-menu .tribe-icon-btn {
  width: 24px;
  height: 24px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgb(var(--tc-ink) / .72);
  opacity: 0;
  transition: opacity var(--tc-ease);
}

.tribe-comment:hover .tribe-comment-menu .tribe-icon-btn,
.tribe-comment-menu.open .tribe-icon-btn,
.tribe-comment-menu .tribe-icon-btn:focus {
  opacity: 1;
}

.tribe-comment-menu .tribe-icon-btn:hover { color: rgb(var(--tc-ink)); }

/* --- Thread lines ---
   stem = down from the parent avatar · trunk = the vertical · elbow = curve into each reply. Tune the tokens only. */
/* rail tokens — shared by replies and the open reply composer */
.tribe-comment-replies,
.tribe-reply-container {
  --tc-thread-rail:   19px;
  /* x of the line == parent avatar's centre */
  --tc-thread-run:    21px;
  /* line -> child avatar edge (also the padding) */
  --tc-thread-weight:  1px;
  /* stroke width of every segment */
  --tc-thread-color: rgb(var(--tc-ink) / .12);
  /* one token for all three segments */
  --tc-thread-mid:    20px;
  /* avatar half-height: where the curve lands */
  --tc-thread-radius: 12px;
  /* how round the bend is */
}

/* replies indent */
.tribe-comment-replies {
  position: relative;
  margin-left: var(--tc-thread-rail);
  padding-left: var(--tc-thread-run);
}

/* node = comment + its sub-thread (flow-root keeps margins inside) */
.tribe-comment-node {
  display: flow-root;
  /* THE BODY INSET, declared once. A comment's text starts at avatar + gap from
     the row's left edge, and the reply box that answers it has to start at the
     same x. They were computed from two different systems - the box used the
     thread rail+run (40px) while the bubble used avatar+margin (38px) - so the
     box sat 2px right of everything it lined up against. Measured, not guessed.
     Declared on the NODE because the reply container is a SIBLING of
     .tribe-comment, not a descendant, so it cannot inherit these from there. */
  --tc-comment-avatar-size: 28px;
  --tc-comment-main-gap: 10px;
  --tc-comment-body-inset: calc(var(--tc-comment-avatar-size) + var(--tc-comment-main-gap));
}

/* each selector pair also covers replies inside .tribe-comments-overflow */
.tribe-comment-replies > .tribe-comment-node,
.tribe-comment-replies > .tribe-comments-overflow > .tribe-comment-node {
  position: relative;
}

/* elbow */
.tribe-comment-replies > .tribe-comment-node::before,
.tribe-comment-replies > .tribe-comments-overflow > .tribe-comment-node::before,
.tribe-reply-container:not(.hide)::before {
  content: "";
  position: absolute;
  left:   calc(-1 * var(--tc-thread-run));
  top:    0;
  width:  var(--tc-thread-run);
  height: var(--tc-thread-mid);
  border-left:   var(--tc-thread-weight) solid var(--tc-thread-color);
  border-bottom: var(--tc-thread-weight) solid var(--tc-thread-color);
  border-bottom-left-radius: var(--tc-thread-radius);
  pointer-events: none;
}

/* trunk — the last reply draws none */
.tribe-comment-replies > .tribe-comment-node:not(:last-child)::after,
.tribe-comment-replies > .tribe-comments-overflow > .tribe-comment-node:not(:last-child)::after {
  content: "";
  position: absolute;
  left:   calc(-1 * var(--tc-thread-run));
  top:    var(--tc-thread-mid);
  bottom: 0;
  width:  var(--tc-thread-weight);
  background: var(--tc-thread-color);
  pointer-events: none;
}

/* stem — parent avatar down to its replies / open composer */
/* ~ not + : the composer can sit between the comment and its replies */
.tribe-comment:has(~ .tribe-comment-replies)::after,
.tribe-comment:has(+ .tribe-reply-container:not(.hide))::after {
  content: "";
  /* display:block — overrides Bootstrap's .row:after display:table */
  display: block;
  position: absolute;
  left: var(--tc-thread-rail, 19px);
  /* derived, not a literal — see the avatar tokens on .tribe-comment */
  top: calc(var(--tc-comment-avatar-size, 28px) + var(--tc-comment-avatar-nudge, 0px));
  bottom: calc(-1 * var(--tc-comment-gap));
  width: var(--tc-thread-weight, 1px);
  background: var(--tc-thread-color, rgb(var(--tc-ink) / .12));
  pointer-events: none;
}

/* With the composer open directly below, the elbow draws the rest of the line.
   Running the stem into it stacked two translucent strokes (darker segment). */
.tribe-comment:has(+ .tribe-reply-container:not(.hide))::after { bottom: 0; }

/* ── ONE indent step, and only one ──────────────────────────────────────────
   A reply indents once under the comment it answers. A reply to THAT reply, and
   everything below it, stays at the same indent instead of stepping right again.
   The cap used to be at 3 levels (2 on a phone), which still ran a long thread
   off the side of a narrow screen and squeezed the bubbles to a few characters
   wide - and the "Write a reply..." composer inherited the same indent, so
   answering a deep comment opened a box jammed against the right edge.

   Flattening is the whole point: the thread line and the avatar already say who
   is answering whom, so the horizontal position does not have to carry it too.

   `.tribe-comment-replies .tribe-comment-replies` is every level from the SECOND
   nested list down - a descendant selector, so it keeps matching however deep it
   goes, which is what makes the cap hold rather than move. */
.tribe-comment-replies .tribe-comment-replies {
  margin-left: 0;
  padding-left: 0;
}

/* With no horizontal run there is nothing for an elbow or a trunk to span, so
   they would draw a stub hanging in the margin. The stem on a parent at that
   depth has nothing to point down INTO, for the same reason. */
.tribe-comment-replies .tribe-comment-replies > .tribe-comment-node::before,
.tribe-comment-replies .tribe-comment-replies > .tribe-comments-overflow > .tribe-comment-node::before,
.tribe-comment-replies .tribe-comment-replies > .tribe-comment-node:not(:last-child)::after,
.tribe-comment-replies .tribe-comment-replies > .tribe-comments-overflow > .tribe-comment-node:not(:last-child)::after,
.tribe-comment-replies .tribe-comment .tribe-comment::after {
  display: none;
}

/* The open reply composer follows the same cap, and it needs ONE ancestor here,
   not two. The composer is a sibling of the comment it answers, inside that
   comment's own node - so the box under a first-level REPLY already sits under a
   single .tribe-comment-replies. Its base rule adds `margin-left: rail + run`,
   which pushed it one step further right than the comment it was answering:
   the reply box appeared to belong to nothing, floating past the bubble above
   it. That is the case in the report, and a two-ancestor selector missed it.

   Indenting the composer is only correct at top level, where the reply it
   creates really will be one step in. From the first reply down, the reply it
   creates lands at the SAME indent as its parent under the cap above, so the
   box belongs at the same indent too. */
.tribe-comment-replies .tribe-reply-container {
  margin-left: 0;
  padding-left: 0;
}
/* the elbow has no horizontal run left to cross, so it would hang in the margin */
.tribe-comment-replies .tribe-reply-container:not(.hide)::before {
  display: none;
}

@media (max-width: 767px) {
  .tribe-comment { --tc-comment-gap: 10px; }
  .tribe-comment-body { padding: 8px 11px; }
  .tribe-comment-replies,
.tribe-reply-container {
    --tc-thread-rail:   15px;
    --tc-thread-run:    17px;
    --tc-thread-mid:    16px;
    --tc-thread-radius: 10px;
  }
  .tribe-comment:has(~ .tribe-comment-replies)::after,
.tribe-comment:has(+ .tribe-reply-container:not(.hide))::after {
    left: var(--tc-thread-rail, 15px);
  }

  /* The cap above is depth-independent and already applies here; the phone only
     needs the tokens for the ONE step it still takes. A second cap at a
     different depth is what made desktop and mobile disagree about where the
     indent stopped. */
}

/* "See all comments" / "Show N more replies" */
.tribe-show-more-comments {
  display: inline-flex;
  align-items: center;
  gap: var(--tc-space-2);
  margin: var(--tc-space-2) 0 var(--tc-space-4);
  padding: 6px var(--tc-space-5);
  border: 1px solid rgb(var(--tc-ink) / .12);
  border-radius: var(--tc-radius-pill);
  background: transparent;
  color: rgb(var(--tc-ink) / .72);
  font-size: var(--tc-text-sm);
  /* 500, not 600 — it is a quiet affordance between comments, and at 600 it
     read heavier than the comment authors' own names above it */
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--tc-ease), border-color var(--tc-ease), color var(--tc-ease);
}

.tribe-show-more-comments:hover,
.tribe-show-more-comments:focus {
  border-color: rgb(var(--tc-ink) / .2);
  background-color: rgb(var(--tc-ink) / .04);
  color: rgb(var(--tc-ink));
  outline: none;
}

/* while the full thread is in flight */
.tribe-show-more-comments:disabled { opacity: .5; cursor: default; }

.tribe-comment-divider {
  display: none;
  height: 1px;
  background: rgb(var(--tc-ink) / .07);
  margin: var(--tc-space-4) 0;
}

/* divider between the composer and the thread */

/* ---- Reply link + container ---- */
/* Reply — matches the like button */
.tribe-reply-link {
  display: inline-flex;
  align-items: center;
  gap: var(--tc-space-1);
  padding: 2px var(--tc-space-2);
  padding-right: 0px;
  border: 0;
  border-radius: var(--tc-radius-control);
  background: none;
  color: rgb(var(--tc-ink) / .72);
  font-size: var(--tc-text-sm);
  line-height: 1;
  cursor: pointer;
  /* reset legacy caps */
  text-transform: none;
  letter-spacing: normal;
}

.tribe-reply-link:hover { background: none; color: rgb(var(--tc-ink)); }

/* open reply composer — hangs off the thread rail; indent is margin, not padding */
.tribe-reply-container {
  position: relative;
  /* padding shorthand — cancels legacy .box padding */
  /* 20px under the wrapper so the reply form is not flush against the
     next comment (operator 2026-09-20). */
  padding: var(--tc-space-3) 0 20px;
  /* Aligned with the comment bubble above it, not with the thread geometry.
     --tc-thread-run is re-derived from that inset so the elbow's left edge still
     lands exactly on the rail: the elbow is drawn at `left: -run` with `width:
     run`, so run must be (inset - rail) or the connector stops short. */
  --tc-thread-run: calc(var(--tc-comment-body-inset) - var(--tc-thread-rail));
  margin-left: var(--tc-comment-body-inset);
}

/* elbow drops to the field's middle */
.tribe-reply-container:not(.hide)::before { height: calc(var(--tc-space-3) + 24px); }

/* The phone-only 7px correction that used to live here is GONE - BOTH halves of
   it. It pulled the container left by 7 and widened the elbow by the same 7 to
   compensate, because the box was positioned from the thread geometry rather
   than from the bubble it answers. The base rule now derives both from
   --tc-comment-body-inset, so the alignment is exact at every width; leaving the
   elbow half behind would have made the connector overshoot the rail by 7px. */
/* coin nudge under the composer */
.tribe-coin-indicator {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--tc-space-2);
  font-size: var(--tc-text-xs);
  font-weight: 500;
  color: rgb(var(--tc-ink) / .72);
}

.tribe-coin-indicator img { width: 16px; height: 16px; }
.tribe-coin-indicator strong { font-weight: 700; color: rgb(var(--tc-ink)); }
.tribe-ico--image { --tc-ico: url("/img/icon/picture.svg"); }
.tribe-ico--gif { --tc-ico: url("/img/icon/gif.svg"); }
.tribe-ico--video { --tc-ico: url("/img/icon/play-alt.svg"); }
.tribe-deal-banner__dot.is-active { background: var(--tc-brand); }
@media (max-width: 767px) {  .tribe-offer-claim .tribe-btn { width: 100%; }}
.tribe-help-cta .tribe-btn { flex: 0 0 auto; }
.tribe-help-link .fa {
  width: 16px;
  flex: 0 0 16px;
  text-align: center;
  font-size: var(--tc-text-sm);
  color: rgb(var(--tc-ink) / .55);
}

@media (max-width: 767px) {  .tribe-help-cta .tribe-btn { width: 100%; }
}
.tribe-bank-filter .tc-input { width: 148px; font-size: var(--tc-text-sm); }

@media (max-width: 767px) {.tribe-bank-filter .tc-input { flex: 1 1 130px; width: auto; }
}

/* =============================================================================
                                   PROFILE PAGE
   ============================================================================= */
/* biography and happiness cards */

/* biography editor — toolbar hidden; selectors outrank the vendor css (don't simplify) */
.tribe-bio-wrap .wysihtml5-toolbar,
.tribe-ui .bootstrap-wysihtml5-insert-video-modal,
.tribe-ui .bootstrap-wysihtml5-insert-image-modal {
  display: none;
}

.tribe-bio-wrap .wysihtml5-sandbox,
.tribe-bio-wrap textarea.bio {
  min-height: 220px;
  border: 1px solid rgb(var(--tc-ink) / .12);
  border-radius: var(--tc-radius-control);
  background: var(--tc-white);
  color: rgb(var(--tc-ink));
}

/* happiness answers — chips; editing happens in a dialog */
.tribe-ui .hp-group {
  display: flex;
  align-items: flex-start;
  gap: var(--tc-space-5);
  padding: var(--tc-space-2) 0;
}

.tribe-ui .hp-group + .hp-group { border-top: 1px solid rgb(var(--tc-ink) / .07); }

.tribe-ui .hp-group-title {
  width: 128px;
  flex-shrink: 0;
  margin: 5px 0 0;
  font-size: var(--tc-text-xs);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: 1.35;
  color: rgb(var(--tc-ink) / .72);
}

.tribe-ui .hp-chips {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--tc-space-2);
}

.tribe-ui .hp-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  max-width: 100%;
  padding: 3px 4px 3px var(--tc-space-4);
  border: 1px solid rgb(var(--tc-ink) / .12);
  border-radius: var(--tc-radius-pill);
  background: rgb(var(--tc-ink) / .05);
  color: rgb(var(--tc-ink));
  font-size: var(--tc-text-sm);
  line-height: 1.5;
  transition: border-color var(--tc-ease), background-color var(--tc-ease);
}

.tribe-ui .hp-chip:hover { border-color: rgb(var(--tc-ink) / .2); }

.tribe-ui .hp-chip-text {
  max-width: 340px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}

.tribe-ui .hp-btn {
  padding: 2px 5px;
  border: 0;
  border-radius: var(--tc-radius-pill);
  background: none;
  color: rgb(var(--tc-ink) / .72);
  font-size: var(--tc-text-2xs);
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--tc-ease), color var(--tc-ease), background-color var(--tc-ease);
}

.tribe-ui .hp-chip:hover .hp-btn,
.tribe-ui .hp-chip:focus-within .hp-btn { opacity: 1; }

/* touch has no hover, so the remove control would be permanently invisible */
@media (hover: none) {
  .tribe-ui .hp-btn { opacity: 1; }
}

.tribe-ui .hp-btn:hover { background: rgb(var(--tc-ink) / .07); color: rgb(var(--tc-ink)); }

.tribe-ui .hp-btn--danger:hover {
  background: color-mix(in srgb, var(--tc-danger) 16%, transparent);
  color: var(--tc-danger);
}

/* removed answer — struck until save */
.tribe-ui .hp-chip.is-removed {
  border-color: color-mix(in srgb, var(--tc-danger) 40%, transparent);
  background: color-mix(in srgb, var(--tc-danger) 12%, transparent);
}

.tribe-ui .hp-chip.is-removed .hp-chip-text {
  text-decoration: line-through;
  color: rgb(var(--tc-ink) / .55);
  cursor: default;
}

.tribe-ui .hp-chip.is-removed .hp-btn { opacity: 1; }

.tribe-ui .hp-add {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px var(--tc-space-4);
  border: 1px dashed rgb(var(--tc-ink) / .2);
  border-radius: var(--tc-radius-pill);
  background: none;
  color: rgb(var(--tc-ink) / .72);
  font: inherit;
  font-size: var(--tc-text-xs);
  cursor: pointer;
  transition: border-color var(--tc-ease), color var(--tc-ease);
}

.tribe-ui .hp-add:hover { border-color: var(--tc-brand); color: var(--tc-brand-strong); }
.tribe-ui .hp-add .fa { font-size: 9px; }

/* edit dialog */
.tribe-ui #hpEditModal .tribe-overlay__card {
  overflow: hidden;
  border: 1px solid rgb(var(--tc-ink) / .12);
  border-radius: var(--tc-radius-panel);
  background: var(--tc-white);
  color: rgb(var(--tc-ink));
}

.tribe-ui #hpEditModal .hp-modal-foot {
  display: flex;
  align-items: center;
  gap: var(--tc-space-2);
  padding: 0 var(--tc-space-7) var(--tc-space-7);
}

.tribe-ui #hpEditModal .hp-modal-spacer { margin-left: auto; }

@media (max-width: 600px) {
  .tribe-ui .hp-group { flex-direction: column; gap: var(--tc-space-2); }
  .tribe-ui .hp-group-title { width: auto; margin: 0; }
  .tribe-ui .hp-chip-text { max-width: 200px; }
}

/* tribe tags — toggle chips */
.tribe-ui .tt-chips { display: flex; flex-wrap: wrap; gap: var(--tc-space-2); }

.tribe-ui .tt-chip {
  position: relative;
  margin: 0;
  cursor: pointer;
  user-select: none;
}

/* hidden checkbox (still submits) */
.tribe-ui .tt-chip input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
}

.tribe-ui .tt-chip > span {
  display: inline-flex;
  align-items: center;
  gap: var(--tc-space-2);
  padding: 6px var(--tc-space-4);
  border: 1px solid rgb(var(--tc-ink) / .12);
  border-radius: var(--tc-radius-pill);
  background: var(--tc-white);
  color: rgb(var(--tc-ink) / .72);
  font-size: var(--tc-text-sm);
  font-weight: 500;
  transition: background-color var(--tc-ease), border-color var(--tc-ease), color var(--tc-ease);
}

/* the +/✓ affordance is a pseudo-element so the label text stays selectable */
.tribe-ui .tt-chip > span::before {
  content: "\f067";
  font-family: FontAwesome;
  font-size: 9px;
  opacity: .55;
}

.tribe-ui .tt-chip:hover > span { border-color: var(--tc-brand); color: rgb(var(--tc-ink)); }

.tribe-ui .tt-chip input:checked + span {
  border-color: var(--tc-brand);
  background: var(--tc-brand-fill);
  color: var(--tc-text-on-brand);
}

.tribe-ui .tt-chip input:checked + span::before { content: "\f00c"; opacity: 1; }

/* the input is invisible, so the ring has to be drawn on the chip */
.tribe-ui .tt-chip input:focus-visible + span { box-shadow: var(--tc-focus); }
.tribe-ui .tt-empty { margin: 0; font-size: var(--tc-text-sm); color: rgb(var(--tc-ink) / .72); }

/* =============================================================================
                                    TRIBE ADMIN
   ============================================================================= */
/* /admin/* is the standard window: the admin nav takes the rail, with the way
   back to the tribe above it. Cards, tables, forms and buttons are the shared
   components — the console has no styling of its own. */
/* Admin keeps the divider the tribe rail dropped: here rail-top is a menu
   button + "Back to tribe", which does need separating from the admin nav. */
/* No border-bottom. The bar already reads as its own band against the lane, and
   the rule under it doubled up with the page header's own top edge. */
.tribe-window__rail--admin .tribe-window__rail-top { display: flex; align-items: center; gap: var(--tc-space-2); }
/* the hamburger is pinned to the far right of the bar, whatever the back
   label's width */
.tribe-window__rail--admin .tribe-admin-nav-toggle { margin-left: auto; }

/* The toggle's glyph. .tribe-btn--icon sizes the BUTTON, and the button's other
   users put an <svg> inside it - which carries its own dimensions. An icon font
   does not: it drew at the button's inherited font-size, which is why the
   hamburger was barely visible in a 33px control. fi-tr-bars-staggered itself is
   fine (glyph-verified); it was only ever too small and too faint. */
.tribe-admin-nav-toggle .fi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  color: rgb(var(--tc-ink));
}
/* Solid white pill with dark text, in BOTH themes (operator 2026-09-20).
   Literal values on purpose: --tc-white flips to #16181c in dark and
   rgb(var(--tc-ink)) flips to near-white, which would give white-on-white. */
/* a simple outline button; it used to be a full-width white slab */
.tribe-admin-back {
  flex: 0 0 auto;
  justify-content: flex-start;
  gap: var(--tc-space-2);
  /* its own horizontal padding: the icon+label pair sat tight against the
     border at the button's default inset */
  padding: 0 var(--tc-space-4);
  background: transparent;
  color: rgb(var(--tc-ink));
  border: 1px solid rgb(var(--tc-ink) / .25);
}
/* EVERY interactive state, not just :hover. main.css recolours a bare <a> on
   :hover/:focus/:active and marks :visited, so pressing this turned the label
   blue and it stayed that way - it is a button, and a button does not change
   colour because you have been through it before. */
.tribe-admin-back:hover,
.tribe-admin-back:focus,
.tribe-admin-back:active,
.tribe-admin-back:visited,
.tribe-admin-back:focus-visible { color: rgb(var(--tc-ink)); text-decoration: none; }
.tribe-admin-back:hover { background: rgb(var(--tc-ink) / .06); }
.tribe-admin-back svg { width: 16px; height: 16px; flex: 0 0 auto; }
/* AUCTION GRID + CARD — /auctions and the Home auctions row share one tile
   (components/auctions/auctionCard.tpl). */
/* minmax(0,1fr) so a long title cannot widen a column; every row one height */
.tribe-auction-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: var(--tc-space-3);
}
@media (max-width: 900px) {
  .tribe-auction-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* The card: rows line up because the title reserves two lines (below). Doubled
   with .tribe-card: that rule sits later in this sheet and would win the tie. */
.tribe-card.tribe-auction-card {
  height: 100%;
  padding: var(--tc-space-3);
  border-radius: var(--tc-radius-tile);
  background: var(--tc-white);
  color: rgb(var(--tc-ink));
  text-decoration: none;
}
/* chips on the photo: New, Cash only, the countdown */
.tribe-auction-card__chips {
  position: absolute;
  top: var(--tc-space-3);
  left: var(--tc-space-3);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--tc-space-1);
  pointer-events: none;
}
/* the countdown, frosted onto the photo; the white fallback keeps it readable */
.tribe-auction-card__clock {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px var(--tc-space-3);
  border-radius: var(--tc-radius-pill);
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  color: #16181c;
  font-size: var(--tc-text-xs);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
.tribe-auction-card__clock svg { width: 12px; height: 12px; flex: 0 0 auto; opacity: .6; }
/* ending soon tints the chip with the tribe's colour, still frosted */
.tribe-auction-card.is-ending-soon .tribe-auction-card__clock {
  background: color-mix(in srgb, var(--tc-brand) 22%, rgba(255, 255, 255, .78));
  color: #16181c;
}
.tribe-auction-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--tc-space-5) var(--tc-space-2) var(--tc-space-2);
}
/* two lines at most, ellipsis after, and always two lines tall so a short
   title keeps its row level with a long one */
.tribe-auction-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.3em * 2);
  margin: 0;
  font-size: var(--tc-text-base);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.2px;
  color: rgb(var(--tc-ink));
}
/* Value and Bids: two outlined boxes pinned to the bottom of the card */
.tribe-auction-card__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--tc-space-2);
  margin-top: auto;
  padding-top: var(--tc-space-4);
}
.tribe-auction-card__stat {
  min-width: 0;
  padding: var(--tc-space-2) var(--tc-space-3);
  border: 1px solid rgb(var(--tc-ink) / .07);
  border-radius: var(--tc-radius-control);
  background: none;
  text-align: left;
}
.tribe-auction-card__label {
  margin-bottom: 3px;
  font-size: var(--tc-text-xs);
  font-weight: 400;
  color: rgb(var(--tc-ink) / .55);
}
.tribe-auction-card__value {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--tc-text-base);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: rgb(var(--tc-ink));
}
/* the bid count is the card's one accent */
.tribe-auction-card__value--bids { color: var(--tc-link); }
/* reduced motion: .tribe-hover-lift (ANIMATION) already stills the card */

/* the photo keeps an edge against the card behind a white product shot */
.tribe-auction-card .tribe-card-media {
  border-radius: var(--tc-radius-media);
  /* a hairline so a white or very light product shot still has an edge against
     the card behind it - same reasoning as the avatar hairline */
  border: 1px solid #ebebeb;
  overflow: hidden;
}

/* On a phone the TITLE and the details come first and the photo follows.
   Source order puts the photo card first, which is right on desktop (photo
   left, words right) but on one column it meant opening an item and seeing a
   large image with no idea what it was. `order` flips them for the narrow
   layout only - the markup, and so the reading order for a screen reader on
   desktop, is untouched. */
@media (max-width: 900px) {}
.tribe-auction-photo-card .tribe-badge {
  position: absolute;
  top: var(--tc-space-4);
  left: var(--tc-space-4);
  z-index: 2;
}/* META ROWS — label left, value right. A row whose value is empty is not
   rendered at all, so there are never dangling labels. */
.tribe-auction-meta {
  display: flex;
  flex-direction: column;
  padding-top: var(--tc-space-5);
  border-top: 1px solid rgb(var(--tc-ink) / .12);
}
/* the description belongs to the facts above it, so it closes the gap the
   column's own gap would otherwise leave */
.tribe-auction-side > .tribe-auction-meta + .tribe-auction-desc { margin-top: calc(var(--tc-space-5) * -1); }
.tribe-auction-meta__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--tc-space-5);
  padding: var(--tc-space-3) 0;
  border-bottom: 1px solid rgb(var(--tc-ink) / .07);
  font-size: var(--tc-text-sm);
}
.tribe-auction-meta__row:last-child { border-bottom: 0; }
.tribe-auction-meta__key { flex: 0 0 auto; color: rgb(var(--tc-ink) / .55); }
.tribe-auction-meta__val { min-width: 0; text-align: right; font-weight: 600; color: rgb(var(--tc-ink)); }
.tribe-bid-dialog__pick.is-active { border-color: var(--tc-brand); background: var(--tc-brand-soft); }
.tribe-bid-dialog__foot .tribe-btn { flex: 0 0 auto; }
@media (max-width: 767px) {
  .tribe-bid-dialog__foot .tribe-btn { flex: 1 1 0; justify-content: center; }
}/* below the popup breakpoint it becomes a drawer off the bottom edge */
@media (max-width: 767px) {
  /* Doubled-up on purpose: .tribe-overlay in tribe.css sets align-items:center
     at the same specificity and loads later, so a bare .tribe-bid-dialog loses
     the tie and the drawer stayed centred. */
  .tribe-overlay.tribe-bid-dialog { align-items: flex-end; padding: 0; }
  .tribe-bid-dialog .tribe-overlay__card {
    max-width: none;
    border-radius: var(--tc-radius-panel) var(--tc-radius-panel) 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

/* BID HISTORY — a stack of CARDS, not a table.
   The table put the amount, the bidder and the time in three fixed columns on
   one line, which meant the name had whatever width was left after the other
   two took theirs - on a phone that was a few characters and an ellipsis, with
   empty column beside it. Each bid is now a small card: avatar, then the name
   with its time under it, then the amount on the right. Nothing competes for a
   single line's width, so it reads the same at 390px as at 1440. */
/* The section matches .tribe-auction-bid above it: a recessed tinted panel
   rather than a white card. On white, the white bid cards inside it had nothing
   to sit on and the whole block read as one flat sheet. */
.tribe-card.tribe-auction-history {
  margin-top: var(--tc-space-7);
  border-color: rgb(var(--tc-ink) / .14);
  background: rgb(var(--tc-ink) / .05);
}/* Show more: the standard secondary button (.tribe-btn), spaced off the list. */
.tribe-auction-history__more { margin-top: var(--tc-space-5); }

}

/* ---- CREATE / EDIT FORM (/auctions/add/custom · /auctions/edit/<id>) ---- */
/* Everything below came out of viewAuctionForm.tpl's page-local <style> block
   on 2026-09-20, retokenised — those rules used --tc-space-md / --tc-radius /
   --tc-border, none of which exist on the new scale. */

/* panel + its button as one left-aligned stack, so the button sits under the
   panel rather than out at the card's right edge */
.tribe-auction-photo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--tc-space-3);
  max-width: 340px;
}

/* the photo panel IS the upload trigger — click it, no separate button needed.
   capped, because a 4:3 panel across a 930px lane is a billboard. */
.tribe-auction-imgdrop {
  position: relative;
  width: 100%;
  max-width: 340px;
  aspect-ratio: 4 / 3;
  border: 2px dashed rgb(var(--tc-ink) / .18);
  border-radius: var(--tc-radius-tile);
  background: var(--tc-white-3) center / cover no-repeat;
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--tc-ease), background-color var(--tc-ease);
}

.tribe-auction-imgdrop:hover { border-color: var(--tc-brand); }
/* it is a button (role, tabindex): a keyboard focus ring, like one */
.tribe-auction-imgdrop:focus-visible { outline: 2px solid var(--tc-brand); outline-offset: 2px; }
/* square: event art, product shots, logos */
.tribe-auction-imgdrop.tribe-imgdrop--square { aspect-ratio: 1 / 1; }
/* the one line under the box that says the box is the button */
.tribe-auction-photo__help { margin: 0; }

/* a photo is set — solid edge, and the prompt becomes a hover scrim */
.tribe-auction-imgdrop.has-image { border-style: solid; }

.tribe-auction-imgdrop__hint {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--tc-space-2);
  padding: var(--tc-space-4);
  font-size: var(--tc-text-sm);
  font-weight: 500;
  color: rgb(var(--tc-ink) / .72);
  text-align: center;
}

.tribe-auction-imgdrop__hint svg { width: 26px; height: 26px; opacity: .7; }

.tribe-auction-imgdrop.has-image .tribe-auction-imgdrop__hint {
  opacity: 0;
  background: rgb(0 0 0 / .45);
  color: #fff;
  transition: opacity var(--tc-ease);
}

.tribe-auction-imgdrop.has-image:hover .tribe-auction-imgdrop__hint { opacity: 1; }

/* a value the member cannot change — reads as a field, is not one */
.tribe-auction-readonly {
  height: 38px;
  padding: 0 var(--tc-space-4);
  border: 1px solid rgb(var(--tc-ink) / .12);
  border-radius: var(--tc-radius-control);
  background: var(--tc-white-3);
  color: rgb(var(--tc-ink) / .72);
  line-height: 36px;
}

/* the "(optional)" tail on a label — lowercase against the uppercase label */
.tribe-auction-optional {
  font-weight: 400;
  text-transform: none;
  color: rgb(var(--tc-ink) / .55);
}

/* empty-field marker set by the form's own submit check */
.tribe-auction-form .tribe-field.has-error :where(input, select, textarea) { border-color: var(--tc-danger); }
.tribe-auction-form .tribe-field.has-error .tribe-label { color: var(--tc-danger); }

/* card footer — flex, not the shared text-align:right, so the two buttons keep
   an even gap and stay on the baseline when one of them is absent */
.tribe-auction-form .tribe-card-foot { display: flex; justify-content: flex-end; gap: var(--tc-space-3); }

/* =============================================================================
                                   SEND EMAIL
   =============================================================================
   /admin/sendemail. Cards, fields, chips and the menu are the shared
   components; these are only the parts they do not cover. */
/* member-search rows clip a long name or email instead of scrolling sideways */
.tribe-sendemail__drop .tribe-menu__item > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* merge tags: each tag button beside what it stands for */
.tribe-sendemail__tags {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--tc-space-2) var(--tc-space-4);
  font-size: var(--tc-text-sm);
  color: rgb(var(--tc-ink) / .72);
}
.tribe-sendemail__tags .tribe-btn { justify-self: start; }

/* wysihtml5 writes a fixed pixel width and its own border inline on the iframe */
.tribe-sendemail .wysihtml5-toolbar { margin-bottom: var(--tc-space-2); }
.tribe-sendemail .wysihtml5-sandbox {
  width: 100% !important;
  min-height: 220px;
  border: 1px solid rgb(var(--tc-ink) / .12) !important;
  border-radius: var(--tc-radius-control);
}

/* a picture of the top of the sent email; email renders light in every
   theme, so these colours are the email's, not the page's */
.tribe-sendemail__mock { margin-top: var(--tc-space-4); padding: var(--tc-space-4); border-radius: var(--tc-radius-control); background: #f4f5f7; }
.tribe-sendemail__mock-card { max-width: 600px; overflow: hidden; border: 1px solid #dfe1e4; border-radius: 14px; background: #f2f3f4; }
.tribe-sendemail__mock-banner { height: 60px; background: center / cover no-repeat; }
.tribe-sendemail__mock-logo { height: 56px; padding: 14px 0 2px; background: url('/img/logo-tribecity-alt.png') center / contain no-repeat content-box; }
.tribe-sendemail__mock-sheet { margin: 10px 12px 14px; padding: 14px 18px; border-radius: 12px; background: #fff; }
.tribe-sendemail__mock-sheet i { display: block; height: 8px; margin: 0 0 6px; border-radius: 4px; background: #f1f3f5; }
.tribe-sendemail__mock-sheet i:first-child { width: 52%; height: 10px; margin-bottom: 8px; background: #e9ecef; }
.tribe-sendemail__mock-sheet i:last-child { width: 88%; margin-bottom: 0; }

/* the send card: who it goes to on the left, the buttons on the right */
.tribe-sendemail__send { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--tc-space-4); }
.tribe-sendemail__count { font-size: var(--tc-text-sm); color: rgb(var(--tc-ink) / .72); }
/* the real send is first in the DOM for Enter-key submission, and shown last */
.tribe-sendemail__actions { flex-direction: row-reverse; margin-left: auto; }


/* =============================================================================
                              TRIBE DESIGN SYSTEM
   =============================================================================
   The platform stylesheet. Loads last.

   Rules: no wrapper pads itself · no negative margins · flow by default
          role names not page names · tribe-* only

   Sections: tokens · base · shell · nav · page · card · buttons · forms
   ========================================================================== */

/* =============================================================================
                                     TOKENS
   ============================================================================= */
:root {
  /* surfaces and ink. ink is rgb channels, used as rgb(var(--tc-ink) / alpha). */
  --tc-white:         #ffffff;
  --tc-white-2:       #f6f7f9;
  --tc-white-3:       #eceef2;
  --tc-page:          #f1f2f5;
  /* the phone page behind light-mode cards, so the white cards stand off it */
  --tc-surface-sunk:  #f7f8f9;
  --tc-ink:           18 20 24;

  /* the tribe's Primary Color. head.tpl overwrites --tc-brand per tribe. */
  --tc-brand:         #e8a66d;
  --tc-brand-strong:  color-mix(in srgb, var(--tc-brand) 84%, #000);
  /* brand as a filled surface under --tc-text-on-brand; head.tpl sets both per tribe (brand_ink) */
  --tc-brand-fill:    #be8859;
  --tc-brand-soft:    color-mix(in srgb, var(--tc-brand) 14%, transparent);
  --tc-text-on-brand: #ffffff;

  --tc-danger:        #c4362c;
  --tc-danger-soft:   #fef2f2;
  --tc-success:       #22c55e;
  --tc-success-soft:  #f0fdf4;
  --tc-success-ink:   #15803d;
  --tc-warning:       #f59e0b;
  --tc-warning-soft:  #fffbeb;
  --tc-warning-ink:   #b45309;
  --tc-link:          #1e5fd0;

  --tc-shadow:        0 1px 2px rgba(16, 18, 22, .04), 0 6px 18px rgba(16, 18, 22, .06);
  --tc-focus:         0 0 0 3px rgba(30, 95, 208, .35);

  /* fills for the frosted window, its panels and their edges */
  /* glass = a colour triplet + an alpha, so the alpha is settable per tribe */
  --tc-glass-rgb:   255 255 255;
  --tc-glass-a:     .58;
  --tc-glass-shell-a: .30;
  --tc-glass:       rgb(var(--tc-glass-rgb) / var(--tc-glass-a));
  --tc-glass-shell: rgb(var(--tc-glass-rgb) / var(--tc-glass-shell-a));
  --tc-glass-line:  rgba(255, 255, 255, .55);
  /* frost — the slanted sheen laid OVER the glass. --tc-frost tints it,
     --tc-frost-k scales how strongly it reads. */
  --tc-frost:   255 255 255;
  --tc-frost-k: 1;
  --tc-sheen: linear-gradient(120deg,
    rgb(var(--tc-frost) / 0) 0%,
    rgb(var(--tc-frost) / calc(.07 * var(--tc-frost-k))) 34%,
    rgb(var(--tc-frost) / calc(.13 * var(--tc-frost-k))) 50%,
    rgb(var(--tc-frost) / calc(.07 * var(--tc-frost-k))) 66%,
    rgb(var(--tc-frost) / 0) 100%);
  --tc-bg-image: none;

  /* spacing scale. the number is the step, not the pixels. */
  /* CONTROL HEIGHT — every button, in every variant, reads from these. The
     feed controls used to carry a bespoke 32px that matched nothing else in
     the scale, so a bar mixing them looked ragged. */
  --tc-btn-h:    33px;
  --tc-btn-px:   12px;
  /* 30, not 25. The -5px was asked for the MAIN control; extrapolating it to the
     small one put the bank filter's buttons 13px out of register with the 38px
     inputs beside them, and 25px is under a usable tap target. */
  --tc-btn-h-sm: 30px;
  --tc-btn-h-lg: 39px;
  /* the smallest thumb target a phone control may have */
  --tc-tap:      44px;

  --tc-space-1:  4px;
  --tc-space-2:  8px;
  --tc-space-3:  10px;
  --tc-space-4:  12px;
  --tc-space-5:  14px;
  --tc-space-6:  18px;
  --tc-space-7:  24px;
  --tc-space-8:  32px;
  --tc-space-10: 40px;

  /* corner radii, named for what they wrap */
  /* 7.2px, RESTORED. It was briefly retuned to 5px to satisfy "radius 5 on the
     buttons", but this token has ~49 consumers and only about half are controls —
     media thumbnails, the save bar, alerts and chat bubbles ride it too, and at
     7.2 that misuse was invisible. Dropping it to 5 squared all of them off.
     Buttons get their own token below; this one keeps the family it always had. */
  --tc-radius-control: 7.2px;
  /* The button/input family specifically. Kept separate from --tc-radius-control
     so tuning a button can never reshape a thumbnail or a panel again. */
  --tc-radius-btn: 5px;
  --tc-radius-media:   8.6px;
  --tc-radius-tile:    10px;
  --tc-radius-panel:   12.8px;
  --tc-radius-window:  18.6px;
  --tc-radius-pill:    999px;

  /* font sizes */
  --tc-text-2xs:  10px;
  --tc-text-xs:   11px;
  --tc-text-sm:   13px;
  --tc-text-base: 14px;
  --tc-text-md:   16px;
  --tc-text-lg:   18px;
  --tc-text-xl:   22px;

  --tc-font:         'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --tc-font-display: 'Rubik', var(--tc-font);

  --tc-ease: 150ms ease;

  /* window and lane sizes */
  --tc-col-side: 264px;
  --tc-lane-max: 720px;
  --tc-head-h:   60px;
  --tc-bn-h:     62px;

}

/* dark theme. Applies when <html data-theme="dark">. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --tc-white:         #16181c;
  --tc-white-2:       #1c1f24;
  --tc-white-3:       #23262c;
  --tc-page:          #0c0d10;
  --tc-ink:           236 240 246;

  --tc-danger:        #f2685c;
  --tc-danger-soft:   rgba(242, 104, 92, .14);
  --tc-success:       #34d399;
  --tc-success-soft:  rgba(52, 211, 153, .14);
  --tc-success-ink:   #6ee7b7;
  --tc-warning:       #fbbf24;
  --tc-warning-soft:  rgba(251, 191, 36, .14);
  --tc-warning-ink:   #fcd34d;
  --tc-link:          #8fbaff;

  --tc-shadow:        0 6px 18px rgba(0, 0, 0, .2);
  --tc-focus:         0 0 0 3px rgba(143, 186, 255, .4);
  --tc-glass-rgb:   22 24 28;
  --tc-glass-a:     .5;
  --tc-glass-shell-a: .34;
  --tc-glass-line:  rgba(236, 240, 246, .16);
  --tc-sheen: linear-gradient(120deg,
    rgb(var(--tc-frost) / 0) 0%,
    rgb(var(--tc-frost) / calc(.035 * var(--tc-frost-k))) 34%,
    rgb(var(--tc-frost) / calc(.065 * var(--tc-frost-k))) 50%,
    rgb(var(--tc-frost) / calc(.035 * var(--tc-frost-k))) 66%,
    rgb(var(--tc-frost) / 0) 100%);
}

/* FROST — the tint of that sheen, and how strong it reads. Set from the tribe's
   Theme settings; unset stays neutral white, which is the look before this. */
/* none kills the layer outright, so strength cannot bring it back */
:root[data-frost="none"] { --tc-sheen: none; }
[data-frost="white"]  { --tc-frost: 255 255 255; }
[data-frost="slate"]  { --tc-frost: 148 163 184; }
[data-frost="sand"]   { --tc-frost: 214 188 150; }
[data-frost="violet"] { --tc-frost: 167 139 250; }
[data-frost="sage"]   { --tc-frost: 150 180 148; }
[data-frost="rose"]   { --tc-frost: 244 164 180; }

/* Six more, added 2026-09-23. Kept in the same mid-tone, medium-saturation
   band as the originals: this is a TINT over glass, so a saturated value
   stops reading as a sheen and starts reading as a coloured filter over
   the whole shell. Any hue added here must ALSO be added to the picker in
   components/tribeThemeSettings.tpl and to the allow-list in
   TribeData::verifyVars() - that list falls back to 'none', so a hue missing
   from it silently saves as no frost at all. */
[data-frost="blue"]    { --tc-frost: 125 170 235; }
[data-frost="teal"]    { --tc-frost: 120 198 195; }
[data-frost="amber"]   { --tc-frost: 236 196 124; }
[data-frost="coral"]   { --tc-frost: 246 156 132; }
[data-frost="plum"]    { --tc-frost: 190 144 196; }
[data-frost="mint"]    { --tc-frost: 150 214 184; }

[data-frost-strength="large"]   { --tc-frost-k: 2.4; }
[data-frost-strength="intense"] { --tc-frost-k: 3.5; }

/* SURFACE TONE — the fill of the content surfaces. Cream is the default look;
   neutral and white are the alternatives. */
:root[data-tone="neutral"] .tribe-window__lane {
  --tc-white-2:   #f6f7f9;
  --tc-lane-rgb:  246 247 249;
}
:root[data-tone="white"] .tribe-window__lane {
  --tc-white-2:   #f4f5f7;
  --tc-lane-rgb:  255 255 255;
}

/* GLASS — how much of the background shows through the rail and the aside.
   The lane and the window shell are deliberately out of reach. :root-qualified
   so these beat :root[data-theme="dark"], which declares the same alpha. */
:root[data-glass="sheer"] { --tc-glass-a: .32; }
:root[data-glass="solid"] { --tc-glass-a: 1; }

/* the blur behind a solid panel is wasted work */
:root[data-glass="solid"] .tribe-window__rail,
:root[data-glass="solid"] .tribe-window__aside {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* The iOS app's taller bar. :root-qualified so it beats the base :root token
   regardless of sheet order — a plain .is-ios-app ties and loses. */
:root.is-ios-app { --tc-bn-h: 82px; }

/* opaque panel fills where backdrop-filter is unsupported */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --tc-glass: #ffffff; --tc-glass-shell: #f1f2f5; }
  :root[data-theme="dark"] { --tc-glass: #16181c; --tc-glass-shell: #0c0d10; }
}

/* =============================================================================
                                      BASE
   ============================================================================= */
.tribe-base {
  font-family: var(--tc-font);
  font-size: var(--tc-text-base);
  line-height: 1.45;
  letter-spacing: -.1px;
  color: rgb(var(--tc-ink));
  -webkit-font-smoothing: antialiased;
}

.tribe-base :focus-visible { outline: none; box-shadow: var(--tc-focus); }

:where(.tribe-base a) { text-decoration: none; color: inherit; }

/* removes link underlines on hover and focus */
a:hover,
a:focus,
a:active { text-decoration: none; }

/* removes the browser focus outline. Focus rings come from :focus-visible above. */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus { outline: none; }

/* A link keeps one colour through every state. The hover/focus colour has to
   be declared, not inherited: main.css a:hover and bootstrap a:focus are both
   (0,1,1) and would otherwise beat the (0,1,0) resting colour. */
.tribe-link { color: var(--tc-link); }
.tribe-link:hover,
.tribe-link:focus,
.tribe-link:active { color: var(--tc-link); text-decoration: underline; }

/* links written inside member content */
.tribe-post-text a,
.tribe-comment-body a,
.tribe-section-help a,
.tribe-check-desc a { color: var(--tc-link); }
.tribe-post-text a:hover,
.tribe-post-text a:focus,
.tribe-comment-body a:hover,
.tribe-comment-body a:focus,
.tribe-section-help a:hover,
.tribe-section-help a:focus,
.tribe-check-desc a:hover,
.tribe-check-desc a:focus { color: var(--tc-link); text-decoration: underline; }

/* un-italicises UIcons glyphs */
.fi { font-style: normal; font-weight: normal; line-height: 1; }

/* =============================================================================
                                     SHELL
   ============================================================================= */
/* the background photo, behind the window */
.tribe-backdrop { margin: 0; background: none; }
.tribe-backdrop::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  scale: 1.06;
  background: var(--tc-bg-image) center / cover no-repeat, var(--tc-page);
  pointer-events: none;
}

/* the frosted window that holds the three columns */
.tribe-window,
.tribe-window * { box-sizing: border-box; }

.tribe-window {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-areas: "rail lane aside";
  grid-template-columns: var(--tc-col-side) minmax(0, 1fr) var(--tc-col-side);
  grid-template-rows: minmax(0, 1fr);
  gap: var(--tc-space-3);
  width: min(100% - 2 * var(--tc-space-6),
    calc(2 * var(--tc-col-side) + var(--tc-lane-max) + 4 * var(--tc-space-3) + 2px));
  height: calc(100vh - 2 * var(--tc-space-6));
  margin: var(--tc-space-6) auto;
  padding: var(--tc-space-3);
  /* clip, NOT hidden. `hidden` still makes this a scroll container, so the
     save bars parked below the window (translated out of view) gave it 487px
     of scrollable overflow — and any focus or programmatic scroll shoved the
     whole shell upward, leaving a band of bare page background beneath it.
     `clip` creates no scroll container, so nothing can scroll it. */
  /* Paired on purpose: Safari/iOS below 16 does not know `clip` and DROPS the
     declaration, which would leave overflow visible and re-expose the parked
     save bars. The older engine keeps `hidden`, newer ones take `clip`. */
  overflow: hidden;
  overflow: clip;
  border: 1px solid var(--tc-glass-line);
  border-radius: var(--tc-radius-window);
  background: var(--tc-glass-shell);
  box-shadow: var(--tc-shadow);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
  color: rgb(var(--tc-ink));
}

/* a Bootstrap modal inside the window must stack above its backdrop on body, so the window stops being a stacking context and fixed containing block */
body.modal-open .tribe-window { isolation: auto; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* drops the right column; the lane takes its space */
.tribe-window--2col {
  grid-template-areas: "rail lane";
  grid-template-columns: var(--tc-col-side) minmax(0, 1fr);
}

/* the three columns. these scroll, the page does not. */
.tribe-window__rail,
.tribe-window__lane,
.tribe-window__aside {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  scrollbar-width: none;
  border: 1px solid var(--tc-glass-line);
  border-radius: var(--tc-radius-panel);
  box-shadow: var(--tc-shadow);
}

/* the two side panels are the glass. the frost sheen rides on top of them. */
.tribe-window__rail,
.tribe-window__aside {
  background: var(--tc-sheen), var(--tc-glass);
  -webkit-backdrop-filter: blur(60px) saturate(150%);
  backdrop-filter: blur(60px) saturate(150%);
}

/* Refraction at the panel edges. Declared separately and behind @supports so a
   browser that cannot render an SVG filter here keeps the plain blur above
   rather than dropping the whole declaration. */
@supports (backdrop-filter: url("#tribe-glass")) or (-webkit-backdrop-filter: url("#tribe-glass")) {
  .tribe-window__rail,
  .tribe-window__aside {
    -webkit-backdrop-filter: blur(60px) saturate(150%) url("#tribe-glass");
    backdrop-filter: blur(60px) saturate(150%) url("#tribe-glass");
  }
  /* a solid panel shows nothing through it, so the refraction is wasted work */
  :root[data-glass="solid"] .tribe-window__rail,
  :root[data-glass="solid"] .tribe-window__aside {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
.tribe-glass-def { position: absolute; width: 0; height: 0; overflow: hidden; }

/* GLASS, as a reusable class.
   The rail and the aside above get this treatment by selector because they are
   the shell. Anything else that wants to read as the same material - the
   membership ticket, for one - had no way to ask for it without duplicating the
   backdrop-filter stack. This is that stack, once, under a name. */
.tribe-glass {
  background: var(--tc-sheen), var(--tc-glass);
  -webkit-backdrop-filter: blur(60px) saturate(150%);
  backdrop-filter: blur(60px) saturate(150%);
}
@supports (backdrop-filter: url("#tribe-glass")) or (-webkit-backdrop-filter: url("#tribe-glass")) {
  .tribe-glass {
    -webkit-backdrop-filter: blur(60px) saturate(150%) url("#tribe-glass");
    backdrop-filter: blur(60px) saturate(150%) url("#tribe-glass");
  }
  :root[data-glass="solid"] .tribe-glass {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* the lane is an opaque surface, never glass and never frosted */
.tribe-window__lane { background: rgb(var(--tc-lane-rgb)); }

.tribe-window__rail  { grid-area: rail; gap: var(--tc-space-2); padding: var(--tc-space-4) var(--tc-space-3) var(--tc-space-2); }
.tribe-window__lane  { grid-area: lane; }
.tribe-window__aside { grid-area: aside; gap: var(--tc-space-6); }

/* left column: switcher on top, nav in the middle, tray at the bottom */
/* the switcher spans the rail and clears the nav below it */
.tribe-window__rail-top { flex: 0 0 auto; padding-bottom: var(--tc-space-2); }
.tribe-window__rail-top .tribe-selector,
.tribe-window__rail-top .tribe-selector-selector,
.tribe-window__rail-top .currentTribe,
.tribe-window__rail-top .currentTribe > .dropdown-toggle { width: 100%; }

.tribe-window__rail-nav { flex: 1 1 auto; min-height: 0; }
.tribe-window__rail-bottom {
  flex: 0 0 auto;
  margin-top: auto;
  padding: var(--tc-space-2);
  /* Same outline as the membership ticket directly below it. The tray had a
     fill but no border, so the two stacked cards in this corner of the rail
     were drawn in different languages - one outlined, one not. */
  border: 1px solid rgb(255 255 255 / .14);
  border-radius: var(--tc-radius-control);
  background: rgb(255 255 255 / 58%);
}
/* desktop only: below 1024 the tray has no fill at all, and a :root-qualified
   rule would beat that reset because a media query adds no specificity */
@media (min-width: 1024px) {
  :root[data-theme="dark"] .tribe-window__rail-bottom { background: rgb(var(--tc-ink) / .06); }
}

/* The ticket sits under the icon tray, on the tray's own surface — so that is
   what its notches are punched against.

   DESKTOP ONLY. Below 1024px the rail becomes the mobile top bar, where this
   rendered as a card floating over the header; the phone already carries the
   ticket in the More sheet, so showing it here too was both broken and a
   duplicate. */
/* The ticket is a direct child of the rail now, not of the icon tray, so these
   are scoped to .tribe-window__rail. Desktop only: the phone gets it in the
   More sheet instead. */
.tribe-window__rail > .tribe-memberticket { display: none; }
@media (min-width: 1024px) {
  .tribe-window__rail > .tribe-memberticket {
    display: block;
    flex: 0 0 auto;
    /* No top margin: the rail's own flex `gap` already separates it from the
       tray, and the extra 10px here stacked on top of that and pushed the
       ticket away from the cluster it belongs to. */
    margin-top: 0;
    /* Punched against the RAIL, not the tray - the ticket no longer sits on the
       tray's tint, so a notch painted in the tray colour showed as a light dot. */
    --tc-mt-notch: transparent;
  }
}

/* the tray reads left to right: you, alerts, messages, then coins on the end */
.tribe-window__rail-bottom .header-actions {
  display: flex;
  align-items: center;
  /* 4, not 10. Each toggle is a 32px box with a 17px glyph in it, so the boxes
     already carry their own breathing room; a 10px gap on top of that pushed
     the bell and the envelope apart far enough to stop reading as one cluster. */
  gap: var(--tc-space-1);
  width: 100%;
}
.tribe-window__rail-bottom .profile-menu { order: 1; }
/* The bell and the envelope are one pair and the avatar is a separate thing, so
   the gap before the pair is wider than the 4px gap inside it. Applied to the
   FIRST of the two rather than to the profile, so the spacing belongs to the
   group it introduces. */
.tribe-window__rail-bottom .notifications-dropdown { order: 2; }
/* :not(.messages-dropdown) matters - the messages toggle carries BOTH classes
   (notifications-dropdown messages-dropdown), so an unqualified rule here would
   have pushed the envelope away from the bell as well and split the very pair
   this gap is meant to introduce. */
.tribe-window__rail-bottom .notifications-dropdown:not(.messages-dropdown) { margin-left: 5px; }
.tribe-window__rail-bottom .messages-dropdown { order: 3; display: inline-flex; }
.tribe-window__rail-bottom .coins-display { order: 5; margin-left: auto; }
/* a hairline between the coin pill and the icon cluster. The element already
   exists in notifications.tpl and only renders alongside the coins. */
.tribe-window__rail-bottom .header-divider {
  flex: 0 0 auto;
  align-self: center;
  width: 1px;
  height: 20px;
  background: rgb(var(--tc-ink) / .16);
  /* 4, between the envelope (3) and the coin pill (5). It has no order of its
     own, so without this it sorts to the front; 3 tied with the envelope and
     which side it landed on came down to DOM order. */
  order: 4;
}

/* keeps the middle column light in both themes. Repeated on the mobile bar
   below because a var() resolves at the element that declares it. */
.tribe-window__lane {
  --tc-white:        #ffffff;
  --tc-white-2:      #f6f3ed;
  --tc-white-3:      #eceef2;
  --tc-ink:          18 20 24;
  --tc-lane-rgb:     246 243 237;
  --tc-glass-line:   rgba(255, 255, 255, .7);
  --tc-link:         #1e5fd0;
  --tc-danger:       #c4362c;
  --tc-danger-soft:  #fef2f2;
  --tc-success:      #22c55e;
  --tc-success-soft: #f0fdf4;
  --tc-success-ink:  #15803d;
  --tc-warning:      #f59e0b;
  --tc-warning-soft: #fffbeb;
  --tc-warning-ink:  #b45309;
  color: rgb(var(--tc-ink));
}

/* MOBILE LIGHT. The page is a light grey with white cards on it, not the
   tribe's cream/neutral tone (those are dark-mode variations). */
@media (max-width: 1023px) {
  :root[data-theme="light"] .tribe-window__lane {
    --tc-white-2:  #f4f5f7;
    --tc-lane-rgb: 247 248 249;
    /* light grey, so the white cards separate from the page (Home too) */
    background: var(--tc-surface-sunk);
  }
  /* the page colour fills the screen on short pages, in both themes */
  :root[data-theme] .tribe-window__lane { min-height: calc(100dvh - var(--tc-topbar-h) - var(--tc-bn-h)); }
}

/* MOBILE DARK. On a phone, dark mode reaches the whole view (the header
   toggle's Dark mode): the page takes the theme on a near-black background, and
   the top bar and the bottom nav share one solid dark bar colour. Light mode
   keeps the light bars. The More sheet follows the theme like the bar. */
@media (max-width: 1023px) {
  :root[data-theme="dark"] { --tc-mobar-bg: #111317; }
  :root[data-theme="dark"] .tribe-window__rail {
    --tc-white: inherit;  --tc-white-2: inherit;  --tc-white-3: inherit;
    --tc-ink: inherit;    --tc-link: inherit;
    border-bottom-color: rgb(255 255 255 / .08);
    background: var(--tc-mobar-bg);
  }
  :root[data-theme="dark"] .tribe-window__lane {
    --tc-white: inherit;        --tc-white-2: inherit;       --tc-white-3: inherit;
    --tc-ink: inherit;          --tc-glass-line: inherit;
    --tc-link: inherit;         --tc-danger: inherit;        --tc-danger-soft: inherit;
    --tc-success: inherit;      --tc-success-soft: inherit;  --tc-success-ink: inherit;
    --tc-warning: inherit;      --tc-warning-soft: inherit;  --tc-warning-ink: inherit;
    --tc-lane-rgb: 12 13 16;    /* --tc-page as a triplet, for what paints in the lane colour */
    background: var(--tc-page);
  }
  /* the bar and the More sheet read the same --tc-bn-* tokens */
  :root[data-theme="dark"] .tc-bottom-nav,
  :root[data-theme="dark"] .tc-bn-sheet {
    --tc-bn-bg:          var(--tc-mobar-bg);
    --tc-bn-fg:          rgb(var(--tc-ink) / .6);
    --tc-bn-fg-active:   rgb(var(--tc-ink));
    --tc-bn-border:      rgb(255 255 255 / .08);
    --tc-bn-surface:     rgb(var(--tc-ink) / .06);
    --tc-bn-surface-hov: rgb(var(--tc-ink) / .1);
  }
  :root[data-theme="dark"] .tc-bottom-nav { background: var(--tc-mobar-bg); }
  /* the sheet drops its light-island pin and takes the dark page tokens */
  :root[data-theme="dark"] .tc-bn-sheet-panel {
    --tc-white: inherit;        --tc-white-2: inherit;       --tc-white-3: inherit;
    --tc-ink: inherit;          --tc-link: inherit;
    --tc-danger: inherit;       --tc-danger-soft: inherit;
    --tc-success: inherit;      --tc-success-soft: inherit;  --tc-success-ink: inherit;
    --tc-warning: inherit;      --tc-warning-soft: inherit;  --tc-warning-ink: inherit;
  }
  :root[data-theme="dark"] .tc-bn-sheet-handle { background: rgb(255 255 255 / .2); }
  /* comments: a light wash and soft grey text on the near-black page */
  :root[data-theme="dark"] .tribe-comment-body { background: #ffffff10; color: #bfbfbf; }
  :root[data-theme="dark"] .tribe-post-action { border-color: #ffffff10; }
}

/* MATCH THEME (Feed bar color = "Match theme"). The lane drops its light island
   and takes the side panels' material: the page's own tokens (dark in dark mode)
   and the same glass + frost. In dark mode it sits 10% darker than the rails.
   Desktop only: on a phone the "panels" are the light top and bottom bars, with
   no photo behind the lane, so the standard light lane is the match there.
   The glass is painted on a pseudo-element in the lane's grid cell, NOT on the
   lane: a backdrop-filter on the lane would make it the containing block for
   every fixed popup inside it, and the lane scrolls. */
@media (min-width: 1024px) {
:root[data-tone="theme"] .tribe-window__lane {
  --tc-white: inherit;        --tc-white-2: inherit;       --tc-white-3: inherit;
  --tc-ink: inherit;          --tc-glass-line: inherit;
  --tc-lane-rgb: var(--tc-glass-rgb);   /* the glass fill, for what paints in the lane colour */
  --tc-link: inherit;         --tc-danger: inherit;        --tc-danger-soft: inherit;
  --tc-success: inherit;      --tc-success-soft: inherit;  --tc-success-ink: inherit;
  --tc-warning: inherit;      --tc-warning-soft: inherit;  --tc-warning-ink: inherit;
  background: none;
}
:root[data-tone="theme"] .tribe-window::before {
  content: "";
  grid-area: lane;
  border-radius: var(--tc-radius-panel);
  background: var(--tc-sheen), var(--tc-glass);
  -webkit-backdrop-filter: blur(60px) saturate(150%);
  backdrop-filter: blur(60px) saturate(150%);
  pointer-events: none;
}
:root[data-theme="dark"][data-tone="theme"] .tribe-window::before {
  -webkit-backdrop-filter: blur(60px) saturate(150%) brightness(.9);
  backdrop-filter: blur(60px) saturate(150%) brightness(.9);
}
:root[data-glass="solid"][data-tone="theme"] .tribe-window::before {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* the header's solid band would read as a slab on the glass */
:root[data-tone="theme"] .tribe-page-header { background-color: transparent; }
}

/* LIGHT MODE, DESKTOP. One clean look, whatever the tribe's glass, frost and
   tone settings say (those are dark-mode variations): a solid light grey
   window and side panels, the panels with a hairline edge, a white centre
   column. Declared after MATCH THEME so it wins those ties. */
@media (min-width: 1024px) {
  :root[data-theme="light"] .tribe-window {
    border-color: rgb(var(--tc-ink) / .06);
    background: #f1f2f5;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  :root[data-theme="light"] .tribe-window::before { content: none; }
  :root[data-theme="light"] .tribe-window__rail,
  :root[data-theme="light"] .tribe-window__aside {
    border-color: rgb(var(--tc-ink) / .09);
    background: #f1f2f5;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  :root[data-theme="light"] .tribe-window__lane {
    --tc-white-2:  #f4f5f7;
    --tc-lane-rgb: 255 255 255;
    border-color: rgb(var(--tc-ink) / .09);
    background: #ffffff;
  }
  /* profile, notifications, messages and tribe-switcher menus: plain white,
     no frost tint and no blur of what sits behind them */
  :root[data-theme="light"] .profile-menu .profile-menu-list:popover-open,
  :root[data-theme="light"] .notifications-dropdown .notifications-menu:popover-open,
  :root[data-theme="light"] .tribe-window__rail-top .dropdown-menu:popover-open {
    border-color: rgb(var(--tc-ink) / .09);
    background: #ffffff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  /* the cards in the rail read as white tiles on the grey */
  :root[data-theme="light"] .tribe-window__rail-bottom {
    border-color: rgb(var(--tc-ink) / .08);
    background: #ffffff;
  }
  :root[data-theme="light"] .tribe-window__rail .tribe-memberticket {
    --tc-mt-notch: #f1f2f5;
    border-color: rgb(var(--tc-ink) / .08);
    background: #ffffff;
    color: rgb(var(--tc-ink) / .72);
  }
  :root[data-theme="light"] .tribe-window__rail .tribe-memberticket__label { color: rgb(var(--tc-ink)); }
  :root[data-theme="light"] .tribe-window__rail .tribe-memberticket__since,
  :root[data-theme="light"] .tribe-window__rail .tribe-memberticket__pass { color: rgb(var(--tc-ink) / .6); }
  :root[data-theme="light"] .tribe-window__rail .tribe-memberticket__perf { border-top-color: rgb(var(--tc-ink) / .2); }
  :root[data-theme="light"] .tribe-window__rail .tribe-memberticket__code {
    background-image: repeating-linear-gradient(to right,
      rgb(var(--tc-ink) / .7) 0 1px, transparent 1px 3px,
      rgb(var(--tc-ink) / .7) 3px 5px, transparent 5px 6px,
      rgb(var(--tc-ink) / .7) 6px 7px, transparent 7px 10px);
  }
}

/* under 1024px: one column, and the left column becomes a fixed top bar */
@media (max-width: 1023px) {
  .tribe-window {
    grid-template-areas: "lane";
    grid-template-columns: minmax(0, 1fr);
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .tribe-window__aside { display: none; }
  .tribe-window__lane {
    height: auto;
    overflow: visible;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

    :root { --tc-topbar-h: 56px; }

  .tribe-window__rail {
    --tc-white:   #ffffff;
    --tc-white-2: #f6f3ed;
    --tc-white-3: #eceef2;
    --tc-ink:     18 20 24;
    --tc-link:    #1e5fd0;
    display: flex;
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1001;
    flex-direction: row;
    align-items: center;
    gap: var(--tc-space-3);
    height: var(--tc-topbar-h);
    min-height: 0;
    padding: 0 var(--tc-space-4);
    overflow: visible;
    border: 0;
    border-bottom: 1px solid rgb(var(--tc-ink) / .07);
    border-radius: 0;
    background: var(--tc-white);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    color: rgb(var(--tc-ink));
  }
  .tribe-window__rail-nav { display: none; }

  /* switcher sizes to its content so the bell/profile cluster is not pushed to the edge */
  .tribe-ui .tribe-window__rail-top .currentTribe,
  .tribe-window__rail-top .currentTribe > .dropdown-toggle,
  .tribe-window__rail-top .tribe-selector { width: fit-content; max-width: 100%; }
  .tribe-window__rail-top { flex: 0 1 auto; }

  /* the icon cluster sits tighter on a phone */
  .tribe-window__rail-bottom .header-actions { gap: var(--tc-space-1); width: auto; }

  .tribe-window__rail-top {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    border-bottom: 0;
  }
  /* on the phone bar the icons stand free: no tray, no outline */
  .tribe-window__rail-bottom {
    flex: 0 0 auto;
    margin-top: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
  }
  /* mirrored from the rail: coins first, profile at the right edge */
  .tribe-window__rail-bottom .coins-display { order: 1; }
  .tribe-window__rail-bottom .header-divider { order: 2; }
  .tribe-window__rail-bottom .notifications-dropdown { order: 2; }
  .tribe-window__rail-bottom .messages-dropdown { order: 3; }
  .tribe-window__rail-bottom .profile-menu { order: 4; margin-left: auto; }

  /* One row of equally sized controls. tribalry.css still ships a mobile
     .coins-display with margin-top:10px, which the .tribe-ui rule never
     overrode — that is what sat the pill 5px below the icons. */
  .tribe-window__rail-bottom .coins-display,
  .tribe-window__rail-bottom .bell-toggle,
  .tribe-window__rail-bottom .profile-menu-toggle {
    height: 32px;
    margin: 0;
  }
  /* the coin reads as icon + number here, like its neighbours */
  .tribe-ui .tribe-window__rail-bottom .coins-display {
    padding: 0 var(--tc-space-2);
    border: 0;
    background: none;
  }
  .tribe-window__rail-bottom .bell-toggle { width: 32px; padding: 0; }
  .tribe-window__rail-bottom .bell-toggle svg { width: 20px; height: 20px; }
  .tribe-window__rail-bottom .profile-menu-toggle { width: 32px; }

  /* THE OPEN STATE. These toggles are <span>s, so they have no box of their own
     until one is given: the highlight was painting against the inline content
     rather than the 32px square, which is why it sat off-centre from the glyph.
     Same square, same radius, for all three - so whichever panel is open, the
     marker lines up with the control that opened it. */
  .tribe-window__rail-bottom .bell-toggle,
  .tribe-window__rail-bottom .profile-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-radius: var(--tc-radius-pill);
  }
  /* Same glyph weight as the bottom nav (.tc-bn-icon i) so the two bars match. */
  .tribe-window__rail-bottom .bell-toggle i.header-icon {
    font-weight: 600;
    -webkit-text-stroke: .3px currentColor;
  }
  /* Open state: the canonical .dropdown-toggle rule in this sheet. */
}

/* =============================================================================
                                      NAV
   =============================================================================
   The vertical nav in the left column. Used by both the tribe rail and the
   admin rail.
     .tribe-nav               the list
     .tribe-nav-item          a row (+ --sub for a child row, .is-active)
     .tribe-nav-label         the row's text
     .tribe-nav-group         a section heading
     .tribe-nav-has-children  a row that expands; open with li.expanded
     .tribe-nav-chevron       its disclosure arrow
     .tribe-nav-sub           its child list */
.tribe-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tribe-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--tc-space-4);
  width: 100%;
  height: 44px;
  padding: 0 var(--tc-space-4);
  border: 0;
  border-radius: 5px;
  background: none;
  color: rgb(var(--tc-ink));
  font-family: inherit;
  font-size: var(--tc-text-base);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--tc-ease);
}

/* Every interaction state pins the colour, because two sheets below recolour
   a bare <a>: main.css has a:hover { color: #e9a66c }
and bootstrap has
   a:focus, a:hover { color: #23527c }
. Clicking focuses the link, so :focus
   and :active have to be listed too or the row flashes blue on the way out. */
.tribe-nav-item:hover,
.tribe-nav-item:focus,
.tribe-nav-item:focus-visible,
.tribe-nav-item:active {
  color: rgb(var(--tc-ink));
  text-decoration: none;
}
.tribe-nav-item:hover { background: rgb(var(--tc-ink) / .04); }

.tribe-nav-item:hover i,
.tribe-nav-item:hover .tribe-nav-label,
.tribe-nav-item:focus i,
.tribe-nav-item:focus .tribe-nav-label,
.tribe-nav-item:active i,
.tribe-nav-item:active .tribe-nav-label { color: rgb(var(--tc-ink)); }

/* Nav icons sit BACK from their labels in dark mode. On the dark rail the ink
   token resolves to near-white, so icon and label carried identical weight and
   the column read as a solid block of white. The label leads; the icon is
   support. Dark only - on the light rail the same drop washes them out.
   The active row is excluded: it is filled with the brand colour and its icon
   is pinned to #fff below. */
:root[data-theme="dark"] .tribe-nav-item:not(.is-active) i,
:root[data-theme="dark"] .tribe-nav-item:not(.is-active) svg {
  color: rgb(var(--tc-ink) / .62);
}
:root[data-theme="dark"] .tribe-nav-item:not(.is-active):hover i,
:root[data-theme="dark"] .tribe-nav-item:not(.is-active):hover svg {
  color: rgb(var(--tc-ink) / .85);
}

.tribe-nav-label { color: rgb(var(--tc-ink)); }

/* A count is pinned to the row's top-right, out of flow: in flow it steals
   width from the label and shifts it. */
.tribe-nav-item .tribe-badge,
.tribe-shell-navbadge,
.tribe-tab-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 1;
}

/* the active row: the tribe's colour, text in whichever ink reads on it */
.tribe-nav-item.is-active,
.tribe-nav-item.is-active:hover,
.tribe-nav-item.is-active:focus,
.tribe-nav-item.is-active:active {
  background: var(--tc-brand-fill);
  color: var(--tc-text-on-brand);
  font-weight: 600;
}
.tribe-nav-item.is-active i,
.tribe-nav-item.is-active svg,
.tribe-nav-item.is-active .tribe-nav-label { color: var(--tc-text-on-brand); }

/* the marker at the left edge of the active row, in the on-brand ink */
.tribe-nav-item.is-active::before {
  content: "";
  position: absolute;
  left: 0px;
  top: 50%;
  width: 3px;
  height: 18px;
  transform: translateY(-50%);
  border-radius: var(--tc-radius-pill);
  background: var(--tc-text-on-brand);
}

.tribe-nav-item i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  flex: 0 0 20px;
  font-size: calc(var(--tc-text-md) - 2px);
  font-weight: 600;
  line-height: 1;
  text-align: center;
  /* the same ink as the label beside it, not a dimmed inherit */
  color: rgb(var(--tc-ink));
  /* UIcons ships thin-rounded only, so weight alone cannot thicken a glyph —
     a hairline stroke is what actually reads heavier. */
  -webkit-text-stroke: .3px currentColor;
}

.tribe-nav-label {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--tc-font-display);
  font-weight: 400;
  /* the line box hugs the glyphs; inheriting 1.45 left a 20.3px box around
     14px text and Rubik sits high in it, so the row read bottom-heavy */
  line-height: 1;
}

/* a child row: shorter, and inset past the connector line so its hover and
   active fill start right of it; the label lines up with the parent's label */
.tribe-nav-item--sub {
  width: auto;
  height: 38px;
  margin-left: calc(var(--tc-space-4) + 20px);
  padding-left: var(--tc-space-4);
  font-size: var(--tc-text-sm);
  font-weight: 400;
  color: rgb(var(--tc-ink) / .72);
}
.tribe-nav-item--sub.is-active { font-weight: 500; }
.tribe-nav-item--sub.is-active::before { display: none; }

.tribe-nav-group {
  margin: var(--tc-space-6) 0 var(--tc-space-1);
  padding: 0 var(--tc-space-4);
  list-style: none;
  font-size: var(--tc-text-xs);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgb(var(--tc-ink) / .55);
  pointer-events: none;
}
.tribe-nav-group:first-child { margin-top: 0; }

/* the disclosure arrow. Rotates when the parent is open. */
.tribe-nav-item .tribe-nav-chevron {
  flex: 0 0 auto;
  width: auto;
  margin-left: auto;
  font-size: calc(var(--tc-text-sm) / 2);
  color: rgb(var(--tc-ink) / .55);
  transition: transform var(--tc-ease);
}
.tribe-nav > li.expanded > .tribe-nav-item .tribe-nav-chevron { transform: rotate(90deg); }

.tribe-nav-sub {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 0;
  overflow: hidden;
  transition: max-height .2s ease;
}
.tribe-nav > li.expanded > .tribe-nav-sub { max-height: 600px; }

/* the vertical line linking a parent row to its children */
.tribe-nav-sub::before {
  content: "";
  position: absolute;
  left: calc(var(--tc-space-4) + 10px);
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: rgb(var(--tc-ink) / .12);
}

/* a row for an event happening now */
.tribe-nav-item.is-live i { color: #16a34a; }
.tribe-nav-item.is-live.is-active i,
.tribe-nav-item.is-live.is-active .tribe-nav-label { color: #fff; }

/* the unread badge on an active row */
.tribe-nav-item.is-active .tribe-shell-navbadge {
  background: #fff;
  color: var(--tc-brand);
}

/* =============================================================================
                                      PAGE
   =============================================================================
   Every page inside the middle column is the same three parts.
     .tribe-page          the wrapper. No padding, no margin.
     .tribe-page-header   the title bar. Sticks to the top of the column.
     .tribe-page-body     the content. This is what pads the page. */
.tribe-page { margin: 0; padding: 0; background: none; }

.tribe-page-header {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: var(--tc-space-4);
  box-sizing: border-box;
  min-height: var(--tc-head-h);
  margin: 0;
  padding: var(--tc-space-3) var(--tc-space-6);
  border: 0;
  border-bottom: 1px solid rgb(var(--tc-ink) / .12);
  border-radius: calc(var(--tc-radius-panel) - 1px) calc(var(--tc-radius-panel) - 1px) 0 0;
  background-color: var(--tc-white);
  -webkit-backdrop-filter: blur(60px) saturate(150%);
  backdrop-filter: blur(60px) saturate(150%);
}

/* strips the browser's heading margins inside the bar */
.tribe-page-header > :where(h1, h2, h3, h4) { margin-block: 0; }

/* HEADER COLOUR (Tribes.HeaderStyle). 'transparent' is a near-solid band of the
   lane's own surface (#ffffffed in light) with the frost kept, so the content
   scrolling under it no longer bleeds through. */
:root[data-header="transparent"] .tribe-page-header { background-color: color-mix(in srgb, var(--tc-white) 93%, transparent); }

/* A plain title + subtitle on the lane, for pages whose real controls live
   somewhere else. The post editors used .tribe-page-header--static here, which
   put a SECOND white band directly under the editbar — two headers stacked, one
   of which held no controls at all. */
.tribe-page-intro {
  padding: var(--tc-space-6) var(--tc-space-6) 0;
  background: none;
  border: 0;
}
.tribe-page-intro__title {
  margin: 0;
  font-family: var(--tc-font-display);
  font-size: var(--tc-text-lg);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: rgb(var(--tc-ink));
}
.tribe-page-intro .tribe-section-help { margin-top: var(--tc-space-1); }
/* inside a page body that already pads (the legacy post editors) */
.tribe-page-intro--flush { padding: 0; margin-bottom: var(--tc-space-5); }
/* the legacy editors' bottom submit buttons: the top bar clicks them in code */
.tribe-editor-legacyfoot { display: none; }

/* THE EDIT BAR — the sticky action row on a post editor. Its icon-only
   controls are the same 32px square as the feed controls on a phone. */
.tribe-editbar .tribe-back-link { margin: 0; }

/* leading glyph in the publish / save button */
.tribe-editbar__btnicon { width: 15px; height: 15px; margin-right: var(--tc-space-2); flex: 0 0 auto; }
/* trailing variant — the gap belongs on the left, and tighter */
.tribe-editbar__btnicon--end { margin-right: 0; margin-left: 4px; }

/* destructive, kept off the commit button by a divider */
.tribe-editbar__del {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--tc-btn-h);
  height: var(--tc-btn-h);
  padding: 0;
  border: 1px solid rgb(var(--tc-ink) / .12);
  border-radius: var(--tc-radius-control);
  background: var(--tc-white);
  color: var(--tc-danger);
  cursor: pointer;
}
.tribe-editbar__del:hover { background: var(--tc-danger-soft); border-color: var(--tc-danger); }
.tribe-editbar__del svg { width: 17px; height: 17px; }

.tribe-editbar__sep { width: 1px; align-self: stretch; margin: 0 2px; background: rgb(var(--tc-ink) / .07); }

.tribe-editbar__status {
  margin-left: 0;
  padding: 3px 9px;
  border: 1px solid var(--tc-warning);
  border-radius: var(--tc-radius-control);
  background: var(--tc-warning-soft);
  color: rgb(var(--tc-ink));
  font-size: var(--tc-text-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

@media (max-width: 767px) {
  .tribe-editbar__backtext { display: none; }
  /* Actions stay on the RIGHT of the title row rather than taking a second row.
     `flex: 1 0 100%` forced a wrap, which pushed the buttons under the heading
     and left a dead band across the top of every phone page. The title absorbs
     the squeeze instead (min-width:0 + ellipsis below). */
  .tribe-page-header__actions { flex: 0 1 auto; justify-content: flex-end; gap: 5px; flex-wrap: nowrap; }
  .tribe-editbar__status { flex: 0 0 auto; }
  .tribe-editbar .tribe-back-link { padding: 0 var(--tc-space-3); flex: 0 0 auto; }
  .tribe-editbar .tribe-btn { padding: 0 var(--tc-space-4); flex: 0 0 auto; }
  /* icon-only controls are square at the shared control height */
  .tribe-editbar__del,
  .tribe-editbar #saveDraftBtn { width: var(--tc-btn-h); padding: 0; }
  .tribe-editbar__del svg,
  .tribe-editbar #saveDraftBtn .tribe-editbar__btnicon { width: 15px; height: 15px; margin: 0; }
  /* only "Save as draft" collapses to a glyph; Preview & Publish keeps its words */
  .tribe-editbar #saveDraftBtn .tribe-editbar__btntext { display: none; }
  .tribe-editbar__btnicon { width: 13px; height: 13px; margin-right: 4px; }
}

/* the heading, so a count pill can sit beside it on one line */
.tribe-page-header__title {
  display: inline-flex;
  align-items: center;
  gap: var(--tc-space-2);
  min-width: 0;
  margin: 0;
  font-family: var(--tc-font-display);
  font-size: var(--tc-text-lg);
  font-weight: 600;
  letter-spacing: -.5px;
  line-height: 1.4;
  color: rgb(var(--tc-ink));
}

/* The button slot on the right of the bar. ONE declaration: there used to be a
   second, earlier block whose display/gap this one overrode but whose
   `flex-wrap: wrap` leaked through, so the live rule was a silent merge of two
   blocks nobody wrote together — and the mobile override below then fought that
   leak. flex-wrap is declared here explicitly so the value is visible. */
.tribe-page-header__actions {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: var(--tc-space-2);
  margin-left: auto;
}

.tribe-page-body { padding: var(--tc-space-6); }/* on a phone the buttons drop under the title */
@media (max-width: 767px) {
  /* only the top bar stays put on a phone, and the header sits on the lane
     rather than on a white band of its own */
  /* transparent AND unblurred: with no surface of its own there is nothing to
     blur, and saturate(150%) over the cream lane was washing it toward white —
     which is what made the header read as a separate panel. */
  .tribe-page-header {
    position: static;
    /* nowrap: the actions are pinned to the right of this row now, so allowing a
       wrap is what let them fall underneath in the first place */
    flex-wrap: nowrap;
    background-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  /* the heading yields first - without min-width:0 a flex item refuses to
     shrink below its text and pushes the buttons off the row instead */
  .tribe-page-header__title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }/* space-6, the same as desktop. The phone had its own space-4 and nothing
     else on the page stepped down with it, so the content sat 6px tighter to
     the edge than every other inset on the same screen. */
  .tribe-page-body { padding: var(--tc-space-6); }
}

/* =============================================================================
                                      CARD
   =============================================================================
   One card everywhere. Same three parts as the page.
     .tribe-card          the box. Border and fill only, no padding.
     .tribe-card-header   the title band, ruled off from the body.
     .tribe-card-body     the content. This is what pads the card.
     .tribe-card-foot     trailing actions, right aligned. */
.tribe-card {
  margin: 0 0 var(--tc-space-4);
  border: 1px solid rgb(var(--tc-ink) / .12);
  border-radius: var(--tc-radius-tile);
  background: var(--tc-white);
  box-shadow: none;
}

.tribe-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tc-space-3);
  margin: 0;
  padding: var(--tc-space-4) var(--tc-space-6);
  border-bottom: 1px solid rgb(var(--tc-ink) / .07);
}

.tribe-card-body { padding: var(--tc-space-6); }

/* The doubling, fixed where it actually is. .tribe-card carries NO padding of
   its own (see the component note above: "border and fill only"), so the body's
   side padding is the only thing holding content off the border - dropping it
   would push every card's contents flush to the edge.
   What WAS doubled is vertical: the header already pads 12px below its text and
   draws a rule, and then the body added another 18px under it. A body that
   follows a header starts closer. */
.tribe-card-header + .tribe-card-body { padding-top: var(--tc-space-4); }

/* the text column of a header row, beside whatever action sits opposite it */
.tribe-headtext { flex: 1 1 auto; min-width: 0; }

.tribe-card-foot {
  padding: 0 var(--tc-space-6) var(--tc-space-6);
  text-align: right;
}

/* a panel inset into a body, so its contents read as one object */
.tribe-inset {
  padding: var(--tc-space-3);
  border: 1px solid rgb(var(--tc-ink) / .07);
  border-radius: var(--tc-radius-tile);
  background: var(--tc-white-2);
}
.tribe-inset--row { display: flex; align-items: center; gap: var(--tc-space-5); }

/* a small square image in a row or cell */
.tribe-thumb {
  width: 40px;
  height: 40px;
  border: 1px solid rgb(var(--tc-ink) / .07);
  border-radius: var(--tc-radius-control);
  background-color: var(--tc-white-2);
  background-size: cover;
  background-position: center;
}

/* a thumbnail that is the control for changing its own image. Always a
   <button>. The size carries !important because ImageUpload writes an inline
   height onto its target after every upload. */
.tribe-thumb-btn {
  position: relative;
  box-sizing: border-box;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 92px !important;
  height: 66px !important;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgb(var(--tc-ink) / .07);
  border-radius: var(--tc-radius-control);
  background: var(--tc-white);
  cursor: pointer;
}
.tribe-thumb-btn:hover { border-color: rgb(var(--tc-ink) / .55); }
.tribe-thumb-btn:focus-visible { outline: none; box-shadow: var(--tc-focus); }

.tribe-thumb-btn img[hidden] { display: none; }

/* the camera badge; with no image it centres and grows, being the whole cue */
.tribe-thumb-btn__cam {
  position: absolute;
  right: var(--tc-space-1);
  bottom: var(--tc-space-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--tc-radius-control);
  background: rgba(16, 18, 24, .62);
  color: #fff;
}
.tribe-thumb-btn__cam svg { width: 12px; height: 12px; }
.tribe-thumb-btn[data-empty] .tribe-thumb-btn__cam {
  position: static;
  width: 26px;
  height: 26px;
  background: none;
  color: rgb(var(--tc-ink) / .55);
}
.tribe-thumb-btn[data-empty] .tribe-thumb-btn__cam svg { width: 17px; height: 17px; }

/* a card that collapses. The <summary> IS its header, so the box, the padding
   and the rule under it all come from the card. */
.tribe-addons__summary { list-style: none; cursor: pointer; }
.tribe-addons__summary::-webkit-details-marker { display: none; }
.tribe-addons:not([open]) > .tribe-addons__summary { border-bottom: 0; }
.tribe-addons__summary > span:first-child {
  font-family: var(--tc-font-display);
  font-size: var(--tc-text-base);
  font-weight: 600;
  color: rgb(var(--tc-ink));
}
.tribe-addons__sub { font-weight: 400; color: rgb(var(--tc-ink) / .72); }
.tribe-addons__chev { color: rgb(var(--tc-ink) / .55); transition: transform var(--tc-ease); }
.tribe-addons[open] > .tribe-addons__summary .tribe-addons__chev { transform: rotate(180deg); }

/* for a card whose rows carry their own padding */
.tribe-card--flush > .tribe-card-body { padding: var(--tc-space-2); }

/* card padding is the same at every width: body space-6, header space-6 across */

.tribe-section-title {
  margin: 0;
  font-size: var(--tc-text-base);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.5px;
  color: rgb(var(--tc-ink));
}

.tribe-section-help {
  margin: var(--tc-space-1) 0 0;
  font-size: var(--tc-text-xs);
  color: rgb(var(--tc-ink) / .72);
}

/* a card for a destructive section */
.tribe-card--danger { border-color: var(--tc-danger-soft); }
.tribe-card--danger .tribe-card-header { border-bottom-color: var(--tc-danger-soft); }
.tribe-card--danger .tribe-section-title { color: var(--tc-danger); }

/* a card body that leads with an icon beside its text */
.tribe-card--note .tribe-card-body { display: flex; align-items: flex-start; gap: var(--tc-space-3); }
.tribe-card--note .tribe-section-help { margin-top: 0; }
.tribe-card--note i { flex: 0 0 auto; margin-top: 3px; color: rgb(var(--tc-ink) / .55); font-size: var(--tc-text-sm); }

/* the guidance line under a field */
.tribe-hint {
  display: block;
  margin-top: var(--tc-space-1);
  font-size: var(--tc-text-sm);
  color: rgb(var(--tc-ink) / .72);
}
.tribe-hint--danger { color: var(--tc-danger); }

/* =============================================================================
                                      GRID
   =============================================================================
   A grid of tiles inside a page body. Two columns, one on tablet and phone. */
.tribe-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--tc-space-3);
  /* backfills cells so the first tile always lands top-left */
  grid-auto-flow: row dense;
  margin: 0;
  padding: var(--tc-space-6);
}

/* the gap is the spacing — a card's own bottom margin would stack on top of it */

/* templates emit <script> as direct children; a rendered child would take a cell */
.tribe-grid > script { display: none; }

/* tiles keep Bootstrap col-* classes for non-grid surfaces; the cell sets width here */
.tribe-grid > [class*="col-"] {
  width: auto;
  max-width: none;
  float: none;
  padding-left: 0;
  padding-right: 0;
}

@media (max-width: 991px) {
  .tribe-grid { grid-template-columns: minmax(0, 1fr); }
}
/* Every row the same height, so a card whose title wraps to two lines does not
   make its whole row taller than the one under it. The auction and deal grids
   already do this; .tribe-grid is the third and was the one still stepping. */
.tribe-grid { grid-auto-rows: 1fr; }

@media (max-width: 767px) {
  .tribe-grid { padding: var(--tc-space-4); }
}

/* =============================================================================
                                    BUTTONS
   =============================================================================
   One button. .tribe-btn on its own is the neutral, medium button.
     colour  --primary --outline --ghost --success --danger
     size    --sm --lg
     shape   --icon (square) --block (full width)
     state   .is-active .is-disabled :disabled */
.tribe-btn {
  /* relative so a count badge can sit on the corner */
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tc-space-1);
  /* NOT the input height — inputs are a separate hardcoded 38px further down.
     A bar mixing a button and an input is 5px out of register by design. */
  height: var(--tc-btn-h);
  margin: 0;
  padding: 0 var(--tc-btn-px);
  border: 1px solid rgb(var(--tc-ink) / .12);
  border-radius: var(--tc-radius-btn);
  background-color: rgb(var(--tc-ink) / .06);
  color: rgb(var(--tc-ink) / .72);
  box-shadow: none;
  font-family: var(--tc-font-display);
  font-size: var(--tc-text-sm);
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  transition: background-color var(--tc-ease),
              border-color var(--tc-ease),
              color var(--tc-ease),
              transform 90ms ease;
}

.tribe-btn:hover,
.tribe-btn:focus-visible {
  background-color: rgb(var(--tc-ink) / .12);
  color: rgb(var(--tc-ink));
}

.tribe-btn:focus-visible { outline: none; box-shadow: var(--tc-focus); }

/* an icon has no intrinsic size; without this an inline SVG fills the button */
/* .tribe-btn sets display, which outranks the UA [hidden] rule — without this
   a button hidden from JS stays on screen. The overlay has the same guard. */
.tribe-btn[hidden] { display: none; }
.tribe-btn svg { width: 16px; height: 16px; flex: 0 0 auto; }
.tribe-btn img { width: auto; height: 18px; flex: 0 0 auto; }

/* colour */
.tribe-btn--primary { background-color: var(--tc-brand-fill); color: var(--tc-text-on-brand); }
.tribe-btn--primary:hover,
.tribe-btn--primary:focus-visible { background-color: color-mix(in srgb, var(--tc-brand-fill) 86%, #000); color: var(--tc-text-on-brand); }

.tribe-btn--outline {
  border-color: rgb(var(--tc-ink) / .2);
  background-color: transparent;
  color: rgb(var(--tc-ink));
}
.tribe-btn--outline:hover,
.tribe-btn--outline:focus-visible { background-color: rgb(var(--tc-ink) / .04); }

.tribe-btn--ghost { background-color: transparent; }
.tribe-btn--ghost:hover,
.tribe-btn--ghost:focus-visible { background-color: rgb(var(--tc-ink) / .06); }

.tribe-btn--success { background-color: var(--tc-success); color: #fff; }
.tribe-btn--success:hover,
.tribe-btn--success:focus-visible {
  background-color: color-mix(in srgb, var(--tc-success) 88%, #000);
  color: #fff;
}

.tribe-btn--danger { background-color: var(--tc-danger-soft); color: var(--tc-danger); }
.tribe-btn--danger:hover,
.tribe-btn--danger:focus-visible {
  background-color: color-mix(in srgb, var(--tc-danger) 18%, transparent);
  color: var(--tc-danger);
}

/* a row of them */
.tribe-btn-row { display: flex; flex-wrap: wrap; gap: var(--tc-space-1); }

/* size */
.tribe-btn--sm { height: var(--tc-btn-h-sm); padding: 0 var(--tc-space-4); }
.tribe-btn--sm svg { width: 16px; height: 16px; }
.tribe-btn--lg { height: var(--tc-btn-h-lg); padding: 0 var(--tc-space-7); font-size: var(--tc-text-base); }
.tribe-btn--lg svg { width: 20px; height: 20px; }
/* opt-in: a full thumb target on a phone; the global button size stays */
@media (max-width: 767px) {
  .tribe-btn--tap { height: auto; min-height: var(--tc-tap); }
}

/* shape */
.tribe-btn--icon { width: var(--tc-btn-h); padding: 0; flex: 0 0 auto; }
.tribe-btn--icon.tribe-btn--sm { width: var(--tc-btn-h-sm); }
.tribe-btn--icon.tribe-btn--lg { width: var(--tc-btn-h-lg); }
.tribe-btn--block { width: 100%; }

/* state */
.tribe-btn.is-active,
.tribe-btn.is-active:hover {
  background-color: rgb(var(--tc-ink));
  color: var(--tc-white);
}

/* :disabled for a real button, .is-disabled for a link that looks off */
.tribe-btn:disabled,
.tribe-btn.is-disabled { opacity: .55; cursor: not-allowed; }

/* the admin rail's drawer toggle. Only shown where the rail is a drawer. */
.tribe-admin-nav-toggle,
.tribe-admin-nav-backdrop { display: none; }
/* the rail becomes the top bar here, so the admin nav opens as a drawer under it */
@media (max-width: 1023px) {
  .tribe-admin-nav-toggle { display: inline-flex; flex: 0 0 auto; }

  /* the page header pins under the fixed 56px top bar */
  .tribe-page-header--admin { top: var(--tc-topbar-h); }

  .tribe-window__rail--admin .tribe-window__rail-nav {
    display: block;
    position: fixed;
    top: var(--tc-topbar-h);
    left: 0;
    bottom: 0;
    z-index: 1002;
    width: min(320px, 86vw);
    padding: var(--tc-space-4) var(--tc-space-3);
    overflow-y: auto;
    border-right: 1px solid rgb(var(--tc-ink) / .12);
    background: var(--tc-white);
    transform: translateX(-100%);
    transition: transform var(--tc-ease);
  }
  body.tc-admin-drawer-open .tribe-window__rail--admin .tribe-window__rail-nav { transform: none; }
  /* phones show the bottom nav (hidden 768-1023): stop above it so the last item can be reached */
  @media (max-width: 767px) {
    .tribe-window__rail--admin .tribe-window__rail-nav { bottom: calc(var(--tc-bn-h) + env(safe-area-inset-bottom, 0px)); }
  }

  .tribe-admin-nav-backdrop {
    position: fixed;
    inset: var(--tc-topbar-h) 0 0 0;
    /* under the top bar (1001), which holds the drawer, over the page */
    z-index: 1000;
    /* black, not ink: inside the rail the dark theme's ink is light */
    background: rgb(0 0 0 / .45);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--tc-ease);
  }
  body.tc-admin-drawer-open .tribe-admin-nav-backdrop { display: block; opacity: 1; pointer-events: auto; }
  .tribe-ui body.tc-admin-drawer-open { overflow: hidden; }
}


/* MESSAGES APP SHELL — on a phone /messages is a fixed pane: the page stops
   scrolling and the bottom nav hides in a thread. Page rules: bodyMessages.tpl. */
@media (max-width: 767px) {
  html.messages,
  html.messages body { overflow: hidden; }
  html.messages body:has(.tc-bottom-nav) { padding-bottom: 0; }
  html.messages #contentBody { margin-top: 0; }
  html.messages body:has(#tcMessages.thread-open) .tc-bottom-nav { display: none; }
}

/* NO STICKY HOVER ON TOUCH.
   main.css recolours every bare <a> on :hover to #e9a66c. On a touch screen
   :hover latches after a tap and stays until you tap elsewhere, so tapping any
   link left it orange. Pointer-coarse devices get no hover recolour at all —
   they have no hover to express. */
@media (hover: none) {
  .tribe-base a:hover,
  .tribe-ui a:hover { color: inherit; }
  .tribe-base .tribe-link:hover,
  .tribe-ui .tribe-link:hover { color: var(--tc-link); }
}

/* Phone controls sit a touch tighter than desktop, but deliberately do NOT take
   the desktop -5px: they are already near the floor for a thumb. */
@media (max-width: 767px) {
  :root { --tc-btn-h: 32px; --tc-btn-h-sm: 28px; --tc-btn-h-lg: 38px; --tc-btn-px: 10px; }
}

/* =============================================================================
                                     FORMS
   =============================================================================
     .tribe-field         one field. Spacing between fields.
     .tribe-field-row     two fields side by side.
     .tribe-label         the field's label.
     .tribe-check-row     a labelled switch row.
     .tribe-toggle-input  the checkbox behind a switch.
     .tribe-switch        the switch itself.
     .tribe-seg           a radio group that reads as one control.
     .tribe-setting-row   label left, control right.
   Text inputs, selects and textareas need no class: inside .tribe-base the
   element is the selector. */
.tribe-field { margin: 0 0 var(--tc-space-6); padding: 0; }
.tribe-field:last-child { margin-bottom: 0; }
/* the message under a field that failed; takes no room while empty */
.tribe-field__error { margin-top: var(--tc-space-1); font-size: var(--tc-text-xs); color: var(--tc-danger); }
.tribe-field__error:empty { display: none; }

/* a rule between blocks of content */
.tribe-divider {
  height: 0;
  margin: var(--tc-space-6) 0;
  border: 0;
  border-top: 1px solid rgb(var(--tc-ink) / .07);
}

/* consecutive sections of a form, divided by a rule */
.tribe-formsec + .tribe-formsec {
  margin-top: var(--tc-space-6);
  padding-top: var(--tc-space-5);
  border-top: 1px solid rgb(var(--tc-ink) / .07);
}

.tribe-field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--tc-space-4);
}
/* The GAP owns the spacing inside a row; the fields must not also bring their
   own 18px bottom margin. Side by side that margin is invisible, but the row
   collapses to one column at 600px and the two then stacked with gap + margin
   together - 30px between a first and last name, while neighbouring rows sat at
   12px. That uneven rhythm is what read as broken on the account page. */
.tribe-field-row > .tribe-field { margin-bottom: 0; }

.tribe-label {
  display: block;
  margin-bottom: var(--tc-space-1);
  font-size: var(--tc-text-xs);
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: rgb(var(--tc-ink) / .50);
}
/* a hint inside the label reads as prose, not as more label */
.tribe-label span { font-weight: 500; letter-spacing: 0; text-transform: none; }

/* :where() keeps this at zero specificity, so any component overrides it */
.tribe-base :where(input:not([type="checkbox"], [type="radio"], [type="file"],
  [type="submit"], [type="button"], [type="image"], [type="range"], [type="hidden"]),
  select, textarea) {
  width: 100%;
  height: 38px;
  padding: 0 var(--tc-space-4);
  border: 1px solid rgb(var(--tc-ink) / .12);
  /* --tc-radius-btn, like .tribe-btn: an input and a button sit in the same bar
     and must agree. A thumbnail or a panel does not, which is why they keep
     --tc-radius-control. */
  border-radius: var(--tc-radius-btn);
  background: var(--tc-white);
  color: rgb(var(--tc-ink));
  font: inherit;
  font-size: var(--tc-text-sm);
  outline: 0;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--tc-ease), box-shadow var(--tc-ease);
}

.tribe-base :where(input, select, textarea):focus {
  border-color: var(--tc-brand);
  box-shadow: var(--tc-focus);
}
.tribe-base :where(input, select, textarea):disabled {
  background: rgb(var(--tc-ink) / .04);
  color: rgb(var(--tc-ink) / .55);
  cursor: not-allowed;
}
.tribe-base :where(input, textarea)::placeholder { color: rgb(var(--tc-ink) / .55); }

/* a textarea is not 38px tall and does not centre its text */
.tribe-base :where(textarea) {
  height: auto;
  min-height: 96px;
  padding: var(--tc-space-3) var(--tc-space-4);
  line-height: 1.5;
  resize: vertical;
}

/* the select's caret, drawn with two gradients */
.tribe-base :where(select) {
  padding-right: var(--tc-space-8);
  background-image: linear-gradient(45deg, transparent 50%, rgb(var(--tc-ink) / .55) 50%),
                    linear-gradient(135deg, rgb(var(--tc-ink) / .55) 50%, transparent 50%);
  background-position: calc(100% - 17px) center, calc(100% - 12px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* the date picker's own icon is dark-on-dark without this */
[data-theme="dark"] .tribe-base :where(input)::-webkit-calendar-picker-indicator { filter: invert(1); }

/* a row of pickable colour swatches, for a theme setting */
.tribe-swatches { display: flex; flex-wrap: wrap; gap: var(--tc-space-3); }

.tribe-swatch {
  display: inline-flex;
  align-items: center;
  gap: var(--tc-space-2);
  margin: 0;
  padding: var(--tc-space-2) var(--tc-space-3);
  border: 1px solid rgb(var(--tc-ink) / .12);
  border-radius: var(--tc-radius-control);
  font-weight: 400;
  cursor: pointer;
}
.tribe-swatch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.tribe-swatch__chip {
  width: 18px;
  height: 18px;
  border: 1px solid rgb(var(--tc-ink) / .12);
  border-radius: var(--tc-radius-pill);
  /* the swatch shows its own hue: the same tint the sheen would use */
  background: rgb(var(--tc-frost));
}
.tribe-swatch__label { font-size: var(--tc-text-sm); color: rgb(var(--tc-ink) / .72); }
/* "none" has no tint to show, so its chip reads as empty */
.tribe-swatch[data-frost="none"] .tribe-swatch__chip {
  background: repeating-linear-gradient(45deg,
    rgb(var(--tc-ink) / .10) 0 3px, transparent 3px 6px);
}
.tribe-swatch:has(input:checked) { border-color: var(--tc-brand); background: var(--tc-brand-soft); }
.tribe-swatch:has(input:checked) .tribe-swatch__label { color: rgb(var(--tc-ink)); font-weight: 600; }
.tribe-swatch:has(input:focus-visible) { box-shadow: var(--tc-focus); }

/* BACKGROUND PICKER — the shipped site-background photos plus a "+" to upload.
   Tiles are photos, so the label sits ON the image and needs its own scrim to
   stay legible against a light one (white-abstract) and a dark one (misty
   forest) alike. */
.tribe-bgpicker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
  gap: var(--tc-space-3);
  margin-top: var(--tc-space-3);
}

.tribe-bgpicker__tile {
  position: relative;
  display: flex;
  align-items: flex-end;
  /* 16:9, matching the photos, so none of them is cropped oddly in the grid */
  aspect-ratio: 16 / 9;
  margin: 0;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: var(--tc-radius-control);
  background: var(--tc-white-3) center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgb(var(--tc-ink) / .12);
  transition: border-color .15s, box-shadow .15s;
}

/* the radio itself is never shown — the tile IS the control */
.tribe-bgpicker__tile input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.tribe-bgpicker__label {
  width: 100%;
  padding: var(--tc-space-4) var(--tc-space-2) var(--tc-space-1);
  font-size: var(--tc-text-xs);
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
  text-align: center;
  /* a gradient, not a flat bar: the tile keeps reading as a photo */
  background: linear-gradient(to top, rgba(0, 0, 0, .62), transparent);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

.tribe-bgpicker__tile:hover { box-shadow: inset 0 0 0 1px rgb(var(--tc-ink) / .3); }

/* .is-selected is set server-side on first paint AND by the picker script on
   click, so the state survives a page load with JS still parsing. :has() is not
   the only hook for that reason. */
.tribe-bgpicker__tile.is-selected,
.tribe-bgpicker__tile:has(input:checked) {
  border-color: var(--tc-brand);
  box-shadow: 0 0 0 1px var(--tc-brand);
}

.tribe-bgpicker__tile:has(input:focus-visible) { box-shadow: var(--tc-focus); }

/* the trailing "+" — a button, not a tile with a value */
.tribe-bgpicker__add {
  align-items: center;
  justify-content: center;
  border: 2px dashed rgb(var(--tc-ink) / .28);
  background: transparent;
  color: rgb(var(--tc-ink) / .55);
  box-shadow: none;
}

.tribe-bgpicker__add:hover {
  border-color: var(--tc-brand);
  color: var(--tc-brand);
  box-shadow: none;
}

.tribe-bgpicker__add svg { width: 26px; height: 26px; }

/* a colour swatch beside its state, for a theme setting */
.tribe-colorfield { display: flex; align-items: center; gap: var(--tc-space-4); flex-wrap: wrap; }
.tribe-colorfield input[type="color"] {
  width: 48px;
  height: 38px;
  padding: 2px 4px;
  border: 1px solid rgb(var(--tc-ink) / .12);
  border-radius: var(--tc-radius-control);
  background: none;
  cursor: pointer;
}
.tribe-colorfield__state { font-size: var(--tc-text-sm); color: rgb(var(--tc-ink) / .72); }
.tribe-colorfield__reset { font-size: var(--tc-text-sm); color: rgb(var(--tc-ink) / .72); text-decoration: underline; }

/* a switch row: label and description on the left, switch on the right */
.tribe-check-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--tc-space-4);
  margin: 0;
  padding: 0;
  font-weight: 400;
  cursor: pointer;
}
/* the space goes BETWEEN rows, so the first row sits flush with the section */
.tribe-check-row + .tribe-check-row {
  margin-top: var(--tc-space-4);
  padding-top: var(--tc-space-4);
  border-top: 1px solid rgb(var(--tc-ink) / .07);
}

/* a row that depends on the one above it, joined by an elbow that drops from
   the row above and turns into the sub row's label line, 6px short of the text */
.tribe-check-row--sub { margin-left: 28px; }
.tribe-check-row--sub::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--tc-space-4));
  left: -20px;
  width: 14px;
  height: calc(2 * var(--tc-space-4) + 9px);
  border-left: 1px solid rgb(var(--tc-ink) / .16);
  border-bottom: 1px solid rgb(var(--tc-ink) / .16);
  border-bottom-left-radius: 8px;
}
/* the elbow replaces the divider — a rule across it would cut the line */
.tribe-check-row + .tribe-check-row--sub { border-top: 0; }

/* clipped rather than hidden — a display:none checkbox does not submit */
.tribe-toggle-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.tribe-switch {
  position: relative;
  display: inline-block;
  order: 2;
  flex-shrink: 0;
  width: 34px;
  height: 20px;
  margin-top: 1px;
  margin-left: auto;
  border-radius: var(--tc-radius-pill);
  background: rgb(var(--tc-ink) / .2);
  cursor: pointer;
  transition: background-color var(--tc-ease);
}

/* the knob */
.tribe-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: var(--tc-radius-pill);
  background: var(--tc-white);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
  transition: transform var(--tc-ease);
}

.tribe-toggle-input:checked ~ .tribe-switch { background: var(--tc-brand); }
.tribe-toggle-input:checked ~ .tribe-switch::after { transform: translateX(14px); }
.tribe-toggle-input:focus-visible ~ .tribe-switch { box-shadow: var(--tc-focus); }

.tribe-check-text { flex: 1; min-width: 0; }
.tribe-check-label {
  font-size: var(--tc-text-sm);
  font-weight: 500;
  line-height: 1.3;
  color: rgb(var(--tc-ink));
}
.tribe-check-desc {
  max-width: 560px;
  margin-top: 3px;
  font-size: var(--tc-text-xs);
  line-height: 1.5;
  color: rgb(var(--tc-ink) / .72);
}
.tribe-check-desc a { color: var(--tc-link); }

/* a radio group that reads as one control */
.tribe-seg {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid rgb(var(--tc-ink) / .12);
  border-radius: var(--tc-radius-pill);
  background: rgb(var(--tc-ink) / .05);
}

.tribe-seg__option { position: relative; margin: 0; font-weight: 400; cursor: pointer; }

/* clipped, same submission hazard as the checkbox */
.tribe-seg__option input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.tribe-seg__option > span {
  display: inline-block;
  padding: 4px var(--tc-space-4);
  border-radius: var(--tc-radius-pill);
  font-size: var(--tc-text-xs);
  line-height: 1.4;
  color: rgb(var(--tc-ink) / .72);
  transition: background-color var(--tc-ease), color var(--tc-ease);
}

.tribe-seg__option input[type="radio"]:checked + span {
  background: var(--tc-white);
  color: rgb(var(--tc-ink));
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}
.tribe-seg__option input[type="radio"]:focus-visible + span { box-shadow: var(--tc-focus); }/* copy left, destructive button right */
.tribe-danger-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--tc-space-6);
}
.tribe-danger-row__text {
  flex: 1 1 260px;
  min-width: 0;
  margin: 0;
  font-size: var(--tc-text-sm);
  line-height: 1.6;
  color: rgb(var(--tc-ink) / .72);
}

/* label left, control right */
.tribe-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tc-space-6);
  padding: var(--tc-space-3) 0;
  border-bottom: 1px solid rgb(var(--tc-ink) / .07);
}
.tribe-setting-row:last-child { border-bottom: 0; }
.tribe-setting-label { font-size: var(--tc-text-base); color: rgb(var(--tc-ink)); }

@media (max-width: 767px) {
  .tribe-setting-row { flex-direction: column; align-items: stretch; gap: var(--tc-space-2); }
  .tribe-setting-row .tribe-seg { width: 100%; }
  .tribe-setting-row .tribe-seg__option { flex: 1; }
  .tribe-setting-row .tribe-seg__option > span { display: block; text-align: center; }
}
@media (max-width: 600px) {
  .tribe-field-row { grid-template-columns: minmax(0, 1fr); }
}

/* =============================================================================
                                    CHOICE
   =============================================================================
   A pickable card, for a form that asks "which one". Always a <button>.
     .tribe-choice-grid   lays them out; one card fills the row on its own
     .tribe-choice        the card (.is-picked, .is-done, .is-blocked)
     .tribe-choice__icon  its glyph
     .tribe-choice__name  its heading
     .tribe-choice__sub   its supporting line
     .tribe-choice__tick  the corner tick, shown when picked or done */
.tribe-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(172px, 1fr));
  gap: var(--tc-space-3);
}

.tribe-choice {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  width: 100%;
  margin: 0;
  padding: var(--tc-space-4);
  border: 1px solid transparent;
  border-radius: var(--tc-radius-tile);
  background: var(--tc-white-2);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--tc-ease), border-color var(--tc-ease);
}
.tribe-choice:hover:not(.is-blocked, .is-done) { background: var(--tc-white-3); }
.tribe-choice:focus-visible { outline: none; box-shadow: var(--tc-focus); }

.tribe-choice.is-picked {
  border-color: var(--tc-brand);
  background: var(--tc-brand-soft);
}
.tribe-choice.is-done {
  border-color: color-mix(in srgb, var(--tc-success) 40%, transparent);
  background: var(--tc-success-soft);
  cursor: default;
}
.tribe-choice.is-blocked { opacity: .55; cursor: not-allowed; }

.tribe-choice__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-bottom: var(--tc-space-1);
  border: 1px solid rgb(var(--tc-ink) / .07);
  border-radius: var(--tc-radius-control);
  background: var(--tc-white);
  color: rgb(var(--tc-ink) / .72);
}
.tribe-choice__icon svg { width: 15px; height: 15px; }
.tribe-choice.is-done .tribe-choice__icon {
  border-color: color-mix(in srgb, var(--tc-success) 40%, transparent);
  color: var(--tc-success-ink);
}

.tribe-choice__name {
  font-size: var(--tc-text-sm);
  font-weight: 600;
  line-height: 1.3;
  color: rgb(var(--tc-ink));
}
.tribe-choice__sub {
  font-size: var(--tc-text-xs);
  line-height: 1.4;
  color: rgb(var(--tc-ink) / .72);
}
.tribe-choice.is-done .tribe-choice__sub { color: var(--tc-success-ink); }

.tribe-choice__tick {
  position: absolute;
  top: var(--tc-space-2);
  right: var(--tc-space-2);
  display: none;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: var(--tc-radius-pill);
  background: var(--tc-brand-fill);
  color: var(--tc-text-on-brand);
}
.tribe-choice__tick svg { width: 11px; height: 11px; }
.tribe-choice.is-picked .tribe-choice__tick,
.tribe-choice.is-done .tribe-choice__tick { display: inline-flex; }
.tribe-choice.is-done .tribe-choice__tick { background: var(--tc-success-ink); color: #fff; }

/* =============================================================================
                                     CHIP
   =============================================================================
   A removable token, for what a picker has already selected.
     .tribe-chips     the row they wrap in
     .tribe-chip      one token
     .tribe-chip__x   its remove button */
.tribe-chips { display: flex; flex-wrap: wrap; gap: var(--tc-space-2); }
.tribe-chips:not(:empty) { margin-bottom: var(--tc-space-2); }

.tribe-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--tc-space-2);
  padding: var(--tc-space-1) var(--tc-space-1) var(--tc-space-1) var(--tc-space-3);
  border: 1px solid var(--tc-brand);
  border-radius: var(--tc-radius-pill);
  background: var(--tc-brand-soft);
  font-size: var(--tc-text-xs);
  color: rgb(var(--tc-ink));
}
.tribe-chip b { font-weight: 600; }
.tribe-chip i { font-style: normal; opacity: .6; }

.tribe-chip__x {
  padding: 0 2px;
  border: 0;
  background: none;
  color: inherit;
  font-family: inherit;
  font-size: var(--tc-text-base);
  line-height: 1;
  opacity: .65;
  cursor: pointer;
}
.tribe-chip__x:hover { opacity: 1; }
.tribe-chip__x:focus-visible { outline: none; box-shadow: var(--tc-focus); }

/* =============================================================================
                                     FEED
   =============================================================================
   A feed of cards. Sits on .tribe-page-body and cancels its padding, because
   the cards meet each other and the lane edges on their own hairline. */
.tribe-feed-stream {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
}

/* =============================================================================
                                     ALERT
   =============================================================================
   An inline message above content. .tribe-alert plus one colour. */
.tribe-alert {
  display: block;
  margin-bottom: var(--tc-space-6);
  padding: var(--tc-space-6) var(--tc-space-7);
  border: 1px solid transparent;
  border-radius: var(--tc-radius-tile);
  font-size: var(--tc-text-base);
  line-height: 1.5;
}

.tribe-alert--success {
  background: var(--tc-success-soft);
  border-color: color-mix(in srgb, var(--tc-success) 40%, transparent);
  color: var(--tc-success-ink);
}
.tribe-alert--danger {
  background: var(--tc-danger-soft);
  border-color: color-mix(in srgb, var(--tc-danger) 35%, transparent);
  color: var(--tc-danger);
}
.tribe-alert--warn {
  background: var(--tc-warning-soft);
  border-color: color-mix(in srgb, var(--tc-warning) 45%, transparent);
  color: var(--tc-warning-ink);
}
.tribe-alert--muted {
  background: var(--tc-white-2);
  border-color: rgb(var(--tc-ink) / .12);
  color: rgb(var(--tc-ink) / .72);
}

.tribe-alert[hidden] { display: none; }

/* =============================================================================
                                   SKELETON
   =============================================================================
   A shimmering placeholder shown while content loads. */
@keyframes tribe-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.tribe-skeleton {
  position: relative;
  overflow: hidden;
  border-radius: var(--tc-radius-control);
  background-color: var(--tc-white-2);
  background-image: linear-gradient(90deg,
    rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .65) 50%, rgba(255, 255, 255, 0) 100%);
  background-size: 400px 100%;
  background-repeat: no-repeat;
  animation: tribe-shimmer 1.3s ease-in-out infinite;
}

.tribe-skeleton-line  { height: 12px; margin: var(--tc-space-2) 0; }
.tribe-skeleton-block { height: 72px; margin: var(--tc-space-3) 0; }
.tribe-skeleton-line--w60 { width: 60%; }
.tribe-skeleton-line--w80 { width: 80%; }

/* =============================================================================
                                   TOP NAV
   ============================================================================= */
/* scrolls the tab table sideways on a narrow screen */
.tribe-topnav-scroll {
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--tc-radius-tile) var(--tc-radius-tile) 0 0;
}
.tribe-topnav-scroll::-webkit-scrollbar { display: none; }

/* =============================================================================
                                   UTILITIES
   ============================================================================= */
/* one entrance animation, used by the auth cards */
@keyframes tribe-slide-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tribe-hide { display: none; }
.tribe-nowrap { white-space: nowrap; }

/* a quoted excerpt, e.g. the reason someone gave when flagging */
.tribe-quote {
  margin-top: var(--tc-space-2);
  padding: var(--tc-space-2) var(--tc-space-3);
  border-left: 3px solid rgb(var(--tc-ink) / .12);
  border-radius: var(--tc-radius-control);
  background: var(--tc-white-2);
  color: rgb(var(--tc-ink) / .72);
  font-size: var(--tc-text-sm);
  white-space: pre-wrap;
}

.tribe-slide-up { animation: tribe-slide-up .3s ease-out both; }

.mt-8 { margin-top: var(--tc-space-8); }

/* =============================================================================
                                     MOTION
   =============================================================================
   One movement: the page fades in, header and content together. Nothing
   slides, nothing staggers - moving blocks read as jank. Opacity only, one
   curve (--tc-motion) for page, popups and menus alike. The persistent chrome
   never animates. A render that REPLACES what is already on screen (a Turbo
   preview being swapped for the real page, or back/forward) is marked
   body[data-tc-still] by tc-turbo-init.js and stays still - fading it would
   blink content the member was already looking at. No fill-mode: both, so a
   suppressed animation never leaves content hidden. */
:root { --tc-motion: cubic-bezier(.2, 0, 0, 1); }
@keyframes tribe-fade { from { opacity: 0; } }

@media (prefers-reduced-motion: no-preference) {
  html:not([data-turbo-preview]) body:not([data-tc-still]) .tribe-page-header,
  html:not([data-turbo-preview]) body:not([data-tc-still]) .tribe-page-body > :not(.tribe-overlay, .modal, .hide, script, style) {
    animation: tribe-fade 320ms var(--tc-motion) backwards;
  }
}

/* a button gives a little under the pointer */
.tribe-btn:active:not(:disabled) { transform: scale(.98); }

@media (prefers-reduced-motion: reduce) {
  .tribe-btn:active:not(:disabled) { transform: none; }
}

/* =============================================================================
                                    SPINNER
   ============================================================================= */
@keyframes tribe-spin { to { transform: rotate(360deg); } }

.tribe-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  padding: var(--tc-space-7) 0;
  color: rgb(var(--tc-ink) / .45);
}

.tribe-spinner {
  display: block;
  width: 26px;
  height: 26px;
  border: 2px solid currentColor;
  /* one clear quadrant */
  border-top-color: transparent;
  border-radius: 50%;
  animation: tribe-spin .7s linear infinite;
}

/* A spinner is the one thing that must not spin fast for a vestibular user.
   Kept beside the animation it modifies — a copy in another sheet had its
   shorthand reset by this one, which silently killed the accommodation. */
@media (prefers-reduced-motion: reduce) {
  .tribe-spinner { animation-duration: 2.4s; animation-timing-function: steps(8, end); }
}

/* =============================================================================
                                  GIF PICKER
   =============================================================================
   The GIF panel the composer opens. .tribe-gif wraps the trigger. */
.tribe-gif { position: relative; display: inline-block; }

.tribe-gif__panel {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  z-index: 50;
  width: 340px;
  max-width: 90vw;
  padding: var(--tc-space-2);
  border: 1px solid rgb(var(--tc-ink) / .12);
  border-radius: var(--tc-radius-tile);
  background: var(--tc-white);
  box-shadow: var(--tc-shadow);
}
.tribe-gif__panel[hidden] { display: none; }

.tribe-gif__search { margin-bottom: var(--tc-space-2); }

.tribe-gif__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 100px;
  gap: 6px;
  max-height: 300px;
  overflow-y: auto;
}

.tribe-gif__thumb {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--tc-radius-control);
  background: var(--tc-white-2);
  cursor: pointer;
}

.tribe-gif__thumb:hover { outline: 2px solid var(--tc-brand); }

.tribe-gif__empty {
  grid-column: 1 / -1;
  padding: var(--tc-space-7);
  color: rgb(var(--tc-ink) / .72);
  font-size: var(--tc-text-sm);
  text-align: center;
}

/* =============================================================================
                                 ATTACHMENTS
   =============================================================================
   The thumbnails under a composer for files being posted. */
.tribe-attach {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tc-space-2);
  margin-top: var(--tc-space-2);
}
.tribe-attach[hidden] { display: none; }

.tribe-attach__item {
  position: relative;
  display: inline-block;
  max-width: 180px;
}
.tribe-attach__item img {
  display: block;
  max-width: 180px;
  max-height: 140px;
  border: 1px solid rgb(var(--tc-ink) / .12);
  border-radius: var(--tc-radius-media);
}

/* a video shows as a named chip rather than a thumbnail */
.tribe-attach__item.is-video {
  max-width: 260px;
  padding: var(--tc-space-2) var(--tc-space-8) var(--tc-space-2) var(--tc-space-4);
  overflow: hidden;
  border: 1px solid rgb(var(--tc-ink) / .12);
  border-radius: var(--tc-radius-media);
  background: var(--tc-white-2);
  color: rgb(var(--tc-ink));
  font-size: var(--tc-text-sm);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tribe-attach__remove {
  position: absolute;
  top: -8px;
  right: -8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 2px solid var(--tc-white);
  border-radius: var(--tc-radius-pill);
  background: rgb(var(--tc-ink) / .75);
  color: #fff;
  font-size: var(--tc-text-base);
  line-height: 1;
  cursor: pointer;
}
.tribe-attach__remove:hover { background: rgb(var(--tc-ink) / .9); }

/* while an upload is in flight */
.tribe-attach__item.is-pending {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 100px;
  border: 1px dashed rgb(var(--tc-ink) / .18);
  border-radius: var(--tc-radius-media);
  background: var(--tc-white-2);
  color: rgb(var(--tc-ink) / .72);
  font-size: var(--tc-text-xs);
}

.tribe-attach__spinner {
  width: 22px;
  height: 22px;
  border: 2px solid rgb(var(--tc-ink) / .18);
  border-top-color: var(--tc-brand);
  border-radius: var(--tc-radius-pill);
  animation: tribe-spin .8s linear infinite;
}

/* =============================================================================
                                CARD — LINK & MEDIA
   =============================================================================
   A whole card that is a link (a grid tile), and the media area above its body.
   Same .tribe-card box; these add the parts a tile needs. */
.tribe-card--link {
  display: block;
  overflow: hidden;
  color: rgb(var(--tc-ink));
  transition: transform .2s ease, box-shadow .2s ease;
}
.tribe-card--link:hover,
.tribe-card--link:focus-visible {
  transform: translateY(-2px);
  /* a light lift — var(--tc-shadow) is the panel shadow and reads as a slab here */
  box-shadow: 0 4px 12px rgb(var(--tc-ink) / .10);
}

/* inside a grid the gap owns the spacing, not the card */
/* In a grid the GAP owns the spacing, so the card's own bottom margin would be
   added on top of it. Every grid, not just .tribe-grid — the auction and
   directory grids were inheriting a stray 12px under every card. */
.tribe-grid > .tribe-card,
.tribe-grid > [class*="col-"] > .tribe-card,
.tribe-auction-grid > .tribe-card,
.tribe-directory-grid > .tribe-card,
.tribe-deal-grid > .tribe-card,
.tribe-evgrid > .tribe-card { margin: 0; }

.tribe-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--tc-white-2) center / cover no-repeat;
}
.tribe-card-media--square { aspect-ratio: 1 / 1; }

.tribe-card-media__img { position: absolute; inset: 0; z-index: 0; }

@supports not (aspect-ratio: 4 / 3) {
  .tribe-card-media { height: 0; padding-bottom: 75%; }
  .tribe-card-media--square { padding-bottom: 100%; }
}

.tribe-card-title {
  margin: 0 0 var(--tc-space-1);
  overflow: hidden;
  font-size: var(--tc-text-md);
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: rgb(var(--tc-ink));
}
.tribe-card-title[data-empty] { font-weight: 500; color: rgb(var(--tc-ink) / .55); }

/* a timestamp beside a name, in a row or a comment */
.tribe-date {
  flex-shrink: 0;
  font-size: var(--tc-text-xs);
  color: rgb(var(--tc-ink) / .72);
  white-space: nowrap;
}
/* =============================================================================
                                    DATA TABLE
   =============================================================================
     .tribe-table-controls   the bar above a table
     .tribe-table-frame      the rounded border around one
     .tribe-table            the table itself
   Fields inside the controls bar are the base input and select — the bar only
   lays them out. The export control is a .tribe-btn like every other button. */
.tribe-table-controls {
  display: flex;
  align-items: center;
  gap: var(--tc-space-3);
  flex-wrap: wrap;
  margin-bottom: var(--tc-space-5);
}

/* search grows, filters keep their content width */
.tribe-table-controls__search { flex: 1 1 220px; min-width: 0; max-width: 360px; }
.tribe-table-controls__filter { flex: 0 0 auto; width: auto; min-width: 150px; }

/* actions sit opposite: export, bulk actions, add */
.tribe-table-controls__actions {
  display: flex;
  align-items: center;
  gap: var(--tc-space-2);
  margin-left: auto;
}

/* "128 members" — the result count, beside the actions */
.tribe-table-controls__count {
  font-size: var(--tc-text-sm);
  color: rgb(var(--tc-ink) / .72);
  white-space: nowrap;
}

@media (max-width: 767px) {
  .tribe-table-controls__search,
  .tribe-table-controls__filter { flex: 1 1 100%; max-width: none; }
  .tribe-table-controls__actions { width: 100%; margin-left: 0; }
}

.tribe-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--tc-text-base);
  color: rgb(var(--tc-ink));
  border-radius: 8px;
  overflow: hidden;
  outline: solid 1px #e6e6e6;
  outline-offset: -1px;
}

.tribe-table thead th {
  padding: var(--tc-space-3) var(--tc-space-5);
  border-bottom: 1px solid rgb(var(--tc-ink) / .12);
  background: rgb(var(--tc-ink) / .04);
  font-size: var(--tc-text-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
  color: rgb(var(--tc-ink) / .72);
}

/* the empty state, as a cell spanning the row */
.tribe-table__empty { text-align: center; color: rgb(var(--tc-ink) / .55); }

.tribe-table tbody td {
  padding: var(--tc-space-4) var(--tc-space-5);
  border-bottom: 1px solid rgb(var(--tc-ink) / .07);
  vertical-align: middle;
  font-size: var(--tc-text-sm);
}

.tribe-table tbody tr:last-child td { border-bottom: 0; }
.tribe-table tbody tr:hover { background: rgb(var(--tc-ink) / .03); }

/* the actions cell — pinned right, never wrapping */
.tribe-table__actions { width: 1%; text-align: right; white-space: nowrap; }
.tribe-table__actions .tribe-btn-row { justify-content: flex-end; flex-wrap: nowrap; }

/* numeric cells */
.tribe-table .tribe-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tribe-table .tribe-num--in { font-weight: 600; color: var(--tc-success); }
.tribe-table .tribe-num--out { font-weight: 600; color: var(--tc-danger); }

/* the primary value in a cell, with detail under it */
.tribe-cell-title { font-weight: 600; color: rgb(var(--tc-ink)); }

/* second line in a cell */
.tribe-ledger-alias { font-size: var(--tc-text-sm); color: rgb(var(--tc-ink) / .72); }

.tribe-ledger-note {
  margin-top: 3px;
  font-size: var(--tc-text-sm);
  font-style: italic;
  color: rgb(var(--tc-ink) / .72);
}

/* voided row — struck through */
.tribe-table tbody tr.is-void td { color: rgb(var(--tc-ink) / .55); }
.tribe-table tbody tr.is-void .tribe-num { text-decoration: line-through; }

/* rounded frame */
/* the row under a table: result count on the left, pager on the right */
.tribe-table-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tc-space-3);
  flex-wrap: wrap;
  margin-top: var(--tc-space-5);
  font-size: var(--tc-text-sm);
  color: rgb(var(--tc-ink) / .72);
}

/* the pager itself */
.tribe-pager { display: inline-flex; align-items: center; gap: var(--tc-space-1); }
.tribe-pager__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* the small-control token, not a literal 30 — they were numerically equal and
     drifted apart below 768px where the token drops to 28 */
  min-width: var(--tc-btn-h-sm);
  height: var(--tc-btn-h-sm);
  padding: 0 var(--tc-space-2);
  border: 1px solid rgb(var(--tc-ink) / .12);
  border-radius: var(--tc-radius-control);
  background: var(--tc-white);
  color: rgb(var(--tc-ink));
  font-size: var(--tc-text-sm);
  cursor: pointer;
  user-select: none;
}
.tribe-pager__btn:hover { background: var(--tc-white-2); }
.tribe-pager__btn.is-active {
  background: var(--tc-brand);
  border-color: var(--tc-brand);
  color: var(--tc-brand-ink, #fff);
}
.tribe-pager__btn.is-disabled { opacity: .45; cursor: default; }

/* a wide table scrolls sideways rather than bursting the card */
.tribe-table-scroll { overflow-x: auto; }
/* under 768px rows stack — every cell needs data-label */
@media (max-width: 767px) {
  .tribe-table thead { display: none; }
  .tribe-table,
.tribe-table tbody,
.tribe-table tbody tr { display: block; width: auto; }

  .tribe-table tbody tr {
    padding: var(--tc-space-3) var(--tc-space-4);
    border-bottom: 1px solid rgb(var(--tc-ink) / .12);
  }

  .tribe-table tbody tr:last-child { border-bottom: 0; }

  /* label left, value right, on one line per cell */
  .tribe-table tbody td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--tc-space-4);
    padding: 3px 0;
    border-bottom: 0;
    text-align: right;
  }

  .tribe-table tbody td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: var(--tc-text-xs);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-align: left;
    color: rgb(var(--tc-ink) / .55);
  }

  /* the empty state spans the row and has no label to sit beside */
  .tribe-table tbody td.tribe-table__empty { display: block; text-align: center; }}

/* =============================================================================
                                   UTILITIES
   =============================================================================
   Small, reusable, and each one earned its place by replacing a measured set of
   duplicates rather than by seeming useful. Add to this only when the same
   declaration block already exists in two or more components.

     .tribe-fill       fill the parent box with an image
     .tribe-truncate   one line, ellipsis
     .tribe-actions    a right-aligned row of controls */

/* FILL. Found in EIGHT separate implementations across the three sheets and
   bodyMessages' inline block - card media, avatars, gif thumbs, feed row
   thumbs, deal banners - all saying exactly this. The legacy selectors are
   listed alongside it so they collapse to one rule today; markup migrates onto
   the class as each surface is touched. */
.tribe-fill,
.tribe-card-media img,
.tribe-card-media__img,
.tribe-avatar img,
.tribe-thumb-btn img,
.tribe-gif__thumb img,
.tribe-feed-row-thumb img,
.tribe-deal-banner__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* TRUNCATE. Five implementations. .text-truncate already existed but was
   scoped to .tribe-ui, so every component outside that scope wrote its own. */
.tribe-truncate,
.tribe-ui .text-truncate,
.tribe-save-bar-text,
.tribe-dropdown .tribe-name {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ACTIONS ROW. Four implementations, three of them inline in templates. */
.tribe-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--tc-space-2);
}

/* =============================================================================
                                   ANIMATION
   =============================================================================
   Shared motion. One definition, applied by class, so every card that lifts
   lifts by the same amount - the auction grid, the deal grid and the directory
   had each grown their own hover with a different shadow and a different
   distance.

     .tribe-hover-lift   a card that responds to the cursor

   Deliberately SUBTLE. The values it replaces were a 2px jump and a
   24px-blur shadow at 12% ink, which read as the card leaping at you on a grid
   where every tile does it at once. A hover cue only has to say "this one",
   not announce itself. */
.tribe-hover-lift {
  transition: transform var(--tc-ease), box-shadow var(--tc-ease), border-color var(--tc-ease);
}
.tribe-hover-lift:hover,
.tribe-hover-lift:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgb(var(--tc-ink) / .06);
  text-decoration: none;
}

/* Motion is the decoration here, not the information - the shadow and the
   border still communicate the state without it. */
@media (prefers-reduced-motion: reduce) {
  .tribe-hover-lift { transition: box-shadow var(--tc-ease), border-color var(--tc-ease); }
  .tribe-hover-lift:hover,
  .tribe-hover-lift:focus-visible { transform: none; }
}

/* =============================================================================
                                     MENU
   =============================================================================
   A dropdown menu. Used by the post menu, the tribe switcher and filters.
     .tribe-menu__list     the panel
     .tribe-menu__item     a row
     .tribe-menu__header   a section label
     .tribe-menu__divider  a rule between groups */

.tribe-menu__list {
  position: absolute;
  z-index: 100;
  min-width: 180px;
  margin-top: var(--tc-space-1);
  /* 15px off the right edge. These panels are anchored with `right: 0` against
     the controls cluster, which sat them flush against the lane's edge with no
     gutter. margin-right is the right tool: for a right-anchored absolute box it
     shifts the panel inward, and for the ones anchored with `left` (the profile
     card's centred menu) it resolves to nothing, so one declaration covers both
     without a per-menu override. */
  margin-right: 15px;
  padding: 6px;
  border: 1px solid rgb(var(--tc-ink) / .12);
  border-radius: var(--tc-radius-tile);
  background: var(--tc-white);
  box-shadow: var(--tc-shadow);
  list-style: none;
}
.tribe-menu__list--right { right: 0; left: auto; }
.tribe-menu__list > li { margin: 0; padding: 0; list-style: none; }

.tribe-menu__item {
  display: flex;
  align-items: center;
  gap: var(--tc-space-3);
  width: 100%;
  padding: var(--tc-space-2) var(--tc-space-4);
  border: 0;
  border-radius: var(--tc-radius-control);
  background: transparent;
  color: rgb(var(--tc-ink));
  font-family: var(--tc-font);
  font-size: var(--tc-text-sm);
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--tc-ease);
}
.tribe-menu__item:hover,
.tribe-menu__item:focus-visible {
  outline: none;
  background: var(--tc-white-2);
  color: rgb(var(--tc-ink));
}
/* The active row reads as a quiet outlined chip, not a blue fill. The brand
   tint made one item look like a coloured call-to-action inside a plain list,
   and it shifted hue per tribe. Weight stays 500 like every other row - the
   outline is what marks it, so the label does not also have to change. */
.tribe-menu__item.is-active {
  background: rgb(var(--tc-ink) / .05);
  box-shadow: inset 0 0 0 1px rgb(var(--tc-ink) / .14);
  color: rgb(var(--tc-ink));
  font-weight: 500;
}

.tribe-menu__item--split { justify-content: space-between; }

/* explicit height, not auto: an auto-height replaced element does not centre
   against the label's taller line box */
.tribe-menu__item svg,
.tribe-menu__item .fa,
.tribe-menu__item .fi {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  opacity: .65;
}
/* A glyph is text: the box above only reserves the slot, font-size draws the
   mark. line-height 1 keeps it on the row's centre rather than a text baseline. */
.tribe-menu__item .fi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
}
.tribe-menu__item.is-active svg,
.tribe-menu__item.is-active .fi { opacity: 1; }
.tribe-menu__item--split > span:last-child { color: rgb(var(--tc-ink) / .55); font-size: var(--tc-text-xs); }

/* the script sets top/left/width from the field; fixed escapes any scroller
   the field sits in, and the z-index clears an overlay */
.tribe-menu__list--fixed {
  position: fixed;
  z-index: 1260;
  max-height: 176px;
  margin-top: 0;
  overflow-y: auto;
}
.tribe-menu__list--fixed[hidden] { display: none; }

.tribe-menu__none { padding: var(--tc-space-2) var(--tc-space-4); font-size: var(--tc-text-xs); color: rgb(var(--tc-ink) / .72); }

.tribe-menu__header {
  padding: 6px var(--tc-space-4);
  font-size: var(--tc-text-xs);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgb(var(--tc-ink) / .72);
}

/* a rule between groups of rows. __sep is the same thing under an older name. */
.tribe-menu__divider,
.tribe-menu__sep {
  height: 1px;
  margin: 6px 0;
  padding: 0;
  /* lighter: at .07 it was as strong as the panel's own border and cut the
     short list in half rather than grouping it */
  background: rgb(var(--tc-ink) / .04);
}
/* =============================================================================
                                 ELEMENT RESETS
   ============================================================================= */
/* form controls and Bootstrap chrome inherit the page font */
html, body { font-family: var(--tc-font); }
input, select, textarea, button,
.btn, .form-control,
.dropdown-menu, .alert, .nav, .panel, .modal,
.tooltip, .popover, .label, .badge { font-family: inherit; }

/* Turbo's own elements */
turbo-frame { display: block; }
.turbo-progress-bar { height: 3px; background: var(--tc-brand); box-shadow: 0 0 8px var(--tc-brand); }

/* =============================================================================
                                     COIN
   =============================================================================
   The coin amount pill. Gold by design, so its colours are literal. */
/* The "earn N coins" marker on a post. Styled as a TICKET rather than a pill,
   to match the membership ticket in the rail — this product already uses the
   ticket shape to mean "a thing you hold", and an earnable reward is one.
   Flat by design: it sits ON feed cards, and a raised chip competed with the
   card it belongs to. The fill is drawn from the tribe colour via
   --tc-brand-soft (a 14% mix), so it tints per tribe without ever being a
   hardcoded colour. */
.tribe-coin {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px 4px 5px;
  /* squarer than a pill: a ticket has corners */
  border-radius: 4px;
  background: var(--tc-brand-soft);
  color: rgb(var(--tc-ink));
  font-size: var(--tc-text-sm);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  user-select: none;
}

/* the two notches that make it read as a ticket stub, painted in the lane colour */
.tribe-coin::before,
.tribe-coin::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: var(--tc-radius-pill);
  /* the lane's own colour, so they read as holes punched in the stub */
  background: rgb(var(--tc-lane-rgb, 246 243 237));
  transform: translateY(-50%);
  pointer-events: none;
}
.tribe-coin::before { left: -2px; }
.tribe-coin::after  { right: -2px; }

.tribe-coin__icon {
  display: block;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: var(--tc-radius-pill);
  object-fit: contain;
}
.tribe-coin__amount { display: inline-block; }

@media (max-width: 575px) {
  .tribe-coin { padding: 3px 8px 3px 4px; font-size: var(--tc-text-xs); }
  .tribe-coin__icon { width: 16px; height: 16px; }
}

/* --tile: pinned to the top-left of a grid tile's image, the same small size at
   every width, on a solid white fill so it reads over any photo. No notches:
   there is no lane colour behind a photo to punch them in. The icon rule is two
   classes so the media fill rule (.tribe-card-media img, 100% x 100%) does not
   stretch it. */
.tribe-coin--tile {
  position: absolute;
  top: var(--tc-space-3);
  left: var(--tc-space-3);
  z-index: 2;
  padding: 3px 8px 3px 4px;
  background: var(--tc-white);
  color: rgb(var(--tc-ink));
  font-size: var(--tc-text-xs);
}
.tribe-coin--tile::before,
.tribe-coin--tile::after { display: none; }
.tribe-coin--tile .tribe-coin__icon { width: 16px; height: 16px; object-fit: contain; }
/* a tile with a NEW or status chip already in that corner (postBox.tpl .has-chip): sit below it */
.has-chip .tribe-coin--tile { top: calc(var(--tc-space-3) + 28px); }

/* =============================================================================
                                    OVERLAY
   =============================================================================
   A dialog on a dimmed backdrop, for a confirm step or a full-page preview.
   Hide it with the hidden attribute.
     .tribe-overlay          the backdrop (--over sits above another overlay)
     .tribe-overlay__card    the dialog (--wide for a preview, --fill to fill)
     .tribe-overlay__head    its title row
     .tribe-overlay__body    the only part that scrolls
     .tribe-overlay__foot    its commit row
     .tribe-overlay__spacer  pushes what follows to the right
     .tribe-overlay__frame   a full-bleed iframe inside the card */
.tribe-overlay[hidden] { display: none; }
.tribe-overlay {
  position: fixed;
  inset: 0;
  z-index: 1250;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--tc-space-4);
  /* a scrim, not a surface — dark in both themes */
  background: rgba(16, 18, 24, .5);
}
.tribe-overlay--over { z-index: 1260; }

/* LIGHT ISLAND — MODALS ONLY.
   A modal is always light; its scrim stays dark. Without this they inherit
   :root[data-theme="dark"], where --tc-white is #16181c — and footer.tpl mounts
   four of them as direct <body> children while two more appendTo('body') on
   open, so none of them sits inside the lane's own light island.

   Rail flyouts (bell, messages, profile, the tribe switcher) are deliberately
   NOT in this list: they follow the theme and repaint as glass on
   :popover-open. Pinning light ink on them without their surface is what made
   them dark-on-dark. */
.tribe-overlay,
.tribe-ui .modal-content,
.brw-dialog,
.tribe-personcard,
.tribe-profile-modal,
.tribe-edit-modal,
.tribe-ui .modal-notification-content,
/* The mobile sheet is white in light mode, so anything inside it that reaches
   for --tc-white gets the light value (the MOBILE DARK block un-pins it). */
.tc-bn-sheet-panel {
  --tc-white:        #ffffff;
  --tc-white-2:      #f6f3ed;
  --tc-white-3:      #eceef2;
  --tc-ink:          18 20 24;
  --tc-link:         #1e5fd0;
  --tc-danger:       #c4362c;
  --tc-danger-soft:  #fef2f2;
  --tc-success:      #22c55e;
  --tc-success-soft: #f0fdf4;
  --tc-success-ink:  #15803d;
  --tc-warning:      #f59e0b;
  --tc-warning-soft: #fffbeb;
  --tc-warning-ink:  #b45309;
}

.tribe-overlay__card {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 2 * var(--tc-space-4));
  overflow: hidden;
  border-radius: var(--tc-radius-panel);
  background: var(--tc-white);
  /* the light island resets the tokens, not color, so body text would keep the
     dark theme's ink inherited from the page */
  color: rgb(var(--tc-ink));
  box-shadow: var(--tc-shadow);
}
/* Bootstrap grid rows inside a popup: their negative margins overflow the body */
.tribe-overlay__body > .row { margin-right: 0; margin-left: 0; }
/* the card eases in; the scrim fades. Skipped entirely under
   prefers-reduced-motion, where a popup appearing instantly is correct. */
@keyframes tribeOverlayIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes tribeOverlayCardIn {
  from { opacity: 0; transform: scale(.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes tribeOverlayDrawerIn {
  from { transform: translateY(100%); }
  to   { transform: none; }
}
.tribe-overlay:not([hidden]) { animation: tribeOverlayIn 220ms var(--tc-motion); }
.tribe-overlay:not([hidden]) > .tribe-overlay__card { animation: tribeOverlayCardIn 260ms var(--tc-motion); }

@media (max-width: 767px) {
  /* a drawer rises from the edge rather than scaling in place */
  .tribe-overlay.tribe-bid-dialog:not([hidden]) > .tribe-overlay__card {
    animation: tribeOverlayDrawerIn 320ms var(--tc-motion);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tribe-overlay:not([hidden]),
  .tribe-overlay:not([hidden]) > .tribe-overlay__card { animation: none; }
}

.tribe-overlay__card--wide { max-width: 720px; }
.tribe-overlay__card--sm { max-width: 380px; }
.tribe-overlay__card--fill { height: calc(100vh - 2 * var(--tc-space-4)); }

.tribe-overlay__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--tc-space-3);
  padding: var(--tc-space-4) var(--tc-space-7);
  border-bottom: 1px solid rgb(var(--tc-ink) / .07);
}
.tribe-overlay__title {
  min-width: 0;
  margin: 0;
  font-family: var(--tc-font-display);
  font-size: var(--tc-text-md);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.25;
  color: rgb(var(--tc-ink));
}
.tribe-overlay__lead {
  margin: var(--tc-space-1) 0 0;
  font-size: var(--tc-text-sm);
  line-height: 1.45;
  color: rgb(var(--tc-ink) / .72);
}
.tribe-overlay__lead:empty { display: none; }

/* the X, at the right of the head */
.tribe-overlay__close {
  order: 2;
  flex: 0 0 auto;
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  color: rgb(var(--tc-ink) / .72);
  font-size: var(--tc-text-xl);
  line-height: 1;
  opacity: .6;
  cursor: pointer;
  transition: opacity var(--tc-ease), color var(--tc-ease);
}
.tribe-overlay__close:hover { color: rgb(var(--tc-ink)); opacity: 1; }
.tribe-overlay__close:focus-visible { outline: none; box-shadow: var(--tc-focus); }

/* the page behind a popup does not scroll */
.tribe-popup-open, .tribe-popup-open body { overflow: hidden; }

.tribe-overlay__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--tc-space-6) var(--tc-space-7);
}

.tribe-overlay__foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--tc-space-2);
  padding: var(--tc-space-5) var(--tc-space-7);
  border-top: 1px solid rgb(var(--tc-ink) / .07);
}
.tribe-overlay__spacer { flex: 1 1 auto; }

.tribe-overlay__frame {
  flex: 1 1 auto;
  min-height: 0;
  background: var(--tc-white-2);
}
.tribe-overlay__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--tc-white);
}

@media (max-width: 767px) {
  .tribe-overlay { padding: var(--tc-space-3); }
  .tribe-overlay__head,
  .tribe-overlay__body,
  .tribe-overlay__foot { padding-inline: var(--tc-space-5); }
  .tribe-overlay__foot .tribe-btn { flex: 1 1 auto; }
}

/* =============================================================================
                                     MODAL
   =============================================================================
   A popup IS a card: header, body, footer. Bootstrap owns the class names and
   the show/hide plumbing; every visual value comes from the card contract.
     .modal-content  the card
     .modal-header   its title band, with .close at the right
     .modal-body     the content
     .modal-footer   trailing actions, left aligned */
.tribe-ui .modal-content {
  overflow: hidden;
  border: 1px solid rgb(var(--tc-ink) / .12);
  border-radius: var(--tc-radius-tile);
  background: var(--tc-white);
  box-shadow: var(--tc-shadow);
}

/* Bootstrap clearfixes both bands. A ::before pseudo-element becomes a FLEX
   ITEM once the band is a flex row, which opens a phantom gap before the
   title and pushes the close button off. */
.tribe-ui .modal-header::before,
.tribe-ui .modal-header::after,
.tribe-ui .modal-footer::before,
.tribe-ui .modal-footer::after { display: none; }

.tribe-ui .modal-header {
  display: flex;
  align-items: center;
  gap: var(--tc-space-3);
  min-height: 0;
  padding: var(--tc-space-4) var(--tc-space-6);
  border-bottom: 1px solid rgb(var(--tc-ink) / .07);
  background: var(--tc-white);
  color: rgb(var(--tc-ink));
}
/* the text column takes the room, whatever tag it uses */
.tribe-ui .modal-header > :where(h1, h2, h3, h4, p, .modal-title, .tribe-headtext) {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}
.tribe-ui .modal-header .modal-title {
  font-family: var(--tc-font-display);
  font-size: var(--tc-text-md);
  font-weight: 700;
  letter-spacing: -.01em;
  color: rgb(var(--tc-ink));
}

/* the X, pinned to the right edge. Bootstrap floats it; a flex row ignores
   float, so order + auto margin are what actually place it. */
.tribe-ui .modal-header .close {
  order: 2;
  flex: 0 0 auto;
  float: none;
  margin: 0 0 0 auto;
  padding: 0;
  color: rgb(var(--tc-ink) / .72);
  font-size: var(--tc-text-xl);
  font-weight: 400;
  line-height: 1;
  opacity: .6;
  text-shadow: none;
  transition: opacity var(--tc-ease), color var(--tc-ease);
}
.tribe-ui .modal-header .close:hover,
.tribe-ui .modal-header .close:focus { color: rgb(var(--tc-ink)); opacity: 1; }
.tribe-ui .modal-header .close:focus-visible { outline: none; box-shadow: var(--tc-focus); }
/* Bootstrap markup puts .text-white on some titles */
.tribe-ui .modal-header .text-white { color: rgb(var(--tc-ink)) !important; }

.tribe-ui .modal-body { padding: var(--tc-space-6); color: rgb(var(--tc-ink)); }

.tribe-ui .modal-footer {
  display: flex;
  align-items: center;
  gap: var(--tc-space-2);
  padding: var(--tc-space-5) var(--tc-space-6);
  border-top: 1px solid rgb(var(--tc-ink) / .07);
  /* main.css still fills every .modal-footer #1f2626 — an opaque dark slab
     over the panel's rounded bottom corners */
  background: var(--tc-white);
  text-align: left;
}
/* pushes whatever follows to the right edge */
.tribe-ui .modal-footer .tribe-spacer { flex: 1 1 auto; }

/* =============================================================================
                                   LIVE BAR
   =============================================================================
   The "an event is happening now" bar. Fixed bottom-right on desktop, docked
   above the mobile bottom bar, or --inline inside a page. */
@keyframes tribe-live-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes tribe-live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(52, 211, 153, .75); }
  70%  { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

.tribe-live {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1200;
  width: 340px;
  max-width: calc(100vw - 44px);
  border-radius: 14px;
  background: linear-gradient(100deg, #1d2433 0%, #2c3854 100%);
  box-shadow: 0 12px 36px rgba(16, 22, 38, .40), 0 2px 8px rgba(16, 22, 38, .24);
  color: #fff;
  animation: tribe-live-in 320ms var(--tc-motion) both;
}
.tribe-live:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 44px rgba(16, 22, 38, .48), 0 2px 8px rgba(16, 22, 38, .28);
}

.tribe-live__inner {
  display: flex;
  align-items: center;
  gap: var(--tc-space-4);
  box-sizing: border-box;
  padding: 13px 15px;
}

.tribe-live__card { color: #fff; }
.tribe-live__card:hover,
.tribe-live__card:focus { color: #fff; }
.tribe-live__card:focus-visible { outline: 2px solid #34d399; outline-offset: 3px; border-radius: 12px; }

.tribe-live__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 2px;
  min-width: 0;
}
.tribe-live__kicker {
  font-size: var(--tc-text-2xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #6ee7b7;
}
.tribe-live__title {
  overflow: hidden;
  font-size: var(--tc-text-base);
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tribe-live__go {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 7px;
  padding: 6px 11px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 9px;
  background: rgba(255, 255, 255, .13);
  font-size: var(--tc-text-sm);
  font-weight: 600;
  white-space: nowrap;
  transition: background .18s ease;
}
.tribe-live:hover .tribe-live__go { background: rgba(255, 255, 255, .22); }
.tribe-live__go .fa { transition: transform .18s ease; }
.tribe-live:hover .tribe-live__go .fa { transform: translateX(3px); }

.tribe-live__pulse {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: var(--tc-radius-pill);
  background: #34d399;
  animation: tribe-live-pulse 2s infinite;
}

/* inside a page rather than floating */
.tribe-live--inline,
.tribe-live--inline:hover {
  position: static;
  inset: auto;
  width: auto;
  max-width: none;
  margin: 0 0 var(--tc-space-7);
  border-radius: 14px;
  box-shadow: none;
  transform: none;
  animation: none;
}
.tribe-live--inline .tribe-live__inner { padding: 15px 18px; }
.tribe-live--inline .tribe-live__title { font-size: var(--tc-text-md); }

/* a nav row for an event happening now */
.tc-bn-tab.is-live .fa { color: #16a34a; }
.tc-bn-tab.is-live .tc-bn-label { color: #16a34a; font-weight: 600; }
.tc-bn-tab.active.is-live .fa,
.tc-bn-tab.active.is-live .tc-bn-label { color: var(--tc-bn-accent); }

@media screen and (max-width: 767px) {
  .tribe-live {
    left: 0;
    right: 0;
    bottom: calc(var(--tc-bn-h) + env(safe-area-inset-bottom, 0px));
    z-index: calc(var(--tc-bn-z) - 1);
    width: auto;
    max-width: none;
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -6px 22px rgba(16, 22, 38, .28);
    animation: none;
  }
  .tribe-live:hover { transform: none; }
  .tribe-live__inner { padding: 14px; gap: var(--tc-space-3); }
  .tribe-live__title { font-size: var(--tc-text-sm); }
  .tribe-live__go { padding: 6px 10px; }
  .tribe-live__go .fa { display: none; }

  .tribe-live--inline .tribe-live__inner { padding: 14px; }
  .tribe-live--inline .tribe-live__title { font-size: var(--tc-text-base); }
  .tribe-live--inline .tribe-live__go .fa { display: inline-block; }
}

@media (prefers-reduced-motion: reduce) {
  .tribe-live,
  .tribe-live__pulse { animation: none; }
  .tribe-live:hover { transform: none; }
}

body.modal-open .tribe-live:not(.tribe-live--inline),
html.messages .tribe-live:not(.tribe-live--inline) { display: none; }

/* =============================================================================
                                   COMPOSER
   =============================================================================
   The writing surface for comments and replies.
     .tribe-composer__row     avatar beside the field
     .tribe-composer__field    the field itself
     .tribe-composer__input  the textarea, bare inside the field
     .tribe-composer__send    the send button, inside the field
     .tribe-composer__tools   image / GIF / video row beneath
   Must come after the .tribe-base :where(textarea) rule it resets. */
.tribe-composer__hint {
  display: none;
  margin: var(--tc-space-1) var(--tc-space-1) 0;
  font-size: var(--tc-text-sm);
  color: var(--tc-danger);
}

.tribe-composer__hint.is-visible { display: block; }

/* cancel (X) */
/* top-right of the form */
.tribe-composer__row > .tribe-reply-cancel { margin-left: auto; align-self: flex-start; }

/* ---- Compose bar (textarea + send + tool row) ---- */
/* post page: your own avatar is hidden */
.tribe-composer--main .tribe-composer__avatar { display: none; }

/* avatar row — main composer only */
.tribe-composer__row { display: flex; align-items: flex-end; gap: var(--tc-space-3); }

.tribe-composer__row .tribe-composer__field { flex: 1 1 auto; min-width: 0; }

/* The same field as .tribe-composer-bar__prompt on the feed: uniform 12px
   inset, 13px text. The send button is absolute so nothing eats the inset. */
.tribe-composer__field {
  position: relative;
  display: flex;
  align-items: center;
  padding: 12px;
  padding-right: 44px;
  border: 1px solid rgb(var(--tc-ink) / .12);
  border-radius: 8px;
  background: rgb(var(--tc-ink) / .05);
  font-size: var(--tc-text-sm);
  transition: border-color var(--tc-ease), background-color var(--tc-ease);
}

/* an open reply box is already white and ringed — it was opened to be typed in */
.tribe-composer__field:focus-within,
.tribe-reply-container:not(.hide) .tribe-composer__field {
  background: var(--tc-white);
  border-color: var(--tc-brand);
  box-shadow: 0 0 0 3px var(--tc-brand-soft);
}

/* The field shows focus itself via :focus-within, so the bare input inside it
   must not also draw the generic control ring — that ring is --tc-focus, which
   is blue, and it read as an outline around the field. */
.tribe-composer__input:focus,
.tribe-composer__input:focus-visible {
  outline: none;
  box-shadow: none;
  border: 0;
}

.tribe-composer__input {
  flex: 1;
  width: auto;
  height: auto;
  min-height: 0;
  border: 0;
  outline: 0;
  resize: none;
  background: transparent;
  font-family: var(--tc-font);
  font-size: 13px;
  line-height: 1.5;
  color: rgb(var(--tc-ink));
  /* the field owns the inset */
  padding: 0;
  max-height: 200px;
  overflow-y: auto;
}

.tribe-composer__input::placeholder { color: rgb(var(--tc-ink) / .72); }

.tribe-composer__send {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgb(var(--tc-ink) / .45);
  cursor: pointer;
  transition: background .15s, color .15s, opacity .15s;
}

/* hover darkens the MARK, not a plate behind it. */
.tribe-composer__send:hover { background: transparent; color: rgb(var(--tc-ink)); }

.tribe-composer__send:disabled { opacity: 0.5; cursor: not-allowed; }

.tribe-composer__send svg { transform: translateX(-1px); }

.tribe-composer__input:not(:placeholder-shown) ~ .tribe-composer__send,
.tribe-composer__input:not(:placeholder-shown) ~ .tribe-composer__send:hover {
  background: var(--tc-brand-fill);
  color: var(--tc-text-on-brand);
}

/* the tools row closes the composer, so it carries the rule that used to be a
   separate <hr> above the thread */
.tribe-composer__tools {
  display: flex;
  align-items: center;
  gap: var(--tc-space-2);
  margin: var(--tc-space-1) 0 var(--tc-space-6);
  padding-bottom: var(--tc-space-4);
  border-bottom: 1px solid rgb(var(--tc-ink) / .12);
}
/* a reply is a compact form — no divider, no trailing space */
.tribe-composer-reply .tribe-composer__tools {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

/* image / GIF / video tools */
.tribe-composer__tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 28px button */
  width: 20px;
  height: 25px;
  /* padding 0 — keeps the icon square */
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  /* greyer at rest — .45 matches the send button and the reply X */
  color: rgb(var(--tc-ink) / .45);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.tribe-composer__tool:hover { background: var(--tc-white-3); color: rgb(var(--tc-ink)); }

/* icon-font glyph size */
/* legacy: the theme toggle still uses a UIcons glyph. Kept for it alone. */
.tribe-composer__tool .fi { display: inline-flex; font-size: 18px; line-height: 1; }

/* composer icons — local SVGs painted through a mask (currentColor) */
.tribe-composer__tool .tribe-ico {
  display: block;
  /* never shrink */
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  background-color: currentColor;
  -webkit-mask: var(--tc-ico) center / contain no-repeat;
  mask: var(--tc-ico) center / contain no-repeat;
}

/* The comment box under a post: its own block, ruled off from the actions.
     .tribe-comment-compose          the block
     .tribe-comment-compose-inline   the edit/reply box inside a comment
     .tribe-comment-compose-actions  its buttons */
.tribe-comment-compose {
  margin: var(--tc-space-6) 0 0;
  padding: var(--tc-space-6) 0 0;
  border-top: 1px solid rgb(var(--tc-ink) / .12);
}

.tribe-comment-compose-inline textarea:not(.tribe-composer__input) { min-height: 70px; }

.tribe-comment-compose-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--tc-space-3);
  margin-top: var(--tc-space-3);
}

/* On a phone it stays IN FLOW under the comments. It used to be position:fixed
   above the bottom bar, which took it out of flow with nothing reserving its
   height — so it sat on top of the last comments and cut the list off. */
@media (max-width: 767px) {
  .tc-kb-open .tc-bottom-nav { display: none; }
}

/* =============================================================================
                                     HOME
   =============================================================================
   /myhome. A centred welcome on the tribe's own background, the invite band,
   badges, then New for you beside a side column (coming up, deals, messages);
   one column below 1024px.
     .tribe-homehero      centred greeting, one live line, a row of stat chips
     .tribe-homeinvite    the invite band + its popup (link | email segment, a panel each)
     .tribe-home__grid    main (New for you) + Messages, one height
     .tribe-newlist       mixed rows: thumbnail or avatar, kicker, title, meta, new dot */
.tribe-home { display: flex; flex-direction: column; gap: var(--tc-space-5); }
.tribe-home > .tribe-card,
.tribe-home > .tribe-alert { margin: 0; }

.tribe-homehero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--tc-space-3);
  min-height: 220px;
  padding: var(--tc-space-10) var(--tc-space-6);
  overflow: hidden;
  border-radius: var(--tc-radius-panel);
  background-color: #1d2127;
  background-image: radial-gradient(ellipse at center, rgb(10 12 16 / .35) 0%, rgb(10 12 16 / .7) 100%), var(--tc-bg-image, none);
  background-position: center;
  background-size: cover;
  color: #fff;
  text-align: center;
}
.tribe-homehero a { color: #fff; }
.tribe-homehero__title {
  margin: 0;
  font-family: var(--tc-font-display);
  font-size: clamp(26px, 3.6vw, 40px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: #fff;
  overflow-wrap: anywhere;
}
.tribe-homehero__sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 .35em;
  margin: 0;
  font-size: var(--tc-text-base);
  color: rgb(255 255 255 / .86);
}
.tribe-homehero__sub a { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
/* the live-bid pulse; still under reduced motion */

/* one translucent bar on the photo holding the three, split by hairlines. No
   backdrop blur: it is expensive to repaint while the hero animates in. */
.tribe-homehero__stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  row-gap: var(--tc-space-2);
  margin-top: var(--tc-space-3);
  padding: var(--tc-space-2) var(--tc-space-1);
  border: 1px solid rgb(255 255 255 / .2);
  border-radius: var(--tc-radius-control);
  background: rgb(255 255 255 / .1);
}
.tribe-homehero__stat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 2px var(--tc-space-5);
  font-size: var(--tc-text-sm);
  color: rgb(255 255 255 / .8);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--tc-ease);
}
.tribe-homehero__stat + .tribe-homehero__stat { border-left: 1px solid rgb(255 255 255 / .22); }
.tribe-homehero__stat svg { width: 17px; height: 17px; flex: none; opacity: .9; }
.tribe-homehero__stat strong { font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
a.tribe-homehero__stat:hover { color: #fff; text-decoration: none; }
/* a phone fits all three on one line: tighter sides, no wrap */
@media (max-width: 479px) {
  .tribe-homehero__stats { flex-wrap: nowrap; max-width: 100%; }
  .tribe-homehero__stat { gap: 5px; padding: 2px var(--tc-space-3); font-size: var(--tc-text-xs); }
  .tribe-homehero__stat svg { width: 15px; height: 15px; }
}
/* unread messages: the one item that asks for something, marked with a dot */
.tribe-homehero__stat.is-hot::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--tc-brand); }

/* the invite band */
.tribe-homeinvite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tc-space-4) var(--tc-space-6);
  padding: var(--tc-space-5) var(--tc-space-6);
  border: 1px solid rgb(var(--tc-ink) / .12);
  border-radius: var(--tc-radius-panel);
  background: var(--tc-white);
}
.tribe-homeinvite__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--tc-brand-fill);
  color: var(--tc-text-on-brand);
}
.tribe-homeinvite__icon svg { width: 24px; height: 24px; }
.tribe-homeinvite__pitch { flex: 1 1 240px; min-width: 0; }
.tribe-homeinvite__title { margin: 0; font-family: var(--tc-font-display); font-size: var(--tc-text-lg); font-weight: 500; color: rgb(var(--tc-ink)); }
.tribe-homeinvite__text { margin: 2px 0 0; font-size: var(--tc-text-sm); color: rgb(var(--tc-ink) / .72); }
.tribe-homeinvite__text strong { color: var(--tc-brand-strong); }
.tribe-homeinvite__go { flex: none; }
.tribe-homeinvite__lead { margin: 0 0 var(--tc-space-5); font-size: var(--tc-text-sm); color: rgb(var(--tc-ink) / .72); }
/* the invite popup: a two-way segment (link | email), each choice in its own panel */
.tribe-homeinvite__lead strong { color: rgb(var(--tc-ink)); }
.tribe-homeinvite__seg { display: flex; width: 100%; margin-bottom: var(--tc-space-4); border-radius: var(--tc-radius-control); }
.tribe-homeinvite__seg .tribe-seg__option { flex: 1; }
.tribe-homeinvite__seg .tribe-seg__option > span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--tc-space-2);
  padding: 7px var(--tc-space-3);
  border-radius: 5px;
  font-size: var(--tc-text-sm);
}
.tribe-homeinvite__seg svg { width: 15px; height: 15px; flex: none; }
.tribe-homeinvite__panel { padding: var(--tc-space-5); }
.tribe-homeinvite__panel[hidden] { display: none; }
.tribe-homeinvite__panel-title { margin: 0; font-size: var(--tc-text-base); font-weight: 600; color: rgb(var(--tc-ink)); }
.tribe-homeinvite__panel-help { margin: 2px 0 var(--tc-space-4); font-size: var(--tc-text-sm); color: rgb(var(--tc-ink) / .72); }
.tribe-homeinvite__link { display: flex; gap: var(--tc-space-2); }
.tribe-homeinvite__link input { flex: 1 1 auto; min-width: 0; font-size: var(--tc-text-sm); background: var(--tc-white); }
/* the one-tap shares: icon over name, one even row */
.tribe-homeinvite__nets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
  gap: var(--tc-space-2);
  margin-top: var(--tc-space-4);
  padding-top: var(--tc-space-4);
  border-top: 1px solid rgb(var(--tc-ink) / .07);
}
.tribe-homeinvite__net {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: var(--tc-space-3) var(--tc-space-1);
  border: 1px solid rgb(var(--tc-ink) / .1);
  border-radius: var(--tc-radius-control);
  background: var(--tc-white);
  font: inherit;
  font-size: var(--tc-text-xs);
  color: rgb(var(--tc-ink) / .8);
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--tc-ease), color var(--tc-ease);
}
.tribe-homeinvite__net[hidden] { display: none; }
.tribe-homeinvite__net:hover,
.tribe-homeinvite__net:focus-visible { border-color: var(--tc-brand); color: rgb(var(--tc-ink)); text-decoration: none; }
.tribe-homeinvite__net svg { width: 20px; height: 20px; }
.tribe-homeinvite__panel .tribe-field { margin-bottom: var(--tc-space-4); }
.tribe-homeinvite__panel .tribe-field:last-child { margin-bottom: 0; }
@media (max-width: 767px) { .tribe-homeinvite__nets { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* stretch: the Messages column takes the height of New for you */
.tribe-home__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--tc-space-5); align-items: stretch; }
/* New for you: about six rows tall, the rest scrolls inside the card. A slim
   pill thumb on a clear track, faint until the list is hovered. */
.tribe-home__main > .tribe-newlist {
  max-height: 480px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--tc-ink) / .12) transparent;
  transition: scrollbar-color var(--tc-ease);
}
.tribe-home__main > .tribe-newlist:hover { scrollbar-color: rgb(var(--tc-ink) / .28) transparent; }
.tribe-home__main > .tribe-newlist::-webkit-scrollbar { width: 10px; }
.tribe-home__main > .tribe-newlist::-webkit-scrollbar-track { background: transparent; }
.tribe-home__main > .tribe-newlist::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: var(--tc-radius-pill);
  background: rgb(var(--tc-ink) / .12) padding-box;
}
.tribe-home__main > .tribe-newlist:hover::-webkit-scrollbar-thumb { background-color: rgb(var(--tc-ink) / .28); }
.tribe-home__main > .tribe-newlist::-webkit-scrollbar-thumb:hover { background-color: rgb(var(--tc-ink) / .42); }
.tribe-home__grid > .tribe-card { margin: 0; }
.tribe-home__side { display: flex; flex-direction: column; gap: var(--tc-space-5); min-width: 0; }
.tribe-home__side > .tribe-card { margin: 0; }
/* Messages fills the column; its list takes the space, Open stays in the header */
.tribe-home__msgs { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.tribe-home__msgs > .tribe-newlist,
.tribe-home__msgs > .tribe-card-body { flex: 1 1 auto; }
@media (min-width: 1024px) {
  .tribe-home__grid { grid-template-columns: minmax(0, 1fr) 340px; }
  /* New for you sets the row's height; Messages never grows it, it scrolls */
  .tribe-home__side { contain: size; }
  .tribe-home__msgs > .tribe-newlist { flex-basis: 0; min-height: 0; overflow-y: auto; }
}
/* Home deals: two across on a phone, four on a wide screen, like the auctions */
.tribe-deal-grid.tribe-home__deals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1024px) {
  .tribe-home__auctions,
  .tribe-deal-grid.tribe-home__deals { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .tribe-homehero { min-height: 0; padding: var(--tc-space-8) var(--tc-space-5); }
  .tribe-homeinvite {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--tc-space-3) var(--tc-space-3);
    padding: var(--tc-space-4);
  }
  .tribe-homeinvite__icon { width: 36px; height: 36px; }
  .tribe-homeinvite__icon svg { width: 18px; height: 18px; }
  .tribe-homeinvite__title { font-size: var(--tc-text-base); line-height: 1.3; }
  .tribe-homeinvite__text { font-size: var(--tc-text-xs); }
  .tribe-homeinvite__go { grid-column: 1 / -1; }
    .tribe-homeinvite__go { width: 100%; justify-content: center; }
}

/* mixed rows */
.tribe-newlist { margin: 0; padding: 0; list-style: none; }
.tribe-newlist > li + li { border-top: 1px solid rgb(var(--tc-ink) / .07); }
.tribe-newlist__row {
  display: flex;
  align-items: center;
  gap: var(--tc-space-4);
  padding: var(--tc-space-3) var(--tc-space-6);
  color: rgb(var(--tc-ink));
  text-decoration: none;
  transition: background-color var(--tc-ease);
}
.tribe-newlist__row:hover { background: rgb(var(--tc-ink) / .03); color: rgb(var(--tc-ink)); text-decoration: none; }
.tribe-newlist__thumb {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border-radius: var(--tc-radius-control);
  background: rgb(var(--tc-ink) / .06);
  font-size: 18px;
  color: rgb(var(--tc-ink) / .4);
}
.tribe-newlist__thumb img { width: 100%; height: 100%; object-fit: cover; }
.tribe-newlist__main { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.tribe-newlist__line { display: flex; align-items: baseline; gap: var(--tc-space-3); min-width: 0; }
.tribe-newlist__title { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--tc-text-sm); font-weight: 600; }
.tribe-newlist__date { flex: none; font-size: var(--tc-text-xs); color: rgb(var(--tc-ink) / .55); font-variant-numeric: tabular-nums; }
.tribe-newlist__meta { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--tc-text-xs); color: rgb(var(--tc-ink) / .55); }
.tribe-newlist__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--tc-brand); }
/* the kind reads as a word in the meta line, its colour on a small dot */
.tribe-newlist__kind { font-weight: 600; color: rgb(var(--tc-ink) / .72); }
/* messages reuse the rows with an avatar instead of a thumbnail */
.tribe-home__side .tribe-newlist__row { padding: var(--tc-space-3) var(--tc-space-5); gap: var(--tc-space-3); }
.tribe-home__side .tribe-newlist__title { font-weight: 500; }
.tribe-home__side .tribe-newlist__row.is-new .tribe-newlist__title { font-weight: 700; }


/* =============================================================================
                                    BADGES
   =============================================================================
   Every badge available in the tribe (Home). The ring around each icon fills
   with progress (--p, 0-100); an earned badge is a full ring and a filled icon. */
/* one row that scrolls sideways; "See all" (.is-expanded) wraps it into a grid */
.tribe-badges {
  --tc-badges-bleed: var(--tc-space-6);
  display: flex;
  gap: var(--tc-space-3);
  margin: 0 calc(var(--tc-badges-bleed) * -1);
  padding: 2px var(--tc-badges-bleed) var(--tc-space-2);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--tc-space-6);
  scrollbar-width: none;
}
/* the card body pads space-4 at 600px and below; bleed exactly that far */
@media (max-width: 600px) { .tribe-badges { --tc-badges-bleed: var(--tc-space-4); scroll-padding-inline: var(--tc-space-4); } }
/* the row still scrolls by swipe, wheel or trackpad; the bar is just not drawn */
.tribe-badges::-webkit-scrollbar { display: none; }
.tribe-badges.is-expanded {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  margin: 0;
  padding: 0;
  overflow: visible;
}
/* a mouse can drag the row sideways (js/tc-drag-scroll.js adds .is-dragging) */
@media (pointer: fine) {
  .tribe-badges:not(.is-expanded) { cursor: grab; }
  .tribe-badges.is-dragging,
  .tribe-badges.is-dragging .tribe-badges__tile { cursor: grabbing; }
}
/* no text selection while the row is being dragged */
.tribe-badges.is-dragging { user-select: none; }
.tribe-badges__tile {
  display: flex;
  flex: 0 0 104px;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--tc-space-3) var(--tc-space-2);
  border: 1px solid rgb(var(--tc-ink) / .1);
  border-radius: var(--tc-radius-tile);
  background: var(--tc-white);
  text-align: center;
  scroll-snap-align: start;
}
.tribe-badges__tile { font: inherit; color: inherit; cursor: pointer; transition: border-color var(--tc-ease), opacity var(--tc-ease); }
.tribe-badges__tile:hover { border-color: rgb(var(--tc-ink) / .24); }
.tribe-badges__tile:focus-visible { outline: none; box-shadow: var(--tc-focus); }
/* earned: a faint slate wash with a soft frost sheen */
.tribe-badges__tile.is-earned {
  border-color: color-mix(in srgb, var(--tc-brand) 45%, transparent);
  background:
    linear-gradient(115deg, transparent 25%, rgb(var(--tc-frost) / calc(.06 * var(--tc-frost-k))) 46%, transparent 67%),
    linear-gradient(160deg, rgb(var(--tc-ink) / .01) 0%, rgb(var(--tc-ink) / .03) 52%, rgb(var(--tc-ink) / .015) 100%),
    var(--tc-white);
}
:root[data-theme="dark"] .tribe-badges__tile.is-earned {
  background:
    linear-gradient(115deg, transparent 28%, rgb(var(--tc-frost) / calc(.04 * var(--tc-frost-k))) 46%, transparent 64%),
    linear-gradient(160deg, rgb(var(--tc-ink) / .015) 0%, rgb(var(--tc-ink) / .04) 52%, rgb(var(--tc-ink) / .02) 100%),
    var(--tc-white);
}
/* nothing done toward it yet: greyed out until the first step */
.tribe-badges__tile.is-unstarted { opacity: .5; filter: grayscale(1); }
.tribe-badges__tile.is-unstarted:hover { opacity: .75; }
.tribe-badges__ring {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: var(--tc-space-1);
  padding: 3px;
  border-radius: 50%;
  background: conic-gradient(var(--tc-brand) calc(var(--p, 0) * 1%), rgb(var(--tc-ink) / .1) 0);
}
.tribe-badges__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--tc-white);
  font-size: 15px;
  color: rgb(var(--tc-ink) / .45);
}
.tribe-badges__tile.is-earned .tribe-badges__icon { background: var(--tc-brand-fill); color: var(--tc-text-on-brand); }
/* one line always: a tribe's custom name that is still too long ends in an ellipsis */
.tribe-badges__name { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--tc-text-2xs); font-weight: 600; line-height: 1.25; color: rgb(var(--tc-ink)); }
.tribe-badges__count { font-size: var(--tc-text-2xs); color: rgb(var(--tc-ink) / .55); font-variant-numeric: tabular-nums; }
.tribe-badges__tile.is-earned .tribe-badges__count { font-weight: 600; color: var(--tc-brand-strong); }
/* the bell row for a badge just earned: the badge icon on the tribe colour. Same
   chain as the row's .img-circle-header rule, so it wins by coming later */
.notifications-dropdown .notification-dropdown-item .notification .image .tribe-notice-badge__icon {
  display: flex; align-items: center; justify-content: center;
  background-color: var(--tc-brand-fill); color: var(--tc-text-on-brand);
}
.notifications-dropdown .notification-dropdown-item .notification .image .tribe-notice-badge__icon img { width: 60%; height: 60%; object-fit: contain; }

/* the badge popup: the ring big, then what it is, then two small facts */
.tribe-badgepop__card { position: relative; }
.tribe-badgepop__close { position: absolute; top: var(--tc-space-3); right: var(--tc-space-3); }
.tribe-badgepop { display: flex; flex-direction: column; align-items: center; padding: var(--tc-space-8) var(--tc-space-6) var(--tc-space-6); text-align: center; }
.tribe-badgepop__ring { width: 76px; height: 76px; padding: 4px; margin: 0; }
.tribe-badgepop__ring .tribe-badges__icon { font-size: 26px; }
.tribe-badgepop__ring.is-earned .tribe-badges__icon { background: var(--tc-brand-fill); color: var(--tc-text-on-brand); }
.tribe-badgepop__name { margin: var(--tc-space-4) 0 var(--tc-space-1); font-family: var(--tc-font-display); font-size: var(--tc-text-lg); font-weight: 600; line-height: 1.25; color: rgb(var(--tc-ink)); }
.tribe-badgepop__desc { margin: 0; font-size: var(--tc-text-sm); line-height: 1.5; color: rgb(var(--tc-ink) / .72); }
.tribe-badgepop__desc:empty { display: none; }
.tribe-badgepop__facts { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--tc-space-2); margin-top: var(--tc-space-5); }
.tribe-badgepop__fact {
  padding: 4px 10px;
  border-radius: var(--tc-radius-pill);
  background: rgb(var(--tc-ink) / .06);
  font-size: var(--tc-text-xs);
  font-weight: 600;
  color: rgb(var(--tc-ink) / .72);
  font-variant-numeric: tabular-nums;
}
.tribe-badgepop__fact.is-earned,
.tribe-badgepop__fact.is-reward { background: color-mix(in srgb, var(--tc-brand) 14%, transparent); color: var(--tc-brand-strong); }

/* BADGE ADMIN - one row per badge on /admin/badges: icon, fields, rule, switch */
.tribe-badgeadmin { display: flex; flex-direction: column; gap: var(--tc-space-3); }
.tribe-badgeadmin__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tc-space-4);
  padding: var(--tc-space-4);
  border: 1px solid rgb(var(--tc-ink) / .1);
  border-radius: var(--tc-radius-tile);
}
.tribe-badgeadmin__row.is-off { background: rgb(var(--tc-ink) / .03); opacity: .72; }
/* the switch is last in the row, at its right end */
.tribe-badgeadmin__toggle { display: flex; align-items: center; order: 1; cursor: pointer; }
/* the icon cell: the picker, or the tribe's uploaded image, with a text link under it */
.tribe-badgeadmin__icon { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; width: 64px; }
.tribe-badgeadmin__image { overflow: hidden; padding: 0; }
.tribe-badgeadmin__image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tribe-badgeadmin__icon .tribe-badgeadmin__image,
.tribe-badgeadmin__icon .tribe-badgeadmin__iconreset,
.tribe-badgeadmin__icon.has-image .tribe-iconpicker { display: none; }
.tribe-badgeadmin__icon.has-image .tribe-badgeadmin__image { display: inline-flex; }
.tribe-badgeadmin__icon.has-image .tribe-badgeadmin__iconreset { display: block; }
.tribe-badgeadmin__iconlink { padding: 0; border: 0; background: none; font-size: var(--tc-text-2xs); font-weight: 600; line-height: 1.3; color: var(--tc-link); cursor: pointer; }
.tribe-badgeadmin__iconlink:hover { text-decoration: underline; }
/* an uploaded icon fills the badge circle on Home */
.tribe-badges__icon img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.tribe-badges__icon > [hidden] { display: none; }
.tribe-badgeadmin__fields { display: flex; flex: 1 1 380px; flex-wrap: wrap; align-items: flex-start; gap: var(--tc-space-3); min-width: 0; }
.tribe-badgeadmin__fields > .tribe-field { flex: 2 1 180px; margin: 0; min-width: 0; }
.tribe-badgeadmin__fields > .tribe-badgeadmin__coins { flex: 0 0 110px; }
/* the rule column runs the row's full height, its lines centred in it */
.tribe-badgeadmin__rule { display: flex; flex: 0 0 180px; flex-direction: column; justify-content: center; align-self: stretch; padding-left: var(--tc-space-4); border-left: 1px solid rgb(var(--tc-ink) / .1); font-size: var(--tc-text-xs); line-height: 1.5; color: rgb(var(--tc-ink) / .55); }
.tribe-badgeadmin__rule strong { color: rgb(var(--tc-ink)); }
.tribe-badgeadmin__note { display: block; margin-top: var(--tc-space-1); font-weight: 600; color: var(--tc-warning-ink); }
@media (max-width: 767px) {
  /* phone: icon and switch share the first line, the fields and rule wrap below */
  .tribe-badgeadmin__icon { order: -1; }
  .tribe-badgeadmin__toggle { order: 0; margin-left: auto; }
  .tribe-badgeadmin__rule { flex: 1 1 100%; padding: var(--tc-space-3) 0 0; border-left: 0; border-top: 1px solid rgb(var(--tc-ink) / .1); }
}

/* JOIN PAGE - the join-logo uploader on /admin/invitepage: preview beside its actions and hints */
.tribe-joinlogo { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--tc-space-6); }
/* 3:1, the recommended upload ratio, on the join page's own panel colour (bodyInvitation.tpl) */
.tribe-joinlogo__preview {
  flex: none;
  width: 180px;
  height: 60px;
  border: 1px solid rgb(var(--tc-ink) / .12);
  border-radius: var(--tc-radius-control);
  background: #faf8f5 center / contain no-repeat;
  cursor: pointer;
  transition: border-color var(--tc-ease);
}
.tribe-joinlogo__preview:hover { border-color: var(--tc-brand); }
.tribe-joinlogo__meta { flex: 1 1 240px; min-width: 0; }
.tribe-joinlogo__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tc-space-2); margin-bottom: var(--tc-space-2); }
.tribe-joinlogo__meta .tribe-hint { margin: 0 0 var(--tc-space-1); line-height: 1.5; }
/* the public join address in the Invite Page header: wraps anywhere, on a faint ink wash */
.tribe-joinlogo__url { overflow-wrap: anywhere; word-break: break-all; background: rgb(var(--tc-ink) / .06); color: inherit; padding: 1px 4px; border-radius: 3px; }
/* phones: Upload / Remove keep a 44px tap target */
@media (max-width: 767px) {
  .tribe-joinlogo__actions .tribe-btn { min-height: 44px; }
}

/* POINT VALUES - /admin/points: a titled table per point type, its inputs sized to a number */
.tribe-pointvalues__title { margin-bottom: var(--tc-space-3); }
.tribe-pointvalue { width: 90px; margin: 0 auto; }
/* phones: rows stack (TABLE), so the inputs sit flush right like the read-only
   values, and the header's help text takes its own line above the two buttons */
@media (max-width: 767px) {
  .tribe-pointvalue { margin: 0 0 0 auto; }
  .tribe-pointvalues__head { flex-wrap: wrap; }
  .tribe-pointvalues__head .tribe-headtext { flex-basis: 100%; }
}

/* WEBSITE SIGNUP - /admin/signupform: the live form preview and the code snippets */
.tribe-signupembed__field { margin-top: var(--tc-space-6); }
.tribe-signupembed__preview { padding: var(--tc-space-7); border: 1px dashed rgb(var(--tc-ink) / .12); border-radius: var(--tc-radius-control); background: var(--tc-white); }
/* a snippet's label with its Copy button opposite */
.tribe-signupembed__head { display: flex; align-items: center; justify-content: space-between; gap: var(--tc-space-4); margin-bottom: var(--tc-space-2); }
.tribe-signupembed__head .tribe-label { margin: 0; }
.tribe-signupembed__code { min-height: 120px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ICON PICKER - a button that opens a grid of Font Awesome 4.2 icons */
.tribe-iconpicker { position: relative; flex: none; }
.tribe-iconpicker__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgb(var(--tc-ink) / .14);
  border-radius: var(--tc-radius-control);
  background: var(--tc-white);
  font-size: 16px;
  color: rgb(var(--tc-ink));
  cursor: pointer;
  transition: border-color var(--tc-ease), color var(--tc-ease);
}
.tribe-iconpicker__btn:hover { border-color: var(--tc-brand); color: var(--tc-brand-strong); }
.tribe-iconpicker__btn.is-static { cursor: default; }
.tribe-iconpicker__grid {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 50;
  display: none;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  width: 240px;
  max-height: 212px;
  padding: var(--tc-space-2);
  overflow-y: auto;
  border: 1px solid rgb(var(--tc-ink) / .14);
  border-radius: var(--tc-radius-control);
  background: var(--tc-white);
}
.tribe-iconpicker__grid.is-open { display: grid; }
.tribe-iconpicker__opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  border: 1px solid transparent;
  border-radius: var(--tc-radius-control);
  background: none;
  font-size: 15px;
  color: rgb(var(--tc-ink) / .55);
  cursor: pointer;
}
.tribe-iconpicker__opt:hover { background: rgb(var(--tc-ink) / .05); color: rgb(var(--tc-ink)); }
.tribe-iconpicker__opt.is-selected { border-color: var(--tc-brand); background: var(--tc-brand-soft); color: var(--tc-brand-strong); }

/* =============================================================================
                                  DEAL DEPOT
   =============================================================================
   The offer grid and the featured banner (/dealdepot), and the same tiles on
   /admin/dealdepotmanage with a claims strip under each (Deals & Ads admin).
     .tribe-deal-grid     the grid; every row the same height
     .tribe-deal-tile     one offer: inset logo on top, title + arrow below
     .tribe-deal-banner   the featured carousel
     .tribe-dealadmin     the admin wrapper: tile + claims + actions */
.tribe-deal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  grid-auto-rows: 1fr;
  gap: var(--tc-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.tribe-deal-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--tc-space-3);
  border: 1px solid rgb(var(--tc-ink) / .12);
  border-radius: var(--tc-radius-tile);
  background: var(--tc-white);
  color: rgb(var(--tc-ink));
  text-decoration: none;
}
.tribe-deal-tile:hover { border-color: rgb(var(--tc-ink) / .2); }
.tribe-deal-tile__media {
  position: relative;
  flex: 0 0 auto;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--tc-radius-media);
  background: var(--tc-white-3) center / cover no-repeat;
}
/* partner LOGOS, not photos: contain keeps the whole mark */
.tribe-deal-tile__media img { display: block; width: 100%; height: 100%; padding: var(--tc-space-5); box-sizing: border-box; object-fit: contain; }
.tribe-deal-tile__body { display: flex; flex: 1 1 auto; align-items: center; gap: var(--tc-space-3); padding: var(--tc-space-4) var(--tc-space-1) var(--tc-space-1); }
.tribe-deal-tile__title {
  display: -webkit-box;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  font-family: var(--tc-font-display);
  font-size: var(--tc-text-sm);
  font-weight: 600;
  line-height: 1.35;
  color: rgb(var(--tc-ink));
}
/* a static affordance: the whole tile is the one link */
.tribe-deal-tile__arrow {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--tc-radius-pill);
  background: rgb(var(--tc-ink) / .06);
  color: rgb(var(--tc-ink) / .72);
}
.tribe-deal-tile__arrow svg { width: 15px; height: 15px; }

/* featured carousel */
.tribe-deal-banner { position: relative; overflow: hidden; margin-bottom: var(--tc-space-6); border-radius: var(--tc-radius-tile); }
.tribe-deal-banner__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.tribe-deal-banner__track::-webkit-scrollbar { display: none; }
.tribe-deal-banner__slide { position: relative; flex: 0 0 100%; width: 100%; aspect-ratio: 16 / 6; scroll-snap-align: start; }
.tribe-deal-banner__cta { position: absolute; right: var(--tc-space-5); bottom: var(--tc-space-5); }
.tribe-deal-banner__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--tc-radius-pill);
  background: rgba(255, 255, 255, .8);
  color: #121418;
  font-size: var(--tc-text-md);
  transform: translateY(-50%);
  cursor: pointer;
}
.tribe-deal-banner__arrow--prev { left: var(--tc-space-3); }
.tribe-deal-banner__arrow--next { right: var(--tc-space-3); }
.tribe-deal-banner__dots { display: flex; justify-content: center; gap: var(--tc-space-2); margin-top: var(--tc-space-3); }
.tribe-deal-banner__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: var(--tc-radius-pill); background: rgb(var(--tc-ink) / .2); cursor: pointer; transition: background-color var(--tc-ease); }

/* admin: the member tile, then its claims and actions */
.tribe-dealadmin { display: flex; flex-direction: column; gap: var(--tc-space-2); min-width: 0; }
.tribe-dealadmin .tribe-deal-tile { height: auto; flex: 1; }
.tribe-dealadmin__foot { display: flex; align-items: center; gap: var(--tc-space-2); padding: 0 var(--tc-space-1); }
.tribe-dealadmin__claims { flex: 1; min-width: 0; font-size: var(--tc-text-xs); color: rgb(var(--tc-ink) / .55); }
.tribe-dealadmin__claims strong { color: rgb(var(--tc-ink)); font-variant-numeric: tabular-nums; }
.tribe-dealadmin__foot form { margin: 0; }
.tribe-dealadmin__switch label { display: flex; align-items: center; margin: 0; cursor: pointer; }
/* a switched-off deal stays listed, dimmed, so it can be switched back on */
.tribe-dealadmin.is-off .tribe-deal-tile { opacity: .5; filter: grayscale(1); }
.tribe-dealadmin__stats { margin-bottom: var(--tc-space-5); }
/* the "Saved" note beside the instant-save switches: fades in, then out */
.tribe-dealadmin__saved { flex: none; font-size: var(--tc-text-xs); font-weight: 500; color: var(--tc-success-ink); opacity: 0; transition: opacity .2s var(--tc-motion); }
.tribe-dealadmin__saved.is-shown { opacity: 1; }
.tribe-dealadmin__saved.is-error { color: var(--tc-danger); }

/* =============================================================================
                                  EVENT CARD
   =============================================================================
   One event as a card: image (or the brand wash) with a date chip, then the
   title and when. /events and /events/upcoming; components/events/eventCard.tpl.
     .tribe-evgrid    the grid of cards
     .tribe-evcard    one card (.is-past greys the image) */
.tribe-evgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--tc-space-3); }

.tribe-evcard {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgb(var(--tc-ink) / .12);
  border-radius: var(--tc-radius-tile);
  background: var(--tc-white);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--tc-ease);
}
.tribe-evcard:hover,
.tribe-evcard:focus-visible { border-color: rgb(var(--tc-ink) / .28); color: inherit; text-decoration: none; }

.tribe-evcard__media {
  position: relative;
  display: block;
  /* square: platform event art arrives square, uploads are cropped 1:1 */
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: var(--tc-white-2);
  background-image: linear-gradient(135deg, color-mix(in srgb, var(--tc-brand) 32%, transparent), color-mix(in srgb, var(--tc-brand) 8%, transparent));
}
.tribe-evcard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tribe-evcard.is-past .tribe-evcard__media { filter: grayscale(.45); opacity: .85; }

/* the date chip; the event page reuses it beside its title */
.tribe-evcard__date {
  position: absolute;
  top: var(--tc-space-3);
  left: var(--tc-space-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 42px;
  padding: 5px 7px;
  border-radius: var(--tc-radius-control);
  background: var(--tc-white);
  color: rgb(var(--tc-ink));
  line-height: 1;
}
.tribe-evcard__m { font-size: var(--tc-text-2xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tc-brand-strong); }
.tribe-evcard__d { margin-top: 3px; font-family: var(--tc-font-display); font-size: 16px; font-weight: 500; }

.tribe-evcard__body { display: flex; flex-direction: column; gap: 3px; padding: var(--tc-space-3) var(--tc-space-4) var(--tc-space-4); }
.tribe-evcard__title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: var(--tc-text-base);
  font-weight: 600;
  line-height: 1.3;
  color: rgb(var(--tc-ink));
}
.tribe-evcard__meta { font-size: var(--tc-text-xs); color: rgb(var(--tc-ink) / .55); }

/* =============================================================================
                                  EVENT PAGE
   =============================================================================
   /events/view/<id>: the hero (square art beside the facts, the RSVP with them),
   then About and Tickets in one column.
     .tribe-evpage__hero   art + date chip + title/when/host + the RSVP
     .tribe-rsvp           components/events/rsvpCard.tpl (also /event/<slug>)
     .tribe-evform         /events/add|edit: the form's cards */
.tribe-evpage__hero { overflow: hidden; }
/* event art is square: platform events arrive square, uploads are cropped 1:1 */
.tribe-evpage__media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--tc-white-2); }
.tribe-evpage__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 768px) {
  .tribe-evpage__hero.has-media { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); align-items: start; }
  .tribe-evpage__hero.has-media .tribe-evpage__media { border-radius: var(--tc-radius-media); margin: var(--tc-space-6) 0 var(--tc-space-6) var(--tc-space-6); }
}
.tribe-evpage__head { display: flex; align-items: flex-start; gap: var(--tc-space-4); padding: var(--tc-space-6); }
.tribe-evpage__date { position: static; flex: none; min-width: 54px; padding: 7px 10px; border: 1px solid rgb(var(--tc-ink) / .12); }
/* on the art: pinned in the top-left corner, clear of the edge */
.tribe-evpage__media .tribe-evpage__date { position: absolute; top: var(--tc-space-4); left: var(--tc-space-4); border: 0; }
.tribe-evpage__date .tribe-evcard__m { font-size: var(--tc-text-xs); }
.tribe-evpage__date .tribe-evcard__d { margin-top: 4px; font-size: 22px; }
.tribe-evpage__id { min-width: 0; }
.tribe-evpage__title {
  margin: 0;
  font-family: var(--tc-font-display);
  font-size: var(--tc-text-xl);
  font-weight: 700;
  line-height: 1.2;
  color: rgb(var(--tc-ink));
  overflow-wrap: anywhere;
}
.tribe-evpage__when { margin: var(--tc-space-1) 0 0; font-size: var(--tc-text-sm); color: rgb(var(--tc-ink) / .72); }
.tribe-evpage__host { margin: var(--tc-space-1) 0 0; font-size: var(--tc-text-xs); color: rgb(var(--tc-ink) / .55); }
.tribe-evpage__desc { font-size: var(--tc-text-sm); line-height: 1.65; color: rgb(var(--tc-ink) / .82); overflow-wrap: anywhere; }
.tribe-evpage__desc img { max-width: 100%; height: auto; }

/* RSVP: the button (or Sign up link) and one line of state, under the facts */
.tribe-rsvp { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tc-space-3); margin-top: var(--tc-space-5); }
.tribe-rsvp__form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tc-space-3); margin: 0; }
.tribe-rsvp__state { display: inline-flex; align-items: center; gap: var(--tc-space-1); font-size: var(--tc-text-sm); font-weight: 600; color: var(--tc-success-ink); }
.tribe-rsvp__state svg { width: 16px; height: 16px; }
.tribe-rsvp__note { flex: 1 1 100%; margin: 0; font-size: var(--tc-text-xs); color: rgb(var(--tc-ink) / .55); }
.tribe-rsvp > .tribe-btn + .tribe-rsvp__note { flex-basis: auto; }
/* on the list, not yet their own yes: the line reads before the two buttons */
.tribe-rsvp__note--lead { flex: 1 1 100%; font-size: var(--tc-text-sm); color: rgb(var(--tc-ink) / .72); }

/* fills the lane: a cap left a blank band where no right rail sits */
.tribe-evform { display: flex; flex-direction: column; gap: var(--tc-space-5); }
.tribe-evform > .tribe-card { margin: 0; }
.tribe-evform__opt { margin-left: var(--tc-space-1); font-size: var(--tc-text-xs); font-weight: 500; letter-spacing: 0; text-transform: none; color: rgb(var(--tc-ink) / .45); }
.tribe-evform__eb { margin-top: var(--tc-space-4); }
/* Details: start and end are one group with one hint; the help sits tight under it */
.tribe-evform__when { margin-bottom: var(--tc-space-5); }
.tribe-evform__when > .tribe-field-row { margin-bottom: var(--tc-space-2); }
.tribe-evform__when > .tribe-section-help,
.tribe-evform__signup > .tribe-section-help { margin: var(--tc-space-2) 0 0; }
.tribe-evform__signup { margin-top: var(--tc-space-5); }
/* the deal form: three image slots side by side, stacked on a phone */
.tribe-dealform__imgs { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--tc-space-4); }
.tribe-dealform__img { display: flex; flex-direction: column; gap: var(--tc-space-2); min-width: 0; }
.tribe-dealform__help { margin: var(--tc-space-3) 0 0; }

/* =============================================================================
                                  EVENT ROW
   =============================================================================
   A compact list of upcoming events. Was built twice under two names —
   .ev-stack-* on /events and .myhome-ev-* on /myhome — with the same values.
     .tribe-eventrow          the list
     .tribe-eventrow__item    one row (an <a>)
     .tribe-eventrow__date    the month/day block (.m and .d inside)
     .tribe-eventrow__thumb   an image instead of the date block
     .tribe-eventrow__body    title + meta
     .tribe-eventrow__chev    the trailing chevron */
.tribe-eventrow {
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-2);
}

.tribe-eventrow__item {
  display: flex;
  align-items: center;
  gap: var(--tc-space-6);
  padding: 10px 14px;
  border: 1px solid rgb(var(--tc-ink) / .07);
  border-radius: var(--tc-radius-tile);
  background: var(--tc-white);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--tc-ease);
}
/* a soft fill on hover - nothing moves */
.tribe-eventrow__item:hover,
.tribe-eventrow__item:focus {
  background: var(--tc-white-2);
  color: inherit;
  text-decoration: none;
}

.tribe-eventrow__date,
.tribe-eventrow__thumb {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border-radius: var(--tc-radius-control);
}
.tribe-eventrow__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--tc-brand-soft);
  color: var(--tc-brand-strong);
}
.tribe-eventrow__date .m {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.4;
  text-transform: uppercase;
}
.tribe-eventrow__date .d { font-size: 20px; font-weight: 800; line-height: 1; }

.tribe-eventrow__thumb {
  display: block;
  background: var(--tc-white-2);
  object-fit: cover;
}

.tribe-eventrow__body { flex: 1 1 auto; min-width: 0; }

.tribe-eventrow__title,
.tribe-eventrow__meta {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.tribe-eventrow__title { font-size: var(--tc-text-md); font-weight: 600; color: rgb(var(--tc-ink)); }
.tribe-eventrow__meta { margin-top: 2px; font-size: var(--tc-text-sm); color: rgb(var(--tc-ink) / .72); }

.tribe-eventrow__chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 22px;
  color: rgb(var(--tc-ink) / .72);
  font-size: var(--tc-text-lg);
  line-height: 1;
  transition: color var(--tc-ease);
}
.tribe-eventrow__item:hover .tribe-eventrow__chev { color: var(--tc-brand-strong); }

/* =============================================================================
                                  EMPTY STATE
   =============================================================================
   "Nothing here yet." Was written six times under six names — .myhome-empty,
   .evu-empty, .ev-empty, .bids-empty, .mev-empty, .me-empty — four of them
   with identical declarations and two with hardcoded hexes. */
.tribe-empty {
  padding: var(--tc-space-6);
  border: 1px solid rgb(var(--tc-ink) / .06);
  border-radius: var(--tc-radius-tile);
  background: var(--tc-white);
  box-shadow: none;
  color: rgb(var(--tc-ink) / .72);
  font-size: var(--tc-text-base);
  text-align: center;
}

/* =============================================================================
                                     PROSE
   =============================================================================
   Member-written body text — headings, lists, quotes, media. ONE definition,
   shared by the rendered post and the editor, so what you type is what you
   get. The editor gets the class from JS (quill.root.classList.add), because
   Quill creates .ql-editor itself and the markup cannot carry it. */
.tribe-prose {
  padding: 0;
  font-size: var(--tc-text-base);
  line-height: 1.55;
  color: rgb(var(--tc-ink));
  word-break: break-word;
}

.tribe-prose p { margin: 0 0 .75em; }
.tribe-prose p:last-child { margin-bottom: 0; }

.tribe-prose h2 {
  margin: 1.1em 0 .4em;
  font-size: var(--tc-text-lg);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.3px;
}
.tribe-prose h3 {
  margin: 1em 0 .35em;
  font-size: var(--tc-text-md);
  font-weight: 600;
  line-height: 1.3;
}
.tribe-prose h4 {
  margin: .9em 0 .3em;
  font-size: var(--tc-text-base);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgb(var(--tc-ink) / .72);
}

.tribe-prose ul,
.tribe-prose ol { margin: 0 0 .85em; padding-left: 1.4em; }
.tribe-prose li { margin-bottom: .25em; }

.tribe-prose blockquote {
  margin: .8em 0;
  padding: var(--tc-space-1) var(--tc-space-5);
  border-left: 3px solid rgb(var(--tc-ink) / .12);
  color: rgb(var(--tc-ink) / .72);
  font-style: italic;
}

/* a pull quote is the same quote, larger */
.tribe-prose blockquote.tc-pullquote {
  margin: var(--tc-space-7) 0;
  padding: var(--tc-space-6) var(--tc-space-7);
  border-left-width: 4px;
}
.tribe-prose blockquote.tc-pullquote p { margin: 0; }

.tribe-prose img {
  display: block;
  width: 100%;
  height: auto;
  margin: var(--tc-space-5) 0;
  border: 0;
  border-radius: var(--tc-radius-tile);
}

.tribe-prose iframe,
.tribe-prose .ql-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  margin: var(--tc-space-5) 0;
  border: 0;
  border-radius: var(--tc-radius-tile);
  background: #000;
}

/* the editor box itself — chrome, not prose.
   line-height is re-stated here because quill.snow.css sets .ql-editor
   { line-height: 1.42 }
at equal specificity and is linked from the body,
   so it loads after this sheet. (0,2,0) settles it. */
.tribe-ui .ql-editor {
  min-height: 280px;
  padding: var(--tc-space-6);
  line-height: 1.55;
}

/* quill.snow.css zeroes the margin on p / ol / blockquote / h1-h6 inside
   .ql-editor at (0,1,1) and loads after this sheet, so the prose spacing is
   restated here at (0,2,1). Values mirror .tribe-prose above. */
.tribe-ui .ql-editor p { margin: 0 0 .75em; }
.tribe-ui .ql-editor p:last-child { margin-bottom: 0; }
.tribe-ui .ql-editor h2 { margin: 1.1em 0 .4em; }
.tribe-ui .ql-editor h3 { margin: 1em 0 .35em; }
.tribe-ui .ql-editor h4 { margin: .9em 0 .3em; }
.tribe-ui .ql-editor ul,
.tribe-ui .ql-editor ol { margin: 0 0 .85em; padding-left: 1.4em; }
.tribe-ui .ql-editor blockquote { margin: .8em 0; padding: var(--tc-space-1) var(--tc-space-5); }

/* Reply becomes Cancel in place while its box is open. The X that used to sit
   in the reply row is gone; :has() keys off the container so no JS changed. */
.tribe-reply-cancel { display: none; }
.tribe-reply-cancel-text { display: none; }
.tribe-comment-node:has(> .tribe-reply-container:not(.hide)) .tribe-reply-cancel-text { display: inline-flex; }
/* Cancel carries the tribe's own colour so it is visibly a DIFFERENT action
   from Reply, not the same muted link with new words in it. */
.tribe-reply-link.tribe-reply-cancel-text { color: var(--tc-brand-strong, var(--tc-brand)); font-weight: 600; }
.tribe-reply-link.tribe-reply-cancel-text:hover { color: var(--tc-brand-strong, var(--tc-brand)); }

/* =============================================================================
                               POST ACTION BAR
   =============================================================================
   The likes / comments / share row under a post body. Its chips are
   .tribe-meta-item, the same component the feed rows use. */
/* The post's own actions, ruled off from the body so they read as a zone
   rather than as trailing stats. */
.tribe-post-actionbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--tc-space-1);
  /* space-8, not 4: on a post view these are the primary actions and they were
     crowding the end of the article body. */
  margin-top: var(--tc-space-8);
}

.tribe-post-action {
  display: inline-flex;
  align-items: center;
  gap: var(--tc-space-2);
  margin: 0;
  padding: var(--tc-space-2) var(--tc-space-3);
  border: 1px solid #00000010;
  border-radius: var(--tc-radius-control);
  background: #00000005;
  color: rgb(var(--tc-ink) / .72);
  font: inherit;
  font-size: var(--tc-text-xs);
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--tc-ease), color var(--tc-ease);
}
.tribe-post-action:hover {
  background: rgb(var(--tc-ink) / .06);
  color: rgb(var(--tc-ink));
  text-decoration: none;
}
.tribe-post-action:focus-visible { outline: none; box-shadow: var(--tc-focus); }
/* A label inside an action reads as the action. The count carries its own hook
   class for the likes script, which must not also restyle it. */
.tribe-post-action > span {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}
.tribe-post-action svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* liked is a state of the post, so it keeps its colour without hover */
.tribe-post-action.is-liked,
.tribe-post-action[aria-pressed="true"] { color: var(--tc-danger); }
.tribe-post-action.is-liked svg,
.tribe-post-action[aria-pressed="true"] svg { fill: currentColor; }

/* =============================================================================
                                      TABS
   =============================================================================
   A segmented control: the whole set sits in a tinted track and the active tab
   lifts out of it in white. Replaces the old underline tabs.
     .tribe-tabs   the track
     .tribe-tab    one tab (.is-active)
     .tribe-panes  wraps the panels; .tribe-pane.is-active is the visible one */
.tribe-tabs {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 2px;
  margin: 0 0 var(--tc-space-6);
  padding: 4px;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  border: 1px solid rgb(var(--tc-ink) / .08);
  border-radius: var(--tc-radius-control);
  background: rgb(var(--tc-ink) / .05);
  list-style: none;
}
.tribe-tabs::-webkit-scrollbar { display: none; }

.tribe-tab {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: var(--tc-space-2);
  padding: var(--tc-space-2) var(--tc-space-5);
  border: 0;
  border-radius: calc(var(--tc-radius-control) - 2px);
  background: none;
  color: rgb(var(--tc-ink) / .72);
  font-family: inherit;
  font-size: var(--tc-text-sm);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--tc-ease), color var(--tc-ease);
}

.tribe-tab:hover,
.tribe-tab:focus,
.tribe-tab:active { color: rgb(var(--tc-ink)); text-decoration: none; }
.tribe-tab:hover { background: rgb(var(--tc-ink) / .04); }

/* the active tab lifts out of the track */
.tribe-tab.is-active,
.tribe-tab.is-active:hover,
.tribe-tab.is-active:focus {
  background: var(--tc-white);
  color: rgb(var(--tc-ink));
  font-weight: 600;
  box-shadow: 0 1px 2px rgb(var(--tc-ink) / .10);
}

.tribe-tab i { font-size: var(--tc-text-sm); opacity: .8; }
.tribe-tab.is-active i { opacity: 1; }

/* a count beside a tab's label */
.tribe-tab .tribe-badge { margin-left: var(--tc-space-1); }

/* full width when the tabs should fill their row */
.tribe-tabs--fill { display: flex; }
.tribe-tabs--fill .tribe-tab { flex: 1 1 0; justify-content: center; }

.tribe-panes > .tribe-pane { display: none; }
.tribe-panes > .tribe-pane.is-active { display: block; }

/* =============================================================================
                                    SAVE BAR
   =============================================================================
   The floating "unsaved changes" bar. Any form with data-save-bar gets it.
   Anchored bottom-right rather than centred: the window is three columns, so a
   viewport-centred bar sits over the rail instead of over the content. */
.tribe-save-bar {
  display: flex;
  align-items: center;
  gap: var(--tc-space-6);
  /* absolute inside .tribe-window, offset past the right column so it floats
     over the lane rather than the viewport corner */
  position: absolute;
  right: calc(var(--tc-col-side) + 2 * var(--tc-space-3) + var(--tc-space-5));
  bottom: calc(var(--tc-space-3) + var(--tc-space-5));
  z-index: 1100;
  max-width: calc(100% - 2 * var(--tc-space-6));
  padding: var(--tc-space-3) var(--tc-space-3) var(--tc-space-3) var(--tc-space-6);
  border-radius: var(--tc-radius-control);
  background: rgb(18 20 24);
  color: #fff;
  box-shadow: 0 20px 40px rgba(0, 0, 0, .22), 0 4px 12px rgba(0, 0, 0, .12);
  font-family: var(--tc-font);
  font-size: var(--tc-text-base);
  letter-spacing: -.2px;
  /* parked below the fold until the form is dirty */
  transform: translateY(120%);
  opacity: 0;
  pointer-events: none;
  transition: transform .24s cubic-bezier(.22, 1, .36, 1), opacity .18s ease;
}

/* no right column — the lane runs to the shell's edge */
@media (min-width: 1024px) {
  .tribe-window--2col > .tribe-save-bar { right: calc(var(--tc-space-3) + var(--tc-space-5)); }
}

.tribe-save-bar.is-dirty {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.tribe-save-bar-text {
  font-size: var(--tc-text-sm);
  font-weight: 500;
  white-space: nowrap;
}

.tribe-save-bar-actions { display: flex; flex-shrink: 0; gap: 6px; }

.tribe-save-bar-btn {
  padding: 6px var(--tc-space-4);
  border: 0;
  border-radius: var(--tc-radius-control);
  font-family: inherit;
  font-size: var(--tc-text-sm);
  font-weight: 400;
  letter-spacing: -.2px;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}

.tribe-save-bar-cancel { background: transparent; color: rgba(255, 255, 255, .7); }
.tribe-save-bar-cancel:hover { background: rgba(255, 255, 255, .10); color: #fff; }
.tribe-save-bar-save { background: var(--tc-success); color: #fff; }
.tribe-save-bar-save:hover { background: color-mix(in srgb, var(--tc-success) 88%, #000); }
.tribe-save-bar-save:disabled,
.tribe-save-bar-save.is-saving { opacity: .7; cursor: progress; }

/* Below the desktop breakpoint the shell stops bounding the page, so the bar
   pins to the viewport instead of to .tribe-window. Stated HERE, after the base
   rule: the same declaration earlier in the sheet lost the tie on source order
   and left the bar absolutely positioned far below the fold. */
@media (max-width: 1023px) {
  .tribe-save-bar { position: fixed; right: var(--tc-space-4); bottom: var(--tc-space-4); }
}

/* on a phone it spans the width and clears the bottom bar */
@media (max-width: 767px) {
  .tribe-save-bar {
    position: fixed;
    left: var(--tc-space-4);
    right: var(--tc-space-4);
    bottom: calc(var(--tc-bn-h) + env(safe-area-inset-bottom, 0px) + var(--tc-space-4));
    max-width: none;
    gap: var(--tc-space-3);
    padding: var(--tc-space-2) var(--tc-space-2) var(--tc-space-2) var(--tc-space-5);
  }
  .tribe-save-bar-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* =============================================================================
                                  PUBLIC PAGES
   =============================================================================
   Login, password reset, onboarding and legal pages. They render through
   htmlheader.tpl and opt into this sheet with tribeSystem=true, which also puts
   .tribe-public on <html>.
     .tribe-auth        the centred auth screen   (__card, __message)
     .tribe-legal       terms / privacy / DMCA     (-page, -header, -card, -note) */

/* the legacy #page wrapper and its header chrome are not wanted on these */
.tribe-public #page { padding: 0 0 60px; }
/* the join door and onboarding cards fill the viewport themselves */
.tribe-public #page:has(.tribe-joindoor, .tribe-onboard) { padding: 0; }
/* that padding was the room kept for the absolute footer (externalFooter.tpl); here the
   footer follows the page instead of sitting on top of the card */
html.tribe-public:has(.tribe-joindoor, .tribe-onboard) .externalFooter { position: static; }
.tribe-public .profile-row,
.tribe-public .currency-row { visibility: hidden; }

.tribe-auth {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--tc-space-7);
  background: linear-gradient(145deg, #fdfcfa 0%, #faf6f1 50%, #f7f3ed 100%);
}

.tribe-auth__card {
  width: 100%;
  max-width: 440px;
  padding: var(--tc-space-10) var(--tc-space-8);
  border-radius: var(--tc-radius-tile);
  text-align: center;
}
/* the card centres its copy; a form inside it reads left */
.tribe-auth__card form { text-align: left; }

.tribe-auth__message {
  width: 100%;
  margin-bottom: var(--tc-space-7);
  padding: var(--tc-space-6);
  border-radius: var(--tc-radius-tile);
}
.tribe-auth__message h5 { margin: 0 0 var(--tc-space-1); font-size: 16px; font-weight: 700; }
.tribe-auth__message p { margin: 0; font-size: 14px; }
.tribe-auth__message.is-error {
  border: 1px solid color-mix(in srgb, var(--tc-danger) 35%, transparent);
  background-color: var(--tc-danger-soft);
  color: var(--tc-danger);
}
.tribe-auth__message.is-success {
  border: 1px solid color-mix(in srgb, var(--tc-success) 40%, transparent);
  background-color: var(--tc-success-soft);
  color: var(--tc-success-ink);
}

/* JOIN DOOR — the join door: brand panel left, form card right; stacks <=880px.
     .tribe-joindoor       the page     (__brand, __brand-inner, __form, __card)
     .tribe-joindoor__title / __sub / __divider / __invite / __alt / __help
     .tribe-onboard-logo   tribe mark or TribeCity wordmark (.is-tribe caps an upload) */
.tribe-joindoor {
  display: flex;
  min-height: 100vh;
  background-color: #faf8f5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.04'/%3E%3C/svg%3E");
}

.tribe-joindoor__brand {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  padding: 48px clamp(28px, 5vw, 60px);
  background-color: var(--tc-white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.05'/%3E%3C/svg%3E");
}
.tribe-joindoor__brand-inner { width: 100%; max-width: 440px; }
.tribe-joindoor__brand h2 {
  margin: 0 0 var(--tc-space-7);
  font-family: var(--tc-font-display);
  font-size: 44px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: rgb(var(--tc-ink));
  overflow-wrap: anywhere;
}
.tribe-joindoor__fancy { color: var(--tc-brand); }
.tribe-joindoor__brand p {
  max-width: 400px;
  margin: 0 0 var(--tc-space-7);
  font-size: 15px;
  line-height: 1.6;
  color: rgb(var(--tc-ink) / .72);
}

/* the "You're joining X" chip */
.tribe-joindoor__invite {
  display: inline-flex;
  align-items: center;
  gap: var(--tc-space-2);
  padding: var(--tc-space-2) var(--tc-space-4);
  border: 1px solid rgb(var(--tc-ink) / .12);
  border-radius: var(--tc-radius-control);
  background: var(--tc-white);
  font-size: var(--tc-text-sm);
  line-height: 1.4;
  color: rgb(var(--tc-ink));
  overflow-wrap: anywhere;
}
.tribe-joindoor__invite strong { font-weight: 700; color: var(--tc-brand-strong); }
.tribe-joindoor__emoji { flex: none; font-size: 18px; line-height: 1; }

.tribe-joindoor__form {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 40px clamp(28px, 5vw, 60px);
}
/* desktop: the soft halftone texture behind the card */
@media (min-width: 881px) {
  .tribe-joindoor__form { background: #faf8f5 url("/img/evlive-bg.png") center / cover no-repeat; }
}

.tribe-joindoor__card {
  width: 100%;
  max-width: 420px;
  margin: 0;
  padding: 34px 32px;
  border-radius: var(--tc-radius-panel);
}
.tribe-joindoor__card form { text-align: left; }

/* titles carry a tribe NAME, so one long token must wrap */
.tribe-joindoor__title {
  margin: 0 0 var(--tc-space-6);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  color: rgb(var(--tc-ink));
  overflow-wrap: anywhere;
}
.tribe-joindoor__title.is-lead { margin-bottom: var(--tc-space-7); }
.tribe-joindoor__sub {
  margin: calc(var(--tc-space-2) * -1) 0 var(--tc-space-6);
  font-size: var(--tc-text-sm);
  text-align: center;
  color: rgb(var(--tc-ink) / .55);
}
.tribe-joindoor__sub strong { font-weight: 700; color: rgb(var(--tc-ink)); }
.tribe-joindoor__divider { margin: 0 0 var(--tc-space-7); border: 0; border-top: 1px solid rgb(var(--tc-ink) / .12); }
.tribe-joindoor__alt { margin-top: var(--tc-space-6); font-size: var(--tc-text-xs); text-align: center; color: rgb(var(--tc-ink) / .55); }
.tribe-joindoor__alt a { font-weight: 600; text-decoration: none; color: var(--tc-brand-strong); }
.tribe-joindoor__help { display: flex; justify-content: center; margin: 0 0 var(--tc-space-6); font-size: var(--tc-text-sm); }
.tribe-joindoor__help a { font-weight: 500; text-decoration: none; color: rgb(var(--tc-ink) / .72); }
.tribe-joindoor__help a:hover { color: var(--tc-brand-strong); }

/* password rule, shown once the field is focused */
.tribe-pw-hint { display: none; margin-top: var(--tc-space-1); font-size: var(--tc-text-xs); color: rgb(var(--tc-ink) / .55); }
.tribe-pw-hint.show { display: block; }

/* uploads are trimmed to their ink on upload; this caps what is left */
.tribe-onboard-logo { display: block; width: 130px; max-width: 100%; height: auto; margin: 0 0 var(--tc-space-7); }
.tribe-onboard-logo.is-tribe { width: auto; max-width: min(100%, 260px); max-height: 64px; }

@media (max-width: 880px) {
  .tribe-joindoor { flex-direction: column; justify-content: center; }
  .tribe-joindoor__brand,
  .tribe-joindoor__form { flex: 0 0 auto; }
  /* the form sits right under the headline (staging f029b101) */
  .tribe-joindoor__brand { align-items: center; padding: 36px 24px 0; text-align: center; background: transparent; }
  .tribe-joindoor__brand-inner { max-width: 400px; }
  .tribe-joindoor__brand h2 { margin-bottom: 0; font-size: 30px; }
  .tribe-joindoor__invite { margin-top: 28px; }
  .tribe-joindoor__brand p { display: none; }
  .tribe-joindoor__brand .tribe-onboard-logo { margin: 0 auto var(--tc-space-5); }
  .tribe-joindoor__form { justify-content: center; padding: 20px 20px 44px; }
  .tribe-joindoor__card { margin: 0 auto; padding: 26px 22px; }
  .tribe-joindoor__title { font-size: 18px; }
}

/* ONBOARD — one centred card: the age step, the terms step, the closed door */
.tribe-onboard {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--tc-space-7) var(--tc-space-6);
  background-color: #faf8f5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.04'/%3E%3C/svg%3E");
}
.tribe-onboard__card {
  width: 100%;
  max-width: 440px;
  margin: 0;
  padding: var(--tc-space-10) var(--tc-space-8);
  border-radius: var(--tc-radius-panel);
  text-align: center;
}
.tribe-onboard__card--wide { max-width: 680px; padding: var(--tc-space-8); }
.tribe-onboard__card form { text-align: left; }
.tribe-onboard__card .tribe-onboard-logo { margin: 0 auto var(--tc-space-7); }
.tribe-onboard__title {
  margin: 0 0 var(--tc-space-1);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  color: rgb(var(--tc-ink));
  overflow-wrap: anywhere;
}
.tribe-onboard__sub { margin: 0 0 var(--tc-space-8); font-size: var(--tc-text-base); color: rgb(var(--tc-ink) / .55); }
.tribe-onboard__text { margin: 0 0 var(--tc-space-7); font-size: var(--tc-text-base); line-height: 1.6; color: rgb(var(--tc-ink) / .72); }
/* quiet sign-out, padded to a 44px tap target */
.tribe-onboard__signout {
  display: inline-block;
  padding: var(--tc-space-6) var(--tc-space-7);
  font-size: var(--tc-text-sm);
  text-decoration: underline;
  color: rgb(var(--tc-ink) / .55);
}

/* date of birth: three selects on one row */
.tribe-dob-row { display: flex; gap: var(--tc-space-2); }
.tribe-dob-row > select { flex: 1; min-width: 0; }
.tribe-dob-help { margin: var(--tc-space-2) 0 var(--tc-space-7); font-size: var(--tc-text-xs); line-height: 1.5; color: rgb(var(--tc-ink) / .55); }

/* TERMS PANEL — the full terms in a bounded box with its own scrollbar */
.tribe-terms-panel {
  min-height: 220px;
  max-height: 46vh;
  padding: var(--tc-space-6) var(--tc-space-7);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  border: 1px solid rgb(var(--tc-ink) / .12);
  border-radius: var(--tc-radius-tile);
  background: var(--tc-white);
  text-align: left;
}
.tribe-terms-panel h1 { margin: 0 0 var(--tc-space-1); font-size: 20px; }
.tribe-terms-panel h2 { margin: var(--tc-space-7) 0 var(--tc-space-1); font-size: 16px; }
.tribe-terms-panel h3 { margin: var(--tc-space-6) 0 var(--tc-space-1); font-size: 14px; }
.tribe-terms-panel p,
.tribe-terms-panel li { font-size: var(--tc-text-sm); line-height: 1.65; }
.tribe-terms-panel .tc-legal-updated { font-size: var(--tc-text-xs); text-align: left; color: rgb(var(--tc-ink) / .55); }
.tribe-terms-panel .tc-legal-note { padding: var(--tc-space-2) var(--tc-space-6); border-radius: var(--tc-radius-btn); background: #faf8f5; }
/* locked until the terms are scrolled; the hint under it says why */
.tribe-terms-accept { margin-top: var(--tc-space-7); }
.tribe-terms-accept .tribe-btn[disabled] { opacity: .5; cursor: not-allowed; pointer-events: none; }
.tribe-terms-hint { min-height: 1.2em; margin-top: var(--tc-space-2); font-size: var(--tc-text-xs); text-align: center; color: rgb(var(--tc-ink) / .55); }
.tribe-terms-foot { margin: var(--tc-space-7) 0 0; font-size: var(--tc-text-sm); font-weight: 300; color: rgb(var(--tc-ink) / .55); }
.tribe-terms-foot a { font-weight: 300; }

@media (max-width: 480px) {
  .tribe-onboard__card { padding: var(--tc-space-7) var(--tc-space-6); }
  .tribe-terms-panel { max-height: 40vh; padding: var(--tc-space-2) var(--tc-space-6); }
}

.tribe-legal-page { background: #faf8f5; min-height: 100vh; }

.tribe-legal-header { padding: 34px 20px 6px; text-align: center; }
.tribe-legal-header img { display: inline-block; width: 150px; max-width: 45%; }

.tribe-legal {
  max-width: 920px;
  margin: 0 auto;
  padding: 20px clamp(20px, 5vw, 40px) 80px;
  color: rgb(var(--tc-ink) / .72);
  font-size: 13px;
  line-height: 1.7;
}

.tribe-legal h1 {
  margin: 0 0 6px;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -.01em;
  text-align: center;
  color: rgb(var(--tc-ink));
}

.tribe-legal-updated {
  margin: 0 0 38px;
  font-size: 13px;
  text-align: center;
  color: rgb(var(--tc-ink) / .72);
}

.tribe-legal-card {
  padding: clamp(28px, 4vw, 52px);
  border: 1px solid rgb(var(--tc-ink) / .12);
  border-radius: var(--tc-radius-tile);
  background: #fff;
}
.tribe-legal-card > p:first-of-type { margin-top: 0; }

.tribe-legal h2 {
  margin: 30px 0 10px;
  padding-top: 26px;
  border-top: 1px solid rgb(var(--tc-ink) / .07);
  font-size: 18px;
  font-weight: 700;
  color: rgb(var(--tc-ink));
}
.tribe-legal h2:first-of-type { margin-top: 26px; }
/* clears the fixed header when a heading is jumped to by anchor */
.tribe-legal h2[id] { scroll-margin-top: 84px; }

.tribe-legal h3 {
  margin: 18px 0 6px;
  font-size: 14px;
  font-weight: 700;
  color: rgb(var(--tc-ink));
}

.tribe-legal p { margin: 0 0 14px; text-align: left; }
.tribe-legal ul,
.tribe-legal ol { margin: 0 0 14px; padding-left: 22px; }
.tribe-legal li { margin: 0 0 5px; }

.tribe-legal-note {
  margin: 0 0 14px;
  padding: 16px 18px;
  border: 1px solid rgb(var(--tc-ink) / .07);
  border-radius: var(--tc-radius-tile);
  background: #f7f4ef;
}

.tribe-legal-address { color: rgb(var(--tc-ink) / .72); }

/* =============================================================================
                                    INSIGHTS
   =============================================================================
   /admin/analytics.
     .tribe-insights        the page's column of cards
     .tribe-stats/.tribe-stat  headline numbers with a delta and a sparkline
     .tribe-trend           the SVG trend chart (components/insights/trendChart.tpl)
     .tribe-heat            weekday x hour activity grid
     .tribe-retain          retention cohort table
     .tribe-meter           a thin bar; used by .tribe-funnel and .tribe-breakdown
     .tribe-split           a two-part bar (new / returning)
     .tribe-todo            rows that link to the page that clears them
     .tribe-people          name rows with an avatar and a right-hand note */
.tribe-insights { display: flex; flex-direction: column; gap: var(--tc-space-4); }
.tribe-insights .tribe-card { margin: 0; }

/* two cards side by side, stacked below tablet */
.tribe-insights__split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tc-space-4); }
@media (max-width: 991px) { .tribe-insights__split { grid-template-columns: minmax(0, 1fr); } }

.tribe-insights__subhead { margin: var(--tc-space-7) 0 var(--tc-space-3); font-size: var(--tc-text-sm); font-weight: 600; color: rgb(var(--tc-ink) / .72); }
.tribe-insights__total { font-size: var(--tc-text-md); font-weight: 700; font-variant-numeric: tabular-nums; color: rgb(var(--tc-ink)); white-space: nowrap; }
.tribe-insights__foot { margin: 0; padding: var(--tc-space-3) var(--tc-space-6) var(--tc-space-5); }

/* range bar: presets and two dates on one row, wrapping on a narrow lane */
.tribe-insights__range { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--tc-space-4) var(--tc-space-6); }
.tribe-insights__range .tribe-tabs { margin: 0; }
.tribe-insights__range .tribe-hint { flex-basis: 100%; margin: 0; }
.tribe-insights__custom { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--tc-space-3); }
.tribe-insights__custom .tribe-field { margin: 0; }

/* a plain list of numbers under a chart: 3 across, 2 on a phone */
.tribe-insights__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tc-space-3) var(--tc-space-5); margin: var(--tc-space-6) 0 var(--tc-space-2); }
.tribe-insights__facts dt { font-size: var(--tc-text-xs); font-weight: 500; color: rgb(var(--tc-ink) / .55); }
.tribe-insights__facts dd { margin: 2px 0 0; font-size: var(--tc-text-md); font-weight: 700; font-variant-numeric: tabular-nums; color: rgb(var(--tc-ink)); }

/* stat tiles: 3 across (--4 for eight tiles), 2 below tablet, so rows always fill */
.tribe-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tc-space-3); }
.tribe-stats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tribe-stats--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tribe-insights__facts--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* the smaller numbers under the headline tiles: same card, a smaller figure */
.tribe-stats--facts { margin: var(--tc-space-3) 0 var(--tc-space-4); }
/* five numbers do not fit side by side until the lane is wide */
@media (max-width: 1279px) { .tribe-stats--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 991px) {
  .tribe-stats,
  .tribe-stats--4,
  .tribe-stats--5,
  .tribe-insights__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.tribe-stat { position: relative; min-width: 0; padding: var(--tc-space-4); border: 1px solid rgb(var(--tc-ink) / .07); border-radius: var(--tc-radius-tile); background: var(--tc-white-2); }
.tribe-stat--fact { padding: var(--tc-space-3) var(--tc-space-4); }
.tribe-stat--fact .tribe-stat__value { font-size: var(--tc-text-lg); }
/* a tile set straight on the page: the card surface and edge, not a grey well */
.tribe-stat--card { border-color: rgb(var(--tc-ink) / .12); background: var(--tc-white); }
.tribe-stat__label { margin: 0; font-size: var(--tc-text-xs); font-weight: 600; color: rgb(var(--tc-ink) / .55); }
.tribe-stat__value { margin: var(--tc-space-1) 0 0; font-family: var(--tc-font-display); font-size: calc(var(--tc-text-xl) * 1.25); font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; color: rgb(var(--tc-ink)); }
.tribe-stat__delta { margin: var(--tc-space-1) 0 0; font-size: var(--tc-text-xs); color: rgb(var(--tc-ink) / .55); }
.tribe-stat__delta--up { color: var(--tc-success-ink); font-weight: 600; }
.tribe-stat__delta--down { color: var(--tc-danger); font-weight: 600; }
.tribe-stat__sub { margin: 2px 0 0; font-size: var(--tc-text-xs); color: rgb(var(--tc-ink) / .55); }
.tribe-stat__spark { display: block; width: 100%; height: 28px; margin-top: var(--tc-space-3); overflow: visible; }
.tribe-stat__spark polyline { fill: none; stroke: var(--tc-brand); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }

/* trend chart: the SVG stretches to the plot box; every label is HTML beside it */
.tribe-trend { margin: 0; }
.tribe-trend__legend { display: flex; flex-wrap: wrap; gap: var(--tc-space-2) var(--tc-space-5); margin: 0 0 var(--tc-space-4); font-size: var(--tc-text-xs); color: rgb(var(--tc-ink) / .62); }
.tribe-trend__key { display: inline-flex; align-items: center; gap: var(--tc-space-2); }
.tribe-trend__key::before { content: ""; width: 16px; height: 0; border-top: 2px solid var(--tc-brand); }
.tribe-trend__key--prev::before { border-top: 2px dashed rgb(var(--tc-ink) / .38); }
.tribe-trend__key--avg::before { border-top: 2px dotted rgb(var(--tc-ink) / .75); }
.tribe-trend__key--weekend::before { height: 10px; border: 0; background: rgb(var(--tc-ink) / .06); }

.tribe-trend__body { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 220px auto; column-gap: var(--tc-space-3); }
.tribe-trend--compact .tribe-trend__body { grid-template-rows: 120px auto; }
.tribe-trend__y { position: relative; min-width: 24px; font-size: var(--tc-text-2xs); color: rgb(var(--tc-ink) / .55); text-align: right; font-variant-numeric: tabular-nums; }
.tribe-trend__y span { position: absolute; right: 0; transform: translateY(50%); line-height: 1; }
.tribe-trend__plot { position: relative; min-width: 0; touch-action: pan-y; cursor: crosshair; }
.tribe-trend__plot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.tribe-trend__x { position: relative; grid-column: 2; height: 22px; margin-top: var(--tc-space-2); font-size: var(--tc-text-2xs); color: rgb(var(--tc-ink) / .55); }
.tribe-trend__x span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.tribe-trend__x span:first-child { transform: none; }
.tribe-trend__x span:last-child { transform: translateX(-100%); }

.tribe-trend__weekend { fill: rgb(var(--tc-ink) / .035); }
.tribe-trend__grid { stroke: rgb(var(--tc-ink) / .08); stroke-width: 1; vector-effect: non-scaling-stroke; }
.tribe-trend__area { fill: var(--tc-brand); fill-opacity: .16; }
.tribe-trend__line,
.tribe-trend__prev,
.tribe-trend__avg { fill: none; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.tribe-trend__line { stroke: var(--tc-brand); stroke-width: 2.5; }
.tribe-trend__prev { stroke: rgb(var(--tc-ink) / .38); stroke-width: 1.5; stroke-dasharray: 5 4; }
.tribe-trend__avg { stroke: rgb(var(--tc-ink) / .75); stroke-width: 1.5; stroke-dasharray: 1 4; }

/* hover readout (components/insights/trendChart.script.tpl) */
.tribe-trend__guide { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px solid rgb(var(--tc-ink) / .25); pointer-events: none; }
.tribe-trend__dot { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border: 2px solid var(--tc-white); border-radius: 50%; background: var(--tc-brand); box-shadow: 0 0 0 1px var(--tc-brand); pointer-events: none; }
.tribe-trend__tip { position: absolute; top: -6px; z-index: 2; min-width: 150px; padding: var(--tc-space-2) var(--tc-space-3); transform: translate(-50%, -100%); border-radius: var(--tc-radius-control); background: rgb(var(--tc-ink)); color: var(--tc-white); font-size: var(--tc-text-xs); line-height: 1.45; white-space: nowrap; pointer-events: none; box-shadow: var(--tc-shadow); }
.tribe-trend__tip-date { opacity: .72; }
.tribe-trend__tip-value { font-size: var(--tc-text-base); font-weight: 700; }

/* weekday x hour grid */
.tribe-heat { display: grid; grid-template-columns: 30px repeat(24, minmax(0, 1fr)); gap: 3px; align-items: center; }
.tribe-heat__hour { font-size: var(--tc-text-2xs); color: rgb(var(--tc-ink) / .55); white-space: nowrap; }
.tribe-heat__day { font-size: var(--tc-text-xs); font-weight: 600; color: rgb(var(--tc-ink) / .62); }
.tribe-heat__cell { aspect-ratio: 1; border-radius: 3px; background: rgb(var(--tc-ink) / .05); }
.tribe-heat__cell--l1,
.tribe-heat__cell--l2,
.tribe-heat__cell--l3,
.tribe-heat__cell--l4 { background: var(--tc-brand); }
.tribe-heat__cell--l1 { opacity: .28; }
.tribe-heat__cell--l2 { opacity: .5; }
.tribe-heat__cell--l3 { opacity: .75; }

/* retention cohorts — a grid that stays a grid (scrolls on a phone), each cell shaded by its share */
.tribe-retain { width: 100%; min-width: 560px; border-collapse: collapse; font-size: var(--tc-text-sm); }
.tribe-retain th { padding: var(--tc-space-2) var(--tc-space-3); border-bottom: 1px solid rgb(var(--tc-ink) / .12); font-size: var(--tc-text-xs); font-weight: 600; color: rgb(var(--tc-ink) / .55); text-align: center; white-space: nowrap; }
.tribe-retain th:first-child,
.tribe-retain td:first-child { padding-left: var(--tc-space-6); text-align: left; white-space: nowrap; }
.tribe-retain td { padding: var(--tc-space-2) var(--tc-space-3); border-bottom: 1px solid rgb(var(--tc-ink) / .07); text-align: center; font-variant-numeric: tabular-nums; }
.tribe-retain tr:last-child td { border-bottom: 0; }
.tribe-retain__cell { font-variant-numeric: tabular-nums; text-align: center; }
.tribe-retain__cell--l1 { background: color-mix(in srgb, var(--tc-brand) 12%, transparent); }
.tribe-retain__cell--l2 { background: color-mix(in srgb, var(--tc-brand) 28%, transparent); }
.tribe-retain__cell--l3 { background: color-mix(in srgb, var(--tc-brand) 45%, transparent); }
.tribe-retain__cell--l4 { background: color-mix(in srgb, var(--tc-brand) 62%, transparent); font-weight: 700; }
.tribe-retain__cell--future { background: rgb(var(--tc-ink) / .03); }
/* without color-mix the shaded cells would lose their fill entirely — step on ink instead */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .tribe-retain__cell--l1 { background: rgb(var(--tc-ink) / .04); }
  .tribe-retain__cell--l2 { background: rgb(var(--tc-ink) / .08); }
  .tribe-retain__cell--l3 { background: rgb(var(--tc-ink) / .12); }
  .tribe-retain__cell--l4 { background: rgb(var(--tc-ink) / .16); }
}

/* labelled bars, biggest first */
.tribe-breakdown { display: flex; flex-direction: column; gap: var(--tc-space-3); margin: 0; padding: 0; list-style: none; }
.tribe-breakdown__head { display: flex; justify-content: space-between; gap: var(--tc-space-3); font-size: var(--tc-text-sm); font-variant-numeric: tabular-nums; }
.tribe-breakdown__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* a thin bar, filled to a share */
.tribe-meter { height: 8px; margin-top: var(--tc-space-1); overflow: hidden; border-radius: var(--tc-radius-pill); background: rgb(var(--tc-ink) / .07); }
.tribe-meter__fill { height: 100%; border-radius: inherit; background: var(--tc-brand); }

/* two-part bar: new members, then everyone else */
.tribe-split { display: flex; height: 14px; overflow: hidden; border-radius: var(--tc-radius-pill); background: rgb(var(--tc-ink) / .07); }
.tribe-split__new { background: var(--tc-brand); }
.tribe-split__returning { background: rgb(var(--tc-ink) / .22); }
.tribe-split__swatch { display: inline-block; width: 10px; height: 10px; margin-right: var(--tc-space-2); border-radius: 2px; background: rgb(var(--tc-ink) / .22); vertical-align: -1px; }
.tribe-split__swatch--new { background: var(--tc-brand); }

/* phone: a shorter plot, a tighter grid — after the rules it overrides */
@media (max-width: 600px) {
  .tribe-trend__body { grid-template-rows: 170px auto; }
  .tribe-heat { gap: 2px; grid-template-columns: 26px repeat(24, minmax(0, 1fr)); }
}

/* needs-you rows */
.tribe-todo { margin: 0; padding: 0; list-style: none; }
.tribe-todo > li + li { border-top: 1px solid rgb(var(--tc-ink) / .07); }
.tribe-todo__row { display: flex; align-items: center; gap: var(--tc-space-4); padding: var(--tc-space-3) 0; color: rgb(var(--tc-ink)); text-decoration: none; }
.tribe-todo__row:hover,
.tribe-todo__row:focus { color: rgb(var(--tc-ink)); text-decoration: none; }
.tribe-todo__row:hover .tribe-todo__action { text-decoration: underline; }
.tribe-todo__count { flex: 0 0 auto; min-width: 40px; padding: var(--tc-space-1) var(--tc-space-2); border-radius: var(--tc-radius-pill); background: var(--tc-brand-fill); color: var(--tc-text-on-brand); font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; }
.tribe-todo__label { flex: 1 1 auto; min-width: 0; }
.tribe-todo__action { flex: 0 0 auto; font-size: var(--tc-text-sm); font-weight: 600; color: var(--tc-link); white-space: nowrap; }

/* funnel */
.tribe-funnel { display: flex; flex-direction: column; gap: var(--tc-space-3); margin: 0; padding: 0; list-style: none; }
.tribe-funnel__head { display: flex; justify-content: space-between; gap: var(--tc-space-3); font-size: var(--tc-text-sm); }
.tribe-funnel__pct { font-weight: 500; color: rgb(var(--tc-ink) / .55); }

/* people rows */
.tribe-people { margin: 0; padding: 0; list-style: none; }
.tribe-people > li + li { border-top: 1px solid rgb(var(--tc-ink) / .07); }
.tribe-people__row { display: flex; align-items: center; gap: var(--tc-space-3); min-width: 0; padding: var(--tc-space-2) 0; }
td > .tribe-people__row { padding: 0; }
.tribe-people__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: rgb(var(--tc-ink)); }
.tribe-people__meta { flex: 0 1 auto; font-size: var(--tc-text-xs); color: rgb(var(--tc-ink) / .55); text-align: right; }

/* --stack: the note sits under the name (long titles, e.g. top posts) */
.tribe-people--stack > .tribe-people__row { flex-wrap: wrap; row-gap: 2px; }
.tribe-people--stack .tribe-people__name { flex-basis: 100%; }
.tribe-people--stack .tribe-people__meta { text-align: left; }

/* =============================================================================
                                   MESSAGES
   =============================================================================
   /messages (bodyMessages.tpl + tcmessages.js). The inbox layout and the parts
   that exist nowhere else: conversation rows, message bubbles, typing dots,
   presence. Header, buttons, tabs, menus, popups, chips and the composer are
   the shared components. Moved here from the template (plan item 8). */

/* ── Layout ── */
.tc-messages {
  display: flex;
  height: calc(100vh - 160px);
  height: calc(100dvh - 160px);
  min-height: 420px;
  overflow: hidden;
  background: var(--tc-white);
}
.tc-messages-list {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 340px;
  min-height: 0;
  border-right: 1px solid rgb(var(--tc-ink) / .12);
}
.tc-messages-thread { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; }
/* Both columns carry the standard .tribe-page-header as a fixed row. Each keeps
   only its OUTER top corner: the frosted header escapes the lane's rounded clip */
.tc-messages .tribe-page-header { position: static; flex-shrink: 0; border-radius: 0; }
@media (min-width: 1024px) {
  .tc-messages .tc-messages-list > .tribe-page-header { border-top-left-radius: calc(var(--tc-radius-panel) - 1px); }
  .tc-messages .tc-messages-thread > .tribe-page-header { border-top-right-radius: calc(var(--tc-radius-panel) - 1px); }
}

/* Thread header: back, avatar, name + presence, actions. */
.tc-thread-peer { display: flex; align-items: center; gap: var(--tc-space-3); flex: 1; min-width: 0; }
.tc-thread-peer-info { min-width: 0; }
.tc-thread-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* "Select a conversation" is a prompt, not a heading. */
.tc-thread-name.is-placeholder {
  font-family: var(--tc-font);
  font-size: var(--tc-text-sm);
  font-weight: 500;
  letter-spacing: 0;
  color: rgb(var(--tc-ink) / .55);
}
.tc-thread-presence { font-size: var(--tc-text-xs); line-height: 1.2; color: rgb(var(--tc-ink) / .55); }
.tc-thread-presence.online { color: var(--tc-success-ink); }
.tc-thread-actions { display: flex; align-items: center; gap: var(--tc-space-1); flex-shrink: 0; }
.tc-thread-actions.hide { display: none; }

/* ── Avatars (photo or placeholder, background-image set by JS) + presence ── */
.tc-convo-avatar,
.tc-thread-peer-avatar,
.tc-pool-avatar {
  position: relative;
  display: block;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgb(var(--tc-ink) / .06) center / cover no-repeat;
}
.tc-convo-avatar { width: 36px; height: 36px; }
.tc-thread-peer-avatar { display: none; width: 32px; height: 32px; }
.tc-thread-peer-avatar.show { display: block; }
.tc-pool-avatar { width: 28px; height: 28px; }
.tc-presence-dot {
  position: absolute; right: -1px; bottom: -1px;
  display: none;
  width: 12px; height: 12px;
  border: 2px solid var(--tc-white);
  border-radius: 50%;
  background: var(--tc-success);
}
.tc-convo-avatar.is-online .tc-presence-dot,
.tc-thread-peer-avatar.is-online .tc-presence-dot { display: block; }
/* header dot only — the list is rebuilt every poll, which would restart it */
.tc-thread-peer-avatar.is-online .tc-presence-dot { animation: tc-presence-pulse 2.2s infinite; }
@keyframes tc-presence-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tc-success) 45%, transparent); }
  70%  { box-shadow: 0 0 0 5px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* group: two stacked photos + a member count */
.tc-avatar-stack { overflow: visible; background: transparent; }
.tc-avatar-stack .tc-stack-av {
  position: absolute;
  width: 24px; height: 24px;
  border: 2px solid var(--tc-white);
  border-radius: 50%;
  background: rgb(var(--tc-ink) / .06) center / cover no-repeat;
}
.tc-avatar-stack .tc-stack-av:nth-child(1) { top: 0; left: 0; z-index: 1; }
.tc-avatar-stack .tc-stack-av:nth-child(2) { right: 0; bottom: 0; z-index: 2; }
.tc-avatar-stack .tc-stack-count {
  position: absolute; right: -3px; bottom: -3px; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 3px;
  border: 1.5px solid var(--tc-white);
  border-radius: var(--tc-radius-pill);
  background: var(--tc-brand-fill);
  color: var(--tc-text-on-brand);
  font-size: 9px; font-weight: 700; line-height: 1;
}
.tc-thread-peer-avatar.tc-avatar-stack .tc-stack-av { width: 21px; height: 21px; }

/* ── Conversation list ── */
.tc-convo-tabs { margin: var(--tc-space-3) var(--tc-space-3) var(--tc-space-2); }
.tc-convo-list {
  display: flex; flex-direction: column; gap: var(--tc-space-2);
  flex: 1; min-height: 0;
  margin: 0; padding: var(--tc-space-1) var(--tc-space-3) var(--tc-space-3);
  list-style: none;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
/* one card per conversation; hover and the open one fill inside the card */
.tc-convo-item {
  display: flex; flex-shrink: 0; align-items: center; gap: var(--tc-space-3);
  padding: var(--tc-space-3);
  border: 1px solid rgb(var(--tc-ink) / .08);
  border-radius: var(--tc-radius-control);
  cursor: pointer;
  transition: background-color var(--tc-ease), border-color var(--tc-ease);
}
.tc-convo-item:hover { background: rgb(var(--tc-ink) / .04); }
/* the open conversation: a soft brand fill */
.tc-convo-item.active { border-color: transparent; background: var(--tc-brand-soft); }
.tc-convo-body { flex: 1; min-width: 0; }
.tc-convo-row1 { display: flex; align-items: baseline; gap: var(--tc-space-2); }
.tc-convo-row2 { display: flex; align-items: center; gap: var(--tc-space-2); margin-top: 2px; }
.tc-convo-name {
  flex: 1; min-width: 0;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: var(--tc-text-sm); font-weight: 600; color: rgb(var(--tc-ink));
}
.tc-convo-time { flex-shrink: 0; font-size: var(--tc-text-xs); color: rgb(var(--tc-ink) / .55); }
.tc-convo-last {
  flex: 1; min-width: 0;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: var(--tc-text-xs); color: rgb(var(--tc-ink) / .55);
}
.tc-convo-last.is-typing { font-style: italic; }
.tc-convo-item.unread .tc-convo-name,
.tc-convo-item.unread .tc-convo-last { font-weight: 700; color: rgb(var(--tc-ink)); }
.tc-convo-more { flex-shrink: 0; padding: var(--tc-space-1) 0; list-style: none; }
.tc-convo-empty { flex-shrink: 0; padding: var(--tc-space-5); text-align: center; color: rgb(var(--tc-ink) / .55); font-size: var(--tc-text-sm); }

/* create button pinned under the list */
.tc-list-footer { flex-shrink: 0; padding: var(--tc-space-3); border-top: 1px solid rgb(var(--tc-ink) / .07); }
.tc-create-btn { width: 100%; height: 42px; }

/* ── Thread ── */
.tc-thread-scroller {
  display: flex; flex-direction: column; gap: 2px;
  flex: 1; min-height: 0;
  padding: var(--tc-space-5);
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  background: var(--tc-white-2);
}
.tc-thread-empty { margin: auto; text-align: center; font-size: var(--tc-text-sm); color: rgb(var(--tc-ink) / .55); }

/* the date, with a hairline running out to each side of the thread */
.tc-day-divider {
  display: flex; flex-shrink: 0; align-items: center; gap: var(--tc-space-3);
  margin: var(--tc-space-3) 2px 6px;
  font-size: var(--tc-text-xs); font-weight: 600; color: rgb(var(--tc-ink) / .55);
}
.tc-day-divider::before,
.tc-day-divider::after { content: ''; flex: 1; height: 1px; background: rgb(var(--tc-ink) / .12); }
.tc-unread-divider {
  display: flex; align-items: center; gap: var(--tc-space-3);
  margin: var(--tc-space-3) 2px;
  color: var(--tc-danger);
  font-size: var(--tc-text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
}
.tc-unread-divider::before,
.tc-unread-divider::after { content: ''; flex: 1; height: 1px; background: currentColor; opacity: .35; }

/* scroll-back row, first child of the scroller */
.tc-thread-older { flex-shrink: 0; margin: 2px 0 var(--tc-space-2); text-align: center; }
.tc-thread-older-end { font-size: var(--tc-text-xs); font-style: italic; color: rgb(var(--tc-ink) / .45); }

/* messages */
.tc-msg { max-width: 72%; }
.tc-msg.starts-run { margin-top: 6px; }
.tc-msg:first-child { margin-top: 0; }
.tc-msg-in { display: flex; align-items: flex-start; gap: var(--tc-space-2); align-self: flex-start; }
.tc-msg-out { align-self: flex-end; }
.tc-msg-avatar { flex: 0 0 auto; --tc-av: 24px; }
.tc-msg-avatar img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: rgb(var(--tc-ink) / .06); }
.tc-msg-content { position: relative; flex: 1 1 auto; min-width: 0; }
.tc-msg-sender { margin: 0 4px 2px; font-size: var(--tc-text-xs); color: rgb(var(--tc-ink) / .55); }
.tc-msg-bubble {
  padding: var(--tc-space-2) var(--tc-space-3);
  border: 1px solid rgb(var(--tc-ink) / .12);
  border-radius: 16px;
  background: var(--tc-white);
  color: rgb(var(--tc-ink));
  font-size: var(--tc-text-sm);
  line-height: 1.45;
  white-space: pre-wrap; word-wrap: break-word;
}
.tc-msg-out .tc-msg-bubble { border-color: transparent; background: var(--tc-brand-fill); color: var(--tc-text-on-brand); }
.tc-msg-bubble img,
.tc-msg-bubble video,
.tc-msg-bubble iframe { display: block; max-width: 100%; margin: 4px 0; border: 0; border-radius: var(--tc-radius-media); }
.tc-msg-bubble iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.tc-msg-meta { display: flex; align-items: center; gap: var(--tc-space-2); margin: 2px 4px 0; font-size: var(--tc-text-2xs); color: rgb(var(--tc-ink) / .55); }
.tc-msg-out .tc-msg-meta { justify-content: flex-end; }
.tc-msg-meta.is-status-only { margin-top: 2px; }
.tc-msg-status { font-size: var(--tc-text-2xs); font-weight: 600; white-space: nowrap; color: rgb(var(--tc-ink) / .55); }
.tc-msg-status.is-seen { color: rgb(var(--tc-ink)); }

/* options (three dots) beside every inbound bubble: always there, never
   hover-only, so it works the same with a mouse and a thumb */
.tc-msg-more {
  position: absolute; left: calc(100% + 2px); top: 4px;
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 0;
  border: 0; border-radius: var(--tc-radius-pill); background: none;
  color: rgb(var(--tc-ink) / .45);
  cursor: pointer;
  transition: background-color var(--tc-ease), color var(--tc-ease);
}
.tc-msg-more svg { display: block; width: 14px; height: 14px; }
.tc-msg-more:hover,
.tc-msg-more[aria-expanded="true"] { background: rgb(var(--tc-ink) / .07); color: rgb(var(--tc-ink)); }
.tc-msg-more:focus-visible { outline: none; box-shadow: var(--tc-focus); }
/* the one shared menu, a popover in the top layer so the scroller never clips it */
.tc-msg-menu[popover] { position: fixed; inset: auto; margin: 0; min-width: 180px; }

/* typing indicator */
.tc-typing { display: flex; align-items: center; gap: var(--tc-space-2); max-width: 72%; margin-top: 6px; align-self: flex-start; }
.tc-typing-name { font-size: var(--tc-text-xs); color: rgb(var(--tc-ink) / .55); }
.tc-typing-dots {
  display: flex; align-items: center; gap: 4px;
  padding: 10px 14px;
  border: 1px solid rgb(var(--tc-ink) / .12);
  border-radius: 14px;
  background: var(--tc-white);
}
.tc-typing-dots span {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgb(var(--tc-ink) / .45);
  animation: tc-typing-bounce 1.2s infinite ease-in-out;
}
.tc-typing-dots span:nth-child(2) { animation-delay: .15s; }
.tc-typing-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes tc-typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .45; }
  30% { transform: translateY(-4px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .tc-typing-dots span,
  .tc-thread-peer-avatar.is-online .tc-presence-dot { animation: none; }
  .tc-typing-dots span { opacity: .7; }
}

/* composer: .tribe-composer; the panel only gives it its row */
.tc-compose { flex-shrink: 0; padding: var(--tc-space-3); border-top: 1px solid rgb(var(--tc-ink) / .07); }
.tc-compose.hide { display: none; }

/* ── Settings menu (a .tribe-menu__list) ── */
.tc-settings-menu .tribe-menu__list { width: 280px; }
.tc-settings-section { padding: var(--tc-space-2) var(--tc-space-3); }
.tc-settings-section + .tc-settings-section { border-top: 1px solid rgb(var(--tc-ink) / .07); }
.tc-settings-section .tribe-check-row { align-items: center; justify-content: space-between; font-size: var(--tc-text-base); }
.tc-blocked-list { max-height: 180px; margin: 0; padding: 0; list-style: none; overflow-y: auto; }
.tc-blocked-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--tc-space-2); padding: 5px 0; font-size: var(--tc-text-sm); }
.tc-blocked-empty { color: rgb(var(--tc-ink) / .55); }

/* ── Picker (a .tribe-overlay) ── */
.tc-pool {
  max-height: 240px; margin: var(--tc-space-2) 0 0; padding: 0;
  list-style: none; overflow-y: auto;
  border: 1px solid rgb(var(--tc-ink) / .07);
  border-radius: var(--tc-radius-tile);
}
.tc-pool li { display: flex; align-items: center; gap: var(--tc-space-2); padding: var(--tc-space-2) var(--tc-space-3); cursor: pointer; }
.tc-pool li:hover { background: rgb(var(--tc-ink) / .05); }
.tc-pool li.selected { background: var(--tc-brand-soft); }
#groupTitle { margin-bottom: var(--tc-space-2); }

/* the back arrow only exists for the phone's one-pane view */
@media (min-width: 768px) {
  #backToList { display: none; }
}

/* From 1024 the lane is a fixed-height flex column that owns its scroll, so
   the panel fills it instead of measuring the viewport. */
@media (min-width: 1024px) {
  .tc-messages { flex: 1 1 auto; height: auto; min-height: 0; }
}

/* ── Phone: /messages is an app shell, not a page ──
   Scoped to html.messages (messagesPageController) so none of it reaches
   another route. The panel is fixed between the top bar and the bottom nav;
   the thread is the only scroll container, which pins the composer for free. */
@media (max-width: 767px) {
  /* floor for a stale-bytecode deploy where html.messages is not set yet */
  .tc-messages {
    height: calc(100dvh - var(--tc-topbar-h, 56px) - var(--tc-bn-h, 62px) - env(safe-area-inset-bottom, 0px) - 34px);
    min-height: 0;
  }
  html.messages .tribe-shell-main { padding: 0; }
  /* --tc-topbar-h is the shell's top bar; --tc-kb the keyboard (listener below) */
  html.messages .tc-messages {
    position: fixed;
    top: var(--tc-topbar-h, 56px);
    right: 0;
    bottom: calc(var(--tc-bn-h, 62px) + env(safe-area-inset-bottom, 0px) + var(--tc-kb, 0px));
    left: 0;
    height: auto;
    min-height: 0;
  }
  html.messages .tc-messages.thread-open {
    bottom: calc(var(--tc-bn-h, 62px) + env(safe-area-inset-bottom, 0px) + var(--tc-kb, 0px));
    padding-bottom: 0;
  }
  /* only release the nav's space where :has() can actually hide the nav */
  @supports selector(:has(*)) {
    html.messages .tc-messages.thread-open {
      bottom: var(--tc-kb, 0px);
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }
  }

  .tc-messages-list { width: 100%; border-right: 0; }
  .tc-messages.thread-open .tc-messages-list { display: none; }
  .tc-messages:not(.thread-open) .tc-messages-thread { display: none; }
}

/* =============================================================================
                              NOTIFICATIONS PAGE
   =============================================================================
   /notifications (bodyNotifications.tpl). The rows are the bell's own
   notifications/*.tpl markup; the bell lays them out under .notifications-dropdown
   (MENUS), and this lays the same rows out as a page list under .tribe-notifs.
     .tribe-notifs__tribelist  other tribes with unread activity, as links
     .tribe-notifs__list       the rows
     .tribe-notifs__type       a row's type icon, a tinted chip on its picture
     .tribe-notifs__empty      the nothing-here state
     .tribe-notifs__more       Load more
     .notifications-menu-foot  the bell's Clear all, under its list */

/* the script shows and hides parts with [hidden]; keep it winning over display */
.tribe-notifs [hidden] { display: none; }

/* other tribes: one wrapping row of pill links */
.tribe-notifs__tribelist {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tc-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.tribe-notifs__tribelist > li { min-width: 0; max-width: 100%; }

.tribe-notifs__tribe {
  display: inline-flex;
  align-items: center;
  gap: var(--tc-space-2);
  max-width: 100%;
  padding: var(--tc-space-1) var(--tc-space-3) var(--tc-space-1) var(--tc-space-1);
  border: 1px solid rgb(var(--tc-ink) / .12);
  border-radius: var(--tc-radius-pill);
  background: var(--tc-white);
  color: rgb(var(--tc-ink));
  font-size: var(--tc-text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--tc-ease);
}
.tribe-notifs__tribe:hover,
.tribe-notifs__tribe:focus-visible {
  background: rgb(var(--tc-ink) / .04);
  color: rgb(var(--tc-ink));
  text-decoration: none;
}
.tribe-notifs__tribe-img { background-position: center; background-size: cover; color: rgb(var(--tc-ink) / .55); }
.tribe-notifs__tribe-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* the list: rows split by hairlines */
.tribe-notifs__list { margin: 0; padding: 0; list-style: none; }
.tribe-notifs__list > li + li { border-top: 1px solid rgb(var(--tc-ink) / .07); }

/* a row — avatar, message, clear ✕ (main.css rules each row off in #ccc) */
.tribe-notifs__list .notification-dropdown-item { position: relative; border-bottom: 0; }

.tribe-notifs__list .notification {
  display: flex;
  align-items: center;
  gap: var(--tc-space-3);
  padding: var(--tc-space-3) var(--tc-space-2);
  border-radius: var(--tc-radius-control);
  color: rgb(var(--tc-ink));
  text-decoration: none;
  transition: background-color var(--tc-ease);
}
.tribe-notifs__list .notification:hover,
.tribe-notifs__list .notification:focus-visible {
  background: rgb(var(--tc-ink) / .04);
  color: rgb(var(--tc-ink));
  text-decoration: none;
}

.tribe-notifs__list .notification .image { position: relative; flex: 0 0 auto; width: 44px; }

/* main.css pads .img-circle-header out and rings it grey */
.tribe-notifs__list .notification .image .img-circle-header,
.tribe-notifs__list .notification .image .square-crop-image {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgb(var(--tc-ink) / .12);
  border-radius: var(--tc-radius-pill);
  background-color: rgb(var(--tc-ink) / .06);
  background-position: center;
  background-size: cover;
}

/* the earned-badge row: its icon on the tribe colour */
.tribe-notifs__list .notification .image .tribe-notice-badge__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--tc-brand-fill);
  color: var(--tc-text-on-brand);
}
.tribe-notifs__list .notification .image .tribe-notice-badge__icon img { width: 60%; height: 60%; object-fit: contain; }

/* the type chip: lower right of the picture, ringed in the card colour, tinted by kind */
.tribe-notifs__type {
  --tc-nt: rgb(var(--tc-ink) / .72);
  position: absolute;
  right: -5px;
  bottom: -5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 2px solid var(--tc-white);
  border-radius: var(--tc-radius-pill);
  background: color-mix(in srgb, var(--tc-nt) 16%, var(--tc-white));
  color: var(--tc-nt);
  font-size: var(--tc-text-2xs);
  line-height: 1;
}
.tribe-notifs__type--link    { --tc-nt: var(--tc-link); }
.tribe-notifs__type--danger  { --tc-nt: var(--tc-danger); }
.tribe-notifs__type--success { --tc-nt: var(--tc-success-ink); }
.tribe-notifs__type--warning { --tc-nt: var(--tc-warning-ink); }
/* the tribe colour pulled toward the ink, so it reads on either theme */
.tribe-notifs__type--brand   { --tc-nt: color-mix(in srgb, var(--tc-brand) 70%, rgb(var(--tc-ink))); }

.tribe-notifs__list .notification .message {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--tc-text-sm);
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.tribe-notifs__list .notification .message strong { font-weight: 600; color: rgb(var(--tc-ink)); }
.tribe-notifs__list .notification .message .date {
  margin-top: 2px;
  font-size: var(--tc-text-xs);
  color: rgb(var(--tc-ink) / .55);
}

/* clear ✕ — last in the row, always visible (a page has no hover on touch) */
.tribe-notifs__list .notification .clear-bt { flex: 0 0 auto; order: 5; }
.tribe-notifs__list .notification .clear-bt form { margin: 0; padding: 0; }
.tribe-notifs__list .notification .clear-bt .btn-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--tc-radius-pill);
  background: none;
  color: rgb(var(--tc-ink) / .55);
  font-size: var(--tc-text-base);
  transition: background-color var(--tc-ease), color var(--tc-ease);
}
.tribe-notifs__list .notification .clear-bt .btn-link:hover,
.tribe-notifs__list .notification .clear-bt .btn-link:focus-visible {
  background: rgb(var(--tc-ink) / .08);
  color: rgb(var(--tc-ink));
}

/* a row being cleared dims until the server answers */
.tribe-notifs__list .is-clearing { opacity: .4; pointer-events: none; }

/* rows that just arrived fade in (the MOTION fade) */
@media (prefers-reduced-motion: no-preference) {
  .tribe-notifs__list .is-new { animation: tribe-fade 320ms var(--tc-motion); }
}

/* loading, error and empty states */
.tribe-notifs__error {
  margin: 0;
  padding: var(--tc-space-6) 0;
  font-size: var(--tc-text-sm);
  text-align: center;
  color: rgb(var(--tc-ink) / .72);
}

.tribe-notifs__empty {
  padding: var(--tc-space-8) var(--tc-space-4);
  text-align: center;
  color: rgb(var(--tc-ink) / .72);
}
.tribe-notifs__empty > i {
  display: block;
  margin-bottom: var(--tc-space-3);
  font-size: 28px;
  line-height: 1;
  color: rgb(var(--tc-ink) / .45);
}
.tribe-notifs__empty-title { margin: 0; font-size: var(--tc-text-base); font-weight: 600; color: rgb(var(--tc-ink)); }

.tribe-notifs__more { display: flex; justify-content: center; padding-top: var(--tc-space-4); }

/* phones: a tighter row, and a 44px tap target on the clear ✕ */
@media (max-width: 767px) {
  .tribe-notifs__list .notification { gap: var(--tc-space-2); padding: var(--tc-space-3) 0; }
  .tribe-notifs__list .notification .clear-bt .btn-link { width: 44px; height: 44px; }
  .tribe-notifs__list .notification .image { width: 40px; }
  .tribe-notifs__list .notification .image .img-circle-header,
  .tribe-notifs__list .notification .image .square-crop-image { width: 40px; height: 40px; }
}

/* the bell's Clear all, ruled off under its list; the script hides it while the list is empty */
.notifications-dropdown .notifications-menu-foot {
  display: flex;
  justify-content: center;
  margin: var(--tc-space-1) 0 0;
  padding: var(--tc-space-2) var(--tc-space-3);
  border-top: 1px solid rgb(var(--tc-ink) / .07);
}
.notifications-dropdown .notifications-menu-foot[hidden] { display: none; }

/* =============================================================================
                                  MY PROFILE
   =============================================================================
   /hut/profile (bodyHutProfile.tpl) — Profile and Security tabs — and
   /hut/tribe-settings (bodyHutTribeSettings.tpl). The hero reuses the PROFILE
   PAGE .tribe-profile-pagehero; only the upload controls are added here. */

/* change-photo button on the hero avatar; its ring and fill come from .tribe-profile-pagehero__avatar */
.tribe-avatar-upload {
  position: relative;
  display: inline-block;
  padding: 0;
  overflow: hidden;
  border-radius: var(--tc-radius-pill);
  font: inherit;
  line-height: 0;
  cursor: pointer;
}
.tribe-avatar-upload-overlay {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--tc-space-1);
  padding: var(--tc-space-1) 0;
  /* photo scrim — stays dark in both themes */
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: var(--tc-text-2xs);
  font-weight: 600;
  opacity: 0;
  transition: opacity var(--tc-ease);
}
.tribe-avatar-upload:hover .tribe-avatar-upload-overlay,
.tribe-avatar-upload:focus-visible .tribe-avatar-upload-overlay { opacity: 1; }
/* touch has no hover, so the label shows at rest */
@media (max-width: 767px) {
  .tribe-avatar-upload-overlay { opacity: 1; }
}

/* hero cover: holds the "Change cover" button */
.tribe-myprofile-cover { position: relative; }
/* "Change cover" sits on the photo — scrim stays dark in both themes */
.tribe-myprofile-cover .tribe-myprofile-cover-btn {
  position: absolute;
  top: var(--tc-space-3);
  right: var(--tc-space-3);
  border-color: transparent;
  background: rgba(0, 0, 0, .55);
  color: #fff;
}
.tribe-myprofile-cover .tribe-myprofile-cover-btn:hover,
.tribe-myprofile-cover .tribe-myprofile-cover-btn:focus-visible { background: rgba(0, 0, 0, .7); color: #fff; }
/* the photo inside the hero avatar button: the ring is the button's, so the photo is the ring's inside */
.tribe-myprofile-avatar .tribe-avatar { --tc-av: 88px; border: 0; }
/* email + unconfirmed line under the hero name */
.tribe-myprofile-meta { display: flex; flex-wrap: wrap; gap: var(--tc-space-1) var(--tc-space-4); }
.tribe-myprofile-meta span { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .tribe-myprofile-avatar .tribe-avatar { --tc-av: 68px; }
  /* the word doesn't fit the smaller circle; the camera stays */
  .tribe-myprofile-avatar-word { display: none; }
}

/* /hut/account/Email lands on #notifications — clear the fixed top bar */
.tribe-myprofile-anchor { scroll-margin-top: calc(var(--tc-topbar-h, 56px) + var(--tc-space-4)); }
/* a link inside running text (My profile, Tribe settings): on a phone a full thumb target, lines unmoved */
@media (max-width: 767px) {
  .tribe-myprofile-textlink {
    display: inline-block;
    padding-block: calc((var(--tc-tap) - 1lh) / 2);
    margin-block: calc((1lh - var(--tc-tap)) / 2);
  }
}

/* inline success message */
.tribe-edit-success {
  margin-bottom: var(--tc-space-4);
  padding: var(--tc-space-3) var(--tc-space-5);
  border: 1px solid var(--tc-success);
  border-radius: var(--tc-radius-control);
  background: var(--tc-success-soft);
  color: var(--tc-success-ink);
  font-size: var(--tc-text-base);
}

/* notification-saved toast — fades, never slides; no shadow */
.tribe-toast {
  position: fixed;
  bottom: var(--tc-space-6);
  left: 50%;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: var(--tc-space-4);
  padding: var(--tc-space-3) var(--tc-space-5);
  overflow: hidden;
  border-radius: var(--tc-radius-tile);
  background: #1c1c1e;
  color: #fff;
  width: max-content;
  max-width: calc(100vw - 2 * var(--tc-space-4));
  font-size: var(--tc-text-sm);
  white-space: normal;
  opacity: 0;
  transform: translateX(-50%);
  pointer-events: none;
  transition: opacity var(--tc-ease);
}
.tribe-toast.is-visible { opacity: 1; pointer-events: auto; }
/* auto-dismiss bar */
.tribe-toast__bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  transform-origin: left;
  border-radius: 0 0 var(--tc-radius-tile) var(--tc-radius-tile);
  background: var(--tc-brand);
}
/* close button */
.tribe-toast__close {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, .55);
  font-size: var(--tc-text-lg);
  line-height: 1;
  cursor: pointer;
}
.tribe-toast__close:hover { color: #fff; }
/* reduced motion: no countdown bar */
@media (prefers-reduced-motion: reduce) {
  .tribe-toast__bar { display: none; }
}

/* intro line at the top of a card body */
.tribe-myprofile-lead { margin: 0 0 var(--tc-space-3); }

/* Account tab phone list: type picker + number + remove, one row each */
.tribe-phone-list { display: flex; flex-direction: column; gap: var(--tc-space-2); }
.tribe-phone-row { display: flex; align-items: center; gap: var(--tc-space-2); }
.tribe-phone-row select { flex: 0 0 118px; width: 118px; }
.tribe-phone-row input { flex: 1 1 auto; min-width: 0; }
/* remove-row button */
.tribe-phone-del {
  flex-shrink: 0;
  padding: 6px 8px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: rgb(var(--tc-ink) / .72);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.tribe-phone-del:hover { background: var(--tc-danger-soft); color: var(--tc-danger); }
/* dashed "Add phone" pill */
.tribe-phone-add {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 5px 12px;
  border: 1px dashed rgb(var(--tc-ink) / .12);
  border-radius: var(--tc-radius-pill);
  background: none;
  color: rgb(var(--tc-ink) / .72);
  font-family: var(--tc-font);
  font-size: 12.5px;
  cursor: pointer;
}
.tribe-phone-add .fa { font-size: 9px; }
.tribe-phone-add:hover { border-color: var(--tc-brand); color: var(--tc-brand); }
.tribe-phone-add[disabled] { opacity: .4; cursor: default; }
.tribe-phone-add[disabled]:hover { border-color: rgb(var(--tc-ink) / .12); color: rgb(var(--tc-ink) / .72); }

/* phone: the tabs share the strip's width, icons go */
@media (max-width: 767px) {
  .tribe-myprofile .tribe-tabs { display: flex; }
  .tribe-myprofile .tribe-tab { flex: 1 1 auto; justify-content: center; min-height: var(--tc-tap); padding: var(--tc-space-2); }
  .tribe-myprofile .tribe-tab i { display: none; }
}