/* docs.inbuxa.org -- Material for MkDocs, dressed in the INBUXA palette.
 *
 * Carried over from docs.ihasmail.org, which is where this file's structure
 * and every trick in it comes from. The colors are INBUXA's, from the logo
 * bundle: the envelope's teal (#46CAC3), the cat's orange (#F9A34C) and the
 * darker ground the mark's navy outline sits on (#0B1720). Teal leads, orange
 * is the highlight. The light values are the darkened teal and orange
 * inbuxa.org uses, chosen so body text, muted text and links clear WCAG AA.
 *
 * Everything is done by re-pointing Material's own custom properties, so
 * upstream keeps ownership of the layout and we only own the palette.
 *
 * Material's variable NAMES are the contract this file depends on -- see the
 * pin in requirements.txt before upgrading mkdocs-material.
 */

/* ---------------------------------------------------------------- light -- */
[data-md-color-scheme="default"] {
  --ibx-bg: #f6fbfb;
  --ibx-bg-alt: #eaf4f4;
  --ibx-surface: #ffffff;
  --ibx-border: #d2e3e5;
  --ibx-border-strong: #b3d0d3;
  --ibx-text: #10303d;
  --ibx-text-muted: #4a6b76;
  --ibx-accent: #0b6b67;
  --ibx-accent-hot: #095553;
  --ibx-on-accent: #ffffff;
  --ibx-warm: #9c580c;
  --ibx-warm-soft: #f9a34c;
  --ibx-tint: rgba(11, 107, 103, 0.09);
  --ibx-tint-warm: rgba(156, 88, 12, 0.10);
  --ibx-code-bg: #edf6f6;

  --md-hue: 195;

  --md-default-fg-color: var(--ibx-text);
  --md-default-fg-color--light: var(--ibx-text-muted);
  --md-default-fg-color--lighter: rgba(16, 48, 61, 0.32);
  --md-default-fg-color--lightest: rgba(16, 48, 61, 0.07);
  --md-default-bg-color: var(--ibx-bg);
  --md-default-bg-color--light: rgba(246, 251, 251, 0.70);
  --md-default-bg-color--lighter: rgba(246, 251, 251, 0.45);
  --md-default-bg-color--lightest: rgba(246, 251, 251, 0.12);

  /* The header takes the page ground rather than a color bar. */
  --md-primary-fg-color: var(--ibx-bg);
  --md-primary-fg-color--light: var(--ibx-bg-alt);
  --md-primary-fg-color--dark: var(--ibx-border);
  --md-primary-bg-color: var(--ibx-text);
  --md-primary-bg-color--light: var(--ibx-text-muted);

  --md-accent-fg-color: var(--ibx-accent-hot);
  --md-accent-fg-color--transparent: var(--ibx-tint);
  --md-accent-bg-color: var(--ibx-on-accent);
  --md-accent-bg-color--light: rgba(255, 255, 255, 0.70);

  --md-typeset-color: var(--ibx-text);
  --md-typeset-a-color: var(--ibx-accent);
  --md-typeset-mark-color: var(--ibx-tint-warm);
  --md-typeset-table-color: var(--ibx-border);

  /* A keycap in Material has no border: the outline is its box-shadow, drawn
     from these three. Overriding `kbd` with box-shadow: none flattens every
     key on the shortcuts page into plain text. */
  --md-typeset-kbd-color: var(--ibx-surface);
  --md-typeset-kbd-border-color: var(--ibx-border-strong);
  --md-typeset-kbd-accent-color: var(--ibx-bg);

  --md-code-fg-color: var(--ibx-text);
  --md-code-bg-color: var(--ibx-code-bg);

  --md-footer-fg-color: var(--ibx-text);
  --md-footer-fg-color--light: var(--ibx-text-muted);
  --md-footer-fg-color--lighter: rgba(16, 48, 61, 0.40);
  --md-footer-bg-color: var(--ibx-bg-alt);
  --md-footer-bg-color--dark: var(--ibx-bg-alt);

  --md-shadow-z1: 0 4px 12px -8px rgba(16, 48, 61, 0.34);
  --md-shadow-z2: 0 12px 30px -20px rgba(16, 48, 61, 0.40);
  --md-shadow-z3: 0 18px 44px -26px rgba(16, 48, 61, 0.42);
}

