/**
 * TPG Communities of Practice — Stylesheet
 *
 * All font-size declarations use px, never rem.
 * OceanWP sets html { font-size: 62.5% } which redefines 1rem = 10px.
 * Figma em values × 16 = px (e.g. 1.25em → 20px).
 *
 * @package TPG_Addons_For_LifterLMS
 * @subpackage Communities
 * @since 2.29.0
 */

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

   :root {
    --tpg-cop-black: #212122;
    --tpg-cop-dark-gray: #4A4B4C;
    --tpg-cop-medium-gray: #8A8E90;
    --tpg-cop-gray: #D8DDE2;
    --tpg-cop-light-gray: #F0F4F7;
    --tpg-cop-white: #FFFFFF;
    --tpg-cop-dark-orange: #F05A28;
    --tpg-cop-orange: #F99351;
    --tpg-cop-blue: #1D75BC;
    --tpg-cop-success: #00BFA5;
    --tpg-cop-star: #FFB800;
    --tpg-cop-empty-bg: #f5f1eb;
    --tpg-cop-empty-icon: #999999;
    --tpg-cop-border: #D8DDE2;
    --tpg-cop-border-hover: #F05A28;
    --tpg-cop-font-heading: 'Lora', Georgia, serif;
    --tpg-cop-font-body: 'Source Sans 3', 'Source Sans Pro', -apple-system, sans-serif;
}



/* ==========================================================================
   2. LAYOUT — OceanWP Overrides
   ==========================================================================
   OceanWP's Customiser outputs global rules that target bare HTML elements:
     - button { background-color:#1d75bc; border:1px solid #fff }
     - body button:hover { border-color:#fff; background-color:#1d75bc }
     - .button { background-color:#1d75bc; border:1px solid #fff }
     - form select, form input, form textarea { border-radius:3px }
     - h2 { font-size:20px }  h4 { font-size:22px; color:#8a8e90 }
     - a:hover { color:#1d75bc }
     - html { font-size:62.5% } (rem trick — handled by using px only)

   Strategy: Reset all bare elements inside community containers to inherit,
   then re-apply correct styles per class. All rules use !important to win
   against OceanWP's inline <style> blocks.
   ========================================================================== */

/* ── BUTTON RESET ─────────────────────────────────────────────────
   Covers: button element, button:hover, button:focus, button:active,
   body button, body button:hover, .button class
   ──────────────────────────────────────────────────────────────── */
.tpg-cop-header button,
.tpg-cop-header button:hover,
.tpg-cop-header button:focus,
.tpg-cop-header button:active,
.tpg-cop-left-panel button,
.tpg-cop-left-panel button:hover,
.tpg-cop-left-panel button:focus,
.tpg-cop-right-pane button,
.tpg-cop-right-pane button:hover,
.tpg-cop-right-pane button:focus,
.tpg-cop-right-pane button:active,
.tpg-cop-composer button,
.tpg-cop-composer button:hover,
.tpg-cop-story button,
.tpg-cop-story button:hover,
.tpg-cop-story button:focus,
.tpg-cop-reply-composer button,
.tpg-cop-reply-composer button:hover,
.tpg-cop-view button,
.tpg-cop-view button:hover,
.tpg-cop-view button:focus,
.tpg-cop-view button:active,
.tpg-cop-overflow-menu button,
.tpg-cop-overflow-menu button:hover,
.tpg-cop-story-menu button,
.tpg-cop-story-menu button:hover,
.tpg-cop-conversation-composer button,
.tpg-cop-conversation-composer button:hover,
.tpg-cop-conversation-composer button:focus {
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    border-color: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-weight: normal !important;
    padding: 0 !important;
    height: auto !important;
    line-height: inherit !important;
}

/* Also cover .button class if WordPress/theme adds it */
.tpg-cop-header .button,
.tpg-cop-header .button:hover,
.tpg-cop-right-pane .button,
.tpg-cop-right-pane .button:hover,
.tpg-cop-view .button,
.tpg-cop-view .button:hover {
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    border-color: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
}

/* ── BUTTON RE-APPLY ──────────────────────────────────────────── */

