/*
 * skeleton.css — first-paint boot skeleton + theme-aware body backdrop.
 *
 * Loaded synchronously in <head> via <link rel="stylesheet" href="/skeleton.css">
 * so the CSS-only placeholder paints before the main React bundle parses.
 * React's createRoot().render() replaces the skeleton wholesale on mount,
 * so there's no flash and no orphaned DOM.
 *
 * Tokens are inlined as literal hex (not CSS vars) because index.css has
 * not loaded yet at first paint. Mirror any token changes here.
 *
 * Theme is set by /theme-init.js (loaded synchronously BEFORE this sheet)
 * so the data-theme[…] selectors below resolve before the browser paints.
 *
 * Extracted from <style> in index.html so the page CSP can drop
 * 'unsafe-inline' for style-src-elem. See docs/security.md.
 */

/* Agent-friendly content block is positioned offscreen but kept in DOM so
   crawlers and assistive parsers still pick it up. (Was inline style=""
   in index.html — moved here to satisfy strict CSP.) */
#agent-info {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

html[data-theme="dark"] body {
  background-color: #0e0e10;
}
html[data-theme="light"] body {
  background-color: #f4f2ee;
}

.boot-skeleton {
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
}
.boot-skel-nav {
  height: 56px;
  border-bottom: 1px solid #1a1a1a;
  margin-bottom: 32px;
}
html[data-theme="dark"] .boot-skel-nav {
  border-bottom-color: #f4f2ee;
}
.boot-skel-hero {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 48px;
}
.boot-skel-kicker {
  display: block;
  width: 180px;
  height: 12px;
  background: #1a1a1a;
  opacity: 0.15;
  --p: 0.15;
}
.boot-skel-title-1,
.boot-skel-title-2 {
  display: block;
  height: 48px;
  background: #1a1a1a;
  opacity: 0.12;
  --p: 0.12;
}
.boot-skel-title-1 {
  width: 80%;
}
.boot-skel-title-2 {
  width: 60%;
}
.boot-skel-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.boot-skel-card {
  height: 220px;
  background: #1a1a1a;
  opacity: 0.08;
  border: 1px solid #1a1a1a;
  --p: 0.08;
}

/* Dark theme: invert placeholder ink so blocks are visible on near-black paper. */
html[data-theme="dark"] .boot-skel-kicker,
html[data-theme="dark"] .boot-skel-title-1,
html[data-theme="dark"] .boot-skel-title-2,
html[data-theme="dark"] .boot-skel-card {
  background: #f4f2ee;
  border-color: #f4f2ee;
}

/* Subtle pulse so the user knows it's loading. */
@keyframes boot-pulse {
  0%,
  100% {
    opacity: var(--p, 0.15);
  }
  50% {
    opacity: calc(var(--p, 0.15) * 0.6);
  }
}
.boot-skel-card,
.boot-skel-kicker,
.boot-skel-title-1,
.boot-skel-title-2 {
  animation: boot-pulse 1.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .boot-skel-card,
  .boot-skel-kicker,
  .boot-skel-title-1,
  .boot-skel-title-2 {
    animation: none;
  }
}
