/* Loading layer shared by the public site and the management system. See public/js/loading.js. */

@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .16s; animation-timing-function: ease-out; }

/* While a request is running, nothing else can be clicked. The layer is invisible; the spinner shows only if the wait is long. */
#busy-lock { position: fixed; inset: 0; z-index: 2000; cursor: progress; background: transparent; }
#busy-lock[hidden] { display: none; }

[aria-busy="true"] { position: relative; pointer-events: none; }
[aria-busy="true"].spin { color: transparent !important; }
[aria-busy="true"].spin > * { opacity: 0; }
[aria-busy="true"].spin::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: busy-spin .7s linear infinite; }
.ghostd[aria-busy="true"].spin::after, .btn.light[aria-busy="true"].spin::after { border-color: rgba(15, 27, 19, .2); border-top-color: var(--ink, #0f1b13); }
select[aria-busy="true"], input[aria-busy="true"] { opacity: .6; }
.mini-spin { display: inline-block; width: 16px; height: 16px; margin-left: 8px; vertical-align: middle; border: 2px solid rgba(15, 27, 19, .18); border-top-color: var(--olive, #174a2d); border-radius: 50%; animation: busy-spin .7s linear infinite; }
@keyframes busy-spin { to { transform: rotate(360deg); } }

/* Skeleton: the page content is replaced by grey shapes with a band of light sweeping across, like light moving over a surface. */
.skel-on { pointer-events: none; }
.skel-on :is(img, svg, video, canvas, iframe) { visibility: hidden; }
.skel-on * { color: transparent !important; border-color: transparent !important; box-shadow: none !important; text-shadow: none !important; }
.skel-on :is(h1, h2, h3, h4, p, b, span, a, td, th, small, i, em, li, label, button, input, select, textarea, figure, dt, dd):not(:has(*)),
.skel-on :has(> img) {
  background: linear-gradient(100deg, #dfe4e1 30%, #ffffff 50%, #dfe4e1 70%) var(--sweep) 0 / 250% 100% #dfe4e1 !important;
  border-radius: 6px; animation: skel-sweep 1.5s linear infinite;
}
.skel-on :is(td, th):not(:has(*)) { background-clip: content-box !important; }
.skel-on ::placeholder { color: transparent; }
.skel-on [aria-current="true"], .skel-on [aria-pressed="true"] { background: #dfe4e1 !important; }
@property --sweep { syntax: '<percentage>'; inherits: false; initial-value: 100%; }
@keyframes skel-sweep { from { --sweep: 100%; } to { --sweep: -100%; } }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .skel-on :is(h1, h2, h3, h4, p, b, span, a, td, th, small, i, em, li, label, button, input, select, textarea, figure, dt, dd):not(:has(*)), .skel-on :has(> img) { animation: none; }
  [aria-busy="true"].spin::after { animation-duration: 1.6s; }
}

/* A tick that is wiped in from the left once the server has confirmed. */
.done .ok svg { animation: tick-wipe .45s ease-out .2s backwards; }
@keyframes tick-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { .done .ok svg { animation: none; } }
.mini-spin { flex: none; } form:has(> .mini-spin) { white-space: nowrap; }