/* ============================================================
   DARKSAINT GAMES — UNIFIED DOCUMENTATION STYLESHEET (fr-docs)
   ============================================================
   Applied when <body class="fr-doc">. Layered on top of
   fr-theme.css (palette & typography) + each doc's own inline
   styles. Rewrites every plugin documentation page into the
   canonical Vord-style look: near-black canvas, warm serif
   display, ash-white headings under a hairline, left-column
   TOC on desktop, bordered hero card, pill badges, left-accent
   callouts, FR cards / tables / code blocks.

   Rules are !important so local <style> blocks inside each
   document cannot drift the look out of alignment.
   ============================================================ */

/* ------------------------------------------------------------
   Base body — serif body copy, sans for labels
------------------------------------------------------------ */
body.fr-doc {
  background: var(--fr-near-black) !important;
  color: var(--fr-text) !important;
  font-family: var(--fr-sans) !important;
  font-size: 15.5px !important;
  line-height: 1.65 !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.fr-doc * { box-sizing: border-box; }

/* Headings — serif, ash, hairline under h2 */
body.fr-doc h1,
body.fr-doc h2,
body.fr-doc h3,
body.fr-doc h4,
body.fr-doc h5,
body.fr-doc h6 {
  font-family: var(--fr-serif) !important;
  color: var(--fr-ash) !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
}
body.fr-doc h1 {
  font-size: clamp(2rem, 4.5vw, 2.8rem) !important;
  line-height: 1.1 !important;
  margin: 10px 0 8px !important;
  letter-spacing: 0.03em !important;
}
body.fr-doc h2 {
  font-size: 26px !important;
  line-height: 1.2 !important;
  margin: 48px 0 14px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid var(--fr-line) !important;
}
body.fr-doc h3 {
  font-size: 19px !important;
  margin: 28px 0 8px !important;
}
body.fr-doc h4 {
  font-size: 15.5px !important;
  margin: 18px 0 6px !important;
  color: var(--fr-ash) !important;
}

body.fr-doc p {
  margin: 0.6em 0 !important;
  color: var(--fr-text) !important;
  line-height: 1.75 !important;
}
body.fr-doc ul,
body.fr-doc ol { padding-left: 22px; margin: 0.6em 0; }
body.fr-doc li { margin: 0.25em 0; color: var(--fr-text); }
body.fr-doc strong,
body.fr-doc b { color: var(--fr-ash) !important; font-weight: 600 !important; }
body.fr-doc em,
body.fr-doc i { color: var(--fr-text) !important; font-style: italic; }

body.fr-doc a,
body.fr-doc main a {
  color: var(--fr-mark) !important;
  text-decoration: none !important;
  border-bottom: 0 !important;
}
body.fr-doc a:hover,
body.fr-doc main a:hover {
  color: var(--fr-ash) !important;
  text-decoration: underline !important;
}

body.fr-doc hr,
body.fr-doc .divider {
  border: 0 !important;
  border-top: 1px solid var(--fr-line) !important;
  margin: 36px 0 !important;
  background: none !important;
}

/* Scrollbar-safe max-widths for readability */
body.fr-doc main,
body.fr-doc .main,
body.fr-doc #content,
body.fr-doc main#content {
  min-width: 0;
  color: var(--fr-text);
}

/* ------------------------------------------------------------
   HERO CARD — unifies every doc's hero to the Vord look
------------------------------------------------------------ */
body.fr-doc header.hero,
body.fr-doc .hero,
body.fr-doc main > header.hero,
body.fr-doc main > .hero,
body.fr-doc #content > .hero {
  position: relative !important;
  border: 1px solid var(--fr-line) !important;
  background:
    radial-gradient(1200px 300px at 85% -20%, rgba(189, 147, 249, 0.12), transparent 60%),
    radial-gradient(900px 260px at 0% 0%, rgba(139, 233, 253, 0.10), transparent 60%),
    linear-gradient(180deg, #121620, #0a0c11) !important;
  border-radius: 16px !important;
  padding: 40px 36px !important;
  margin: 28px auto !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
  overflow: hidden !important;
  text-align: left !important;
  min-height: auto !important;
  max-width: 1200px !important;
}
body.fr-doc header.hero::before,
body.fr-doc header.hero::after,
body.fr-doc .hero::before,
body.fr-doc .hero::after { display: none !important; }

