/* Skeleton loaders: grey shapes that stand in for what is loading, with a soft shimmer.
   One style for the whole app. The colours come from the text colour around them, so the
   same classes work on light and dark pages and inside any template; a page can set the
   tokens below to tune them. Motion stops for people who ask for less of it. */
:root {
    --sk-base: color-mix(in srgb, currentColor 9%, transparent);
    --sk-shine: color-mix(in srgb, currentColor 6%, transparent);
    --sk-radius: 0.375rem;
    --sk-speed: 1.6s;
}

.sk {
    display: block;
    position: relative;
    overflow: hidden;
    background: var(--sk-base);
    border-radius: var(--sk-radius);
    color: inherit;
}
.sk::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, var(--sk-shine) 40%, var(--sk-shine) 60%, transparent);
    animation: sk-shimmer var(--sk-speed) ease-in-out infinite;
}
@keyframes sk-shimmer { to { transform: translateX(100%); } }

/* Shapes */
.sk-line { height: 0.75em; margin: 0.4em 0; }
.sk-line.is-short { width: 40%; }
.sk-line.is-mid { width: 65%; }
.sk-line.is-title { height: 1.05em; width: 55%; }
.sk-circle { border-radius: 50%; flex: none; }
.sk-avatar { width: 2.25rem; height: 2.25rem; border-radius: 50%; flex: none; }
.sk-pill { height: 1.75rem; width: 6rem; border-radius: 99px; }
.sk-frame { width: 100%; aspect-ratio: 16 / 9; }
.sk-box { width: 100%; height: 100%; min-height: 3rem; }
.sk-inline { display: inline-block; vertical-align: middle; height: 0.8em; width: 4em; margin: 0; }

/* Layouts made of shapes */
.sk-stack { display: grid; gap: 0.35rem; }
.sk-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0; }
.sk-row > .sk-stack { flex: 1; min-width: 0; }
.sk-list { display: grid; gap: 0.25rem; list-style: none; margin: 0; padding: 0; }
.sk-grid { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
.sk-card { border: 1px solid var(--sk-base); border-radius: 0.625rem; padding: 0.75rem; display: grid; gap: 0.5rem; }
/* A chat reply on its way: two or three bubbles of lines. */
.sk-message { display: grid; gap: 0.35rem; max-width: 22rem; width: 70%; padding: 0.25rem 0; }
.sk-message .sk-line:last-child { width: 55%; }

/* A short line under a skeleton that says what is happening, for screen readers too. */
.sk-caption { font-size: 0.75rem; opacity: 0.75; margin: 0.35rem 0 0; }

/* A thin bar that fills as work moves on (real progress), or slides when it can't be measured. */
.sk-progress { height: 0.25rem; border-radius: 99px; background: var(--sk-base); overflow: hidden; }
.sk-progress > span { display: block; height: 100%; width: var(--sk-done, 0%); border-radius: inherit;
    background: var(--ui-accent, currentColor); transition: width 0.4s ease; }
.sk-progress.is-unknown > span { width: 35%; animation: sk-slide 1.4s ease-in-out infinite; }
@keyframes sk-slide { from { transform: translateX(-100%); } to { transform: translateX(290%); } }

/* Covers whatever is under it (an iframe, a video) while it loads. */
.sk-cover { position: absolute; inset: 0; display: grid; align-content: start; gap: 0.75rem; padding: 1.25rem;
    background: var(--ui-surface, Canvas); z-index: 2; }
.sk-cover[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
    .sk::after { animation: none; display: none; }
    .sk-progress.is-unknown > span { animation: none; width: 100%; opacity: 0.5; }
    .sk-progress > span { transition: none; }
}

/* Pages without Tailwind still hide screen-reader labels (the same rule as Tailwind's). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Full-screen "working on it" cover for form posts that take a while: a card of skeleton lines and a bar. */
.sk-overlay { position: fixed; inset: 0; z-index: 50; align-items: center; justify-content: center; padding: 1rem;
    background: color-mix(in srgb, var(--ui-bg, var(--brand-bg, #f8fafc)) 88%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sk-overlay-card { width: min(26rem, 100%); padding: 1.25rem 1.375rem; border-radius: 0.875rem; display: grid; gap: 0.625rem;
    background: var(--ui-surface, var(--brand-surface, #fff)); color: var(--ui-text, var(--brand-text, #0f172a));
    border: 1px solid var(--ui-border, rgba(15, 23, 42, 0.1)); box-shadow: 0 20px 50px -20px rgba(15, 23, 42, 0.35); }
.sk-overlay-title { margin: 0; font-size: 1rem; font-weight: 600; }
.sk-overlay-sub { margin: 0; font-size: 0.8125rem; opacity: 0.7; }

/* The page outline shown while a student page first loads. */
.sk-page { width: min(72rem, 100% - 2rem); margin: 0 auto; padding-top: 1.25rem; display: grid; gap: 1.25rem; color: var(--brand-text, currentColor); }
.sk-page-bar { height: 3.25rem; border-radius: 0.75rem; }
.sk-page-hero { height: 9rem; border-radius: 1rem; }
/* Tailwind's .hidden comes before this file, so covers toggled with it need saying again. */
.sk-cover.hidden { display: none; }