/* ==========================================================
   PUBLIC COMPANY PLATFORM -- LOCATIONS / TEAM / UPDATES card grids.
   Shared by BOTH the homepage preview sections (home_sections/
   locations_preview.php, team_preview.php, latest_updates.php) and
   their corresponding native full pages (native/locations.php,
   native/team.php, native/updates.php) -- a preview and its full page
   share one data source (HomepageSectionRenderer's own docblock) and
   the exact same CSS classes, never a duplicated/renamed copy. Do not
   move a class out of this file just because one caller happens to be
   homepage-only; check both call sites first.
========================================================== */

/* -- Locations -- */

.cp-locations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}

.cp-location-card {
    background: var(--cp-surface);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-md);
    padding: 16px 18px;
}

/* One continuous "Name │ Address" line instead of a heading stacked
   above a separate paragraph -- frees up the vertical space a second
   line always cost, everywhere this card renders (not just the Side
   Panel below -- there's no real downside to the flowing look in a
   wider grid either, and it keeps a single template/class set for
   both instead of two markup variants toggled by context). */
.cp-location-card__line {
    margin: 0;
    font-size: 13.5px;
    color: var(--cp-text-muted);
}

.cp-location-card__name {
    color: var(--cp-heading);
    font-weight: 800;
}

.cp-location-card__divider {
    display: inline-block;
    width: 1px;
    height: 11px;
    margin: 0 8px;
    background: currentColor;
    opacity: 0.35;
    vertical-align: middle;
}

/* ── Side Panel redesign ──────────────────────────────────────────────
   Scoped entirely to .cp-home-columns__panel -- the exact same
   .cp-locations-grid/.cp-location-card markup above renders completely
   unchanged everywhere else (Main column, native/locations.php never
   even carries the clamp/toggle markup, see locations_preview.php's own
   comment). A section already renders inside .cp-home-columns__panel
   whenever it's placed there (07_homepage.css), so a plain descendant
   selector is enough -- no second template needed for a panel-only
   look. */

.cp-home-columns__panel .cp-home-section__title#cp-section-locations {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cp-home-columns__panel .cp-home-section__title#cp-section-locations::before {
    content: '';
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    background: var(--cp-primary, #137A5A);
    mask-image: url('/assets/images/tools/icons/pin-solid.svg');
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-image: url('/assets/images/tools/icons/pin-solid.svg');
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}

.cp-home-columns__panel .cp-locations-grid {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Flat card -- no border/shadow, just a quiet tint against the panel's
   own white card background, one per location instead of the bordered
   box every other context uses. */
.cp-home-columns__panel .cp-location-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--cp-bg);
    border: none;
    border-radius: var(--cp-radius-sm);
    padding: 12px 14px;
}

/* Inverted from the header's own solid icon above -- stroke/outline
   only, same pin shape, so the row-level icon reads as a quieter echo
   of the header's rather than competing with it. */
.cp-home-columns__panel .cp-location-card::before {
    content: '';
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    background: var(--cp-text-muted);
    mask-image: url('/assets/images/tools/icons/pin-outline.svg');
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-image: url('/assets/images/tools/icons/pin-outline.svg');
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}

.cp-home-columns__panel .cp-location-card__body {
    min-width: 0;
}

/* 2 lines, not Personal Stream's excerpt clamp value -- a location
   line is a much shorter, denser piece of text than a post caption, and
   this card is already flat/compact. Panel-only (unlike the continuous-
   line markup above, which is universal) -- Main column/native page
   have real room to just wrap a long address across as many lines as it
   needs. Lifted entirely (see site.js's fitInlineLocationLineToggle())
   when the line doesn't actually overflow two lines -- never shows "See
   more" on a short one with nothing further to reveal. */
.cp-home-columns__panel .cp-location-card__line--clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cp-location-card__line-toggle {
    display: inline;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--cp-primary, #137A5A);
    cursor: pointer;
    font-size: inherit;
    font-weight: 700;
}

.cp-location-card__line-toggle:hover {
    text-decoration: underline;
}

/* -- Team -- deliberately non-interactive cards, no <a> -- */

.cp-team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 18px;
}

.cp-team-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
}

.cp-team-card__avatar {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--cp-surface-soft);
    color: var(--cp-primary, #137A5A);
    display: grid;
    place-items: center;
    font-size: 26px;
    font-weight: 800;
    overflow: hidden;
    margin-bottom: 6px;
}