body.fr-doc .hero h1,
body.fr-doc header.hero h1,
body.fr-doc .hero-title {
  font-family: var(--fr-serif) !important;
  font-weight: 400 !important;
  color: var(--fr-ash) !important;
  font-size: clamp(2rem, 4.5vw, 2.8rem) !important;
  line-height: 1.1 !important;
  letter-spacing: 0.03em !important;
  margin: 12px 0 10px !important;
  text-transform: none !important;
}
body.fr-doc .hero h1 .wordmark,
body.fr-doc header.hero h1 .wordmark {
  background: linear-gradient(135deg, var(--fr-mark), #bd93f9) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

body.fr-doc .hero p,
body.fr-doc header.hero p,
body.fr-doc .tagline,
body.fr-doc .hero-tagline,
body.fr-doc .hero-desc,
body.fr-doc .hero-sub,
body.fr-doc .lede {
  font-family: var(--fr-serif) !important;
  font-style: italic !important;
  color: var(--fr-dead-stone) !important;
  font-size: 17px !important;
  line-height: 1.7 !important;
  max-width: 720px !important;
  margin: 0 0 20px !important;
}

/* Eyebrow line (every variant) */
body.fr-doc .eyebrow,
body.fr-doc .hero-eyebrow,
body.fr-doc .hero-eye,
body.fr-doc .hero-studio,
body.fr-doc .doc-eyebrow {
  display: inline-block !important;
  font-family: var(--fr-sans) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--fr-mark) !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin-bottom: 10px !important;
}
body.fr-doc .hero-eyebrow::before { display: none !important; }

/* Hero-level "badge" renders as a pill */
body.fr-doc .hero-badge,
body.fr-doc .hero .badge {
  display: inline-block !important;
  padding: 5px 12px !important;
  font-family: var(--fr-sans) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--fr-gold) !important;
  border: 1px solid rgba(200, 168, 74, 0.4) !important;
  border-radius: 999px !important;
  background: rgba(200, 168, 74, 0.06) !important;
  margin-bottom: 16px !important;
}

/* Hero art (image at top of hero card) */
body.fr-doc .hero-art,
body.fr-doc .hero img.hero-art,
body.fr-doc header.hero > img {
  display: block !important;
  width: 100% !important;
  max-width: 920px !important;
  margin: 0 auto 22px !important;
  border-radius: 12px !important;
  border: 1px solid var(--fr-line-2) !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45) !important;
}

