/* =============================================================
   LOADING MARK — reusable Propia logo + spinner ring, shown anywhere
   the system needs a "working" state (wizard finishing steps, blade
   loads, full-page login transitions). Build the markup with
   LoadingMark.html(size) in loading-mark.js. Preview at different
   sizes: Settings > Area 51 > UI Components.
   Resize with the size argument, or by setting --loading-mark-size
   directly on a .loading-mark element. Default is 130px.

   Standalone file (no dependency on site.css) so pages that run with
   Layout = null and don't load site.css (Index.cshtml,
   Account/Login.cshtml) can link just this file and still render the
   exact same mark as every _Layout-based page — see CLAUDE.md's
   animation-parity note. _Layout.cshtml links this alongside
   site.css so every page shares one definition.
   ============================================================= */
.loading-mark {
    --loading-mark-size: 130px;
    position: relative;
    width: var(--loading-mark-size);
    height: var(--loading-mark-size);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

/* The logo's own fill is a gradient between --accent-primary and a lightened mix of it
   (color-mix(in srgb, --accent-primary 55%, white)), set inline via <stop style="stop-color:...">
   in LoadingMark.html() (loading-mark.js) rather than the stop-color attribute, since only the
   style form participates in the CSS cascade and resolves var(). Deliberately NOT --accent-hover:
   hover is always a darker shade of primary (see every [data-accent] block in theme.css), so the
   two were nearly identical in lightness and the gradient read as flat/dull. color-mix reproduces
   a real light-to-dark jump for whichever accent colour is active. Theme-safe regardless of
   light/dark site theme — see CLAUDE.md's --accent-light caveat, which doesn't apply here since
   this mark always sits on the same dark blurred backdrop regardless of the site's own theme. */
.loading-mark__logo {
    width: calc(var(--loading-mark-size) * 0.646);
    height: auto;
    position: relative;
    z-index: 1;
}

/* Ring sits absolutely within the (fixed-size, centered) wrapper so it forms a ring around the
   logo rather than sitting below it — both share the same center point. inset:2.5% makes the
   ring 95% of the wrapper's diameter. A conic-gradient + radial-gradient mask (rather than a flat
   border-top-color trick) so it can sweep through a dark→light accent range instead of a single
   flat colour — same color-mix reasoning as .loading-mark__logo above.
   The transparent→solid fade is compressed into the first 45deg (rather than a full 90deg) and
   the band is 4px rather than 3px — at small --loading-mark-size values a wider, softer fade left
   most of the ring looking like an antialiased smudge instead of a crisp arc. */
.loading-mark__ring {
    position: absolute;
    inset: 2.5%;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0deg, var(--accent-primary, #0078d4) 45deg, color-mix(in srgb, var(--accent-primary, #0078d4) 55%, white) 360deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
    animation: loading-mark-spin .7s linear infinite;
}

@keyframes loading-mark-spin {
    to { transform: rotate(360deg); }
}