.cp-team-card__avatar img { width: 100%; height: 100%; object-fit: cover; }

.cp-team-card__name {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--cp-heading);
}

.cp-team-card__role {
    font-size: 12.5px;
    color: var(--cp-text-faint);
}

/* -- Updates -- stream-style: each post is its own engagement card
   (reactions/comments), not a preview tile in a grid -- shared by the
   homepage Latest Updates preview and the native Updates page via one
   partial (public/partials/post_card.php) and one data source
   (PublicPostFeedBuilder). No Layout/Alignment variants apply here
   (09_layout_alignment.css never targets .cp-post-feed/.cp-post) -- a
   feed of full-width posts has nothing left for grid/carousel/blocks or
   left/center/right to arrange, unlike Locations/Team above. */

.cp-post-feed {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* No padding on the card itself -- .cp-post__media/.cp-post__gallery
   need to run edge to edge (this card's own overflow:hidden clips them
   to its rounded corners instead), so every other section carries its
   own horizontal padding individually rather than inheriting it here.
   Mirrors Company/Personal Stream's identical split (.cw-post/.pw-post
   have no padding of their own either). */
.cp-post {
    background: var(--cp-surface);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-md);
    overflow: hidden;
}

.cp-post__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 20px 0;
}

.cp-post__avatar {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: var(--cp-primary, #137A5A);
    color: var(--cp-inverse);
    font-size: 15px;
    font-weight: 800;
}

.cp-post__avatar--image { background: var(--cp-surface-soft); }
.cp-post__avatar img { width: 100%; height: 100%; object-fit: cover; }

.cp-post__author-block {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.cp-post__author {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--cp-heading);
}

.cp-post__time {
    font-size: 12.5px;
    color: var(--cp-text-faint);
}

.cp-post__body { margin-top: 12px; padding: 0 20px; }

.cp-post__title {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 800;
    color: var(--cp-heading);
}

.cp-post__excerpt {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--cp-text);
    /* Renders the post's own literal blank-line paragraph breaks (see
       PostContentRenderer::normalizeParagraphBreaks()) as real visible
       gaps -- matches Personal Stream's own .pw-post__excerpt
       (workspace/20_feed.css) so a multi-paragraph post reads the same
       way on both surfaces instead of running every line together. */
    white-space: pre-wrap;
}

/* Clamped to the first 2 lines, matching every other Stream surface
   (Personal/Business Identity Workspace, Company Hub). A blank-line
   paragraph gap still counts as a line for this clamp. Lifted entirely
   (see site.js's fitInlineExcerptToggle()) when the excerpt doesn't
   actually overflow it -- never shows "more" on a post with nothing
   further to reveal. */
.cp-post__excerpt--clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Backend-resolved account/company tags only (post.mentions) -- matches
   Personal Stream's own .pw-mention (workspace/20_feed.css). Rendered by
   PostContentRenderer::renderHtml() (PHP); this page never re-renders an
   excerpt client-side (no JS post-card template to keep in sync with --
   see PublicPostFeedBuilder's own docblock), so there's no matching JS
   copy needed here. */
.cp-mention {
    color: var(--cp-primary, #137A5A);
    font-weight: 700;
}

.cp-post__excerpt-toggle {
    display: inline;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--cp-primary, #137A5A);
    cursor: pointer;
    font-size: inherit;
    font-weight: 700;
}

.cp-post__excerpt-toggle:hover {
    text-decoration: underline;
}

/* Full-bleed -- no horizontal padding, no radius/overflow of their own;
   the card's own border-radius + overflow:hidden already clips these to
   its corners when they're the section that happens to touch top/bottom
   edge (e.g. no title/excerpt above them). */
.cp-post__media {
    margin-top: 12px;
    cursor: pointer;
}

.cp-post__media img {
    display: block;
    width: 100%;
    max-height: 420px;
    object-fit: cover;
}

.cp-post__gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
    margin-top: 12px;
    cursor: pointer;
}

.cp-post__gallery-item img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.cp-post__link-preview {
    display: flex;
    gap: 0;
    margin: 12px 20px 0;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-sm);
    overflow: hidden;
    text-decoration: none;
    transition: background var(--cp-transition);
}

.cp-post__link-preview:hover { background: var(--cp-surface-soft); }

.cp-post__link-preview-thumb {
    flex: 0 0 96px;
    width: 96px;
    height: 96px;
    object-fit: cover;
}