/* ----------------------------------------------------------------- dark -- */
[data-md-color-scheme="slate"] {
  --ibx-bg: #0b1720;
  --ibx-bg-alt: #0a1c26;
  --ibx-surface: #12303e;
  --ibx-border: #21505f;
  --ibx-border-strong: #2e6a7a;
  --ibx-text: #eaf6f6;
  --ibx-text-muted: #a3c3cb;
  --ibx-accent: #46cac3;
  --ibx-accent-hot: #6fdcd6;
  --ibx-on-accent: #062028;
  --ibx-warm: #f9a34c;
  --ibx-warm-soft: #f9a34c;
  --ibx-tint: rgba(70, 202, 195, 0.10);
  --ibx-tint-warm: rgba(249, 163, 75, 0.16);
  --ibx-code-bg: #0a1c26;

  --md-hue: 197;

  --md-default-fg-color: var(--ibx-text);
  --md-default-fg-color--light: var(--ibx-text-muted);
  --md-default-fg-color--lighter: rgba(234, 246, 246, 0.32);
  --md-default-fg-color--lightest: rgba(234, 246, 246, 0.10);
  --md-default-bg-color: var(--ibx-bg);
  --md-default-bg-color--light: rgba(13, 36, 48, 0.70);
  --md-default-bg-color--lighter: rgba(13, 36, 48, 0.45);
  --md-default-bg-color--lightest: rgba(13, 36, 48, 0.12);

  --md-primary-fg-color: var(--ibx-bg);
  --md-primary-fg-color--light: var(--ibx-surface);
  --md-primary-fg-color--dark: var(--ibx-bg-alt);
  --md-primary-bg-color: var(--ibx-text);
  --md-primary-bg-color--light: var(--ibx-text-muted);

  --md-accent-fg-color: var(--ibx-accent-hot);
  --md-accent-fg-color--transparent: var(--ibx-tint);
  --md-accent-bg-color: var(--ibx-on-accent);
  --md-accent-bg-color--light: rgba(6, 32, 40, 0.70);

  --md-typeset-color: var(--ibx-text);
  --md-typeset-a-color: var(--ibx-accent);
  --md-typeset-mark-color: var(--ibx-tint-warm);
  --md-typeset-table-color: var(--ibx-border);

  /* See the light block: the keycap outline is a box-shadow, not a border. */
  --md-typeset-kbd-color: #163a4a;
  --md-typeset-kbd-border-color: var(--ibx-border-strong);
  --md-typeset-kbd-accent-color: var(--ibx-border);

  --md-code-fg-color: var(--ibx-text);
  --md-code-bg-color: var(--ibx-code-bg);

  --md-footer-fg-color: var(--ibx-text);
  --md-footer-fg-color--light: var(--ibx-text-muted);
  --md-footer-fg-color--lighter: rgba(234, 246, 246, 0.40);
  --md-footer-bg-color: var(--ibx-bg-alt);
  --md-footer-bg-color--dark: var(--ibx-bg-alt);

  --md-shadow-z1: 0 6px 18px -12px rgba(0, 0, 0, 0.70);
  --md-shadow-z2: 0 16px 40px -24px rgba(0, 0, 0, 0.72);
  --md-shadow-z3: 0 22px 60px -28px rgba(0, 0, 0, 0.75);
}

/* ---------------------------------------------------------------- type -- */
/* theme.font is false in mkdocs.yml, so Material emits no font variables and
   these are the whole story. Same two stacks as ihasmail.org's styles.css. */
:root {
  --md-text-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
                  Helvetica, Arial, sans-serif;
  --md-code-font: "JetBrains Mono", "Fira Code", ui-monospace, "SFMono-Regular",
                  Consolas, monospace;
}

/* ------------------------------------------------------- header + brand -- */
/* Material expects a saturated bar and paints the search field, its icons and
   the tab strip with transparent black over it. On a header that is the page
   ground, that reads as gray mud -- these rules put the site's own border and
   tint there instead. */
.md-header {
  border-bottom: 1px solid var(--ibx-border);
  box-shadow: none;
}
.md-header--shadow {
  box-shadow: var(--md-shadow-z1);
  transition: box-shadow 0.25s;
}