.tpg-cop-btn-joined,
.tpg-cop-btn-joined:hover,
.tpg-cop-btn-joined:focus {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 0 20px !important;
    height: 38px !important;
    border: none !important;
    border-color: transparent !important;
    background: var(--tpg-cop-dark-gray) !important;
    color: var(--tpg-cop-white) !important;
    cursor: default !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.tpg-cop-btn-join,
.tpg-cop-btn-join:focus {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 0 24px !important;
    height: 38px !important;
    border: none !important;
    border-color: transparent !important;
    background: linear-gradient(135deg, var(--tpg-cop-dark-orange), var(--tpg-cop-orange)) !important;
    color: var(--tpg-cop-white) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
}
.tpg-cop-btn-join:hover {
    background: linear-gradient(135deg, #e04e1f, var(--tpg-cop-dark-orange)) !important;
    border: none !important;
    border-color: transparent !important;
    color: var(--tpg-cop-white) !important;
}

.tpg-cop-btn-overflow,
.tpg-cop-btn-overflow:focus {
    font-size: 20px !important;
    padding: 0 12px !important;
    height: 38px !important;
    border: 1px solid var(--tpg-cop-gray) !important;
    background: none !important;
    color: var(--tpg-cop-medium-gray) !important;
    cursor: pointer !important;
    font-family: var(--tpg-cop-font-body) !important;
    line-height: 38px !important;
    letter-spacing: 2px !important;
}
.tpg-cop-btn-overflow:hover {
    border: 1px solid var(--tpg-cop-border-hover) !important;
    color: var(--tpg-cop-dark-gray) !important;
    background: none !important;
}

.tpg-cop-btn-post,
.tpg-cop-btn-post:focus {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 0 22px !important;
    height: 38px !important;
    border: none !important;
    border-color: transparent !important;
    background: var(--tpg-cop-gray) !important;
    color: var(--tpg-cop-white) !important;
    cursor: default !important;
    display: inline-flex !important;
    align-items: center !important;
}
.tpg-cop-btn-post:not([disabled]),
.tpg-cop-btn-post:not([disabled]):hover,
.tpg-cop-btn-post:not([disabled]):focus {
    background: linear-gradient(135deg, var(--tpg-cop-dark-orange), var(--tpg-cop-orange)) !important;
    cursor: pointer !important;
    border: none !important;
    border-color: transparent !important;
    color: var(--tpg-cop-white) !important;
}

.tpg-cop-reply-btn,
.tpg-cop-reply-btn:focus {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--tpg-cop-medium-gray) !important;
    background: var(--tpg-cop-light-gray) !important;
    border: none !important;
    border-color: transparent !important;
    padding: 6px 14px !important;
    cursor: pointer !important;
}
.tpg-cop-reply-btn:not([disabled]),
.tpg-cop-reply-btn:not([disabled]):hover {
    color: var(--tpg-cop-dark-orange) !important;
    background: var(--tpg-cop-light-gray) !important;
    border: none !important;
    border-color: transparent !important;
}

.tpg-cop-btn-primary,
.tpg-cop-btn-primary:focus,
.tpg-cop-invite-send-btn,
.tpg-cop-invite-send-btn:focus {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 0 24px !important;
    height: 38px !important;
    border: none !important;
    border-color: transparent !important;
    background: linear-gradient(135deg, var(--tpg-cop-dark-orange), var(--tpg-cop-orange)) !important;
    color: var(--tpg-cop-white) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
}
.tpg-cop-btn-primary:hover,
.tpg-cop-invite-send-btn:hover {
    background: linear-gradient(135deg, #e04e1f, var(--tpg-cop-dark-orange)) !important;
    border: none !important;
    border-color: transparent !important;
    color: var(--tpg-cop-white) !important;
}

.tpg-cop-btn-secondary,
.tpg-cop-btn-secondary:focus {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 0 20px !important;
    height: 38px !important;
    border: 1px solid var(--tpg-cop-gray) !important;
    background: var(--tpg-cop-white) !important;
    color: var(--tpg-cop-dark-gray) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
}
.tpg-cop-btn-secondary:hover {
    border: 1px solid var(--tpg-cop-dark-orange) !important;
    color: var(--tpg-cop-dark-orange) !important;
    background: var(--tpg-cop-white) !important;
}

.tpg-cop-btn-danger,
.tpg-cop-btn-danger:focus {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 0 20px !important;
    height: 38px !important;
    border: 1px solid #C62828 !important;
    background: var(--tpg-cop-white) !important;
    color: #C62828 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
}
.tpg-cop-btn-danger:hover {
    background: #C62828 !important;
    color: var(--tpg-cop-white) !important;
    border: 1px solid #C62828 !important;
}

.tpg-cop-btn-text,
.tpg-cop-btn-text:hover,
.tpg-cop-btn-text:focus {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 14px !important;
    color: var(--tpg-cop-dark-orange) !important;
    background: none !important;
    border: none !important;
    border-color: transparent !important;
    cursor: pointer !important;
    padding: 4px 8px !important;
}

.tpg-cop-story-dots,
.tpg-cop-story-dots:hover,
.tpg-cop-story-dots:focus {
    font-size: 20px !important;
    color: var(--tpg-cop-medium-gray) !important;
    cursor: pointer !important;
    padding: 2px 6px !important;
    line-height: 1 !important;
    border: none !important;
    border-color: transparent !important;
    background: none !important;
    letter-spacing: 2px !important;
}
.tpg-cop-story-dots:hover {
    color: var(--tpg-cop-dark-gray) !important;
}

.tpg-cop-load-more-btn,
.tpg-cop-load-more-btn:hover,
.tpg-cop-load-more-btn:focus {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 14px !important;
    color: var(--tpg-cop-medium-gray) !important;
    cursor: pointer !important;
    border: none !important;
    border-color: transparent !important;
    background: none !important;
    padding: 8px 16px !important;
}
.tpg-cop-load-more-btn:hover {
    color: var(--tpg-cop-dark-orange) !important;
}

.tpg-cop-composer-image-remove,
.tpg-cop-composer-image-remove:hover {
    width: 24px !important;
    height: 24px !important;
    background: rgba(0,0,0,0.6) !important;
    color: #fff !important;
    border: none !important;
    border-color: transparent !important;
    font-size: 16px !important;
    cursor: pointer !important;
    padding: 0 !important;
}

.tpg-cop-conversation-reply-btn,
.tpg-cop-conversation-reply-btn:focus {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    padding: 0 24px !important;
    height: 38px !important;
    border: none !important;
    border-color: transparent !important;
    background: linear-gradient(135deg, var(--tpg-cop-dark-orange), var(--tpg-cop-orange)) !important;
    color: var(--tpg-cop-white) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
}
.tpg-cop-conversation-reply-btn:hover {
    background: linear-gradient(135deg, #e04e1f, var(--tpg-cop-dark-orange)) !important;
    border: none !important;
    border-color: transparent !important;
    color: var(--tpg-cop-white) !important;
}
.tpg-cop-conversation-reply-btn[disabled],
.tpg-cop-conversation-reply-btn[disabled]:hover,
.tpg-cop-conversation-reply-btn[disabled]:focus {
    background: var(--tpg-cop-gray) !important;
    cursor: default !important;
    border: none !important;
    border-color: transparent !important;
    color: var(--tpg-cop-white) !important;
}

.tpg-cop-overflow-menu button,
.tpg-cop-overflow-menu button:hover,
.tpg-cop-overflow-menu button:focus,
.tpg-cop-story-menu button,
.tpg-cop-story-menu button:hover,
.tpg-cop-story-menu button:focus {
    display: block !important;
    width: 100% !important;
    padding: 8px 16px !important;
    border: none !important;
    border-color: transparent !important;
    background: none !important;
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 14px !important;
    font-weight: normal !important;
    color: var(--tpg-cop-dark-gray) !important;
    text-align: left !important;
    cursor: pointer !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    height: auto !important;
    line-height: 1.4 !important;
}
.tpg-cop-overflow-menu button:hover,
.tpg-cop-story-menu button:hover {
    background: var(--tpg-cop-light-gray) !important;
}
.tpg-cop-overflow-danger button,
.tpg-cop-overflow-danger button:hover,
.tpg-cop-story-menu-danger button,
.tpg-cop-story-menu-danger button:hover {
    color: #C62828 !important;
}

.tpg-cop-pagination-btn,
.tpg-cop-pagination-btn:focus {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 14px !important;
    color: var(--tpg-cop-dark-orange) !important;
    background: none !important;
    border: 1px solid var(--tpg-cop-gray) !important;
    padding: 6px 14px !important;
    cursor: pointer !important;
    height: auto !important;
    line-height: 1.4 !important;
}
.tpg-cop-pagination-btn:hover:not([disabled]) {
    border: 1px solid var(--tpg-cop-dark-orange) !important;
    background: none !important;
}
.tpg-cop-pagination-btn[disabled],
.tpg-cop-pagination-btn[disabled]:hover {
    color: var(--tpg-cop-gray) !important;
    cursor: default !important;
    border: 1px solid var(--tpg-cop-gray) !important;
    background: none !important;
}

/* ── FORM ELEMENT RESET ───────────────────────────────────────────
   OceanWP targets: form select { border-radius:3px; border-style:solid }
   Our settings form IS in a <form> tag, so these rules apply.
   We use both class selectors AND form-ancestor selectors to win.
   ──────────────────────────────────────────────────────────────── */
.tpg-cop-field-input,
.tpg-cop-field-textarea,
.tpg-cop-field-select,
.tpg-cop-invite-email-input,
.tpg-cop-invite-role-select,
.tpg-cop-invite-link-url,
.tpg-cop-search-input,
.tpg-cop-reply-input,
.tpg-cop-composer-textarea,
.tpg-cop-conversation-textarea,
form.tpg-cop-settings-form input[type="text"],
form.tpg-cop-settings-form input[type="number"],
form.tpg-cop-settings-form input[type="email"],
form.tpg-cop-settings-form textarea,
form.tpg-cop-settings-form select,
.tpg-cop-invite-view input[type="text"],
.tpg-cop-invite-view input[type="email"],
.tpg-cop-invite-view select {
    border-radius: 0 !important;
    border: 1px solid var(--tpg-cop-gray) !important;
    background-color: var(--tpg-cop-white) !important;
    background-image: none !important;
    color: var(--tpg-cop-dark-gray) !important;
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 14px !important;
    padding: 10px 14px !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    height: auto !important;
    line-height: 1.4 !important;
    width: 100% !important;
}

/* Focus state */
.tpg-cop-field-input:focus,
.tpg-cop-field-textarea:focus,
.tpg-cop-field-select:focus,
.tpg-cop-invite-email-input:focus,
.tpg-cop-invite-role-select:focus,
.tpg-cop-search-input:focus,
.tpg-cop-reply-input:focus,
.tpg-cop-composer-textarea:focus,
.tpg-cop-conversation-textarea:focus,
form.tpg-cop-settings-form input:focus,
form.tpg-cop-settings-form textarea:focus,
form.tpg-cop-settings-form select:focus,
.tpg-cop-invite-view input:focus,
.tpg-cop-invite-view select:focus {
    border-color: var(--tpg-cop-dark-orange) !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Select dropdown — custom arrow since we removed native appearance */
.tpg-cop-field-select,
.tpg-cop-invite-role-select,
form.tpg-cop-settings-form select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238A8E90' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-color: var(--tpg-cop-white) !important;
    padding-right: 36px !important;
    cursor: pointer !important;
    width: auto !important;
    min-width: 140px !important;
}

/* Textareas */
.tpg-cop-field-textarea,
.tpg-cop-conversation-textarea,
form.tpg-cop-settings-form textarea {
    resize: vertical !important;
    min-height: 80px !important;
    width: 100% !important;
}

/* Composer textarea — different base styling */
.tpg-cop-composer-textarea {
    background-color: var(--tpg-cop-light-gray) !important;
    border: none !important;
}
.tpg-cop-composer-textarea:focus {
    border: none !important;
}

/* Reply input — inline, not full width */
.tpg-cop-reply-input {
    width: auto !important;
    flex: 1 !important;
    background-color: var(--tpg-cop-light-gray) !important;
    border: none !important;
    padding: 8px 12px !important;
}
.tpg-cop-reply-input:focus {
    box-shadow: 0 0 0 1px var(--tpg-cop-dark-orange) !important;
    border: none !important;
}

/* Short number input */
.tpg-cop-field-input--short {
    max-width: 120px !important;
    width: 120px !important;
}

/* Invite email input — flex sizing */
.tpg-cop-invite-email-input {
    flex: 1 !important;
    min-width: 200px !important;
    width: auto !important;
}

/* Invite role select — auto width */
.tpg-cop-invite-role-select {
    width: auto !important;
    min-width: 140px !important;
}

/* Invite link URL — read-only */
.tpg-cop-invite-link-url {
    flex: 1 !important;
    width: auto !important;
    background-color: var(--tpg-cop-light-gray) !important;
}

/* Read-only field display */
.tpg-cop-field-readonly {
    border-radius: 0 !important;
    background: var(--tpg-cop-light-gray) !important;
    padding: 10px 14px !important;
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 14px !important;
    color: var(--tpg-cop-dark-gray) !important;
}

/* ── HEADING RESET ────────────────────────────────────────────────
   OceanWP: h2{font-size:20px} h4{font-size:22px;color:#8a8e90}
   ──────────────────────────────────────────────────────────────── */
.tpg-cop-header h2,
.tpg-cop-header h3,
.tpg-cop-right-pane h3,
.tpg-cop-right-pane h4,
.tpg-cop-right-pane h5,
.tpg-cop-left-panel h4,
.tpg-cop-view h3,
.tpg-cop-view h4,
.tpg-cop-view h5 {
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
    line-height: inherit !important;
    letter-spacing: normal !important;
    margin: 0 !important;
    padding: 0 !important;
}

.tpg-cop-header .tpg-cop-header-name {
    font-family: var(--tpg-cop-font-heading) !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    color: var(--tpg-cop-black) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.006em !important;
}
@media (max-width: 1023px) {
    .tpg-cop-header .tpg-cop-header-name { font-size: 24px !important; }
}

.tpg-cop-view-title {
    font-family: var(--tpg-cop-font-heading) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--tpg-cop-black) !important;
    margin-bottom: 20px !important;
    line-height: 1.3 !important;
}

.tpg-cop-empty-title {
    font-family: var(--tpg-cop-font-heading) !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #212529 !important;
    line-height: 1.2 !important;
    margin-bottom: 15px !important;
}

.tpg-cop-members-group-heading,
.tpg-cop-course-section-heading,
.tpg-cop-invite-section-heading {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--tpg-cop-medium-gray) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 12px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid var(--tpg-cop-light-gray) !important;
    line-height: 1.4 !important;
}

.tpg-cop-danger-heading {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #C62828 !important;
    margin-bottom: 8px !important;
    line-height: 1.4 !important;
}

.tpg-cop-course-card-title {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--tpg-cop-black) !important;
    margin: 0 0 8px !important;
    line-height: 1.4 !important;
}

/* ── LINK COLOUR RESET ────────────────────────────────────────────
   OceanWP: a:hover { color:#1d75bc }
   ──────────────────────────────────────────────────────────────── */
.tpg-cop-header a,
.tpg-cop-header a:hover,
.tpg-cop-header a:focus,
.tpg-cop-left-panel a,
.tpg-cop-left-panel a:hover,
.tpg-cop-left-panel a:focus,
.tpg-cop-right-pane a,
.tpg-cop-right-pane a:hover,
.tpg-cop-right-pane a:focus,
.tpg-cop-view a,
.tpg-cop-view a:hover,
.tpg-cop-view a:focus {
    color: inherit !important;
    text-decoration: none !important;
}

.tpg-cop-back-link,
.tpg-cop-back-link:hover,
.tpg-cop-back-link:focus {
    color: var(--tpg-cop-dark-orange) !important;
}
.tpg-cop-back-link:hover { text-decoration: underline !important; }

.tpg-cop-left-link,
.tpg-cop-left-link:hover,
.tpg-cop-left-link:focus {
    color: var(--tpg-cop-dark-orange) !important;
}
.tpg-cop-left-link:hover { text-decoration: underline !important; }

.tpg-cop-view-all-replies,
.tpg-cop-view-all-replies:hover,
.tpg-cop-view-all-replies:focus {
    color: var(--tpg-cop-dark-orange) !important;
}
.tpg-cop-view-all-replies:hover { text-decoration: underline !important; }

.tpg-cop-course-card-title a,
.tpg-cop-course-card-title a:focus { color: var(--tpg-cop-black) !important; }
.tpg-cop-course-card:hover .tpg-cop-course-card-title a { color: var(--tpg-cop-dark-orange) !important; }

.tpg-cop-join-banner-btn,
.tpg-cop-join-banner-btn:hover,
.tpg-cop-join-banner-btn:focus {
    color: var(--tpg-cop-white) !important;
    text-decoration: none !important;
    background: var(--tpg-cop-blue) !important;
}

/* ── LIST RESET ───────────────────────────────────────────────────
   Theme sets ul { margin, padding, list-style } globally
   ──────────────────────────────────────────────────────────────── */
.tpg-cop-overflow-menu,
.tpg-cop-story-menu,
.tpg-cop-linked-courses {
    list-style: none !important;
    margin: 0 !important;
    padding: 4px 0 !important;
}
.tpg-cop-overflow-menu li,
.tpg-cop-story-menu li,
.tpg-cop-linked-courses li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.tpg-cop-overflow-menu li::before,
.tpg-cop-overflow-menu li::marker,
.tpg-cop-story-menu li::before,
.tpg-cop-story-menu li::marker,
.tpg-cop-linked-courses li::before,
.tpg-cop-linked-courses li::marker {
    content: none !important;
    display: none !important;
}
.tpg-cop-linked-courses {
    padding: 0 !important;
}
.tpg-cop-linked-courses li {
    padding: 6px 0 !important;
    font-size: 14px !important;
    border-bottom: 1px solid var(--tpg-cop-gray) !important;
}
.tpg-cop-linked-courses li:last-child {
    border-bottom: none !important;
}

/* ── TOGGLE SWITCH ────────────────────────────────────────────────
   OceanWP's checkbox rules interfere with the toggle component
   ──────────────────────────────────────────────────────────────── */
