/**
 * Critical first-paint CSS for marketing SEO shells.
 * - Crawlable #seo-static-content stays visually hidden (aria-hidden in HTML).
 * - Visible .ef-paint shell inside #root matches React MarketingPageShell geometry
 *   so React mount does not cause ~1.0 CLS.
 */
html,
body,
body.ef-body {
  background: #000;
  color: #ededed;
  margin: 0;
}

/* Paint shell: same nav height + type metrics as .ef-public / MarketingNav */
.ef-paint {
  --ef-nav-h: 72px;
  --ef-ink: #ededed;
  --ef-muted: #a3a3a3;
  --ef-paper: #0b0b0b;
  --ef-display: 'Sora', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ef-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  min-height: 100vh;
  background: var(--ef-paper);
  color: var(--ef-ink);
  font-family: var(--ef-sans);
  font-size: 16px;
  line-height: 1.5;
}

.ef-paint-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--ef-nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 max(18px, 3.4vw);
  background: rgba(11, 11, 11, 0.8);
  box-sizing: border-box;
}

.ef-paint-brand {
  font-family: var(--ef-display);
  font-size: 1.125rem;
  letter-spacing: -0.03em;
  color: #ededed !important;
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.ef-paint-cta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ef-paint-cta a {
  color: #a3a3a3 !important;
  text-decoration: none;
  font-size: 14px;
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  box-sizing: border-box;
}

.ef-paint-cta .ef-paint-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: #ededed !important;
  color: #0b0b0b !important;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}

/* Auth/onboarding first paint — bare black + centred spinner (no Sign in CTAs). */
.ef-auth-paint {
  min-height: 100vh;
  min-height: 100dvh;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ef-auth-paint-spinner {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  animation: ef-auth-spin 0.7s linear infinite;
}
@keyframes ef-auth-spin {
  to {
    transform: rotate(360deg);
  }
}

/* App-route first paint (/projects, /account, editor) — skeleton, no marketing CTAs. */
.ef-app-paint {
  --ef-nav-h: 56px;
  min-height: 100vh;
  min-height: 100dvh;
  background: #0b0b0b;
  color: #ededed;
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}
.ef-app-paint-nav {
  height: var(--ef-nav-h);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 max(18px, 3.4vw);
  border-bottom: 1px solid rgba(237, 237, 237, 0.08);
  box-sizing: border-box;
}
.ef-app-paint-brand {
  font-family: 'Sora', ui-sans-serif, system-ui, sans-serif;
  font-size: 1.05rem;
  letter-spacing: -0.03em;
  color: #ededed;
  text-decoration: none;
}
.ef-app-paint-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  min-height: calc(100dvh - var(--ef-nav-h));
  padding: 2rem max(18px, 4vw);
  box-sizing: border-box;
}
.ef-app-paint-skel {
  width: 100%;
  max-width: 20rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.ef-app-paint-skel i {
  display: block;
  height: 0.5rem;
  border-radius: 999px;
  background: rgba(237, 237, 237, 0.1);
}
.ef-app-paint-skel i:nth-child(1) {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  margin: 0 auto 0.5rem;
}
.ef-app-paint-skel i:nth-child(2) {
  width: 70%;
  margin: 0 auto;
}
.ef-app-paint-skel i:nth-child(3) {
  width: 55%;
  margin: 0 auto;
}
.ef-app-paint-skel i:nth-child(4) {
  width: 100%;
}
.ef-app-paint-skel i:nth-child(5) {
  width: 66%;
  margin: 0 auto;
}
.ef-app-paint .sr-only,
.ef-auth-paint .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;
}

.ef-paint-main {
  padding: calc(var(--ef-nav-h) + 2rem) max(18px, 4vw) 3rem;
  max-width: 56rem;
  margin: 0 auto;
  box-sizing: border-box;
}

.ef-paint-main h1 {
  font-family: var(--ef-display);
  font-size: clamp(1.75rem, 5vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0 0 1rem;
  color: #fff;
}

.ef-paint-main .ef-paint-desc {
  margin: 0;
  color: var(--ef-muted);
  font-size: 1rem;
  max-width: 40rem;
}

/* Skip link: explicit colors (never rely on UA link blue under LH) */
a.ef-skip-link,
a[href='#main-content'].fixed {
  color: #0b0b0b !important;
  background: #ededed !important;
  text-decoration: none !important;
}

/* Cookie dock: reserved, no slide animation (CLS-safe) */
#ef-static-cookie {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 100;
  width: min(22rem, calc(100vw - 24px));
  box-sizing: border-box;
  padding: 1.1rem 1.15rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(10, 10, 10, 0.95);
  color: #f5f5f5;
  font-family: var(--ef-sans, ui-sans-serif, system-ui, sans-serif);
  font-size: 13px;
  line-height: 1.45;
}

/* Never flash closed menus / hidden chrome as plain text before scoped CSS loads */
[hidden] {
  display: none !important;
}

.nav-menu:not(.open) {
  display: none;
}

.na-menu[hidden] {
  display: none;
}

#ef-static-cookie[hidden],
html.has-cookie-consent #ef-static-cookie {
  display: none !important;
}

/*
 * Home SEO shell: crawlable text only — never paint a visible hero before React.
 * Same sr-only/offscreen treatment as #seo-static-content (not display:none).
 */
#ef-static-home,
#ef-static-home[data-ef-static-home] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  top: 0 !important;
  left: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -1 !important;
  min-height: 0 !important;
  background: transparent !important;
}

#ef-static-cookie h2 {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
  color: #fff;
}

#ef-static-cookie p {
  margin: 0 0 0.85rem;
  color: #d4d4d4;
}

#ef-static-cookie a {
  color: #f5f5f5 !important;
  text-decoration: underline;
}

#ef-static-cookie .ef-cookie-actions {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

#ef-static-cookie button {
  height: 40px;
  border-radius: 0.5rem;
  border: 0;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}

#ef-static-cookie button[data-ef-cookie='accept'] {
  background: #0369a1;
  color: #fff;
}

#ef-static-cookie button[data-ef-cookie='reject'] {
  background: transparent;
  color: #e5e5e5;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

/* Crawlable SEO sibling + home text shell — visually hidden; keep for crawlers */
#seo-static-content,
[data-cue-seo-shell] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  top: 0 !important;
  left: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

@media (scripting: none) {
  #seo-static-content,
  [data-cue-seo-shell] {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 1rem !important;
    padding: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: normal !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .ef-paint {
    display: none;
  }
}