/* The S logo and S loaders (WE-121). Base rules are static: a filled S and plain labels.
   All motion sits in the no-preference block, so reduced motion shows the static S. */
.sw-defs{position:absolute;width:0;height:0;overflow:hidden}
.sw-s{display:block;width:1em;height:1em;overflow:visible;flex:none}
.sw-s use{fill:var(--accent)}
.sw-logo{position:relative;display:block;width:1em;height:1em;flex:none;transition:transform .2s}
.sw-logo .sw-s{width:100%;height:100%}
.sw-sweep{opacity:0}
.sw-live{position:absolute;top:-3px;right:-7px;width:5px;height:5px;border-radius:50%;background:var(--accent);opacity:.4}
.sw-live.is-fresh{opacity:1;box-shadow:0 0 5px 1px var(--accent)}

.sw-loader{display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--muted);font:500 14px/1.3 var(--sans);text-align:center}
.sw-loader .sw-s{width:44px;height:44px}
.sw-loader .sw-label{max-width:28ch}
.sw-rel{position:relative}
.sw-loading{min-height:11rem}
.sw-loading.sw-r-inline{min-height:0}
.sw-loading>.sw-loader.sw-m-page,.sw-loading>.sw-loader.sw-m-progress{position:absolute;inset:0;justify-content:center;z-index:2}
.sw-loading>.sw-loader.sw-m-progress{background:color-mix(in srgb,var(--bg) 78%,transparent)}
.sw-loading.sw-r-page>:not(.sw-loader),.sw-loading.sw-r-list>:not(.sw-loader){visibility:hidden}
.sw-loading>.sw-loader.sw-m-list{position:absolute;top:0;left:0;right:0;align-items:stretch;gap:14px;z-index:2}
.sw-m-list .sw-s{align-self:flex-start;width:28px;height:28px}
.sw-m-list .sw-label{align-self:flex-start;text-align:left}
.sw-loader.sw-m-list{flex-direction:column}
.sw-m-list .sw-head{display:flex;align-items:center;gap:10px}
.sw-skel{display:grid;gap:18px}
.sw-skel div{display:grid;gap:8px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.sw-skel i{display:block;height:14px;border-radius:3px;background:var(--s2)}
.sw-skel i:first-child{width:78%;height:18px}
.sw-skel i:last-child{width:34%}
.sw-m-inline{display:inline-flex;flex-direction:row;gap:8px;vertical-align:middle}
.sw-m-inline .sw-s{width:18px;height:18px}
.sw-loading>.sw-loader.sw-m-inline{position:static}
.sw-m-progress .sw-s{width:56px;height:56px}
.sw-track use{fill-opacity:.2}
.sw-m-progress .sw-fill{clip-path:inset(calc(100% - var(--p,0) * 100%) 0 0 0)}
.sw-m-progress.sw-indet .sw-fill{clip-path:none}

.sw-state{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:20px 0;color:var(--ink);font:16px/1.5 var(--sans)}
.sw-state .sw-s{width:40px;height:40px}
.sw-state p{margin:0;max-width:46ch}
.sw-state .sw-title{font-weight:600}
.sw-state-compact{padding:12px;flex-direction:row;align-items:center}
.sw-state-compact .sw-s{width:24px;height:24px}
.sw-state-empty .sw-bot{fill-opacity:.25}
.sw-state-error .sw-bot{translate:13px 7px}

.sw-ptr{position:fixed;left:50%;top:var(--bar-h,60px);z-index:35;width:36px;height:36px;margin:-36px 0 0 -18px;padding:6px;box-sizing:border-box;border-radius:50%;background:var(--surface);box-shadow:0 2px 8px var(--shadow);pointer-events:none;opacity:0;transform:translateY(calc(var(--pull,0) * 1px))}
.sw-ptr .sw-s{width:100%;height:100%}
.sw-ptr.on{opacity:1}
.sw-ptr use{stroke:var(--accent);stroke-width:4;fill-opacity:0;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--p,0))}
.sw-ptr.go use{fill-opacity:1}

