/*
 * extra.css - How Lens Help looks: Inter and JetBrains Mono from this site's own assets/fonts, MachAI's colours
 * as the tokens below in the light and the dark scheme, the type, and the header. The Ask about Lens panel
 * (chat.js) has its own file, chat.css, which uses the same tokens.
 *
 * Sizes are in rem, as Material's are: 1rem is 20px at the browser's default text size, and grows with it.
 * Colours are plain hex: the harness that checks contrast, and Material's theme-color, read rgb() values only.
 */

/* The fonts: one variable file per style and alphabet, so a page fetches only what its text needs.
   JetBrains Mono's symbols file holds the box-drawing lines of the directory trees on two pages, so that a
   tree stays in one font and its columns stay aligned. Licences: fonts/OFL-Inter.txt, fonts/OFL-JetBrainsMono.txt. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/inter-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: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/inter-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/inter-italic-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: "Inter";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/inter-italic-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/jetbrains-mono-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: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/jetbrains-mono-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/jetbrains-mono-symbols.woff2") format("woff2");
  unicode-range: U+2026, U+2500, U+2502, U+2514, U+251C;
}

/* Material reads these two names for its whole text and code stacks; the reader's own fonts stay behind them. */
:root {
  --md-text-font: "Inter";
  --md-code-font: "JetBrains Mono";
}

/* The tokens, light. Material puts the scheme on <body>, so they are set there as its own variables are, and
   its variables follow from them. Material's slate values apply on screens only, and so do the dark tokens
   below: a page always prints light. */
:root,
[data-md-color-scheme="default"] {
  --lens-ground: #ffffff;
  --lens-ground-2: #f5f5f7; /* bands and cards */
  --lens-border: #e8e8ed; /* hairlines that only separate */
  --lens-outline: #86868b; /* the edge of a field or a button: 3:1 or more on the ground and on ground-2 */
  --lens-text: #1d1d1f;
  --lens-text-2: #6e6e73; /* secondary text and small print: 4.5:1 on the ground and on ground-2 */
  --lens-accent: #5e2fd6; /* links, the primary button, step numbers */
  --lens-accent-hover: #3f1fa8;
  --lens-accent-ink: #ffffff; /* text on the accent */
  --lens-accent-tint: #5e2fd61a;
  --lens-panel: #ffffff;
  --lens-user-bubble: #5e2fd6;
  --lens-refusal-bg: #fff7ed;
  --lens-refusal-border: #fde2c4;
  --lens-refusal-text: #1d1d1f;
  --lens-refusal-strong: #1d1d1f;
  --lens-shadow-card: 0 1px 2px #0000000a;
  --lens-shadow-float: 0 24px 64px #0000002e, 0 0 0 1px #0000000d;
  --lens-step: var(--lens-text); /* the circle of a step's number, black */
  --lens-step-ink: var(--lens-ground);
  --lens-ask-hover: #424245; /* the black pill under the pointer */

  --md-default-fg-color: var(--lens-text);
  --md-default-fg-color--light: var(--lens-text-2);
  --md-default-fg-color--lighter: #86868b;
  --md-default-fg-color--lightest: var(--lens-border);
  --md-default-bg-color: var(--lens-ground);
  --md-default-bg-color--light: #ffffffb3;
  --md-default-bg-color--lighter: #ffffff4d;
  --md-default-bg-color--lightest: #ffffff1f;
  --md-code-fg-color: var(--lens-text);
  --md-code-bg-color: var(--lens-ground-2);
  --md-typeset-color: var(--lens-text);
  --md-typeset-a-color: var(--lens-accent);
  --md-typeset-table-color: var(--lens-border);
  --md-typeset-table-color--light: var(--lens-ground-2);
  --md-admonition-fg-color: var(--lens-text);
  --md-admonition-bg-color: var(--lens-ground-2);
  --md-footer-fg-color: var(--lens-text-2);
  --md-footer-fg-color--light: var(--lens-text-2);
  --md-footer-fg-color--lighter: var(--lens-text-2);
  --md-footer-bg-color: var(--lens-ground);
  --md-footer-bg-color--dark: var(--lens-ground);

  /* primary: custom and accent: custom in mkdocs.yml leave these at Material's indigo unless set here. */
  --md-primary-fg-color: var(--lens-accent);
  --md-primary-fg-color--light: var(--lens-accent);
  --md-primary-fg-color--dark: var(--lens-accent-hover);
  --md-primary-bg-color: var(--lens-accent-ink);
  --md-primary-bg-color--light: #ffffffb3;
  --md-accent-fg-color: var(--lens-accent-hover);
  --md-accent-fg-color--transparent: var(--lens-accent-tint);
  --md-accent-bg-color: var(--lens-accent-ink);
  --md-accent-bg-color--light: #ffffffb3;
}

/* The tokens, dark: the desktop app's own palette. Two attributes, so a scheme kept in the browser from the
   indigo days (data-md-color-primary="indigo") cannot bring back Material's lighter indigo links. */
