/* amCore.content-detail.css — shared fleet content item detail (FamStories/amEvent parity).
   Modules keep prefixed template classes (amGroup-detail-*); selectors use [class*="-"] attribute patterns.
   Do not duplicate this file per module.
*/

/* ------------------------------------------------------------------ */
/* Detail page                                                          */
/* ------------------------------------------------------------------ */
[class*="-detail__cover-img"] {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

[class*="-detail__title"] {
    font-size: var(--am-font-size-2xl, 1.5rem);
    font-weight: var(--am-font-weight-bold, 700);
    margin: var(--am-space-2, .5rem) 0 var(--am-space-1, 0.25rem);
    text-transform: uppercase;
    text-align: left;
}

[class*="-detail__meta-strip"] {
    display: block;
    margin: calc(var(--am-space-1) / 2) 0 0;
    padding: var(--am-space-2, 0.5rem) 0 0;
    border: none;
    border-top: 1px solid var(--am-border-muted, var(--am-border-default));
    border-radius: 0;
    background: transparent;
    box-sizing: border-box;
    --amEvent-detail-meta-text-size: calc(var(--am-font-sm-rem, var(--am-font-sm)) + 2px);
    font-size: var(--amEvent-detail-meta-text-size);
    color: var(--am-text-secondary, var(--am-color-text-secondary));
    line-height: var(--am-line-height-normal, 1.4);
    overflow: visible;
    position: relative;
    z-index: 2;
}

/* One row on wide viewports; wrap into multiple bands on narrower screens */
[class*="-detail__meta-strip-inner"] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--am-space-6, var(--am-space-5));
    overflow-x: visible;
    overflow-y: visible;
    scrollbar-width: thin;
    min-width: 0;
    padding-top: var(--am-space-5);
    padding-bottom: var(--am-space-1);
    margin-top: calc(-1 * var(--am-space-5));
    margin-inline: calc(var(--am-space-1) * -1);
    padding-inline: var(--am-space-2);
}

[class*="-detail__meta-chip-img"] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    object-fit: contain;
}

[class*="-detail__meta-chip"],
a[class*="-detail__meta-chip"] {
    flex: 0 1 auto;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--am-space-2);
    max-width: min(16rem, 100%);
    min-width: 0;
    color: var(--am-text-secondary, var(--am-color-text-secondary));
    position: relative;
}

/* Tooltip stacking above meta row (appearance: amCore.tooltips.css). */
[class*="-detail__meta-chip"][data-am-tooltip]:hover,
[class*="-detail__meta-chip"][data-am-tooltip]:focus-visible {
    z-index: 5;
}

span[class*="-detail__meta-chip"][data-am-tooltip] {
    cursor: default;
}

span[class*="-detail__meta-chip"][data-am-tooltip]:focus {
    outline: none;
}

span[class*="-detail__meta-chip"][data-am-tooltip]:focus-visible {
    outline: 2px solid var(--am-primary, var(--am-color-primary));
    outline-offset: 2px;
    border-radius: var(--am-radius-sm, 4px);
}

a[class*="-detail__meta-chip"] {
    text-decoration: none;
    border-radius: var(--am-radius-sm, 4px);
    color: var(--am-text-secondary, var(--am-color-text-secondary));
}

a[class*="-detail__meta-chip"]:focus-visible {
    outline: 2px solid var(--am-primary, var(--am-color-primary));
    outline-offset: 2px;
}

[class*="-detail__meta-chip"]:hover {
    color: var(--am-text-primary, var(--am-color-text-primary));
}

a[class*="-detail__meta-chip"]:hover {
    color: var(--am-primary, var(--am-color-primary));
}

[class*="-detail__meta-chip__val"] {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    font-size: var(--amEvent-detail-meta-text-size, calc(var(--am-font-sm-rem, var(--am-font-sm)) + 2px));
    font-weight: var(--am-font-weight-semibold, 600);
    color: var(--am-text-primary, var(--am-color-text-primary));
    text-transform: uppercase;
    line-height: var(--am-line-height-normal, 1.4);
}

/* Published line: same sizing as other meta chips. */
[class*="-detail__meta-chip--published"] [class*="-detail__meta-chip__val"] {
    font-size: var(--amEvent-detail-meta-text-size, calc(var(--am-font-sm-rem, var(--am-font-sm)) + 2px));
    font-weight: var(--am-font-weight-semibold, 600);
    color: var(--am-text-primary, var(--am-color-text-primary));
    text-transform: uppercase;
}

/* Legacy: if any .am-badge remains in meta chips, strip pill chrome so sizing matches __val. */
[class*="-detail__meta-strip"] [class*="-detail__meta-chip"] .am-badge {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    max-width: 100%;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-transform: uppercase;
    font-size: var(--amEvent-detail-meta-text-size, calc(var(--am-font-sm-rem, var(--am-font-sm)) + 2px));
    font-weight: var(--am-font-weight-semibold, 600);
    color: var(--am-text-primary, var(--am-color-text-primary));
    line-height: var(--am-line-height-normal, 1.4);
}

[class*="-detail__text"] {
    line-height: var(--am-line-height-relaxed, 1.8);
    font-size: var(--am-font-size-base, 1rem);
    color: var(--am-color-text-primary, #111);
}

/* Article detail layout (blog-like article chrome; design tokens only) */
[class*="-post-detail"].am-card {
    /* Visible overflow so meta-chip ::after tooltips can extend above the meta row (titles/breadcrumbs). */
    overflow: visible;
    border-radius: var(--am-radius-lg, var(--am-radius-md));
    border: 1px solid var(--am-border-default, var(--am-color-border));
    box-shadow: var(--am-shadow-sm, none);
}

/* Rounded corners were previously enforced via overflow:hidden on the card; clip media/body corners locally. */
[class*="-post-detail"].am-card > [class*="-detail-hero"].am-card__media:first-child {
    border-top-left-radius: var(--am-radius-lg, var(--am-radius-md));
    border-top-right-radius: var(--am-radius-lg, var(--am-radius-md));
}

[class*="-post-detail"].am-card > [class*="-detail-body"].am-card__body:last-child {
    border-bottom-left-radius: var(--am-radius-lg, var(--am-radius-md));
    border-bottom-right-radius: var(--am-radius-lg, var(--am-radius-md));
}

[class*="-post-detail"].am-card > [class*="-detail-body"].am-card__body:first-child {
    border-top-left-radius: var(--am-radius-lg, var(--am-radius-md));
    border-top-right-radius: var(--am-radius-lg, var(--am-radius-md));
}

[class*="-detail__breadcrumb-row"] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    column-gap: var(--am-space-4);
    row-gap: var(--am-space-2);
    margin: 0;
    position: relative;
    z-index: 0;
}

[class*="-detail__breadcrumb-row"] [class*="-detail-breadcrumb"] {
    flex: 1 1 auto;
    min-width: 0;
}

[class*="-detail__breadcrumb-actions"] {
    flex: 0 0 auto;
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: flex-start;
}

[class*="-detail-breadcrumb--above-title"] {
    margin-top: 0;
    margin-bottom: 0;
}

[class*="-detail-hero"].am-card__media {
    margin: 0;
    padding: 0;
    line-height: 0;
    aspect-ratio: unset;
    height: auto;
    overflow: hidden;
    background: var(--am-bg-sunken);
    display: block;
}

/* Breadcrumb strip overlays the hero top edge (not below the photo). */
[class*="-post-detail"] > [class*="-detail-hero"].am-card__media {
    aspect-ratio: unset;
    height: auto;
}

