/* Alamna R19.15.5 — reusable section skeletons for slow/dynamic content. */
.alamna-skeleton-scope{position:relative;min-width:0}
.alamna-skeleton-content{min-width:0}
.alamna-skeleton-placeholder{display:none;min-width:0}
/* R19.16.44 — CLS guard: the final content owns layout height even while hidden.
   The skeleton is only a visual overlay, so revealing real content cannot resize the feed root. */
.alamna-skeleton-scope.is-skeleton-loading>.alamna-skeleton-placeholder{
    display:block;
    position:absolute;
    inset-inline:0;
    inset-block-start:0;
    z-index:1;
    pointer-events:none;
}
.alamna-skeleton-scope.is-skeleton-loading>.alamna-skeleton-content{
    visibility:hidden;
    position:static;
    pointer-events:none;
}
.alamna-skeleton-scope.is-skeleton-ready>.alamna-skeleton-placeholder{display:none}
.alamna-skeleton-scope.is-skeleton-ready>.alamna-skeleton-content{visibility:visible;position:static;pointer-events:auto;animation:alamnaSkeletonContentIn .18s ease both}

.alamna-skeleton-block{
    position:relative;
    overflow:hidden;
    background:color-mix(in srgb,var(--surface-soft,#f3f6f4) 84%,var(--border,#dde5e0));
    border:1px solid color-mix(in srgb,var(--border,#dde5e0) 78%,transparent);
}
.alamna-skeleton-block::after{
    content:"";
    position:absolute;
    inset:-1px;
    transform:translateX(-105%);
    background:linear-gradient(100deg,transparent 15%,color-mix(in srgb,var(--surface,#fff) 72%,transparent) 48%,transparent 80%);
    animation:alamnaSkeletonShimmer 1.25s ease-in-out infinite;
}
.alamna-skeleton-line{height:12px;border-radius:999px}
.alamna-skeleton-line.is-title{height:18px;width:48%}
.alamna-skeleton-line.is-medium{width:68%}
.alamna-skeleton-line.is-short{width:36%}
.alamna-skeleton-avatar{width:52px;height:52px;border-radius:15px;flex:0 0 auto}
.alamna-skeleton-chip{width:78px;height:34px;border-radius:999px;flex:0 0 auto}
.alamna-skeleton-chip:nth-child(2){width:102px}.alamna-skeleton-chip:nth-child(3){width:88px}.alamna-skeleton-chip:nth-child(4){width:112px}.alamna-skeleton-chip:nth-child(5){width:94px}

.alamna-discover-skeleton{padding-top:18px}
.alamna-discover-skeleton__chips{display:flex;gap:8px;overflow:hidden;padding:2px 2px 6px;white-space:nowrap}
.alamna-discover-skeleton__cards{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;margin-top:22px}
.alamna-discover-skeleton-card{display:grid;grid-template-columns:minmax(230px,31%) minmax(0,1fr);min-height:190px;border:1px solid var(--border,#dde5e0);border-radius:18px;overflow:hidden;background:var(--surface,#fff);box-shadow:var(--shadow-xs,0 1px 2px rgba(0,0,0,.04))}
.alamna-discover-skeleton-card__media{min-height:190px;border:0;border-inline-end:1px solid color-mix(in srgb,var(--border,#dde5e0) 80%,transparent);border-radius:0}
.alamna-discover-skeleton-card__body{display:flex;flex-direction:column;gap:13px;padding:18px 20px;background:var(--surface,#fff)}
.alamna-discover-skeleton-card__identity{display:flex;align-items:center;gap:12px}
.alamna-discover-skeleton-card__copy{display:grid;gap:8px;flex:1;min-width:0}
.alamna-discover-skeleton-card__signals{display:flex;gap:7px;margin-top:2px}.alamna-discover-skeleton-card__signal{width:122px;height:27px;border-radius:999px}.alamna-discover-skeleton-card__signal:last-child{width:88px}
.alamna-discover-skeleton-card__action{width:126px;height:36px;border-radius:10px;margin-top:auto}

.alamna-home-feed-skeleton{display:grid;gap:16px}
.alamna-home-skeleton-card{border:1px solid var(--border,#dde5e0);border-radius:18px;padding:18px;background:var(--surface,#fff);box-shadow:var(--shadow-xs,0 1px 2px rgba(0,0,0,.04))}
.alamna-home-skeleton-card__head{display:flex;align-items:center;gap:11px}.alamna-home-skeleton-card__copy{display:grid;gap:7px;flex:1}
.alamna-home-skeleton-card__body{display:grid;gap:9px;margin-top:16px}
.alamna-home-skeleton-card__media{height:230px;border-radius:14px;margin-top:14px}
.alamna-home-skeleton-card__actions{display:flex;gap:9px;margin-top:14px}.alamna-home-skeleton-card__action{width:82px;height:31px;border-radius:999px}
.alamna-home-skeleton-card.is-news .alamna-home-skeleton-card__media{height:170px}

@keyframes alamnaSkeletonShimmer{to{transform:translateX(105%)}}
@keyframes alamnaSkeletonContentIn{from{opacity:.2}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.alamna-skeleton-block::after{animation:none}.alamna-skeleton-scope.is-skeleton-ready>.alamna-skeleton-content{animation:none}}
@media(max-width:760px){
    .alamna-discover-skeleton{margin-inline:12px;padding-top:14px}
    .alamna-discover-skeleton__cards{gap:16px;margin-top:18px}
    .alamna-discover-skeleton-card{display:block;min-height:0}
    .alamna-discover-skeleton-card__media{height:180px;min-height:180px;border-inline-end:0;border-bottom:1px solid color-mix(in srgb,var(--border,#dde5e0) 80%,transparent)}
    .alamna-discover-skeleton-card__body{padding:14px}
    .alamna-home-skeleton-card{padding:14px;border-radius:16px}
    .alamna-home-skeleton-card__media{height:210px}
}

/* R19.15.75 — Public navigation uses a skeleton instead of the full-page brand loader. */
html.alamna-public-navigation-loading,
html.alamna-public-navigation-loading body{overflow:hidden!important}

/* R19.15.80 — keep the real Alamna header visible while an internal navigation skeleton is active.
   Changing body/html overflow can break sticky positioning on Safari/WebKit when the user
   starts navigation from a scrolled position, exposing the previous page behind the skeleton. */
html.alamna-public-navigation-loading .public-header{
    position:fixed!important;
    inset-block-start:0;
    inset-inline:0;
    width:100%;
    z-index:70!important;
}
.alamna-public-navigation-skeleton{
    position:fixed;
    inset:72px 0 0;
    z-index:60;
    display:none;
    overflow:auto;
    padding:28px 24px 44px;
    background:var(--background,#f7f8fa);
    overscroll-behavior:contain;
}
html.alamna-public-navigation-loading .alamna-public-navigation-skeleton{display:block}
.alamna-public-navigation-skeleton__shell{
    width:min(1500px,100%);
    margin:0 auto;
    display:grid;
    grid-template-columns:minmax(230px,300px) minmax(0,760px) minmax(230px,300px);
    justify-content:center;
    gap:24px;
    align-items:start;
}
.alamna-public-navigation-skeleton__main{display:grid;gap:16px;min-width:0}
.alamna-public-navigation-skeleton__rail{
    display:grid;
    gap:14px;
    min-width:0;
    padding:16px;
    border:1px solid var(--border,#dde5e0);
    border-radius:18px;
    background:var(--surface,#fff);
}
.alamna-nav-skeleton-toolbar{
    min-height:58px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:14px 16px;
    border:1px solid var(--border,#dde5e0);
    border-radius:16px;
    background:var(--surface,#fff);
}
.alamna-nav-skeleton-line{height:13px;border-radius:999px;width:88%}
.alamna-nav-skeleton-line.is-title{height:20px;width:62%}
.alamna-nav-skeleton-line.is-medium{width:72%}
.alamna-nav-skeleton-line.is-short{width:44%}
.alamna-nav-skeleton-box{height:138px;border-radius:14px}
.alamna-nav-skeleton-box.is-tall{height:210px}

@media(max-width:1180px){
    .alamna-public-navigation-skeleton__shell{grid-template-columns:minmax(0,760px) minmax(220px,280px)}
    .alamna-public-navigation-skeleton__rail:first-child{display:none}
}
@media(max-width:820px){
    .alamna-public-navigation-skeleton{inset-block-start:64px;padding:18px 12px 32px}
    .alamna-public-navigation-skeleton__shell{display:block;width:100%}
    .alamna-public-navigation-skeleton__rail{display:none!important}
    .alamna-public-navigation-skeleton__main{gap:14px}
    .alamna-nav-skeleton-toolbar{min-height:52px;padding:12px 14px}
    .alamna-home-skeleton-card__media{height:190px}
}