/* =========================================================
   Electric Barometer – Local tweaks (non-brand)
   NOTE: Brand colors are managed in eb-brand and synced into:
   - docs/stylesheets/eb-brand-tokens.css
   - docs/stylesheets/eb-brand-colors.css
   ========================================================= */

/* ---------------------------------------------------------
   Typography & Content
   --------------------------------------------------------- */

/* Subtle professionalism for headings */
.md-typeset h1,
.md-typeset h2 {
  letter-spacing: 0.2px;
}

/* ---------------------------------------------------------
   Code Styling
   --------------------------------------------------------- */

code {
  border-radius: 6px;
}

/* Inline code contrast */
.md-typeset code {
  background-color: color-mix(in srgb, var(--md-primary-bg-color) 10%, transparent);
}

/* Dark mode code contrast */
[data-md-color-scheme="slate"] .md-typeset code {
  background-color: color-mix(in srgb, var(--md-accent-fg-color) 14%, transparent);
}

/* ---------------------------------------------------------
   Mermaid / Diagram Fixes
   --------------------------------------------------------- */

/* Remove background from labels that causes overlap math issues */
.mermaid code {
  background-color: transparent !important;
  padding: 0 !important;
}

/* Ensure geometry engine calculates box size correctly */
.mermaid .node label {
  line-height: 1.1 !important;
}

/* EXTERNAL LAYER TITLES & WHITE BACKSPACING
   Lifts the "Layer X" text completely out of the box. */
.mermaid .subgraph-title {
  /* Increased lift to ensure it clears the border entirely */
  transform: translateY(-32px) translateX(-2px) !important;
  font-weight: 700 !important;
  font-size: 14px !important;

  /* Robust Halo Effect
     Uses the theme background color to mask lines passing underneath. */
  paint-order: stroke;
  stroke: var(--md-default-bg-color) !important;
  stroke-width: 10px !important;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Apply the same halo to node labels so arrows don't touch letters */
.mermaid .node label {
  paint-order: stroke;
  stroke: var(--md-default-bg-color);
  stroke-width: 6px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Ensure the diagram container doesn't clip the titles
   now that they are floating outside the border. */
.mermaid svg {
  max-width: 100%;
  height: auto;
  overflow: visible !important;
  /* Extra top padding so Layer 1 title isn't cut off at the page top */
  padding-top: 40px !important;
}

.mermaid .cluster {
  overflow: visible !important;
}