/* Helyx brand layer for Material for MkDocs.
 *
 * Everything here maps the Helyx documentation brand spec onto Material's CSS custom properties.
 * Tokens are declared once at the top and referenced below, so a brand change is an edit to the
 * :root block rather than a search across the file.
 */

:root {
  /* ---------------------------------------------------------------- brand tokens */
  --helyx-primary: #2563eb; /* links, active nav, primary actions */
  --helyx-accent: #38bdf8; /* focus states, secondary highlights */
  --helyx-hover: #1e40af;
  --helyx-text: #0f172a;
  --helyx-border: #e5e7eb;
  --helyx-bg: #ffffff;
  --helyx-bg-alt: #f8fafc;
  --helyx-grey: #f3f4f6;
  --helyx-gradient: linear-gradient(90deg, #2563eb 0%, #38bdf8 100%);
  --helyx-radius: 0.625rem; /* 10px */

  /* ---------------------------------------------------------------- Material mapping */
  --md-primary-fg-color: var(--helyx-bg);
  --md-primary-bg-color: var(--helyx-text);
  --md-accent-fg-color: var(--helyx-hover);
  --md-default-bg-color: var(--helyx-bg);
  --md-typeset-color: var(--helyx-text);
  --md-typeset-a-color: var(--helyx-primary);
  --md-footer-bg-color: var(--helyx-text);
  --md-footer-bg-color--dark: #0b1220;

  --md-text-font: "Inter";
  --md-code-font: "Geist Mono";
}

/* Header: a white surface with a hairline rather than a saturated blue bar. The spec asks for blue
   on interactive elements, not on large UI surfaces — and the logo is blue on transparent, so a
   blue header would swallow it. */
.md-header {
  border-bottom: 1px solid var(--helyx-border);
  box-shadow: none;
}
.md-header--shadow {
  box-shadow: none;
}
.md-header__button.md-logo :is(img, svg) {
  height: 1.5rem;
  width: auto;
}
/* The wordmark already says "Helyx"; repeating it beside the logo is noise. The page title stays
   for the browser tab and for screen readers via the logo's alt text. */
.md-header__topic:first-child {
  display: none;
}

/* Tabs: the active tab is marked with the brand gradient, the one place it earns its keep. */
.md-tabs {
  background-color: var(--helyx-bg);
  color: var(--helyx-text);
  border-bottom: 1px solid var(--helyx-border);
}
.md-tabs__link {
  opacity: 0.72;
  font-weight: 500;
}
.md-tabs__link:is(:hover, :focus, .md-tabs__link--active) {
  opacity: 1;
  color: var(--helyx-primary);
}
.md-tabs__item--active {
  position: relative;
}
.md-tabs__item--active::after {
  content: "";
  position: absolute;
  inset-inline: 0.8rem;
  bottom: 0;
  height: 2px;
  background: var(--helyx-gradient);
  border-radius: 2px 2px 0 0;
}

/* Search: a bordered light field rather than a tinted one, per "white/light surfaces". */
.md-search__form {
  background-color: var(--helyx-grey);
  border: 1px solid var(--helyx-border);
  border-radius: var(--helyx-radius);
  box-shadow: none;
}
.md-search__form:hover {
  background-color: var(--helyx-bg-alt);
}
[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
  border-color: var(--helyx-accent);
  box-shadow: 0 0 0 2px rgb(56 189 248 / 25%);
}

/* Navigation: the active page is the only strongly coloured item in the sidebar. */
.md-nav__link--active,
.md-nav__link--active code {
  color: var(--helyx-primary);
  font-weight: 600;
}
.md-nav__link:focus-visible,
.md-typeset a:focus-visible {
  outline: 2px solid var(--helyx-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Typography. Inter needs slightly tighter tracking at heading sizes than Material's default. */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--helyx-text);
}
.md-typeset h1 {
  font-weight: 700;
}
.md-typeset h2 {
  margin-top: 2.2em;
  padding-top: 0.6em;
  border-top: 1px solid var(--helyx-border);
}
/* Many pages here already separate sections with a literal `---`. Without this, such a page draws
   the rule and the heading's own border immediately below it — two lines and a dead band between. */
.md-typeset hr + h2 {
  border-top: none;
  margin-top: 1.2em;
  padding-top: 0;
}
.md-typeset {
  font-feature-settings: "cv02", "cv03", "cv04", "cv11"; /* Inter's more legible letterforms */
}

/* Surfaces: subtle borders, minimal shadow, 10px radius throughout. */
.md-typeset :is(pre, .highlight, .tabbed-set, details, .admonition) {
  border-radius: var(--helyx-radius);
}
.md-typeset .highlight,
.md-typeset pre > code {
  border: 1px solid var(--helyx-border);
}
.md-typeset :is(.admonition, details) {
  border: 1px solid var(--helyx-border);
  border-left-width: 3px;
  box-shadow: none;
  background-color: var(--helyx-bg-alt);
}

/* Tables. Several pages here are genuinely wide — the job catalogue especially — so the scroll
   belongs to the table, never to the page body. */
.md-typeset__table {
  width: 100%;
}
.md-typeset__scrollwrap {
  overflow-x: auto;
}
.md-typeset table:not([class]) {
  border: 1px solid var(--helyx-border);
  border-radius: var(--helyx-radius);
  box-shadow: none;
  font-size: 0.72rem;
}
.md-typeset table:not([class]) th {
  background-color: var(--helyx-bg-alt);
  color: var(--helyx-text);
  font-weight: 600;
}
.md-typeset table:not([class]) :is(td, th) {
  border-color: var(--helyx-border);
}

/* Footer */
.md-footer-meta {
  background-color: var(--helyx-text);
}

/* ------------------------------------------------------------------ mermaid
 * Material injects its own themeCSS built from these variables, so setting them here is what makes
 * diagram chrome — edges, labels, fonts — follow the brand. Node fills come from the classDefs the
 * diagrams themselves declare; see architecture/diagrams/README.md for the five roles.
 */
:root {
  --md-mermaid-font-family: "Inter", sans-serif;
  --md-mermaid-label-fg-color: var(--helyx-text);
  --md-mermaid-label-bg-color: var(--helyx-bg);
  --md-mermaid-node-fg-color: var(--helyx-text);
  --md-mermaid-node-bg-color: var(--helyx-grey);
  --md-mermaid-edge-color: #94a3b8;
  --md-mermaid-sequence-actor-fg-color: var(--helyx-text);
  --md-mermaid-sequence-actor-bg-color: #dbeafe;
  --md-mermaid-sequence-actor-border-color: #3b82f6;
  --md-mermaid-sequence-actor-line-color: #94a3b8;
  --md-mermaid-sequence-message-line-color: #94a3b8;
  --md-mermaid-sequence-message-fg-color: var(--helyx-text);
  --md-mermaid-sequence-note-fg-color: var(--helyx-text);
  --md-mermaid-sequence-note-bg-color: var(--helyx-grey);
  --md-mermaid-sequence-note-border-color: var(--helyx-border);
  --md-mermaid-sequence-box-fg-color: var(--helyx-text);
  --md-mermaid-sequence-box-bg-color: var(--helyx-bg-alt);
  --md-mermaid-sequence-number-fg-color: #ffffff;
  --md-mermaid-sequence-number-bg-color: var(--helyx-primary);
}

/* Two of the five diagram roles are dark fills carrying white text — Processing (#2563EB) and
   Storage (#1E3A8A). Material's themeCSS sets one label colour for every node, so without this the
   label would be #0F172A on a dark blue fill. classDef also emits a colour, but which of the two
   wins depends on mermaid's generated-CSS ordering; this makes it unconditional. */
   No CSS override is needed for label colour, and attempting one was a dead end worth recording.

   Rectangular nodes take their label colour from the diagram's own `classDef color:` correctly — the
   solid #2563EB Processing nodes render white text without help. Cylinder-shaped nodes (`[( )]`, used
   for storage) did not, and no external rule would reach them: selectors scoped to `.md-typeset`, to
   `.mermaid` (which Material strips on render), and to `g.node.store` with `!important` on every
   element in the label chain were all verified shipped, linked, and still had no effect.

   Rather than keep guessing at mermaid's internals, Storage moved to a light fill with a navy border
   (see architecture/diagrams/README.md). Light fills with dark text work on every shape, so the class
   of bug disappears instead of being patched. */

/* Diagrams are frequently wider than the content column; scroll them, do not shrink them into
   illegibility.
   Styled off the rendered <svg>, not off `.mermaid`. Rendering is asynchronous and can take several
   seconds on the larger graphs here, and Material drops the `.mermaid` class when it renders — so a
   rule hung off that class both misses every finished diagram and, worse, paints a bordered empty
   box around every block that has not rendered yet. */
.md-typeset svg[id^="mermaid"] {
  max-width: 100%;
  height: auto;
}
.md-typeset :has(> svg[id^="mermaid"]) {
  overflow-x: auto;
  border: 1px solid var(--helyx-border);
  border-radius: var(--helyx-radius);
  padding: 1rem 0.5rem;
  background-color: var(--helyx-bg);
}