.cp-post__link-preview-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 10px 14px;
    min-width: 0;
}

.cp-post__link-preview-site {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--cp-text-faint);
}

.cp-post__link-preview-title {
    font-size: 14px;
    color: var(--cp-heading);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cp-post__engagement {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    padding: 12px 20px 18px;
    border-top: 1px solid var(--cp-border);
}

.cp-post__engagement-left {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cp-post__action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: transparent;
    padding: 6px 10px;
    border-radius: var(--cp-radius-pill);
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--cp-text-muted);
    cursor: pointer;
    transition: background var(--cp-transition), color var(--cp-transition);
}

.cp-post__action:hover { background: var(--cp-surface-soft); }

.cp-post__action.is-active {
    color: var(--cp-primary, #137A5A);
}

/* Comment/React render their glyph via Material Symbols Outlined (Google
   Fonts, loaded in company_public_layout.php) through a ::before {
   content: "..." } pseudo-element -- the exact same technique Personal
   Stream's own feed uses for these two icons (workspace/20_feed.css's
   .pw-feed-action__icon--comment/--reaction), the reference this whole
   card mirrors. Not mask-image -- kept as plain sized boxes here, sizing
   only; the glyph itself is a separate rule below. */
.cp-post__action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
}

.cp-post__action-icon--comment::before {
    content: "chat_bubble";
    font-family: 'Material Symbols Outlined';
    font-size: 18px;
    line-height: 1;
    color: currentColor;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

/* ── Reaction picker ──────────────────────────────────────────────────
   Six canonical types (WorkspaceFeedInteractionRepository::REACTION_TYPES),
   same glyphs/colors as Personal Stream's identical .pw-reaction* --
   clicking the main button opens this instead of firing a reaction
   directly; only a picker option actually reacts (site.js's
   selectReaction()). data-active-type on the main button drives both
   which glyph it shows and (while .is-active) its accent color. */
.cp-post-reaction { position: relative; }

.cp-post__action-icon--reaction::before {
    content: "thumb_up";
    font-family: 'Material Symbols Outlined';
    font-size: 18px;
    line-height: 1;
    color: currentColor;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

.cp-post__action--react.is-active .cp-post__action-icon--reaction::before {
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20;
}

.cp-post__action--react[data-active-type="heart"] .cp-post__action-icon--reaction::before { content: "favorite"; }
.cp-post__action--react[data-active-type="laugh"] .cp-post__action-icon--reaction::before { content: "sentiment_satisfied_alt"; }
.cp-post__action--react[data-active-type="celebrate"] .cp-post__action-icon--reaction::before { content: "celebration"; }
.cp-post__action--react[data-active-type="support"] .cp-post__action-icon--reaction::before { content: "volunteer_activism"; }
.cp-post__action--react[data-active-type="dislike"] .cp-post__action-icon--reaction::before { content: "thumb_down"; }

.cp-post__action--react.is-active[data-active-type="like"] { color: var(--cp-reaction-like); }
.cp-post__action--react.is-active[data-active-type="heart"] { color: var(--cp-reaction-heart); }
.cp-post__action--react.is-active[data-active-type="laugh"] { color: var(--cp-reaction-laugh); }
.cp-post__action--react.is-active[data-active-type="celebrate"] { color: var(--cp-reaction-celebrate); }
.cp-post__action--react.is-active[data-active-type="support"] { color: var(--cp-reaction-support); }
.cp-post__action--react.is-active[data-active-type="dislike"] { color: var(--cp-reaction-dislike); }

.cp-post-reaction-picker {
    position: absolute;
    bottom: 100%;
    left: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 2px;
    margin-bottom: 6px;
    padding: 6px;
    background: var(--cp-surface);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-pill);
    box-shadow: 0 8px 24px rgba(16, 21, 29, .12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px) scale(.94);
    transform-origin: bottom left;
    transition: opacity .14s ease, transform .14s ease;
}

.cp-post-reaction-picker:not([hidden]) {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

@media (hover: hover) and (pointer: fine) {
    .cp-post-reaction:hover .cp-post-reaction-picker[hidden] {
        display: flex;
    }
}

.cp-post-reaction:focus-within .cp-post-reaction-picker[hidden] {
    display: flex;
}

.cp-post-reaction-picker__option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: var(--cp-text-muted);
    cursor: pointer;
    transition: transform .12s ease, background var(--cp-transition), color var(--cp-transition);
}

.cp-post-reaction-picker__option:hover {
    background: var(--cp-surface-soft);
    transform: scale(1.18);
}

.cp-post-reaction-picker__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
}