/* Grid stack: cover + breadcrumb share one cell; breadcrumb aligns to the top edge. */
[class*="-detail-hero--with-media"] {
    display: grid;
    grid-template: "detail-hero-stack" / minmax(0, 1fr);
    position: relative;
    isolation: isolate;
    aspect-ratio: unset;
    height: auto;
    min-height: 0;
}

[class*="-detail-hero--with-media"] > [class*="-detail-hero__top"],
[class*="-detail-hero--with-media"] > [class*="-detail-cover-trigger"] {
    grid-area: detail-hero-stack;
    min-width: 0;
}

[class*="-detail-hero__top"] {
    position: relative;
    z-index: 3;
    align-self: start;
    justify-self: stretch;
    width: 100%;
    padding: var(--am-space-3) var(--am-space-4);
    pointer-events: none;
    box-sizing: border-box;
    min-height: 3.25rem;
    display: flex;
    align-items: flex-start;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--am-text-primary) 72%, transparent) 0%,
        color-mix(in srgb, var(--am-text-primary) 28%, transparent) 55%,
        transparent 100%
    );
}

[class*="-detail-hero__top"] * {
    pointer-events: auto;
}

[class*="-detail-breadcrumb--on-media"],
[class*="-detail-breadcrumb--on-media"] .am-breadcrumb__item {
    color: var(--am-text-inverse);
}

[class*="-detail-breadcrumb--on-media"] .am-breadcrumb__item + .am-breadcrumb__item::before {
    opacity: 0.78;
}

[class*="-detail-breadcrumb--on-media"] a {
    color: color-mix(in srgb, var(--am-text-inverse) 90%, transparent);
    text-decoration: none;
}

[class*="-detail-breadcrumb--on-media"] a:hover,
[class*="-detail-breadcrumb--on-media"] a:focus-visible {
    color: var(--am-text-inverse);
    text-decoration: underline;
}

[class*="-detail-breadcrumb--on-media"].am-breadcrumb {
    overflow-wrap: anywhere;
    word-break: break-word;
    margin: 0;
    width: 100%;
    max-width: 100%;
    text-shadow: 0 1px 2px color-mix(in srgb, var(--am-text-primary) 45%, transparent);
}

[class*="-detail-breadcrumb--on-media"] .am-breadcrumb__list {
    flex-wrap: wrap;
    row-gap: var(--am-space-1);
}

[class*="-detail__breadcrumb-row--body-only"] {
    margin-bottom: var(--am-space-1);
}

[class*="-detail__breadcrumb-row--body-only"] [class*="-detail-breadcrumb"] {
    width: 100%;
}

[class*="-detail__title-actions-row"] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--am-space-3) var(--am-space-4);
    row-gap: var(--am-space-2);
    width: 100%;
}

[class*="-detail__title-actions-row"] [class*="-detail__title"] {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    margin: var(--am-space-2, 0.5rem) 0 calc(var(--am-space-1) / 2);
    min-width: 0;
    text-align: left;
    align-self: flex-start;
}

[class*="-detail__title-actions"] {
    flex: 0 1 auto;
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: var(--am-space-2);
}

[class*="-detail-help-controls"] {
    display: none !important;
}

[class*="-detail-hero"] [class*="-detail__cover-img"] {
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: min(52vh, 520px);
    height: auto;
    object-fit: cover;
    vertical-align: top;
}

[class*="-detail-cover-trigger"] {
    display: block;
    position: relative;
    z-index: 1;
    align-self: stretch;
    justify-self: stretch;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
    text-decoration: none;
    color: inherit;
}

[class*="-detail-cover-trigger"]:focus-visible {
    outline: 2px solid var(--am-border-focus, var(--am-primary));
    outline-offset: 2px;
}

[class*="-detail-cover-trigger"] [class*="-detail__cover-img"] {
    display: block;
    width: 100%;
}

[class*="-detail-cover-trigger__hint"] {
    position: absolute;
    right: var(--am-space-3, 12px);
    bottom: var(--am-space-3, 12px);
    z-index: 3;
    padding: var(--am-space-1, 4px) var(--am-space-2, 8px);
    border-radius: var(--am-radius-sm, 6px);
    background: color-mix(in srgb, var(--am-text-primary, #0f172a) 72%, transparent);
    color: var(--am-text-inverse, #fff);
    font-size: var(--am-font-sm-rem, 0.8125rem);
    font-weight: var(--am-font-weight-medium, 500);
    line-height: 1.3;
    pointer-events: none;
}

[class*="-detail-body"].am-card__body {
    padding-block-start: var(--am-space-4);
    padding-block-end: var(--am-space-6, var(--am-space-5));
    padding-inline: var(--am-space-6, var(--am-space-5));
    display: flex;
    flex-direction: column;
    gap: var(--am-space-3);
    overflow: visible;
}

[class*="-detail-header"] {
    display: flex;
    flex-direction: column;
    gap: calc(var(--am-space-1) / 4);
    overflow: visible;
}

@media (max-width: 767px) {
    [class*="-detail__meta-chip__val"] {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    [class*="-detail__meta-chip"] .am-badge {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
}

/* Pull engagement bar closer to the title/meta (~half prior flex + section inset). */
[class*="-detail-body"].am-card__body > [class*="-detail-header"] + [class*="-detail-engage-bar"][class*="-detail-section"] {
    margin-top: calc(var(--am-space-1) / 2 + var(--am-space-3) / -2);
    padding-top: calc(var(--am-space-3) / 2);
}

[class*="-detail-content"][class*="-detail__text"] {
    padding-top: var(--am-space-1);
}

[class*="-gallery__heading"] {
    margin: 0 0 var(--am-space-2);
    font-size: var(--am-font-size-lg, 1.125rem);
    font-weight: 600;
    color: var(--am-text-primary, var(--am-color-text-primary));
}

[class*="-gallery__grid"] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: var(--am-space-3);
    margin: var(--am-space-3) 0 var(--am-space-4);
}

[class*="-gallery__cell"] {
    min-width: 0;
    border-radius: var(--am-radius-md, var(--am-radius-lg));
    overflow: hidden;
    border: 1px solid var(--am-border-muted, var(--am-border-default));
    background: var(--am-bg-elevated, var(--am-bg-subtle));
}

[class*="-gallery__img"] {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: middle;
}

[class*="-gallery__vid"] {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: middle;
}

[class*="-contribute-meter"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

[class*="-contribute-meter__target"] {
    margin: 0;
}

[class*="-detail-features"] .item_detail_features,
[class*="-detail-features"] .block_holder {
    margin-top: var(--am-space-3);
}

[class*="-detail-features"] ul {
    padding-inline-start: var(--am-space-6);
}

/* Engagement toolbar: one row + icon popovers */
[class*="-detail-section-title"] {
    font-size: var(--am-font-size-lg, 1.125rem);
    font-weight: 600;
    margin: 0 0 var(--am-space-4, 1rem);
    color: var(--am-text-primary, var(--am-color-text-primary));
    line-height: var(--am-line-height-tight, 1.3);
}

/* Engagement toolbar — compact cells (icon + stat) aligned with like/dislike counts; reactions/tags use timeline-style modals */
[class*="-detail-engage-bar__inner"] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--am-space-3) var(--am-space-4);
}

[class*="-detail-engage-bar__cluster"] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--am-space-3) var(--am-space-4);
    flex: 1 1 auto;
    min-width: 0;
}

[class*="-detail-engage-bar__owner"] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--am-space-2);
    flex: 0 0 auto;
    margin-inline-start: auto;
}

[class*="-detail-engage-bar__social"] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--am-space-3) var(--am-space-4);
    flex: 1 1 auto;
    min-width: 0;
}

[class*="-engage-cell"] {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--am-space-2);
}

[class*="-engage-cell--likes"] .amLike-reaction-wrapper {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--am-space-2);
}

