/* Flexbooks brand on Material for MkDocs: teal from docs/design-tokens.md (--color-brand). */
:root,
[data-md-color-scheme="default"] {
  --md-primary-fg-color: #0f766e;        /* --color-brand */
  --md-primary-fg-color--light: #14b8a6;
  --md-primary-fg-color--dark: #115e59;  /* --color-brand-hover */
  --md-primary-bg-color: #ffffff;        /* --color-brand-fg */
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.7);
  --md-accent-fg-color: #115e59;
  --md-accent-fg-color--transparent: rgba(15, 118, 110, 0.1);
  --md-typeset-a-color: #0f766e;
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #0f766e;
  --md-primary-fg-color--light: #2dd4bf;
  --md-primary-fg-color--dark: #115e59;
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.7);
  --md-accent-fg-color: #2dd4bf;         /* --color-brand (dark) */
  --md-accent-fg-color--transparent: rgba(45, 212, 191, 0.1);
  --md-typeset-a-color: #2dd4bf;
}

/* System fonts: no third-party font requests from the docs site. */
:root {
  --md-text-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif;
  --md-code-font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono",
    monospace;
}

/* Landing page hero: the pitch beside a real report of the demo company; stacked on a phone. */
.fb-hero {
  padding: 0.5rem 0 0.25rem;
}
@media screen and (min-width: 60em) {
  .fb-hero {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 2rem;
    align-items: center;
  }
}
.md-typeset .fb-hero__image img {
  display: block;
  box-shadow: var(--md-shadow-z2);
  /* The whole report, its totals row included: that is the point of the picture. */
  width: 100%;
}
.md-typeset .fb-hero__image p {
  margin: 0;
}

/* Inner pages: the title is the strongest thing on the page, not paler than its sections. */
.md-typeset h1 {
  font-weight: 700;
  color: var(--md-default-fg-color);
}

/* Cards in even pairs: no orphan beside an empty column. The columns belong to the grid itself:
   the theme makes the card list `display: contents`. */
@media screen and (min-width: 45em) {
  .md-typeset .grid.cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* The demo button in the header: the page's main next step, on every page. */
.fb-header-demo {
  flex-shrink: 0;
  margin: 0 0.4rem;
  padding: 0.25rem 0.7rem;
  border-radius: 0.2rem;
  background: var(--md-primary-bg-color);
  color: var(--md-primary-fg-color--dark);
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
}
/* On a phone the short label: the product's name in the header stays readable beside it. */
.fb-header-demo__short {
  display: none;
}
@media screen and (max-width: 30em) {
  .fb-header-demo {
    margin: 0 0.1rem;
    padding: 0.25rem 0.5rem;
  }
  .fb-header-demo__long {
    display: none;
  }
  .fb-header-demo__short {
    display: inline;
  }
  .md-header__title {
    margin-left: 0.2rem;
    min-width: 5rem;
  }
}
.fb-header-demo:hover,
.fb-header-demo:focus {
  color: var(--md-primary-fg-color);
  opacity: 0.92;
}

/* A note in a manual is often the caveat that matters: as strong as the text around it. */
.md-typeset blockquote {
  color: var(--md-default-fg-color);
  border-left: 0.2rem solid var(--md-primary-fg-color);
  background: var(--md-accent-fg-color--transparent);
  padding: 0.4rem 0.8rem;
}
.md-typeset blockquote > p {
  margin: 0.2rem 0;
}

/* A table takes the width of the text and images around it. */
.md-typeset__table {
  width: 100%;
}
.md-typeset__table > table,
.md-typeset table:not([class]) {
  display: table;
  width: 100%;
}

/* The nightly reset banner: its links stay readable on the dark bar. */
.md-banner a,
.md-banner a:hover {
  color: inherit;
  text-decoration: underline;
}

/* FAQ: the brand colour, not the theme's lime for "question". */
.md-typeset details.question,
.md-typeset .admonition.question {
  border-color: var(--md-primary-fg-color);
}
.md-typeset .question > .admonition-title,
.md-typeset .question > summary {
  background-color: var(--md-accent-fg-color--transparent);
}
.md-typeset .question > summary::after {
  color: var(--md-primary-fg-color);
}
.md-typeset .question > .admonition-title::before,
.md-typeset .question > summary::before {
  background-color: var(--md-primary-fg-color);
}

/* Logins never break in the middle, whatever the width: the table scrolls instead. */
.md-typeset .fb-credentials code {
  white-space: nowrap;
}
/* On a phone the logins matter more than the description of each profile. */
@media screen and (max-width: 45em) {
  .md-typeset .fb-credentials th:nth-child(2),
  .md-typeset .fb-credentials td:nth-child(2) {
    display: none;
  }
  .md-typeset .fb-credentials code {
    font-size: 0.72em;
  }
}
.md-typeset .fb-hero h1 {
  font-weight: 700;
  margin-bottom: 0.4rem;
  color: var(--md-default-fg-color);
}
.md-typeset .fb-lead {
  font-size: 1.05rem;
  max-width: 44rem;
  color: var(--md-default-fg-color--light);
}
/* The migration line is the page's message: the colour of the text, not its grey. */
.md-typeset .fb-lead strong {
  color: var(--md-default-fg-color);
}
/* Proof before the feature cards: two real screens with what they show. */
@media screen and (min-width: 60em) {
  .fb-proof {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
  }
}
.md-typeset .md-button {
  margin: 0.25rem 0.5rem 0.25rem 0;
}

/* Placeholder values the coordinator reconciles with the demo deployment. */
.md-typeset .fb-placeholder {
  font-weight: 600;
  color: #b45309;
}
[data-md-color-scheme="slate"] .md-typeset .fb-placeholder {
  color: #fbbf24;
}

/* Screenshots: a quiet frame so the white UI does not melt into the page. */
.md-typeset img[src*="images/"] {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 6px;
}