.cp-post-reaction-picker__icon::before {
    font-family: 'Material Symbols Outlined';
    font-size: 19px;
    line-height: 1;
    color: currentColor;
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20;
}

.cp-post-reaction-picker__option[data-reaction-type="like"] .cp-post-reaction-picker__icon::before { content: "thumb_up"; }
.cp-post-reaction-picker__option[data-reaction-type="heart"] .cp-post-reaction-picker__icon::before { content: "favorite"; }
.cp-post-reaction-picker__option[data-reaction-type="laugh"] .cp-post-reaction-picker__icon::before { content: "sentiment_satisfied_alt"; }
.cp-post-reaction-picker__option[data-reaction-type="celebrate"] .cp-post-reaction-picker__icon::before { content: "celebration"; }
.cp-post-reaction-picker__option[data-reaction-type="support"] .cp-post-reaction-picker__icon::before { content: "volunteer_activism"; }
.cp-post-reaction-picker__option[data-reaction-type="dislike"] .cp-post-reaction-picker__icon::before { content: "thumb_down"; }

.cp-post-reaction-picker__option[data-reaction-type="like"]:hover { color: var(--cp-reaction-like); }
.cp-post-reaction-picker__option[data-reaction-type="heart"]:hover { color: var(--cp-reaction-heart); }
.cp-post-reaction-picker__option[data-reaction-type="laugh"]:hover { color: var(--cp-reaction-laugh); }
.cp-post-reaction-picker__option[data-reaction-type="celebrate"]:hover { color: var(--cp-reaction-celebrate); }
.cp-post-reaction-picker__option[data-reaction-type="support"]:hover { color: var(--cp-reaction-support); }
.cp-post-reaction-picker__option[data-reaction-type="dislike"]:hover { color: var(--cp-reaction-dislike); }

.cp-post__cta {
    padding: 6px 16px;
    border-radius: var(--cp-radius-pill);
    background: var(--cp-primary, #137A5A);
    color: var(--cp-inverse);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.cp-post__cta:hover { opacity: .92; }

/* ── Reaction summary (overlapping icons + total) ────────────────────
   Right-aligned sibling of .cp-post__engagement-left -- only rendered
   server-side when the post has at least one reaction (post_card.php).
   Clicking it opens the reactor-list panel below. Same glyphs/colors as
   the picker, just white-on-color instead of currentColor-on-transparent
   -- mirrors Personal Stream's .pw-reaction-summary/.pw-reaction-badge. */
.cp-reaction-summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding: 4px 10px 4px 4px;
    background: transparent;
    border: 0;
    border-radius: var(--cp-radius-pill);
    color: var(--cp-text-muted);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--cp-transition);
}

.cp-reaction-summary:hover { background: var(--cp-surface-soft); }

.cp-reaction-summary__icons {
    display: inline-flex;
    align-items: center;
}

.cp-reaction-summary__icon {
    width: 18px;
    height: 18px;
    margin-left: -6px;
}

.cp-reaction-summary__icon:first-child { margin-left: 0; }

.cp-reaction-badge {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    border-radius: 50%;
    box-shadow: 0 0 0 1.5px var(--cp-surface);
}

.cp-reaction-badge::before {
    content: '';
    position: absolute;
    inset: 15%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: 'Material Symbols Outlined';
    font-size: 11px;
    line-height: 1;
    font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 20;
}

.cp-reaction-badge--like { background: var(--cp-reaction-like); }
.cp-reaction-badge--like::before { content: "thumb_up"; }
.cp-reaction-badge--heart { background: var(--cp-reaction-heart); }
.cp-reaction-badge--heart::before { content: "favorite"; }
.cp-reaction-badge--laugh { background: var(--cp-reaction-laugh); }
.cp-reaction-badge--laugh::before { content: "sentiment_satisfied_alt"; }
.cp-reaction-badge--celebrate { background: var(--cp-reaction-celebrate); }
.cp-reaction-badge--celebrate::before { content: "celebration"; }
.cp-reaction-badge--support { background: var(--cp-reaction-support); }
.cp-reaction-badge--support::before { content: "volunteer_activism"; }
.cp-reaction-badge--dislike { background: var(--cp-reaction-dislike); }
.cp-reaction-badge--dislike::before { content: "thumb_down"; }

