/* ---------- shimmer: loading skeletons, "Light sweep" (per Nainesh 2026-10-14) ----------
   One look everywhere: the component's own outline in grey with a soft blue-tinted light passing over it, then
   the real content replaces it in place (same size, so nothing jumps). Set by assets/demo/nv-shimmer.js and by
   the loaders in novara.js through window.nvSk. Reduced motion: a still grey shape, no sweep. */
:root{--sk:#e6e8ee;--sk-hi:rgba(255,255,255,.85);--sk-tint:rgba(58,79,140,.10)}
@keyframes nvSkSweep{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@keyframes nvSkBg{from{background-position:130% 0}to{background-position:-30% 0}}

/* a block that is waiting */
.nv-sk,
.nv-sk-rows .dtab__m>span,
.nv-sk-rows .dtab__row>span:not(.dtab__m):not(:last-child),
.is-busy>[data-fd-n]{position:relative;overflow:hidden;background:var(--sk)!important;color:transparent!important;border-color:transparent!important;pointer-events:none}
.nv-sk>*{visibility:hidden}
.nv-sk::after,
.nv-sk-rows .dtab__m>span::after,
.nv-sk-rows .dtab__row>span:not(.dtab__m):not(:last-child)::after,
.is-busy>[data-fd-n]::after,
[data-add][aria-busy="true"]::after,
.cl.is-busy::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 30%,var(--sk-tint) 44%,var(--sk-hi) 50%,var(--sk-tint) 56%,transparent 70%);transform:translateX(-100%);animation:nvSkSweep 2.2s cubic-bezier(.4,0,.2,1) infinite}

/* text lines inside a skeleton card / panel */
.nv-sk-line{display:block;height:14px;margin:3px 0}
.nv-sk-card{pointer-events:none}
.nv-sk-chips{display:flex;flex-wrap:wrap;gap:8px}
.nv-sk-chip{display:block;width:72px;height:38px}
.nv-sk-btn{display:block;height:48px;width:100%;margin-top:8px}

/* an image that has not arrived yet: the sweep runs on the image's own background, so no wrapper changes */
img.nv-sk-img{background-color:var(--sk);background-image:linear-gradient(115deg,var(--sk) 30%,#eef0f6 44%,#fbfbfd 50%,#eef0f6 56%,var(--sk) 70%);background-size:300% 100%;animation:nvSkBg 2.2s cubic-bezier(.4,0,.2,1) infinite}

/* ring builder step 2: skeleton rows are real rows (same grid) with every cell greyed */
.nv-sk-rows{pointer-events:none}
.nv-sk-rows .dtab__m{display:flex;flex-direction:column;gap:6px}
.nv-sk-rows .dtab__m>span,.nv-sk-rows .dtab__row>span:not(.dtab__m):not(:last-child){display:block;border-radius:0}
.nv-sk-rows .dtab__img{min-height:48px}

/* waiting buttons and cart lines: the light passes over them */
[data-add][aria-busy="true"],.cl.is-busy{position:relative;overflow:hidden}
[data-add][aria-busy="true"]::after{background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.12) 44%,rgba(255,255,255,.32) 50%,rgba(255,255,255,.12) 56%,transparent 70%)}
.is-busy>[data-fd-n]{display:inline-block;min-width:2.4em;vertical-align:middle}

@media (prefers-reduced-motion:reduce){
  .nv-sk::after,.nv-sk-rows span::after,.is-busy>[data-fd-n]::after,[data-add][aria-busy="true"]::after,.cl.is-busy::after{animation:none;display:none}
  img.nv-sk-img{animation:none;background-image:none}
}