/* loading.css - the shared loading kit (window.TinyLoading in loading.js). Only the app's CSS variables, with fallbacks for pages that do not load app.css.
   Motion: transform and opacity only. The one endless loop is the spinner rotation (tl-rot) and the indeterminate bar (tl-slide) while real work runs. */
.tl-bar[hidden] { display: none; }
.tl-bar { display: block; width: 100%; margin-top: var(--s2, 8px); }
.tl-bar .tl-track { display: block; position: relative; height: 10px; border-radius: var(--r-pill, 999px); background: var(--line, #dfe4ec); overflow: hidden; }
.tl-bar .tl-fill { position: absolute; inset: 0; display: block; background: var(--accent, #1f5eff); transform-origin: left; transform: scaleX(max(calc(var(--tl-pct, 0) / 100), .02)); transition: transform 200ms var(--ease-std, cubic-bezier(.2, 0, 0, 1)); }
.tl-bar.is-indeterminate .tl-fill { right: auto; width: 35%; transform: translateX(-100%); transition: none; animation: tl-slide 1400ms cubic-bezier(.4, 0, .2, 1) infinite; }
.tl-bar .tl-label { display: block; margin-top: var(--s1, 4px); font-size: var(--fs-sm, 14px); color: var(--muted, #5b6675); }
.tl-bar .tl-label:empty { display: none; }
@keyframes tl-slide { from { transform: translateX(-100%); } to { transform: translateX(285%); } }

.tl-spin { position: relative; display: inline-block; width: 24px; height: 24px; vertical-align: middle; flex: none; }
.tl-spin.is-lg { width: 24px; height: 24px; }
.tl-spin.is-sm { width: 16px; height: 16px; }
.tl-spin > i { display: block; box-sizing: border-box; width: 100%; height: 100%; border-radius: 50%; border: 2px solid var(--accent, #1f5eff); border-bottom-color: transparent; animation: tl-rot 1000ms linear infinite; }
.tl-spin-wrap { display: inline-flex; align-items: center; gap: var(--s3, 12px); }
.tl-spin-wrap .tl-spin-label { color: var(--muted, #5b6675); }
@keyframes tl-rot { to { transform: rotate(360deg); } }

.tl-busy { cursor: progress; display: inline-flex; align-items: center; justify-content: center; gap: var(--s2, 8px); }
.tl-busy, .tl-busy:disabled { opacity: 1; }
.tl-busy.btn { transition: transform var(--d-fast, 120ms) var(--ease-std, cubic-bezier(.2, 0, 0, 1)); }
.tl-busy.btn:active { transform: scale(.98); }
.tl-busy.primary .tl-spin > i { border-color: var(--on-accent, var(--accent-ink, #fff)); border-bottom-color: transparent; }
.tl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* skeleton: still placeholder blocks for the first paint (loading.js skeleton) */
.tl-skel { display: grid; gap: var(--s3, 12px); animation: tl-skel-in 150ms var(--ease-out, cubic-bezier(.05, .7, .1, 1)) backwards; }
.tl-skel.is-out { animation: tl-skel-out 120ms var(--ease-in, cubic-bezier(.3, 0, .8, .15)) forwards; }
.tl-skel-title { height: 28px; width: 40%; border-radius: var(--r-s, 8px); background: color-mix(in srgb, var(--line, #dfe4ec) 60%, var(--surface, var(--card, #fff))); }
.tl-skel-card { height: 96px; border-radius: var(--r-m, 16px); background: color-mix(in srgb, var(--line, #dfe4ec) 60%, var(--surface, var(--card, #fff))); }
@keyframes tl-skel-in { from { opacity: 0; } }
@keyframes tl-skel-out { to { opacity: 0; } }

/* language select on standalone pages (langpick.js): a fixed size, so changing the language never moves the header */
header.top > .tl-lang, [data-langpick-slot] > .tl-lang { margin-left: auto; }
.tl-lang { box-sizing: border-box; width: 10rem; max-width: 100%; min-height: var(--tap, 44px); font: inherit; font-size: var(--fs-sm, 14px); color: var(--ink, #172033); background: var(--surface, var(--card, #fff)); border: 1px solid var(--line, #dfe4ec); border-radius: var(--r-s, 8px); padding: 0 var(--s2, 8px); }
.tl-lang:focus-visible, .tl-busy:focus-visible { outline: 2px solid var(--accent, #1f5eff); outline-offset: 2px; }
html.tl-lang-out { opacity: 0; transition: opacity 100ms var(--ease-in, cubic-bezier(.3, 0, .8, .15)); }
html.tl-lang-in { animation: tl-lang-in 150ms var(--ease-out, cubic-bezier(.05, .7, .1, 1)) backwards; }
@keyframes tl-lang-in { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .tl-bar .tl-fill, .tl-bar.is-indeterminate .tl-fill, .tl-spin > i, .tl-skel, .tl-skel.is-out, html.tl-lang-in { animation: none; transition: none; }
  html.tl-lang-out { transition: none; opacity: 1; }
  .tl-busy.btn { transition: none; }
  .tl-bar.is-indeterminate .tl-fill { width: 40%; transform: none; margin-left: 30%; }
}
/* round 3 AX (L12-10): Windows High Contrast: the track gets an edge, the fill a system colour */
@media (forced-colors: active) { .tl-bar .tl-track { border: 1px solid CanvasText; background: Canvas; } .tl-bar .tl-fill { background: Highlight; forced-color-adjust: none; } }