/* mReport brand palette, mirrored from mreport/theme.py.
   Keep in sync with MREPORT_ACCENT / MREPORT_DARK there. */
:root {
  --mreport-accent: #FFE650;
  --mreport-accent-hover: #F5D93C;
  --mreport-dark: #212121;
  --mreport-dark-panel: #262626;
  /* Link color, taken from the marketing site's own accent token
     (saas/multipage_website/site/site.json). The brand yellow cannot be a link color on
     a white page (1.2:1), and the dark ochre that stood in for it belonged to no palette.
     This teal is a real brand color and scores better: 5.43:1 on white against 4.92:1.
     `-dark` is the same hue (190°) lightened for the slate scheme, where #0D7488 itself
     drops to 3.08:1. Hover moves one step further from the background in both schemes. */
  --mreport-link: #0D7488;
  --mreport-link-hover: #0A6577;
  --mreport-link-dark: #4CC2D9;
  --mreport-link-dark-hover: #7BDCEE;
}

/* Brand colors hook into Material's `primary: custom` / `accent: custom`.
   The base scheme (default/slate) still supplies background and text tokens. */
[data-md-color-primary="custom"] {
  --md-primary-fg-color: var(--mreport-accent);
  --md-primary-fg-color--light: var(--mreport-accent-hover);
  --md-primary-fg-color--dark: var(--mreport-accent-hover);
  /* The brand yellow is a BACKGROUND color, never a text color: #FFE650 on white is
     ~1.2:1. Material paints header text with --md-primary-bg-color, so pinning it to the
     dark ink keeps the header readable on yellow. */
  --md-primary-bg-color: var(--mreport-dark);
  --md-primary-bg-color--light: rgba(33, 33, 33, 0.7);
}

/* Material paints link hover with the accent token and the resting link with
   --md-typeset-a-color, which is exactly the marketing site's `a` / `a:hover` pair. */
[data-md-color-accent="custom"] {
  --md-accent-fg-color: var(--mreport-link-hover);
  --md-accent-fg-color--transparent: rgba(10, 101, 119, 0.1);
}
[data-md-color-scheme="default"] {
  --md-typeset-a-color: var(--mreport-link);
}

/* Same hue, lightened: links keep one identity across schemes, and the yellow is left to
   mean brand and primary action rather than doubling as a link color. */
[data-md-color-scheme="slate"] {
  --md-typeset-a-color: var(--mreport-link-dark);
}
[data-md-color-scheme="slate"][data-md-color-primary="custom"] {
  /* A full-width yellow header is overwhelming in dark mode; use the app's panel
     color and let the yellow appear only in links and accents. */
  --md-primary-fg-color: var(--mreport-dark-panel);
  --md-primary-bg-color: #ffffff;
}
[data-md-color-scheme="slate"][data-md-color-accent="custom"] {
  --md-accent-fg-color: var(--mreport-link-dark-hover);
  --md-accent-fg-color--transparent: rgba(123, 220, 238, 0.1);
}

/* Screenshots are UI captures: a border stops them bleeding into the page, and the
   radius matches the app's own card radius. */
.md-typeset img {
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.10);
}
[data-md-color-scheme="slate"] .md-typeset img {
  border-color: rgba(255, 255, 255, 0.14);
}

/* Swatch used by the generated color reference. */
.mreport-swatch {
  display: inline-block;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 4px;
  vertical-align: -0.2rem;
  margin-right: 0.4rem;
  border: 1px solid rgba(0, 0, 0, 0.25);
}

/* Top strip (overrides/main.html): brand mark left, links right. Replaces the theme
   logo in the header bar, so the page shows one brand mark rather than two. */
.mreport-topbar {
  display: flex;
  padding: 0.25rem 0;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.72rem;
  max-width: 61rem;
  margin: 0 auto;
}
.mreport-topbar-brand {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.mreport-topbar-brand img {
  height: 1.9rem;
  width: auto;
  display: block;
  /* No border, background or radius of our own — the lockup already carries the yellow
     document tile, and a second frame around it reads as a box. */
  border: 0;
  border-radius: 0;
  background: none;
}

/* The strip is pinned to the dark ink in BOTH schemes rather than following the header
   color. The full lockup's icon is yellow, which would disappear on the yellow header
   in light mode; on dark ink it reads exactly as it does in the app's own sidebar. */
.md-banner {
  background: var(--mreport-dark);
  color: #ffffff;
}
.md-banner a {
  color: #ffffff;
}
.mreport-topbar-links {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-left: auto;
}
.mreport-topbar a {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
}
/* The strip carries one action, and it is the whole point of a documentation site for a
   product: get to the product. It is yellow at rest so it reads as the primary target,
   while mreport.ch stays white as a plain sibling link. Safe here and only here — the
   file's rule that the brand yellow is a background color is about WHITE backgrounds
   (1.2:1); this strip is pinned to the dark ink in both schemes, where #FFE650 is ~14:1. */
/* Selector carries `.md-banner` deliberately: `.md-banner a` above is (0,1,1) and would
   otherwise outrank a lone class and paint this white. */
.md-banner a.mreport-topbar-cta {
  color: var(--mreport-accent);
}

/* Hover has to keep saying something after the link is already yellow, so the CTA shifts
   to the deeper accent while the underline does the rest.

   The `.md-banner a` override is what keeps the strip out of the link palette entirely.
   Material's hover color is picked for text on the PAGE, and this strip is pinned to the
   dark ink in both schemes: the light-mode accent #0A6577 lands at 2.6:1 on it. Both
   schemes hover to the brand yellow here (12.8:1), which is also what the strip should
   say — up here the yellow means "the product", not "a link". */
.mreport-topbar-links a:hover {
  text-decoration: underline;
}
.md-banner a:hover,
.md-banner a:focus {
  color: var(--mreport-accent);
}
.md-banner a.mreport-topbar-cta:hover,
.md-banner a.mreport-topbar-cta:focus {
  color: var(--mreport-accent-hover);
}
/* Narrow screens drop the `mreport.ch` text link, not the logo. The logo IS a link to
   mreport.ch, so the text is the redundant half — and hiding the logo instead left a phone
   in portrait with no brand mark at all, since the header's own logo is hidden too. */
@media screen and (max-width: 44em) {
  .mreport-topbar { gap: 0.5rem; }
  .mreport-topbar-brand img { height: 1.6rem; }
  .mreport-topbar-links a:not(.mreport-topbar-cta) { display: none; }
}

/* The brand mark lives in the top strip, so the header bar shows the site name only.
   Material falls back to its own default logo icon when theme.logo is unset, so it is
   hidden here rather than replaced — two marks on one screen read as a mistake. */
.md-header__button.md-logo {
  display: none;
}