@media screen {
  [data-md-color-scheme="slate"],
  [data-md-color-scheme="slate"][data-md-color-primary] {
    --lens-ground: #0f1115;
    --lens-ground-2: #1a2230;
    --lens-border: #262a33;
    --lens-outline: #6b7385;
    --lens-text: #f5f5f7;
    --lens-text-2: #9aa3b2;
    --lens-accent: #4fc3f7;
    --lens-accent-hover: #8adbff;
    --lens-accent-ink: #0f1115;
    --lens-accent-tint: #4fc3f729;
    --lens-panel: #151922;
    --lens-user-bubble: #5e2fd6;
    --lens-refusal-bg: #3a2c10;
    --lens-refusal-border: #5a4418;
    --lens-refusal-text: #ffe0b2;
    --lens-refusal-strong: #ffb74d;
    --lens-shadow-card: none;
    --lens-shadow-float: 0 24px 64px #00000080, 0 0 0 1px #262a33;
    --lens-step: var(--lens-accent);
    --lens-step-ink: var(--lens-ground);
    --lens-ask-hover: #ffffff;

    --md-default-fg-color: var(--lens-text);
    --md-default-fg-color--light: var(--lens-text-2);
    --md-default-fg-color--lighter: #6b7385;
    --md-default-fg-color--lightest: var(--lens-border);
    --md-default-bg-color: var(--lens-ground);
    --md-default-bg-color--light: #0f1115b3;
    --md-default-bg-color--lighter: #0f11154d;
    --md-default-bg-color--lightest: #0f11151f;
    --md-code-fg-color: var(--lens-text);
    --md-code-bg-color: var(--lens-ground-2);
    --md-typeset-color: var(--lens-text);
    --md-typeset-a-color: var(--lens-accent);
    --md-typeset-table-color: var(--lens-border);
    --md-typeset-table-color--light: var(--lens-ground-2);
    --md-admonition-fg-color: var(--lens-text);
    --md-admonition-bg-color: var(--lens-ground-2);
    --md-footer-fg-color: var(--lens-text-2);
    --md-footer-fg-color--light: var(--lens-text-2);
    --md-footer-fg-color--lighter: var(--lens-text-2);
    --md-footer-bg-color: var(--lens-ground);
    --md-footer-bg-color--dark: var(--lens-ground);

    --md-primary-fg-color: var(--lens-accent);
    --md-primary-fg-color--light: var(--lens-accent);
    --md-primary-fg-color--dark: var(--lens-accent-hover);
    --md-primary-bg-color: var(--lens-accent-ink);
    --md-primary-bg-color--light: #0f1115b3;
    --md-accent-fg-color: var(--lens-accent-hover);
    --md-accent-fg-color--transparent: var(--lens-accent-tint);
    --md-accent-bg-color: var(--lens-accent-ink);
    --md-accent-bg-color--light: #0f1115b3;
  }
}

body {
  background-color: var(--lens-ground);
}

/* Type: one face, large quiet headings, body at 16 px. */
.md-typeset {
  font-size: 0.8rem;
  line-height: 1.55;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  color: var(--lens-text);
  font-weight: 700;
}