[class*="-engage-cell--likes"] .like_button_box,
[class*="-engage-cell--likes"] .dislike_button_box {
    display: inline-flex;
    align-items: center;
    gap: var(--am-space-1);
}

/* Match amLike controls to adjacent engage icon buttons (22px glyph, 44px touch target). */
[class*="-engage-cell--likes"] .like_button_box > a.amLike-action-link,
[class*="-engage-cell--likes"] .dislike_button_box > a.amLike-action-link {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--am-touch-min, 44px);
    min-height: var(--am-touch-min, 44px);
    padding: var(--am-space-1);
    margin: 0;
    border-radius: var(--am-radius-sm);
    background: transparent;
    line-height: 0;
    transition:
        color var(--am-duration-fast, 120ms) var(--am-easing-standard, ease),
        background var(--am-duration-fast, 120ms) var(--am-easing-standard, ease);
}

[class*="-engage-cell--likes"] .like_button_box > a.amLike-action-link:focus-visible,
[class*="-engage-cell--likes"] .dislike_button_box > a.amLike-action-link:focus-visible {
    outline: 2px solid var(--am-border-focus);
    outline-offset: 2px;
}

[class*="-detail-engage-bar"] [class*="-engage-cell--likes"] .like_button_img,
[class*="-detail-engage-bar"] [class*="-engage-cell--likes"] .dislike_button_img {
    width: 22px !important;
    height: 22px !important;
    max-width: 22px;
    max-height: 22px;
    display: block;
    vertical-align: middle;
    object-fit: contain;
    opacity: 1 !important;
    /* Monochrome glyphs to match neighbouring amCore <img> icons (outline weight). */
    filter: brightness(0) saturate(100%);
    transition:
        filter var(--am-duration-fast, 120ms) var(--am-easing-standard, ease),
        opacity var(--am-duration-fast, 120ms) var(--am-easing-standard, ease);
}

[class*="-detail-engage-bar"] [class*="-engage-cell--likes"] .like_button_box > a.amLike-action-link:hover .like_button_img,
[class*="-detail-engage-bar"] [class*="-engage-cell--likes"] .dislike_button_box > a.amLike-action-link:hover .dislike_button_img {
    opacity: 1;
    /* Tint toward --am-primary; filter cannot consume CSS color tokens. */
    filter: invert(53%) sepia(62%) saturate(1300%) hue-rotate(182deg) brightness(98%) contrast(92%);
}

@media (prefers-color-scheme: dark) {
    [class*="-detail-engage-bar"] [class*="-engage-cell--likes"] .like_button_img,
    [class*="-detail-engage-bar"] [class*="-engage-cell--likes"] .dislike_button_img {
        filter: brightness(0) saturate(100%) invert(1);
    }

    [class*="-detail-engage-bar"] [class*="-engage-cell--likes"] .like_button_box > a.amLike-action-link:hover .like_button_img,
    [class*="-detail-engage-bar"] [class*="-engage-cell--likes"] .dislike_button_box > a.amLike-action-link:hover .dislike_button_img {
        opacity: 1;
        filter: invert(58%) sepia(74%) saturate(1200%) hue-rotate(182deg) brightness(103%) contrast(94%);
    }
}

[data-theme="dark"] [class*="-detail-engage-bar"] [class*="-engage-cell--likes"] .like_button_img,
[data-theme="dark"] [class*="-detail-engage-bar"] [class*="-engage-cell--likes"] .dislike_button_img {
    filter: brightness(0) saturate(100%) invert(1);
}

[data-theme="dark"] [class*="-detail-engage-bar"] [class*="-engage-cell--likes"] .like_button_box > a.amLike-action-link:hover .like_button_img,
[data-theme="dark"] [class*="-detail-engage-bar"] [class*="-engage-cell--likes"] .dislike_button_box > a.amLike-action-link:hover .dislike_button_img {
    opacity: 1;
    filter: invert(58%) sepia(74%) saturate(1200%) hue-rotate(182deg) brightness(103%) contrast(94%);
}

[data-theme="light"] [class*="-detail-engage-bar"] [class*="-engage-cell--likes"] .like_button_img,
[data-theme="light"] [class*="-detail-engage-bar"] [class*="-engage-cell--likes"] .dislike_button_img {
    filter: brightness(0) saturate(100%);
}

[data-theme="light"] [class*="-detail-engage-bar__social"] [class*="-engage-iconhit"]:not([class*="-fav--active"]) [class*="-engage-iconhit__glyph"] {
    filter: brightness(0) saturate(100%);
    opacity: 0.72;
}

[data-theme="light"] [class*="-detail-engage-bar__social"] [class*="-engage-iconhit"]:hover:not([class*="-fav--active"]) [class*="-engage-iconhit__glyph"] {
    opacity: 1;
    filter: invert(53%) sepia(62%) saturate(1300%) hue-rotate(182deg) brightness(98%) contrast(92%);
}

[class*="-engage-cell--likes"] .like_count,
[class*="-engage-cell--likes"] .dislike_count {
    display: inline;
    margin-left: 0;
    font-size: var(--am-font-xs-rem, var(--am-font-xs));
    color: var(--am-text-secondary);
}

[class*="-detail-engage-bar__social"] [class*="-engage-iconhit"] {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--am-touch-min, 44px);
    min-height: var(--am-touch-min, 44px);
    padding: var(--am-space-1);
    margin: 0;
    border: none;
    border-radius: var(--am-radius-sm);
    background: transparent;
    color: var(--am-text-secondary);
    cursor: pointer;
    line-height: 0;
    position: relative;
}

[class*="-detail-engage-bar__social"] [class*="-engage-iconhit"]:hover {
    background: transparent;
}

[class*="-detail-engage-bar__social"] [class*="-engage-iconhit"]:focus-visible {
    outline: 2px solid var(--am-border-focus);
    outline-offset: 2px;
}

/*
 * Toolbar icons are monochrome <img> glyphs — tint on hover (no background pill).
 * Filter approximates --am-primary / --am-danger; CSS filters cannot reference color tokens.
 */
[class*="-detail-engage-bar__social"] [class*="-engage-iconhit"] [class*="-engage-iconhit__glyph"] {
    filter: brightness(0) saturate(100%);
    opacity: 0.72;
    transition:
        filter var(--am-duration-fast, 120ms) var(--am-easing-standard, ease),
        opacity var(--am-duration-fast, 120ms) var(--am-easing-standard, ease);
}

[class*="-detail-engage-bar__social"] [class*="-engage-iconhit"]:hover:not([class*="-fav--active"]) [class*="-engage-iconhit__glyph"] {
    opacity: 1;
    filter: invert(53%) sepia(62%) saturate(1300%) hue-rotate(182deg) brightness(98%) contrast(92%);
}

[class*="-detail-engage-bar__social"] [class*="-engage-iconhit"][class*="-fav--active"] [class*="-engage-iconhit__glyph"] {
    opacity: 1;
    filter: invert(35%) sepia(90%) saturate(2200%) hue-rotate(346deg) brightness(96%) contrast(92%);
}

[class*="-detail-engage-bar__social"] [class*="-engage-iconhit"][class*="-fav--active"]:hover [class*="-engage-iconhit__glyph"] {
    filter: invert(37%) sepia(92%) saturate(2400%) hue-rotate(346deg) brightness(98%) contrast(94%);
}

