/* MT loader (the MT mark animation and the brand ring). Script: JavaScript/mt-loader.js. Proposed standard: UI_STANDARDS "Loaders" (PROPOSED).
   Colour is one token, --brand-primary, which has a dark value in theme.css, so nothing here changes per theme.
   Wired into the global loader (Site.master #loader, box--mark) 2026-10-17; replaced the old GIF loader (the GIF files were deleted 2026-10-17).

   Sizes (the host reserves its box in CSS, so the page never shifts when the canvas is drawn):
     --lg 160 px  page loader      --md 64 px  card or button area      --sm 24 px  inline ring (CSS only, no canvas)
   Variants:
     (default) the MT mark, drawn on a canvas by mt-loader.js. Without script, a still mark (mask below) is shown.
     --ring    the circular spinner in brand primary instead of the mark: sm 24, md 40, lg 56 px. CSS only.
   Reduced motion: the mark stays still and fades gently; the ring stays still and fades gently. theme.css switches every
   animation off with a * rule, so the fade below is marked important and is the one deliberate exception. */

.mt-loader {
    position: relative;
    display: inline-block;
    flex: none;
    width: 160px;
    height: 160px;
    color: var(--brand-primary);
    vertical-align: middle;
}

.mt-loader--lg { width: 160px; height: 160px; }
.mt-loader--md { width: 64px; height: 64px; }
.mt-loader--sm { width: 24px; height: 24px; }

/* the canvas fills the host; the host owns the size */
.mt-loader-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* before script runs (or if it never does) the mark shows still; once the canvas is ready it takes over */
.mt-loader::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 61.83 26.76'%3E%3Cpath d='M60.46 1.43V0H39.4v7.06h7.18v19.7h8.11V7.06h7.14V1.43zM30.43 1.42V0h-9.85l-4.69 13.64L11.19 0H0v25.37h1.3v1.39h6.8V9.87l5.98 16.89h3.61l5.98-16.89v16.89h8.11V1.42z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 61.83 26.76'%3E%3Cpath d='M60.46 1.43V0H39.4v7.06h7.18v19.7h8.11V7.06h7.14V1.43zM30.43 1.42V0h-9.85l-4.69 13.64L11.19 0H0v25.37h1.3v1.39h6.8V9.87l5.98 16.89h3.61l5.98-16.89v16.89h8.11V1.42z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 80% auto;
    mask-size: 80% auto;
}

.mt-loader.is-ready::before { display: none; }

/* reduced motion: a still mark with a slow fade (the script draws it once and never animates it) */
.mt-loader.is-static .mt-loader-canvas {
    animation: mtLoaderFade 2.4s ease-in-out infinite !important;
}

@keyframes mtLoaderFade {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

/* ---------- ring variant (also the 24 px inline size of the mark): the existing spinner recipe, in brand primary ---------- */
.mt-loader--ring,
.mt-loader--sm {
    --mtl-ring: 3px;
    border-radius: 50%;
    border: var(--mtl-ring) solid color-mix(in srgb, currentColor 22%, transparent);
    border-top-color: currentColor;
    box-sizing: border-box;
    animation: inlineSpin 0.8s linear infinite; /* inlineSpin is defined in theme.css */
}

.mt-loader--ring::before,
.mt-loader--sm::before { display: none; }

.mt-loader--ring.mt-loader--sm { width: 24px; height: 24px; --mtl-ring: 3px; }
.mt-loader--ring.mt-loader--md { width: 40px; height: 40px; --mtl-ring: 4px; }
.mt-loader--ring.mt-loader--lg { width: 56px; height: 56px; --mtl-ring: 5px; }

@media (prefers-reduced-motion: reduce) {
    .mt-loader--ring,
    .mt-loader--sm {
        animation: mtLoaderFade 2.4s ease-in-out infinite !important;
    }
}

/* the forced-reduced preview (and the data-motion="reduced" option) behaves the same */
.mt-loader--ring.is-static,
.mt-loader--sm.is-static {
    animation: mtLoaderFade 2.4s ease-in-out infinite !important;
}

/* ---------- page loader box with the mark (used when the global loader is switched over; inert until the markup uses it) ---------- */
/* No card (2026-10-17): the layout, the text halo and the mark colour live in components.css with the scrim */
.mg-loader .box.box--mark {
    flex-direction: column;
    gap: 8px;
    padding: 0;
}

.mg-loader .box.box--mark .mt-loader--ring { margin: 24px 0 8px; }

/* ---------- button size: the mark inside a button, left of the label (busy-submit.js creates it; UI_STANDARDS 4.4) ----------
   Colour follows the button's text (primary, secondary, ghost, danger, light and dark) because it is inherited, not the brand token.
   The host is 36 x 24 px (28 x 18 for a button under 36px high); the mark fills its width and 12 squares span it, so each square is
   a clear block. The host reserves the room before the canvas is drawn, so nothing shifts. Reduced motion: the still mark, no fade. */
.mt-loader.mt-loader--btn {
    width: 36px;
    height: 24px;
    color: inherit;
    flex: none;
}

.mt-loader.mt-loader--btn-sm {
    width: 28px;
    height: 18px;
}

.mt-loader--btn::before {
    -webkit-mask-size: 100% auto;
    mask-size: 100% auto;
}

.mt-loader--btn.is-static .mt-loader-canvas {
    animation: none !important;
}