/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════
   TRIBE PAGE (Leon 2026-09-15, mockup `pt-community-tribes (1).html`, "Tribe page" screen)
   A restyle layer over single-tribe-topic.php — the markup, ids and the 2,600 lines of inline JS are untouched, so every
   feature (feed, polls, GIFs, events engine, invites, reports, analytics) keeps working. Loads after tribe-discussion.css
   and tribe-styles.css and wins by order; !important only where the legacy sheets use it. Tokens only.
   States: visitor (.is-gated = Join gate over a blurred feed), member, admin (Manage · N pending).
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* Hero */
.pt-gh-hero { height: 200px !important; min-height: 0 !important; max-height: 200px; background-color: #3a3935; background-image: linear-gradient(160deg, #6E6C64, #2E2D2A); background-size: cover; background-position: center; border-bottom: 1px solid var(--pt-border-strong); border-radius: 0 !important; }
.pt-gh-hero-placeholder { display: none; }

/* Header */
.pt-gh-wrap { background: var(--pt-surface-dim); color: var(--pt-ink); }
.pt-gh-header { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; margin: 0 !important; padding: 0 !important; }
.pt-gh-inner-container { max-width: 1180px; margin: 0 auto; padding: 0 40px; }
.pt-gh-identity { display: flex; align-items: flex-start; gap: 16px; padding: 16px 0 0; }
.pt-gh-identity .pt-gh-avatar, .pt-gh-avatar-placeholder { width: 72px !important; height: 72px !important; margin-top: -44px !important; background: var(--pt-surface); border: 1px solid var(--pt-border-strong) !important; border-radius: 0 !important; object-fit: cover; box-shadow: none !important; flex: 0 0 auto; }
.pt-gh-avatar-placeholder { display: grid; place-items: center; }
.pt-gh-title-wrap { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pt-gh-title { margin: 0 !important; font-size: 24px !important; font-weight: 600 !important; letter-spacing: -.01em; line-height: 1.2; color: var(--pt-ink) !important; }
.pt-gh-title-link, .pt-gh-title-link:hover { color: var(--pt-ink) !important; text-decoration: none !important; }
.pt-gh-copy-link { background: var(--pt-surface) !important; border: 1px solid var(--pt-border-strong) !important; color: var(--pt-ink-2) !important; border-radius: 0 !important; width: 28px; height: 28px; display: inline-grid; place-items: center; padding: 0 !important; }
.pt-gh-meta-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 6px; }
.pt-gh-meta-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--pt-ink-2); }
.pt-gh-meta-left a { color: var(--pt-ink-2) !important; text-decoration: none; }
.pt-gh-meta-left a:hover { text-decoration: underline; }
.pt-gh-meta-sep { color: var(--pt-ink-3); }
.pt-gh-wrap .pt-mono { font-family: var(--pt-mono); font-variant-numeric: tabular-nums; }