@media (prefers-color-scheme: dark) {
    [class*="-detail-engage-bar__social"] [class*="-engage-iconhit"]:not([class*="-fav--active"]) [class*="-engage-iconhit__glyph"] {
        filter: brightness(0) saturate(100%) invert(1);
        opacity: 0.82;
    }

    [class*="-detail-engage-bar__social"] [class*="-engage-iconhit"]:hover:not([class*="-fav--active"]) [class*="-engage-iconhit__glyph"] {
        opacity: 1;
        filter: invert(58%) sepia(74%) saturate(1200%) hue-rotate(182deg) brightness(103%) contrast(94%);
    }

    [class*="-detail-engage-bar__social"] [class*="-engage-iconhit"][class*="-fav--active"] [class*="-engage-iconhit__glyph"] {
        filter: invert(42%) sepia(95%) saturate(2000%) hue-rotate(346deg) brightness(98%) contrast(94%);
    }

    [class*="-detail-engage-bar__social"] [class*="-engage-iconhit"][class*="-fav--active"]:hover [class*="-engage-iconhit__glyph"] {
        filter: invert(46%) sepia(96%) saturate(2100%) hue-rotate(346deg) brightness(100%) contrast(96%);
    }
}

[data-theme="dark"] [class*="-detail-engage-bar__social"] [class*="-engage-iconhit"]:not([class*="-fav--active"]) [class*="-engage-iconhit__glyph"] {
    filter: brightness(0) saturate(100%) invert(1);
    opacity: 0.82;
}

[data-theme="dark"] [class*="-detail-engage-bar__social"] [class*="-engage-iconhit"]:hover:not([class*="-fav--active"]) [class*="-engage-iconhit__glyph"] {
    opacity: 1;
    filter: invert(58%) sepia(74%) saturate(1200%) hue-rotate(182deg) brightness(103%) contrast(94%);
}

[data-theme="dark"] [class*="-detail-engage-bar__social"] [class*="-engage-iconhit"][class*="-fav--active"] [class*="-engage-iconhit__glyph"] {
    filter: invert(42%) sepia(95%) saturate(2000%) hue-rotate(346deg) brightness(98%) contrast(94%);
}

[data-theme="dark"] [class*="-detail-engage-bar__social"] [class*="-engage-iconhit"][class*="-fav--active"]:hover [class*="-engage-iconhit__glyph"] {
    filter: invert(46%) sepia(96%) saturate(2100%) hue-rotate(346deg) brightness(100%) contrast(96%);
}

/* Tooltip stacking for engagement icons (appearance: amCore.tooltips.css). */
[class*="-detail-engage-bar__social"] button[class*="-engage-iconhit"][data-am-tooltip]:hover,
[class*="-detail-engage-bar__social"] button[class*="-engage-iconhit"][data-am-tooltip]:focus-visible {
    z-index: 5;
}

/* Owner/edit row icon hits keep prior neutral hover unless styled separately. */
[class*="-engage-iconhit"] {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--am-touch-min, 44px);
    min-height: var(--am-touch-min, 44px);
    padding: var(--am-space-1);
    margin: 0;
    border: none;
    border-radius: var(--am-radius-sm);
    background: transparent;
    color: var(--am-text-secondary);
    cursor: pointer;
    line-height: 0;
    transition:
        color var(--am-duration-fast, 120ms) var(--am-easing-standard, ease),
        background var(--am-duration-fast, 120ms) var(--am-easing-standard, ease);
}

[class*="-engage-iconhit"]:focus-visible {
    outline: 2px solid var(--am-border-focus);
    outline-offset: 2px;
}

[class*="-engage-iconhit__glyph"] {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    max-width: 22px;
    max-height: 22px;
}

[class*="-engage-iconhit__glyph"] img,
[class*="-engage-iconhit__glyph"] svg {
    display: block;
    width: 22px;
    height: 22px;
    max-width: 22px;
    max-height: 22px;
}

/* Normalize amCore_icon + amLike glyphs in detail engage bars (22px visual, 44px touch). */
[class*="-detail-engage-bar"] [class*="-engage-iconhit"] .am-icon,
[class*="-detail-engage-bar"] [class*="-engage-iconhit"] .amCore-icon,
[class*="-detail-engage-bar"] [class*="-engage-iconhit"] img,
[class*="-detail-engage-bar"] [class*="-engage-iconhit"] svg {
    width: 22px !important;
    height: 22px !important;
    max-width: 22px;
    max-height: 22px;
    object-fit: contain;
}

[class*="-detail-engage-bar"] [class*="-engage-cell--likes"] img.like_button_img,
[class*="-detail-engage-bar"] [class*="-engage-cell--likes"] img.dislike_button_img {
    width: 22px !important;
    height: 22px !important;
    max-width: 22px;
    max-height: 22px;
}

[class*="-engage-iconhit"][class*="-fav--active"] {
    color: var(--am-danger);
}

[class*="-engage-cell--favorite"] [class*="-engage-iconhit"]:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

[class*="-detail-suggestions__head"] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--am-space-2) var(--am-space-4);
    margin-bottom: var(--am-space-4, 1rem);
}

[class*="-detail-suggestions__title"] {
    margin-bottom: 0;
    flex: 1 1 auto;
    min-width: 0;
}

[class*="-detail-suggestions__head"] [class*="-detail-section-title"] {
    margin-bottom: 0;
}

[class*="-detail-suggestions__toggle"] {
    flex-shrink: 0;
    margin-left: auto;
    position: relative;
    z-index: 2;
    min-width: var(--am-touch-min, 44px);
    min-height: var(--am-touch-min, 44px);
    padding: var(--am-space-1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

[class*="-detail-suggestions__toggle-glyph"] {
    display: none;
    line-height: 0;
    align-items: center;
    justify-content: center;
}

[class*="-detail-suggestions__toggle-icon"] {
    display: block;
    flex-shrink: 0;
    opacity: 0.72;
    filter: brightness(0) saturate(100%);
    transition:
        filter var(--am-duration-fast, 120ms) var(--am-easing-standard, ease),
        opacity var(--am-duration-fast, 120ms) var(--am-easing-standard, ease);
}

[class*="-detail-suggestions__toggle"]:hover [class*="-detail-suggestions__toggle-icon"],
[class*="-detail-suggestions__toggle"]:focus-visible [class*="-detail-suggestions__toggle-icon"] {
    opacity: 1;
    filter: invert(53%) sepia(62%) saturate(1300%) hue-rotate(182deg) brightness(98%) contrast(92%);
}

/* Icons track aria-expanded (avoid relying on [hidden] spans vs skin/display resets). */
[class*="-detail-suggestions__toggle"][aria-expanded="true"] [class*="-detail-suggestions__toggle-glyph--expanded"] {
    display: inline-flex;
}

[class*="-detail-suggestions__toggle"][aria-expanded="false"] [class*="-detail-suggestions__toggle-glyph--collapsed"] {
    display: inline-flex;
}

[class*="-detail-suggestions--collapsed"] [class*="-detail-suggestions__head"] {
    margin-bottom: 0;
}

[class*="-detail-suggestions__grid"] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.75rem, 1fr));
    gap: var(--am-space-2);
}

[class*="-detail-suggestions__grid"][class*="-detail-suggestions__grid--hidden"] {
    display: none !important;
}

/* Extra space between related-story suggestions and comments (flex gap + margin). */
[class*="-detail-suggestions"] ~ [class*="-detail-comments-ratings"] {
    margin-top: var(--am-space-2);
}

[class*="-detail-suggestion-card"] {
    margin: 0;
    overflow: hidden;
    border-radius: var(--am-radius-md);
    background: var(--am-bg-elevated);
    border: 1px solid var(--am-border-default);
    transition:
        border-color var(--am-duration-fast, 120ms) var(--am-easing-standard, ease),
        box-shadow var(--am-duration-fast, 120ms) var(--am-easing-standard, ease);
}

[class*="-detail-suggestion-card"]:hover {
    border-color: var(--am-border-strong);
    box-shadow: var(--am-shadow-sm);
}