/* ── Reactor-list panel (right-side sheet) ───────────────────────────
   Single shared instance built once by site.js and reused for whichever
   post's reaction summary was clicked -- same pattern as the comments
   modal above. Read-only, no account needed to view who reacted. */
.cp-reactor-panel {
    position: fixed;
    inset: 0;
    z-index: 1200;
}

.cp-reactor-panel[hidden] { display: none; }

.cp-reactor-panel-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 21, 29, .32);
}

.cp-reactor-panel-sheet {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    width: min(380px, 100%);
    background: var(--cp-surface);
    box-shadow: -12px 0 32px rgba(15, 21, 29, .18);
    transform: translateX(100%);
    transition: transform .22s ease;
}

.cp-reactor-panel.is-open .cp-reactor-panel-sheet {
    transform: translateX(0);
}

.cp-reactor-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid var(--cp-border);
}

.cp-reactor-panel__title {
    margin: 0;
    color: var(--cp-heading);
    font-size: 16px;
    font-weight: 800;
}

.cp-reactor-panel__close {
    width: 30px;
    height: 30px;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: var(--cp-text-muted);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.cp-reactor-panel__close:hover { background: var(--cp-surface-soft); }

.cp-reactor-panel__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--cp-border);
}

.cp-reactor-panel__filter {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background: var(--cp-surface-soft);
    border: 1px solid transparent;
    border-radius: var(--cp-radius-pill);
    color: var(--cp-text-muted);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
}

.cp-reactor-panel__filter-icon {
    width: 15px;
    height: 15px;
}

.cp-reactor-panel__filter.is-active {
    background: var(--cp-surface-soft);
    border-color: var(--cp-primary, #137A5A);
    color: var(--cp-primary, #137A5A);
}

.cp-reactor-panel__list {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 6px 10px;
}

.cp-reactor-panel__state {
    padding: 24px 12px;
    color: var(--cp-text-muted);
    font-size: 13.5px;
    text-align: center;
}

.cp-reactor-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 8px;
    border-radius: var(--cp-radius-sm);
}

.cp-reactor-row:hover { background: var(--cp-surface-soft); }

.cp-reactor-row__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    background: var(--cp-surface-soft);
    border-radius: 50%;
    color: var(--cp-primary, #137A5A);
    font-size: 13px;
    font-weight: 800;
}

.cp-reactor-row__avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.cp-reactor-row__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: var(--cp-text);
    font-size: 13.5px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cp-reactor-row__glyph {
    width: 20px;
    height: 20px;
}

/* ── Full-screen media viewer ─────────────────────────────────────────
   Clicking a post's media opens this -- edge-to-edge photo viewer with
   a black letterbox background, prev/next for a gallery, mirroring
   Personal Stream's own post-detail modal minus its meta/text/comments
   side panel (already covered by this card and the comments modal). */
.cp-media-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1300;
    background: #000;
}

.cp-media-modal-backdrop[hidden] { display: none; }

.cp-media-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 3;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, .12);
    border: 0;
    border-radius: 50%;
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.cp-media-modal-close:hover { background: rgba(255, 255, 255, .22); }

.cp-media-modal-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.cp-media-modal-stage img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.cp-media-modal-count {
    position: absolute;
    left: 50%;
    bottom: 18px;
    z-index: 3;
    transform: translateX(-50%);
    padding: 6px 12px;
    color: #fff;
    background: rgba(16, 21, 29, .7);
    border-radius: var(--cp-radius-pill);
    font-size: 12px;
    font-weight: 800;
}

.cp-media-modal-nav {
    position: absolute;
    top: 50%;
    z-index: 3;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, .12);
    border: 0;
    border-radius: var(--cp-radius-pill);
    color: #fff;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    transition: background .15s ease;
}

.cp-media-modal-nav:hover { background: rgba(255, 255, 255, .22); }
.cp-media-modal-nav--prev { left: 16px; }
.cp-media-modal-nav--next { right: 16px; }

.cp-post__auth-prompt {
    margin-top: 10px;
    padding: 0 20px 18px;
    font-size: 13px;
    color: var(--cp-text-muted);
}