/* Pills row below hero — Vord look for every variant */
body.fr-doc .pills,
body.fr-doc .hero-meta,
body.fr-doc .hero-badges,
body.fr-doc .hero-stats,
body.fr-doc .hero-tags,
body.fr-doc .tag-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 14px !important;
  padding: 0 !important;
  list-style: none !important;
}
body.fr-doc .pill,
body.fr-doc .hero-meta > span,
body.fr-doc .hero-badges > span,
body.fr-doc .hero-stats > span,
body.fr-doc .hero-tags > span,
body.fr-doc .pills > span,
body.fr-doc .badge--accent,
body.fr-doc .badge--beta {
  font-family: var(--fr-sans) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  padding: 5px 12px !important;
  border: 1px solid var(--fr-line-2) !important;
  border-radius: 999px !important;
  color: var(--fr-mark-dim) !important;
  background: rgba(240, 236, 230, 0.02) !important;
  display: inline-block !important;
}
body.fr-doc .pill.ok,
body.fr-doc .pill.accent { color: var(--fr-mark) !important; border-color: rgba(212, 224, 232, 0.4) !important; }
body.fr-doc .pill.warn,
body.fr-doc .badge--beta { color: var(--fr-gold) !important; border-color: rgba(200, 168, 74, 0.4) !important; background: rgba(200, 168, 74, 0.06) !important; }
body.fr-doc .pill.danger { color: #d78a8a !important; border-color: rgba(215, 138, 138, 0.4) !important; }

/* ------------------------------------------------------------
   SECTIONS — strip custom section borders, unify spacing
------------------------------------------------------------ */
body.fr-doc section,
body.fr-doc .section,
body.fr-doc .doc-section {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 8px 24px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.fr-doc .section-header {
  display: flex !important;
  gap: 14px !important;
  align-items: flex-start !important;
  margin: 48px 0 18px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.fr-doc .section-header > div { flex: 1; }
body.fr-doc .section-header h2 {
  margin: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
}
body.fr-doc .section-icon {
  flex-shrink: 0 !important;
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(212, 224, 232, 0.06) !important;
  border: 1px solid var(--fr-line-2) !important;
  border-radius: 8px !important;
  color: var(--fr-mark) !important;
  font-size: 18px !important;
}
body.fr-doc .section-num {
  font-family: var(--fr-sans) !important;
  font-size: 11px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--fr-mark-dim) !important;
  font-weight: 700 !important;
  margin-bottom: 4px !important;
}

/* Anchor links (# next to headings) */
body.fr-doc .anchor {
  color: var(--fr-mark-dim) !important;
  opacity: 0;
  margin-left: 8px;
  text-decoration: none !important;
  font-weight: 400 !important;
  transition: opacity 0.2s ease;
}
body.fr-doc h2:hover .anchor,
body.fr-doc h3:hover .anchor,
body.fr-doc h4:hover .anchor { opacity: 1 !important; }

/* ------------------------------------------------------------
   TOC / SIDEBAR — reskin every TOC variant to Vord look
------------------------------------------------------------ */
body.fr-doc nav.toc,
body.fr-doc .toc,
body.fr-doc .toc-wrapper,
body.fr-doc .toc-body,
body.fr-doc aside.sidebar,
body.fr-doc .sidebar {
  background: #0f1117 !important;
  border: 1px solid var(--fr-line) !important;
  border-radius: 12px !important;
  padding: 18px 16px !important;
  box-shadow: none !important;
}
body.fr-doc .toc-wrapper {
  padding: 0 !important;
  overflow: hidden;
}
body.fr-doc .toc-body {
  border: 0 !important;
  padding: 0 16px 16px !important;
  background: transparent !important;
}
body.fr-doc .toc-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 16px !important;
  background: rgba(240, 236, 230, 0.02) !important;
  color: var(--fr-mark) !important;
  font-family: var(--fr-sans) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  border: 0 !important;
  border-bottom: 1px solid var(--fr-line) !important;
}
body.fr-doc .toc-toggle:hover { color: var(--fr-ash) !important; }
body.fr-doc .toc-section { margin-bottom: 16px; }
body.fr-doc .toc-section-title,
body.fr-doc nav.toc h4,
body.fr-doc .toc h4,
body.fr-doc aside.sidebar h4,
body.fr-doc .sidebar h4,
body.fr-doc .nav h4 {
  font-family: var(--fr-sans) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--fr-mark-dim) !important;
  margin: 18px 0 8px !important;
  padding: 0 10px !important;
  border: 0 !important;
  background: transparent !important;
}

body.fr-doc nav.toc a,
body.fr-doc .toc a,
body.fr-doc .toc-body a,
body.fr-doc aside.sidebar a,
body.fr-doc .sidebar a,
body.fr-doc .nav a {
  display: block !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  color: var(--fr-text2) !important;
  font-family: var(--fr-sans) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  text-decoration: none !important;
  border: 0 !important;
  background: transparent !important;
  transition: color 0.15s ease, background 0.15s ease;
}
body.fr-doc nav.toc a:hover,
body.fr-doc .toc a:hover,
body.fr-doc .toc-body a:hover,
body.fr-doc aside.sidebar a:hover,
body.fr-doc .sidebar a:hover,
body.fr-doc .nav a:hover {
  color: var(--fr-ash) !important;
  background: rgba(212, 224, 232, 0.05) !important;
  text-decoration: none !important;
}
body.fr-doc nav.toc a.active,
body.fr-doc .toc a.active,
body.fr-doc aside.sidebar a.active,
body.fr-doc .sidebar a.active,
body.fr-doc .nav a.active {
  color: var(--fr-mark) !important;
  background: rgba(212, 224, 232, 0.08) !important;
  border-left: 0 !important;
}

/* SwapCore-specific: its TOC is centered & collapsible. Re-spec so
   it reads as a tidy card while staying collapsible. */
body.fr-doc .toc-wrapper {
  max-width: 1200px !important;
  margin: 24px auto !important;
}