.tpg-cop-toggle {
    position: relative !important;
    display: inline-block !important;
    width: 44px !important;
    height: 24px !important;
    flex-shrink: 0 !important;
}
.tpg-cop-toggle-input {
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    position: absolute !important;
}
.tpg-cop-toggle-slider {
    position: absolute !important;
    cursor: pointer !important;
    inset: 0 !important;
    background: var(--tpg-cop-gray) !important;
    border-radius: 24px !important;
    border: none !important;
    transition: 0.2s !important;
}
.tpg-cop-toggle-slider::before {
    content: '' !important;
    position: absolute !important;
    width: 18px !important;
    height: 18px !important;
    left: 3px !important;
    bottom: 3px !important;
    background: var(--tpg-cop-white) !important;
    border-radius: 50% !important;
    transition: 0.2s !important;
    border: none !important;
}
.tpg-cop-toggle-input:checked + .tpg-cop-toggle-slider {
    background: var(--tpg-cop-dark-orange) !important;
}
.tpg-cop-toggle-input:checked + .tpg-cop-toggle-slider::before {
    transform: translateX(20px) !important;
}

/* ── BACKGROUND RESET ─────────────────────────────────────────────
   OceanWP: body { background-color:#f0f4f7 }
   ──────────────────────────────────────────────────────────────── */
.llms-group-profile.tab--about .tpg-cop-header,
.llms-group-profile .llms-group-content {
    background-color: var(--tpg-cop-white) !important;
}

/* ==========================================================================
   3. LAYOUT — Dual-pane wrapper
   ========================================================================== */

/* Override the Groups plugin layout class to use our grid */
.tpg-cop-header ~ .llms-group-content.llms-group-profile-content {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 0;
    margin-top: 0;
}

/* Remove any default Groups plugin layout styles */
.tpg-cop-header ~ .llms-group-content .llms-group-sidebar {
    float: none;
    width: auto;
}
.tpg-cop-header ~ .llms-group-content .llms-group-main {
    float: none;
    width: auto;
}

/* B5 */
@media (max-width: 1279px) {
    .tpg-cop-header ~ .llms-group-content.llms-group-profile-content {
        grid-template-columns: 220px minmax(0, 1fr);
    }
}

/* B4 */
@media (max-width: 1023px) {
    .tpg-cop-header ~ .llms-group-content.llms-group-profile-content {
        grid-template-columns: 200px minmax(0, 1fr);
    }
}


/* ==========================================================================
   4. HEADER
   ========================================================================== */

/* ==========================================================================
   3b. PROFILE HERO  (Rev.3 — banner above the header)
   ========================================================================== */

/* Scoped border-box reset: keeps the overlapping logo's 4px ring inside its
   own box so it doesn't drift wider than its declared size. */
.tpg-cop-hero,
.tpg-cop-hero *,
.tpg-cop-hero *::before,
.tpg-cop-hero *::after,
.tpg-cop-header,
.tpg-cop-header *,
.tpg-cop-header *::before,
.tpg-cop-header *::after {
    box-sizing: border-box !important;
}

.tpg-cop-hero {
    position: relative !important;
    width: 100% !important;
    height: 240px !important;
    overflow: hidden !important;
    /* CoP gradient base set inline per community */
}

.tpg-cop-hero-img {
    position: absolute !important;
    inset: 0 !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.tpg-cop-hero-scrim {
    position: absolute !important;
    inset: 0 !important;
    /* CoP-tinted scrim set inline per community */
}

.tpg-cop-hero-accent {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 4px !important;
    /* CoP gradient accent set inline per community */
}


/* ==========================================================================
   4. HEADER  (sits below the hero; logo straddles the banner's bottom edge)
   ========================================================================== */

.tpg-cop-header {
    position: relative !important;
    display: flex !important;
    align-items: flex-end !important;
    gap: 16px !important;
    padding: 12px 0 18px !important;
    border-bottom: 1px solid var(--tpg-cop-gray) !important;
    margin-bottom: 0 !important;
}

.tpg-cop-header-logo {
    width: 72px !important;
    height: 72px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--tpg-cop-white) !important;
    font-family: var(--tpg-cop-font-body) !important;
    flex-shrink: 0 !important;
    border: 4px solid var(--tpg-cop-white) !important;
    margin-top: -48px !important;
    position: relative !important;
    z-index: 2 !important;
}

.tpg-cop-header-info {
    flex: 1;
    min-width: 0;
}

.tpg-cop-header-name {
    font-family: var(--tpg-cop-font-heading);
    font-size: 28px;
    font-weight: 700;
    color: var(--tpg-cop-black);
    line-height: 1.15;
    letter-spacing: -0.006em;
    margin: 0;
    padding: 0;
}

.tpg-cop-header-desc {
    font-family: var(--tpg-cop-font-body);
    font-size: 16px;
    color: var(--tpg-cop-dark-gray);
    margin-top: 2px;
    letter-spacing: 0.013em;
    line-height: 1.5;
}

.tpg-cop-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* B4 header adjustments */
@media (max-width: 1023px) {
    .tpg-cop-header-name {
        font-size: 24px;
    }
    .tpg-cop-header-logo {
        width: 64px !important;
        height: 64px !important;
        font-size: 20px !important;
        margin-top: -42px !important;
    }
}

/* Hero height per breakpoint: 240 / 220 / 200 / 180 / 160 / 160 (B6→B1) */
@media (max-width: 1279px) { .tpg-cop-hero { height: 220px !important; } }
@media (max-width: 1023px) { .tpg-cop-hero { height: 200px !important; } }
@media (max-width: 839px)  { .tpg-cop-hero { height: 180px !important; } }
@media (max-width: 599px)  { .tpg-cop-hero { height: 160px !important; } }


/* ==========================================================================
   5. MEMBER COUNT PILL
   ========================================================================== */

.tpg-cop-pill-members {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--tpg-cop-font-body);
    font-size: 14px;
    color: var(--tpg-cop-dark-gray);
    background: var(--tpg-cop-light-gray);
    padding: 5px 16px;
    border-radius: 20px;
    border: 1px solid var(--tpg-cop-gray);
    letter-spacing: 0.013em;
}

.tpg-cop-pill-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--tpg-cop-success);
}


/* ==========================================================================
   6. BUTTONS — Join, Joined, Overflow
   ========================================================================== */

.tpg-cop-btn-join {
    font-family: var(--tpg-cop-font-body);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0 24px;
    height: 38px;
    border: none;
    background: linear-gradient(135deg, var(--tpg-cop-dark-orange), var(--tpg-cop-orange));
    color: var(--tpg-cop-white);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}