/* Buttons — the one grammar */
.pt-gh-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-left: auto; }
.pt-gh-btn, .pt-gh-btn:hover, .pt-gh-btn:focus { display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; font: inherit; font-size: 13.5px !important; font-weight: 600 !important; line-height: 1.2; padding: 10px 16px !important; border: 1px solid var(--pt-border-strong) !important; background: var(--pt-surface) !important; color: var(--pt-ink) !important; text-decoration: none !important; cursor: pointer; border-radius: 0 !important; box-shadow: none !important; text-transform: none !important; letter-spacing: 0 !important; white-space: nowrap; }
.pt-gh-btn:hover { background: var(--pt-fill-control) !important; }
.pt-gh-btn--primary, .pt-gh-btn--primary:hover, .pt-gh-btn--primary:focus { background: var(--pt-ink) !important; color: #fff !important; border-color: var(--pt-ink) !important; }
.pt-gh-btn--primary:hover { background: #1f1f1f !important; }
.pt-gh-btn--joined, .pt-gh-btn--joined:hover { background: var(--pt-surface) !important; color: var(--pt-ink) !important; border-color: var(--pt-border-strong) !important; }
.pt-gh-btn.is-static { cursor: default; color: var(--pt-ink-2) !important; }
.pt-gh-btn-sub { font-weight: 400; opacity: .8; }
.pt-gh-btn svg { width: 14px; height: 14px; }
.pt-gh-joined-menu { border: 1px solid var(--pt-border-strong) !important; border-radius: 0 !important; box-shadow: 0 8px 24px rgba(0,0,0,.08) !important; background: var(--pt-surface) !important; }
.pt-gh-joined-item { font-size: 13px !important; color: var(--pt-ink) !important; border-radius: 0 !important; }
.pt-gh-joined-item.is-active { background: var(--pt-fill-control) !important; }
.pt-gh-joined-section { font-size: 11px; color: var(--pt-ink-3); text-transform: none !important; letter-spacing: 0 !important; }

/* Tabs — mockup .tabs: text with a 2px ink underline, counts in mono */
.pt-gh-nav { display: flex !important; align-items: center; gap: 26px !important; border-bottom: 1px solid var(--pt-border) !important; border-top: 0 !important; margin-top: 18px !important; padding: 0 !important; background: transparent !important; border-radius: 0 !important; box-shadow: none !important; overflow-x: auto; scrollbar-width: none; }
.pt-gh-nav::-webkit-scrollbar { display: none; }
.pt-gh-nav-item, .pt-gh-nav-item:hover { font-size: 14px !important; font-weight: 500 !important; color: var(--pt-ink-2) !important; padding: 10px 0 12px !important; margin: 0 0 -1px !important; border: 0 !important; border-bottom: 2px solid transparent !important; background: transparent !important; text-decoration: none !important; white-space: nowrap; border-radius: 0 !important; text-transform: none !important; letter-spacing: 0 !important; }
.pt-gh-nav-item:hover { color: var(--pt-ink) !important; }
.pt-gh-nav-item.is-active { color: var(--pt-ink) !important; font-weight: 600 !important; border-bottom-color: var(--pt-ink) !important; }
.pt-gh-nav-cnt { font-size: 11px; color: var(--pt-ink-3); margin-left: 5px; font-weight: 400; }
.pt-gh-nav-extras { margin-left: auto !important; display: flex; gap: 8px; align-items: center; }
.pt-gh-nav-icon-btn { width: 32px; height: 32px; border: 1px solid var(--pt-border-strong) !important; background: var(--pt-surface) !important; color: var(--pt-ink-2) !important; border-radius: 0 !important; display: inline-grid; place-items: center; }
.pt-gh-nav-dots-menu { border: 1px solid var(--pt-border-strong) !important; border-radius: 0 !important; background: var(--pt-surface) !important; box-shadow: 0 8px 24px rgba(0,0,0,.08) !important; }
.pt-nav-dots-item { font-size: 13px !important; color: var(--pt-ink) !important; border-radius: 0 !important; }
.pt-nav-dots-item--danger { color: var(--pt-red-deep) !important; }

/* Body: main + 340px sidebar */
.pt-gf-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) 340px !important; gap: 20px !important; max-width: 1180px; margin: 20px auto 40px !important; padding: 0 40px; align-items: start; }
.pt-gf-feed-col, .pt-gf-sidebar-col { min-width: 0; }

/* Sidebar widgets → mockup .card */
.pt-swb { background: var(--pt-surface) !important; border: 1px solid var(--pt-border-strong) !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 0 14px !important; padding: 0 !important; }
.pt-swb-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px !important; border-bottom: 1px solid var(--pt-border) !important; font-size: 15px !important; font-weight: 600 !important; color: var(--pt-ink) !important; background: transparent !important; text-transform: none !important; letter-spacing: 0 !important; border-radius: 0 !important; }
.pt-swb-body { padding: 12px 16px !important; font-size: 13.5px; line-height: 1.5; color: var(--pt-ink-2); }
.pt-swb-stat-row { font-size: 13px; color: var(--pt-ink-2); padding: 4px 0; }
.pt-swb-stat-row strong { font-family: var(--pt-mono); font-weight: 500; color: var(--pt-ink); }
.pt-online-dot { width: 8px !important; height: 8px !important; border-radius: 0 !important; background: var(--pt-green-dot) !important; display: inline-block; vertical-align: middle; margin-right: 4px; }
.pt-online-stat-link { color: var(--pt-ink-2) !important; text-decoration: none; }
.pt-swb-about-text { margin: 0; color: var(--pt-ink-2); }
.pt-swb-rules { font-size: 13px; color: var(--pt-ink-2); }
.pt-swb-mod-row { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--pt-border); }
.pt-swb-mod-row:first-child { border-top: 0; }
.pt-swb-mod-avatar { width: 36px !important; height: 36px !important; border-radius: 0 !important; }
.pt-swb-mod-name { font-size: 13.5px; font-weight: 600; color: var(--pt-ink) !important; text-decoration: none; display: block; }
.pt-swb-mod-role { font-size: 11px; font-weight: 600; border: 1px solid var(--pt-border-strong); padding: 1px 6px; color: var(--pt-ink-2); background: var(--pt-surface); border-radius: 0 !important; text-transform: none !important; letter-spacing: 0 !important; }
.pt-swb-create-cta { border-style: dashed !important; }
.pt-cta-eyebrow { font-size: 11px; color: var(--pt-ink-3); margin: 0 0 4px; text-transform: none !important; letter-spacing: 0 !important; }
.pt-cta-text { font-size: 13.5px; color: var(--pt-ink-2); margin: 0 0 10px; }
.pt-cta-btn, .pt-cta-btn:hover { display: inline-flex; font-size: 12.5px; font-weight: 600; padding: 7px 12px; border: 1px solid var(--pt-border-strong) !important; background: var(--pt-surface) !important; color: var(--pt-ink) !important; text-decoration: none !important; border-radius: 0 !important; }

