/* ── Brand palette ───────────────────────────────────────────────── */
/* Material's `primary: custom` / `accent: custom` read these. The values are
   the web console's Tailwind tokens (slate-900 surfaces, blue-600 actions), so
   the docs, the console and the brand assets share one palette. The sun in
   the mark is #F5B32B; it is deliberately not a UI colour. */
:root {
  --md-primary-fg-color: #0f172a;         /* slate-900 */
  --md-primary-fg-color--light: #1e293b;  /* slate-800 */
  --md-primary-fg-color--dark: #020617;   /* slate-950 */
  --md-primary-bg-color: #f8fafc;
  --md-primary-bg-color--light: #e2e8f0;
  --md-accent-fg-color: #2563eb;          /* blue-600 */
  --md-accent-fg-color--transparent: rgba(37, 99, 235, 0.1);
  --md-accent-bg-color: #ffffff;
  --md-accent-bg-color--light: #ffffff;
}
[data-md-color-scheme="default"] {
  --md-typeset-a-color: #1d4ed8;          /* blue-700: links on white */
}
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #0f172a;
  --md-accent-fg-color: #60a5fa;          /* blue-400: readable on slate */
  --md-accent-fg-color--transparent: rgba(96, 165, 250, 0.12);
  --md-typeset-a-color: #93c5fd;          /* blue-300 */
  --md-default-bg-color: #0b1220;
  --md-code-bg-color: #111a2e;
}
/* The header logo inherits the header text colour via currentColor. */
.md-header__button.md-logo svg,
.md-header__button.md-logo img {
  height: 1.7rem;
  width: 1.7rem;
}

/* ── Layout width ────────────────────────────────────────────────── */
/* Material's default content column is 61rem, which shrinks wide schemas,
   tables, and code to the point of being hard to read. Give them room. */
.md-grid {
  max-width: 76rem;
}

/* ── Status / priority badges (AEPs) ─────────────────────────────── */
.md-typeset .badge {
  display: inline-block;
  padding: 0.1em 0.62em;
  border-radius: 1em;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: baseline;
  border: 1px solid transparent;
}
.md-typeset .badge--green { background: #e6f4ea; color: #1b7a37; border-color: #b6e0c2; }
.md-typeset .badge--blue  { background: #e6effc; color: #1a5fb4; border-color: #b9d1f5; }
.md-typeset .badge--red   { background: #fdecea; color: #c0341d; border-color: #f6c4bc; }
.md-typeset .badge--amber { background: #fdf1dd; color: #9a6209; border-color: #f2d9a8; }
.md-typeset .badge--grey  { background: #eceff1; color: #55606a; border-color: #d3dade; }

[data-md-color-scheme="slate"] .md-typeset .badge--green { background: rgba(46,160,67,.18); color: #7ee2a1; border-color: rgba(46,160,67,.4); }
[data-md-color-scheme="slate"] .md-typeset .badge--blue  { background: rgba(56,132,232,.18); color: #8fbcff; border-color: rgba(56,132,232,.4); }
[data-md-color-scheme="slate"] .md-typeset .badge--red   { background: rgba(224,72,45,.18); color: #ff9d8a; border-color: rgba(224,72,45,.4); }
[data-md-color-scheme="slate"] .md-typeset .badge--amber { background: rgba(219,150,32,.18); color: #f2c66b; border-color: rgba(219,150,32,.4); }
[data-md-color-scheme="slate"] .md-typeset .badge--grey  { background: rgba(140,150,160,.2); color: #b9c2ca; border-color: rgba(140,150,160,.4); }

/* ── Homepage Grid Cards ─────────────────────────────────────────── */
.grid.cards > ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
  padding: 0;
  list-style: none;
  margin-top: 1.5rem;
}

.grid.cards > ul > li {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.4rem;
  padding: 1.25rem;
  transition: all 0.25s ease;
  background-color: var(--md-default-bg-color);
  display: flex;
  flex-direction: column;
}

.grid.cards > ul > li:hover {
  border-color: var(--md-primary-fg-color);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.grid.cards > ul > li hr {
  margin: 0.75rem 0;
  border: 0;
  border-top: 1px solid var(--md-default-fg-color--lightest);
}

.grid.cards > ul > li a {
  font-weight: 700;
  display: block;
  margin-bottom: 0.5rem;
  color: var(--md-primary-fg-color);
  text-decoration: none;
}

.grid.cards > ul > li a:hover {
  text-decoration: underline;
}

/* Icon styling in cards - fixed for SVG icons */
.grid.cards .middle {
  vertical-align: middle;
  margin-right: 0.5rem;
}

.grid.cards .lg {
  width: 1.75rem;
  height: 1.75rem;
  font-size: 1.75rem;
}

/* Material icons as SVGs might need specific styling when used in cards */
.grid.cards .twemoji svg, 
.grid.cards .md-icon svg {
  width: 1.75rem;
  height: 1.75rem;
  display: inline-block;
  vertical-align: middle;
  fill: currentColor;
}

/* ── Mermaid Diagram Styling ─────────────────────────────────────── */
.mermaid {
  background-color: var(--md-default-bg-color);
  padding: 1.5rem;
  border-radius: 0.4rem;
  margin: 1.5rem 0;
  border: 1px solid var(--md-default-fg-color--lightest);
  /* Center the diagram, but let a wide one scroll horizontally instead of
     being squashed to fit — a flex row would force it to shrink. */
  text-align: center;
  overflow-x: auto;
}

/* Hold a legible minimum size: below this the container scrolls rather than
   scaling the labels down to nothing. On wide screens the diagram fills the
   (now roomier) content column, so dense graphs read clearly without zooming. */
.mermaid svg {
  min-width: 760px;
  max-width: 100%;
  height: auto;
}

/* Nudge Mermaid label text up a touch for readability on dense graphs. */
.mermaid .nodeLabel,
.mermaid .edgeLabel,
.mermaid span.edgeLabel {
  font-size: 15px;
}

/* ── Polish: tables ──────────────────────────────────────────────── */
/* Rounded, contained tables with a quiet zebra stripe — the docs lean on
   tables heavily (agent tools, RBAC roles, AEP matrices), so make them scan. */
.md-typeset table:not([class]) {
  border-radius: 0.4rem;
  overflow: hidden;
  border: 1px solid var(--md-default-fg-color--lightest);
}
.md-typeset table:not([class]) th {
  background: var(--md-default-fg-color--lightest);
  font-weight: 700;
}
.md-typeset table:not([class]) tr:nth-child(even) > td {
  background: var(--md-default-fg-color--lightest);
}
.md-typeset table:not([class]) tr:hover > td {
  background: var(--md-accent-fg-color--transparent);
}

/* ── Polish: code & inline code ──────────────────────────────────── */
.md-typeset pre > code {
  border-radius: 0.4rem;
}
.md-typeset :not(pre) > code {
  border-radius: 0.25rem;
  padding: 0.1em 0.4em;
}

/* ── Polish: headings & rules ────────────────────────────────────── */
/* A touch more air above section headings, and a lighter horizontal rule. */
.md-typeset h2 {
  margin-top: 2.2rem;
}
.md-typeset hr {
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}