[class*="-detail-suggestion-card__hit"] {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

[class*="-detail-suggestion-card__hit"]:hover [class*="-detail-suggestion-card__title"] {
    color: var(--am-color-primary);
}

[class*="-detail-suggestion-card__media"] {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--am-bg-sunken);
}

[class*="-detail-suggestion-card__img"] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

[class*="-detail-suggestion-card__placeholder"],
.amFamFleet-detail-suggestion-card__placeholder,
.am-detail-related-grid__placeholder {
    min-height: 0;
}

[class*="-detail-suggestion-card__body"] {
    padding: var(--am-space-1) var(--am-space-2);
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: var(--am-space-1);
}

[class*="-detail-suggestion-card__title"] {
    margin: 0;
    font-size: var(--am-font-size-xs, 0.75rem);
    font-weight: var(--am-font-weight-semibold, 600);
    line-height: var(--am-line-height-tight, 1.3);
    color: var(--am-text-primary);
    text-transform: uppercase;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

[class*="-detail-suggestion-card__meta"] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--am-space-1);
    align-items: center;
}

[class*="-detail-suggestion-card__meta"] .am-badge {
    font-size: var(--am-font-size-xs, 0.75rem);
}

@media (min-width: 768px) {
    [class*="-detail-suggestions__grid"] {
        grid-template-columns: repeat(auto-fill, minmax(9.25rem, 1fr));
    }
}

[class*="-engage-stat"] {
    font-size: var(--am-font-xs-rem, var(--am-font-xs));
    color: var(--am-text-secondary);
    white-space: nowrap;
}

[class*="-engage-cell--tags"] {
    gap: var(--am-space-1);
}

button[class*="-engage-stat--tags-btn"] {
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    font: inherit;
    color: inherit;
    cursor: pointer;
    min-height: var(--am-touch-min, 44px);
    min-width: 0;
    width: auto;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    line-height: 1;
}

button[class*="-engage-stat--tags-btn"]:hover,
button[class*="-engage-stat--tags-btn"]:focus-visible {
    color: var(--am-text-primary);
    text-decoration: underline;
}

/* Reactions popover — anchor above the trigger (block-start); share stays on amAction timeline modal */
[class*="-detail-popover"][class*="-detail-popover--engage"] {
    margin: 0 0 var(--am-space-2);
    padding: var(--am-space-4);
    max-width: min(100vw - var(--am-space-8), 22rem);
    background: var(--am-bg-base);
    border: 1px solid var(--am-border-default);
    border-radius: var(--am-radius-md);
    box-shadow: var(--am-shadow-lg);
    z-index: var(--am-z-dropdown);
}

[class*="-detail-popover--engage"] .amShareThis-share-block,
[class*="-detail-popover--engage"] .amShareThis-reactions-block,
[class*="-detail-popover--engage"] .amReactions-reactions-block {
    margin: 0;
}

[class*="-detail-popover--engage"] .amShareThis-native-label,
[class*="-detail-popover--engage"] .amShareThis-reactions-label,
[class*="-detail-popover--engage"] .amReactions-reactions-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

[class*="-detail-popover--engage"] .amShareThis-native {
    flex-direction: column;
    align-items: stretch;
}

[class*="-detail-popover--engage"] .amShareThis-native-list {
    flex-direction: column;
    width: 100%;
}

[class*="-detail-popover--engage"] .amShareThis-native-item {
    width: 100%;
}

[class*="-detail-popover--engage"] .amShareThis-btn {
    width: 100%;
}

[class*="-detail-rating__avg"],
[class*="-detail-rating__none"] {
    display: inline;
    font-size: inherit;
}

[class*="-detail-rating__score"] {
    font-weight: var(--am-font-weight-semibold, 600);
    color: var(--am-primary, var(--am-color-primary));
}

/* Beats any skin ::after suffix (e.g. legacy "/5") on the average score. */
[class*="-detail-rating__score"]::after {
    content: none !important;
}

[class*="-detail-rating__denom"],
[class*="-detail-rating__count"] {
    font-weight: 400;
    color: var(--am-text-secondary);
}

.am-modal__body[data-am-amevent-engage-body="1"] {
    padding-top: var(--am-space-2);
}

.am-modal__body[data-am-amevent-engage-body="1"] .amShareThis-wrap,
.am-modal__body[data-am-amevent-engage-body="1"] .amReactions-wrap {
    margin: 0;
}

.am-modal__body[data-am-amevent-engage-body="1"] .amTags-tag-detail-root {
    margin: 0;
}

.am-modal__body[data-am-amevent-engage-body="1"] .amTags-tag-form-screen-title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.am-modal__body[data-am-amevent-engage-body="1"] #tag_form_box {
    width: 100%;
}

[class*="-detail-tags"][class*="-detail-section"] {
    margin-top: var(--am-space-4, 1rem);
    padding-top: var(--am-space-3, 0.75rem);
    border-top: 1px solid var(--am-border-muted, rgba(148, 163, 184, 0.35));
}

[class*="-detail-tags"] .amTags-tag-detail-root {
    margin: 0;
}

[class*="-detail-tags"] .amTags-tag-form-screen-title {
    margin: 0 0 var(--am-space-2, 0.5rem);
    font-size: var(--am-font-size-sm, 0.875rem);
    font-weight: var(--am-font-weight-semibold, 600);
}

[class*="-detail-tags"] .amTags-existing-tags-heading {
    margin: var(--am-space-3, 0.75rem) 0 var(--am-space-2, 0.5rem);
    font-size: var(--am-font-size-xs, 0.75rem);
    font-weight: var(--am-font-weight-semibold, 600);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--am-text-secondary, var(--jr-text-secondary));
}

/* Tag chips: inherit amTags existing_tags / modal styling (.tag_name_box). */
[class*="-detail-tags"] .amTags-existing-tags-inner .tag_name_box {
    float: none;
    margin: 0;
}

[class*="-detail-supplements"][class*="-detail-section"] {
    margin-top: calc(var(--am-space-1) / 2);
    padding-top: var(--am-space-2);
    padding-bottom: var(--am-space-1);
}

/*
 * Engagement toolbar calls amAction_share for timeline sharing; suppress the legacy
 * amAction item_detail_feature text button in supplements (duplicate UX).
 */
[class*="-post-detail"].am-card [class*="-detail-supplements"] input#share-to-timeline.form_button {
    display: none !important;
}

[class*="-detail-supplements"] .item_detail_features,
[class*="-detail-supplements"] .block_holder {
    margin-top: var(--am-space-2);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--am-space-2) var(--am-space-3);
}

[class*="-detail-supplements"] .item_detail_features img,
[class*="-detail-supplements"] .item_detail_features .am-icon,
[class*="-detail-supplements"] .item_detail_features .am-icon img,
[class*="-detail-supplements"] .item_detail_features .am-icon svg {
    width: 22px;
    height: 22px;
    max-width: 22px;
    max-height: 22px;
    object-fit: contain;
}

[class*="-detail-supplements"] .block_holder:first-child {
    margin-top: 0;
}

[class*="-detail-supplements"] ul {
    padding-inline-start: var(--am-space-6, 1.5rem);
}

[class*="-detail-comments__body"] {
    margin-top: 0;
}

[class*="-detail-comments"] #comment_form_section .amComment-form-table.item {
    padding: 0;
    background: transparent;
    box-shadow: none;
    border: none;
}

[class*="-detail-comments"] #comment_form_section textarea#comment_text.form_textarea,
[class*="-detail-comments"] .amComment-comment-form textarea#comment_text.form_textarea {
    min-height: 72px;
}

[class*="-detail-comments"] #comment_form_section .amComment-comment-form--stack-footer .amComment-thread-row:not(.amComment-stack-footer-row) {
    align-items: flex-start;
    gap: var(--am-space-3);
}

