/* The brand fonts, served from this site (assets/fonts/, SIL Open Font License beside them),
   never from Google Fonts — mkdocs.yml sets `theme.font: false` so Material loads none either.
   Figtree for headings, Manrope for text, as in the app (mscan/app/fonts.py). latin-ext is
   fetched only when a page uses one of its characters. */
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/figtree-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/figtree-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* mScan brand for the docs, mirrored from mscan/theme.py — keep in sync with MSCAN_ACCENT,
   MSCAN_ACCENT_HOVER, MSCAN_DARK and MSCAN_ACCENT_ON_LIGHT there.

   Contrast (WCAG): the lime is a BACKGROUND and dark-surface colour, never text on white
   (#A6D84A on white is 1.6:1). Links on white use a deepened lime, #4A6E0B (5.96:1); on the
   dark scheme the brand lime itself (9.6:1). */
:root {
  --mscan-accent: #A6D84A;
  --mscan-accent-hover: #B8E85E;
  --mscan-dark: #1F2D1E;
  --mscan-link: #4A6E0B;
  --mscan-link-hover: #3A5708;
  --mscan-gradient: linear-gradient(90deg, #365B67 0%, #639446 85%);
  --md-text-font: "Manrope";
}

/* Headings in Figtree, as in the app; body text is Manrope via --md-text-font. */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  font-family: Figtree, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 800;
  letter-spacing: -0.01em;
}
/* Material greys the page title; the app sets titles at full contrast. */
.md-typeset h1 {
  color: var(--md-default-fg-color);
}

/* The header carries the app's brand gradient in both schemes, with white text (the
   gradient's lighter end still gives white 4.5:1+). */
[data-md-color-primary="custom"] {
  --md-primary-fg-color: #365B67;
  --md-primary-fg-color--light: #639446;
  --md-primary-fg-color--dark: #2C4A54;
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.72);
}
.md-header,
.md-tabs {
  background: var(--mscan-gradient);
}

[data-md-color-accent="custom"] {
  --md-accent-fg-color: var(--mscan-link-hover);
  --md-accent-fg-color--transparent: rgba(74, 110, 11, 0.1);
}
[data-md-color-scheme="default"] {
  --md-typeset-a-color: var(--mscan-link);
}
[data-md-color-scheme="slate"] {
  --md-typeset-a-color: var(--mscan-accent);
}
[data-md-color-scheme="slate"][data-md-color-accent="custom"] {
  --md-accent-fg-color: var(--mscan-accent-hover);
  --md-accent-fg-color--transparent: rgba(166, 216, 74, 0.12);
}

/* Screenshots are UI captures: a border stops them bleeding into the page, and the radius
   matches the app's 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);
}

/* Top strip (overrides/main.html): the white lockup on the brand dark, links right. It
   replaces the theme logo in the header bar, so the page shows one brand mark, not two. */
.md-banner {
  background: var(--mscan-dark);
  color: #ffffff;
}
.md-banner a {
  color: #ffffff;
}
.mscan-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;
}
.mscan-topbar-brand {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.mscan-topbar-brand img {
  height: 1.7rem;
  width: auto;
  display: block;
  border: 0;
  border-radius: 0;
  background: none;
}
.mscan-topbar-links {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-left: auto;
}
.mscan-topbar a {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
}
/* The strip's one action — get to the product — in the brand lime (8.6:1 on the dark). */
.md-banner a.mscan-topbar-cta {
  color: var(--mscan-accent);
}
.mscan-topbar-links a:hover {
  text-decoration: underline;
}
.md-banner a:hover,
.md-banner a:focus {
  color: var(--mscan-accent);
}
.md-banner a.mscan-topbar-cta:hover,
.md-banner a.mscan-topbar-cta:focus {
  color: var(--mscan-accent-hover);
}
/* Narrow screens drop the text link, not the logo (the logo is the same link). */
@media screen and (max-width: 44em) {
  .mscan-topbar { gap: 0.5rem; }
  .mscan-topbar-brand img { height: 1.5rem; }
  .mscan-topbar-links a:not(.mscan-topbar-cta) { display: none; }
}

/* The brand mark lives in the top strip; hide Material's fallback logo icon in the header. */
.md-header__button.md-logo {
  display: none;
}

/* The placeholder's "coming soon" card. */
.mscan-soon {
  border-radius: 14px;
  padding: 1rem 1.2rem;
  background: rgba(166, 216, 74, 0.14);
  border: 1px solid rgba(166, 216, 74, 0.45);
}