/* FabTap-specific sidebar/topbar */
body.fr-doc .topbar {
  background: rgba(13, 12, 10, 0.96) !important;
  border-bottom: 1px solid var(--fr-line) !important;
}
body.fr-doc .topbar-title {
  font-family: var(--fr-serif) !important;
  color: var(--fr-ash) !important;
  font-weight: 400 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}
body.fr-doc .menu-toggle {
  background: transparent !important;
  border: 1px solid var(--fr-line-2) !important;
  color: var(--fr-mark) !important;
  border-radius: 2px !important;
}

/* Guide-nav (MasterGuide tabs) re-themed as a pill rail */
body.fr-doc .guide-nav {
  background: rgba(13, 12, 10, 0.96) !important;
  border-top: 1px solid var(--fr-line) !important;
  border-bottom: 1px solid var(--fr-line) !important;
  padding: 10px 16px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
body.fr-doc .guide-nav a {
  display: inline-block !important;
  padding: 6px 14px !important;
  margin: 2px 4px !important;
  border: 1px solid var(--fr-line-2) !important;
  border-radius: 999px !important;
  color: var(--fr-mark-dim) !important;
  font-family: var(--fr-sans) !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  background: transparent !important;
}
body.fr-doc .guide-nav a:hover,
body.fr-doc .guide-nav a.active {
  color: var(--fr-ash) !important;
  border-color: var(--fr-mark) !important;
  background: rgba(212, 224, 232, 0.06) !important;
}

/* Top-header (GAS Ally, Dyn Society) — behave like a sticky thin bar */
body.fr-doc #top-header {
  background: rgba(13, 12, 10, 0.96) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--fr-line) !important;
  border-radius: 0 !important;
  padding: 12px 16px !important;
  box-shadow: none !important;
}

/* ------------------------------------------------------------
   CARDS — unify every card variant into Vord cards
------------------------------------------------------------ */
body.fr-doc .card,
body.fr-doc .stat-card,
body.fr-doc .info-card,
body.fr-doc .feature,
body.fr-doc .feature-card,
body.fr-doc .doc-card {
  background: #12161f !important;
  border: 1px solid var(--fr-line) !important;
  border-radius: 12px !important;
  padding: 16px 18px !important;
  box-shadow: none !important;
  transition: transform 0.15s ease, border-color 0.15s ease !important;
}
body.fr-doc .card:hover,
body.fr-doc .stat-card:hover,
body.fr-doc .info-card:hover,
body.fr-doc .feature:hover,
body.fr-doc .feature-card:hover {
  transform: translateY(-1px);
  border-color: var(--fr-line-2) !important;
}
body.fr-doc .card h4,
body.fr-doc .card h3,
body.fr-doc .stat-card h4,
body.fr-doc .feature h4,
body.fr-doc .feature-card h4,
body.fr-doc .feature-title {
  margin: 0 0 6px !important;
  font-family: var(--fr-sans) !important;
  color: var(--fr-mark) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}
body.fr-doc .card p,
body.fr-doc .stat-card p,
body.fr-doc .feature p,
body.fr-doc .feature-desc {
  margin: 0 !important;
  color: var(--fr-dead-stone) !important;
  font-family: var(--fr-serif) !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}

/* Stat-card numeric variant (SwapCore) */
body.fr-doc .stat-label {
  font-family: var(--fr-sans) !important;
  color: var(--fr-mark-dim) !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  margin-bottom: 6px !important;
}
body.fr-doc .stat-value {
  font-family: var(--fr-serif) !important;
  color: var(--fr-ash) !important;
  font-size: 28px !important;
  font-weight: 400 !important;
  line-height: 1.1;
}
body.fr-doc .stat-desc {
  color: var(--fr-dead-stone) !important;
  font-size: 12.5px !important;
  font-family: var(--fr-serif) !important;
  margin-top: 4px !important;
}

/* ------------------------------------------------------------
   GRIDS — unify grid containers
------------------------------------------------------------ */
body.fr-doc .grid,
body.fr-doc .card-grid,
body.fr-doc .feature-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 14px !important;
  margin: 18px 0 !important;
}

