/*
 * critical.css — Loaded first to prevent FOUC (Flash of Unstyled Content)
 *
 * This file sets intrinsic sizes on SVGs and images so they don't flash
 * at their default/natural size before the main stylesheets load.
 * Keep this file minimal — it blocks rendering.
 */

/* ── SVGs without width/height attributes default to 300×150.
      Constrain all inline SVGs to behave as icons by default. ── */
svg:not([width]):not([height]) {
  width: 1em;
  height: 1em;
}

/* ── Prevent images from exceeding their container before CSS loads ── */
img,
svg,
video,
canvas,
picture {
  max-width: 100%;
  height: auto;
}

/* ── Common icon sizes used across the site ── */
img[width],
svg[width] {
  max-width: none; /* allow explicit sizes to win */
}

/* ── Hide content that depends on JS to initialise ── */
[hidden],
.hidden {
  display: none !important;
}

/* ── Prevent FOUC: hide content-renderer until markdown is processed ── */
/* The content-renderer is hidden until data-render-ready is set.       */
/* With lazy math, this happens immediately after markdown→HTML (text   */
/* is visible; MathJax progressively typesets chunks as they scroll in). */
.content-renderer:not([data-render-ready]) .rendered-markdown-content {
  opacity: 0;
}
.content-renderer[data-render-ready] .rendered-markdown-content {
  opacity: 1;
  transition: opacity 0.15s ease;
}

/* ── Lazy Math Chunks ── */
/* Each chunk fades in smoothly once MathJax finishes typesetting it.    */
/* Before typesetting, raw $...$ text is visible so the user can still   */
/* read the content — they just see dollar signs instead of rendered math. */
.math-chunk {
  /* Subtle transition for layout changes when MathJax replaces inline text */
  transition: opacity 0.2s ease;
}
.math-chunk-ready {
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════
   Skeleton Loading — shown instantly, hidden once CSS loads
   ═══════════════════════════════════════════════════════ */

/* Shimmer animation */
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Base skeleton element */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--skeleton-base, #f0f0f2) 25%,
    var(--skeleton-shine, #e4e4e7) 37%,
    var(--skeleton-base, #f0f0f2) 63%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.6s ease infinite;
  border-radius: 4px;
  color: transparent !important;
  pointer-events: none;
  user-select: none;
}

/* Dark mode colours */
:root[data-theme="dark"] .skeleton {
  --skeleton-base: var(--color-bg-tertiary);
  --skeleton-shine: var(--color-bg-active);
}

/* Skeleton shapes */
.skeleton-text     { height: 14px; margin-bottom: 8px; }
.skeleton-text-sm  { height: 10px; margin-bottom: 6px; width: 60%; }
.skeleton-heading  { height: 20px; width: 40%; margin-bottom: 12px; }
.skeleton-avatar   { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; }
.skeleton-icon     { width: 20px; height: 20px; border-radius: 4px; flex-shrink: 0; }
.skeleton-btn      { width: 72px; height: 28px; border-radius: 6px; }
.skeleton-search   { height: 36px; border-radius: 8px; flex: 1; max-width: 320px; }
.skeleton-card     { height: 80px; border-radius: 8px; margin-bottom: 12px; }

/* Skeleton header bar — matches real header dimensions */
.skeleton-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50px;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
  gap: 12px;
}

.skeleton-header-left,
.skeleton-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.skeleton-header-right {
  gap: 8px;
}

/* Skeleton content — main page area */
.skeleton-content {
  padding: 70px 1rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.skeleton-content-row {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}

.skeleton-content-main {
  flex: 1;
}

.skeleton-sidebar {
  width: 280px;
  flex-shrink: 0;
}

/* Once the real styles load, hide skeletons */
.skeleton-screen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: var(--bg-primary, #ffffff);
  overflow: hidden;
  transition: opacity 0.2s ease;
}

:root[data-theme="dark"] .skeleton-screen {
  background: var(--color-bg-primary);
}