/* Visitor gate + blurred feed (mockup .gate / .blur) */
.pt-gh-gate { background: var(--pt-surface); border: 1px solid var(--pt-border-strong); padding: 18px; text-align: center; margin-bottom: 12px; }
.pt-gh-gate__t { font-size: 15px; font-weight: 600; color: var(--pt-ink); }
.pt-gh-gate__d { font-size: 13px; color: var(--pt-ink-2); margin: 6px 0 12px; line-height: 1.45; }
.pt-gh-wrap.is-gated .pt-gf-feed { filter: blur(3px); opacity: .55; pointer-events: none; user-select: none; max-height: 720px; overflow: hidden; }
.pt-gh-wrap.is-gated .pt-gf-feed:empty { display: none; }

/* Composer */
.pt-gf-compose-bar { display: flex; gap: 12px; align-items: center; background: var(--pt-surface) !important; border: 1px solid var(--pt-border-strong) !important; border-radius: 0 !important; box-shadow: none !important; padding: 12px 14px !important; }
.pt-gf-compose-avatar { width: 36px !important; height: 36px !important; border-radius: 0 !important; }
.pt-gf-compose-input-face { flex: 1; border: 1px solid var(--pt-border-strong) !important; background: var(--pt-surface) !important; padding: 10px 12px !important; font-size: 13.5px !important; color: var(--pt-ink-3) !important; border-radius: 0 !important; }
.pt-gf-compose-expanded { background: var(--pt-surface) !important; border: 1px solid var(--pt-border-strong) !important; border-radius: 0 !important; box-shadow: none !important; }
.pt-gf-tool, .pt-gf-inline-tool { border: 1px solid var(--pt-border-strong) !important; background: var(--pt-surface) !important; color: var(--pt-ink-2) !important; border-radius: 0 !important; font-size: 12.5px !important; }
.pt-gf-extra-input, .pt-gf-reply-input { border: 1px solid var(--pt-border-strong) !important; border-radius: 0 !important; background: var(--pt-surface) !important; font: inherit; font-size: 13.5px !important; box-shadow: none !important; }

/* Post cards (mockup .post) */
.pt-gf-card { background: var(--pt-surface) !important; border: 1px solid var(--pt-border-strong) !important; border-radius: 0 !important; box-shadow: none !important; margin: 12px 0 0 !important; }
.pt-gf-pin-flag { font-size: 11px !important; color: var(--pt-amber-deep) !important; font-weight: 600 !important; padding: 8px 14px 0 !important; background: transparent !important; border: 0 !important; }
.pt-gf-card-hdr { display: flex; gap: 10px; align-items: center; padding: 12px 14px !important; border: 0 !important; }
.pt-gf-card-avatar-link img, .pt-gf-card-avatar { width: 36px !important; height: 36px !important; border-radius: 0 !important; }
.pt-gf-card-name { font-size: 13.5px !important; font-weight: 600 !important; color: var(--pt-ink) !important; }
.pt-gf-card-meta-row { font-size: 12px !important; color: var(--pt-ink-3) !important; }
.pt-gf-card-time { color: var(--pt-ink-3) !important; }
.pt-gf-card-badge { font-size: 10.5px !important; border: 1px solid var(--pt-border-strong) !important; border-radius: 0 !important; background: var(--pt-surface) !important; color: var(--pt-ink-2) !important; padding: 1px 6px !important; }
.pt-gf-card-body, .pt-gf-card-content { padding: 0 14px 12px !important; font-size: 14px !important; line-height: 1.5 !important; color: var(--pt-ink) !important; }
.pt-gf-card-image, .pt-gf-card img.pt-gf-post-img { border-radius: 0 !important; }
.pt-gf-card-stats { display: flex; gap: 22px; padding: 8px 14px !important; font-size: 12.5px !important; color: var(--pt-ink-2) !important; border-top: 1px solid var(--pt-border) !important; }
.pt-gf-card-actions, .pt-gf-action-bar { display: flex; gap: 22px; padding: 10px 14px !important; border-top: 1px solid var(--pt-border) !important; font-size: 12.5px !important; color: var(--pt-ink-2) !important; }
.pt-gf-action-btn { font: inherit; font-size: 12.5px !important; color: var(--pt-ink-2) !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; }
.pt-gf-action-btn:hover, .pt-gf-action-btn.is-liked { color: var(--pt-ink) !important; }
.pt-gf-card-replies { border-top: 1px solid var(--pt-border) !important; background: var(--pt-surface-dim) !important; }
.pt-gf-empty { border: 1px dashed var(--pt-border-strong); background: var(--pt-surface); padding: 24px 16px; text-align: center; font-size: 13px; color: var(--pt-ink-2); border-radius: 0 !important; }