[class*="-detail-comments"] #comment_form_section .amComment-thread-avatar-col {
    padding-top: var(--am-space-1);
}

/*
 * Story detail comments: override skin `.comment_page_section > div { display:table }` and
 * `.form_button { display:inline-block }` so amComment flex + submit row win after cache bust.
 */
[class*="-detail-comments"] .comment_page_section > .amComment-comment-block {
    display: block !important;
    width: 100%;
    box-sizing: border-box;
}

/* Anchor quote / update / delete in the upper-right of each comment row (body column edge only — not composer rows). */
[class*="-detail-comments"] .comment_page_section .amComment-thread-body-col--with-actions {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    padding-inline-end: clamp(var(--am-space-10, 40px), 24vw, 11rem);
    box-sizing: border-box;
}

[class*="-detail-comments"] .comment_page_section .amComment-itemlist-head {
    width: 100%;
    align-items: flex-start;
}

/*
 * Reaction buttons live in .amComment-itemlist-head__start; quote/delete sits in .block_config with
 * position:absolute + z-index:2. Because the control strip is out of flow, head__start would span the
 * full header width and sits *under* that overlay — clicks hit the invisible layer instead of emoji buttons.
 * Classes amComment-thread-body-col--with-actions / amComment-itemlist-head--with-actions mirror logged-in markup
 * (:has() omitted for browsers that drop unsupported selectors and skip these rules entirely).
 */
[class*="-detail-comments"] .comment_page_section .amComment-itemlist-head--with-actions .amComment-itemlist-head__start {
    max-width: calc(100% - clamp(var(--am-space-10, 40px), 24vw, 11rem));
    box-sizing: border-box;
}

[class*="-detail-comments"] .comment_page_section .amComment-itemlist-blockcfg.block_config {
    float: none !important;
    position: absolute;
    inset-inline-end: 0;
    inset-block-start: 0;
    z-index: 2;
    display: inline-flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--am-space-1);
    max-width: min(100%, 10rem);
    margin: 0;
    align-self: auto;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

@media (max-width: 480px) {
    [class*="-detail-comments"] .comment_page_section .amComment-thread-body-col--with-actions {
        padding-inline-end: clamp(var(--am-space-2), 42vw, 9rem);
    }

    [class*="-detail-comments"] .comment_page_section .amComment-itemlist-head--with-actions .amComment-itemlist-head__start {
        max-width: calc(100% - clamp(var(--am-space-2), 42vw, 9rem));
    }

    [class*="-detail-comments"] .comment_page_section .amComment-itemlist-blockcfg.block_config {
        flex-wrap: wrap;
        max-width: min(100%, 9.5rem);
        justify-content: flex-end;
    }
}

/* Keep comment body below the meta/actions row even when skin floats `.block_config`. */
[class*="-detail-comments"] .amComment-itemlist-inner {
    clear: both;
}

/*
 * Composer (stack footer): attach as icon + Post on same row (trailing-aligned);
 * textarea / editor stretches to composer column edges.
 */
[class*="-detail-comments"] #comment_form_section .amComment-comment-form--stack-footer .amComment-thread-row:not(.amComment-stack-footer-row) {
    align-items: stretch;
    width: 100%;
}

[class*="-detail-comments"] #comment_form_section .amComment-comment-form--stack-footer .amComment-form-footer--stack-below {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--am-space-2, 8px);
    margin-top: var(--am-space-1, 4px);
}

[class*="-detail-comments"] #comment_form_section .amComment-comment-form--stack-footer .amComment-form-footer--stack-below .amComment-form-footer__attach {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
    min-width: 0;
}

[class*="-detail-comments"] #comment_form_section .amComment-comment-form--stack-footer .amComment-form-footer--stack-below .amComment_upload_attachment {
    margin-top: 0;
}

[class*="-detail-comments"] #comment_form_section .amComment-comment-form--stack-footer .amComment_upload_attachment .qq-uploader {
    display: flex;
    flex-flow: column wrap;
    align-items: flex-end;
    gap: var(--am-space-1, 4px);
    float: none;
}

[class*="-detail-comments"] #comment_form_section .amComment-comment-form--stack-footer .amComment_upload_attachment ul.qq-upload-list {
    align-self: stretch;
    margin: 0;
    padding: 0;
    max-width: min(100%, 22rem);
    text-align: start;
}

[class*="-detail-comments"] .attachment_upload_button .qq-upload-button {
    box-sizing: border-box;
    min-width: var(--am-touch-min, 44px);
    min-height: var(--am-touch-min, 44px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--am-space-1, 6px);
    line-height: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

[class*="-detail-comments"] .attachment_upload_button .qq-upload-button:focus-visible {
    outline: 2px solid var(--am-primary);
    outline-offset: 2px;
}

[class*="-detail-comments"] .attachment_upload_button .qq-upload-button:hover,
[class*="-detail-comments"] .attachment_upload_button .qq-upload-button:active {
    border: none;
    box-shadow: none;
    background: transparent;
}

[class*="-detail-comments"] .attachment_upload_button .qq-upload-button img.am-icon {
    display: block;
    width: var(--am-icon-md, 22px);
    height: var(--am-icon-md, 22px);
}

[class*="-detail-comments"] form[class*="-detail-comment-form"].amComment-comment-form .amComment-submit--amcore-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    min-width: var(--am-touch-min, 44px);
    min-height: var(--am-touch-min, 44px);
    padding: var(--am-space-1, 6px);
    line-height: 0;
    box-sizing: border-box;
}

[class*="-detail-comments"] form[class*="-detail-comment-form"].amComment-comment-form .amComment-submit--amcore-icon img.am-icon {
    display: block;
    width: var(--am-icon-md, 22px);
    height: var(--am-icon-md, 22px);
}

/* Icon-only post comment — no filled primary square */
[class*="-detail-comments"] form[class*="-detail-comment-form"].amComment-comment-form .amComment-submit--amcore-icon.am-btn--primary {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--am-text-secondary);
}

[class*="-detail-comments"] form[class*="-detail-comment-form"].amComment-comment-form .amComment-submit--amcore-icon.am-btn--primary:hover,
[class*="-detail-comments"] form[class*="-detail-comment-form"].amComment-comment-form .amComment-submit--amcore-icon.am-btn--primary:focus-visible {
    background: var(--am-bg-elevated) !important;
    background-color: var(--am-bg-elevated) !important;
    color: var(--am-primary, var(--am-color-primary));
}

[class*="-detail-comments"] #comment_form_section .amComment-comment-form--stack-footer .amComment-form-footer--stack-below .amComment-form-footer__actions {
    flex: 0 0 auto;
    justify-content: flex-end;
    width: auto;
    max-width: 100%;
    margin-inline-start: 0;
}

[class*="-detail-comments"] #comment_form_section .amComment-comment-form--stack-footer .amComment-form-footer--stack-below .amComment-form-footer__actions input[type="submit"],
[class*="-detail-comments"] #comment_form_section .amComment-comment-form--stack-footer .amComment-form-footer--stack-below .amComment-form-footer__actions .am-btn--primary {
    display: inline-flex !important;
    width: auto !important;
    max-width: 100%;
    min-width: min(100%, var(--am-touch-min, 44px));
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
    align-self: center;
}

[class*="-detail-comments"] #comment_form_section .amComment-comment-form--stack-footer .amComment-stack-footer__main,
[class*="-detail-comments"] #comment_form_section .amComment-comment-form--stack-footer .amComment-form-cell-main {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

[class*="-detail-comments"] #comment_form_section .amComment-comment-form--stack-footer .form_editor_holder {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