@media (prefers-reduced-motion:no-preference){
  .sw-idle .sw-top{animation:sw-top 6s ease-in-out 1s infinite}
  .sw-idle .sw-bot{animation:sw-bot 6s ease-in-out 1s infinite}
  .sw-idle.sw-click .sw-bot{animation:sw-bot 6s ease-in-out 1.6s infinite,sw-click .6s cubic-bezier(.2,.8,.3,1.15) both}
  .sw-idle .sw-sweep{animation:sw-sweep 9s ease-in-out 3.5s infinite}
  .sw-idle[data-nav]{animation:sw-flick .45s steps(1,end)}
  .sw-idle[data-paused] *{animation-play-state:paused}
  .sw-live.is-fresh::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:1px solid var(--accent);animation:sw-glow 3.6s ease-out infinite}
  @keyframes sw-top{50%{transform:translateY(-2px)}}
  @keyframes sw-bot{50%{transform:translateY(2px)}}
  @keyframes sw-click{from{translate:16px 0;opacity:.25}to{translate:0 0;opacity:1}}
  @keyframes sw-sweep{0%{transform:translateX(0);opacity:1}7%,100%{transform:translateX(175px);opacity:1}}
  @keyframes sw-flick{0%{opacity:.25}50%{opacity:1}75%{opacity:.4}100%{opacity:1}}
  @keyframes sw-glow{0%{transform:scale(.6);opacity:.7}70%,100%{transform:scale(1.6);opacity:0}}

  .sw-m-page .sw-s use{stroke:var(--accent);stroke-width:3;fill-opacity:0;stroke-dasharray:1;stroke-dashoffset:1;animation:sw-draw 2.4s ease-in-out infinite}
  @keyframes sw-draw{0%{stroke-dashoffset:1;fill-opacity:0;stroke-opacity:1}50%{stroke-dashoffset:0;fill-opacity:0;stroke-opacity:1}68%,86%{stroke-dashoffset:0;fill-opacity:1;stroke-opacity:1}100%{stroke-dashoffset:0;fill-opacity:0;stroke-opacity:0}}
  .sw-m-inline .sw-top{transform-box:fill-box;transform-origin:0 50%;animation:sw-turn-a 1.6s ease-in-out infinite}
  .sw-m-inline .sw-bot{transform-box:fill-box;transform-origin:100% 50%;animation:sw-turn-b 1.6s ease-in-out infinite}
  @keyframes sw-turn-a{0%{transform:scaleX(0);opacity:1}35%,90%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
  @keyframes sw-turn-b{0%,35%{transform:scaleX(0);opacity:1}70%,90%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
  .sw-m-list .sw-s{animation:sw-pulse 1.4s ease-in-out infinite}
  @keyframes sw-pulse{50%{opacity:.4}}
  .sw-m-progress .sw-fill{transition:clip-path .25s ease-out}
  .sw-m-progress.sw-indet .sw-fill{animation:sw-fill-up 1.8s ease-in-out infinite}
  @keyframes sw-fill-up{0%{clip-path:inset(100% 0 0 0);opacity:1}70%{clip-path:inset(0 0 0 0);opacity:1}100%{clip-path:inset(0 0 0 0);opacity:0}}
  .sw-ptr{transition:opacity .15s}
  .sw-ptr.go{animation:sw-quarter .4s ease-in-out forwards}
  @keyframes sw-quarter{to{transform:translateY(calc(var(--pull,0) * 1px)) rotate(90deg)}}
}
@media (prefers-reduced-motion:reduce){
  .sw-s,.sw-s *,.sw-live,.sw-live::after,.sw-loader *,.sw-ptr,.sw-ptr *{animation:none!important;transition:none!important}
  .sw-logo{transition:none}
}