/* Diagram (Vord architecture) */
body.fr-doc .diagram {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
  margin: 14px 0 !important;
}
body.fr-doc .diagram .box {
  background: #12161f !important;
  border: 1px solid var(--fr-line-2) !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  font-size: 13px !important;
  color: var(--fr-dead-stone) !important;
  font-family: var(--fr-serif) !important;
}
body.fr-doc .diagram .box b {
  font-family: var(--fr-sans) !important;
  color: var(--fr-mark) !important;
  display: block !important;
  margin-bottom: 4px !important;
  letter-spacing: 0.08em !important;
  font-size: 13px !important;
}
body.fr-doc .diagram .box.accent {
  border-color: rgba(212, 224, 232, 0.32) !important;
  background: linear-gradient(180deg, rgba(212, 224, 232, 0.05), #12161f) !important;
}
@media (max-width: 600px) {
  body.fr-doc .diagram { grid-template-columns: 1fr !important; }
}

/* ------------------------------------------------------------
   CALLOUTS — unify every callout/tip/note/warn variant
------------------------------------------------------------ */
body.fr-doc .callout,
body.fr-doc .tldr,
body.fr-doc .tip,
body.fr-doc .note,
body.fr-doc .warning,
body.fr-doc .danger,
body.fr-doc .info-box {
  border: 1px solid var(--fr-line) !important;
  border-left: 4px solid var(--fr-mark) !important;
  background: #12161f !important;
  padding: 14px 18px !important;
  border-radius: 8px !important;
  margin: 18px 0 !important;
  box-shadow: none !important;
  color: var(--fr-text) !important;
}
body.fr-doc .callout.warn,
body.fr-doc .warning { border-left-color: var(--fr-gold) !important; }
body.fr-doc .callout.danger,
body.fr-doc .danger { border-left-color: #d78a8a !important; }
body.fr-doc .callout.ok,
body.fr-doc .tip { border-left-color: #9cd6b5 !important; }
body.fr-doc .callout .label,
body.fr-doc .tldr-label,
body.fr-doc .callout-title,
body.fr-doc .callout-label {
  display: inline-block !important;
  font-family: var(--fr-sans) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--fr-mark-dim) !important;
  margin-right: 8px !important;
  margin-bottom: 4px !important;
}
body.fr-doc .callout p,
body.fr-doc .tldr p,
body.fr-doc .tip p,
body.fr-doc .note p,
body.fr-doc .warning p {
  margin: 4px 0 !important;
  color: var(--fr-text) !important;
  font-family: var(--fr-serif) !important;
}
body.fr-doc .callout code,
body.fr-doc .tldr code { background: rgba(212, 224, 232, 0.08) !important; }

/* ------------------------------------------------------------
   TABLES — unify to the Vord palette
------------------------------------------------------------ */
body.fr-doc table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 14px 0 !important;
  background: #12161f !important;
  border: 1px solid var(--fr-line) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}
body.fr-doc th,
body.fr-doc td {
  padding: 10px 12px !important;
  text-align: left !important;
  vertical-align: top !important;
  border-bottom: 1px solid var(--fr-line) !important;
  font-size: 14px !important;
  color: var(--fr-text) !important;
  font-family: var(--fr-sans) !important;
}
body.fr-doc th {
  background: rgba(212, 224, 232, 0.05) !important;
  color: var(--fr-mark) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid var(--fr-line-2) !important;
}
body.fr-doc tr:last-child td { border-bottom: 0 !important; }
body.fr-doc td code { white-space: nowrap; }
body.fr-doc .table-wrap {
  border: 0 !important;
  border-radius: 12px !important;
  overflow: auto !important;
}

/* ------------------------------------------------------------
   CODE & PRE — unified monospaced blocks
------------------------------------------------------------ */
body.fr-doc code,
body.fr-doc pre,
body.fr-doc kbd {
  font-family: "JetBrains Mono", "Fira Code", "Cascadia Code",
               ui-monospace, SFMono-Regular, Consolas, Menlo, monospace !important;
  font-size: 13.5px !important;
}
body.fr-doc code,
body.fr-doc p code,
body.fr-doc li code,
body.fr-doc td code,
body.fr-doc main code {
  background: rgba(212, 224, 232, 0.06) !important;
  color: var(--fr-ash) !important;
  padding: 2px 6px !important;
  border-radius: 6px !important;
  border: 1px solid var(--fr-line) !important;
}
body.fr-doc kbd {
  background: #12161f !important;
  border: 1px solid var(--fr-line-2) !important;
  border-bottom-width: 2px !important;
  border-radius: 6px !important;
  padding: 1px 6px !important;
  font-size: 12px !important;
  color: var(--fr-text) !important;
}
body.fr-doc pre {
  background: #0a0c11 !important;
  color: #e6edf3 !important;
  border: 1px solid var(--fr-line-2) !important;
  border-radius: 12px !important;
  padding: 16px 18px !important;
  overflow: auto !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
  margin: 14px 0 !important;
}
body.fr-doc pre code {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  color: inherit !important;
}

/* Syntax tokens (Dracula-ish) */
body.fr-doc pre .k, body.fr-doc code .k { color: #ff79c6 !important; }
body.fr-doc pre .s, body.fr-doc code .s { color: #f1fa8c !important; }
body.fr-doc pre .c, body.fr-doc code .c { color: #6272a4 !important; font-style: italic; }
body.fr-doc pre .t, body.fr-doc code .t { color: #8be9fd !important; }
body.fr-doc pre .n, body.fr-doc code .n { color: #50fa7b !important; }

/* ------------------------------------------------------------
   STEPS (numbered ordered lists on some docs)
------------------------------------------------------------ */
body.fr-doc .steps { list-style: none; padding-left: 0; counter-reset: step; }
body.fr-doc .steps li {
  position: relative;
  padding: 10px 14px 10px 52px !important;
  border-left: 1px solid var(--fr-line) !important;
  margin-left: 16px;
  counter-increment: step;
}
body.fr-doc .steps li::before {
  content: counter(step);
  position: absolute;
  left: -14px;
  top: 12px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(200, 168, 74, 0.15);
  border: 1px solid rgba(200, 168, 74, 0.45);
  color: var(--fr-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fr-sans);
  font-size: 12px;
  font-weight: 700;
}

/* ------------------------------------------------------------
   LOGO / BRAND inside sidebar (FabTap, others)
------------------------------------------------------------ */
body.fr-doc .logo,
body.fr-doc .brand-name {
  font-family: var(--fr-serif) !important;
  color: var(--fr-ash) !important;
  font-weight: 400 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}
body.fr-doc .brand-meta,
body.fr-doc .logo-sub {
  font-family: var(--fr-sans) !important;
  color: var(--fr-text2) !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  font-size: 10.5px !important;
}

/* ------------------------------------------------------------
   DOC FOOTERS
------------------------------------------------------------ */
body.fr-doc footer.site,
body.fr-doc main > footer,
body.fr-doc main footer.site {
  margin-top: 60px !important;
  padding: 20px 0 !important;
  border-top: 1px solid var(--fr-line) !important;
  color: var(--fr-text2) !important;
  font-family: var(--fr-sans) !important;
  font-size: 13px !important;
  text-align: center !important;
  letter-spacing: 0.08em !important;
  background: transparent !important;
}

/* ------------------------------------------------------------
   UTILITIES for small screens
------------------------------------------------------------ */
@media (max-width: 860px) {
  body.fr-doc .shell { grid-template-columns: 1fr !important; padding: 16px !important; }
  body.fr-doc nav.toc {
    position: static !important;
    max-height: none !important;
    border-bottom: 1px solid var(--fr-line) !important;
    padding-bottom: 12px !important;
    margin-bottom: 12px !important;
  }
  body.fr-doc header.hero,
  body.fr-doc .hero {
    padding: 28px 20px !important;
    margin: 16px !important;
  }
  body.fr-doc .diagram { grid-template-columns: 1fr !important; }
}

/* ------------------------------------------------------------
   PRINT
------------------------------------------------------------ */
@media print {
  body.fr-doc nav.toc,
  body.fr-doc .toc,
  body.fr-doc .toc-wrapper,
  body.fr-doc aside.sidebar,
  body.fr-doc .sidebar,
  body.fr-doc .topbar,
  body.fr-doc .guide-nav,
  body.fr-doc #top-header { display: none !important; }
  body.fr-doc { color: #000 !important; background: #fff !important; }
  body.fr-doc h1, body.fr-doc h2, body.fr-doc h3, body.fr-doc h4 { color: #000 !important; }
}
