:root {
    --shls-base: #ececec;
    --shls-hi: #f8f8f8;
    --shls-speed: 980ms;
    --shls-fade: 110ms;
}

/*
 * Safety contract:
 * - every element created by this plugin uses the shls- prefix;
 * - no rule hides, disables, resizes or changes pointer-events on site/plugin DOM;
 * - all visual surfaces are pointer-events:none.
 */
#shls-visual-root,
#shls-visual-root *,
.shls-activity-flow,
.shls-activity-flow *,
.shls-empty-flow,
.shls-empty-flow * {
    pointer-events: none !important;
    user-select: none !important;
}

#shls-visual-root {
    position: absolute;
    inset: 0 auto auto 0;
    width: 0;
    height: 0;
    z-index: 40;
    contain: layout style;
}

.shls-portal {
    position: absolute;
    box-sizing: border-box;
    overflow: hidden;
    opacity: 1;
    transition: opacity var(--shls-fade) ease;
    background: var(--shls-surface, transparent);
}
.shls-portal.shls-leaving { opacity: 0; }

.shls-grid {
    width: 100%;
    height: 100%;
    display: grid;
    box-sizing: border-box;
    align-content: start;
}

.shls-card {
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 8px;
    overflow: hidden;
}
.shls-card-grid { display: block; padding: 4px; }
.shls-thumb {
    width: 78px;
    height: 78px;
    flex: 0 0 78px;
    border-radius: 12px;
}
.shls-card-grid .shls-thumb {
    width: 100%;
    height: 0;
    padding-bottom: 66%;
    border-radius: 14px;
    margin-bottom: 12px;
}
.shls-copy { flex: 1 1 auto; min-width: 0; padding-right: 5%; }
.shls-line { height: 10px; border-radius: 999px; margin: 0 0 9px; }
.shls-line-lg { height: 13px; width: 58%; }
.shls-line-md { width: 74%; }
.shls-line-sm { width: 38%; margin-bottom: 0; }
.shls-pill-row { display:flex; gap:7px; margin-top:13px; }
.shls-pill { width:58px; height:16px; border-radius:999px; }
.shls-pill-short { width:42px; }

.shls-card-table {
    display: grid;
    grid-template-columns: minmax(0,2.4fr) minmax(60px,.9fr) minmax(55px,.6fr) minmax(70px,.8fr) minmax(80px,1fr);
    align-items: center;
    gap: 14px;
    padding: 16px 14px;
    min-height: 86px;
}
.shls-card-table .shls-line { margin: 0; width: 70%; }

/* Empty lists can use a normal-flow visual because there is no existing result geometry to cover. */
.shls-empty-flow,
.shls-activity-flow {
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
    opacity: 1;
    transition: opacity var(--shls-fade) ease;
}
.shls-empty-flow.shls-leaving,
.shls-activity-flow.shls-leaving { opacity: 0; }

/* Ultimate Member Activity feed skeletons: stable social-post geometry, never an overlay. */
.shls-activity-flow { margin: 14px 0 18px; }
.shls-activity-card {
    box-sizing: border-box;
    width: 100%;
    padding: 18px 18px 16px;
    margin: 0 0 14px;
    border: 1px solid rgba(127,127,127,.16);
    border-radius: 12px;
}
.shls-activity-head { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.shls-avatar { width:44px; height:44px; border-radius:50%; flex:0 0 44px; }
.shls-activity-headcopy { flex:1; min-width:0; }
.shls-activity-media { width:100%; height:170px; border-radius:12px; margin:14px 0 12px; }
.shls-activity-actions { display:flex; gap:18px; padding-top:4px; }
.shls-action { width:72px; height:11px; border-radius:999px; }

/* Safe image shimmer is another visual portal; the actual img is never changed. */
.shls-image-portal { position:absolute; border-radius:inherit; overflow:hidden; opacity:1; transition:opacity var(--shls-fade) ease; }

.shls-block,
.shls-image-portal {
    background-color: var(--shls-base) !important;
    background-image: linear-gradient(100deg,var(--shls-base) 0%,var(--shls-base) 36%,var(--shls-hi) 49%,var(--shls-base) 62%,var(--shls-base) 100%) !important;
    background-size: 220% 100% !important;
    animation: shls-sweep var(--shls-speed) linear infinite !important;
}
@keyframes shls-sweep { 0% { background-position:180% 0; } 100% { background-position:-40% 0; } }

@media (max-width: 767px) {
    .shls-card { gap:12px; padding:10px 4px; }
    .shls-thumb { width:62px; height:62px; flex-basis:62px; border-radius:10px; }
    .shls-card-grid .shls-thumb { border-radius:12px; }
    .shls-card-table { display:block; padding:14px 8px; min-height:80px; }
    .shls-card-table .shls-line { margin-bottom:9px; width:70%; }
    .shls-activity-card { padding:14px 12px; border-radius:10px; }
    .shls-activity-media { height:130px; }
}

@media (prefers-reduced-motion: reduce) {
    .shls-block,
    .shls-image-portal { animation:none !important; background-image:none !important; }
    .shls-portal,
    .shls-empty-flow,
    .shls-activity-flow,
    .shls-image-portal { transition:none !important; }
}