.md-typeset h1 {
  margin: 0 0 1.2rem;
  font-size: 2rem; /* 40 px */
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.md-typeset h2 {
  margin: 2rem 0 0.8rem;
  font-size: 1.3rem; /* 26 px */
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.md-typeset h3 {
  margin: 1.6rem 0 0.6rem;
  font-size: 0.95rem; /* 19 px */
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.md-typeset a {
  text-decoration: none;
}

.md-typeset a:hover,
.md-typeset a:focus-visible {
  text-decoration: underline;
}

/* The header: the ground with a hairline under it, in place of Material's coloured band. */
.md-header,
.md-header--shadow {
  background-color: var(--lens-ground);
  color: var(--lens-text);
  border-bottom: 0.05rem solid var(--lens-border);
  box-shadow: none;
}

.lens-header__inner {
  gap: 0.6rem;
  max-width: none;
  height: 2.8rem; /* 56 px */
  padding: 0 2.4rem;
}

.lens-brand {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.5rem;
  margin-right: auto;
  color: var(--lens-text);
  font-size: 0.75rem; /* 15 px */
  line-height: 1;
  white-space: nowrap;
}

.lens-brand__mark {
  display: block;
  width: 1.3rem; /* 26 px */
  height: 1.3rem;
}

.lens-brand__name {
  font-weight: 600;
  letter-spacing: -0.01em;
}

.lens-brand__help {
  color: var(--lens-text-2);
}

/* The home page's header: the six sections as plain links in place of the search field. */
.lens-sections {
  display: none;
}

@media screen and (min-width: 76.25em) {
  .lens-header--home .lens-sections {
    display: flex;
    flex-wrap: wrap;
    gap: 1.6rem;
    margin-right: auto;
    font-size: 0.65rem; /* 13 px */
  }

  .lens-sections__link {
    color: var(--lens-text);
  }

  .lens-sections__link:hover,
  .lens-sections__link:focus-visible {
    color: var(--lens-accent);
  }
}

/* Round icon buttons: the light and dark toggle, and below 960 px search and the menu. Material decides which
   of them shows at which width; these rules only give them their shape. */
.lens-header .md-header__button.md-icon {
  box-sizing: border-box;
  width: 1.8rem; /* 36 px */
  height: 1.8rem;
  margin: 0;
  padding: 0.45rem;
  border: 0.05rem solid var(--lens-border);
  border-radius: 50%;
  background-color: var(--lens-ground);
  color: var(--lens-text);
}

[data-md-color-scheme="slate"] .lens-header .md-header__button.md-icon {
  background-color: var(--lens-ground-2);
}

.lens-header .md-header__button.md-icon svg {
  width: 0.8rem; /* 16 px */
  height: 0.8rem;
}

.lens-header .md-header__button:hover {
  opacity: 1;
  border-color: var(--lens-outline);
}

/* The line icons (overrides/.icons/lens) are strokes, where Material's own are filled shapes. */
svg.lens-stroke {
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lens-header .md-header__option {
  flex-shrink: 0;
}

/* "Ask about Lens": a black pill (white in the dark), here and wherever a page asks for the panel. */
.lens-ask {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.4rem;
  height: 1.8rem;
  padding: 0 0.8rem;
  border: 0;
  border-radius: 0.9rem;
  background-color: var(--lens-text);
  color: var(--lens-ground);
  font-family: inherit;
  font-size: 0.65rem; /* 13 px */
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.lens-ask:focus-visible {
  outline: 0.1rem solid var(--lens-accent);
  outline-offset: 0.1rem;
}

/* A speech bubble, drawn: the panel's own button (chat.css) draws the same one. */
.lens-ask__icon {
  box-sizing: border-box;
  width: 0.65rem;
  height: 0.65rem;
  border: 0.1rem solid currentcolor;
  border-radius: 50% 50% 50% 0.1rem;
}

/* The search field: a grey pill in the middle of the header, wider while it is in use. */
@media screen and (min-width: 60em) {
  .lens-header .md-search {
    display: flex;
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
    padding: 0;
  }

  .lens-header .md-search__inner {
    float: none;
    width: 18rem; /* 360 px */
    max-width: 100%;
    padding: 0;
  }

  [data-md-toggle="search"]:checked ~ .lens-header .md-search__inner {
    width: 28rem;
  }

  .lens-header .md-search__form,
  .lens-header .md-search__form:hover {
    height: 1.8rem;
    border-radius: 0.9rem;
    background-color: var(--lens-ground-2);
  }

  [data-md-toggle="search"]:checked ~ .lens-header .md-search__form {
    border-radius: 0.9rem 0.9rem 0 0;
    background-color: var(--lens-ground);
    box-shadow: 0 0 0 0.05rem var(--lens-border);
  }

  .lens-header .md-search__input {
    padding-left: 2.2rem;
    color: var(--lens-text);
    font-size: 0.7rem; /* 14 px */
  }

  .lens-header .md-search__input::placeholder,
  .lens-header .md-search__input + .md-search__icon {
    color: var(--lens-text-2);
  }

  .lens-header .md-search__icon svg {
    width: 0.8rem;
    height: 0.8rem;
    margin: 0.2rem; /* centred in Material's 24 px icon box */
  }

  .lens-header .md-search__output {
    border-radius: 0 0 0.9rem 0.9rem;
    box-shadow: var(--lens-shadow-float);
  }

  /* The home page has its own search (the field in the middle of the page) and the sections in the header:
     there the header searches from its round button, and the field shows while it is in use. */
  .lens-header--home .md-header__button[for="__search"]:not([hidden]) {
    display: inline-block;
  }

  .lens-header--home .md-search {
    flex: 0 0 auto;
    margin-left: -0.6rem; /* no room of its own while it is closed */
  }

  .lens-header--home .md-search__inner {
    width: 0;
    visibility: hidden;
  }

  [data-md-toggle="search"]:checked ~ .lens-header--home .md-search__inner {
    visibility: visible;
  }

  /* Centred by its margins: a transform would make it the box that the page-wide dimming is fixed to. */
  [data-md-toggle="search"]:checked ~ .lens-header--home .md-search {
    position: absolute;
    right: 0;
    left: 0;
    width: 28rem;
    margin: 0 auto;
  }

  [data-md-toggle="search"]:checked ~ .lens-header--home .md-search__inner {
    width: 100%;
  }
}

/* Below 960 px the header keeps the mark, "Lens Help" and its round buttons; the panel's own button floats at
   the bottom right instead of the pill. */
@media screen and (max-width: 59.984375em) {
  .lens-header__inner {
    padding: 0 1rem;
  }

  .lens-brand__maker,
  .lens-ask--header {
    display: none;
  }

  .lens-brand__help {
    margin-left: -0.3rem; /* "Lens Help", one name, a word space apart */
    color: var(--lens-text);
    font-weight: 600;
  }

  /* Search opens over the whole screen here, so its own box takes no room in the row. */
  .lens-header .md-search {
    margin-left: -0.6rem;
  }

  .lens-header .md-header__button.md-icon {
    border-color: transparent;
    background-color: var(--lens-ground-2);
  }
}

/* Words for screen readers only, such as the label of the home page's search field. */
.lens-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* The home page (overrides/home.html): full-width bands in place of the sidebars and the article column.
   Without :has() the bands keep Material's column, and the page still reads in order. */
.md-main:has(.lens-home) .md-main__inner {
  max-width: none;
  margin-top: 0;
}

/* As specific as Material's rule that sets the article beside a sidebar, which the hidden one still matches. */
[dir] .lens-sidebar--home:not([hidden]) ~ .lens-home > .md-content__inner,
.lens-home > .md-content__inner {
  margin: 0;
  padding: 0;
}

.lens-home > .md-content__inner::before {
  display: none;
}

@media screen and (min-width: 76.25em) {
  .lens-sidebar--home {
    display: none;
  }
}

.lens-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 5.6rem 1.2rem 3.6rem;
  text-align: center;
  background: linear-gradient(180deg, var(--lens-ground) 0%, var(--lens-ground-2) 100%);
}

[data-md-color-scheme="slate"] .lens-hero {
  background: radial-gradient(45rem 21rem at 50% 0%, #5e2fd647 0%, #0f111500 70%);
}

.lens-hero__mark {
  width: 3.6rem; /* 72 px */
  height: 3.6rem;
  border-radius: 0.9rem;
  box-shadow: 0 0.6rem 1.6rem #5e2fd640;
}

[data-md-color-scheme="slate"] .lens-hero__mark {
  box-shadow: 0 0 2.4rem #4fc3f759;
}

.md-typeset .lens-hero h1 {
  max-width: 38rem;
  margin: 0.6rem 0 0;
  font-size: 2.8rem; /* 56 px */
  line-height: 1.07;
  letter-spacing: -0.03em;
}

/* The tagline the template puts under the title, then the page's own paragraph about Lens. */
.md-typeset .lens-hero h1 + p {
  max-width: 31rem;
  margin: 0;
  color: var(--lens-text-2);
  font-size: 1.05rem; /* 21 px */
  line-height: 1.4;
}

.md-typeset .lens-hero h1 + p + p {
  max-width: 34rem;
  margin: 0;
  color: var(--lens-text-2);
}

/* Search the pages, or ask: Enter searches (Material opens its search from ?q=), Ask asks the panel. */
.lens-hero__field {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  box-sizing: border-box;
  width: 100%;
  max-width: 34rem; /* 680 px */
  height: 2.8rem;
  margin-top: 0.8rem;
  padding: 0 0.4rem 0 0.3rem;
  border: 0.05rem solid var(--lens-outline);
  border-radius: 1.4rem;
  background-color: var(--lens-ground);
  box-shadow: 0 0.1rem 0.6rem #0000000f;
}

[data-md-color-scheme="slate"] .lens-hero__field {
  background-color: var(--lens-ground-2);
  box-shadow: none;
}

.lens-hero__field:focus-within {
  outline: 0.1rem solid var(--lens-accent);
  outline-offset: 0.1rem;
}

.lens-hero__search {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--lens-text-2);
  cursor: pointer;
}

.lens-hero__search svg {
  width: 1rem;
  height: 1rem;
}

.lens-hero__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: none;
  background: none;
  color: var(--lens-text);
  font-family: inherit;
  font-size: 0.85rem; /* 17 px */
  text-overflow: ellipsis; /* the example in the placeholder, cut short on a phone */
}

.lens-hero__input::placeholder {
  color: var(--lens-text-2);
  opacity: 1;
}

.lens-hero__ask {
  flex-shrink: 0;
  height: 2rem;
  padding: 0 0.9rem;
  border: 0;
  border-radius: 1rem;
  background-color: var(--lens-accent);
  color: var(--lens-accent-ink);
  font-family: inherit;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
}

.lens-hero__ask:focus-visible,
.lens-hero__search:focus-visible {
  outline: 0.1rem solid var(--lens-accent);
  outline-offset: 0.1rem;
}

.md-typeset .lens-hero__note {
  margin: 0.2rem 0 0;
  color: var(--lens-text-2);
  font-size: 0.65rem; /* 13 px */
}

/* The bands under the hero: grey in the light scheme, the ground in the dark, where the cards carry an edge. */
.lens-band {
  padding: 1.2rem 2.4rem;
  background-color: var(--lens-ground-2);
}

[data-md-color-scheme="slate"] .lens-band {
  background-color: transparent;
}

.lens-band__inner {
  max-width: 56rem; /* 1120 px */
  margin: 0 auto;
}

.lens-start {
  padding-top: 3.6rem;
}

.md-typeset .lens-start h2 {
  margin: 0 0 1.4rem;
  font-size: 1.6rem; /* 32 px */
}

.md-typeset ul.lens-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A card: the page's own link is its title, and the link's ::before covers the card, so the whole card answers
   to it while a screen reader hears the title alone. */
.md-typeset ul.lens-cards > li.lens-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  box-sizing: border-box;
  min-height: 10rem;
  margin: 0;
  padding: 1.4rem;
  border-radius: 1rem; /* 20 px */
  background-color: var(--lens-ground);
  color: var(--lens-text);
  box-shadow: var(--lens-shadow-card);
}

[data-md-color-scheme="slate"] .md-typeset ul.lens-cards > li.lens-card {
  background-color: var(--lens-ground-2);
  box-shadow: 0 0 0 0.05rem var(--lens-border);
}

.md-typeset a.lens-card__title {
  color: var(--lens-text);
}

.md-typeset a.lens-card__title::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.md-typeset a.lens-card__title:hover,
.md-typeset a.lens-card__title:focus-visible {
  text-decoration: none;
}

.md-typeset a.lens-card__title:focus-visible {
  outline: none;
}

.md-typeset a.lens-card__title:focus-visible::before {
  border-radius: 1rem;
  outline: 0.1rem solid var(--lens-accent);
  outline-offset: 0.1rem;
}

.lens-card__icon {
  display: grid;
  place-items: center;
  width: 2.2rem; /* 44 px */
  height: 2.2rem;
  border-radius: 0.6rem;
}

.lens-card__icon svg {
  width: 1.1rem;
  height: 1.1rem;
}

/* The four tints, as the reference has them: violet, cyan, orange and green. */
.lens-card--violet .lens-card__icon { background-color: #efeaff; color: #5e2fd6; }
.lens-card--cyan .lens-card__icon { background-color: #e6f7fa; color: #0e8a9c; }
.lens-card--orange .lens-card__icon { background-color: #fff1e6; color: #c2550a; }
.lens-card--green .lens-card__icon { background-color: #e8f5ea; color: #1e7b34; }

[data-md-color-scheme="slate"] .lens-card--violet .lens-card__icon { background-color: #8b5cf62e; color: #b49bff; }
[data-md-color-scheme="slate"] .lens-card--cyan .lens-card__icon { background-color: #4fc3f729; color: #4fc3f7; }
[data-md-color-scheme="slate"] .lens-card--orange .lens-card__icon { background-color: #ffb74d29; color: #ffb74d; }
[data-md-color-scheme="slate"] .lens-card--green .lens-card__icon { background-color: #66bb6a29; color: #81c784; }

.lens-card__title {
  font-size: 0.95rem; /* 19 px */
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.lens-card__text {
  color: var(--lens-text-2);
  font-size: 0.7rem; /* 14 px */
  line-height: 1.5;
}

/* The note under each list: the page's own sentence, as small print. */
.lens-home__note,
.md-typeset .lens-tasks > p {
  color: var(--lens-text-2);
  font-size: 0.65rem;
}

.md-typeset .lens-home__note p {
  margin: 1rem 0 0;
}

.lens-pair {
  padding-top: 2.4rem;
  padding-bottom: 4rem;
}

.lens-pair__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

/* Core workflows: the page's list as rows, each a link the width of the card with a chevron. */
.lens-tasks {
  padding: 1.6rem;
  border-radius: 1rem;
  background-color: var(--lens-ground);
}

[data-md-color-scheme="slate"] .lens-tasks {
  background-color: var(--lens-ground-2);
  box-shadow: 0 0 0 0.05rem var(--lens-border);
}

.md-typeset .lens-tasks h2 {
  margin: 0 0 0.6rem;
  font-size: 1.05rem; /* 21 px */
  font-weight: 600;
  letter-spacing: -0.01em;
}

.md-typeset ul.lens-tasks__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.md-typeset ul.lens-tasks__list > li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.25em;
  margin: 0;
  padding: 0.7rem 1.2rem 0.7rem 0;
  border-top: 0.05rem solid var(--lens-border);
  font-size: 0.75rem; /* 15 px */
}

.md-typeset ul.lens-tasks__list > li::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.3rem;
  width: 0.35rem;
  height: 0.35rem;
  border-top: 0.1rem solid var(--lens-accent);
  border-right: 0.1rem solid var(--lens-accent);
  transform: translateY(-50%) rotate(45deg);
}

.md-typeset ul.lens-tasks__list a {
  color: var(--lens-text);
}

/* The whole row is the link. */
.md-typeset ul.lens-tasks__list a::before {
  content: "";
  position: absolute;
  inset: 0;
}

.md-typeset ul.lens-tasks__list a:hover,
.md-typeset ul.lens-tasks__list a:focus-visible {
  color: var(--lens-accent);
  text-decoration: none;
}

/* Ask about Lens, the card: violet to a deep cyan, deep enough at its end for white text at 4.5:1 or more. */
.lens-askcard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 1.6rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, #5e2fd6 0%, #0e7490 100%);
  color: #ffffff;
}

.md-typeset .lens-askcard__eyebrow {
  margin: 0;
  font-size: 0.6rem; /* 12 px */
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.md-typeset .lens-askcard__title {
  margin: 0;
  color: #ffffff;
  font-size: 1.4rem; /* 28 px */
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.md-typeset .lens-askcard__text {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.5;
}

.lens-askcard__try {
  margin-top: 0.4rem;
  height: 2rem;
  padding: 0 0.9rem;
  border: 0;
  border-radius: 1rem;
  background-color: #ffffff;
  color: #3f1fa8;
  font-family: inherit;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
}

.lens-askcard__try:focus-visible {
  outline: 0.1rem solid #ffffff;
  outline-offset: 0.15rem;
}

@media screen and (max-width: 59.984375em) {
  .md-typeset ul.lens-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lens-pair__inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media screen and (max-width: 44.984375em) {
  .lens-hero {
    padding: 3.2rem 1rem 2.4rem;
  }

  .md-typeset .lens-hero h1 {
    font-size: 2rem; /* 40 px on a phone */
  }

  .md-typeset .lens-hero h1 + p {
    font-size: 0.9rem;
  }

  .lens-band {
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .lens-start {
    padding-top: 2.4rem;
  }

  .md-typeset .lens-start h2 {
    font-size: 1.3rem;
  }

  .md-typeset ul.lens-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .md-typeset ul.lens-cards > li.lens-card {
    min-height: 0;
  }
}

/* The article pages: the navigation at the left, the page in a column of 680 px, "On this page" at the right. */
@media screen and (min-width: 76.25em) {
  /* The site's name above the navigation: the header says it already. */
  .md-nav--primary > .md-nav__title {
    display: none;
  }

  /* Each section's name, as a small label over its pages. */
  .md-nav--primary .md-nav__item--section {
    margin: 0 0 0.6rem;
  }

  .md-nav--primary .md-nav__item--section > .md-nav__link {
    padding: 0.4rem 0.6rem;
    color: var(--lens-text-2);
    font-size: 0.6rem; /* 12 px */
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .md-nav--primary .md-nav__item--section > .md-nav > .md-nav__list > .md-nav__item {
    padding: 0;
  }
}

/* The pages, as rows with rounded ends; the page you are on in bold, on grey. */
.md-nav--primary .md-nav__link {
  margin-top: 0;
  padding: 0.4rem 0.6rem;
  border-radius: 0.5rem;
  color: var(--lens-text);
  font-size: 0.7rem; /* 14 px */
  line-height: 1.4;
}

.md-nav--primary .md-nav__item .md-nav__link--active {
  background-color: var(--lens-ground-2);
  color: var(--lens-text);
  font-weight: 600;
}

.md-nav--primary .md-nav__link:hover,
.md-nav--primary .md-nav__link:focus-visible {
  color: var(--lens-accent);
}

.md-nav--primary .md-nav__link--active:hover {
  color: var(--lens-text);
}

/* The navigation drawer below 1220 px: the ground, not Material's coloured band, with hairlines between rows. */
@media screen and (max-width: 76.234375em) {
  .md-nav--primary .md-nav__title,
  .md-nav--primary .md-nav__title[for="__drawer"] {
    background-color: var(--lens-ground);
    color: var(--lens-text);
    font-weight: 600;
    box-shadow: 0 0.05rem 0 var(--lens-border);
  }

  .md-nav--primary .md-nav__title[for="__drawer"] .md-logo img {
    width: 1.3rem;
    height: 1.3rem;
  }

  .md-nav--primary .md-nav__item {
    border-top-color: var(--lens-border);
  }

  .md-nav--primary .md-nav__link {
    border-radius: 0;
    padding: 0.6rem 0.8rem;
  }

  .md-nav--primary .md-nav__item .md-nav__link--active {
    background-color: transparent;
    color: var(--lens-accent);
  }
}

/* "On this page": its headings with a 2 px line at the left, the accent on the one you are reading. */
.md-sidebar--secondary .md-nav__title {
  color: var(--lens-text-2);
  font-size: 0.6rem; /* 12 px */
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: none;
  box-shadow: none;
}

.md-sidebar--secondary .md-nav__list .md-nav__link {
  margin-top: 0;
  padding: 0.2rem 0 0.2rem 0.6rem;
  border-left: 0.1rem solid var(--lens-border);
  color: var(--lens-text-2);
  font-size: 0.65rem; /* 13 px */
  line-height: 1.4;
}

.md-sidebar--secondary .md-nav__list .md-nav .md-nav__link {
  padding-left: 1.2rem; /* a heading under a heading */
}

.md-sidebar--secondary .md-nav__list .md-nav__link--active,
.md-sidebar--secondary .md-nav__list .md-nav__link--active:hover {
  border-left-color: var(--lens-accent);
  color: var(--lens-text);
}

.md-sidebar--secondary .md-nav__list .md-nav__link:hover,
.md-sidebar--secondary .md-nav__list .md-nav__link:focus-visible {
  color: var(--lens-accent);
}

.md-sidebar--secondary .md-nav__list .md-nav__link--passed {
  color: var(--lens-text-2);
}

/* The column: 680 px at most, the page's first paragraph larger and quieter, as an introduction. */
.lens-article {
  max-width: 34rem; /* 680 px */
}

.md-typeset .lens-article h1 + p {
  color: var(--lens-text-2);
  font-size: 0.95rem; /* 19 px */
  line-height: 1.5;
}

/* Help › section, over the title. */
.lens-path {
  margin: 0 0 0.6rem;
  color: var(--lens-text-2);
  font-size: 0.65rem; /* 13 px */
}

.md-typeset ol.lens-path__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

[dir] .md-typeset .lens-path__list > li {
  margin: 0;
}

.md-typeset .lens-path__list > li + li::before {
  content: "›";
  margin-right: 0.3rem;
}

.md-typeset .lens-path a {
  color: var(--lens-text-2);
}

.md-typeset .lens-path a:hover,
.md-typeset .lens-path a:focus-visible {
  color: var(--lens-accent);
}

/* Steps: in Start here, the guides and the error pages, an ordered list's numbers sit in 32 px circles, black
   (the accent in the dark). counter(list-item) is the list's own count, so a list that starts later keeps it. */
.md-typeset .lens-steps ol:not(.lens-path__list) {
  margin-left: 0;
  list-style: none;
}

.md-typeset .lens-steps ol:not(.lens-path__list) > li {
  position: relative;
  min-height: 1.6rem;
  margin: 0 0 1rem;
  padding-left: 2.4rem;
}

.md-typeset .lens-steps ol:not(.lens-path__list) > li::before {
  content: counter(list-item);
  position: absolute;
  top: -0.2rem;
  left: 0;
  display: grid;
  place-items: center;
  width: 1.6rem; /* 32 px */
  height: 1.6rem;
  border-radius: 50%;
  background-color: var(--lens-step);
  color: var(--lens-step-ink);
  font-size: 0.7rem; /* 14 px */
  font-weight: 600;
  line-height: 1;
}

.md-typeset .lens-steps ol:not(.lens-path__list) > li > p:first-child {
  margin-top: 0;
}

/* One callout style for every kind of admonition (none is on a page yet), and for a quoted on-screen message:
   a grey box with rounded corners; an admonition also gets the info sign in the accent. */
[dir] .md-typeset .admonition,
[dir] .md-typeset details,
[dir] .md-typeset blockquote {
  margin: 1.2rem 0;
  padding: 0.8rem 0.9rem;
  border: 0;
  border-radius: 0.7rem; /* 14 px */
  background-color: var(--lens-ground-2);
  color: var(--lens-text);
  box-shadow: none;
  font-size: 0.7rem; /* 14 px */
  line-height: 1.5;
}

[data-md-color-scheme="slate"] .md-typeset .admonition,
[data-md-color-scheme="slate"] .md-typeset details,
[data-md-color-scheme="slate"] .md-typeset blockquote {
  box-shadow: 0 0 0 0.05rem var(--lens-border);
}

.md-typeset blockquote > :first-child,
.md-typeset .admonition > :first-child {
  margin-top: 0;
}

.md-typeset blockquote > :last-child,
.md-typeset .admonition > :last-child {
  margin-bottom: 0;
}

[dir] .md-typeset .admonition > .admonition-title,
[dir] .md-typeset details > summary {
  margin: 0 0 0.4rem;
  padding: 0 0 0 1.6rem;
  border: 0;
  background: none;
  font-weight: 600;
}

[dir] .md-typeset .admonition > .admonition-title::before,
[dir] .md-typeset details > summary::before {
  top: 0.1rem;
  left: 0;
  width: 1rem;
  height: 1rem;
  background-color: var(--lens-accent);
  -webkit-mask-image: var(--md-admonition-icon--info);
  mask-image: var(--md-admonition-icon--info);
}

/* Images, and any screenshot still to come, with rounded corners and an edge. */
.md-typeset img,
.md-typeset .lens-screenshot {
  border: 0.05rem solid var(--lens-border);
  border-radius: 0.8rem; /* 16 px */
}

.md-typeset figcaption {
  color: var(--lens-text-2);
  font-size: 0.65rem; /* 13 px */
}

/* Tables: a rounded edge, a grey head row, the rows apart by hairlines. */
.md-typeset table:not([class]) {
  border: 0.05rem solid var(--lens-border);
  border-radius: 0.7rem;
  font-size: 0.7rem;
  box-shadow: none;
}

.md-typeset table:not([class]) th {
  background-color: var(--lens-ground-2);
  color: var(--lens-text);
  font-weight: 600;
}

.md-typeset table:not([class]) td,
.md-typeset table:not([class]) th {
  padding: 0.6rem 0.8rem;
  border-top: 0.05rem solid var(--lens-border);
}

.md-typeset table:not([class]) tr:first-child th {
  border-top: 0;
}

/* A code in a table stays on one line: the table scrolls sideways (Material's) before a code breaks. */
.md-typeset table:not([class]) code {
  white-space: nowrap;
  word-break: normal;
}

/* Code: JetBrains Mono on grey, rounded. */
.md-typeset code {
  border-radius: 0.3rem;
}

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

/* The end of a page: a question for the panel about it, then when the page was last brought up to date. */
.lens-more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  margin: 2.4rem 0 0;
  padding: 1.2rem;
  border-radius: 1rem; /* 20 px */
  background-color: var(--lens-ground-2);
}

[data-md-color-scheme="slate"] .lens-more {
  box-shadow: 0 0 0 0.05rem var(--lens-border);
}

.md-typeset .lens-more__title {
  margin: 0;
  font-size: 0.75rem; /* 15 px */
  font-weight: 600;
}

.lens-more__ask {
  height: 1.8rem;
  padding: 0 0.8rem;
  border: 0;
  border-radius: 0.9rem; /* 18 px */
  background-color: var(--lens-accent);
  color: var(--lens-accent-ink);
  font-family: inherit;
  font-size: 0.7rem;
  font-weight: 500;
  cursor: pointer;
}

.lens-more__ask:focus-visible {
  outline: 0.1rem solid var(--lens-accent);
  outline-offset: 0.1rem;
}

.md-typeset .lens-updated {
  margin: 0.8rem 0 0;
  color: var(--lens-text-2);
  font-size: 0.6rem; /* 12 px */
}

/* The MachAI mark in the head of the Ask about Lens panel. The panel's own stylesheet, chat.css, loads nothing;
   the mark is the site's image, the one in the header, so it is drawn here. */
.lens-chat__head::before {
  content: "";
  flex: none;
  width: 1.4rem; /* 28 px */
  height: 1.4rem;
  background: url("machai-icon.png") center / contain no-repeat;
}

/* The footer: one line and the two links, small and grey, under a hairline. The room under them is the panel's
   button's, which floats at the bottom right: at the end of a page the links sit above it, not under it. */
.md-footer.lens-footer {
  border-top: 0.05rem solid var(--lens-border);
  background-color: var(--lens-ground);
  color: var(--lens-text-2);
}

.lens-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1.2rem;
  padding: 1.2rem 2.4rem 5rem;
  font-size: 0.6rem; /* 12 px */
}

.lens-footer__line {
  margin: 0;
}

.lens-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.lens-footer__links a {
  color: var(--lens-text-2);
}

.lens-footer__links a:hover,
.lens-footer__links a:focus-visible {
  color: var(--lens-accent);
}

@media screen and (max-width: 44.984375em) {
  .lens-footer__inner {
    padding: 1.2rem 1rem 5rem;
  }
}

/* Under the pointer: the pills darken (lighten in the dark), the home page's cards lift a little. */
.lens-ask:hover {
  background-color: var(--lens-ask-hover);
}

.lens-hero__ask:hover,
.lens-more__ask:hover {
  background-color: var(--lens-accent-hover);
}

.lens-hero__search:hover {
  color: var(--lens-text);
}

.lens-askcard__try:hover {
  background-color: #f0ebff;
}

.md-typeset ul.lens-cards > li.lens-card:hover {
  box-shadow: 0 0.6rem 1.6rem #0000001a;
  transform: translateY(-0.1rem);
}

[data-md-color-scheme="slate"] .md-typeset ul.lens-cards > li.lens-card:hover {
  box-shadow: 0 0 0 0.05rem var(--lens-outline);
}

/* 200 ms, for hovering only: Material turns transitions off while the scheme switches, and a reader who asks
   for less motion gets none. */
.lens-ask,
.lens-hero__ask,
.lens-hero__search,
.lens-askcard__try,
.lens-more__ask,
.lens-sections__link,
.lens-footer__links a,
.lens-path a,
.lens-header .md-header__button.md-icon,
.md-nav--primary .md-nav__link,
.md-sidebar--secondary .md-nav__link,
.md-typeset ul.lens-tasks__list a,
.md-typeset ul.lens-cards > li.lens-card {
  transition: color 200ms ease, background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease,
    transform 200ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .lens-ask,
  .lens-hero__ask,
  .lens-hero__search,
  .lens-askcard__try,
  .lens-more__ask,
  .lens-sections__link,
  .lens-footer__links a,
  .lens-path a,
  .lens-header .md-header__button.md-icon,
  .md-nav--primary .md-nav__link,
  .md-sidebar--secondary .md-nav__link,
  .md-typeset ul.lens-tasks__list a,
  .md-typeset ul.lens-cards > li.lens-card {
    transition: none;
  }

  .md-typeset ul.lens-cards > li.lens-card:hover {
    transform: none;
  }
}