/* ═══════════════════════════════════════════════════════════════════════════
   LAMB Wiki — brand layer over Material for MkDocs.

   The tokens below are the ones lambsite is built from (src/index.css) and the
   app's design system uses: the same greens, the same warm canvas, the same
   two typefaces. A farmer moves between the app's help drawer, the website and
   this wiki inside one task, and the wiki being a stock MkDocs install made
   that feel like three different products.

   Everything here is theming — no layout is moved, so Material upgrades keep
   working. Bump `?v=` in mkdocs.yml when this file changes: it is served with
   a year of immutable caching.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Bitter for headings, Public Sans for text — one request for both, which is
   why theme.font is false in mkdocs.yml (it fetches a single family, and would
   have pulled Roboto besides). */
@import url("https://fonts.googleapis.com/css2?family=Bitter:wght@300;400;500;600&family=Public+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");

/* ── Brand tokens ─────────────────────────────────────────────────────────
   Named as on the website so the two can be compared line by line. */
:root {
  --lamb-deep: #14342a;        /* header, footer, dark bands */
  --lamb-brand: #3b694e;       /* links, accents */
  --lamb-brand-ink: #2e5540;   /* hovered links */
  --lamb-brand-wash: #dfece4;  /* active nav background */
  --lamb-canvas: #f6f2ec;      /* page ground */
  --lamb-surface: #ffffff;
  --lamb-line: #e6e0d7;        /* hairlines */
  --lamb-ink: #241f1a;
  --lamb-soft: #5c544b;        /* secondary text */
  --lamb-orange: #f28c18;      /* the mark's accent, used sparingly */
}

/* ── Light scheme ───────────────────────────────────────────────────────── */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--lamb-deep);
  --md-primary-fg-color--light: var(--lamb-brand);
  --md-primary-fg-color--dark: #0f2820;
  --md-primary-bg-color: #f4f1ea;
  --md-primary-bg-color--light: #cfdbd3;

  --md-accent-fg-color: var(--lamb-brand-ink);
  --md-accent-fg-color--transparent: rgba(59, 105, 78, 0.1);

  --md-default-bg-color: var(--lamb-canvas);
  --md-default-fg-color: var(--lamb-ink);
  --md-default-fg-color--light: var(--lamb-soft);
  --md-default-fg-color--lighter: #918879;
  --md-default-fg-color--lightest: var(--lamb-line);

  --md-typeset-color: var(--lamb-ink);
  --md-typeset-a-color: var(--lamb-brand);

  --md-code-bg-color: #efeae1;
  --md-code-fg-color: #33302b;

  --md-footer-bg-color: var(--lamb-deep);
  --md-footer-bg-color--dark: #0f2820;
}

/* ── Dark scheme ────────────────────────────────────────────────────────────
   Not the light palette inverted: the deep green is already dark, so the
   header would vanish into the page. The ground goes near-black-green and the
   accents lighten instead. */
[data-md-color-scheme="slate"] {
  --md-hue: 160;

  --md-primary-fg-color: #10281f;
  --md-primary-bg-color: #e8efe9;

  --md-accent-fg-color: #7fb495;

  --md-default-bg-color: #12201a;
  --md-default-fg-color--lightest: rgba(233, 239, 234, 0.16);

  --md-typeset-a-color: #8cc4a4;

  --md-code-bg-color: #16281f;

  --md-footer-bg-color: #0f2820;
  --md-footer-bg-color--dark: #0c211a;
}

/* ── Typography ───────────────────────────────────────────────────────────
   Public Sans throughout, Bitter for the headings — light and tightly tracked,
   the same editorial voice as the website's section headings. */
:root {
  --md-text-font: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --md-code-font: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  font-family: "Bitter", Georgia, serif;
  color: var(--md-default-fg-color);
  letter-spacing: -0.015em;
}

.md-typeset h1 {
  font-weight: 300;
  font-size: 2.1rem;
  line-height: 1.15;
  margin-bottom: 1.2rem;
}

.md-typeset h2 {
  font-weight: 400;
  font-size: 1.45rem;
  line-height: 1.25;
  margin-top: 2.1em;
  /* A rule above every section: the guides are long and step-shaped, and the
     heading alone was not enough of a break between them. */
  padding-top: 0.9rem;
  border-top: 1px solid var(--md-default-fg-color--lightest);
}

/* A page that already separates its sections with `---` would otherwise get
   two lines a few pixels apart: the rule it asked for, and the heading's own. */
.md-typeset hr + h2,
.md-typeset h2:first-child {
  border-top: 0;
  padding-top: 0;
  margin-top: 1.4em;
}

.md-typeset h3 {
  font-weight: 500;
  font-size: 1.15rem;
}

.md-typeset {
  font-size: 0.8rem;
  line-height: 1.72;
}