/* The wordmark, cut to match .brand .wordmark on ihasmail.org. */
.md-header__title .md-ellipsis {
  font-weight: 800;
  letter-spacing: -0.03em;
}
.md-header__button.md-logo :is(img, svg) {
  height: 1.6rem;
  width: auto;
}

.md-search__form {
  background-color: var(--ibx-tint);
  border: 1px solid var(--ibx-border);
  box-shadow: none;
}
.md-search__form:hover {
  background-color: var(--ibx-tint);
  border-color: var(--ibx-border-strong);
}
.md-search__input {
  color: var(--ibx-text);
}
.md-search__input::placeholder,
.md-search__icon {
  color: var(--ibx-text-muted);
}
[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
  background-color: var(--ibx-surface);
  border-color: var(--ibx-border-strong);
}
.md-search-result__meta {
  color: var(--ibx-text-muted);
}
.md-tabs {
  border-bottom: 1px solid var(--ibx-border);
}

/* --------------------------------------------------------------- typeset -- */
.md-typeset h1,
.md-typeset h2 {
  color: var(--ibx-text);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.md-typeset h3,
.md-typeset h4 {
  font-weight: 700;
}
.md-typeset a:hover {
  color: var(--ibx-accent-hot);
}
.md-typeset code {
  border-radius: 5px;
}
.md-typeset :is(table:not([class]), .md-typeset__table table) {
  border: 1px solid var(--ibx-border);
  border-radius: 12px;
  overflow: hidden;
}
.md-typeset table:not([class]) th {
  background-color: var(--ibx-bg-alt);
  color: var(--ibx-text);
}
/* These tables are mostly environment variables and defaults, and a column
   that wraps `STALWART_URL` across two lines is unreadable. Code in a cell
   sets the column's minimum width instead. */
.md-typeset table:not([class]) :is(td, th) code {
  white-space: nowrap;
}
.md-typeset blockquote {
  border-left: 3px solid var(--ibx-accent);
  color: var(--ibx-text-muted);
}
.md-typeset hr {
  border-bottom-color: var(--ibx-border);
}

/* The primary button, matched to .btn-primary on ihasmail.org. */
.md-typeset .md-button {
  border-radius: 10px;
  border-color: var(--ibx-border-strong);
  color: var(--ibx-accent);
  font-weight: 600;
}
.md-typeset .md-button--primary {
  background-color: var(--ibx-accent);
  border-color: var(--ibx-accent);
  color: var(--ibx-on-accent);
}
.md-typeset .md-button:is(:hover, :focus) {
  background-color: var(--ibx-accent-hot);
  border-color: var(--ibx-accent-hot);
  color: var(--ibx-on-accent);
}

/* ---------------------------------------------------------- admonitions -- */
/* Material's blues and purples are off-palette. Warning, danger and failure
   keep their amber and red -- those carry meaning that a house color would
   throw away. */
.md-typeset :is(.admonition, details) {
  border-radius: 12px;
  border-width: 1px;
  box-shadow: none;
}
.md-typeset :is(.note, .info, .tip, .abstract, .question) {
  border-color: var(--ibx-accent);
}
.md-typeset :is(.note, .info, .tip, .abstract, .question) > :is(.admonition-title, summary) {
  background-color: var(--ibx-tint);
}
.md-typeset :is(.note, .info, .tip, .abstract, .question) > :is(.admonition-title, summary)::before {
  background-color: var(--ibx-accent);
}
.md-typeset :is(.example, .quote) {
  border-color: var(--ibx-warm);
}
.md-typeset :is(.example, .quote) > :is(.admonition-title, summary) {
  background-color: var(--ibx-tint-warm);
}
.md-typeset :is(.example, .quote) > :is(.admonition-title, summary)::before {
  background-color: var(--ibx-warm);
}

/* ------------------------------------------------------------ figures -- */
/* Application screenshots. They are captured against the app's dark theme --
   the one a new account starts on -- so on a light page they need an edge of
   their own, or they read as a hole rather than as an inset window. */
.md-typeset figure {
  margin: 1.6em auto;
  max-width: 100%;
}
.md-typeset figure img.shot {
  border: 1px solid var(--ibx-border);
  border-radius: 12px;
  box-shadow: var(--md-shadow-z1);
  display: block;
  width: 100%;
}
.md-typeset figcaption {
  color: var(--ibx-text-muted);
  font-size: 0.76rem;
  line-height: 1.5;
  margin: 0.7em auto 0;
  max-width: 46rem;
  text-align: center;
}

/* ----------------------------------------------------------- diagrams -- */
/* The network diagram is inline SVG rather than an image file so it can take
   the palette from the tokens above and follow the theme toggle. An <img>
   cannot see them: it would have to carry its own colors, which means either
   a light-only diagram on a slate page or two files to keep in step.
   Presentation attributes lose to CSS, so text-anchor and dominant-baseline
   stay attributes in the markup and only paint and type live here. */
.ibx-figure {
  margin: 1.8em 0;
  overflow-x: auto;
}
.ibx-diagram {
  display: block;
  height: auto;
  margin: 0 auto;
  /* Under this the port labels start touching the boxes they annotate; the
     wrapper scrolls sideways rather than letting them overlap. */
  min-width: 26rem;
  max-width: 34rem;
  width: 100%;
}
.ibx-diagram .ibx-node rect {
  fill: var(--ibx-surface);
  stroke: var(--ibx-border-strong);
  stroke-width: 0.5;
}
/* ihasmail itself is the one box the reader is here for. */
.ibx-diagram .ibx-node-app rect {
  fill: var(--ibx-tint);
  stroke: var(--ibx-accent);
  stroke-width: 1;
}
.ibx-diagram .ibx-group rect {
  fill: none;
  stroke: var(--ibx-border-strong);
  stroke-dasharray: 4 3;
  stroke-width: 0.5;
}
.ibx-diagram .ibx-t {
  fill: var(--ibx-text);
  font-size: 14px;
  font-weight: 600;
}
.ibx-diagram .ibx-s {
  fill: var(--ibx-text-muted);
  font-size: 12px;
}
.ibx-diagram .ibx-p {
  font-size: 11px;
  font-weight: 600;
}
.ibx-diagram .ibx-p-jmap {
  fill: var(--ibx-accent);
}
.ibx-diagram .ibx-p-smtp {
  fill: var(--ibx-warm);
}
.ibx-diagram :is(.ibx-link, .ibx-jmap, .ibx-smtp) {
  fill: none;
  stroke-width: 1.5;
}
/* The two neutral links carry both flows at once, so they take the muted text
   color rather than a border color -- at border weight they read as page
   furniture on a light ground instead of as traffic. */
.ibx-diagram .ibx-link {
  stroke: var(--ibx-text-muted);
}
.ibx-diagram .ibx-jmap {
  stroke: var(--ibx-accent);
}
.ibx-diagram .ibx-smtp {
  stroke: var(--ibx-warm);
}

/* The HA diagram is wider than it is tall, so it needs more of the column than
   the tall one and less of a floor. */
.ibx-diagram-ha {
  max-width: 42rem;
  min-width: 30rem;
}

/* Drawn to show an absence: the instances do NOT share a session store. A
   plain line would say the opposite of what the section is about, so this one
   is dashed, in the warning color, and carries no arrowhead. */
.ibx-diagram .ibx-noshare {
  fill: none;
  stroke: var(--ibx-warm);
  stroke-dasharray: 3 3;
  stroke-width: 1.5;
}
.ibx-diagram .ibx-p-warn {
  fill: var(--ibx-warm);
}

/* A label that sits across a connector. paint-order puts the stroke down
   first, so a stroke in the page ground reads as a halo punched through the
   line rather than as an outline on the text. */
.ibx-diagram .ibx-halo {
  paint-order: stroke fill;
  stroke: var(--ibx-bg);
  stroke-linejoin: round;
  stroke-width: 4px;
}

/* --------------------------------------------------------------- chrome -- */
.md-nav__link--active,
.md-nav__link:is(:hover, :focus) {
  color: var(--ibx-accent);
}
.md-sidebar--secondary .md-nav__link--active {
  font-weight: 600;
}
.md-footer {
  border-top: 1px solid var(--ibx-border);
}
.md-footer-meta {
  background-color: var(--ibx-bg-alt);
}
.md-footer__link:is(:hover, :focus) {
  opacity: 1;
  color: var(--ibx-accent);
}
.md-copyright__highlight {
  color: var(--ibx-text-muted);
}
.md-social__link:is(:hover, :focus) {
  color: var(--ibx-accent);
}
:focus-visible {
  outline: 2px solid var(--ibx-accent);
  outline-offset: 3px;
}