/* One loading language for pages, canvas overlays, previews and async actions.
   Page-specific styles own placement; these classes own all loading visuals. */
:root{--loading-size:40px;--loading-stroke:3px;--loading-speed:1s}
.ls-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;box-sizing:border-box;padding:24px;text-align:center;color:var(--ink);font-family:var(--sans)}
.ls-loading-content{display:flex;flex-direction:column;align-items:center;gap:16px;max-width:380px;width:100%;text-align:center}
.ls-loading .ls-loading-title,.ls-loading>strong{margin:0;font:600 22px/1.4 var(--sans);color:var(--ink)}
.ls-loading .ls-loading-detail,.ls-loading p{margin:8px 0 0;font:400 14px/1.6 var(--sans);color:var(--muted)}
.ls-loading-spinner,.ls-loading-inline::before,.ls-busy[aria-busy=true]::after{display:inline-block;box-sizing:border-box;width:var(--loading-size);height:var(--loading-size);flex:none;border:var(--loading-stroke) solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:ls-loading-spin var(--loading-speed) linear infinite}
.ls-loading-inline{--loading-size:18px;--loading-stroke:2px;display:flex;align-items:center;justify-content:center;gap:8px;color:var(--muted);font:400 14px/1.6 var(--sans)}
.ls-loading-inline::before{content:""}
.ls-loading-small{--loading-size:20px;--loading-stroke:2px}
.ls-loading-inline.ls-loading-preview{flex-direction:column;gap:12px}
.ls-loading-backdrop{background:var(--paper);cursor:progress;overscroll-behavior:contain;outline:none}
body .ls-loading .ls-loading-action{min-height:44px;min-width:112px;padding:10px 18px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink);font:500 14px/1.4 var(--sans);cursor:pointer}
body .ls-loading .ls-loading-action:hover{background:var(--hover)}
.ls-busy[aria-busy=true]{position:relative;cursor:progress}
.ls-busy[aria-busy=true]::after{content:"";--loading-size:18px;--loading-stroke:2px;position:absolute;top:calc(50% - 9px);right:12px;pointer-events:none;border-color:color-mix(in srgb,currentColor 30%,transparent);border-top-color:currentColor}
.ls-busy[aria-busy=true]:not(.ls-busy-icon){padding-right:40px}
.ls-busy-icon[aria-busy=true] svg{visibility:hidden}
.ls-busy-icon[aria-busy=true]::after{right:calc(50% - 9px)}
.ls-loading[hidden],.ls-loading-spinner[hidden],.ls-loading .ls-loading-action[hidden]{display:none}
@keyframes ls-loading-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.ls-loading-spinner,.ls-loading-inline::before,.ls-busy[aria-busy=true]::after{animation:none}}