.tpg-cop-btn-join:hover {
    background: linear-gradient(135deg, #e04e1f, var(--tpg-cop-dark-orange));
}

.tpg-cop-btn-joined {
    font-family: var(--tpg-cop-font-body);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0 20px;
    height: 38px;
    border: none;
    background: var(--tpg-cop-dark-gray);
    color: var(--tpg-cop-white);
    cursor: default;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tpg-cop-btn-check {
    font-size: 12px;
}

.tpg-cop-btn-overflow {
    font-size: 20px;
    padding: 0 12px;
    height: 38px;
    border: 1px solid var(--tpg-cop-gray);
    background: none;
    color: var(--tpg-cop-medium-gray);
    cursor: pointer;
    font-family: var(--tpg-cop-font-body);
    line-height: 38px;
    letter-spacing: 2px;
}
.tpg-cop-btn-overflow:hover {
    border-color: var(--tpg-cop-border-hover);
    color: var(--tpg-cop-dark-gray);
}


/* ==========================================================================
   7. OVERFLOW MENU
   ========================================================================== */

.tpg-cop-overflow-wrap {
    position: relative;
}

.tpg-cop-overflow-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: var(--tpg-cop-white);
    border: 1px solid var(--tpg-cop-gray);
    min-width: 180px;
    padding: 4px 0;
    z-index: 50;
    list-style: none;
}

.tpg-cop-overflow-wrap.tpg-cop-overflow--open .tpg-cop-overflow-menu {
    display: block;
}

.tpg-cop-overflow-menu button {
    display: block;
    width: 100%;
    padding: 10px 16px;
    border: none;
    background: none;
    font-family: var(--tpg-cop-font-body);
    font-size: 14px;
    color: var(--tpg-cop-dark-gray);
    text-align: left;
    cursor: pointer;
}
.tpg-cop-overflow-menu button:hover {
    background: var(--tpg-cop-light-gray);
}

.tpg-cop-overflow-danger button {
    color: #C62828;
    border-top: 1px solid var(--tpg-cop-gray);
    margin-top: 4px;
    padding-top: 14px;
}


/* ==========================================================================
   8. LEFT PANEL
   ========================================================================== */

.tpg-cop-left-panel {
    border-right: 1px solid var(--tpg-cop-gray);
    padding-right: 18px;
}

@media (max-width: 1023px) {
    .tpg-cop-left-panel {
        padding-right: 14px;
    }
}

/* Section component */
.tpg-cop-left-section {
    padding: 16px 0;
    border-bottom: 1px solid var(--tpg-cop-gray);
}
.tpg-cop-left-section:last-child {
    border-bottom: none;
}

.tpg-cop-left-heading {
    font-family: var(--tpg-cop-font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--tpg-cop-medium-gray);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tpg-cop-left-link {
    font-size: 14px;
    font-weight: 400;
    color: var(--tpg-cop-dark-orange);
    text-transform: none;
    letter-spacing: 0.013em;
    cursor: pointer;
    text-decoration: none;
}
.tpg-cop-left-link:hover {
    text-decoration: underline;
}


/* ==========================================================================
   9. ABOUT SECTION
   ========================================================================== */

.tpg-cop-about-text {
    font-family: var(--tpg-cop-font-body);
    font-size: 16px;
    color: var(--tpg-cop-dark-gray);
    line-height: 1.625;
    letter-spacing: 0.013em;
}

.tpg-cop-about-meta {
    font-family: var(--tpg-cop-font-body);
    font-size: 14px;
    color: var(--tpg-cop-medium-gray);
    margin-top: 6px;
    letter-spacing: 0.013em;
}

/* B4: truncate about text to 3 lines */
@media (max-width: 1023px) {
    .tpg-cop-about-text {
        font-size: 14px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}


/* ==========================================================================
   10. MEMBER ROWS (Left Panel)
   ========================================================================== */

.tpg-cop-member-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.tpg-cop-member-row:last-child {
    margin-bottom: 0;
}

.tpg-cop-member-avatar {
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
    background: var(--tpg-cop-light-gray);
}

.tpg-cop-member-avatar--leader {
    width: 34px;
    height: 34px;
}
.tpg-cop-member-avatar--compact {
    width: 30px;
    height: 30px;
}

.tpg-cop-member-info {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.tpg-cop-member-name {
    font-family: var(--tpg-cop-font-body);
    font-size: 16px;
    font-weight: 600;
    color: var(--tpg-cop-black);
    letter-spacing: 0.013em;
}

.tpg-cop-member-name--compact {
    font-size: 14px;
    font-weight: 400;
}

.tpg-cop-members-more {
    font-family: var(--tpg-cop-font-body);
    font-size: 14px;
    color: var(--tpg-cop-medium-gray);
    margin-top: 6px;
    padding-left: 40px;
    letter-spacing: 0.013em;
}


/* ==========================================================================
   11. TAG PILLS
   ========================================================================== */

.tpg-cop-tag-pill {
    font-family: var(--tpg-cop-font-body);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.013em;
    padding: 2px 10px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--tpg-cop-white);
    line-height: 1.4;
}

/* Correct colour assignments per Phase 1 review */
.tpg-cop-tag-pill--lead      { background: var(--tpg-cop-dark-orange); }
.tpg-cop-tag-pill--admin     { background: var(--tpg-cop-blue); }
.tpg-cop-tag-pill--enrolled  { background: var(--tpg-cop-dark-orange); }
.tpg-cop-tag-pill--completed { background: var(--tpg-cop-success); }
.tpg-cop-tag-pill--joined    { background: var(--tpg-cop-blue); }

/* Small variant for course mini-rows */
.tpg-cop-tag-pill--sm {
    font-size: 11px;
    padding: 1px 8px;
}


/* ==========================================================================
   12. COURSE MINI-ROWS (Left Panel)
   ========================================================================== */

.tpg-cop-course-mini {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid var(--tpg-cop-light-gray);
}
.tpg-cop-course-mini:last-of-type {
    border-bottom: none;
}

.tpg-cop-course-mini-thumb {
    width: 72px;
    height: 48px;
    background: var(--tpg-cop-light-gray);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    margin-top: 2px;
}
.tpg-cop-course-mini-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tpg-cop-course-mini-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
}

.tpg-cop-course-mini-info {
    flex: 1;
    min-width: 0;
}

.tpg-cop-course-mini-title {
    font-family: var(--tpg-cop-font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--tpg-cop-black);
    line-height: 1.4;
    letter-spacing: 0.013em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tpg-cop-course-mini-meta {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-top: 5px;
    font-family: var(--tpg-cop-font-body);
    font-size: 12px;
    color: var(--tpg-cop-medium-gray);
    flex-wrap: wrap;
}

.tpg-cop-course-mini-sep {
    color: var(--tpg-cop-medium-gray);
}

.tpg-cop-course-mini-type {
    color: var(--tpg-cop-medium-gray);
}

.tpg-cop-course-mini-pbar {
    height: 3px;
    background: var(--tpg-cop-light-gray);
    margin-top: 6px;
    width: 100%;
}

.tpg-cop-course-mini-pfill {
    height: 100%;
    background: var(--tpg-cop-dark-orange);
}

.tpg-cop-courses-more {
    font-family: var(--tpg-cop-font-body);
    font-size: 14px;
    color: var(--tpg-cop-medium-gray);
    margin-top: 6px;
    letter-spacing: 0.013em;
}

/* B4: hide the third course mini-row */
@media (max-width: 1023px) {
    .tpg-cop-course-mini--third {
        display: none;
    }
}


/* ==========================================================================
   13. SEATS BAR
   ========================================================================== */

.tpg-cop-seats-bar {
    height: 6px;
    background: var(--tpg-cop-light-gray);
}

.tpg-cop-seats-fill {
    height: 100%;
    background: var(--tpg-cop-gray);
}

.tpg-cop-seats-meta {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    font-family: var(--tpg-cop-font-body);
    font-size: 12px;
    color: var(--tpg-cop-medium-gray);
}


/* ==========================================================================
   14. RIGHT PANE (placeholder for Phase B)
   ========================================================================== */

.tpg-cop-right-pane {
    padding-left: 18px;
    min-height: 200px;
}

@media (max-width: 1023px) {
    .tpg-cop-right-pane {
        padding-left: 14px;
    }
}

.tpg-cop-placeholder {
    font-family: var(--tpg-cop-font-body);
}


/* ==========================================================================
   15. POST COMPOSER
   ========================================================================== */

.tpg-cop-composer {
    border: 1px dashed var(--tpg-cop-gray) !important;
    background: var(--tpg-cop-white) !important;
    padding: 16px 20px !important;
    margin: 18px 0 16px !important;
    transition: border-color 0.2s ease, border-style 0.2s ease;
}

.tpg-cop-composer[data-state="active"],
.tpg-cop-composer[data-state="ready"] {
    border-style: solid !important;
    border-color: var(--tpg-cop-dark-orange) !important;
}

.tpg-cop-composer-inner {
    display: flex !important;
    gap: 12px !important;
    align-items: flex-start !important;
}

.tpg-cop-composer-avatar {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    object-fit: cover;
    background: var(--tpg-cop-light-gray) !important;
}

.tpg-cop-composer-content {
    flex: 1 !important;
    min-width: 0 !important;
}

.tpg-cop-composer-textarea {
    width: 100% !important;
    min-height: 44px !important;
    background: var(--tpg-cop-light-gray) !important;
    border: none !important;
    padding: 12px 14px !important;
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 16px !important;
    color: var(--tpg-cop-dark-gray) !important;
    resize: none !important;
    outline: none !important;
    letter-spacing: 0.013em !important;
    display: block !important;
}
.tpg-cop-composer-textarea::placeholder {
    color: var(--tpg-cop-medium-gray) !important;
}

.tpg-cop-composer[data-state="active"] .tpg-cop-composer-textarea,
.tpg-cop-composer[data-state="ready"] .tpg-cop-composer-textarea {
    min-height: 80px !important;
}

.tpg-cop-composer-actions {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 10px !important;
}

.tpg-cop-composer-img-btn {
    width: 32px !important;
    height: 32px !important;
    background: var(--tpg-cop-light-gray) !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    color: var(--tpg-cop-medium-gray) !important;
}
.tpg-cop-composer-img-btn:hover {
    color: var(--tpg-cop-dark-gray) !important;
}

.tpg-cop-btn-post {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 0 22px !important;
    height: 38px !important;
    border: none !important;
    background: var(--tpg-cop-gray) !important;
    color: var(--tpg-cop-white) !important;
    cursor: default !important;
    display: inline-flex !important;
    align-items: center !important;
}

.tpg-cop-btn-post:not([disabled]) {
    background: linear-gradient(135deg, var(--tpg-cop-dark-orange), var(--tpg-cop-orange)) !important;
    cursor: pointer !important;
}

.tpg-cop-composer-image-preview {
    margin-top: 10px !important;
    position: relative;
    display: inline-block !important;
}
.tpg-cop-composer-image-preview img {
    max-width: 100% !important;
    max-height: 200px !important;
    display: block !important;
}
.tpg-cop-composer-image-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px !important;
    height: 24px !important;
    background: rgba(0,0,0,0.6) !important;
    color: #fff !important;
    border: none !important;
    font-size: 16px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}


/* ==========================================================================
   16. STORY CARD — User Posts
   ========================================================================== */

.tpg-cop-story {
    border: 1px solid var(--tpg-cop-gray) !important;
    background: var(--tpg-cop-white) !important;
    margin-bottom: 12px !important;
}

.tpg-cop-story-header {
    padding: 16px 20px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
}

.tpg-cop-story-avatar {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    object-fit: cover;
    background: var(--tpg-cop-light-gray) !important;
}

.tpg-cop-story-meta {
    flex: 1 !important;
    min-width: 0 !important;
}

.tpg-cop-story-author {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--tpg-cop-black) !important;
    letter-spacing: 0.013em !important;
}

.tpg-cop-story-verb {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 14px !important;
    color: var(--tpg-cop-medium-gray) !important;
    letter-spacing: 0.013em !important;
}

.tpg-cop-story-time {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 14px !important;
    color: var(--tpg-cop-medium-gray) !important;
    letter-spacing: 0.013em !important;
}

.tpg-cop-story-body {
    padding: 0 20px 16px 68px !important;
}

.tpg-cop-story-content {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 20px !important;
    color: var(--tpg-cop-dark-gray) !important;
    line-height: 1.6 !important;
}

.tpg-cop-story-image {
    margin-top: 10px !important;
}
.tpg-cop-story-image img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* Story context menu */
.tpg-cop-story-menu-wrap {
    position: relative;
    flex-shrink: 0 !important;
}

.tpg-cop-story-dots {
    font-size: 20px !important;
    color: var(--tpg-cop-medium-gray) !important;
    cursor: pointer !important;
    padding: 2px 6px !important;
    line-height: 1 !important;
    border: none !important;
    background: none !important;
    font-family: var(--tpg-cop-font-body) !important;
    letter-spacing: 2px !important;
}
.tpg-cop-story-dots:hover {
    color: var(--tpg-cop-dark-gray) !important;
}

.tpg-cop-story-menu {
    display: none !important;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px !important;
    background: var(--tpg-cop-white) !important;
    border: 1px solid var(--tpg-cop-gray) !important;
    min-width: 140px !important;
    padding: 4px 0 !important;
    z-index: 50;
    list-style: none !important;
}
.tpg-cop-story-menu-wrap.tpg-cop-menu--open .tpg-cop-story-menu {
    display: block !important;
}

.tpg-cop-story-menu button {
    display: block !important;
    width: 100% !important;
    padding: 8px 16px !important;
    border: none !important;
    background: none !important;
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 14px !important;
    color: var(--tpg-cop-dark-gray) !important;
    text-align: left !important;
    cursor: pointer !important;
}
.tpg-cop-story-menu button:hover {
    background: var(--tpg-cop-light-gray) !important;
}

.tpg-cop-story-menu-danger button {
    color: #C62828 !important;
    border-top: 1px solid var(--tpg-cop-gray) !important;
    margin-top: 4px !important;
    padding-top: 12px !important;
}

/* Edit mode */
.tpg-cop-story-edit-area {
    width: 100% !important;
    min-height: 80px !important;
    padding: 12px 14px !important;
    border: 1px solid var(--tpg-cop-dark-orange) !important;
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 16px !important;
    color: var(--tpg-cop-dark-gray) !important;
    resize: vertical !important;
    outline: none !important;
}

.tpg-cop-story-edit-actions {
    display: flex !important;
    gap: 8px !important;
    margin-top: 8px !important;
    justify-content: flex-end !important;
}

.tpg-cop-story-edit-actions button {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 6px 16px !important;
    border: none !important;
    cursor: pointer !important;
}

.tpg-cop-btn-save {
    background: var(--tpg-cop-dark-orange) !important;
    color: var(--tpg-cop-white) !important;
}
.tpg-cop-btn-cancel {
    background: var(--tpg-cop-light-gray) !important;
    color: var(--tpg-cop-dark-gray) !important;
}


/* ==========================================================================
   17. STORY CARD — Auto-Generated
   ========================================================================== */

.tpg-cop-story-auto-body {
    padding: 0 20px 16px 68px !important;
}

.tpg-cop-story-auto-inner {
    background: var(--tpg-cop-light-gray) !important;
    padding: 20px !important;
    text-align: center !important;
}

.tpg-cop-story-auto-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    border: 2px solid !important;
    margin: 0 auto 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    background: var(--tpg-cop-white) !important;
}

.tpg-cop-story-auto-title {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--tpg-cop-black) !important;
    letter-spacing: 0.013em !important;
}

.tpg-cop-story-auto-subtitle {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 16px !important;
    color: var(--tpg-cop-medium-gray) !important;
    margin-top: 2px !important;
}

.tpg-cop-story-auto-date {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 14px !important;
    color: var(--tpg-cop-medium-gray) !important;
    margin-top: 6px !important;
    letter-spacing: 0.013em !important;
}


/* ==========================================================================
   18. REPLIES
   ========================================================================== */

.tpg-cop-story-replies {
    border-top: 1px solid var(--tpg-cop-gray) !important;
    padding: 12px 20px !important;
}

.tpg-cop-reply {
    display: flex !important;
    gap: 8px !important;
    align-items: flex-start !important;
    margin-bottom: 8px !important;
}
.tpg-cop-reply:last-child {
    margin-bottom: 0 !important;
}

.tpg-cop-reply-avatar {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    margin-top: 2px !important;
    object-fit: cover;
    background: var(--tpg-cop-light-gray) !important;
}