.cp-post__auth-prompt a {
    color: var(--cp-primary, #137A5A);
    font-weight: 700;
    text-decoration: none;
}

.cp-post__auth-prompt a:hover { text-decoration: underline; }

.cp-post__comments {
    margin-top: 12px;
    padding: 12px 20px 18px;
    border-top: 1px solid var(--cp-border);
}

.cp-post__comments-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cp-post__comments-list:empty { display: none; }

/* No bubble chrome -- a comment is just an avatar plus name+time on one
   row, then its text below, the same flat presentation every stream
   surface now shares (see the Company/Personal Stream equivalents). */
.cp-post-comment {
    display: flex;
    gap: 8px;
}

.cp-post-comment__avatar {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: var(--cp-surface-soft);
    color: var(--cp-primary, #137A5A);
    font-size: 12px;
    font-weight: 800;
}

.cp-post-comment__avatar img { width: 100%; height: 100%; object-fit: cover; }

.cp-post-comment__body { min-width: 0; }

.cp-post-comment__row {
    display: flex;
    align-items: baseline;
    gap: 7px;
    flex-wrap: wrap;
}

.cp-post-comment__author {
    font-size: 13px;
    font-weight: 700;
    color: var(--cp-heading);
    text-decoration: none;
}

a.cp-post-comment__author:hover { text-decoration: underline; }

.cp-post-comment__time {
    font-size: 11.5px;
    color: var(--cp-text-faint);
}

.cp-post-comment__text {
    margin: 0;
    font-size: 13.5px;
    color: var(--cp-text);
    overflow-wrap: break-word;
}

.cp-post__comments-empty {
    margin: 0;
    font-size: 13px;
    color: var(--cp-text-faint);
}

/* Reply/Edit/Delete -- own row below the text, separate from the
   name+time row above it (see 08_content.css's own .cp-post-comment
   docblock). Delete only ever renders server-side for the comment's own
   author (WorkspaceFeedCommentNormalizer's capabilities.can_delete) --
   there's no "manager" concept on this anonymous-capable site. */
.cp-post-comment__meta {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}

.cp-post-comment__reply,
.cp-post-comment__edit,
.cp-post-comment__delete {
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--cp-text-faint);
    cursor: pointer;
    font-size: 11.5px;
    font-weight: 700;
}

.cp-post-comment__reply:hover,
.cp-post-comment__edit:hover {
    color: var(--cp-primary, #137A5A);
    text-decoration: underline;
}

.cp-post-comment__delete:hover {
    color: var(--cp-danger);
    text-decoration: underline;
}

.cp-post-comment__edited {
    color: var(--cp-text-faint);
    font-size: 11.5px;
    font-style: italic;
}

/* Reply (one level of nesting under a top-level comment). */
.cp-post-comment--reply {
    margin-left: 36px;
}

.cp-post-comment__reply-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 4px 0 8px 36px;
}

.cp-post-comment__reply-input {
    min-height: 34px;
    max-height: 100px;
    padding: 7px 10px;
    background: var(--cp-bg);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-sm);
    font: inherit;
    font-size: 13px;
    color: var(--cp-text);
    resize: none;
    overflow-y: auto;
}

.cp-post-comment__reply-actions,
.cp-post-comment__edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.cp-post-comment__reply-actions { margin-top: 2px; }
.cp-post-comment__edit-actions { margin-top: 6px; }

.cp-post-comment__reply-cancel {
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--cp-text-faint);
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
}

.cp-post-comment__reply-cancel:hover { color: var(--cp-text); }

.cp-post-comment__reply-submit {
    padding: 4px 12px;
    border: 0;
    border-radius: var(--cp-radius-pill);
    color: var(--cp-inverse);
    background: var(--cp-primary, #137A5A);
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
}

.cp-post-comment__reply-submit:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* Edit (inline text-swap, no modal). */
.cp-post-comment__edit-form { margin-top: 6px; }

.cp-post-comment__edit-input {
    width: 100%;
    min-height: 36px;
    padding: 8px 10px;
    background: var(--cp-surface);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-sm);
    font: inherit;
    font-size: 13.5px;
    color: var(--cp-text);
    resize: none;
}

.cp-post-comment__edit-error {
    margin: 4px 0 0;
    color: var(--cp-danger);
    font-size: 12px;
}

.cp-post__comments-more {
    display: block;
    margin: 2px auto 0;
    background: transparent;
    border: none;
    padding: 4px;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--cp-primary, #137A5A);
    cursor: pointer;
}

.cp-post__comments-more:hover { text-decoration: underline; }

.cp-post__comment-form {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-top: 10px;
}