/* Hover cards */
.pt-gf-hover-card { border: 1px solid var(--pt-border-strong) !important; border-radius: 0 !important; box-shadow: 0 8px 24px rgba(0,0,0,.08) !important; background: var(--pt-surface) !important; }
.pt-hc-btn { border-radius: 0 !important; font-size: 12.5px !important; }

/* Events (mockup .evcard) */
.pt-events-section { background: var(--pt-surface); border: 1px solid var(--pt-border-strong); margin-bottom: 14px; }
.pt-event-card { background: var(--pt-surface) !important; border: 0 !important; border-top: 1px solid var(--pt-border) !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; }
.pt-event-card:first-child { border-top: 0 !important; }
.pt-event-flyer-banner { border-radius: 0 !important; }
.pt-event-datebadge { width: 54px !important; text-align: center; border: 1px solid var(--pt-border-strong) !important; padding: 6px 0 !important; background: var(--pt-surface) !important; color: var(--pt-ink) !important; border-radius: 0 !important; flex: 0 0 auto; }
.pt-event-day { display: block; font-family: var(--pt-mono); font-size: 18px !important; font-weight: 500 !important; line-height: 1.1; color: var(--pt-ink) !important; }
.pt-event-month { display: block; font-size: 10.5px !important; color: var(--pt-ink-2) !important; text-transform: uppercase; letter-spacing: .06em; }
.pt-event-info h3, .pt-event-title { font-size: 14px !important; font-weight: 600 !important; color: var(--pt-ink) !important; margin: 0 !important; }
.pt-event-meta { font-size: 12.5px !important; color: var(--pt-ink-2) !important; }
.pt-event-desc { font-size: 13px; color: var(--pt-ink-2); }
.pt-event-invite-badge { font-size: 10.5px !important; border: 1px solid var(--pt-border-strong) !important; border-radius: 0 !important; background: var(--pt-surface) !important; color: var(--pt-ink-2) !important; }
.pt-rsvp-btn, .pt-rsvp-btn:hover { font: inherit; font-size: 12.5px !important; font-weight: 600 !important; padding: 7px 12px !important; border: 1px solid var(--pt-border-strong) !important; background: var(--pt-surface) !important; color: var(--pt-ink) !important; border-radius: 0 !important; box-shadow: none !important; }
.pt-rsvp-btn.is-active, .pt-rsvp-btn.active { background: var(--pt-ink) !important; color: #fff !important; border-color: var(--pt-ink) !important; }
.pt-event-field .pt-input, .pt-input { border: 1px solid var(--pt-border-strong) !important; border-radius: 0 !important; background: var(--pt-surface) !important; box-shadow: none !important; font: inherit; }
.pt-event-type-btn { border: 1px solid var(--pt-border-strong) !important; border-radius: 0 !important; background: var(--pt-surface) !important; color: var(--pt-ink-2) !important; }
.pt-event-type-btn.is-active { background: var(--pt-ink) !important; color: #fff !important; border-color: var(--pt-ink) !important; }

/* Members + media + about */
.pt-member-row, .pt-members-list .pt-member-row { border-top: 1px solid var(--pt-border) !important; padding: 10px 0 !important; border-radius: 0 !important; background: transparent !important; }
.pt-msort-btn, .pt-media-tab-btn { font-size: 12.5px !important; padding: 7px 12px !important; border: 1px solid var(--pt-border-strong) !important; background: var(--pt-surface) !important; color: var(--pt-ink-2) !important; border-radius: 0 !important; }
.pt-msort-btn.is-active, .pt-media-tab-btn.is-active, .pt-msort-btn.active, .pt-media-tab-btn.active { background: var(--pt-ink) !important; color: #fff !important; border-color: var(--pt-ink) !important; }
.pt-media-grid, .pt-tribe-media-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 8px !important; }
.pt-media-grid > *, .pt-tribe-media-grid > * { border-radius: 0 !important; aspect-ratio: 1; object-fit: cover; }
.pt-about-section { background: var(--pt-surface) !important; border: 1px solid var(--pt-border-strong) !important; border-radius: 0 !important; box-shadow: none !important; }
.pt-about-stat-value { font-family: var(--pt-mono) !important; font-size: 20px !important; font-weight: 500 !important; color: var(--pt-ink) !important; }
.pt-about-stat-label { font-size: 12px !important; color: var(--pt-ink-2) !important; text-transform: none !important; letter-spacing: 0 !important; }
.pt-home-nav-card { border: 1px solid var(--pt-border) !important; border-radius: 0 !important; background: var(--pt-surface) !important; box-shadow: none !important; }

/* Modals used by the page keep the Noir card look */
.pt-gf-modal, .pt-invite-modal, .pt-report-modal, .pt-share-popup { border-radius: 0 !important; border: 1px solid var(--pt-border-strong) !important; }

/* ── Phones ── */
@media (max-width: 900px) {
    .pt-gh-hero { height: 140px !important; max-height: 140px; }
    .pt-gh-inner-container { padding: 0 16px; }
    .pt-gh-identity { gap: 12px; }
    .pt-gh-identity .pt-gh-avatar, .pt-gh-avatar-placeholder { width: 56px !important; height: 56px !important; margin-top: -32px !important; }
    .pt-gh-title { font-size: 20px !important; }
    .pt-gh-meta-row { flex-direction: column; align-items: stretch; gap: 10px; }
    .pt-gh-actions { margin-left: 0; }
    .pt-gh-actions .pt-gh-btn { flex: 1 1 auto; }
    .pt-gh-nav { gap: 18px !important; margin-top: 12px !important; }
    .pt-gh-nav-extras { position: static; }
    .pt-gf-grid { grid-template-columns: minmax(0, 1fr) !important; padding: 0 16px; margin: 14px auto 32px !important; gap: 14px !important; }
    .pt-gf-sidebar-col { order: 2; }
    .pt-sticky-sidebar-part { position: static !important; top: auto !important; width: auto !important; }
    .pt-media-grid, .pt-tribe-media-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

/* Fixes from the first render (14:02): the crest glyph, and phones — the legacy sheet hides the sidebar column there,
   so About / Admins / Members never appeared on a phone; the mockup's mobile order is feed first, cards after. */
.pt-gh-avatar-placeholder { font-size: 26px; color: var(--pt-ink-2); }
@media (max-width: 900px) {
    .pt-gf-sidebar-col { display: block !important; visibility: visible !important; }
    .pt-gh-nav-extras { justify-content: flex-end; width: 100%; }
}

/* Next event sidebar card (mockup) */
.pt-swb-link, .pt-swb-link:hover { font-size: 13px; font-weight: 400; color: var(--pt-accent) !important; text-decoration: none; }
.pt-swb-link:hover { text-decoration: underline; }
.pt-swb-ev { display: flex; gap: 14px; align-items: flex-start; }
.pt-swb-ev__date { width: 54px; text-align: center; border: 1px solid var(--pt-border-strong); padding: 6px 0; flex: 0 0 auto; }
.pt-swb-ev__date b { display: block; font-family: var(--pt-mono); font-size: 18px; font-weight: 500; line-height: 1.1; color: var(--pt-ink); }
.pt-swb-ev__date span { font-size: 10.5px; color: var(--pt-ink-2); text-transform: uppercase; letter-spacing: .06em; }
.pt-swb-ev__t { font-size: 14px; font-weight: 600; color: var(--pt-ink); min-width: 0; }
.pt-swb-ev__m { display: block; font-size: 12.5px; font-weight: 400; color: var(--pt-ink-2); margin-top: 3px; }
.pt-swb-ev__foot { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.pt-swb-ev__cap { font-size: 12px; color: var(--pt-ink-2); }
.pt-gh-btn--sm, .pt-gh-btn--sm:hover { font-size: 12.5px !important; padding: 7px 12px !important; }