[class*="-detail-comments"] #comment_form_section .amComment-comment-form--stack-footer .mce-tinymce,
[class*="-detail-comments"] #comment_form_section .amComment-comment-form--stack-footer .tox-tinymce {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100%;
}

[class*="-detail-comments"] #comment_form_section .amComment-comment-form--stack-footer .mceLayout,
[class*="-detail-comments"] #comment_form_section .amComment-comment-form--stack-footer .mce-edit-area iframe,
[class*="-detail-comments"] #comment_form_section .amComment-comment-form--stack-footer .tox-edit-area iframe {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
}

/*
 * Overrides: skin/grid `.form_textarea { width: 75%; }`, `.row { max-width: 1280px }`,
 * mobile `.page_content .form_textarea`, `.form_editor_holder { width: 308px }`.
 */
[class*="-detail-comments"] .amComment-thread-container .row.amComment-thread-row,
[class*="-detail-comments"] .amComment-form-table .row.amComment-thread-row {
    max-width: none;
    width: 100%;
}

[class*="-detail-comments"] #comment_form_holder .form_editor_holder,
[class*="-detail-comments"] #comment_form_section .form_editor_holder {
    width: 100% !important;
    max-width: none !important;
    overflow: visible;
}

[class*="-detail-comments"] #comment_form_section textarea#comment_text.form_textarea,
[class*="-detail-comments"] #comment_form_section textarea.form_textarea {
    width: 100% !important;
    max-width: none;
    box-sizing: border-box;
}

.page_content [class*="-detail-comments"] #comment_form_section textarea.form_textarea,
.page_content [class*="-detail-comments"] #comment_form_section textarea#comment_text.form_textarea {
    width: 100% !important;
}

/* Detail page: slightly larger UI copy (+2px) in comments composer and list only. */
[class*="-detail-comments"] .amComment-item-text {
    font-size: calc(var(--am-font-sm-rem, var(--am-font-sm)) + 2px);
}

[class*="-detail-comments"] #comment_text,
[class*="-detail-comments"] .amComment-comment-form textarea#comment_text.form_textarea {
    font-size: calc(var(--am-font-xs, 13px) + 2px);
}

[class*="-detail-comments"] .amComment-item-meta {
    font-size: calc(var(--am-font-xs, 12px) + 2px);
}

[class*="-detail-comments"] .amComment-thread-expand,
[class*="-detail-comments"] .amComment-comment-block .comment-reply {
    font-size: calc(var(--am-font-xs, 12px) + 2px);
}

[class*="-detail-comments"] #comment_form_section .amComment-comment-form .am-btn--primary,
[class*="-detail-comments"] #comment_form_section .amComment-comment-form input[type="submit"] {
    font-size: calc(var(--am-font-xs, 12px) + 2px);
}

/* Comments + ratings: shared section layout (single grid when ratings-only). */
[class*="-detail-comments-ratings__grid"] {
    display: grid;
    gap: var(--am-space-6, 1.5rem);
}

[class*="-detail-comments-ratings__col"] {
    min-width: 0;
}

/*
 * Comments + ratings dual mode: always use tabs — one pane at a time at every viewport width.
 */
[class*="-detail-cr__radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

[class*="-detail-cr-tabs"] {
    display: none;
}

[class*="-detail-cr-tabs__tab"] {
    flex: 1 1 0;
    margin: 0;
    padding: var(--am-space-2) var(--am-space-4);
    box-sizing: border-box;
    font-size: var(--am-font-sm-rem, var(--am-font-sm));
    font-weight: 600;
    text-align: center;
    color: var(--am-text-secondary);
    background: transparent;
    border: none;
    border-radius: var(--am-radius-full);
    cursor: pointer;
    transition:
        color var(--am-duration-fast, 120ms) var(--am-easing-standard, ease),
        background var(--am-duration-fast, 120ms) var(--am-easing-standard, ease),
        box-shadow var(--am-duration-fast, 120ms) var(--am-easing-standard, ease);
}

[class*="-detail-cr-tabs__tab"]:hover {
    color: var(--am-text-primary);
}

[class*="-detail-comments-ratings--dual"] [class*="-detail-cr-tabs__tab"]:focus-visible {
    outline: 2px solid var(--am-primary);
    outline-offset: 2px;
}

input[id$="-cr-tab-comments"]:checked ~ [class*="-detail-cr-tabs"] [class*="-detail-cr-tabs__tab"][for$="-cr-tab-comments"],
input[id$="-cr-tab-ratings"]:checked ~ [class*="-detail-cr-tabs"] [class*="-detail-cr-tabs__tab"][for$="-cr-tab-ratings"] {
    color: var(--am-primary, var(--am-color-primary));
    background: transparent;
    border-color: var(--am-primary, var(--am-color-primary));
    box-shadow: none;
}

[class*="-detail-comments-ratings--dual"] [class*="-detail-cr-tabs"] {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--am-space-3);
    width: fit-content;
    max-width: 100%;
    margin: 0 0 var(--am-space-2);
    padding: 0;
    box-sizing: border-box;
    background: transparent;
    border: none;
    border-radius: 0;
}

[class*="-detail-comments-ratings--dual"] [class*="-detail-cr-tabs__tab"] {
    flex: 0 1 auto;
    padding: var(--am-space-2) var(--am-space-5);
    white-space: nowrap;
    min-width: 0;
    border: 1px solid var(--am-border-default);
    border-radius: var(--am-radius-full);
    background: transparent;
}

[class*="-detail-comments-ratings--dual"] [class*="-detail-cr-tabs__tab"]:hover {
    color: var(--am-text-primary);
    background: var(--am-bg-elevated);
}

[class*="-detail-comments-ratings--dual"] [class*="-detail-cr-heading"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

[class*="-detail-comments-ratings--dual"] [class*="-detail-comments-ratings__grid--split"] {
    display: block;
}

[class*="-detail-comments-ratings--dual"] [class*="-detail-comments-ratings__grid--split"] [class*="-detail-comments-ratings__col"] {
    display: none;
}

[class*="-detail-comments-ratings--dual"] input[id$="-cr-tab-comments"]:checked ~ [class*="-detail-comments-ratings__grid--split"] [class*="-detail-comments-ratings__col--comments"] {
    display: block;
}

[class*="-detail-comments-ratings--dual"] input[id$="-cr-tab-ratings"]:checked ~ [class*="-detail-comments-ratings__grid--split"] [class*="-detail-comments-ratings__col--ratings"] {
    display: block;
}

/* Ratings tab: distribution graph capped to ~half the pane width; review list spans full width. */
[class*="-detail-comments-ratings--dual"] [class*="-detail-ratings-tab-split"] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--am-space-6, 1.5rem);
    width: 100%;
    box-sizing: border-box;
}

[class*="-detail-comments-ratings--dual"] [class*="-detail-ratings-tab__graph"] {
    width: 25%;
    max-width: 100%;
    align-self: flex-start;
    box-sizing: border-box;
}

[class*="-detail-comments-ratings--dual"] [class*="-detail-ratings-tab__reviews"] {
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 767px) {
    [class*="-detail-comments-ratings--dual"] [class*="-detail-ratings-tab__graph"] {
        width: 100%;
    }
}

/* Tab label already surfaced in cr-tabs — hide redundant heading inside histogram. */
[class*="-detail-comments-ratings--dual"] [class*="-rating-hist"] [class*="-rating-hist__h"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

[class*="-detail-comments-ratings--dual"] [class*="-detail-comments"],
[class*="-detail-comments-ratings--dual"] [class*="-detail-comments__body"],
[class*="-detail-comments-ratings--dual"] .comment_page_section {
    width: 100%;
    max-width: none;
}

/* Comments tab (dual): composer ~half width like rating graph; thread list full width. */
[class*="-detail-comments-ratings--dual"] [class*="-detail-comments__body"] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--am-space-6, 1.5rem);
    margin-top: 0;
}

