/* 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;
}

/* Brand colours 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 colour, never a text colour: #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);
}

/* Links need contrast against the page, so they use a dark gold rather than the
   yellow itself: #8A6D00 on white is 5.3:1 (AA). */
[data-md-color-accent="custom"] {
  --md-accent-fg-color: #8A6D00;
  --md-accent-fg-color--transparent: rgba(138, 109, 0, 0.1);
}
[data-md-color-scheme="default"] {
  --md-typeset-a-color: #8A6D00;
}

/* On the dark scheme the yellow has plenty of contrast, so it is used directly. */
[data-md-color-scheme="slate"] {
  --md-typeset-a-color: var(--mreport-accent);
}
[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
     colour 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-accent);
}

/* 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 colour 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
   colour. 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;
}
.mreport-topbar-links a:hover {
  text-decoration: underline;
}
@media screen and (max-width: 44em) {
  .mreport-topbar-brand { display: none; }
  .mreport-topbar { justify-content: flex-end; }
}

/* 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;
}