/* A chart is as wide as its spec; it scrolls on a narrow screen instead of overflowing the page. */
div.vega-lite { overflow-x: auto; margin: 1em 0; }

/* A name with hover text (assets/hover.js): a dotted line, and a box like an IDE's on hover. */
.hover-name { cursor: help; text-decoration: underline dotted color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: 3px; }
#hover-tip { position: fixed; z-index: 10; max-width: min(42rem, calc(100vw - 16px)); padding: 0.5rem 0.7rem;
  background: var(--md-default-bg-color); color: var(--md-default-fg-color); font-size: 0.72rem; line-height: 1.45;
  border: 1px solid var(--md-default-fg-color--lighter); border-radius: 6px; box-shadow: 0 4px 16px rgb(0 0 0 / 0.15); pointer-events: none; }
#hover-tip code { display: block; white-space: pre-wrap; font-size: 0.7rem; background: none; padding: 0; margin-bottom: 0.25rem; }
#hover-tip .hover-where { color: var(--md-default-fg-color--light); margin-top: 0.2rem; }

/* The home page: the name and the tagline at the top. */
.hero { padding: 1.2rem 0 0.4rem; }
.hero h1 { margin-bottom: .2rem; }
.hero p.tagline { font-size: 1.15rem; opacity: .85; margin-top: 0; }
.md-typeset table:not([class]) { font-size: .72rem; }
.md-typeset table:not([class]) td code, .md-typeset table:not([class]) th code { white-space: nowrap; }
.md-banner code { background: rgba(255,255,255,.12); color: inherit; }

/* The colours of the landing page and the harness editor: ink for the header, 1 blue for links. */
:root > * {
  --md-primary-fg-color: #1f2328; --md-primary-fg-color--light: #5f666e; --md-primary-fg-color--dark: #000000;
  --md-accent-fg-color: #2f5fd0; --md-typeset-a-color: #2f5fd0;
  --md-code-font: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --md-text-font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
[data-md-color-scheme="slate"] {
  --md-default-bg-color: #1e1f22; --md-primary-fg-color: #18191b;
  --md-accent-fg-color: #6d9bff; --md-typeset-a-color: #6d9bff;
}
.md-typeset h1, .md-typeset h2, .hero h1 { font-family: "Source Serif 4", Georgia, serif; font-weight: 600; letter-spacing: -0.01em; }
.md-typeset h1 { color: inherit; }
.md-banner { background-color: #1f2328; }
.md-typeset .admonition, .md-typeset details { border-radius: 4px; box-shadow: none; }
.md-typeset .grid.cards > ul > li { border-radius: 4px; box-shadow: none; }
.md-typeset .grid.cards > ul > li:hover { box-shadow: none; border-color: var(--md-accent-fg-color); }
/* The pre-alpha note: ink and grey, the same as the status line of the landing page. */
.md-typeset .admonition.warning { border-color: var(--md-default-fg-color); }
.md-typeset .warning > .admonition-title { background-color: var(--md-default-fg-color--lightest); }
.md-typeset .warning > .admonition-title::before { background-color: var(--md-default-fg-color); }
.md-typeset .hero h1 { font-family: "Source Serif 4", Georgia, serif; font-weight: 600; font-size: 2.4rem; }

/* The same look as the landing page (web/landing/index.html): a light header with a hairline, a mono
   wordmark, hairline tables with mono headers, flat code panes. */
:root > * {
  --md-primary-fg-color: #ffffff; --md-primary-bg-color: #1f2328; --md-primary-bg-color--light: #5f666e;
  --md-default-fg-color: #1f2328; --md-typeset-color: #1f2328;
  --md-code-bg-color: #f6f7f8; --scriptt-line: #e3e5e8; --scriptt-dim: #5f666e;
}
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #1e1f22; --md-primary-bg-color: #d6d8db; --md-primary-bg-color--light: #9aa0a6;
  --md-code-bg-color: #18191b; --scriptt-line: #303236; --scriptt-dim: #9aa0a6;
}
.md-header, .md-tabs { box-shadow: none; }
.md-header { border-bottom: 1px solid var(--scriptt-line); }
.md-tabs { border-bottom: 1px solid var(--scriptt-line); }
.md-header__topic:first-child { font-family: var(--md-code-font); font-weight: 600; }
.md-search__input { background-color: var(--md-code-bg-color); color: var(--md-default-fg-color); }
.md-banner { background-color: var(--md-code-bg-color); color: var(--md-default-fg-color); border-bottom: 1px solid var(--scriptt-line); }
.md-banner strong { font-weight: 600; }
.md-typeset table:not([class]) { border: none; box-shadow: none; border-radius: 0; }
.md-typeset table:not([class]) th { font-family: var(--md-code-font); font-weight: 400; color: var(--scriptt-dim); background: none; border-bottom: 1px solid var(--scriptt-line); }
.md-typeset table:not([class]) td { border-top: none; border-bottom: 1px solid var(--scriptt-line); }
.md-typeset table:not([class]) tbody tr:hover { background: none; }
.md-typeset pre > code { border: 1px solid var(--scriptt-line); border-radius: 4px; }
.md-typeset .grid.cards > ul > li { border: 1px solid var(--scriptt-line); }
/* "Real output": the "works" teal of the landing page. */
.md-typeset .admonition.success { border-color: #0f7a5c; }
.md-typeset .success > .admonition-title { background-color: rgba(15, 122, 92, .08); }
.md-typeset .success > .admonition-title::before { background-color: #0f7a5c; }