.cp-post__comment-input {
    flex: 1 1 auto;
    resize: none;
    max-height: 96px;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-md);
    padding: 8px 12px;
    font: inherit;
    font-size: 13.5px;
    color: var(--cp-text);
    background: var(--cp-bg);
}

.cp-post__comment-input:focus {
    outline: none;
    border-color: var(--cp-primary, #137A5A);
}

/* Matches Personal Stream's own .pw-post__comment-submit exactly
   (workspace/20_feed.css) -- a ghost icon button, not the filled
   colored circle this used to be, per explicit instruction not to
   invent a different affordance for the same action on this surface. */
.cp-post__comment-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: var(--cp-radius-pill);
    color: var(--cp-primary, #137A5A);
    cursor: pointer;
}

.cp-post__comment-submit:hover:not(:disabled) {
    background: var(--cp-bg);
}

.cp-post__comment-submit:disabled {
    color: var(--cp-text-faint);
    cursor: not-allowed;
}

.cp-comment-box__submit-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    background: currentColor;
    mask-image: url("/assets/images/tools/icons/send.svg");
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-image: url("/assets/images/tools/icons/send.svg");
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}

/* Comment modal -- clicking a post's Comment action moves that exact
   .cp-post node (not a copy: same DOM, so its reaction state/data stays
   live) into this shell's scrollable body, and moves just its
   .cp-post__comment-form into the fixed footer below -- see site.js's
   openPostCommentsModal(). Built once and reused for every post; both
   are restored to their original position in the feed on close. Only
   one owner file needed for a single-use generic overlay -- if a second
   modal need appears on this site later, extract into its own owner
   file then, not preemptively. */
.cp-post-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(16, 21, 29, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    /* ~20px clear of the viewport top/bottom; horizontal stays wider so
       a narrower viewport doesn't force the 720px panel to shrink sooner
       than it needs to. */
    padding: 20px 24px;
    z-index: 1000;
}

.cp-post-modal-backdrop[hidden] { display: none; }

.cp-post-modal-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 720px;
    max-height: calc(100vh - 40px);
    background: var(--cp-surface);
    border-radius: var(--cp-radius-lg);
    overflow: hidden;
}

/* Modal chrome header -- "{Name}'s Post" + close, matching the reference
   (Facebook's own post modal): a fixed title bar of its own, separate
   from the moved .cp-post's own author row underneath (which keeps its
   avatar unchanged -- only this chrome header has no avatar, because it
   never had one to begin with, not because one was removed from it).
   Title text is set by openCommentsModal() (site.js) from the card's own
   author name at open time. */
.cp-post-modal-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex: 0 0 auto;
    padding: 14px 12px 14px 20px;
    border-bottom: 1px solid var(--cp-border);
}

.cp-post-modal-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    color: var(--cp-heading);
    font-size: 16px;
    font-weight: 800;
}

.cp-post-modal-close {
    position: static;
    z-index: 1;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: var(--cp-surface-soft);
    color: var(--cp-text-muted);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.cp-post-modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 10px 0px 8px;
}

/* The modal panel is already the card -- flatten the moved .cp-post's
   own chrome so it doesn't double up as a card-inside-a-card. */
.cp-post-modal-body > .cp-post {
    background: transparent;
    border: none;
    border-radius: 0;
}

.cp-post-modal-footer {
    flex: 0 0 auto;
    padding: 12px 20px 30px;
    border-top: 1px solid var(--cp-border);
}

.cp-post-modal-footer .cp-post__comment-form { margin-top: 0; }


@media (max-width: 560px) {
    /* General homepage section content */
    .cp-home-section__inner {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Feed post header */
    .cp-post__header {
        padding: 12px 12px 0;
    }

    /* Feed post text/body */
    .cp-post__body {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Post engagement/actions */
    .cp-post__engagement,
    .cp-post__actions {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* General body/content copy */
    .cp-home-section p,
    .cp-post__excerpt,
    .cp-post__body {
        font-size: 13px;
        line-height: 1.45;
    }

    /* Section headings */
    .cp-home-section h2,
    .cp-home-section__title {
        font-size: 18px;
        line-height: 1.25;
    }

    /* Post author/company name */
    .cp-post__author-name {
        font-size: 13px;
        line-height: 1.3;
    }

    /* Post metadata/timestamps */
    .cp-post__meta,
    .cp-post__time {
        font-size: 11px;
        line-height: 1.3;
    }

    /* Profile/navigation tabs */
    .cp-profile-tabs {
        font-size: 12px;
    }
}