.tpg-cop-reply-content {
    flex: 1 !important;
    min-width: 0 !important;
}

.tpg-cop-reply-name {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--tpg-cop-black) !important;
    letter-spacing: 0.013em !important;
}

.tpg-cop-reply-text {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 14px !important;
    color: var(--tpg-cop-dark-gray) !important;
    letter-spacing: 0.013em !important;
}

.tpg-cop-reply-time {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 12px !important;
    color: var(--tpg-cop-medium-gray) !important;
    margin-top: 2px !important;
}

.tpg-cop-view-all-replies {
    display: block !important;
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 14px !important;
    color: var(--tpg-cop-dark-orange) !important;
    text-decoration: none !important;
    margin: 8px 0 !important;
    cursor: pointer !important;
}
.tpg-cop-view-all-replies:hover {
    text-decoration: underline !important;
}


/* ==========================================================================
   19. REPLY COMPOSER
   ========================================================================== */

.tpg-cop-reply-composer {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    margin-top: 10px !important;
}

.tpg-cop-reply-input {
    flex: 1 !important;
    background: var(--tpg-cop-light-gray) !important;
    border: none !important;
    padding: 8px 12px !important;
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 14px !important;
    color: var(--tpg-cop-dark-gray) !important;
    outline: none !important;
}
.tpg-cop-reply-input::placeholder {
    color: var(--tpg-cop-medium-gray) !important;
}
.tpg-cop-reply-input:focus {
    box-shadow: 0 0 0 1px var(--tpg-cop-dark-orange) !important;
}

.tpg-cop-reply-btn {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--tpg-cop-medium-gray) !important;
    background: var(--tpg-cop-light-gray) !important;
    border: none !important;
    padding: 6px 14px !important;
    cursor: pointer !important;
}
.tpg-cop-reply-btn:not([disabled]) {
    color: var(--tpg-cop-dark-orange) !important;
}
.tpg-cop-reply-btn:not([disabled]):hover {
    background: var(--tpg-cop-gray) !important;
}


/* ==========================================================================
   20. EMPTY STATE
   ========================================================================== */

.tpg-cop-empty-state {
    background: var(--tpg-cop-empty-bg) !important;
    padding: 48px 24px !important;
    text-align: center !important;
}

.tpg-cop-empty-icon {
    margin: 0 auto 20px !important;
    display: block !important;
}

.tpg-cop-empty-title {
    font-family: var(--tpg-cop-font-heading) !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #212529 !important;
    line-height: 1.2 !important;
    margin-bottom: 15px !important;
}

.tpg-cop-empty-desc {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 20px !important;
    color: #666666 !important;
    line-height: 1.6 !important;
    max-width: 400px !important;
    margin: 0 auto 20px !important;
}


/* ==========================================================================
   21. NOT-JOINED BANNER
   ========================================================================== */

.tpg-cop-join-banner {
    background: #E8F4FD !important;
    border: 1px solid #B3D7F0 !important;
    padding: 16px 20px !important;
    margin: 18px 0 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
}

.tpg-cop-join-banner-text {
    flex: 1 !important;
}

.tpg-cop-join-banner-title {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--tpg-cop-blue) !important;
}

.tpg-cop-join-banner-desc {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 14px !important;
    color: var(--tpg-cop-dark-gray) !important;
    margin-top: 2px !important;
}

.tpg-cop-join-banner-btn {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 0 24px !important;
    height: 38px !important;
    border: none !important;
    background: var(--tpg-cop-blue) !important;
    color: var(--tpg-cop-white) !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
}


/* ==========================================================================
   22. LOAD MORE
   ========================================================================== */

.tpg-cop-load-more {
    text-align: center !important;
    padding: 16px 0 !important;
}

.tpg-cop-load-more-btn {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 14px !important;
    color: var(--tpg-cop-medium-gray) !important;
    cursor: pointer !important;
    border: none !important;
    background: none !important;
    padding: 8px 16px !important;
}
.tpg-cop-load-more-btn:hover {
    color: var(--tpg-cop-dark-orange) !important;
}
.tpg-cop-load-more-btn.tpg-cop-loading {
    opacity: 0.6 !important;
    cursor: wait !important;
}


/* ==========================================================================
   23. BACK LINK
   ========================================================================== */

.tpg-cop-back-link {
    display: inline-block !important;
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 14px !important;
    color: var(--tpg-cop-dark-orange) !important;
    text-decoration: none !important;
    margin-bottom: 16px !important;
    cursor: pointer !important;
}
.tpg-cop-back-link:hover {
    text-decoration: underline !important;
}


/* ==========================================================================
   24. VIEW TITLE
   ========================================================================== */

.tpg-cop-view-title {
    font-family: var(--tpg-cop-font-heading) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--tpg-cop-black) !important;
    margin-bottom: 20px !important;
    line-height: 1.3 !important;
}


/* ==========================================================================
   25. MEMBERS VIEW
   ========================================================================== */

.tpg-cop-search-bar {
    margin-bottom: 16px !important;
}

.tpg-cop-search-input {
    width: 100% !important;
    padding: 10px 14px !important;
    border: 1px solid var(--tpg-cop-gray) !important;
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 14px !important;
    color: var(--tpg-cop-dark-gray) !important;
    outline: none !important;
    background: var(--tpg-cop-white) !important;
}
.tpg-cop-search-input::placeholder {
    color: var(--tpg-cop-medium-gray) !important;
}
.tpg-cop-search-input:focus {
    border-color: var(--tpg-cop-dark-orange) !important;
}

.tpg-cop-members-group {
    margin-bottom: 24px !important;
}

.tpg-cop-members-group-heading {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--tpg-cop-medium-gray) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 12px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid var(--tpg-cop-light-gray) !important;
}

.tpg-cop-member-row--full {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid var(--tpg-cop-light-gray) !important;
}
.tpg-cop-member-row--full:last-child {
    border-bottom: none !important;
}

.tpg-cop-member-avatar--full {
    width: 40px !important;
    height: 40px !important;
}

.tpg-cop-member-details {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap;
}

.tpg-cop-member-joined {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 12px !important;
    color: var(--tpg-cop-medium-gray) !important;
}

.tpg-cop-no-results {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 16px !important;
    color: var(--tpg-cop-medium-gray) !important;
    text-align: center !important;
    padding: 32px 0 !important;
}


/* ==========================================================================
   26. PAGINATION
   ========================================================================== */

.tpg-cop-pagination {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    padding: 16px 0 !important;
    margin-top: 8px !important;
}

.tpg-cop-pagination-btn {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 14px !important;
    color: var(--tpg-cop-dark-orange) !important;
    background: none !important;
    border: 1px solid var(--tpg-cop-gray) !important;
    padding: 6px 14px !important;
    cursor: pointer !important;
}
.tpg-cop-pagination-btn:hover:not([disabled]) {
    border-color: var(--tpg-cop-dark-orange) !important;
}
.tpg-cop-pagination-btn[disabled] {
    color: var(--tpg-cop-gray) !important;
    cursor: default !important;
}

.tpg-cop-pagination-info {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 14px !important;
    color: var(--tpg-cop-medium-gray) !important;
}


/* ==========================================================================
   27. COURSES VIEW
   ========================================================================== */

.tpg-cop-course-section {
    margin-bottom: 24px !important;
}

.tpg-cop-course-section-heading {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--tpg-cop-medium-gray) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 12px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid var(--tpg-cop-light-gray) !important;
}

.tpg-cop-course-card {
    display: flex !important;
    gap: 16px !important;
    align-items: flex-start !important;
    padding: 16px !important;
    border: 1px solid var(--tpg-cop-gray) !important;
    background: var(--tpg-cop-white) !important;
    margin-bottom: 12px !important;
    transition: border-color 0.2s ease;
}
.tpg-cop-course-card:hover {
    border-color: var(--tpg-cop-dark-orange) !important;
}

.tpg-cop-course-card-thumb {
    width: 160px !important;
    height: 100px !important;
    flex-shrink: 0 !important;
    position: relative;
    overflow: hidden !important;
    background: var(--tpg-cop-light-gray) !important;
}
.tpg-cop-course-card-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

.tpg-cop-course-card-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px !important;
}

.tpg-cop-course-card-body {
    flex: 1 !important;
    min-width: 0 !important;
}

.tpg-cop-course-card-title {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--tpg-cop-black) !important;
    margin: 0 0 8px !important;
    line-height: 1.4 !important;
}
.tpg-cop-course-card-title a {
    color: inherit !important;
    text-decoration: none !important;
}
.tpg-cop-course-card:hover .tpg-cop-course-card-title a {
    color: var(--tpg-cop-dark-orange) !important;
}

.tpg-cop-course-card-meta {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
}

.tpg-cop-course-card-progress-text {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 14px !important;
    color: var(--tpg-cop-medium-gray) !important;
}

.tpg-cop-course-card-pbar {
    height: 4px !important;
    background: var(--tpg-cop-light-gray) !important;
    margin-bottom: 12px !important;
}
.tpg-cop-course-card-pfill {
    height: 100% !important;
    background: var(--tpg-cop-dark-orange) !important;
}

.tpg-cop-course-card-action {
    margin-top: 8px !important;
}


/* ==========================================================================
   28. BUTTONS — Primary, Secondary, Danger, Text
   ========================================================================== */

.tpg-cop-btn-primary {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 0 24px !important;
    height: 38px !important;
    border: none !important;
    background: linear-gradient(135deg, var(--tpg-cop-dark-orange), var(--tpg-cop-orange)) !important;
    color: var(--tpg-cop-white) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
}
.tpg-cop-btn-primary:hover {
    background: linear-gradient(135deg, #e04e1f, var(--tpg-cop-dark-orange)) !important;
}

.tpg-cop-btn-secondary {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 0 20px !important;
    height: 38px !important;
    border: 1px solid var(--tpg-cop-gray) !important;
    background: var(--tpg-cop-white) !important;
    color: var(--tpg-cop-dark-gray) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
}
.tpg-cop-btn-secondary:hover {
    border-color: var(--tpg-cop-dark-orange) !important;
    color: var(--tpg-cop-dark-orange) !important;
}

.tpg-cop-btn-danger {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 0 20px !important;
    height: 38px !important;
    border: 1px solid #C62828 !important;
    background: var(--tpg-cop-white) !important;
    color: #C62828 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
}
.tpg-cop-btn-danger:hover {
    background: #C62828 !important;
    color: var(--tpg-cop-white) !important;
}

.tpg-cop-btn-text {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 14px !important;
    color: var(--tpg-cop-dark-orange) !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 4px 8px !important;
}
.tpg-cop-btn-text:hover {
    text-decoration: underline !important;
}


/* ==========================================================================
   29. SETTINGS VIEW
   ========================================================================== */

.tpg-cop-settings-form {
    max-width: 560px !important;
}

.tpg-cop-field {
    margin-bottom: 20px !important;
}

.tpg-cop-field-label {
    display: block !important;
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--tpg-cop-black) !important;
    margin-bottom: 6px !important;
}

.tpg-cop-field-input,
.tpg-cop-field-textarea,
.tpg-cop-field-select {
    width: 100% !important;
    padding: 10px 14px !important;
    border: 1px solid var(--tpg-cop-gray) !important;
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 14px !important;
    color: var(--tpg-cop-dark-gray) !important;
    outline: none !important;
    background: var(--tpg-cop-white) !important;
}
.tpg-cop-field-input:focus,
.tpg-cop-field-textarea:focus,
.tpg-cop-field-select:focus {
    border-color: var(--tpg-cop-dark-orange) !important;
}