/* The site title next to the logo, in the display face. */
.md-header__topic .md-ellipsis {
  font-family: "Bitter", Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* ── Header ───────────────────────────────────────────────────────────────
   A hairline under it rather than Material's drop shadow: the whole design
   system is drawn with hairlines, and the shadow was the loudest thing on an
   otherwise quiet page. */
.md-header {
  box-shadow: none;
  border-bottom: 1px solid rgba(239, 235, 226, 0.16);
}

.md-header--shadow {
  box-shadow: none;
}

.md-header__button.md-logo img {
  height: 1.5rem;
  width: auto;
}

/* Search: a filled field on the dark header, matching the app's search bars. */
.md-search__form {
  background-color: rgba(239, 235, 226, 0.14);
  border-radius: 0.2rem;
}

.md-search__form:hover {
  background-color: rgba(239, 235, 226, 0.22);
}

[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
  border-radius: 0.2rem 0.2rem 0 0;
}

/* ── Navigation ───────────────────────────────────────────────────────────
   The active page marked with a washed background and a brand rule, instead of
   colouring the text alone — in a nav this long the coloured word was easy to
   lose. */
.md-nav {
  font-size: 0.72rem;
}

.md-nav__title {
  font-family: "Bitter", Georgia, serif;
  font-weight: 500;
  color: var(--md-default-fg-color--light);
}

.md-nav__link--active,
.md-nav__link--active:focus,
.md-nav__link--active:hover {
  color: var(--lamb-brand-ink);
  font-weight: 600;
}

[data-md-color-scheme="default"] .md-nav__item .md-nav__link--active {
  background-color: var(--lamb-brand-wash);
  border-left: 2px solid var(--lamb-brand);
  margin-left: -0.6rem;
  padding-left: 0.6rem;
  border-radius: 0 0.15rem 0.15rem 0;
}

/* ── Content surfaces ─────────────────────────────────────────────────────
   The page ground is the warm canvas, so tables, code and admonitions sit on
   white cards over it — the same figure/ground the app uses. */
.md-typeset table:not([class]) {
  background-color: var(--lamb-surface);
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.2rem;
  font-size: 0.72rem;
  box-shadow: none;
}

.md-typeset table:not([class]) th {
  background-color: var(--md-code-bg-color);
  color: var(--md-default-fg-color);
  font-weight: 600;
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) {
  background-color: rgba(255, 255, 255, 0.03);
}

.md-typeset pre > code,
.md-typeset code {
  border-radius: 0.2rem;
}

/* Admonitions: square-ish, hairline-bordered, no drop shadow — Material's
   default card look fights the flat surfaces everywhere else. */
.md-typeset .admonition,
.md-typeset details {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-left-width: 3px;
  border-radius: 0.2rem;
  box-shadow: none;
  background-color: var(--lamb-surface);
  font-size: 0.74rem;
}

[data-md-color-scheme="slate"] .md-typeset .admonition,
[data-md-color-scheme="slate"] .md-typeset details {
  background-color: rgba(255, 255, 255, 0.03);
}

.md-typeset .admonition-title,
.md-typeset summary {
  font-weight: 600;
  background-color: transparent;
}

/* ── Step-by-step screenshots in the how-to guides ────────────────────────
   The app's canvas is nearly the same warm off-white as the page, so without a
   hairline the phone's edges dissolve into the text column and the picture
   reads as part of the page rather than as a screen. */
.md-typeset img.screenshot {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.6rem;
  box-shadow: 0 10px 24px -18px rgba(20, 52, 42, 0.5);
  background-color: var(--lamb-surface);
}

/* ── Region tags on the guides ────────────────────────────────────────────
   Pills rather than Material's default chips, to read as labels on a document
   instead of as links to press. */
.md-typeset .md-tag {
  background-color: var(--lamb-brand-wash);
  color: var(--lamb-brand-ink);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 0.15rem;
}

[data-md-color-scheme="slate"] .md-typeset .md-tag {
  background-color: rgba(140, 196, 164, 0.14);
  color: #a8d3ba;
}

/* ── Footer ───────────────────────────────────────────────────────────────
   The prev/next links sit on the deep band; Material's default border made a
   second line right under the header's. */
.md-footer__inner {
  padding: 0.6rem 0;
}

/* ── Green checkmarks in feature matrix tables ────────────────────────── */
.md-typeset .tick {
  color: var(--lamb-brand);
  font-weight: 700;
}

[data-md-color-scheme="slate"] .md-typeset .tick {
  color: #81c784;
}

/* ── Private pages, hidden from navigation until authenticated ────────────
   auth-nav.js adds .wiki-authed to <html> after a successful probe of
   /private/. Covers the sidebar nav, the prev/next footer links and search
   results. */
html:not(.wiki-authed) .md-nav__item:has(a[href*="private/"]),
html:not(.wiki-authed) a.md-footer__link[href*="private/"],
html:not(.wiki-authed) .md-search-result__item:has(a[href*="private/"]) {
  display: none;
}