/*!
 * Dark catalog theme for the creator docs (/creators).
 *
 * Loaded AFTER the marketing stylesheets so it overrides them. Deliberately an
 * override rather than a rewrite: the page is long-form technical documentation
 * (the runtime contract, the rules, the starter template) and rebuilding it
 * risks silently dropping content. Structure and copy stay exactly as authored;
 * only the skin changes. The marketing nav/footer are hidden here and the
 * catalog chrome is mounted in their place by pv-catalog-shared.js.
 */

/* Kill the light marketing chrome — replaced by the catalog nav/footer. */
.top-nav, .home-footer, .footer-note { display: none !important; }

body.legal-page {
  background: var(--ink) !important;
  color: var(--text) !important;
  font-family: var(--font) !important;
  padding-top: var(--navH);
}

/* Layout */
.legal-page main, .legal-page .legal-layout { background: transparent !important; }
.legal-layout { padding: 0 var(--gutter) !important; gap: 32px !important; }
@media (min-width: 901px) { .legal-layout { grid-template-columns: minmax(0, 250px) minmax(0, 1fr) !important; } }

/* Hero. pv-landing-theme.css sets `.legal-page .doc-hero` with BOTH a light
   gradient and `!important`, so a bare `.doc-hero` override loses on
   specificity (0,0,2,0 vs 0,0,1,0) even with !important — it has to be matched
   selector-for-selector, and the background-IMAGE cleared, not just the colour. */
.legal-page .doc-hero,
.doc-hero {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 34px var(--gutter) 6px !important;
  max-width: 900px;
}
.doc-hero h1 {
  color: var(--text) !important;
  font-family: var(--font) !important;
  font-size: clamp(28px, 4.4vw, 44px) !important;
  font-weight: 800 !important;
  letter-spacing: -1.2px !important;
  line-height: 1.06 !important;
}
.doc-hero p, .doc-hero .lede { color: var(--muted) !important; font-size: 15px !important; line-height: 1.65 !important; }
.doc-hero .pill {
  background: rgba(79, 172, 254, .14) !important;
  color: var(--brand) !important;
  border: var(--hair) solid rgba(79, 172, 254, .35) !important;
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 1.6px;
}

/* Cards / TOC.
   A 5.5%-white glass panel is right for small chrome but far too dim behind a
   long technical read — the body text sat at roughly the same value as the page
   and the column had no edge. Use a solid, lighter surface for the content card
   so the documentation actually reads as a page. */
.card, .toc {
  background: #1f1f1f !important;
  border: var(--hair) solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 14px !important;
  color: var(--text) !important;
}
.content.card { background: #212121 !important; padding: 22px 24px !important; }
@media (min-width: 901px) { .content.card { padding: 26px 30px !important; } }
.toc a { color: var(--muted) !important; }
.toc a:hover { color: var(--text) !important; }
.toc strong, .toc h2, .toc h3 { color: var(--text) !important; }

/* Content typography */
.content { color: var(--text) !important; min-width: 0; }
.content h2 {
  color: var(--text) !important; font-family: var(--font) !important;
  font-size: 22px !important; font-weight: 800 !important; letter-spacing: -.5px !important;
  margin-top: 34px !important; padding-top: 22px !important;
  border-top: var(--hair) solid var(--line) !important;
}
.content h3 { color: var(--text) !important; font-size: 16px !important; font-weight: 700 !important; margin-top: 22px !important; }
/* Body copy is a READING surface, not secondary chrome — --muted (#8A8AA0) is
   too low-contrast for paragraphs of technical prose. */
.content p, .content li { color: #D2D2DC !important; font-size: 14.5px !important; line-height: 1.7 !important; }
.content td, .sdk-table td { color: #C6C6D2 !important; }
.content strong, .content b { color: var(--text) !important; }
.content a { color: var(--brand) !important; }

/* Code */
.content pre {
  background: #0f0f0f !important;
  border: var(--hair) solid var(--glassBorder) !important;
  border-radius: 12px !important;
  color: #d8e6ff !important;
}
.content pre code { color: inherit !important; }
.content :not(pre) > code {
  background: rgba(255, 255, 255, .07) !important;
  border: var(--hair) solid var(--glassBorder) !important;
  color: var(--accent) !important;
  border-radius: 5px; padding: 1px 5px; font-family: var(--mono); font-size: .92em;
}

/* Tables */
.content table, .sdk-table {
  border: var(--hair) solid var(--glassBorder) !important;
  border-radius: 12px; overflow: hidden; border-collapse: collapse; width: 100%;
}
.content th, .sdk-table th {
  background: var(--surface2) !important; color: var(--text) !important;
  font-size: 12px !important; letter-spacing: .4px; text-align: left;
}
.content td, .sdk-table td {
  border-top: var(--hair) solid var(--line) !important;
  color: var(--muted) !important; font-size: 13.5px !important;
}

/* Callouts */
.highlight, .note, .callout, .content blockquote {
  background: var(--glass) !important;
  border: var(--hair) solid var(--glassBorder) !important;
  border-left: 3px solid var(--brand) !important;
  border-radius: 12px !important; color: var(--muted) !important;
  background-image: none !important;
}
.highlight, .highlight * { color: var(--muted) !important; }
.highlight strong, .highlight b, .highlight code { color: var(--text) !important; }

/* Submit CTA band injected at the top of the docs */
.creatorCta {
  margin: 22px var(--gutter) 6px;
  padding: 22px;
  border-radius: 18px;
  border: var(--hair) solid var(--glassBorder);
  background: linear-gradient(150deg, rgba(79,172,254,.14), rgba(245,196,81,.07) 60%, rgba(255,255,255,.03));
  display: grid; gap: 18px;
}
@media (min-width: 861px) { .creatorCta { grid-template-columns: 1.2fr 1fr; align-items: center; margin-top: 26px; } }
.creatorCta h2 { font-size: 22px; font-weight: 800; letter-spacing: -.5px; color: var(--text); }
.creatorCta p { margin-top: 8px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.creatorCtaBtns { display: flex; gap: 10px; flex-wrap: wrap; }
.ctaCard {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 13px;
  background: var(--glass); border: var(--hair) solid var(--glassBorder); transition: .16s;
}
.ctaCard:hover { border-color: var(--line2); transform: translateY(-2px); background: var(--glassStrong); }
.ctaCard .ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-size: 17px; flex: none; }
.ctaCard .ic.ai { background: rgba(231,166,255,.16); }
.ctaCard .ic.up { background: rgba(94,224,176,.16); }
.ctaCard b { display: block; font-size: 14px; font-weight: 700; color: var(--text); }
.ctaCard span { display: block; margin-top: 3px; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.ctaStack { display: grid; gap: 10px; }