.tpg-cop-field-textarea {
    resize: vertical !important;
    min-height: 80px !important;
}

.tpg-cop-field-input--short {
    max-width: 120px !important;
}

.tpg-cop-field-hint {
    display: block !important;
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 12px !important;
    color: var(--tpg-cop-medium-gray) !important;
    margin-top: 4px !important;
}

.tpg-cop-field-readonly {
    padding: 10px 14px !important;
    background: var(--tpg-cop-light-gray) !important;
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 14px !important;
    color: var(--tpg-cop-dark-gray) !important;
}

.tpg-cop-linked-courses {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.tpg-cop-linked-courses li {
    padding: 4px 0 !important;
    font-size: 14px !important;
    border-bottom: 1px solid var(--tpg-cop-gray) !important;
}
.tpg-cop-linked-courses li:last-child {
    border-bottom: none !important;
}

.tpg-cop-settings-actions {
    margin-top: 24px !important;
    padding-top: 16px !important;
    border-top: 1px solid var(--tpg-cop-gray) !important;
}

.tpg-cop-danger-zone {
    margin-top: 40px !important;
    padding: 20px !important;
    border: 1px solid #FFCDD2 !important;
    background: #FFF5F5 !important;
}

.tpg-cop-danger-heading {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #C62828 !important;
    margin-bottom: 8px !important;
}

.tpg-cop-danger-desc {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 14px !important;
    color: var(--tpg-cop-dark-gray) !important;
    margin-bottom: 16px !important;
}


/* ==========================================================================
   30. INVITE VIEW
   ========================================================================== */

.tpg-cop-invite-section {
    margin-bottom: 28px !important;
}

.tpg-cop-invite-section-heading {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--tpg-cop-medium-gray) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 12px !important;
}

.tpg-cop-invite-email-form {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    flex-wrap: wrap;
}
.tpg-cop-invite-email-input {
    flex: 1 !important;
    min-width: 200px !important;
}
.tpg-cop-invite-role-select {
    width: auto !important;
    min-width: 140px !important;
}

.tpg-cop-invite-feedback {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 14px !important;
    margin-top: 8px !important;
    padding: 8px 12px !important;
}
.tpg-cop-invite-feedback--success {
    color: #2E7D32 !important;
    background: #E8F5E9 !important;
}
.tpg-cop-invite-feedback--error {
    color: #C62828 !important;
    background: #FFF5F5 !important;
}

.tpg-cop-invite-toggle-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
}

.tpg-cop-toggle {
    position: relative;
    display: inline-block !important;
    width: 44px !important;
    height: 24px !important;
    flex-shrink: 0 !important;
}
.tpg-cop-toggle-input {
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}
.tpg-cop-toggle-slider {
    position: absolute;
    cursor: pointer !important;
    inset: 0;
    background: var(--tpg-cop-gray) !important;
    border-radius: 24px !important;
    transition: 0.2s;
}
.tpg-cop-toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px !important;
    height: 18px !important;
    left: 3px;
    bottom: 3px;
    background: var(--tpg-cop-white) !important;
    border-radius: 50% !important;
    transition: 0.2s;
}
.tpg-cop-toggle-input:checked + .tpg-cop-toggle-slider {
    background: var(--tpg-cop-dark-orange) !important;
}
.tpg-cop-toggle-input:checked + .tpg-cop-toggle-slider::before {
    transform: translateX(20px);
}

.tpg-cop-invite-toggle-label {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 14px !important;
    color: var(--tpg-cop-dark-gray) !important;
}

.tpg-cop-invite-link-display {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
}
.tpg-cop-invite-link-url {
    flex: 1 !important;
    background: var(--tpg-cop-light-gray) !important;
}

.tpg-cop-pending-list {
    margin-top: 8px !important;
}
.tpg-cop-pending-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid var(--tpg-cop-light-gray) !important;
}
.tpg-cop-pending-email {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 14px !important;
    color: var(--tpg-cop-dark-gray) !important;
}
.tpg-cop-pending-date {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 12px !important;
    color: var(--tpg-cop-medium-gray) !important;
    margin-left: 8px !important;
}


/* ==========================================================================
   31. FOCUSED CONVERSATION VIEW
   ========================================================================== */

.tpg-cop-conversation-post {
    border: 1px solid var(--tpg-cop-gray) !important;
    background: var(--tpg-cop-white) !important;
    margin-bottom: 0 !important;
}

.tpg-cop-conversation-divider {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--tpg-cop-medium-gray) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 16px 0 !important;
    margin: 0 0 12px !important;
    border-bottom: 1px solid var(--tpg-cop-gray) !important;
}

.tpg-cop-conversation-replies .tpg-cop-reply {
    padding: 10px 0 !important;
    border-bottom: 1px solid var(--tpg-cop-light-gray) !important;
}

.tpg-cop-conversation-composer {
    display: flex !important;
    gap: 12px !important;
    align-items: flex-start !important;
    margin-top: 20px !important;
    padding-top: 16px !important;
    border-top: 1px solid var(--tpg-cop-gray) !important;
}

.tpg-cop-reply-avatar--prominent {
    width: 32px !important;
    height: 32px !important;
}

.tpg-cop-conversation-composer-inner {
    flex: 1 !important;
}

.tpg-cop-conversation-textarea {
    width: 100% !important;
    min-height: 80px !important;
    padding: 12px 14px !important;
    border: 1px solid var(--tpg-cop-gray) !important;
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 14px !important;
    color: var(--tpg-cop-dark-gray) !important;
    resize: vertical !important;
    outline: none !important;
}
.tpg-cop-conversation-textarea::placeholder {
    color: var(--tpg-cop-medium-gray) !important;
}
.tpg-cop-conversation-textarea:focus {
    border-color: var(--tpg-cop-dark-orange) !important;
}

.tpg-cop-conversation-composer-actions {
    display: flex !important;
    justify-content: flex-end !important;
    margin-top: 8px !important;
}

.tpg-cop-conversation-reply-btn[disabled] {
    background: var(--tpg-cop-gray) !important;
    cursor: default !important;
}


/* ==========================================================================
   32. RIGHT-PANE TRANSITION
   ========================================================================== */

.tpg-cop-right-pane {
    transition: opacity 0.15s ease;
}
.tpg-cop-right-pane.tpg-cop-fading {
    opacity: 0 !important;
}


/* ==========================================================================
   33. MOBILE SUMMARY BAR
   ========================================================================== */

.tpg-cop-summary-bar {
    display: none !important; /* Hidden at B4+ — shown via media query */
    align-items: center !important;
    padding: 10px 16px !important;
    background: var(--tpg-cop-light-gray) !important;
    border-bottom: 1px solid var(--tpg-cop-gray) !important;
    cursor: pointer !important;
    gap: 10px !important;
    -webkit-tap-highlight-color: transparent;
}

.tpg-cop-summary-avatars {
    display: flex !important;
    flex-shrink: 0 !important;
}

.tpg-cop-summary-avatar {
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    border: 2px solid var(--tpg-cop-light-gray) !important;
    margin-left: -6px !important;
    object-fit: cover;
    background: var(--tpg-cop-gray) !important;
}
.tpg-cop-summary-avatar:first-child {
    margin-left: 0 !important;
}

.tpg-cop-summary-text {
    flex: 1 !important;
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 14px !important;
    color: var(--tpg-cop-medium-gray) !important;
}
.tpg-cop-summary-text strong {
    color: var(--tpg-cop-dark-gray) !important;
    font-weight: 600 !important;
}

.tpg-cop-summary-chevron {
    font-size: 12px !important;
    color: var(--tpg-cop-medium-gray) !important;
    flex-shrink: 0 !important;
    transition: transform 0.2s ease;
}

.tpg-cop-summary-bar[aria-expanded="true"] .tpg-cop-summary-chevron {
    transform: rotate(180deg);
}


/* ==========================================================================
   34. MOBILE DRAWER
   ========================================================================== */

.tpg-cop-drawer {
    display: none !important; /* Hidden at B4+ and when collapsed */
    background: var(--tpg-cop-white) !important;
    border-bottom: 1px solid var(--tpg-cop-gray) !important;
    padding: 0 16px !important;
}

.tpg-cop-drawer[aria-hidden="false"] {
    display: block !important;
}

.tpg-cop-drawer-section {
    padding: 14px 0 !important;
    border-bottom: 1px solid var(--tpg-cop-light-gray) !important;
}
.tpg-cop-drawer-section:last-child {
    border-bottom: none !important;
}

.tpg-cop-drawer-heading {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--tpg-cop-medium-gray) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 8px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.tpg-cop-drawer-link,
.tpg-cop-drawer-link:hover {
    font-size: 14px !important;
    color: var(--tpg-cop-dark-orange) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 400 !important;
    text-decoration: none !important;
}

.tpg-cop-drawer-text {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 14px !important;
    color: var(--tpg-cop-dark-gray) !important;
    line-height: 1.5 !important;
}

.tpg-cop-drawer-meta {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 12px !important;
    color: var(--tpg-cop-medium-gray) !important;
    margin-top: 6px !important;
}
.tpg-cop-drawer-meta--indented {
    padding-left: 32px !important;
}

.tpg-cop-drawer-member {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 6px !important;
    min-height: 32px !important; /* Touch target */
}

.tpg-cop-drawer-avatar {
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    object-fit: cover;
    background: var(--tpg-cop-light-gray) !important;
}

.tpg-cop-drawer-name {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 14px !important;
    color: var(--tpg-cop-black) !important;
}
.tpg-cop-drawer-name--bold {
    font-weight: 600 !important;
}

/* Drawer course mini-rows (smaller than desktop) */
.tpg-cop-drawer-course {
    display: flex !important;
    gap: 8px !important;
    align-items: flex-start !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid var(--tpg-cop-light-gray) !important;
}
.tpg-cop-drawer-course:last-of-type {
    border-bottom: none !important;
}

.tpg-cop-drawer-course-thumb {
    width: 56px !important;
    height: 38px !important;
    flex-shrink: 0 !important;
    position: relative;
    overflow: hidden !important;
    background: var(--tpg-cop-light-gray) !important;
}
.tpg-cop-drawer-course-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}
.tpg-cop-drawer-course-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px !important;
}

.tpg-cop-drawer-course-title {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--tpg-cop-black) !important;
    line-height: 1.3 !important;
}

.tpg-cop-drawer-course-meta {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 10px !important;
    color: var(--tpg-cop-medium-gray) !important;
    margin-top: 3px !important;
}
.tpg-cop-drawer-course-type {
    color: var(--tpg-cop-medium-gray) !important;
}

/* Small tag pills for drawer */
.tpg-cop-tag-pill--sm {
    font-size: 9px !important;
    padding: 1px 6px !important;
}


/* ==========================================================================
   35. RESPONSIVE — Breakpoints B1–B6
   ==========================================================================
   B6: 1280px+    B5: 1024–1279    B4: 840–1023
   B3: 600–839    B2: 480–599      B1: 360–479
   ========================================================================== */

/* ── B5: 1024–1279px ────────────────────────────────────────── */
@media (max-width: 1279px) {
    .tpg-cop-header ~ .llms-group-content.llms-group-profile-content {
        grid-template-columns: 220px minmax(0, 1fr) !important;
    }
}