[class*="-detail-comments-ratings--dual"] [class*="-detail-comments"] #comment_form_holder {
    width: 50%;
    max-width: 100%;
    align-self: flex-start;
    box-sizing: border-box;
}

@media (max-width: 767px) {
    [class*="-detail-comments-ratings--dual"] [class*="-detail-comments"] #comment_form_holder {
        width: 100%;
        align-self: stretch;
    }
}

[class*="-detail-ratings-side__body"] {
    margin-top: 0;
}

/* MIS-style distribution (amRating); uses --am-* tokens only. */
[class*="-rating-hist"] {
    margin-bottom: var(--am-space-5, 1.25rem);
}

[class*="-rating-hist__head"] [class*="-rating-hist__h"] {
    margin-bottom: var(--am-space-2, 0.5rem);
}

[class*="-detail-ratings-side"] [class*="-rating-hist__subtitle"] {
    margin: 0 0 var(--am-space-2, 0.5rem);
    font-size: calc(var(--am-font-sm-rem, var(--am-font-sm)) + 2px);
    color: var(--am-text-secondary, var(--am-color-text-secondary));
    line-height: var(--am-line-height-normal, 1.35);
}

[class*="-detail-ratings-side"] [class*="-rating-hist__meta"] {
    margin: 0 0 var(--am-space-3, 0.75rem);
    font-size: calc(var(--am-font-sm-rem, var(--am-font-sm)) + 2px);
    color: var(--am-text-primary, var(--am-color-text-primary));
    display: flex;
    flex-wrap: wrap;
    gap: var(--am-space-2, 0.5rem) var(--am-space-4, 1rem);
}

[class*="-rating-hist__cta"] {
    margin: 0 0 var(--am-space-3, 0.75rem);
}

[class*="-rating-hist__bars"] {
    margin-bottom: var(--am-space-3, 0.75rem);
}

[class*="-rating-hist__row"] {
    display: grid;
    grid-template-columns: minmax(0, 5rem) minmax(0, 1fr) minmax(0, 3.25rem);
    gap: var(--am-space-2, 0.5rem);
    align-items: center;
    margin-bottom: var(--am-space-2, 0.5rem);
}

[class*="-rating-hist__row"]:last-child {
    margin-bottom: 0;
}

[class*="-detail-ratings-side"] [class*="-rating-hist__label"] {
    font-size: calc(var(--am-font-xs-rem, var(--am-font-xs)) + 2px);
    color: var(--am-text-secondary, var(--am-color-text-secondary));
}

[class*="-rating-hist__track"] {
    height: var(--am-space-2, 8px);
    background: var(--am-border-muted, var(--am-border-default));
    border-radius: var(--am-radius-sm, 4px);
    overflow: hidden;
    min-width: 0;
}

[class*="-story-sidebar-face"] {
    padding: var(--am-space-1, 0.25rem);
    margin-block-end: var(--am-space-1, 0.25rem);
}

.am-is-hidden {
    display: none !important;
}

[class*="-rating-hist__fill"] {
    width: var(--am-rating-pct, 0%);
    height: 100%;
    background: var(--am-primary, var(--am-color-primary));
    border-radius: inherit;
    min-width: 0;
    transition: width 0.2s ease;
}

[class*="-detail-ratings-side"] [class*="-rating-hist__pct"] {
    font-size: calc(var(--am-font-xs-rem, var(--am-font-xs)) + 2px);
    color: var(--am-text-secondary, var(--am-color-text-secondary));
    text-align: end;
}

[class*="-detail-ratings-side"] [class*="-rating-hist__empty"] {
    margin: var(--am-space-2, 0.5rem) 0 0;
    font-size: calc(var(--am-font-sm-rem, var(--am-font-sm)) + 2px);
    color: var(--am-text-secondary, var(--am-color-text-secondary));
}

[class*="-detail-ratings-list"] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--am-space-4, 1rem);
}

[class*="-detail-ratings-list__item"] {
    padding-bottom: var(--am-space-4, 1rem);
    border-bottom: 1px solid var(--am-border-muted, var(--am-border-default));
}

[class*="-detail-ratings-list__item"]:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

[class*="-detail-ratings-list__hdr"] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--am-space-2, 0.5rem) var(--am-space-3, 0.75rem);
}

[class*="-detail-comments-ratings"] [class*="-detail-section-title"] {
    font-size: calc(var(--am-font-size-lg, 1.125rem) + 2px);
    margin-bottom: var(--am-space-2);
}

[class*="-detail-ratings-list__score"] {
    font-weight: var(--am-font-weight-semibold, 600);
    font-size: calc(var(--am-font-sm-rem, var(--am-font-sm)) + 2px);
    color: var(--am-primary, var(--am-color-primary));
}

[class*="-detail-ratings-list__meta"] {
    font-size: calc(var(--am-font-sm-rem, var(--am-font-sm)) + 2px);
    color: var(--am-text-secondary, var(--am-color-text-secondary));
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--am-space-1, 0.25rem) var(--am-space-3, 0.75rem);
}

[class*="-detail-ratings-list__author"] {
    font-weight: var(--am-font-weight-semibold, 600);
    color: var(--am-primary, var(--am-color-primary));
    text-decoration: none;
}

[class*="-detail-ratings-list__author"]:hover {
    text-decoration: underline;
}

[class*="-detail-ratings-list__review"] {
    margin-top: var(--am-space-2, 0.5rem);
    font-size: calc(var(--am-font-sm-rem, var(--am-font-sm)) + 2px);
    color: var(--am-text-primary, var(--am-color-text-primary));
    line-height: var(--am-line-height-relaxed, 1.5);
}

[class*="-detail-ratings-list__empty"] {
    margin: 0;
    font-size: calc(var(--am-font-sm-rem, var(--am-font-sm)) + 2px);
    color: var(--am-text-secondary, var(--am-color-text-secondary));
}

[class*="-detail-ratings-side__body"] .jr-list-pager {
    margin-top: var(--am-space-4, 1rem);
}

[class*="-owner-controls"] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--am-space-2, 0.5rem);
}

@media (max-width: 768px) {
    [class*="-detail-engage-bar__inner"] {
        flex-direction: column;
        align-items: stretch;
    }

    [class*="-detail-engage-bar__owner"] {
        margin-inline-start: 0;
        justify-content: flex-start;
    }
}

.am-content-detail-suggestions__grid--hidden,
[class*="-detail-suggestions__grid--hidden"] {
    display: none !important;
}

/* Module-specific hub blocks (e.g. amGroup discussions/members) */
[class*="-detail-hub"] {
    display: flex;
    flex-direction: column;
    gap: var(--am-space-5, 1.25rem);
    margin-top: var(--am-space-5, 1.25rem);
}

[class*="-detail-section__head"] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--am-space-3, 0.75rem);
    margin-bottom: var(--am-space-3, 0.75rem);
}

[class*="-detail-section__title"] {
    margin: 0;
    font-size: var(--am-font-size-lg, 1.125rem);
    font-weight: var(--am-font-weight-semibold, 600);
    color: var(--am-text-primary, var(--am-color-text-primary));
}

[class*="-detail-section__actions"] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--am-space-2, 0.5rem);
}

[class*="-discuss-row"] {
    display: flex;
    gap: var(--am-space-3, 0.75rem);
    padding: var(--am-space-3, 0.75rem) 0;
    border-bottom: 1px solid var(--am-border-muted, var(--am-border-default));
}

[class*="-discuss-row"]:last-child {
    border-bottom: none;
    padding-bottom: 0;
}