/* ── B4: 840–1023px ─────────────────────────────────────────── */
@media (max-width: 1023px) {
    .tpg-cop-header ~ .llms-group-content.llms-group-profile-content {
        grid-template-columns: 200px minmax(0, 1fr) !important;
    }

    .tpg-cop-header-name {
        font-size: 24px !important;
    }

    /* Truncate about text to 3 lines */
    .tpg-cop-about-text {
        display: -webkit-box !important;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden !important;
    }

    /* Hide third course mini-row */
    .tpg-cop-course-mini--third {
        display: none !important;
    }
}

/* ── B3 and below: 839px — BREAKPOINT SWITCH ────────────────── */
@media (max-width: 839px) {
    /* Switch to single column */
    .tpg-cop-header ~ .llms-group-content.llms-group-profile-content {
        display: block !important;
        grid-template-columns: none !important;
    }

    /* Hide desktop left panel */
    .tpg-cop-left-panel {
        display: none !important;
    }

    /* Show mobile summary bar and drawer */
    .tpg-cop-summary-bar {
        display: flex !important;
    }

    /* Desktop sidebar container — hide border */
    .llms-group-sidebar.llms-group-profile-sidebar {
        border-right: none !important;
        padding-right: 0 !important;
    }

    /* Right pane takes full width */
    .llms-group-main.llms-group-profile-main {
        padding-left: 0 !important;
    }

    /* Header: stack on mobile */
    .tpg-cop-header {
        flex-wrap: wrap;
        gap: 12px !important;
        padding-bottom: 14px !important;
    }
    .tpg-cop-header-info {
        flex: 1 !important;
        min-width: 0 !important;
    }
    .tpg-cop-header-actions {
        width: auto !important;
    }

    /* Community name */
    .tpg-cop-header-name {
        font-size: 22px !important;
    }

    /* Story content */
    .tpg-cop-story-content {
        font-size: 18px !important;
    }
    .tpg-cop-story-body {
        padding-left: 50px !important;
    }

    /* Story avatars smaller */
    .tpg-cop-story-avatar {
        width: 30px !important;
        height: 30px !important;
    }

    /* Composer avatar smaller */
    .tpg-cop-composer-avatar {
        width: 32px !important;
        height: 32px !important;
    }

    /* Mobile content padding */
    .tpg-cop-right-pane {
        padding: 0 16px 16px !important;
    }

    /* Composer */
    .tpg-cop-composer {
        padding: 12px !important;
        margin: 14px 0 12px !important;
    }

    /* Course cards — stack vertically */
    .tpg-cop-course-card {
        flex-direction: column;
    }
    .tpg-cop-course-card-thumb {
        width: 100% !important;
        height: 160px !important;
    }

    /* Invite email form — stack */
    .tpg-cop-invite-email-form {
        flex-direction: column;
        gap: 8px !important;
    }
    .tpg-cop-invite-email-input {
        width: 100% !important;
        min-width: 0 !important;
    }
    .tpg-cop-invite-role-select {
        width: 100% !important;
    }

    /* Settings form full width */
    .tpg-cop-settings-form {
        max-width: 100% !important;
    }
}

/* ── B2: 480–599px ──────────────────────────────────────────── */
@media (max-width: 599px) {
    .tpg-cop-header-name {
        font-size: 20px !important;
    }

    /* Header description hide on small screens */
    .tpg-cop-header-desc {
        display: none !important;
    }
}

/* ── B1: 360–479px ──────────────────────────────────────────── */
@media (max-width: 479px) {
    .tpg-cop-header-name {
        font-size: 20px !important;
    }

    /* Story images full width */
    .tpg-cop-story-image img {
        width: 100% !important;
    }

    /* Ensure touch targets ≥ 44px */
    .tpg-cop-btn-joined,
    .tpg-cop-btn-join,
    .tpg-cop-btn-overflow,
    .tpg-cop-btn-post,
    .tpg-cop-btn-primary,
    .tpg-cop-btn-secondary,
    .tpg-cop-btn-danger,
    .tpg-cop-invite-send-btn,
    .tpg-cop-conversation-reply-btn,
    .tpg-cop-load-more-btn,
    .tpg-cop-pagination-btn {
        min-height: 44px !important;
    }

    .tpg-cop-reply-btn {
        min-height: 44px !important;
        padding: 8px 14px !important;
    }

    .tpg-cop-summary-bar {
        min-height: 44px !important;
    }

    .tpg-cop-drawer-member {
        min-height: 44px !important;
    }

    /* Composer textarea shorter */
    .tpg-cop-composer-textarea {
        min-height: 36px !important;
    }
    .tpg-cop-composer[data-state="active"] .tpg-cop-composer-textarea,
    .tpg-cop-composer[data-state="ready"] .tpg-cop-composer-textarea {
        min-height: 60px !important;
    }

    /* Header actions — pill + button shrink */
    .tpg-cop-pill-members {
        font-size: 12px !important;
        padding: 3px 10px !important;
    }

    .tpg-cop-btn-joined,
    .tpg-cop-btn-join {
        font-size: 12px !important;
        padding: 0 12px !important;
    }

    /* Back link larger touch target */
    .tpg-cop-back-link {
        display: inline-flex !important;
        align-items: center !important;
        min-height: 44px !important;
        padding: 8px 0 !important;
    }

    /* Invite link display — stack */
    .tpg-cop-invite-link-display {
        flex-direction: column;
        gap: 8px !important;
    }
}

/* ── B4+ : Desktop panel visible, drawer hidden ─────────────── */
@media (min-width: 840px) {
    .tpg-cop-summary-bar {
        display: none !important;
    }
    .tpg-cop-drawer {
        display: none !important;
    }
    .tpg-cop-left-panel {
        display: block !important;
    }
}


/* ==========================================================================
   36. DIRECTORY — Page background + Header
   ========================================================================== */

/* Full-width white background for the whole directory. box-shadow + clip-path
   paint edge-to-edge without triggering a horizontal scrollbar. */
.tpg-cop-dir-page {
    background: var(--tpg-cop-white) !important;
    box-shadow: 0 0 0 100vmax var(--tpg-cop-white) !important;
    clip-path: inset(0 -100vmax) !important;
}

/* Grey band sits behind the header (title / intro / stats) only;
   everything below it stays on the white page background. */
.tpg-cop-dir-header {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 28px 24px 24px !important;
    background: var(--tpg-cop-light-gray) !important;
    box-shadow: 0 0 0 100vmax var(--tpg-cop-light-gray) !important;
    clip-path: inset(0 -100vmax) !important;
}

.tpg-cop-dir-title {
    font-family: var(--tpg-cop-font-heading) !important;
    font-size: 44px !important;
    font-weight: 700 !important;
    color: var(--tpg-cop-black) !important;
    line-height: 1.32 !important;
    letter-spacing: -0.013em !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
}

.tpg-cop-dir-desc {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 20px !important;
    color: var(--tpg-cop-dark-gray) !important;
    line-height: 1.6 !important;
    max-width: 720px !important;
    margin-bottom: 8px !important;
}

.tpg-cop-dir-stats {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 16px !important;
    color: var(--tpg-cop-medium-gray) !important;
    margin-bottom: 0 !important;
    letter-spacing: 0.013em !important;
}
.tpg-cop-dir-stats strong {
    font-weight: 600 !important;
    color: var(--tpg-cop-dark-gray) !important;
}


/* ==========================================================================
   37. DIRECTORY — Filter Tabs
   ========================================================================== */

.tpg-cop-dir-tabs {
    max-width: 1200px !important;
    margin: 28px auto 32px !important;
    padding: 0 24px !important;
    display: flex !important;
    gap: 0 !important;
    border-bottom: 1px solid var(--tpg-cop-gray) !important;
}

.tpg-cop-dir-tab {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: var(--tpg-cop-medium-gray) !important;
    background: none !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    padding: 12px 22px !important;
    cursor: pointer !important;
    margin-bottom: -1px !important;
    white-space: nowrap !important;
    height: auto !important;
    line-height: 1.4 !important;
}
.tpg-cop-dir-tab:hover {
    color: var(--tpg-cop-dark-gray) !important;
    background: none !important;
    border-bottom-color: transparent !important;
}
.tpg-cop-dir-tab--active,
.tpg-cop-dir-tab--active:hover {
    color: var(--tpg-cop-dark-orange) !important;
    border-bottom-color: var(--tpg-cop-dark-orange) !important;
}


/* ==========================================================================
   38. DIRECTORY — Card Grid
   ========================================================================== */

.tpg-cop-dir-grid {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 24px 60px !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px !important;
}

.tpg-cop-dir-card {
    border: 1px solid var(--tpg-cop-gray) !important;
    background: var(--tpg-cop-white) !important;
    overflow: hidden !important;
    cursor: pointer !important;
    transition: border-color 0.15s ease;
    display: flex !important;
    flex-direction: column;
    text-decoration: none !important;
    color: inherit !important;
}
.tpg-cop-dir-card:hover {
    border-color: var(--tpg-cop-dark-orange) !important;
    color: inherit !important;
}
.tpg-cop-dir-card:hover .tpg-cop-dir-card-name {
    color: var(--tpg-cop-dark-orange) !important;
}

.tpg-cop-dir-card-hero {
    position: relative !important;
    height: 120px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}
.tpg-cop-dir-card-hero-img {
    position: absolute !important;
    inset: 0 !important;
    background-size: cover !important;
    background-position: center !important;
}
.tpg-cop-dir-card-hero-pattern {
    position: absolute !important;
    inset: 0 !important;
    background: repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 12px, transparent 12px 24px) !important;
}
.tpg-cop-dir-card-hero-scrim {
    position: absolute !important;
    inset: 0 !important;
}

.tpg-cop-dir-card-body {
    padding: 0 18px 16px !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column;
}

.tpg-cop-dir-card-header {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin-bottom: 12px !important;
}

.tpg-cop-dir-card-logo {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--tpg-cop-white) !important;
    flex-shrink: 0 !important;
    border: 3px solid var(--tpg-cop-white) !important;
    box-sizing: border-box !important;
    margin-top: -24px !important;
    position: relative !important;
    z-index: 2 !important;
}

.tpg-cop-dir-card-name {
    font-family: var(--tpg-cop-font-heading) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--tpg-cop-black) !important;
    line-height: 1.2 !important;
    transition: color 0.15s ease;
    margin: 10px 0 0 !important;
    padding: 0 !important;
}

.tpg-cop-dir-card-count {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 14px !important;
    color: var(--tpg-cop-medium-gray) !important;
    margin-top: 2px !important;
    letter-spacing: 0.013em !important;
}

.tpg-cop-dir-card-desc {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 16px !important;
    color: var(--tpg-cop-dark-gray) !important;
    line-height: 1.625 !important;
    letter-spacing: 0.013em !important;
    margin: 10px 0 16px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
    flex: 1 !important;
}

.tpg-cop-dir-card-footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.tpg-cop-dir-card-avatars {
    display: flex !important;
    align-items: center !important;
}

.tpg-cop-dir-card-av {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    border: 2px solid var(--tpg-cop-white) !important;
    margin-left: -7px !important;
    object-fit: cover;
    background: var(--tpg-cop-light-gray) !important;
}
.tpg-cop-dir-card-av:first-child {
    margin-left: 0 !important;
}

.tpg-cop-dir-card-av-more {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    background: var(--tpg-cop-light-gray) !important;
    border: 2px solid var(--tpg-cop-white) !important;
    box-sizing: border-box !important;
    margin-left: -7px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    color: var(--tpg-cop-medium-gray) !important;
}

.tpg-cop-dir-card-activity {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 14px !important;
    color: var(--tpg-cop-medium-gray) !important;
    letter-spacing: 0.013em !important;
}

.tpg-cop-dir-card-dot {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: var(--tpg-cop-success) !important;
    flex-shrink: 0 !important;
}

.tpg-cop-dir-tag-joined {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--tpg-cop-white) !important;
    background: var(--tpg-cop-blue) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.013em !important;
    padding: 4px 14px !important;
    border-radius: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: normal !important;
    gap: 6px !important;
}


/* ==========================================================================
   39. DIRECTORY — Responsive
   ========================================================================== */

@media (max-width: 1279px) {
    .tpg-cop-dir-grid,
    .tpg-cop-dir-header,
    .tpg-cop-dir-tabs {
        max-width: 960px !important;
    }
    .tpg-cop-dir-title {
        font-size: 42px !important;
    }
}

@media (max-width: 1023px) {
    .tpg-cop-dir-grid,
    .tpg-cop-dir-header,
    .tpg-cop-dir-tabs {
        max-width: 840px !important;
    }
    .tpg-cop-dir-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px !important;
    }
    .tpg-cop-dir-title {
        font-size: 38px !important;
    }
    .tpg-cop-dir-card-name {
        font-size: 20px !important;
    }
}

@media (max-width: 839px) {
    .tpg-cop-dir-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px !important;
        padding: 0 16px 40px !important;
    }
    .tpg-cop-dir-header {
        padding: 20px 16px 20px !important;
    }
    .tpg-cop-dir-tabs {
        padding: 0 16px !important;
        margin-bottom: 24px !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .tpg-cop-dir-title {
        font-size: 32px !important;
    }
    .tpg-cop-dir-desc {
        font-size: 18px !important;
    }
    .tpg-cop-dir-card-name {
        font-size: 20px !important;
    }
    .tpg-cop-dir-card-hero {
        height: 110px !important;
    }
}

@media (max-width: 599px) {
    .tpg-cop-dir-grid {
        grid-template-columns: 1fr;
        gap: 14px !important;
    }
    .tpg-cop-dir-card-hero {
        height: 140px !important;
    }
    .tpg-cop-dir-title {
        font-size: 28px !important;
    }
}

@media (max-width: 479px) {
    .tpg-cop-dir-grid {
        grid-template-columns: 1fr;
        gap: 12px !important;
        padding: 0 12px 32px !important;
    }
    .tpg-cop-dir-header {
        padding: 16px 12px 16px !important;
    }
    .tpg-cop-dir-tabs {
        padding: 0 12px !important;
        margin-bottom: 16px !important;
    }
    .tpg-cop-dir-tab {
        padding: 10px 14px !important;
    }
    .tpg-cop-dir-title {
        font-size: 24px !important;
    }
    .tpg-cop-dir-card-desc {
        -webkit-line-clamp: 1;
    }
    .tpg-cop-dir-card-hero {
        height: 130px !important;
    }
}


/* ==========================================================================
   40. INTERACTIVE STATE POLISH
   ========================================================================== */

/* Focus ring for keyboard navigation */
.tpg-cop-btn-join:focus-visible,
.tpg-cop-btn-joined:focus-visible,
.tpg-cop-btn-overflow:focus-visible,
.tpg-cop-btn-post:focus-visible,
.tpg-cop-btn-primary:focus-visible,
.tpg-cop-btn-secondary:focus-visible,
.tpg-cop-back-link:focus-visible,
.tpg-cop-dir-tab:focus-visible,
.tpg-cop-dir-card:focus-visible,
.tpg-cop-summary-bar:focus-visible {
    outline: 2px solid var(--tpg-cop-dark-orange) !important;
    outline-offset: 2px !important;
}

/* Composer state transition animation */
.tpg-cop-composer {
    transition: border-color 0.2s ease, border-style 0.2s ease !important;
}

/* Tag pill subtle hover */
.tpg-cop-tag-pill:hover {
    filter: brightness(1.1) !important;
}

/* Story card content fade for long text (title attribute handled in PHP) */
.tpg-cop-course-mini-title {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
}


/* ==========================================================================
   41. TIERED ACCESS — Privacy & Membership Model
   ========================================================================== */

.tpg-cop-privacy-note {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 12px !important;
    color: var(--tpg-cop-medium-gray) !important;
    background: var(--tpg-cop-light-gray) !important;
    padding: 8px 14px !important;
    margin-bottom: 12px !important;
    line-height: 1.5 !important;
    border-left: 3px solid var(--tpg-cop-gray) !important;
}

.tpg-cop-invite-note {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 14px !important;
    color: var(--tpg-cop-dark-gray) !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}


/* ==========================================================================
   41. TIERED ACCESS — Membership Note
   ========================================================================== */

.tpg-cop-invite-note {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 14px !important;
    color: var(--tpg-cop-dark-gray) !important;
    line-height: 1.6 !important;
    background: var(--tpg-cop-light-gray) !important;
    padding: 14px 18px !important;
    border-left: 3px solid var(--tpg-cop-blue) !important;
}

/* Courses view — non-member membership note */
.tpg-cop-courses-membership-note {
    background: #E8F4FD !important;
    border: 1px solid #B3D7F0 !important;
    border-left: 3px solid var(--tpg-cop-blue) !important;
    padding: 14px 18px !important;
    margin-bottom: 20px !important;
}
.tpg-cop-courses-membership-note p {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 14px !important;
    color: var(--tpg-cop-dark-gray) !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}


/* ==========================================================================
   42. GUEST BANNER
   ========================================================================== */

.tpg-cop-guest-banner {
    background: linear-gradient(135deg, #E8F4FD, #F0F4F7) !important;
    border: 1px solid #B3D7F0 !important;
    padding: 20px 24px !important;
    margin: 18px 0 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
}

.tpg-cop-guest-banner-text {
    flex: 1 !important;
}

.tpg-cop-guest-banner-title {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--tpg-cop-black) !important;
    margin-bottom: 4px !important;
}

.tpg-cop-guest-banner-desc {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 14px !important;
    color: var(--tpg-cop-dark-gray) !important;
    line-height: 1.5 !important;
}

.tpg-cop-guest-banner-actions {
    display: flex !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
    align-items: center !important;
}

.tpg-cop-btn-guest-signin,
.tpg-cop-btn-guest-signin:hover,
.tpg-cop-btn-guest-signin:focus {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 0 24px !important;
    height: 38px !important;
    border: none !important;
    border-color: transparent !important;
    background: linear-gradient(135deg, var(--tpg-cop-dark-orange), var(--tpg-cop-orange)) !important;
    color: var(--tpg-cop-white) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
}
.tpg-cop-btn-guest-signin:hover {
    background: linear-gradient(135deg, #e04e1f, var(--tpg-cop-dark-orange)) !important;
}

.tpg-cop-btn-guest-courses,
.tpg-cop-btn-guest-courses:hover,
.tpg-cop-btn-guest-courses:focus {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 0 20px !important;
    height: 38px !important;
    border: 1px solid var(--tpg-cop-gray) !important;
    background: var(--tpg-cop-white) !important;
    color: var(--tpg-cop-dark-gray) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
}
.tpg-cop-btn-guest-courses:hover {
    border-color: var(--tpg-cop-dark-orange) !important;
    color: var(--tpg-cop-dark-orange) !important;
}

/* Privacy note */
.tpg-cop-privacy-note {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 12px !important;
    color: var(--tpg-cop-medium-gray) !important;
    background: var(--tpg-cop-light-gray) !important;
    padding: 8px 14px !important;
    margin-bottom: 12px !important;
    border-left: 3px solid var(--tpg-cop-gray) !important;
}

/* Responsive — stack guest banner on mobile */
@media (max-width: 599px) {
    .tpg-cop-guest-banner {
        flex-direction: column;
        text-align: center !important;
        gap: 14px !important;
    }
    .tpg-cop-guest-banner-actions {
        width: 100% !important;
        justify-content: center !important;
    }
    .tpg-cop-btn-guest-signin,
    .tpg-cop-btn-guest-courses {
        flex: 1 !important;
        justify-content: center !important;
    }
}

/* Touch target at B1 */
@media (max-width: 479px) {
    .tpg-cop-btn-guest-signin,
    .tpg-cop-btn-guest-courses {
        min-height: 44px !important;
    }
}


/* ==========================================================================
   43. TEASER GATE
   ========================================================================== */

/* The last visible story fades into the gate */
.tpg-cop-teaser-gate {
    position: relative;
    margin-top: -40px !important;  /* Overlap the bottom of the last story card */
    padding-top: 0 !important;
}

.tpg-cop-teaser-fade {
    height: 80px !important;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.85) 40%,
        rgba(255, 255, 255, 1) 100%
    );
    pointer-events: none;
}

.tpg-cop-teaser-content {
    background: var(--tpg-cop-white) !important;
    text-align: center !important;
    padding: 32px 24px 40px !important;
    border: 1px solid var(--tpg-cop-gray) !important;
    border-top: none !important;
}

.tpg-cop-teaser-icon {
    margin: 0 auto 16px !important;
    display: block !important;
}

.tpg-cop-teaser-title {
    font-family: var(--tpg-cop-font-heading) !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--tpg-cop-black) !important;
    line-height: 1.2 !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
}

.tpg-cop-teaser-desc {
    font-family: var(--tpg-cop-font-body) !important;
    font-size: 16px !important;
    color: var(--tpg-cop-dark-gray) !important;
    line-height: 1.6 !important;
    max-width: 480px !important;
    margin: 0 auto 24px !important;
}

.tpg-cop-teaser-actions {
    display: flex !important;
    gap: 10px !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Responsive — stack on mobile */
@media (max-width: 479px) {
    .tpg-cop-teaser-content {
        padding: 24px 16px 32px !important;
    }
    .tpg-cop-teaser-title {
        font-size: 20px !important;
    }
    .tpg-cop-teaser-desc {
        font-size: 14px !important;
    }
    .tpg-cop-teaser-actions {
        flex-direction: column;
        gap: 8px !important;
    }
    .tpg-cop-teaser-actions .tpg-cop-btn-guest-signin,
    .tpg-cop-teaser-actions .tpg-cop-btn-guest-courses {
        width: 100% !important;
        justify-content: center !important;
    }
}


/* ==========================================================================
   44. GUEST VIEW GATE
   ========================================================================== */

.tpg-cop-guest-gate {
    text-align: center !important;
    padding: 48px 24px !important;
    background: var(--tpg-cop-light-gray) !important;
}

/* ==========================================================================
   45. DIRECTORY — Empty / diagnostic state
   ========================================================================== */
.tpg-cop-dir-empty {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 48px 24px 60px !important;
    text-align: center !important;
    font-family: var(--tpg-cop-font-body) !important;
    color: var(--tpg-cop-medium-gray) !important;
}
.tpg-cop-dir-empty p { font-size: 16px !important; margin: 0 0 8px !important; }
.tpg-cop-dir-empty-hint {
    font-size: 13px !important;
    color: var(--tpg-cop-dark-gray) !important;
    background: var(--tpg-cop-light-gray) !important;
    display: inline-block !important;
    padding: 10px 14px !important;
    margin-top: 8px !important;
}